@esri/calcite-components 1.0.0-beta.92 → 1.0.0-beta.93

package/dist/extras/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-08-18T04:25:45",
+  "timestamp": "2022-08-23T21:12:28",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.16.1",
@@ -10,7 +10,7 @@
       "filePath": "./src/components/accordion/accordion.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-accordion",
-      "readme": "# calcite-accordion\n\n`calcite-accordion` can be used to present content in collapsible sections. Configuration options exist for visual style (icon-position, scale, appearance), and selection functionality. Selection modes include \"multi\", \"single\", and \"single-persist\".\n",
+      "readme": "# calcite-accordion\r\n\r\n`calcite-accordion` can be used to present content in collapsible sections. Configuration options exist for visual style (icon-position, scale, appearance), and selection functionality. Selection modes include \"multi\", \"single\", and \"single-persist\".\r\n\r",
       "docs": "`calcite-accordion` can be used to present content in collapsible sections. Configuration options exist for visual style (icon-position, scale, appearance), and selection functionality. Selection modes include \"multi\", \"single\", and \"single-persist\".",
       "docsTags": [
         {
@@ -19,18 +19,18 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-accordion>\n  <calcite-accordion-item heading=\"Accordion Item\">Accordion Section Content </calcite-accordion-item>\n  <calcite-accordion-item heading=\"Accordion Item 2\" active>Accordion Section Content </calcite-accordion-item>\n  <calcite-accordion-item heading=\"Accordion Item 3\">Accordion Section Content </calcite-accordion-item>\n</calcite-accordion>\n```\n"
+        "Basic": "```html\r\n<calcite-accordion>\r\n  <calcite-accordion-item heading=\"Accordion Item\">Accordion Section Content </calcite-accordion-item>\r\n  <calcite-accordion-item heading=\"Accordion Item 2\" active>Accordion Section Content </calcite-accordion-item>\r\n  <calcite-accordion-item heading=\"Accordion Item 3\">Accordion Section Content </calcite-accordion-item>\r\n</calcite-accordion>\r\n```\r\n"
       },
       "props": [
         {
           "name": "appearance",
-          "type": "\"default\" | \"minimal\" | \"transparent\"",
+          "type": "\"default\" | \"minimal\" | \"solid\" | \"transparent\"",
           "mutable": false,
           "attr": "appearance",
           "reflectToAttr": true,
           "docs": "Specifies the appearance of the component.",
           "docsTags": [],
-          "default": "\"default\"",
+          "default": "\"solid\"",
           "values": [
             {
               "value": "default",
@@ -40,6 +40,10 @@
               "value": "minimal",
               "type": "string"
             },
+            {
+              "value": "solid",
+              "type": "string"
+            },
             {
               "value": "transparent",
               "type": "string"
@@ -128,7 +132,7 @@
           "mutable": false,
           "attr": "selection-mode",
           "reflectToAttr": true,
-          "docs": "Specifies the selection mode - \"multi\" (allow any number of open items), \"single\" (allow one open item),\nor \"single-persist\" (allow and require one open item).",
+          "docs": "Specifies the selection mode - \"multi\" (allow any number of open items), \"single\" (allow one open item),\r\nor \"single-persist\" (allow and require one open item).",
           "docsTags": [],
           "default": "\"multi\"",
           "values": [
@@ -184,7 +188,7 @@
       "filePath": "./src/components/accordion-item/accordion-item.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-accordion-item",
-      "readme": "# calcite-accordion-item\n\nindividual `calcite-accordion` item\n",
+      "readme": "# calcite-accordion-item\r\n\r\nindividual `calcite-accordion` item\r\n\r",
       "docs": "individual `calcite-accordion` item",
       "docsTags": [
         {
@@ -364,7 +368,7 @@
       "filePath": "./src/components/action/action.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-action",
-      "readme": "# calcite-action\n\nThe `calcite-action` component lives in either a `calcite-action-bar` or `calcite-action-pad`. Actions look like an icon with a text description option of the component that will be revealed when the icon/ text is clicked or selected.\n",
+      "readme": "# calcite-action\r\n\r\nThe `calcite-action` component lives in either a `calcite-action-bar` or `calcite-action-pad`. Actions look like an icon with a text description option of the component that will be revealed when the icon/ text is clicked or selected.\r\n\r",
       "docs": "The `calcite-action` component lives in either a `calcite-action-bar` or `calcite-action-pad`. Actions look like an icon with a text description option of the component that will be revealed when the icon/ text is clicked or selected.",
       "docsTags": [
         {
@@ -373,9 +377,9 @@
         }
       ],
       "usage": {
-        "Clear-appearance": "Renders a `calcite-action` that has a clear background.\n\n```html\n<calcite-action appearance=\"clear\" text=\"Layers\" icon=\"layers\"></calcite-action>\n```\n",
-        "With-text-displayed": "Renders a `calcite-action` that displays text along side an icon and a tooltip label.\n\n```html\n<calcite-action label=\"Performs my custom action\" text=\"Perform Action!\" text-enabled icon=\"save\"></calcite-action>\n```\n",
-        "Without-text-displayed": "Renders a `calcite-action` that displays only an icon and a tooltip label.\n\n```html\n<calcite-action label=\"Performs my custom action\" text=\"My Custom Action\" icon=\"plus\"></calcite-action>\n```\n"
+        "Clear-appearance": "Renders a `calcite-action` that has a clear background.\r\n\r\n```html\r\n<calcite-action appearance=\"clear\" text=\"Layers\" icon=\"layers\"></calcite-action>\r\n```\r\n",
+        "With-text-displayed": "Renders a `calcite-action` that displays text along side an icon and a tooltip label.\r\n\r\n```html\r\n<calcite-action label=\"Performs my custom action\" text=\"Perform Action!\" text-enabled icon=\"save\"></calcite-action>\r\n```\r\n",
+        "Without-text-displayed": "Renders a `calcite-action` that displays only an icon and a tooltip label.\r\n\r\n```html\r\n<calcite-action label=\"Performs my custom action\" text=\"My Custom Action\" icon=\"plus\"></calcite-action>\r\n```\r\n"
       },
       "props": [
         {
@@ -722,7 +726,7 @@
       "filePath": "./src/components/action-bar/action-bar.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-action-bar",
-      "readme": "# calcite-action-bar\n\n## Description\n\nThe `calcite-action-bar` component is made up of multiple `calcite-action`s in the form of clickable icons. The action bar can be expanded to view actions with descriptive text or made smaller to view with just icons.\n",
+      "readme": "# calcite-action-bar\r\n\r\n## Description\r\n\r\nThe `calcite-action-bar` component is made up of multiple `calcite-action`s in the form of clickable icons. The action bar can be expanded to view actions with descriptive text or made smaller to view with just icons.\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -739,10 +743,10 @@
         }
       ],
       "usage": {
-        "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",
-        "Bottom-actions": "The bottom-actions slot renders `calcite-action`s that stick to the bottom of the bar above 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=\"bottom-actions\" icon=\"mega-phone\"></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"
+        "Basic": "Renders `calcite-action`s that stick to the top of the bar.\r\n\r\n```html\r\n<calcite-action-bar>\r\n  <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\r\n  <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\r\n</calcite-action-bar>\r\n```\r\n",
+        "Bottom-actions": "The bottom-actions slot renders `calcite-action`s that stick to the bottom of the bar above the expand/collapse icon.\r\n\r\n```html\r\n<calcite-action-bar>\r\n  <calcite-action text=\"Information\" icon=\"information\"></calcite-action>\r\n  <calcite-action text=\"Feedback\" slot=\"bottom-actions\" icon=\"mega-phone\"></calcite-action>\r\n</calcite-action-bar>\r\n```\r\n",
+        "Tooltip": "Renders with a tooltip on the expand action.\r\n\r\n```html\r\n<calcite-action-bar id=\"action-bar-test\">\r\n  <calcite-tooltip slot=\"expand-tooltip\">Expand</calcite-tooltip>\r\n  <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\r\n</calcite-action-bar>\r\n```\r\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.\r\n\r\n```html\r\n<calcite-action-bar>\r\n  <calcite-action-group>\r\n    <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\r\n    <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\r\n  </calcite-action-group>\r\n\r\n  <calcite-action-group>\r\n    <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\r\n    <calcite-action text=\"Basemaps\" icon=\"layer-basemap\"></calcite-action>\r\n  </calcite-action-group>\r\n</calcite-action-bar>\r\n```\r\n"
       },
       "props": [
         {
@@ -981,7 +985,7 @@
       "filePath": "./src/components/action-group/action-group.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-action-group",
-      "readme": "# calcite-action-group\n\nThe `calcite-action-group` is a wrapper for multiple `calcite-action`s and housed in `calcite-action-bar` and `calcite-action-pad`.\n",
+      "readme": "# calcite-action-group\r\n\r\nThe `calcite-action-group` is a wrapper for multiple `calcite-action`s and housed in `calcite-action-bar` and `calcite-action-pad`.\r\n\r",
       "docs": "The `calcite-action-group` is a wrapper for multiple `calcite-action`s and housed in `calcite-action-bar` and `calcite-action-pad`.",
       "docsTags": [
         {
@@ -1200,7 +1204,7 @@
       "filePath": "./src/components/action-menu/action-menu.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-action-menu",
-      "readme": "# calcite-action-menu\n",
+      "readme": "# calcite-action-menu\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -1289,7 +1293,7 @@
           "mutable": false,
           "attr": "overlay-positioning",
           "reflectToAttr": false,
-          "docs": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\".",
+          "docs": "Determines the type of positioning to use for the overlaid content.\r\n\r\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\".",
           "docsTags": [],
           "default": "\"absolute\"",
           "values": [
@@ -1382,7 +1386,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Emits when the `open` property has changed.\n\n**Note:**: The event payload is deprecated, please use the `open` property on the component instead",
+          "docs": "Emits when the `open` property has changed.\r\n\r\n**Note:**: The event payload is deprecated, please use the `open` property on the component instead",
           "docsTags": []
         }
       ],
@@ -1447,7 +1451,7 @@
       "filePath": "./src/components/action-pad/action-pad.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-action-pad",
-      "readme": "# calcite-action-pad\n\nThe `calcite-action-pad` component is made up of `calcite-action`s in the form of clickable icons. This does not have an expandable option and is a smaller and simpler component than `calcite-action-bar`.\n",
+      "readme": "# calcite-action-pad\r\n\r\nThe `calcite-action-pad` component is made up of `calcite-action`s in the form of clickable icons. This does not have an expandable option and is a smaller and simpler component than `calcite-action-bar`.\r\n\r",
       "docs": "The `calcite-action-pad` component is made up of `calcite-action`s in the form of clickable icons. This does not have an expandable option and is a smaller and simpler component than `calcite-action-bar`.",
       "docsTags": [
         {
@@ -1460,9 +1464,9 @@
         }
       ],
       "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"
+        "Basic": "Renders a basic action pad with `calcite-action`s.\r\n\r\n```html\r\n<calcite-action-pad>\r\n  <calcite-action text=\"Undo\" icon=\"undo\"></calcite-action>\r\n  <calcite-action text=\"Redo\" icon=\"redo\"></calcite-action>\r\n</calcite-action-pad>\r\n```\r\n",
+        "Tooltip": "Renders an action pad with a tooltip on the expand action.\r\n\r\n```html\r\n<calcite-action-pad id=\"action-pad-test\">\r\n  <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\r\n</calcite-action-pad>\r\n<calcite-tooltip id=\"tooltip\">Expand</calcite-tooltip>\r\n<script>\r\n  var actionPad = document.getElementById(\"action-pad-test\");\r\n  var tooltip = document.getElementById(\"tooltip\");\r\n  actionPad.tooltipExpand = tooltip;\r\n</script>\r\n```\r\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.\r\n\r\n```html\r\n<calcite-action-pad>\r\n  <calcite-action-group>\r\n    <calcite-action text=\"Home\" icon=\"home\"></calcite-action>\r\n    <calcite-action text=\"Styles\" icon=\"add-in-edit\"></calcite-action>\r\n  </calcite-action-group>\r\n\r\n  <calcite-action text=\"Tips\" icon=\"lightbulb\"></calcite-action>\r\n</calcite-action-pad>\r\n```\r\n"
       },
       "props": [
         {
@@ -1684,7 +1688,7 @@
       "filePath": "./src/components/alert/alert.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-alert",
-      "readme": "# calcite-alert\n",
+      "readme": "# calcite-alert\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -1701,7 +1705,7 @@
         }
       ],
       "usage": {
-        "Basic": "A single instance of an alert. Multiple alerts will aggregate in a queue.\n\n```html\n<calcite-alert active>\n  <div slot=\"title\">Title of alert</div>\n  <div slot=\"message\">Message text of the alert</div>\n  <a slot=\"link\" href=\"#\">Retry</a>\n</calcite-alert>\n```\n"
+        "Basic": "A single instance of an alert. Multiple alerts will aggregate in a queue.\r\n\r\n```html\r\n<calcite-alert active>\r\n  <div slot=\"title\">Title of alert</div>\r\n  <div slot=\"message\">Message text of the alert</div>\r\n  <a slot=\"link\" href=\"#\">Retry</a>\r\n</calcite-alert>\r\n```\r\n"
       },
       "props": [
         {
@@ -1806,7 +1810,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": true,
-          "docs": "When true, shows a default recommended icon. Alternatively,\npass a Calcite UI Icon name to display a specific icon.",
+          "docs": "When true, shows a default recommended icon. Alternatively,\r\npass a Calcite UI Icon name to display a specific icon.",
           "docsTags": [],
           "values": [
             {
@@ -2045,11 +2049,11 @@
       "filePath": "./src/components/avatar/avatar.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-avatar",
-      "readme": "# calcite-avatar\n\nThe avatar component provides a unique (but consistent) visual for a user. It's built\nto work with users returned from the ArcGIS REST API.\n",
-      "docs": "The avatar component provides a unique (but consistent) visual for a user. It's built\nto work with users returned from the ArcGIS REST API.",
+      "readme": "# calcite-avatar\r\n\r\nThe avatar component provides a unique (but consistent) visual for a user. It's built\r\nto work with users returned from the ArcGIS REST API.\r\n\r",
+      "docs": "The avatar component provides a unique (but consistent) visual for a user. It's built\r\nto work with users returned from the ArcGIS REST API.",
       "docsTags": [],
       "usage": {
-        "Basic": "The JSON sample user below is returned from a [search for users](https://developers.arcgis.com/rest/users-groups-and-items/user-search.htm). You can create an avatar for Ron by passing these properties directly to the avatar component.\n\nWhen no thumbnail is provided, the avatar component will construct a useful placeholder, leveraging the user's information to construct a unique background-color with initials.\n\n**Note:** if your user is private, remember to append a token to the end of the thumbnail using the form `thumbnail.jpg?token=YOUR_LOGGED_IN_USER_TOKEN`.\n\n```json\n{\n  \"username\": \"ron_swanson_pawnee\",\n  \"id\": \"a81470986eaeee1833b74b7d8abcd5b2\",\n  \"fullName\": \"Ron Swanson\",\n  \"firstName\": \"Ron\",\n  \"lastName\": \"Swanson\",\n  \"thumbnail\": \"mySelf.jpg\",\n  ...\n}\n```\n\n```html\n<calcite-avatar\n  username=\"ron_swanson_pawnee\"\n  user-id=\"a81470986eaeee1833b74b7d8abcd5b2\"\n  full-name=\"Ron Swanson\"\n  thumbnail=\"mySelf.jpg\"\n>\n</calcite-avatar>\n```\n"
+        "Basic": "The JSON sample user below is returned from a [search for users](https://developers.arcgis.com/rest/users-groups-and-items/user-search.htm). You can create an avatar for Ron by passing these properties directly to the avatar component.\r\n\r\nWhen no thumbnail is provided, the avatar component will construct a useful placeholder, leveraging the user's information to construct a unique background-color with initials.\r\n\r\n**Note:** if your user is private, remember to append a token to the end of the thumbnail using the form `thumbnail.jpg?token=YOUR_LOGGED_IN_USER_TOKEN`.\r\n\r\n```json\r\n{\r\n  \"username\": \"ron_swanson_pawnee\",\r\n  \"id\": \"a81470986eaeee1833b74b7d8abcd5b2\",\r\n  \"fullName\": \"Ron Swanson\",\r\n  \"firstName\": \"Ron\",\r\n  \"lastName\": \"Swanson\",\r\n  \"thumbnail\": \"mySelf.jpg\",\r\n  ...\r\n}\r\n```\r\n\r\n```html\r\n<calcite-avatar\r\n  username=\"ron_swanson_pawnee\"\r\n  user-id=\"a81470986eaeee1833b74b7d8abcd5b2\"\r\n  full-name=\"Ron Swanson\"\r\n  thumbnail=\"mySelf.jpg\"\r\n>\r\n</calcite-avatar>\r\n```\r\n"
       },
       "props": [
         {
@@ -2163,7 +2167,7 @@
       "filePath": "./src/components/block/block.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-block",
-      "readme": "# calcite-block\n\nThe `calcite-block` component is intended for displaying a heading and content. Content can also include stacked, collapsible `calcite-block-section`s typically housed in a panel.\n",
+      "readme": "# calcite-block\r\n\r\nThe `calcite-block` component is intended for displaying a heading and content. Content can also include stacked, collapsible `calcite-block-section`s typically housed in a panel.\r\n\r",
       "docs": "The `calcite-block` component is intended for displaying a heading and content. Content can also include stacked, collapsible `calcite-block-section`s typically housed in a panel.",
       "docsTags": [
         {
@@ -2184,11 +2188,11 @@
         }
       ],
       "usage": {
-        "Always-open": "Renders a header and content that remains open - no collapsible option.\n\n```html\n<calcite-block heading=\"When your son becomes a priest, do you call him...\" open>\n  <div>Father or Son?</div>\n</calcite-block>\n```\n",
-        "Basic": "Renders a basic, non-collapsible block.\n\n```html\n<calcite-block heading=\"Fruit\" summary=\"It's nature's candy\"> </calcite-block>\n```\n",
-        "Collapsible": "Renders a header with a clickable icon to toggle the block open and closed.\n\n```html\n<calcite-block heading=\"Domestic pets\" open collapsible>\n  <calcite-block-section text=\"puppers rool, kittehs drule\"> </calcite-block-section>\n</calcite-block>\n```\n",
-        "Header-with-control": "Renders a header and control with a slot for adding a single HTML element (in the header).\n\n```html\n<calcite-block heading=\"This header\" summary=\"it has an input\">\n  <calcite-action icon=\"pencil\" text=\"edit\" slot=\"control\"></calcite-action>\n</calcite-block>\n```\n",
-        "Header-with-icon": "Renders a header and icon with the icon.\n\n```html\n<calcite-block heading=\"Icon't believe it!\">\n  <div slot=\"icon\">🤯</div>\n</calcite-block>\n```\n"
+        "Always-open": "Renders a header and content that remains open - no collapsible option.\r\n\r\n```html\r\n<calcite-block heading=\"When your son becomes a priest, do you call him...\" open>\r\n  <div>Father or Son?</div>\r\n</calcite-block>\r\n```\r\n",
+        "Basic": "Renders a basic, non-collapsible block.\r\n\r\n```html\r\n<calcite-block heading=\"Fruit\" summary=\"It's nature's candy\"> </calcite-block>\r\n```\r\n",
+        "Collapsible": "Renders a header with a clickable icon to toggle the block open and closed.\r\n\r\n```html\r\n<calcite-block heading=\"Domestic pets\" open collapsible>\r\n  <calcite-block-section text=\"puppers rool, kittehs drule\"> </calcite-block-section>\r\n</calcite-block>\r\n```\r\n",
+        "Header-with-control": "Renders a header and control with a slot for adding a single HTML element (in the header).\r\n\r\n```html\r\n<calcite-block heading=\"This header\" summary=\"it has an input\">\r\n  <calcite-action icon=\"pencil\" text=\"edit\" slot=\"control\"></calcite-action>\r\n</calcite-block>\r\n```\r\n",
+        "Header-with-icon": "Renders a header and icon with the icon.\r\n\r\n```html\r\n<calcite-block heading=\"Icon't believe it!\">\r\n  <div slot=\"icon\">🤯</div>\r\n</calcite-block>\r\n```\r\n"
       },
       "props": [
         {
@@ -2577,7 +2581,7 @@
       "filePath": "./src/components/block-section/block-section.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-block-section",
-      "readme": "# calcite-block-section\n\nThe `calcite-block-section` component is a child element of `calcite-block`. Sections can have their own header and content and can be toggled open or closed.\n",
+      "readme": "# calcite-block-section\r\n\r\nThe `calcite-block-section` component is a child element of `calcite-block`. Sections can have their own header and content and can be toggled open or closed.\r\n\r",
       "docs": "The `calcite-block-section` component is a child element of `calcite-block`. Sections can have their own header and content and can be toggled open or closed.",
       "docsTags": [
         {
@@ -2683,7 +2687,7 @@
           "mutable": false,
           "attr": "toggle-display",
           "reflectToAttr": true,
-          "docs": "This property determines the look of the section toggle.\nIf the value is \"switch\", a toggle-switch will be displayed.\nIf the value is \"button\", a clickable header is displayed.",
+          "docs": "This property determines the look of the section toggle.\r\nIf the value is \"switch\", a toggle-switch will be displayed.\r\nIf the value is \"button\", a clickable header is displayed.",
           "docsTags": [],
           "default": "\"button\"",
           "values": [
@@ -2737,7 +2741,7 @@
       "filePath": "./src/components/button/button.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-button",
-      "readme": "# calcite-button\n",
+      "readme": "# calcite-button\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -2746,12 +2750,12 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-button icon-start=\"plus\" color=\"red\">Go!</calcite-button>\n```\n",
-        "Focusing": "You can programmatically focus a `calcite-button` with the `setFocus()` method:\n\n```html\n<div onclick=\"document.querySelector('#my-button').setFocus()\">Focus!</div>\n```\n",
-        "Internals": "Any additional attributes set on `<calcite-button>` are passed to the internal `<a>` or `<button>` tag. For example, the first button below sets `target=\"_blank` On the internal `<a>`. The second button sets `type=\"submit\"` on the internal `<button>`.\n\n- ```html\n  <calcite-button href=\"https://github.com/esri/calcite-components\" target=\"_blank\">\n    Calcite Components on GitHub\n  </calcite-button>\n\n  <calcite-button type=\"submit\">Submit</calcite-button>\n  ```\n",
-        "With-icons": "```html\n<calcite-button appearance=\"solid\" icon-start=\"arrow-left\">Back</calcite-button>\n<calcite-button icon-end=\"map\" color=\"red\">Map Options</calcite-button>\n<calcite-button icon-end=\"plus\" appearance=\"outline\" color=\"inverse\">Add to favorites</calcite-button>\n```\n",
-        "With-loader-disabled": "```html\n<calcite-button loading color=\"neutral\">Fetching data...</calcite-button>\n<calcite-button disabled>Can't touch this</calcite-button>\n```\n",
-        "Within-form": "```html\n<form name=\"sign-up\">\n  <calcite-label>\n    First name\n    <calcite-input name=\"first-name\" required value=\"Jane\"></calcite-input>\n  </calcite-label>\n  <calcite-button type=\"reset\">I should reset the form (type reset)</calcite-button>\n  <calcite-button type=\"button\">I should not submit the form (type button)</calcite-button>\n  <calcite-button>Submit</calcite-button>\n</form>\n```\n"
+        "Basic": "```html\r\n<calcite-button icon-start=\"plus\" color=\"red\">Go!</calcite-button>\r\n```\r\n",
+        "Focusing": "You can programmatically focus a `calcite-button` with the `setFocus()` method:\r\n\r\n```html\r\n<div onclick=\"document.querySelector('#my-button').setFocus()\">Focus!</div>\r\n```\r\n",
+        "Internals": "Any additional attributes set on `<calcite-button>` are passed to the internal `<a>` or `<button>` tag. For example, the first button below sets `target=\"_blank` On the internal `<a>`. The second button sets `type=\"submit\"` on the internal `<button>`.\r\n\r\n- ```html\r\n  <calcite-button href=\"https://github.com/esri/calcite-components\" target=\"_blank\">\r\n    Calcite Components on GitHub\r\n  </calcite-button>\r\n\r\n  <calcite-button type=\"submit\">Submit</calcite-button>\r\n  ```\r\n",
+        "With-icons": "```html\r\n<calcite-button appearance=\"solid\" icon-start=\"arrow-left\">Back</calcite-button>\r\n<calcite-button icon-end=\"map\" color=\"red\">Map Options</calcite-button>\r\n<calcite-button icon-end=\"plus\" appearance=\"outline\" color=\"inverse\">Add to favorites</calcite-button>\r\n```\r\n",
+        "With-loader-disabled": "```html\r\n<calcite-button loading color=\"neutral\">Fetching data...</calcite-button>\r\n<calcite-button disabled>Can't touch this</calcite-button>\r\n```\r\n",
+        "Within-form": "```html\r\n<form name=\"sign-up\">\r\n  <calcite-label>\r\n    First name\r\n    <calcite-input name=\"first-name\" required value=\"Jane\"></calcite-input>\r\n  </calcite-label>\r\n  <calcite-button type=\"reset\">I should reset the form (type reset)</calcite-button>\r\n  <calcite-button type=\"button\">I should not submit the form (type button)</calcite-button>\r\n  <calcite-button>Submit</calcite-button>\r\n</form>\r\n```\r\n"
       },
       "props": [
         {
@@ -2794,7 +2798,7 @@
         },
         {
           "name": "appearance",
-          "type": "\"clear\" | \"outline\" | \"solid\" | \"transparent\"",
+          "type": "\"clear\" | \"minimal\" | \"outline\" | \"solid\" | \"transparent\"",
           "mutable": false,
           "attr": "appearance",
           "reflectToAttr": true,
@@ -2806,6 +2810,10 @@
               "value": "clear",
               "type": "string"
             },
+            {
+              "value": "minimal",
+              "type": "string"
+            },
             {
               "value": "outline",
               "type": "string"
@@ -3235,7 +3243,7 @@
       "filePath": "./src/components/card/card.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-card",
-      "readme": "# calcite-card\n",
+      "readme": "# calcite-card\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -3264,7 +3272,7 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<div style=\"width:260px\">\n  <calcite-card>\n    <h3 slot=\"title\">ArcGIS Online: Gallery and Organization pages</h3>\n    <span slot=\"subtitle\">\n      A great example of a study description that might wrap to a line or two, but isn't overly verbose.\n    </span>\n  </calcite-card>\n</div>\n```\n"
+        "Basic": "```html\r\n<div style=\"width:260px\">\r\n  <calcite-card>\r\n    <h3 slot=\"title\">ArcGIS Online: Gallery and Organization pages</h3>\r\n    <span slot=\"subtitle\">\r\n      A great example of a study description that might wrap to a line or two, but isn't overly verbose.\r\n    </span>\r\n  </calcite-card>\r\n</div>\r\n```\r\n"
       },
       "props": [
         {
@@ -3474,14 +3482,14 @@
       "filePath": "./src/components/checkbox/checkbox.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-checkbox",
-      "readme": "# calcite-checkbox\n",
+      "readme": "# calcite-checkbox\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {
-        "Basic": "```html\n<calcite-checkbox id=\"first-name\" name=\"first-name\"></calcite-checkbox>\n```\n",
-        "Checked-with-calcite-label": "```html\n<calcite-label layout=\"inline\" for=\"checked-item\">\n  To do\n  <calcite-checkbox checked id=\"checked-item\" name=\"checked-item\"></calcite-checkbox>\n</calcite-label>\n```\n",
-        "Hovered-with-calcite-label": "```html\n<calcite-label layout=\"inline\" for=\"hovered-item\">\n  <calcite-checkbox hovered id=\"hovered-item\" name=\"hovered-item\"></calcite-checkbox>\n  To do\n</calcite-label>\n```\n",
-        "Indeterminate-with-native-label": "```html\n<label for=\"checked-indeterminate\">\n  Status\n  <calcite-checkbox checked indeterminate id=\"checked-indeterminate\" name=\"checked-indeterminate\"></calcite-checkbox>\n</label>\n```\n"
+        "Basic": "```html\r\n<calcite-checkbox id=\"first-name\" name=\"first-name\"></calcite-checkbox>\r\n```\r\n",
+        "Checked-with-calcite-label": "```html\r\n<calcite-label layout=\"inline\" for=\"checked-item\">\r\n  To do\r\n  <calcite-checkbox checked id=\"checked-item\" name=\"checked-item\"></calcite-checkbox>\r\n</calcite-label>\r\n```\r\n",
+        "Hovered-with-calcite-label": "```html\r\n<calcite-label layout=\"inline\" for=\"hovered-item\">\r\n  <calcite-checkbox hovered id=\"hovered-item\" name=\"hovered-item\"></calcite-checkbox>\r\n  To do\r\n</calcite-label>\r\n```\r\n",
+        "Indeterminate-with-native-label": "```html\r\n<label for=\"checked-indeterminate\">\r\n  Status\r\n  <calcite-checkbox checked indeterminate id=\"checked-indeterminate\" name=\"checked-indeterminate\"></calcite-checkbox>\r\n</label>\r\n```\r\n"
       },
       "props": [
         {
@@ -3540,7 +3548,7 @@
           "mutable": true,
           "attr": "indeterminate",
           "reflectToAttr": true,
-          "docs": "True if the checkbox is initially indeterminate,\nwhich is independent from its checked state\nhttps://css-tricks.com/indeterminate-checkboxes/",
+          "docs": "True if the checkbox is initially indeterminate,\r\nwhich is independent from its checked state\r\nhttps://css-tricks.com/indeterminate-checkboxes/",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3662,7 +3670,7 @@
       "filePath": "./src/components/chip/chip.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-chip",
-      "readme": "# calcite-chip\n",
+      "readme": "# calcite-chip\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -3675,7 +3683,7 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-chip value=\"Global\" dismissible icon=\"globe\" appearance=\"clear\" color=\"green\">Global</calcite-chip>\n```\n"
+        "Basic": "```html\r\n<calcite-chip value=\"Global\" dismissible icon=\"globe\" appearance=\"clear\" color=\"green\">Global</calcite-chip>\r\n```\r\n"
       },
       "props": [
         {
@@ -3703,7 +3711,7 @@
         {
           "name": "closable",
           "type": "boolean",
-          "mutable": false,
+          "mutable": true,
           "attr": "closable",
           "reflectToAttr": true,
           "docs": "When true, show abutton user can click to dismiss the chip.",
@@ -3793,7 +3801,7 @@
         {
           "name": "dismissible",
           "type": "boolean",
-          "mutable": false,
+          "mutable": true,
           "attr": "dismissible",
           "reflectToAttr": true,
           "docs": "Optionally show a button the user can click to dismiss the chip",
@@ -3909,7 +3917,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Emitted when the dismiss button is clicked\n\n**Note:**: The `el` event payload props is deprecated, please use the event's target/currentTarget instead",
+          "docs": "Emitted when the dismiss button is clicked\r\n\r\n**Note:**: The `el` event payload props is deprecated, please use the event's target/currentTarget instead",
           "docsTags": []
         }
       ],
@@ -3953,12 +3961,12 @@
       "filePath": "./src/components/color-picker/color-picker.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-color-picker",
-      "readme": "# calcite-color-picker\n",
+      "readme": "# calcite-color-picker\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {
-        "Basic": "```html\n<calcite-color-picker dir=\"ltr\" scale=\"m\" value=\"#b33f33\" appearance=\"default\"></calcite-color-picker>\n```\n",
-        "Minimal": "For a minimal design, you can hide unused color formats and options:\n\n```html\n<calcite-color-picker appearance=\"minimal\" value=\"\" allow-empty hide-saved hide-channels></calcite-color-picker>\n```\n"
+        "Basic": "```html\r\n<calcite-color-picker dir=\"ltr\" scale=\"m\" value=\"#b33f33\" appearance=\"default\"></calcite-color-picker>\r\n```\r\n",
+        "Minimal": "For a minimal design, you can hide unused color formats and options:\r\n\r\n```html\r\n<calcite-color-picker appearance=\"minimal\" value=\"\" allow-empty hide-saved hide-channels></calcite-color-picker>\r\n```\r\n"
       },
       "props": [
         {
@@ -3967,7 +3975,7 @@
           "mutable": false,
           "attr": "allow-empty",
           "reflectToAttr": false,
-          "docs": "When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component.\n\nWhen true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty.",
+          "docs": "When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component.\r\n\r\nWhen true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -3980,13 +3988,13 @@
         },
         {
           "name": "appearance",
-          "type": "\"default\" | \"minimal\"",
+          "type": "\"default\" | \"minimal\" | \"solid\"",
           "mutable": false,
           "attr": "appearance",
           "reflectToAttr": true,
-          "docs": "specify the appearance - default (containing border), or minimal (no containing border)",
+          "docs": "specify the appearance - solid (containing border), or minimal (no containing border)",
           "docsTags": [],
-          "default": "\"default\"",
+          "default": "\"solid\"",
           "values": [
             {
               "value": "default",
@@ -3995,6 +4003,10 @@
             {
               "value": "minimal",
               "type": "string"
+            },
+            {
+              "value": "solid",
+              "type": "string"
             }
           ],
           "optional": false,
@@ -4023,7 +4035,7 @@
           "mutable": false,
           "attr": "format",
           "reflectToAttr": false,
-          "docs": "The format of the value property.\n\nWhen \"auto\", the format will be inferred from `value` when set.",
+          "docs": "The format of the value property.\r\n\r\nWhen \"auto\", the format will be inferred from `value` when set.",
           "docsTags": [
             {
               "name": "default",
@@ -4621,7 +4633,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The color value.\n\nThis value can be either a {@link https ://developer.mozilla.org/en-US/docs/Web/CSS/color|CSS string}\na RGB, HSL or HSV object.\n\nThe type will be preserved as the color is updated.",
+          "docs": "The color value.\r\n\r\nThis value can be either a {@link https ://developer.mozilla.org/en-US/docs/Web/CSS/color|CSS string}\r\na RGB, HSL or HSV object.\r\n\r\nThe type will be preserved as the color is updated.",
           "docsTags": [
             {
               "name": "default",
@@ -4689,7 +4701,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Fires as the color value changes.\n\nThis is similar to the change event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved.",
+          "docs": "Fires as the color value changes.\r\n\r\nThis is similar to the change event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved.",
           "docsTags": []
         }
       ],
@@ -4751,7 +4763,7 @@
       "filePath": "./src/components/color-picker-hex-input/color-picker-hex-input.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-color-picker-hex-input",
-      "readme": "# calcite-hex-input\n",
+      "readme": "# calcite-hex-input\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -4762,7 +4774,7 @@
           "mutable": false,
           "attr": "allow-empty",
           "reflectToAttr": false,
-          "docs": "When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component.\n\nWhen true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty.",
+          "docs": "When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component.\r\n\r\nWhen true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4936,7 +4948,7 @@
       "filePath": "./src/components/color-picker-swatch/color-picker-swatch.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-color-picker-swatch",
-      "readme": "# my-component\n",
+      "readme": "# my-component\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -5030,7 +5042,7 @@
       "filePath": "./src/components/combobox/combobox.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-combobox",
-      "readme": "# calcite-combobox\n",
+      "readme": "# calcite-combobox\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -5039,9 +5051,9 @@
         }
       ],
       "usage": {
-        "Ancestors": "```html\n<calcite-combobox label=\"Ancestors selection-mode combobox\" selection-mode=\"ancestors\">\n  <calcite-combobox-item value=\"Trees\" text-label=\"Trees\">\n    <calcite-combobox-item\n      value=\"CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings\"\n      text-label=\"CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings\"\n      selected\n    ></calcite-combobox-item>\n    <calcite-combobox-item value=\"Sequoia\" disabled text-label=\"Sequoia\"></calcite-combobox-item>\n    <calcite-combobox-item value=\"Douglas Fir\" text-label=\"Douglas Fir\"></calcite-combobox-item>\n  </calcite-combobox-item>\n</calcite-combobox>\n```\n",
-        "Multi": "```html\n<calcite-combobox label=\"Mulit selection-mode combobox\" selection-mode=\"multi\">\n  <calcite-combobox-item value=\"Trees\" text-label=\"Trees\">\n    <calcite-combobox-item\n      value=\"CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings\"\n      text-label=\"CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings\"\n      selected\n    ></calcite-combobox-item>\n    <calcite-combobox-item value=\"Sequoia\" disabled text-label=\"Sequoia\"></calcite-combobox-item>\n    <calcite-combobox-item value=\"Douglas Fir\" text-label=\"Douglas Fir\"></calcite-combobox-item>\n  </calcite-combobox-item>\n</calcite-combobox>\n```\n",
-        "Single": "```html\n<calcite-combobox label=\"Single selection-mode combobox\" selection-mode=\"single\">\n  <calcite-combobox-item value=\"Trees\" text-label=\"Trees\">\n    <calcite-combobox-item\n      value=\"CommercialDamageAssessment - Damage to Commercial Buildings\"\n      text-label=\"CommercialDamageAssessment - Damage to Commercial Buildings\"\n      selected\n    ></calcite-combobox-item>\n    <calcite-combobox-item value=\"Sequoia\" disabled text-label=\"Sequoia\"></calcite-combobox-item>\n    <calcite-combobox-item value=\"Douglas Fir\" text-label=\"Douglas Fir\"></calcite-combobox-item>\n  </calcite-combobox-item>\n  <calcite-combobox-item value=\"Rivers\" text-label=\"Rivers\"></calcite-combobox-item>\n</calcite-combobox>\n```\n"
+        "Ancestors": "```html\r\n<calcite-combobox label=\"Ancestors selection-mode combobox\" selection-mode=\"ancestors\">\r\n  <calcite-combobox-item value=\"Trees\" text-label=\"Trees\">\r\n    <calcite-combobox-item\r\n      value=\"CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings\"\r\n      text-label=\"CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings\"\r\n      selected\r\n    ></calcite-combobox-item>\r\n    <calcite-combobox-item value=\"Sequoia\" disabled text-label=\"Sequoia\"></calcite-combobox-item>\r\n    <calcite-combobox-item value=\"Douglas Fir\" text-label=\"Douglas Fir\"></calcite-combobox-item>\r\n  </calcite-combobox-item>\r\n</calcite-combobox>\r\n```\r\n",
+        "Multi": "```html\r\n<calcite-combobox label=\"Mulit selection-mode combobox\" selection-mode=\"multi\">\r\n  <calcite-combobox-item value=\"Trees\" text-label=\"Trees\">\r\n    <calcite-combobox-item\r\n      value=\"CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings\"\r\n      text-label=\"CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings\"\r\n      selected\r\n    ></calcite-combobox-item>\r\n    <calcite-combobox-item value=\"Sequoia\" disabled text-label=\"Sequoia\"></calcite-combobox-item>\r\n    <calcite-combobox-item value=\"Douglas Fir\" text-label=\"Douglas Fir\"></calcite-combobox-item>\r\n  </calcite-combobox-item>\r\n</calcite-combobox>\r\n```\r\n",
+        "Single": "```html\r\n<calcite-combobox label=\"Single selection-mode combobox\" selection-mode=\"single\">\r\n  <calcite-combobox-item value=\"Trees\" text-label=\"Trees\">\r\n    <calcite-combobox-item\r\n      value=\"CommercialDamageAssessment - Damage to Commercial Buildings\"\r\n      text-label=\"CommercialDamageAssessment - Damage to Commercial Buildings\"\r\n      selected\r\n    ></calcite-combobox-item>\r\n    <calcite-combobox-item value=\"Sequoia\" disabled text-label=\"Sequoia\"></calcite-combobox-item>\r\n    <calcite-combobox-item value=\"Douglas Fir\" text-label=\"Douglas Fir\"></calcite-combobox-item>\r\n  </calcite-combobox-item>\r\n  <calcite-combobox-item value=\"Rivers\" text-label=\"Rivers\"></calcite-combobox-item>\r\n</calcite-combobox>\r\n```\r\n"
       },
       "props": [
         {
@@ -5209,7 +5221,7 @@
           "mutable": false,
           "attr": "overlay-positioning",
           "reflectToAttr": false,
-          "docs": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\".",
+          "docs": "Determines the type of positioning to use for the overlaid content.\r\n\r\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\".",
           "docsTags": [],
           "default": "\"absolute\"",
           "values": [
@@ -5289,7 +5301,7 @@
           "mutable": false,
           "attr": "selection-mode",
           "reflectToAttr": true,
-          "docs": "specify the selection mode\n- multi: allow any number of selected items (default)\n- single: only one selection)\n- ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips",
+          "docs": "specify the selection mode\r\n- multi: allow any number of selected items (default)\r\n- single: only one selection)\r\n- ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips",
           "docsTags": [],
           "default": "\"multi\"",
           "values": [
@@ -5388,7 +5400,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Called when a selected item in the combobox is dismissed via its chip\n\n**Note:**: The event payload is deprecated, please use the `value` property on the component to determine removed value instead",
+          "docs": "Called when a selected item in the combobox is dismissed via its chip\r\n\r\n**Note:**: The event payload is deprecated, please use the `value` property on the component to determine removed value instead",
           "docsTags": []
         },
         {
@@ -5480,7 +5492,7 @@
       "filePath": "./src/components/combobox-item/combobox-item.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-combobox-item",
-      "readme": "# calcite-combobox-item\n",
+      "readme": "# calcite-combobox-item\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -5669,7 +5681,7 @@
           },
           "signature": "toggleSelected(coerce?: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Used to toggle the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
+          "docs": "Used to toggle the selection state. By default this won't trigger an event.\r\nThe first argument allows the value to be coerced, rather than swapping values.",
           "docsTags": [
             {
               "name": "param",
@@ -5685,7 +5697,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Emitted whenever the item is selected or unselected.\n\n**Note:**: The event's payload is deprecated, please use the event's target/currentTarget instead",
+          "docs": "Emitted whenever the item is selected or unselected.\r\n\r\n**Note:**: The event's payload is deprecated, please use the event's target/currentTarget instead",
           "docsTags": []
         }
       ],
@@ -5712,7 +5724,7 @@
       "filePath": "./src/components/combobox-item-group/combobox-item-group.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-combobox-item-group",
-      "readme": "# calcite-combobox-item-group\n",
+      "readme": "# calcite-combobox-item-group\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -5773,12 +5785,12 @@
       "filePath": "./src/components/date-picker/date-picker.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-date-picker",
-      "readme": "# calcite-date-picker\n\nThe `calcite-date-picker` component allows for selecting a date via a calendar or text input. It supports multiple locales, languages, right to left, and is fully keyboard accessible.\n",
+      "readme": "# calcite-date-picker\r\n\r\nThe `calcite-date-picker` component allows for selecting a date via a calendar or text input. It supports multiple locales, languages, right to left, and is fully keyboard accessible.\r\n\r",
       "docs": "The `calcite-date-picker` component allows for selecting a date via a calendar or text input. It supports multiple locales, languages, right to left, and is fully keyboard accessible.",
       "docsTags": [],
       "usage": {
-        "Basic": "You can set a min and max range, as well as an initial value with ISO 8601 formatted strings:\n\n```html\n<calcite-date-picker value=\"2020-03-27\" min=\"2020-02-01\" max=\"2021-01-01\"></calcite-date-picker>\n```\n",
-        "Range": "You can also add range property to activate date range mode. In this mode, you can specify start and end instead of the single value property.\n\n```html\n<calcite-date-picker range start=\"2020-03-15\" end=\"2020-03-27\" min=\"2020-02-01\" max=\"2021-01-01\" />\n```\n"
+        "Basic": "You can set a min and max range, as well as an initial value with ISO 8601 formatted strings:\r\n\r\n```html\r\n<calcite-date-picker value=\"2020-03-27\" min=\"2020-02-01\" max=\"2021-01-01\"></calcite-date-picker>\r\n```\r\n",
+        "Range": "You can also add range property to activate date range mode. In this mode, you can specify start and end instead of the single value property.\r\n\r\n```html\r\n<calcite-date-picker range start=\"2020-03-15\" end=\"2020-03-27\" min=\"2020-02-01\" max=\"2021-01-01\" />\r\n```\r\n"
       },
       "props": [
         {
@@ -6225,7 +6237,7 @@
       "filePath": "./src/components/date-picker-day/date-picker-day.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-date-picker-day",
-      "readme": "# calcite-date-day\n",
+      "readme": "# calcite-date-day\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -6491,7 +6503,7 @@
       "filePath": "./src/components/date-picker-month/date-picker-month.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-date-picker-month",
-      "readme": "# calcite-date-month\n",
+      "readme": "# calcite-date-month\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -6678,7 +6690,7 @@
       "filePath": "./src/components/date-picker-month-header/date-picker-month-header.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-date-picker-month-header",
-      "readme": "# calcite-date-month-header\n",
+      "readme": "# calcite-date-month-header\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -6920,7 +6932,7 @@
       "filePath": "./src/components/dropdown/dropdown.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-dropdown",
-      "readme": "# calcite-dropdown\n\nA `calcite-dropdown` can be used to provide an absolutely positioned set of selectable items. You can combine multiple groups of items and selection modes, and optionally pass a title for each group. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.\n",
+      "readme": "# calcite-dropdown\r\n\r\nA `calcite-dropdown` can be used to provide an absolutely positioned set of selectable items. You can combine multiple groups of items and selection modes, and optionally pass a title for each group. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.\r\n\r",
       "docs": "A `calcite-dropdown` can be used to provide an absolutely positioned set of selectable items. You can combine multiple groups of items and selection modes, and optionally pass a title for each group. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.",
       "docsTags": [
         {
@@ -6933,9 +6945,9 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-dropdown>\n  <calcite-button slot=\"dropdown-trigger\">Open Dropdown</calcite-button>\n  <calcite-dropdown-group>\n    <calcite-dropdown-item>Relevance</calcite-dropdown-item>\n    <calcite-dropdown-item active>Date modified</calcite-dropdown-item>\n    <calcite-dropdown-item>Title</calcite-dropdown-item>\n  </calcite-dropdown-group>\n</calcite-dropdown>\n```\n",
-        "Disabling-close-on-select": "You can choose to leave the dropdown open when an item is selected with the `disable-close-on-select` attribute. Note that this will only apply when the `calcite-dropdown-group` selection mode is set to `single` or `multi` - dropdowns will always close when an item in `none` selection mode is selected.\n\n```html\n<calcite-dropdown disable-close-on-select>\n  <calcite-button id=\"trigger\" slot=\"dropdown-trigger\">Open dropdown</calcite-button>\n  <calcite-dropdown-group id=\"group-1\" selection-mode=\"single\">\n    <calcite-dropdown-item id=\"item-1\"> Dropdown Item Content </calcite-dropdown-item>\n    <calcite-dropdown-item id=\"item-2\" active> Dropdown Item Content </calcite-dropdown-item>\n    <calcite-dropdown-item id=\"item-3\"> Dropdown Item Content </calcite-dropdown-item>\n  </calcite-dropdown-group>\n</calcite-dropdown>\n```\n",
-        "Groups": "You can combine groups in a single dropdown, with varying selection modes:\n\n```html\n<calcite-dropdown>\n  <calcite-button slot=\"dropdown-trigger\">Open Dropdown</calcite-button>\n  <calcite-dropdown-group group-title=\"Select one\">\n    <calcite-dropdown-item>Apple</calcite-dropdown-item>\n    <calcite-dropdown-item active>Orange</calcite-dropdown-item>\n    <calcite-dropdown-item>Grape</calcite-dropdown-item>\n  </calcite-dropdown-group>\n  <calcite-dropdown-group group-title=\"Select multi\" selection-mode=\"multi\">\n    <calcite-dropdown-item>Asparagus</calcite-dropdown-item>\n    <calcite-dropdown-item active>Potato</calcite-dropdown-item>\n    <calcite-dropdown-item>Yam</calcite-dropdown-item>\n  </calcite-dropdown-group>\n  <calcite-dropdown-group group-title=\"Select none (useful for actions)\" selection-mode=\"none\">\n    <calcite-dropdown-item>Plant beans</calcite-dropdown-item>\n    <calcite-dropdown-item active>Add peas</calcite-dropdown-item>\n  </calcite-dropdown-group>\n</calcite-dropdown>\n```\n"
+        "Basic": "```html\r\n<calcite-dropdown>\r\n  <calcite-button slot=\"dropdown-trigger\">Open Dropdown</calcite-button>\r\n  <calcite-dropdown-group>\r\n    <calcite-dropdown-item>Relevance</calcite-dropdown-item>\r\n    <calcite-dropdown-item active>Date modified</calcite-dropdown-item>\r\n    <calcite-dropdown-item>Title</calcite-dropdown-item>\r\n  </calcite-dropdown-group>\r\n</calcite-dropdown>\r\n```\r\n",
+        "Disabling-close-on-select": "You can choose to leave the dropdown open when an item is selected with the `disable-close-on-select` attribute. Note that this will only apply when the `calcite-dropdown-group` selection mode is set to `single` or `multi` - dropdowns will always close when an item in `none` selection mode is selected.\r\n\r\n```html\r\n<calcite-dropdown disable-close-on-select>\r\n  <calcite-button id=\"trigger\" slot=\"dropdown-trigger\">Open dropdown</calcite-button>\r\n  <calcite-dropdown-group id=\"group-1\" selection-mode=\"single\">\r\n    <calcite-dropdown-item id=\"item-1\"> Dropdown Item Content </calcite-dropdown-item>\r\n    <calcite-dropdown-item id=\"item-2\" active> Dropdown Item Content </calcite-dropdown-item>\r\n    <calcite-dropdown-item id=\"item-3\"> Dropdown Item Content </calcite-dropdown-item>\r\n  </calcite-dropdown-group>\r\n</calcite-dropdown>\r\n```\r\n",
+        "Groups": "You can combine groups in a single dropdown, with varying selection modes:\r\n\r\n```html\r\n<calcite-dropdown>\r\n  <calcite-button slot=\"dropdown-trigger\">Open Dropdown</calcite-button>\r\n  <calcite-dropdown-group group-title=\"Select one\">\r\n    <calcite-dropdown-item>Apple</calcite-dropdown-item>\r\n    <calcite-dropdown-item active>Orange</calcite-dropdown-item>\r\n    <calcite-dropdown-item>Grape</calcite-dropdown-item>\r\n  </calcite-dropdown-group>\r\n  <calcite-dropdown-group group-title=\"Select multi\" selection-mode=\"multi\">\r\n    <calcite-dropdown-item>Asparagus</calcite-dropdown-item>\r\n    <calcite-dropdown-item active>Potato</calcite-dropdown-item>\r\n    <calcite-dropdown-item>Yam</calcite-dropdown-item>\r\n  </calcite-dropdown-group>\r\n  <calcite-dropdown-group group-title=\"Select none (useful for actions)\" selection-mode=\"none\">\r\n    <calcite-dropdown-item>Plant beans</calcite-dropdown-item>\r\n    <calcite-dropdown-item active>Add peas</calcite-dropdown-item>\r\n  </calcite-dropdown-group>\r\n</calcite-dropdown>\r\n```\r\n"
       },
       "props": [
         {
@@ -6967,7 +6979,7 @@
           "mutable": false,
           "attr": "disable-close-on-select",
           "reflectToAttr": true,
-          "docs": "allow the dropdown to remain open after a selection is made\nif the selection-mode of the selected item's containing group is \"none\", the dropdown will always close",
+          "docs": "allow the dropdown to remain open after a selection is made\r\nif the selection-mode of the selected item's containing group is \"none\", the dropdown will always close",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7016,7 +7028,7 @@
           "mutable": false,
           "attr": "max-items",
           "reflectToAttr": false,
-          "docs": "specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -\nthis value does not include groupTitles passed to calcite-dropdown-group",
+          "docs": "specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -\r\nthis value does not include groupTitles passed to calcite-dropdown-group",
           "docsTags": [],
           "default": "0",
           "values": [
@@ -7050,7 +7062,7 @@
           "mutable": false,
           "attr": "overlay-positioning",
           "reflectToAttr": false,
-          "docs": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\".",
+          "docs": "Determines the type of positioning to use for the overlaid content.\r\n\r\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\".",
           "docsTags": [],
           "default": "\"absolute\"",
           "values": [
@@ -7068,7 +7080,7 @@
         },
         {
           "name": "placement",
-          "type": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "type": "\"bottom\" | \"bottom-end\" | \"bottom-leading\" | \"bottom-start\" | \"bottom-trailing\" | \"top\" | \"top-end\" | \"top-leading\" | \"top-start\" | \"top-trailing\"",
           "mutable": false,
           "attr": "placement",
           "reflectToAttr": true,
@@ -7089,10 +7101,18 @@
               "value": "bottom-end",
               "type": "string"
             },
+            {
+              "value": "bottom-leading",
+              "type": "string"
+            },
             {
               "value": "bottom-start",
               "type": "string"
             },
+            {
+              "value": "bottom-trailing",
+              "type": "string"
+            },
             {
               "value": "top",
               "type": "string"
@@ -7101,9 +7121,17 @@
               "value": "top-end",
               "type": "string"
             },
+            {
+              "value": "top-leading",
+              "type": "string"
+            },
             {
               "value": "top-start",
               "type": "string"
+            },
+            {
+              "value": "top-trailing",
+              "type": "string"
             }
           ],
           "optional": false,
@@ -7334,7 +7362,7 @@
       "filePath": "./src/components/dropdown-group/dropdown-group.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-dropdown-group",
-      "readme": "# calcite-dropdown-group\n",
+      "readme": "# calcite-dropdown-group\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -7391,7 +7419,7 @@
           "mutable": false,
           "attr": "selection-mode",
           "reflectToAttr": true,
-          "docs": "specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),\nnone (no active items), defaults to single",
+          "docs": "specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),\r\nnone (no active items), defaults to single",
           "docsTags": [],
           "default": "\"single\"",
           "values": [
@@ -7437,7 +7465,7 @@
       "filePath": "./src/components/dropdown-item/dropdown-item.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-dropdown-item",
-      "readme": "# calcite-dropdown-item\n",
+      "readme": "# calcite-dropdown-item\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -7663,13 +7691,13 @@
       "filePath": "./src/components/fab/fab.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-fab",
-      "readme": "# calcite-fab\n",
+      "readme": "# calcite-fab\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {
-        "Basic": "Renders a `calcite-fab` that displays only an icon and a tooltip label.\n\n```html\n<calcite-fab label=\"Performs my custom action\"></calcite-fab>\n```\n",
-        "Loading-and-disabled": "Renders a `calcite-fab` that is loading and disabled.\n\n```html\n<calcite-fab loading disabled></calcite-fab>\n```\n",
-        "With-text": "Renders a `calcite-fab` that displays text along side an icon and a tooltip label.\n\n```html\n<calcite-fab label=\"Performs my custom action\" text=\"Perform Action!\" text-enabled></calcite-fab>\n```\n"
+        "Basic": "Renders a `calcite-fab` that displays only an icon and a tooltip label.\r\n\r\n```html\r\n<calcite-fab label=\"Performs my custom action\"></calcite-fab>\r\n```\r\n",
+        "Loading-and-disabled": "Renders a `calcite-fab` that is loading and disabled.\r\n\r\n```html\r\n<calcite-fab loading disabled></calcite-fab>\r\n```\r\n",
+        "With-text": "Renders a `calcite-fab` that displays text along side an icon and a tooltip label.\r\n\r\n```html\r\n<calcite-fab label=\"Performs my custom action\" text=\"Perform Action!\" text-enabled></calcite-fab>\r\n```\r\n"
       },
       "props": [
         {
@@ -7892,7 +7920,7 @@
       "filePath": "./src/components/filter/filter.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-filter",
-      "readme": "# calcite-filter\n",
+      "readme": "# calcite-filter\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -7971,7 +7999,7 @@
           "type": "object[]",
           "mutable": true,
           "reflectToAttr": false,
-          "docs": "The items to filter through. The filter uses this as the starting point, and returns items\nthat contain the string entered in the input, using a partial match and recursive search.\n\nThis property is required.",
+          "docs": "The items to filter through. The filter uses this as the starting point, and returns items\r\nthat contain the string entered in the input, using a partial match and recursive search.\r\n\r\nThis property is required.",
           "docsTags": [],
           "default": "[]",
           "values": [
@@ -8097,7 +8125,7 @@
       "filePath": "./src/components/flow/flow.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-flow",
-      "readme": "# calcite-flow\n\nThe `calcite-flow` component is a series of panels that provides a user with a workflow (eg. editing experience), by which the user can switch from panel to panel of `calcite-panel`s.\n",
+      "readme": "# calcite-flow\r\n\r\nThe `calcite-flow` component is a series of panels that provides a user with a workflow (eg. editing experience), by which the user can switch from panel to panel of `calcite-panel`s.\r\n\r",
       "docs": "The `calcite-flow` component is a series of panels that provides a user with a workflow (eg. editing experience), by which the user can switch from panel to panel of `calcite-panel`s.",
       "docsTags": [
         {
@@ -8106,8 +8134,8 @@
         }
       ],
       "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"
+        "Basic": "Renders a basic flow with a couple `calcite-panel`s.\r\n\r\n```html\r\n<calcite-flow>\r\n  <calcite-panel heading=\"one, two, three, four\">\r\n    <!-- image -->\r\n  </calcite-panel>\r\n  <calcite-panel heading=\"tell me that you love me more\">\r\n    <!-- image -->\r\n  </calcite-panel>\r\n</calcite-flow>\r\n```\r\n",
+        "Menu-actions-and-footer-actions": "Renders a flow with menu-actions and footer-actions in the form of buttons.\r\n\r\n```html\r\n<calcite-flow>\r\n  <calcite-panel heading=\"What are the most popular commute alternatives?\">\r\n    <button slot=\"header-menu-actions\">Reset</button>\r\n    <button slot=\"header-menu-actions\">Rename</button>\r\n    <button slot=\"footer-actions\">Save</button>\r\n    <button slot=\"footer-actions\">Cancel</button>\r\n  </calcite-panel>\r\n</calcite-flow>\r\n```\r\n"
       },
       "props": [],
       "methods": [
@@ -8147,7 +8175,7 @@
       "filePath": "./src/components/graph/graph.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-graph",
-      "readme": "# calcite-graph\n\nThe graph component is used to show small, lightweight graphs in places where a full interactive chart is not needed. This includes sparklines, histograms, and small trend plots.\n",
+      "readme": "# calcite-graph\r\n\r\nThe graph component is used to show small, lightweight graphs in places where a full interactive chart is not needed. This includes sparklines, histograms, and small trend plots.\r\n\r",
       "docs": "The graph component is used to show small, lightweight graphs in places where a full interactive chart is not needed. This includes sparklines, histograms, and small trend plots.",
       "docsTags": [],
       "usage": {},
@@ -8157,7 +8185,7 @@
           "type": "ColorStop[]",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Array of values describing a single color stop ([offset, color, opacity])\nThese color stops should be sorted by offset value",
+          "docs": "Array of values describing a single color stop ([offset, color, opacity])\r\nThese color stops should be sorted by offset value",
           "docsTags": [],
           "values": [
             {
@@ -8172,7 +8200,7 @@
           "type": "Point[]",
           "mutable": false,
           "reflectToAttr": false,
-          "docs": "Array of tuples describing a single data point ([x, y])\nThese data points should be sorted by x-axis value",
+          "docs": "Array of tuples describing a single data point ([x, y])\r\nThese data points should be sorted by x-axis value",
           "docsTags": [],
           "default": "[]",
           "values": [
@@ -8268,7 +8296,7 @@
       "filePath": "./src/components/handle/handle.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-handle",
-      "readme": "# calcite-handle\n",
+      "readme": "# calcite-handle\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -8311,7 +8339,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Emitted when the handle is activated and the up or down arrow key is pressed.\n\n**Note:**: The `handle` event payload prop is deprecated, please use the event's target/currentTarget instead",
+          "docs": "Emitted when the handle is activated and the up or down arrow key is pressed.\r\n\r\n**Note:**: The `handle` event payload prop is deprecated, please use the event's target/currentTarget instead",
           "docsTags": []
         }
       ],
@@ -8338,11 +8366,11 @@
       "filePath": "./src/components/icon/icon.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-icon",
-      "readme": "# calcite-icon\n",
+      "readme": "# calcite-icon\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {
-        "Custom-icon-color": "To use a custom color for the icon fill, you can add a class to the `calcite-icon` component with the desired color.\n\n```html\n<calcite-icon class=\"my-icon-color-class\" icon=\"arrowBoldLeft\"></calcite-icon>\n```\n\n```css\n.my-icon-color-class {\n  color: #007ac2;\n}\n```\n"
+        "Custom-icon-color": "To use a custom color for the icon fill, you can add a class to the `calcite-icon` component with the desired color.\r\n\r\n```html\r\n<calcite-icon class=\"my-icon-color-class\" icon=\"arrowBoldLeft\"></calcite-icon>\r\n```\r\n\r\n```css\r\n.my-icon-color-class {\r\n  color: #007ac2;\r\n}\r\n```\r\n"
       },
       "props": [
         {
@@ -8411,7 +8439,7 @@
           "mutable": false,
           "attr": "text-label",
           "reflectToAttr": false,
-          "docs": "The icon label.\n\nIt is recommended to set this value if your icon is semantic.",
+          "docs": "The icon label.\r\n\r\nIt is recommended to set this value if your icon is semantic.",
           "docsTags": [],
           "values": [
             {
@@ -8580,7 +8608,7 @@
       "filePath": "./src/components/inline-editable/inline-editable.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-inline-editable",
-      "readme": "# calcite-inline-editable\n",
+      "readme": "# calcite-inline-editable\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -8589,9 +8617,9 @@
         }
       ],
       "usage": {
-        "Basic": "There is no need to set a theme or scale on the `<calcite-inline-editable>` component, as it inherits these values from the wrapped `<calcite-input>`, or the closest parent component where these props are set.\n\n```html\n<calcite-inline-editable>\n  <calcite-input value=\"Entered value\" placeholder=\"My placeholder\"></calcite-input>\n</calcite-inline-editable>\n```\n",
-        "With-label": "```html\n<calcite-label>\n  My great label\n  <calcite-inline-editable controls>\n    <calcite-input value=\"Entered value\" placeholder=\"My placeholder\"></calcite-input>\n  </calcite-inline-editable>\n</calcite-label>\n```\n",
-        "With-save-and-cancel-controls": "```html\n<calcite-inline-editable controls>\n  <calcite-input value=\"Entered value\" placeholder=\"My placeholder\"></calcite-input>\n</calcite-inline-editable>\n```\n"
+        "Basic": "There is no need to set a theme or scale on the `<calcite-inline-editable>` component, as it inherits these values from the wrapped `<calcite-input>`, or the closest parent component where these props are set.\r\n\r\n```html\r\n<calcite-inline-editable>\r\n  <calcite-input value=\"Entered value\" placeholder=\"My placeholder\"></calcite-input>\r\n</calcite-inline-editable>\r\n```\r\n",
+        "With-label": "```html\r\n<calcite-label>\r\n  My great label\r\n  <calcite-inline-editable controls>\r\n    <calcite-input value=\"Entered value\" placeholder=\"My placeholder\"></calcite-input>\r\n  </calcite-inline-editable>\r\n</calcite-label>\r\n```\r\n",
+        "With-save-and-cancel-controls": "```html\r\n<calcite-inline-editable controls>\r\n  <calcite-input value=\"Entered value\" placeholder=\"My placeholder\"></calcite-input>\r\n</calcite-inline-editable>\r\n```\r\n"
       },
       "props": [
         {
@@ -8835,7 +8863,7 @@
       "filePath": "./src/components/input/input.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-input",
-      "readme": "# calcite-input\n",
+      "readme": "# calcite-input\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -8844,11 +8872,11 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-input value=\"Entered value\" placeholder=\"My placeholder\"></calcite-input>\n```\n",
-        "Clearable": "```html\n<calcite-label>\n  Clearable item\n  <calcite-input clearable value=\"My great name\" placeholder=\"John Doe\"></calcite-input>\n</calcite-label>\n```\n",
-        "Native-events": "You can also listen for native events emitted from `<calcite-input>`.\n\nYou must use `focusin`/`focusout` instead of `focus`/`blur` because these events bubble up from the rendered child element rendered inside of `<calcite-input>`\n\nAll events return an element and a value:\n\n```js\ninput.addEventListener(\"focusin\", logFocus);\ninput.addEventListener(\"focusout\", logBlur);\n\nfunction logChange() {\n  console.log(event.target.element);\n  console.log(event.target.value);\n}\n```\n",
-        "With-label": "Using a wrapping `calcite-label` component lets consumers set the status attribute once and have it propagate to child `calcite-input` and `calcite-input-message` elements\n\n```html\n<calcite-label status=\"invalid\" for=\"invalid-input\">\n  Invalid input\n  <calcite-input id=\"invalid-input\" placeholder=\"Filter your files\" value=\"adfo2h2\"></calcite-input>\n  <calcite-input-message active icon> Something doesn't look right </calcite-input-message>\n</calcite-label>\n```\n",
-        "With-message": "```html\n<calcite-label for=\"info\">\n  My great label\n  <calcite-input id=\"info\" placeholder=\"Enter your information\"></calcite-input>\n  <calcite-input-message icon=\"3d-glasses\" active>\n    Here's something you should know about this input\n  </calcite-input-message>\n</calcite-label>\n```\n"
+        "Basic": "```html\r\n<calcite-input value=\"Entered value\" placeholder=\"My placeholder\"></calcite-input>\r\n```\r\n",
+        "Clearable": "```html\r\n<calcite-label>\r\n  Clearable item\r\n  <calcite-input clearable value=\"My great name\" placeholder=\"John Doe\"></calcite-input>\r\n</calcite-label>\r\n```\r\n",
+        "Native-events": "You can also listen for native events emitted from `<calcite-input>`.\r\n\r\nYou must use `focusin`/`focusout` instead of `focus`/`blur` because these events bubble up from the rendered child element rendered inside of `<calcite-input>`\r\n\r\nAll events return an element and a value:\r\n\r\n```js\r\ninput.addEventListener(\"focusin\", logFocus);\r\ninput.addEventListener(\"focusout\", logBlur);\r\n\r\nfunction logChange() {\r\n  console.log(event.target.element);\r\n  console.log(event.target.value);\r\n}\r\n```\r\n",
+        "With-label": "Using a wrapping `calcite-label` component lets consumers set the status attribute once and have it propagate to child `calcite-input` and `calcite-input-message` elements\r\n\r\n```html\r\n<calcite-label status=\"invalid\" for=\"invalid-input\">\r\n  Invalid input\r\n  <calcite-input id=\"invalid-input\" placeholder=\"Filter your files\" value=\"adfo2h2\"></calcite-input>\r\n  <calcite-input-message active icon> Something doesn't look right </calcite-input-message>\r\n</calcite-label>\r\n```\r\n",
+        "With-message": "```html\r\n<calcite-label for=\"info\">\r\n  My great label\r\n  <calcite-input id=\"info\" placeholder=\"Enter your information\"></calcite-input>\r\n  <calcite-input-message icon=\"3d-glasses\" active>\r\n    Here's something you should know about this input\r\n  </calcite-input-message>\r\n</calcite-label>\r\n```\r\n"
       },
       "props": [
         {
@@ -9446,7 +9474,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": true,
-          "docs": "Specifies the component type.\n\nNote that the following types add type-specific icons by default: \"date\", \"email\", \"password\", \"search\", \"tel\", \"time\".",
+          "docs": "Specifies the component type.\r\n\r\nNote that the following types add type-specific icons by default: \"date\", \"email\", \"password\", \"search\", \"tel\", \"time\".",
           "docsTags": [],
           "default": "\"text\"",
           "values": [
@@ -9576,7 +9604,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Fires each time a new value is typed.\n\n**Note:**: The `el` and `value` event payload props are deprecated, please use the event's target/currentTarget instead",
+          "docs": "Fires each time a new value is typed.\r\n\r\n**Note:**: The `el` and `value` event payload props are deprecated, please use the event's target/currentTarget instead",
           "docsTags": []
         }
       ],
@@ -9626,11 +9654,11 @@
       "filePath": "./src/components/input-date-picker/input-date-picker.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-input-date-picker",
-      "readme": "# calcite-input-date-picker\n",
+      "readme": "# calcite-input-date-picker\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {
-        "Basic": "```html\n<div style=\"width: 400px\">\n  <calcite-label layout=\"inline\">\n    Date\n    <calcite-input-date-picker\n      min=\"2016-08-09\"\n      max=\"2023-12-18\"\n      locale=\"en\"\n      intl-next-month=\"Next month\"\n      intl-prev-month=\"Previous month\"\n      role=\"application\"\n      layout=\"horizontal\"\n    ></calcite-input-date-picker>\n  </calcite-label>\n</div>\n```\n"
+        "Basic": "```html\r\n<div style=\"width: 400px\">\r\n  <calcite-label layout=\"inline\">\r\n    Date\r\n    <calcite-input-date-picker\r\n      min=\"2016-08-09\"\r\n      max=\"2023-12-18\"\r\n      locale=\"en\"\r\n      intl-next-month=\"Next month\"\r\n      intl-prev-month=\"Previous month\"\r\n      role=\"application\"\r\n      layout=\"horizontal\"\r\n    ></calcite-input-date-picker>\r\n  </calcite-label>\r\n</div>\r\n```\r\n"
       },
       "props": [
         {
@@ -9974,7 +10002,7 @@
           "mutable": false,
           "attr": "overlay-positioning",
           "reflectToAttr": false,
-          "docs": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\".",
+          "docs": "Determines the type of positioning to use for the overlaid content.\r\n\r\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\".",
           "docsTags": [],
           "default": "\"absolute\"",
           "values": [
@@ -9992,7 +10020,7 @@
         },
         {
           "name": "placement",
-          "type": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "type": "\"bottom\" | \"bottom-end\" | \"bottom-leading\" | \"bottom-start\" | \"bottom-trailing\" | \"top\" | \"top-end\" | \"top-leading\" | \"top-start\" | \"top-trailing\"",
           "mutable": false,
           "attr": "placement",
           "reflectToAttr": true,
@@ -10013,10 +10041,18 @@
               "value": "bottom-end",
               "type": "string"
             },
+            {
+              "value": "bottom-leading",
+              "type": "string"
+            },
             {
               "value": "bottom-start",
               "type": "string"
             },
+            {
+              "value": "bottom-trailing",
+              "type": "string"
+            },
             {
               "value": "top",
               "type": "string"
@@ -10025,9 +10061,17 @@
               "value": "top-end",
               "type": "string"
             },
+            {
+              "value": "top-leading",
+              "type": "string"
+            },
             {
               "value": "top-start",
               "type": "string"
+            },
+            {
+              "value": "top-trailing",
+              "type": "string"
             }
           ],
           "optional": false,
@@ -10353,7 +10397,7 @@
       "filePath": "./src/components/input-message/input-message.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-input-message",
-      "readme": "# calcite-input-message\n\nDisplays a contextual message to a user. Allows the passing of content, links, etc.\n",
+      "readme": "# calcite-input-message\r\n\r\nDisplays a contextual message to a user. Allows the passing of content, links, etc.\r\n\r",
       "docs": "Displays a contextual message to a user. Allows the passing of content, links, etc.",
       "docsTags": [
         {
@@ -10362,7 +10406,7 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-label status=\"“invalid”\">\n  My great label\n  <calcite-input placeholder=\"“Enter\" your information”></calcite-input>\n  <calcite-input-message active\n    >That's not going to work out.\n    <calcite-button appearance=\"inline\" href=\"\">Learn more</calcite-button></calcite-input-message\n  >\n</calcite-label>\n```\n"
+        "Basic": "```html\r\n<calcite-label status=\"“invalid”\">\r\n  My great label\r\n  <calcite-input placeholder=\"“Enter\" your information”></calcite-input>\r\n  <calcite-input-message active\r\n    >That's not going to work out.\r\n    <calcite-button appearance=\"inline\" href=\"\">Learn more</calcite-button></calcite-input-message\r\n  >\r\n</calcite-label>\r\n```\r\n"
       },
       "props": [
         {
@@ -10388,7 +10432,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": true,
-          "docs": "when used as a boolean set to true, show a default icon based on status. You can\nalso pass a calcite-ui-icon name to this prop to display a custom icon",
+          "docs": "when used as a boolean set to true, show a default icon based on status. You can\r\nalso pass a calcite-ui-icon name to this prop to display a custom icon",
           "docsTags": [],
           "values": [
             {
@@ -10508,7 +10552,7 @@
       "filePath": "./src/components/input-number/input-number.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-input-number",
-      "readme": "# calcite-input-number\n",
+      "readme": "# calcite-input-number\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -11143,7 +11187,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Fires each time a new value is typed.\n\n**Note:**: The `el` and `value` event payload props are deprecated, please use the event's target/currentTarget instead",
+          "docs": "Fires each time a new value is typed.\r\n\r\n**Note:**: The `el` and `value` event payload props are deprecated, please use the event's target/currentTarget instead",
           "docsTags": []
         }
       ],
@@ -11172,7 +11216,7 @@
       "filePath": "./src/components/input-text/input-text.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-input-text",
-      "readme": "# calcite-input-text\n",
+      "readme": "# calcite-input-text\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -11688,11 +11732,11 @@
       "filePath": "./src/components/input-time-picker/input-time-picker.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-input-time-picker",
-      "readme": "# calcite-input-time-picker\n",
+      "readme": "# calcite-input-time-picker\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {
-        "Basic": "```html\n<calcite-input-time-picker\n  hour-display-format=\"12\"\n  name=\"light\"\n  scale=\"m\"\n  step=\"1\"\n  value=\"12:21\"\n></calcite-input-time-picker>\n```\n"
+        "Basic": "```html\r\n<calcite-input-time-picker\r\n  hour-display-format=\"12\"\r\n  name=\"light\"\r\n  scale=\"m\"\r\n  step=\"1\"\r\n  value=\"12:21\"\r\n></calcite-input-time-picker>\r\n```\r\n"
       },
       "props": [
         {
@@ -12139,7 +12183,7 @@
       "filePath": "./src/components/label/label.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-label",
-      "readme": "# calcite-label\n\nRenders a `<label>` around its children and can be used with any [labelable native](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form_labelable) or labelable calcite element.\n",
+      "readme": "# calcite-label\r\n\r\nRenders a `<label>` around its children and can be used with any [labelable native](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form_labelable) or labelable calcite element.\r\n\r",
       "docs": "Renders a `<label>` around its children and can be used with any [labelable native](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form_labelable) or labelable calcite element.",
       "docsTags": [
         {
@@ -12148,8 +12192,8 @@
         }
       ],
       "usage": {
-        "Basic": "It also allows consumers to set a `status` attribute for child `calcite-input` and `calcite-input-message` components to use to set their own properties.\n\n```html\n<calcite-label status=\"invalid\">\n  Invalid input\n  <calcite-input type=\"search\" placeholder=\"Filter your files\" value=\"adfo2h2\"></calcite-input>\n  <calcite-input-message active icon> Something doesn't look right </calcite-input-message>\n</calcite-label>\n```\n",
-        "Browser-caveat": "When using the `default`, `inline` or `inline-space-between` layout option with [browsers that do not support the CSS `gap` property when used with flexbox](https://caniuse.com/flexbox-gap), you will need to use the `disable-spacing` attribute and apply spacing manually to the label by wrapping it in a styled span like so:\n\n```html\n<calcite-label layout=\"inline\" disable-spacing>\n  <span style=\"margin-right: 0.75rem\">Text leading inline</span>\n  <calcite-checkbox></calcite-checkbox>\n</calcite-label>\n```\n"
+        "Basic": "It also allows consumers to set a `status` attribute for child `calcite-input` and `calcite-input-message` components to use to set their own properties.\r\n\r\n```html\r\n<calcite-label status=\"invalid\">\r\n  Invalid input\r\n  <calcite-input type=\"search\" placeholder=\"Filter your files\" value=\"adfo2h2\"></calcite-input>\r\n  <calcite-input-message active icon> Something doesn't look right </calcite-input-message>\r\n</calcite-label>\r\n```\r\n",
+        "Browser-caveat": "When using the `default`, `inline` or `inline-space-between` layout option with [browsers that do not support the CSS `gap` property when used with flexbox](https://caniuse.com/flexbox-gap), you will need to use the `disable-spacing` attribute and apply spacing manually to the label by wrapping it in a styled span like so:\r\n\r\n```html\r\n<calcite-label layout=\"inline\" disable-spacing>\r\n  <span style=\"margin-right: 0.75rem\">Text leading inline</span>\r\n  <calcite-checkbox></calcite-checkbox>\r\n</calcite-label>\r\n```\r\n"
       },
       "props": [
         {
@@ -12356,7 +12400,7 @@
       "filePath": "./src/components/link/link.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-link",
-      "readme": "# calcite-link\n",
+      "readme": "# calcite-link\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -12365,8 +12409,8 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<div style=\"font-size: 16px; font-weight: 400;\">\n  Some wrapping text\n  <calcite-link href=\"#\">link text here</calcite-link>\n  around the link\n</div>\n```\n",
-        "Focusing": "You can programmatically focus a `calcite-link` with the `setFocus()` method:\n\n```html\n<div onclick=document.querySelector('#my-link').setFocus()>Focus!</div>\n```\n"
+        "Basic": "```html\r\n<div style=\"font-size: 16px; font-weight: 400;\">\r\n  Some wrapping text\r\n  <calcite-link href=\"#\">link text here</calcite-link>\r\n  around the link\r\n</div>\r\n```\r\n",
+        "Focusing": "You can programmatically focus a `calcite-link` with the `setFocus()` method:\r\n\r\n```html\r\n<div onclick=document.querySelector('#my-link').setFocus()>Focus!</div>\r\n```\r\n"
       },
       "props": [
         {
@@ -12392,7 +12436,7 @@
           "mutable": false,
           "attr": "download",
           "reflectToAttr": true,
-          "docs": "Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:\nWithout a value, the browser will suggest a filename/extension\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download",
+          "docs": "Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:\r\nWithout a value, the browser will suggest a filename/extension\r\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -12554,7 +12598,7 @@
       "filePath": "./src/components/list/list.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-list",
-      "readme": "# calcite-list\n",
+      "readme": "# calcite-list\r\n\r",
       "docs": "A general purpose list that enables users to construct list items that conform to Calcite styling.",
       "docsTags": [
         {
@@ -12563,10 +12607,10 @@
         }
       ],
       "usage": {
-        "Advanced": "```html\n<calcite-list>\n  <calcite-list-item label=\"Princess Bubblegum\" description=\"Ruler of The Candy Kingdom\">\n    <calcite-action icon=\"drag\" label=\"drag\" scale=\"s\" slot=\"actions-start\"></calcite-action>\n    <calcite-icon scale=\"l\" icon=\"effects\" slot=\"content-start\"></calcite-icon>\n    <calcite-avatar\n      scale=\"l\"\n      slot=\"content-start\"\n      thumbnail=\"https://slm-assets.secondlife.com/assets/19947929/view_large/Capture_du_2018-03-04_20-40-56.jpg?1520192584\"\n    ></calcite-avatar>\n    <calcite-icon scale=\"s\" icon=\"check\" slot=\"content-end\" style=\"color: var(--calcite-ui-success)\"></calcite-icon>\n    <calcite-action icon=\"ellipsis\" label=\"menu\" slot=\"actions-end\"></calcite-action>\n    <calcite-action icon=\"x\" label=\"remove\" slot=\"actions-end\"></calcite-action>\n  </calcite-list-item>\n  <calcite-list-item label=\"Finn Mertens\" description=\"Part owner of the Tree House\">\n    <calcite-action icon=\"drag\" label=\"drag\" scale=\"s\" slot=\"actions-start\"></calcite-action>\n    <calcite-icon scale=\"l\" icon=\"running\" slot=\"content-start\"></calcite-icon>\n    <calcite-avatar\n      scale=\"l\"\n      slot=\"content-start\"\n      thumbnail=\"https://www.seekpng.com/png/detail/90-906849_89kib-1024x631-finn-finn-adventure-time-face.png\"\n    ></calcite-avatar>\n    <calcite-icon scale=\"s\" icon=\"check\" slot=\"content-end\" style=\"color: var(--calcite-ui-success)\"></calcite-icon>\n    <calcite-action icon=\"ellipsis\" label=\"menu\" slot=\"actions-end\"></calcite-action>\n    <calcite-action icon=\"x\" label=\"remove\" slot=\"actions-end\"></calcite-action>\n  </calcite-list-item>\n  <calcite-list-item label=\"Jake T. Dog\" description=\"Part owner of the Tree House\">\n    <calcite-action icon=\"drag\" label=\"drag\" scale=\"s\" slot=\"actions-start\"></calcite-action>\n    <calcite-icon scale=\"l\" icon=\"walking\" slot=\"content-start\"></calcite-icon>\n    <calcite-avatar\n      scale=\"l\"\n      slot=\"content-start\"\n      thumbnail=\"https://static.wikia.nocookie.net/adventuretimewithfinnandjake/images/c/c9/603138_454321168018988_647044807_n.png/revision/latest/scale-to-width-down/250?cb=20140624024310\"\n    ></calcite-avatar>\n    <calcite-icon\n      scale=\"s\"\n      icon=\"exclamation-mark-triangle\"\n      slot=\"content-end\"\n      style=\"color: var(--calcite-ui-danger)\"\n    ></calcite-icon>\n    <calcite-action icon=\"ellipsis\" label=\"menu\" slot=\"actions-end\"></calcite-action>\n    <calcite-action icon=\"x\" label=\"remove\" slot=\"actions-end\"></calcite-action>\n  </calcite-list-item>\n</calcite-list>\n```\n",
-        "Basic": "```html\n<calcite-list>\n  <calcite-list-item\n    label=\"Cras iaculis ultricies nulla.\"\n    description=\"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\"\n  ></calcite-list-item>\n  <calcite-list-item\n    label=\"Ut aliquam sollicitudin leo.\"\n    description=\"Aliquam tincidunt mauris eu risus.\"\n  ></calcite-list-item>\n  <calcite-list-item\n    label=\"Vestibulum commodo felis quis tortor.\n  \"\n    description=\"Vestibulum auctor dapibus neque.\n  \"\n  ></calcite-list-item>\n</calcite-list>\n```\n",
-        "Grouped": "```html\n<calcite-list>\n  <calcite-list-item-group heading=\"Digits\">\n    <calcite-list-item\n      label=\"One\"\n      description=\"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\"\n    ></calcite-list-item>\n    <calcite-list-item label=\"Two\" description=\"Aliquam tincidunt mauris eu risus.\"></calcite-list-item>\n    <calcite-list-item label=\"Three\" description=\"Vestibulum auctor dapibus neque.\"></calcite-list-item>\n  </calcite-list-item-group>\n  <calcite-list-item-group heading=\"Letters\">\n    <calcite-list-item\n      label=\"A\"\n      description=\"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\"\n    ></calcite-list-item>\n    <calcite-list-item label=\"B\" description=\"Aliquam tincidunt mauris eu risus.\"></calcite-list-item>\n    <calcite-list-item\n      label=\"C\"\n      description=\"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\"\n    ></calcite-list-item>\n  </calcite-list-item-group>\n</calcite-list>\n```\n",
-        "Nested": "```html\n<calcite-list>\n  <calcite-list-item\n    label=\"Cras iaculis ultricies nulla.\"\n    description=\"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\"\n  >\n    <calcite-list-item label=\"Ut aliquam sollicitudin leo.\" description=\"Aliquam tincidunt mauris eu risus.\">\n      <calcite-list-item\n        label=\"Vestibulum commodo felis quis tortor.\"\n        description=\"Vestibulum auctor dapibus neque.\"\n      ></calcite-list-item></calcite-list-item\n  ></calcite-list-item>\n</calcite-list>\n```\n"
+        "Advanced": "```html\r\n<calcite-list>\r\n  <calcite-list-item label=\"Princess Bubblegum\" description=\"Ruler of The Candy Kingdom\">\r\n    <calcite-action icon=\"drag\" label=\"drag\" scale=\"s\" slot=\"actions-start\"></calcite-action>\r\n    <calcite-icon scale=\"l\" icon=\"effects\" slot=\"content-start\"></calcite-icon>\r\n    <calcite-avatar\r\n      scale=\"l\"\r\n      slot=\"content-start\"\r\n      thumbnail=\"https://slm-assets.secondlife.com/assets/19947929/view_large/Capture_du_2018-03-04_20-40-56.jpg?1520192584\"\r\n    ></calcite-avatar>\r\n    <calcite-icon scale=\"s\" icon=\"check\" slot=\"content-end\" style=\"color: var(--calcite-ui-success)\"></calcite-icon>\r\n    <calcite-action icon=\"ellipsis\" label=\"menu\" slot=\"actions-end\"></calcite-action>\r\n    <calcite-action icon=\"x\" label=\"remove\" slot=\"actions-end\"></calcite-action>\r\n  </calcite-list-item>\r\n  <calcite-list-item label=\"Finn Mertens\" description=\"Part owner of the Tree House\">\r\n    <calcite-action icon=\"drag\" label=\"drag\" scale=\"s\" slot=\"actions-start\"></calcite-action>\r\n    <calcite-icon scale=\"l\" icon=\"running\" slot=\"content-start\"></calcite-icon>\r\n    <calcite-avatar\r\n      scale=\"l\"\r\n      slot=\"content-start\"\r\n      thumbnail=\"https://www.seekpng.com/png/detail/90-906849_89kib-1024x631-finn-finn-adventure-time-face.png\"\r\n    ></calcite-avatar>\r\n    <calcite-icon scale=\"s\" icon=\"check\" slot=\"content-end\" style=\"color: var(--calcite-ui-success)\"></calcite-icon>\r\n    <calcite-action icon=\"ellipsis\" label=\"menu\" slot=\"actions-end\"></calcite-action>\r\n    <calcite-action icon=\"x\" label=\"remove\" slot=\"actions-end\"></calcite-action>\r\n  </calcite-list-item>\r\n  <calcite-list-item label=\"Jake T. Dog\" description=\"Part owner of the Tree House\">\r\n    <calcite-action icon=\"drag\" label=\"drag\" scale=\"s\" slot=\"actions-start\"></calcite-action>\r\n    <calcite-icon scale=\"l\" icon=\"walking\" slot=\"content-start\"></calcite-icon>\r\n    <calcite-avatar\r\n      scale=\"l\"\r\n      slot=\"content-start\"\r\n      thumbnail=\"https://static.wikia.nocookie.net/adventuretimewithfinnandjake/images/c/c9/603138_454321168018988_647044807_n.png/revision/latest/scale-to-width-down/250?cb=20140624024310\"\r\n    ></calcite-avatar>\r\n    <calcite-icon\r\n      scale=\"s\"\r\n      icon=\"exclamation-mark-triangle\"\r\n      slot=\"content-end\"\r\n      style=\"color: var(--calcite-ui-danger)\"\r\n    ></calcite-icon>\r\n    <calcite-action icon=\"ellipsis\" label=\"menu\" slot=\"actions-end\"></calcite-action>\r\n    <calcite-action icon=\"x\" label=\"remove\" slot=\"actions-end\"></calcite-action>\r\n  </calcite-list-item>\r\n</calcite-list>\r\n```\r\n",
+        "Basic": "```html\r\n<calcite-list>\r\n  <calcite-list-item\r\n    label=\"Cras iaculis ultricies nulla.\"\r\n    description=\"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\"\r\n  ></calcite-list-item>\r\n  <calcite-list-item\r\n    label=\"Ut aliquam sollicitudin leo.\"\r\n    description=\"Aliquam tincidunt mauris eu risus.\"\r\n  ></calcite-list-item>\r\n  <calcite-list-item\r\n    label=\"Vestibulum commodo felis quis tortor.\r\n  \"\r\n    description=\"Vestibulum auctor dapibus neque.\r\n  \"\r\n  ></calcite-list-item>\r\n</calcite-list>\r\n```\r\n",
+        "Grouped": "```html\r\n<calcite-list>\r\n  <calcite-list-item-group heading=\"Digits\">\r\n    <calcite-list-item\r\n      label=\"One\"\r\n      description=\"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\"\r\n    ></calcite-list-item>\r\n    <calcite-list-item label=\"Two\" description=\"Aliquam tincidunt mauris eu risus.\"></calcite-list-item>\r\n    <calcite-list-item label=\"Three\" description=\"Vestibulum auctor dapibus neque.\"></calcite-list-item>\r\n  </calcite-list-item-group>\r\n  <calcite-list-item-group heading=\"Letters\">\r\n    <calcite-list-item\r\n      label=\"A\"\r\n      description=\"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\"\r\n    ></calcite-list-item>\r\n    <calcite-list-item label=\"B\" description=\"Aliquam tincidunt mauris eu risus.\"></calcite-list-item>\r\n    <calcite-list-item\r\n      label=\"C\"\r\n      description=\"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\"\r\n    ></calcite-list-item>\r\n  </calcite-list-item-group>\r\n</calcite-list>\r\n```\r\n",
+        "Nested": "```html\r\n<calcite-list>\r\n  <calcite-list-item\r\n    label=\"Cras iaculis ultricies nulla.\"\r\n    description=\"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\"\r\n  >\r\n    <calcite-list-item label=\"Ut aliquam sollicitudin leo.\" description=\"Aliquam tincidunt mauris eu risus.\">\r\n      <calcite-list-item\r\n        label=\"Vestibulum commodo felis quis tortor.\"\r\n        description=\"Vestibulum auctor dapibus neque.\"\r\n      ></calcite-list-item></calcite-list-item\r\n  ></calcite-list-item>\r\n</calcite-list>\r\n```\r\n"
       },
       "props": [
         {
@@ -12655,8 +12699,8 @@
       "filePath": "./src/components/list-item/list-item.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-list-item",
-      "readme": "# calcite-list-item\n\nA general purpose list that enables users to construct list items that conform to Calcite styling.\n\nIf you are looking for a list that handles more advanced usage like selection, see the documentation for 'calcite-pick-list' or 'calcite-value-list'.\n",
-      "docs": "A general purpose list that enables users to construct list items that conform to Calcite styling.\n\nIf you are looking for a list that handles more advanced usage like selection, see the documentation for 'calcite-pick-list' or 'calcite-value-list'.",
+      "readme": "# calcite-list-item\r\n\r\nA general purpose list that enables users to construct list items that conform to Calcite styling.\r\n\r\nIf you are looking for a list that handles more advanced usage like selection, see the documentation for 'calcite-pick-list' or 'calcite-value-list'.\r\n\r",
+      "docs": "A general purpose list that enables users to construct list items that conform to Calcite styling.\r\n\r\nIf you are looking for a list that handles more advanced usage like selection, see the documentation for 'calcite-pick-list' or 'calcite-value-list'.",
       "docsTags": [
         {
           "name": "slot",
@@ -12795,7 +12839,7 @@
       "filePath": "./src/components/list-item-group/list-item-group.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-list-item-group",
-      "readme": "# calcite-list-item-group\n",
+      "readme": "# calcite-list-item-group\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -12878,13 +12922,13 @@
       "filePath": "./src/components/loader/loader.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-loader",
-      "readme": "# calcite-loader\n\nThe `calcite-loader` component can act as a determinate or indeterminate loading indicator.\n",
+      "readme": "# calcite-loader\r\n\r\nThe `calcite-loader` component can act as a determinate or indeterminate loading indicator.\r\n\r",
       "docs": "The `calcite-loader` component can act as a determinate or indeterminate loading indicator.",
       "docsTags": [],
       "usage": {
-        "Basic": "You can use the `active` attribute to toggle visibility:\n\n```html\n<calcite-loader text=\"Fetching data...\" active></calcite-loader>\n```\n",
-        "Compact": "For instances when you don't have room for the full loader, you can use the smaller `inline` version of the loader. The inline version is meant to sit to the left of text:\n\n```html\n<p><calcite-loader active inline></calcite-loader> Inline loader</p>\n```\n",
-        "Determinate": "If you can calculate your progress, it's best to use the determinate version of the loader. Update the `value` of the element when progress is made. This will display a progress bar along the perimeter of the loader showing 32% complete:\n\n```html\n<calcite-loader type=\"determinate\" value=\"32\" active></calcite-loader>\n```\n"
+        "Basic": "You can use the `active` attribute to toggle visibility:\r\n\r\n```html\r\n<calcite-loader text=\"Fetching data...\" active></calcite-loader>\r\n```\r\n",
+        "Compact": "For instances when you don't have room for the full loader, you can use the smaller `inline` version of the loader. The inline version is meant to sit to the left of text:\r\n\r\n```html\r\n<p><calcite-loader active inline></calcite-loader> Inline loader</p>\r\n```\r\n",
+        "Determinate": "If you can calculate your progress, it's best to use the determinate version of the loader. Update the `value` of the element when progress is made. This will display a progress bar along the perimeter of the loader showing 32% complete:\r\n\r\n```html\r\n<calcite-loader type=\"determinate\" value=\"32\" active></calcite-loader>\r\n```\r\n"
       },
       "props": [
         {
@@ -13094,8 +13138,8 @@
       "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>",
+      "readme": "# calcite-modal\r\n\r\n`calcite-modal` allows you to show a modal/dialog to your users. The modal handles fencing focus and animating in/out.\r\n\r\n<style>\r\n  html {\r\n      overflow:auto !important;\r\n  }\r\n</style>\r",
+      "docs": "`calcite-modal` allows you to show a modal/dialog to your users. The modal handles fencing focus and animating in/out.\r\n\r\n<style>\r\n  html {\r\n      overflow:auto !important;\r\n  }\r\n</style>",
       "docsTags": [
         {
           "name": "slot",
@@ -13119,9 +13163,9 @@
         }
       ],
       "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\" active>\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\" color=\"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 active></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"
+        "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.\r\n\r\n```html\r\n<calcite-modal aria-labelledby=\"modal-title\" active>\r\n  <h3 slot=\"header\" id=\"modal-title\">Title of the modal</h3>\r\n  <div slot=\"content\">The actual content of the modal</div>\r\n  <calcite-button slot=\"back\" color=\"neutral\" appearance=\"outline\" icon=\"chevron-left\" width=\"full\">\r\n    Back\r\n  </calcite-button>\r\n  <calcite-button slot=\"secondary\" width=\"full\" appearance=\"outline\"> Cancel </calcite-button>\r\n  <calcite-button slot=\"primary\" width=\"full\"> Save </calcite-button>\r\n</calcite-modal>\r\n```\r\n",
+        "Open": "To open a modal, add the `active` prop. Once the opening animation is complete, the `calciteModalOpen` event will be fired.\r\n\r\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.\r\n\r\n```html\r\n<calcite-modal active></calcite-modal>\r\n```\r\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):\r\n\r\n```js\r\nfunction beforeClose() {\r\n  return new Promise((resolve) => {\r\n    // do something async\r\n    resolve(); // this will trigger the close animation\r\n  });\r\n}\r\n\r\nconst modal = document.getElementById(\"my-modal\");\r\nmodal.beforeClose = beforeClose;\r\n```\r\n"
       },
       "props": [
         {
@@ -13191,7 +13235,7 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": true,
-          "docs": "Adds a color bar to the top of component for visual impact.\nUse color to add importance to destructive or workflow dialogs.",
+          "docs": "Adds a color bar to the top of component for visual impact.\r\nUse color to add importance to destructive or workflow dialogs.",
           "docsTags": [],
           "values": [
             {
@@ -13452,7 +13496,7 @@
           },
           "signature": "setFocus(focusId?: \"close-button\") => Promise<void>",
           "parameters": [],
-          "docs": "Sets focus on the component.\n\nBy default, tries to focus on focusable content. If there is none, it will focus on the close button.\nTo focus on the close button, use the `close-button` focus ID.",
+          "docs": "Sets focus on the component.\r\n\r\nBy default, tries to focus on focusable content. If there is none, it will focus on the close button.\r\nTo focus on the close button, use the `close-button` focus ID.",
           "docsTags": [
             {
               "name": "param",
@@ -13576,7 +13620,7 @@
       "filePath": "./src/components/notice/notice.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-notice",
-      "readme": "# calcite-notice\n",
+      "readme": "# calcite-notice\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -13597,8 +13641,8 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-notice scale=\"l\" width=\"half\" active>\n  <div slot=\"title\">Something failed</div>\n  <div slot=\"message\">That thing you wanted to do didn't work as expected</div>\n  <calcite-link slot=\"link\" href=\"/\">View details</calcite-link>\n  <calcite-action id=\"retry-action\" slot=\"actions-end\" title=\"Retry\" icon=\"reset\"></calcite-action>\n</calcite-notice>\n```\n",
-        "Set-focus": "You can programmatically focus the close button of a `dismissible` `calcite-notice` with the `setFocus()` method:\n\n```html\n<div onclick=\"document.querySelector('#my-notice').setFocus();\">Focus!</div>\n```\n"
+        "Basic": "```html\r\n<calcite-notice scale=\"l\" width=\"half\" active>\r\n  <div slot=\"title\">Something failed</div>\r\n  <div slot=\"message\">That thing you wanted to do didn't work as expected</div>\r\n  <calcite-link slot=\"link\" href=\"/\">View details</calcite-link>\r\n  <calcite-action id=\"retry-action\" slot=\"actions-end\" title=\"Retry\" icon=\"reset\"></calcite-action>\r\n</calcite-notice>\r\n```\r\n",
+        "Set-focus": "You can programmatically focus the close button of a `dismissible` `calcite-notice` with the `setFocus()` method:\r\n\r\n```html\r\n<div onclick=\"document.querySelector('#my-notice').setFocus();\">Focus!</div>\r\n```\r\n"
       },
       "props": [
         {
@@ -13700,7 +13744,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": true,
-          "docs": "When present, shows a default recommended icon. You can\nalso pass a calcite-ui-icon name to display a requested icon.",
+          "docs": "When present, shows a default recommended icon. You can\r\nalso pass a calcite-ui-icon name to display a requested icon.",
           "docsTags": [],
           "values": [
             {
@@ -13879,7 +13923,7 @@
       "filePath": "./src/components/option/option.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-option",
-      "readme": "# calcite-option\n",
+      "readme": "# calcite-option\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -13964,7 +14008,7 @@
       "filePath": "./src/components/option-group/option-group.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-option-group",
-      "readme": "# calcite-option-group\n",
+      "readme": "# calcite-option-group\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -14027,11 +14071,11 @@
       "filePath": "./src/components/pagination/pagination.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-pagination",
-      "readme": "# calcite-pagination\n\n`calcite-pagination` allows users to select a page from a paginated API.\n",
+      "readme": "# calcite-pagination\r\n\r\n`calcite-pagination` allows users to select a page from a paginated API.\r\n\r",
       "docs": "`calcite-pagination` allows users to select a page from a paginated API.",
       "docsTags": [],
       "usage": {
-        "Basic": "The component is meant to interface with responses from ArcGIS REST services, so the props share names with [response properties](https://developers.arcgis.com/rest/users-groups-and-items/search.htm) from various search endpoints.\n\nFor example, after querying the search API, you'll get back a response similar to JSON below. The response can be passed straight to the `calcite-pagination` component.\n\n```JSON\n{\n  \"total\": 2021,\n  \"start\": 1,\n  \"num\": 100,\n  \"results\": []\n}\n```\n\n```html\n<calcite-pagination start=\"1\" num=\"100\" total=\"2021\"></calcite-pagination>\n```\n"
+        "Basic": "The component is meant to interface with responses from ArcGIS REST services, so the props share names with [response properties](https://developers.arcgis.com/rest/users-groups-and-items/search.htm) from various search endpoints.\r\n\r\nFor example, after querying the search API, you'll get back a response similar to JSON below. The response can be passed straight to the `calcite-pagination` component.\r\n\r\n```JSON\r\n{\r\n  \"total\": 2021,\r\n  \"start\": 1,\r\n  \"num\": 100,\r\n  \"results\": []\r\n}\r\n```\r\n\r\n```html\r\n<calcite-pagination start=\"1\" num=\"100\" total=\"2021\"></calcite-pagination>\r\n```\r\n"
       },
       "props": [
         {
@@ -14235,7 +14279,7 @@
       "filePath": "./src/components/panel/panel.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-panel",
-      "readme": "# calcite-panel\n\nThe `calcite-panel` component is a container for a header, content and optional footer. The header will have centered content as well as optional leading and trailing content. The panel can also be setup to be dismissible which allows it to be closed by a user.\n",
+      "readme": "# calcite-panel\r\n\r\nThe `calcite-panel` component is a container for a header, content and optional footer. The header will have centered content as well as optional leading and trailing content. The panel can also be setup to be dismissible which allows it to be closed by a user.\r\n\r",
       "docs": "The `calcite-panel` component is a container for a header, content and optional footer. The header will have centered content as well as optional leading and trailing content. The panel can also be setup to be dismissible which allows it to be closed by a user.",
       "docsTags": [
         {
@@ -14272,10 +14316,10 @@
         }
       ],
       "usage": {
-        "Basic": "Renders a basic panel with a header.\n\n```html\n<calcite-panel>\n  <div slot=\"header-content\">Header!</div>\n  <p>Slotted content!</p>\n</calcite-panel>\n```\n",
-        "Dismissible": "Renders a panel that is dismissible with a click of the \"x\".\n\n```html\n<calcite-panel dismissible id=\"dismissible-panel\">\n  <div slot=\"header-content\">Dismissible Header</div>\n  <p>Click the X and I go away!</p>\n</calcite-panel>\n```\n",
-        "Header-with-actions": "Renders a panel with leading and trailing `calcite-action`s.\n\n```html\n<calcite-panel>\n  <calcite-action\n    label=\"Performs my custom action\"\n    text=\"Perform Action!\"\n    text-enabled\n    icon=\"home\"\n    slot=\"header-actions-start\"\n  ></calcite-action>\n  <div slot=\"header-content\">Header!</div>\n  <calcite-action\n    label=\"Performs another custom action\"\n    text=\"Perform Another Action!\"\n    text-enabled\n    icon=\"blog\"\n    slot=\"header-actions-end\"\n  ></calcite-action>\n  <p>Actions are in the top left and right.</p>\n</calcite-panel>\n```\n",
-        "With-footer": "Renders a panel with a header and a footer.\n\n```html\n<calcite-panel>\n  <div slot=\"header-content\">Header!</div>\n  <p>I have a footer.</p>\n  <div slot=\"footer\">Footer!</div>\n</calcite-panel>\n```\n"
+        "Basic": "Renders a basic panel with a header.\r\n\r\n```html\r\n<calcite-panel>\r\n  <div slot=\"header-content\">Header!</div>\r\n  <p>Slotted content!</p>\r\n</calcite-panel>\r\n```\r\n",
+        "Dismissible": "Renders a panel that is dismissible with a click of the \"x\".\r\n\r\n```html\r\n<calcite-panel dismissible id=\"dismissible-panel\">\r\n  <div slot=\"header-content\">Dismissible Header</div>\r\n  <p>Click the X and I go away!</p>\r\n</calcite-panel>\r\n```\r\n",
+        "Header-with-actions": "Renders a panel with leading and trailing `calcite-action`s.\r\n\r\n```html\r\n<calcite-panel>\r\n  <calcite-action\r\n    label=\"Performs my custom action\"\r\n    text=\"Perform Action!\"\r\n    text-enabled\r\n    icon=\"home\"\r\n    slot=\"header-actions-start\"\r\n  ></calcite-action>\r\n  <div slot=\"header-content\">Header!</div>\r\n  <calcite-action\r\n    label=\"Performs another custom action\"\r\n    text=\"Perform Another Action!\"\r\n    text-enabled\r\n    icon=\"blog\"\r\n    slot=\"header-actions-end\"\r\n  ></calcite-action>\r\n  <p>Actions are in the top left and right.</p>\r\n</calcite-panel>\r\n```\r\n",
+        "With-footer": "Renders a panel with a header and a footer.\r\n\r\n```html\r\n<calcite-panel>\r\n  <div slot=\"header-content\">Header!</div>\r\n  <p>I have a footer.</p>\r\n  <div slot=\"footer\">Footer!</div>\r\n</calcite-panel>\r\n```\r\n"
       },
       "props": [
         {
@@ -14640,7 +14684,7 @@
           },
           "signature": "scrollContentTo(options?: ScrollToOptions) => Promise<void>",
           "parameters": [],
-          "docs": "Scrolls the component's content to a specified set of coordinates.\n\n```\n  myCalcitePanel.scrollContentTo({\n    left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n    top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n    behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n  });\n```",
+          "docs": "Scrolls the component's content to a specified set of coordinates.\r\n\r\n```\r\n  myCalcitePanel.scrollContentTo({\r\n    left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\r\n    top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\r\n    behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\r\n  });\r\n```",
           "docsTags": [
             {
               "name": "param",
@@ -14795,7 +14839,7 @@
       "filePath": "./src/components/pick-list/pick-list.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-pick-list",
-      "readme": "# calcite-pick-list\n\n`calcite-pick-list` lives in a panel and contains `calcite-pick-list-item`s. Each item is able to be be selected via radio button or checkboxes (which have a multiselect and shift-click capability). There is also an option for a filter at the top of the list for searching.\n",
+      "readme": "# calcite-pick-list\r\n\r\n`calcite-pick-list` lives in a panel and contains `calcite-pick-list-item`s. Each item is able to be be selected via radio button or checkboxes (which have a multiselect and shift-click capability). There is also an option for a filter at the top of the list for searching.\r\n\r",
       "docs": "`calcite-pick-list` lives in a panel and contains `calcite-pick-list-item`s. Each item is able to be be selected via radio button or checkboxes (which have a multiselect and shift-click capability). There is also an option for a filter at the top of the list for searching.",
       "docsTags": [
         {
@@ -14808,9 +14852,9 @@
         }
       ],
       "usage": {
-        "Basic": "Renders a basic pick list with radio buttons on the left and actions on the right side.\n\n```html\n<calcite-pick-list>\n  <calcite-pick-list-item label=\"T. Rex\" description=\"Arm strength impaired\" value=\"trex\">\n    <calcite-action slot=\"actions-end\" icon=\"circle\"></calcite-action>\n  </calcite-pick-list-item>\n  <calcite-pick-list-item label=\"Triceratops\" description=\"3 horn\" value=\"triceratops\" selected>\n    <calcite-action slot=\"actions-end\" icon=\"circle\"></calcite-action>\n  </calcite-pick-list-item>\n  <calcite-pick-list-item label=\"Velociraptor\" description=\"Swift seizer\" value=\"velociraptor\">\n    <calcite-action slot=\"actions-end\" icon=\"circle\"></calcite-action>\n  </calcite-pick-list-item>\n</calcite-pick-list>\n```\n",
-        "Multi-select-and-filter-enabled": "Renders a pick list with a sticky filter and checkboxes for multiple selection of items.\n\n```html\n<calcite-pick-list multiple filter-enabled>\n  <calcite-pick-list-item label=\"Chocolate\" value=\"chocolate\">\n    <calcite-action slot=\"actions-end\" icon=\"ellipsis-circle\"></calcite-action>\n  </calcite-pick-list-item>\n  <calcite-pick-list-item label=\"Vanilla\" description=\"Oldie but goodie\" value=\"vanilla\">\n    <calcite-action slot=\"actions-end\" icon=\"ellipsis-circle\"></calcite-action>\n  </calcite-pick-list-item>\n  <calcite-pick-list-item label=\"Strawberry\" description=\"no metadata on this one\" value=\"strawberry\">\n    <calcite-action slot=\"actions-end\" icon=\"ellipsis-circle\"></calcite-action>\n  </calcite-pick-list-item>\n</calcite-pick-list>\n```\n",
-        "Sub-groups": "Renders groups of pick list items that are visually separated.\n\n```html\n<calcite-pick-list>\n  <calcite-pick-list-group group-title=\"numbers\">\n    <calcite-pick-list-item label=\"one\" description=\"fish\" value=\"one\" icon=\"grip\">\n      <calcite-action slot=\"actions-end\" icon=\"ellipsis\"></calcite-action>\n    </calcite-pick-list-item>\n    <calcite-pick-list-item label=\"two\" description=\"fish\" value=\"two\" icon=\"grip\">\n      <calcite-action slot=\"actions-end\" icon=\"ellipsis\"></calcite-action>\n    </calcite-pick-list-item>\n  </calcite-pick-list-group>\n  <calcite-pick-list-group group-title=\"colors\">\n    <calcite-pick-list-item label=\"red\" description=\"fish\" value=\"red\" icon=\"grip\">\n      <calcite-action slot=\"actions-end\" icon=\"ellipsis\"></calcite-action>\n    </calcite-pick-list-item>\n    <calcite-pick-list-item label=\"blue\" description=\"fish\" value=\"blue\" icon=\"grip\">\n      <calcite-action slot=\"actions-end\" icon=\"ellipsis\"></calcite-action>\n    </calcite-pick-list-item>\n  </calcite-pick-list-group>\n</calcite-pick-list>\n```\n"
+        "Basic": "Renders a basic pick list with radio buttons on the left and actions on the right side.\r\n\r\n```html\r\n<calcite-pick-list>\r\n  <calcite-pick-list-item label=\"T. Rex\" description=\"Arm strength impaired\" value=\"trex\">\r\n    <calcite-action slot=\"actions-end\" icon=\"circle\"></calcite-action>\r\n  </calcite-pick-list-item>\r\n  <calcite-pick-list-item label=\"Triceratops\" description=\"3 horn\" value=\"triceratops\" selected>\r\n    <calcite-action slot=\"actions-end\" icon=\"circle\"></calcite-action>\r\n  </calcite-pick-list-item>\r\n  <calcite-pick-list-item label=\"Velociraptor\" description=\"Swift seizer\" value=\"velociraptor\">\r\n    <calcite-action slot=\"actions-end\" icon=\"circle\"></calcite-action>\r\n  </calcite-pick-list-item>\r\n</calcite-pick-list>\r\n```\r\n",
+        "Multi-select-and-filter-enabled": "Renders a pick list with a sticky filter and checkboxes for multiple selection of items.\r\n\r\n```html\r\n<calcite-pick-list multiple filter-enabled>\r\n  <calcite-pick-list-item label=\"Chocolate\" value=\"chocolate\">\r\n    <calcite-action slot=\"actions-end\" icon=\"ellipsis-circle\"></calcite-action>\r\n  </calcite-pick-list-item>\r\n  <calcite-pick-list-item label=\"Vanilla\" description=\"Oldie but goodie\" value=\"vanilla\">\r\n    <calcite-action slot=\"actions-end\" icon=\"ellipsis-circle\"></calcite-action>\r\n  </calcite-pick-list-item>\r\n  <calcite-pick-list-item label=\"Strawberry\" description=\"no metadata on this one\" value=\"strawberry\">\r\n    <calcite-action slot=\"actions-end\" icon=\"ellipsis-circle\"></calcite-action>\r\n  </calcite-pick-list-item>\r\n</calcite-pick-list>\r\n```\r\n",
+        "Sub-groups": "Renders groups of pick list items that are visually separated.\r\n\r\n```html\r\n<calcite-pick-list>\r\n  <calcite-pick-list-group group-title=\"numbers\">\r\n    <calcite-pick-list-item label=\"one\" description=\"fish\" value=\"one\" icon=\"grip\">\r\n      <calcite-action slot=\"actions-end\" icon=\"ellipsis\"></calcite-action>\r\n    </calcite-pick-list-item>\r\n    <calcite-pick-list-item label=\"two\" description=\"fish\" value=\"two\" icon=\"grip\">\r\n      <calcite-action slot=\"actions-end\" icon=\"ellipsis\"></calcite-action>\r\n    </calcite-pick-list-item>\r\n  </calcite-pick-list-group>\r\n  <calcite-pick-list-group group-title=\"colors\">\r\n    <calcite-pick-list-item label=\"red\" description=\"fish\" value=\"red\" icon=\"grip\">\r\n      <calcite-action slot=\"actions-end\" icon=\"ellipsis\"></calcite-action>\r\n    </calcite-pick-list-item>\r\n    <calcite-pick-list-item label=\"blue\" description=\"fish\" value=\"blue\" icon=\"grip\">\r\n      <calcite-action slot=\"actions-end\" icon=\"ellipsis\"></calcite-action>\r\n    </calcite-pick-list-item>\r\n  </calcite-pick-list-group>\r\n</calcite-pick-list>\r\n```\r\n"
       },
       "props": [
         {
@@ -14923,7 +14967,7 @@
           "mutable": false,
           "attr": "multiple",
           "reflectToAttr": true,
-          "docs": "Similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple `calcite-pick-list-item`s at a time.\nWhen false, only a single `calcite-pick-list-item` can be selected at a time,\nand a new selection will deselect previous selections.",
+          "docs": "Similar to standard radio buttons and checkboxes.\r\nWhen true, a user can select multiple `calcite-pick-list-item`s at a time.\r\nWhen false, only a single `calcite-pick-list-item` can be selected at a time,\r\nand a new selection will deselect previous selections.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -15057,7 +15101,7 @@
       "filePath": "./src/components/pick-list-group/pick-list-group.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-pick-list-group",
-      "readme": "# calcite-pick-list-group\n\n`calcite-pick-list-group` is a wrapper for multiple `calcite-pick-list-item`s and lives in `calcite-pick-list`.\n",
+      "readme": "# calcite-pick-list-group\r\n\r\n`calcite-pick-list-group` is a wrapper for multiple `calcite-pick-list-item`s and lives in `calcite-pick-list`.\r\n\r",
       "docs": "`calcite-pick-list-group` is a wrapper for multiple `calcite-pick-list-item`s and lives in `calcite-pick-list`.",
       "docsTags": [
         {
@@ -15140,7 +15184,7 @@
       "filePath": "./src/components/pick-list-item/pick-list-item.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-pick-list-item",
-      "readme": "# calcite-pick-list-item\n\n`calcite-pick-list-item`s are cards contained in a `calcite-pick-list`. They each can have a label and description, an icon, and be set to compact. The developer can disable or preselect each list item and give it a value.\n",
+      "readme": "# calcite-pick-list-item\r\n\r\n`calcite-pick-list-item`s are cards contained in a `calcite-pick-list`. They each can have a label and description, an icon, and be set to compact. The developer can disable or preselect each list item and give it a value.\r\n\r",
       "docs": "`calcite-pick-list-item`s are cards contained in a `calcite-pick-list`. They each can have a label and description, an icon, and be set to compact. The developer can disable or preselect each list item and give it a value.",
       "docsTags": [
         {
@@ -15356,7 +15400,7 @@
           },
           "signature": "toggleSelected(coerce?: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Toggles the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
+          "docs": "Toggles the selection state. By default this won't trigger an event.\r\nThe first argument allows the value to be coerced, rather than swapping values.",
           "docsTags": [
             {
               "name": "param",
@@ -15423,7 +15467,7 @@
       "filePath": "./src/components/popover/popover.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-popover",
-      "readme": "# calcite-popover\n",
+      "readme": "# calcite-popover\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -15432,8 +15476,8 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-popover reference-element=\"popover-button\">Hello! I am some popover content!</calcite-popover>\n\n<calcite-button id=\"popover-button\">Clickable popover</calcite-button>\n```\n",
-        "Virtual": "```html\n<!-- virtually positioned popover -->\n<calcite-popover id=\"virtual-popover\" label=\"Hello world!\" open>\n  <p>Hello! I am some virtual popover content!</p>\n</calcite-popover>\n\n<script>\n  function generateGetBoundingClientRect() {\n    return () => ({\n      width: 0,\n      height: 0,\n      top: 100,\n      right: 100,\n      bottom: 100,\n      left: 600\n    });\n  }\n\n  const virtualElement = {\n    getBoundingClientRect: generateGetBoundingClientRect()\n  };\n\n  const popover = document.getElementById(\"virtual-popover\");\n  popover.referenceElement = virtualElement;\n</script>\n```\n"
+        "Basic": "```html\r\n<calcite-popover reference-element=\"popover-button\">Hello! I am some popover content!</calcite-popover>\r\n\r\n<calcite-button id=\"popover-button\">Clickable popover</calcite-button>\r\n```\r\n",
+        "Virtual": "```html\r\n<!-- virtually positioned popover -->\r\n<calcite-popover id=\"virtual-popover\" label=\"Hello world!\" open>\r\n  <p>Hello! I am some virtual popover content!</p>\r\n</calcite-popover>\r\n\r\n<script>\r\n  function generateGetBoundingClientRect() {\r\n    return () => ({\r\n      width: 0,\r\n      height: 0,\r\n      top: 100,\r\n      right: 100,\r\n      bottom: 100,\r\n      left: 600\r\n    });\r\n  }\r\n\r\n  const virtualElement = {\r\n    getBoundingClientRect: generateGetBoundingClientRect()\r\n  };\r\n\r\n  const popover = document.getElementById(\"virtual-popover\");\r\n  popover.referenceElement = virtualElement;\r\n</script>\r\n```\r\n"
       },
       "props": [
         {
@@ -15718,7 +15762,7 @@
           "mutable": false,
           "attr": "overlay-positioning",
           "reflectToAttr": false,
-          "docs": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\".",
+          "docs": "Determines the type of positioning to use for the overlaid content.\r\n\r\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\".",
           "docsTags": [],
           "default": "\"absolute\"",
           "values": [
@@ -15926,7 +15970,7 @@
       "filePath": "./src/components/popover-manager/popover-manager.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-popover-manager",
-      "readme": "# calcite-popover-manager\n",
+      "readme": "# calcite-popover-manager\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -16000,11 +16044,11 @@
       "filePath": "./src/components/progress/progress.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-progress",
-      "readme": "# calcite-progress\n\nThe `calcite-progress` component is used to show progress on some async task to the user.\n",
+      "readme": "# calcite-progress\r\n\r\nThe `calcite-progress` component is used to show progress on some async task to the user.\r\n\r",
       "docs": "The `calcite-progress` component is used to show progress on some async task to the user.",
       "docsTags": [],
       "usage": {
-        "Basic": "```html\n<calcite-progress type=\"indeterminate\"></calcite-progress>\n```\n"
+        "Basic": "```html\r\n<calcite-progress type=\"indeterminate\"></calcite-progress>\r\n```\r\n"
       },
       "props": [
         {
@@ -16124,11 +16168,11 @@
       "filePath": "./src/components/radio-button/radio-button.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-radio-button",
-      "readme": "# calcite-radio-button\n",
+      "readme": "# calcite-radio-button\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {
-        "Basic": "```html\n<calcite-label for=\"item-a\" layout=\"inline\">\n  <calcite-radio-button id=\"item-a\" name=\"preferred-feature\" value=\"Maps\" checked></calcite-radio-button>\n  Maps\n</calcite-label>\n```\n"
+        "Basic": "```html\r\n<calcite-label for=\"item-a\" layout=\"inline\">\r\n  <calcite-radio-button id=\"item-a\" name=\"preferred-feature\" value=\"Maps\" checked></calcite-radio-button>\r\n  Maps\r\n</calcite-label>\r\n```\r\n"
       },
       "props": [
         {
@@ -16294,7 +16338,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Fires only when the radio button is checked.  This behavior is identical to the native HTML input element.\nSince this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event\ndirectly on the element, but instead either attach it to a node that contains all of the radio buttons in the group\nor use the calciteRadioButtonGroupChange event if using this with calcite-radio-button-group.",
+          "docs": "Fires only when the radio button is checked.  This behavior is identical to the native HTML input element.\r\nSince this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event\r\ndirectly on the element, but instead either attach it to a node that contains all of the radio buttons in the group\r\nor use the calciteRadioButtonGroupChange event if using this with calcite-radio-button-group.",
           "docsTags": []
         }
       ],
@@ -16321,7 +16365,7 @@
       "filePath": "./src/components/radio-button-group/radio-button-group.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-radio-button-group",
-      "readme": "# calcite-radio-button-group\n",
+      "readme": "# calcite-radio-button-group\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -16330,9 +16374,9 @@
         }
       ],
       "usage": {
-        "Basic": "Renders the radio button group with default horizontal layout\n\n```html\n<calcite-radio-button-group name=\"basic-group\">\n  <calcite-label layout=\"inline\">\n    <calcite-radio-button></calcite-radio-button>\n    Maps\n  </calcite-label>\n  <calcite-label layout=\"inline\">\n    <calcite-radio-button></calcite-radio-button>\n    Layers\n  </calcite-label>\n  <calcite-label layout=\"inline\">\n    <calcite-radio-button></calcite-radio-button>\n    Data\n  </calcite-label>\n  <calcite-label layout=\"inline\">\n    <calcite-radio-button></calcite-radio-button>\n    Geography\n  </calcite-label>\n</calcite-radio-button-group>\n```\n",
-        "Disabled-checked": "Renders all radio button inputs disabled, first one checked\n\n```html\n<calcite-radio-button-group name=\"disabled-group\" disabled>\n  <calcite-label layout=\"inline\">\n    <calcite-radio-button checked></calcite-radio-button>\n    A\n  </calcite-label>\n  <calcite-label layout=\"inline\">\n    <calcite-radio-button></calcite-radio-button>\n    B\n  </calcite-label>\n  <calcite-label layout=\"inline\">\n    <calcite-radio-button></calcite-radio-button>\n    C\n  </calcite-label>\n</calcite-radio-button-group>\n```\n",
-        "With-vertical-layout": "```html\n<calcite-radio-button-group name=\"vertical-group\" layout=\"vertical\">\n  <calcite-label layout=\"inline\">\n    <calcite-radio-button></calcite-radio-button>\n    Maps\n  </calcite-label>\n  <calcite-label layout=\"inline\">\n    <calcite-radio-button></calcite-radio-button>\n    Layers\n  </calcite-label>\n  <calcite-label layout=\"inline\">\n    <calcite-radio-button></calcite-radio-button>\n    Data\n  </calcite-label>\n  <calcite-label layout=\"inline\">\n    <calcite-radio-button></calcite-radio-button>\n    Geography\n  </calcite-label>\n</calcite-radio-button-group>\n```\n"
+        "Basic": "Renders the radio button group with default horizontal layout\r\n\r\n```html\r\n<calcite-radio-button-group name=\"basic-group\">\r\n  <calcite-label layout=\"inline\">\r\n    <calcite-radio-button></calcite-radio-button>\r\n    Maps\r\n  </calcite-label>\r\n  <calcite-label layout=\"inline\">\r\n    <calcite-radio-button></calcite-radio-button>\r\n    Layers\r\n  </calcite-label>\r\n  <calcite-label layout=\"inline\">\r\n    <calcite-radio-button></calcite-radio-button>\r\n    Data\r\n  </calcite-label>\r\n  <calcite-label layout=\"inline\">\r\n    <calcite-radio-button></calcite-radio-button>\r\n    Geography\r\n  </calcite-label>\r\n</calcite-radio-button-group>\r\n```\r\n",
+        "Disabled-checked": "Renders all radio button inputs disabled, first one checked\r\n\r\n```html\r\n<calcite-radio-button-group name=\"disabled-group\" disabled>\r\n  <calcite-label layout=\"inline\">\r\n    <calcite-radio-button checked></calcite-radio-button>\r\n    A\r\n  </calcite-label>\r\n  <calcite-label layout=\"inline\">\r\n    <calcite-radio-button></calcite-radio-button>\r\n    B\r\n  </calcite-label>\r\n  <calcite-label layout=\"inline\">\r\n    <calcite-radio-button></calcite-radio-button>\r\n    C\r\n  </calcite-label>\r\n</calcite-radio-button-group>\r\n```\r\n",
+        "With-vertical-layout": "```html\r\n<calcite-radio-button-group name=\"vertical-group\" layout=\"vertical\">\r\n  <calcite-label layout=\"inline\">\r\n    <calcite-radio-button></calcite-radio-button>\r\n    Maps\r\n  </calcite-label>\r\n  <calcite-label layout=\"inline\">\r\n    <calcite-radio-button></calcite-radio-button>\r\n    Layers\r\n  </calcite-label>\r\n  <calcite-label layout=\"inline\">\r\n    <calcite-radio-button></calcite-radio-button>\r\n    Data\r\n  </calcite-label>\r\n  <calcite-label layout=\"inline\">\r\n    <calcite-radio-button></calcite-radio-button>\r\n    Geography\r\n  </calcite-label>\r\n</calcite-radio-button-group>\r\n```\r\n"
       },
       "props": [
         {
@@ -16490,7 +16534,7 @@
       "filePath": "./src/components/radio-group/radio-group.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-radio-group",
-      "readme": "# calcite-radio-group\n",
+      "readme": "# calcite-radio-group\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -16499,7 +16543,7 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-radio-group layout=\"horizontal\" appearance=\"solid\" scale=\"m\" width=\"auto\">\n  <calcite-radio-group-item value=\"apple\" checked>Apple</calcite-radio-group-item>\n  <calcite-radio-group-item value=\"mango\">Mango</calcite-radio-group-item>\n  <calcite-radio-group-item value=\"tomato\">Tomato</calcite-radio-group-item>\n  <calcite-radio-group-item value=\"banana\">Banana</calcite-radio-group-item>\n</calcite-radio-group>\n```\n"
+        "Basic": "```html\r\n<calcite-radio-group layout=\"horizontal\" appearance=\"solid\" scale=\"m\" width=\"auto\">\r\n  <calcite-radio-group-item value=\"apple\" checked>Apple</calcite-radio-group-item>\r\n  <calcite-radio-group-item value=\"mango\">Mango</calcite-radio-group-item>\r\n  <calcite-radio-group-item value=\"tomato\">Tomato</calcite-radio-group-item>\r\n  <calcite-radio-group-item value=\"banana\">Banana</calcite-radio-group-item>\r\n</calcite-radio-group>\r\n```\r\n"
       },
       "props": [
         {
@@ -16720,7 +16764,7 @@
       "filePath": "./src/components/radio-group-item/radio-group-item.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-radio-group-item",
-      "readme": "# calcite-radio-group-item\n",
+      "readme": "# calcite-radio-group-item\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -16834,11 +16878,11 @@
       "filePath": "./src/components/rating/rating.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-rating",
-      "readme": "# calcite-rating\n",
+      "readme": "# calcite-rating\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {
-        "Basic": "```html\n<calcite-rating\n  show-chip\n  scale=\"m\"\n  value=\"0\"\n  average=\"4.4\"\n  count=\"10\"\n  intl-rating=\"Rating\"\n  intl-stars=\"Rating\"\n></calcite-rating>\n```\n"
+        "Basic": "```html\r\n<calcite-rating\r\n  show-chip\r\n  scale=\"m\"\r\n  value=\"0\"\r\n  average=\"4.4\"\r\n  count=\"10\"\r\n  intl-rating=\"Rating\"\r\n  intl-stars=\"Rating\"\r\n></calcite-rating>\r\n```\r\n"
       },
       "props": [
         {
@@ -17087,7 +17131,7 @@
       "filePath": "./src/components/scrim/scrim.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-scrim",
-      "readme": "# calcite-scrim\n",
+      "readme": "# calcite-scrim\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -17096,8 +17140,8 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<div style=\"position: relative; width: 200px; height: 200px; overflow: auto;\">\n  <calcite-scrim>\n    <p>I'm a panel that is not loading.</p>\n    <p>This content can have any zIndex and it will not be placed above</p>\n    <p>.</p>\n    <p>.</p>\n    <p>.</p>\n    <p>.</p>\n  </calcite-scrim>\n</div>\n```\n",
-        "Loading-scrim-panel": "```html\n<div style=\"position: relative; width: 200px; height: 200px; overflow: auto;\">\n  <calcite-scrim loading>\n    <p>I'm a panel that is not loading.</p>\n    <p>I have a loading spinner over my content.</p>\n    <p>.</p>\n    <p>.</p>\n    <p>.</p>\n    <p>.</p>\n  </calcite-scrim>\n</div>\n```\n"
+        "Basic": "```html\r\n<div style=\"position: relative; width: 200px; height: 200px; overflow: auto;\">\r\n  <calcite-scrim>\r\n    <p>I'm a panel that is not loading.</p>\r\n    <p>This content can have any zIndex and it will not be placed above</p>\r\n    <p>.</p>\r\n    <p>.</p>\r\n    <p>.</p>\r\n    <p>.</p>\r\n  </calcite-scrim>\r\n</div>\r\n```\r\n",
+        "Loading-scrim-panel": "```html\r\n<div style=\"position: relative; width: 200px; height: 200px; overflow: auto;\">\r\n  <calcite-scrim loading>\r\n    <p>I'm a panel that is not loading.</p>\r\n    <p>I have a loading spinner over my content.</p>\r\n    <p>.</p>\r\n    <p>.</p>\r\n    <p>.</p>\r\n    <p>.</p>\r\n  </calcite-scrim>\r\n</div>\r\n```\r\n"
       },
       "props": [
         {
@@ -17186,7 +17230,7 @@
       "filePath": "./src/components/select/select.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-select",
-      "readme": "# calcite-select\n\nThis component represents a menu of options.\n",
+      "readme": "# calcite-select\r\n\r\nThis component represents a menu of options.\r\n\r",
       "docs": "This component represents a menu of options.",
       "docsTags": [
         {
@@ -17195,12 +17239,12 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-select>\n  <calcite-option>high</calcite-option>\n  <calcite-option>medium</calcite-option>\n  <calcite-option>low</calcite-option>\n</calcite-select>\n```\n",
-        "Content": "Specify the underlying value and content for each option.\n\n```html\n<calcite-select>\n  <calcite-option label=\"high\">1</calcite-option>\n  <calcite-option label=\"medium\">2</calcite-option>\n  <calcite-option label=\"low\">3</calcite-option>\n</calcite-select>\n```\n",
-        "Disable": "Disable specific items or groups.\n\n```html\n<calcite-select>\n  <calcite-option-group label=\"letters\">\n    <calcite-option>a</calcite-option>\n    <calcite-option>b</calcite-option>\n    <calcite-option>c</calcite-option>\n    <calcite-option disabled>d (disabled)</calcite-option>\n  </calcite-option-group>\n  <calcite-option-group label=\"numbers\">\n    <calcite-option disabled>1 (disabled)</calcite-option>\n    <calcite-option>2</calcite-option>\n    <calcite-option selected>2</calcite-option>\n  </calcite-option-group>\n  <calcite-option-group label=\"non-selectable\" disabled>\n    <calcite-option>You-Know-Who</calcite-option>\n    <calcite-option selected>Tom Marvolo Riddle</calcite-option>\n    <calcite-option>He-Who-Must-Not-Be-Named</calcite-option>\n    <calcite-option>Voldemort</calcite-option>\n  </calcite-option-group>\n</calcite-select>\n```\n",
-        "Grouped": "Separate the options into groups.\n\n```html\n<calcite-select>\n  <calcite-option-group label=\"letters\">\n    <calcite-option>a</calcite-option>\n    <calcite-option>b</calcite-option>\n    <calcite-option>c</calcite-option>\n  </calcite-option-group>\n  <calcite-option-group label=\"numbers\">\n    <calcite-option>1</calcite-option>\n    <calcite-option selected>2</calcite-option>\n    <calcite-option>3</calcite-option>\n  </calcite-option-group>\n</calcite-select>\n```\n",
-        "Side-by-side": "Separate the options side by side using a flex-box container.\n\n```html\n<div class=\"demo-side-by-side\">\n  <calcite-select width=\"half\" label=\"half width\">\n    <calcite-option>☕️</calcite-option>\n    <calcite-option>🍵</calcite-option>\n    <calcite-option selected>🍻</calcite-option>\n  </calcite-select>\n  <calcite-select width=\"half\" label=\"half width\">\n    <calcite-option selected>🌮</calcite-option>\n    <calcite-option>🍔</calcite-option>\n    <calcite-option>🌯</calcite-option>\n  </calcite-select>\n</div>\n```\n",
-        "Value": "Specify the underlying value for each option.\n\n```html\n<calcite-select>\n  <calcite-option value=\"high\">😃</calcite-option>\n  <calcite-option value=\"medium\">😶</calcite-option>\n  <calcite-option value=\"low\">😭</calcite-option>\n</calcite-select>\n```\n"
+        "Basic": "```html\r\n<calcite-select>\r\n  <calcite-option>high</calcite-option>\r\n  <calcite-option>medium</calcite-option>\r\n  <calcite-option>low</calcite-option>\r\n</calcite-select>\r\n```\r\n",
+        "Content": "Specify the underlying value and content for each option.\r\n\r\n```html\r\n<calcite-select>\r\n  <calcite-option label=\"high\">1</calcite-option>\r\n  <calcite-option label=\"medium\">2</calcite-option>\r\n  <calcite-option label=\"low\">3</calcite-option>\r\n</calcite-select>\r\n```\r\n",
+        "Disable": "Disable specific items or groups.\r\n\r\n```html\r\n<calcite-select>\r\n  <calcite-option-group label=\"letters\">\r\n    <calcite-option>a</calcite-option>\r\n    <calcite-option>b</calcite-option>\r\n    <calcite-option>c</calcite-option>\r\n    <calcite-option disabled>d (disabled)</calcite-option>\r\n  </calcite-option-group>\r\n  <calcite-option-group label=\"numbers\">\r\n    <calcite-option disabled>1 (disabled)</calcite-option>\r\n    <calcite-option>2</calcite-option>\r\n    <calcite-option selected>2</calcite-option>\r\n  </calcite-option-group>\r\n  <calcite-option-group label=\"non-selectable\" disabled>\r\n    <calcite-option>You-Know-Who</calcite-option>\r\n    <calcite-option selected>Tom Marvolo Riddle</calcite-option>\r\n    <calcite-option>He-Who-Must-Not-Be-Named</calcite-option>\r\n    <calcite-option>Voldemort</calcite-option>\r\n  </calcite-option-group>\r\n</calcite-select>\r\n```\r\n",
+        "Grouped": "Separate the options into groups.\r\n\r\n```html\r\n<calcite-select>\r\n  <calcite-option-group label=\"letters\">\r\n    <calcite-option>a</calcite-option>\r\n    <calcite-option>b</calcite-option>\r\n    <calcite-option>c</calcite-option>\r\n  </calcite-option-group>\r\n  <calcite-option-group label=\"numbers\">\r\n    <calcite-option>1</calcite-option>\r\n    <calcite-option selected>2</calcite-option>\r\n    <calcite-option>3</calcite-option>\r\n  </calcite-option-group>\r\n</calcite-select>\r\n```\r\n",
+        "Side-by-side": "Separate the options side by side using a flex-box container.\r\n\r\n```html\r\n<div class=\"demo-side-by-side\">\r\n  <calcite-select width=\"half\" label=\"half width\">\r\n    <calcite-option>☕️</calcite-option>\r\n    <calcite-option>🍵</calcite-option>\r\n    <calcite-option selected>🍻</calcite-option>\r\n  </calcite-select>\r\n  <calcite-select width=\"half\" label=\"half width\">\r\n    <calcite-option selected>🌮</calcite-option>\r\n    <calcite-option>🍔</calcite-option>\r\n    <calcite-option>🌯</calcite-option>\r\n  </calcite-select>\r\n</div>\r\n```\r\n",
+        "Value": "Specify the underlying value for each option.\r\n\r\n```html\r\n<calcite-select>\r\n  <calcite-option value=\"high\">😃</calcite-option>\r\n  <calcite-option value=\"medium\">😶</calcite-option>\r\n  <calcite-option value=\"low\">😭</calcite-option>\r\n</calcite-select>\r\n```\r\n"
       },
       "props": [
         {
@@ -17410,8 +17454,8 @@
       "filePath": "./src/components/shell/shell.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-shell",
-      "readme": "# calcite-shell\n\nThe `calcite-shell` component is used for application layout management. It is a container for the view as well as other calcite components like `calcite-shell-panel` and `calcite-tip-manager`.\n\n_note: calcite-shell supports tablet as the smallest screen size_\n",
-      "docs": "The `calcite-shell` component is used for application layout management. It is a container for the view as well as other calcite components like `calcite-shell-panel` and `calcite-tip-manager`.\n\n_note: calcite-shell supports tablet as the smallest screen size_",
+      "readme": "# calcite-shell\r\n\r\nThe `calcite-shell` component is used for application layout management. It is a container for the view as well as other calcite components like `calcite-shell-panel` and `calcite-tip-manager`.\r\n\r\n_note: calcite-shell supports tablet as the smallest screen size_\r\n\r",
+      "docs": "The `calcite-shell` component is used for application layout management. It is a container for the view as well as other calcite components like `calcite-shell-panel` and `calcite-tip-manager`.\r\n\r\n_note: calcite-shell supports tablet as the smallest screen size_",
       "docsTags": [
         {
           "name": "slot",
@@ -17447,10 +17491,10 @@
         }
       ],
       "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-panel 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-panel>\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"
+        "Advanced": "Renders a shell with leading and trailing floating panels, action bar/pad, block, flow, tip manager, footer.\r\n\r\n```html\r\n<calcite-shell>\r\n  <calcite-shell-panel slot=\"panel-start\" position=\"start\" detached>\r\n    <calcite-action-bar slot=\"action-bar\">\r\n      <calcite-action-group>\r\n        <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\r\n        <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\r\n        <calcite-action text=\"Layers\" active indicator icon=\"layers\"></calcite-action>\r\n      </calcite-action-group>\r\n      <calcite-action-group>\r\n        <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\r\n        <calcite-action text=\"Layers\" indicator icon=\"layers\"></calcite-action>\r\n      </calcite-action-group>\r\n    </calcite-action-bar>\r\n    <calcite-block collapsible  heading=\"Primary Content\" summary=\"This is the primary.\">\r\n      <calcite-block-content>\r\n        <calcite-action text=\"Puppies\" text-enabled indicator icon=\"plus\"></calcite-action>\r\n        <calcite-action text=\"Kittens\" text-enabled icon=\"save\"></calcite-action>\r\n        <calcite-action text=\"Birds?\" text-enabled icon=\"banana\"></calcite-action>\r\n      </calcite-block-content>\r\n    </calcite-block>\r\n    <calcite-block collapsible  heading=\"Additional Block\" summary=\"Baby shark doo doo doo doo.\">\r\n      <calcite-block-content>\r\n          <p>Cool thing.</p>\r\n      </calcite-block-content>\r\n    </calcite-block>\r\n  </calcite-shell-panel>\r\n\r\n   <calcite-shell-panel slot=\"panel-end\" position=\"end\" detached height-scale=\"l\">\r\n      <calcite-action-bar slot=\"action-bar\">\r\n        <calcite-action-group>\r\n          <calcite-action text=\"Add\" active icon=\"plus\"></calcite-action>\r\n          <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\r\n          <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\r\n        </calcite-action-group>\r\n        <calcite-action-group>\r\n          <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\r\n          <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\r\n          <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\r\n        </calcite-action-group>\r\n        <calcite-action slot=\"bottom-actions\" text=\"Tips\" icon=\"lightbulb\"></calcite-action>\r\n      </calcite-action-bar>\r\n      <calcite-flow>\r\n        <calcite-panel heading=\"Layer settings\">\r\n          <calcite-block collapsible open heading=\"Contextual Content\" summary=\"Select goodness\">\r\n            <calcite-value-list multiple filter-enabled>\r\n              <calcite-value-list-item label=\"2018 Population Density (Esri)\" description=\"{POPDENS_CY}\" value=\"POPDENS_CY\">\r\n                <calcite-action slot=\"actions-end\" icon=\"camera-flash-on\"></calcite-action>\r\n              </calcite-value-list-item>\r\n              <calcite-value-list-item label=\"2018 Population Density [Updated]\" description=\"{POPDENS_CY}\" value=\"POPDENS_CY2\">\r\n                <calcite-action slot=\"actions-end\" icon=\"banana\"></calcite-action>\r\n              </calcite-value-list-item>\r\n              <calcite-value-list-item label=\"2018 Total Households (Esri)\" description=\"{TOTHH_CY}\" value=\"TOTHH_CY\">\r\n                <calcite-action slot=\"actions-end\" icon=\"person2\"></calcite-action>\r\n              </calcite-value-list-item>\r\n            </calcite-value-list>\r\n          </calcite-block>\r\n        </calcite-panel>\r\n      </calcite-flow>\r\n  </calcite-shell-panel>\r\n  <calcite-tip-manager slot=\"center-row\">\r\n    <calcite-tip heading=\"The Red Rocks and Blue Water\" thumbnail=\"https://placeimg.com/1000/600\" text-thumbnail=\"This is an image of nature.\">\r\n    <calcite-tip heading=\"The Long Trees\" thumbnail=\"https://placeimg.com/1000/600\" text-thumbnail=\"This is an image of trees.\">\r\n  </calcite-tip-manager>\r\n  <footer slot=\"footer\">Footer</footer>\r\n</calcite-shell>\r\n```\r\n",
+        "Basic": "Renders a basic shell with a header and a footer.\r\n\r\n```html\r\n<calcite-shell>\r\n  <div slot=\"header\">\r\n    <header>\r\n      <h2>Shell Header: My App</h2>\r\n    </header>\r\n  </div>\r\n  <p>Shell Content</p>\r\n  <!-- insert map or fillable content here -->\r\n  <footer slot=\"footer\">Footer</footer>\r\n</calcite-shell>\r\n```\r\n",
+        "With-panel-and-action-bar": "Renders a single panel with actions in an action bar.\r\n\r\n```html\r\n<calcite-shell>\r\n  <calcite-shell-panel slot=\"panel-start\" position=\"start\">\r\n    <img src=\"https://via.placeholder.com/300x200\" alt=\"placeholder\" />\r\n    <calcite-action-bar slot=\"action-bar\">\r\n      <calcite-action text=\"Add\" active icon=\"plus\"></calcite-action>\r\n      <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\r\n      <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\r\n    </calcite-action-bar>\r\n  </calcite-shell-panel>\r\n</calcite-shell>\r\n```\r\n",
+        "With-panels": "Renders a shell with a header and panels on the left and right sides of the app.\r\n\r\n```html\r\n<calcite-shell>\r\n  <calcite-shell-panel slot=\"panel-start\" position=\"start\">\r\n    Leading panel! (on the left side, since this is a LTR app)\r\n  </calcite-shell-panel>\r\n  <calcite-shell-panel slot=\"panel-end\" position=\"end\"> Trailing panel! (right side) </calcite-shell-panel>\r\n  <calcite-shell-center-row slot=\"center-row\" position=\"end\" height-scale=\"m\">\r\n    Center Row! (center bottom)\r\n  </calcite-shell-center-row>\r\n  <div slot=\"header\">\r\n    <header>\r\n      <h2>Shell Header: My App</h2>\r\n    </header>\r\n  </div>\r\n  <p>Shell Content</p>\r\n  <!-- insert map or fillable content here -->\r\n</calcite-shell>\r\n```\r\n"
       },
       "props": [
         {
@@ -17524,7 +17568,7 @@
       "filePath": "./src/components/shell-center-row/shell-center-row.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-shell-center-row",
-      "readme": "# calcite-shell-center-row\n",
+      "readme": "# calcite-shell-center-row\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -17627,7 +17671,7 @@
       "filePath": "./src/components/shell-panel/shell-panel.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-shell-panel",
-      "readme": "# calcite-shell-panel\n\nThe `calcite-shell-panel` is a child component of `calcite-shell` used as a container to display other components like `calcite-block` and `calcite-flow`.\n",
+      "readme": "# calcite-shell-panel\r\n\r\nThe `calcite-shell-panel` is a child component of `calcite-shell` used as a container to display other components like `calcite-block` and `calcite-flow`.\r\n\r",
       "docs": "The `calcite-shell-panel` is a child component of `calcite-shell` used as a container to display other components like `calcite-block` and `calcite-flow`.",
       "docsTags": [
         {
@@ -17640,11 +17684,11 @@
         }
       ],
       "usage": {
-        "Basic": "Renders a basic shell panel with text content.\n\n```html\n<calcite-shell-panel>\n  <p>Primary Content</p>\n</calcite-shell-panel>\n```\n",
-        "With-action-bar": "Renders a panel with an action bar.\n\n```html\n<calcite-shell-panel>\n  <calcite-action-bar slot=\"action-bar\">\n    <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n    <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\n    <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n  </calcite-action-bar>\n</calcite-shell-panel>\n```\n",
-        "With-custom-element": "Add `calcite-match-height` to a wrapping element to ensure proper height, scrolling, and sticky behavior (header, footer, fab). Note that multiple levels of nesting is not supported.\n\n```html\n<calcite-shell-panel>\n  <calcite-action-bar slot=\"action-bar\">\n    <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n    <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\n    <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n  </calcite-action-bar>\n  <your-custom-element class=\"calcite-match-height\">\n    <calcite-panel> ... </calcite-panel>\n  </your-custom-element>\n</calcite-shell-panel>\n```\n",
-        "With-flow": "```html\n<calcite-shell-panel>\n  <calcite-action-bar slot=\"action-bar\">\n    <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n    <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\n    <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n  </calcite-action-bar>\n  <calcite-flow>\n    <calcite-panel> ... </calcite-panel>\n    <calcite-panel> ... </calcite-panel>\n  </calcite-flow>\n</calcite-shell-panel>\n```\n",
-        "With-panel": "```html\n<calcite-shell-panel>\n  <calcite-action-bar slot=\"action-bar\">\n    <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n    <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\n    <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n  </calcite-action-bar>\n  <calcite-panel> ... </calcite-panel>\n</calcite-shell-panel>\n```\n"
+        "Basic": "Renders a basic shell panel with text content.\r\n\r\n```html\r\n<calcite-shell-panel>\r\n  <p>Primary Content</p>\r\n</calcite-shell-panel>\r\n```\r\n",
+        "With-action-bar": "Renders a panel with an action bar.\r\n\r\n```html\r\n<calcite-shell-panel>\r\n  <calcite-action-bar slot=\"action-bar\">\r\n    <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\r\n    <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\r\n    <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\r\n  </calcite-action-bar>\r\n</calcite-shell-panel>\r\n```\r\n",
+        "With-custom-element": "Add `calcite-match-height` to a wrapping element to ensure proper height, scrolling, and sticky behavior (header, footer, fab). Note that multiple levels of nesting is not supported.\r\n\r\n```html\r\n<calcite-shell-panel>\r\n  <calcite-action-bar slot=\"action-bar\">\r\n    <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\r\n    <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\r\n    <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\r\n  </calcite-action-bar>\r\n  <your-custom-element class=\"calcite-match-height\">\r\n    <calcite-panel> ... </calcite-panel>\r\n  </your-custom-element>\r\n</calcite-shell-panel>\r\n```\r\n",
+        "With-flow": "```html\r\n<calcite-shell-panel>\r\n  <calcite-action-bar slot=\"action-bar\">\r\n    <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\r\n    <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\r\n    <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\r\n  </calcite-action-bar>\r\n  <calcite-flow>\r\n    <calcite-panel> ... </calcite-panel>\r\n    <calcite-panel> ... </calcite-panel>\r\n  </calcite-flow>\r\n</calcite-shell-panel>\r\n```\r\n",
+        "With-panel": "```html\r\n<calcite-shell-panel>\r\n  <calcite-action-bar slot=\"action-bar\">\r\n    <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\r\n    <calcite-action text=\"Save\" icon=\"save\"></calcite-action>\r\n    <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\r\n  </calcite-action-bar>\r\n  <calcite-panel> ... </calcite-panel>\r\n</calcite-shell-panel>\r\n```\r\n"
       },
       "props": [
         {
@@ -17833,12 +17877,12 @@
       "filePath": "./src/components/slider/slider.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-slider",
-      "readme": "# calcite-slider\n\nRange selection component for selecting single or multiple numeric values inside a given range.\n",
+      "readme": "# calcite-slider\r\n\r\nRange selection component for selecting single or multiple numeric values inside a given range.\r\n\r",
       "docs": "Range selection component for selecting single or multiple numeric values inside a given range.",
       "docsTags": [],
       "usage": {
-        "Basic": "```html\n<calcite-slider min=\"1\" max=\"100\" value=\"50\" step=\"1\"></calcite-slider>\n```\n",
-        "Two-handles": "If you'd like to allow an upper and lower value selection (two handles), you can set `min-value` and `max-value` rather than `value`. Note: these are mutually exclusive.\n\n```html\n<calcite-slider\n  min=\"1\"\n  max=\"100\"\n  min-value=\"50\"\n  max-value=\"85\"\n  step=\"1\"\n  min-label=\"Temperature (lower)\"\n  max-label=\"Temperature (upper)\"\n></calcite-slider>\n```\n"
+        "Basic": "```html\r\n<calcite-slider min=\"1\" max=\"100\" value=\"50\" step=\"1\"></calcite-slider>\r\n```\r\n",
+        "Two-handles": "If you'd like to allow an upper and lower value selection (two handles), you can set `min-value` and `max-value` rather than `value`. Note: these are mutually exclusive.\r\n\r\n```html\r\n<calcite-slider\r\n  min=\"1\"\r\n  max=\"100\"\r\n  min-value=\"50\"\r\n  max-value=\"85\"\r\n  step=\"1\"\r\n  min-label=\"Temperature (lower)\"\r\n  max-label=\"Temperature (upper)\"\r\n></calcite-slider>\r\n```\r\n"
       },
       "props": [
         {
@@ -18048,7 +18092,7 @@
           "mutable": false,
           "attr": "mirrored",
           "reflectToAttr": true,
-          "docs": "When true, the slider will display values from high to low.\n\nNote that this value will be ignored if the slider has an associated histogram.",
+          "docs": "When true, the slider will display values from high to low.\r\n\r\nNote that this value will be ignored if the slider has an associated histogram.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18242,7 +18286,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Fires when the thumb is released on the component.\n\n**Note:** If you need to constantly listen to the drag event,\nuse \"calciteSliderInput\" instead.",
+          "docs": "Fires when the thumb is released on the component.\r\n\r\n**Note:** If you need to constantly listen to the drag event,\r\nuse \"calciteSliderInput\" instead.",
           "docsTags": []
         },
         {
@@ -18251,7 +18295,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Fires on all updates to the component.\n\n**Note:** Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread.",
+          "docs": "Fires on all updates to the component.\r\n\r\n**Note:** Will be fired frequently during drag. If you are performing any\r\nexpensive operations consider using a debounce or throttle to avoid\r\nlocking up the main thread.",
           "docsTags": []
         },
         {
@@ -18260,7 +18304,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Fires on all updates to the component.\n\n**Note:** Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread.",
+          "docs": "Fires on all updates to the component.\r\n\r\n**Note:** Will be fired frequently during drag. If you are performing any\r\nexpensive operations consider using a debounce or throttle to avoid\r\nlocking up the main thread.",
           "docsTags": [
             {
               "name": "deprecated",
@@ -18299,7 +18343,7 @@
       "filePath": "./src/components/sortable-list/sortable-list.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-sortable-list",
-      "readme": "# calcite-sortable-list\n",
+      "readme": "# calcite-sortable-list\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -18348,7 +18392,7 @@
           "mutable": false,
           "attr": "group",
           "reflectToAttr": false,
-          "docs": "The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value.",
+          "docs": "The list's group identifier.\r\n\r\nTo drag elements from one list into another, both lists must have the same group value.",
           "docsTags": [],
           "values": [
             {
@@ -18454,7 +18498,7 @@
       "filePath": "./src/components/split-button/split-button.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-split-button",
-      "readme": "# calcite-split-button\n\nThe calcite-split-button control is one that combines a button with a dropdown menu in order to provide a primary action along with one or more related secondary options / actions. It's useful for grouping related actions or options for users, while elevating a commonly-used or default action for easier access. Its inner content populates the control's dropdown menu, and is thus expected to be valid `calcite-dropdown` content.\n",
+      "readme": "# calcite-split-button\r\n\r\nThe calcite-split-button control is one that combines a button with a dropdown menu in order to provide a primary action along with one or more related secondary options / actions. It's useful for grouping related actions or options for users, while elevating a commonly-used or default action for easier access. Its inner content populates the control's dropdown menu, and is thus expected to be valid `calcite-dropdown` content.\r\n\r",
       "docs": "The calcite-split-button control is one that combines a button with a dropdown menu in order to provide a primary action along with one or more related secondary options / actions. It's useful for grouping related actions or options for users, while elevating a commonly-used or default action for easier access. Its inner content populates the control's dropdown menu, and is thus expected to be valid `calcite-dropdown` content.",
       "docsTags": [
         {
@@ -18463,12 +18507,12 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-split-button primary-icon-start=\"save\" primary-text=\"Primary Option\">\n  <calcite-dropdown-group selection-mode=\"none\">\n    <calcite-dropdown-item>Option 2</calcite-dropdown-item>\n    <calcite-dropdown-item>Option 3</calcite-dropdown-item>\n    <calcite-dropdown-item>Option 4</calcite-dropdown-item>\n  </calcite-dropdown-group>\n</calcite-split-button>\n```\n"
+        "Basic": "```html\r\n<calcite-split-button primary-icon-start=\"save\" primary-text=\"Primary Option\">\r\n  <calcite-dropdown-group selection-mode=\"none\">\r\n    <calcite-dropdown-item>Option 2</calcite-dropdown-item>\r\n    <calcite-dropdown-item>Option 3</calcite-dropdown-item>\r\n    <calcite-dropdown-item>Option 4</calcite-dropdown-item>\r\n  </calcite-dropdown-group>\r\n</calcite-split-button>\r\n```\r\n"
       },
       "props": [
         {
           "name": "appearance",
-          "type": "\"clear\" | \"outline\" | \"solid\" | \"transparent\"",
+          "type": "\"clear\" | \"minimal\" | \"outline\" | \"solid\" | \"transparent\"",
           "mutable": false,
           "attr": "appearance",
           "reflectToAttr": true,
@@ -18480,6 +18524,10 @@
               "value": "clear",
               "type": "string"
             },
+            {
+              "value": "minimal",
+              "type": "string"
+            },
             {
               "value": "outline",
               "type": "string"
@@ -18612,7 +18660,7 @@
           "mutable": false,
           "attr": "overlay-positioning",
           "reflectToAttr": false,
-          "docs": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\".",
+          "docs": "Determines the type of positioning to use for the overlaid content.\r\n\r\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\".",
           "docsTags": [],
           "default": "\"absolute\"",
           "values": [
@@ -18778,7 +18826,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Fires when the primary button is clicked.\n\n**Note:** The event payload is deprecated, use separate mouse event listeners to get info about click.",
+          "docs": "Fires when the primary button is clicked.\r\n\r\n**Note:** The event payload is deprecated, use separate mouse event listeners to get info about click.",
           "docsTags": []
         },
         {
@@ -18787,7 +18835,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Fires when the dropdown menu is clicked.\n\n**Note:** The event payload is deprecated, use separate mouse event listeners to get info about click.",
+          "docs": "Fires when the dropdown menu is clicked.\r\n\r\n**Note:** The event payload is deprecated, use separate mouse event listeners to get info about click.",
           "docsTags": []
         }
       ],
@@ -18820,7 +18868,7 @@
       "filePath": "./src/components/stepper/stepper.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-stepper",
-      "readme": "# calcite-stepper\n\nCalcite stepper can be used to present a stepper workflow to a user. It has configurable display options for layout (horizontal or vertical), and the ability to automatically render status icons, and step numbers.\n",
+      "readme": "# calcite-stepper\r\n\r\nCalcite stepper can be used to present a stepper workflow to a user. It has configurable display options for layout (horizontal or vertical), and the ability to automatically render status icons, and step numbers.\r\n\r",
       "docs": "Calcite stepper can be used to present a stepper workflow to a user. It has configurable display options for layout (horizontal or vertical), and the ability to automatically render status icons, and step numbers.",
       "docsTags": [
         {
@@ -18829,7 +18877,7 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-stepper icon numbered id=\"my-example-stepper\">\n  <calcite-stepper-item item-title=\"Choose method\" item-subtitle=\"Add members without sending invitations\" complete>\n    Step 1 Content Goes Here\n  </calcite-stepper-item>\n  <calcite-stepper-item item-title=\"Compile member list\" error> Step 2 Content Goes Here </calcite-stepper-item>\n  <calcite-stepper-item item-title=\"Set member properties\" item-subtitle=\"Some subtext\" active>\n    Step 3 Content Goes Here\n  </calcite-stepper-item>\n  <calcite-stepper-item item-title=\"Confirm and complete\" item-subtitle=\"Disabled example\" disabled>\n    Step 4 Content Goes Here\n  </calcite-stepper-item>\n</calcite-stepper>\n```\n"
+        "Basic": "```html\r\n<calcite-stepper icon numbered id=\"my-example-stepper\">\r\n  <calcite-stepper-item item-title=\"Choose method\" item-subtitle=\"Add members without sending invitations\" complete>\r\n    Step 1 Content Goes Here\r\n  </calcite-stepper-item>\r\n  <calcite-stepper-item item-title=\"Compile member list\" error> Step 2 Content Goes Here </calcite-stepper-item>\r\n  <calcite-stepper-item item-title=\"Set member properties\" item-subtitle=\"Some subtext\" active>\r\n    Step 3 Content Goes Here\r\n  </calcite-stepper-item>\r\n  <calcite-stepper-item item-title=\"Confirm and complete\" item-subtitle=\"Disabled example\" disabled>\r\n    Step 4 Content Goes Here\r\n  </calcite-stepper-item>\r\n</calcite-stepper>\r\n```\r\n"
       },
       "props": [
         {
@@ -19026,7 +19074,7 @@
       "filePath": "./src/components/stepper-item/stepper-item.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-stepper-item",
-      "readme": "# calcite-stepper-item\n\nindividual `calcite-stepper-item` item\n",
+      "readme": "# calcite-stepper-item\r\n\r\nindividual `calcite-stepper-item` item\r\n\r",
       "docs": "individual `calcite-stepper-item` item",
       "docsTags": [
         {
@@ -19248,11 +19296,11 @@
       "filePath": "./src/components/switch/switch.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-switch",
-      "readme": "# calcite-switch\n\n`calcite-switch` is used to toggle a value on or off.\n",
+      "readme": "# calcite-switch\r\n\r\n`calcite-switch` is used to toggle a value on or off.\r\n\r",
       "docs": "`calcite-switch` is used to toggle a value on or off.",
       "docsTags": [],
       "usage": {
-        "Basic": "```html\n<label> <calcite-switch checked></calcite-switch> Switch is on </label>\n```\n"
+        "Basic": "```html\r\n<label> <calcite-switch checked></calcite-switch> Switch is on </label>\r\n```\r\n"
       },
       "props": [
         {
@@ -19407,7 +19455,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Fires when the checked value has changed.\n\n**Note:** The event payload is deprecated, use the component's \"checked\" property instead.",
+          "docs": "Fires when the checked value has changed.\r\n\r\n**Note:** The event payload is deprecated, use the component's \"checked\" property instead.",
           "docsTags": []
         }
       ],
@@ -19429,7 +19477,7 @@
       "filePath": "./src/components/tab/tab.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-tab",
-      "readme": "# calcite-tab\n",
+      "readme": "# calcite-tab\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -19438,7 +19486,7 @@
         }
       ],
       "usage": {
-        "Basic": "`calcite-tab` wraps the content you would like to appear when that tab is selected:\n\n```html\n<calcite-tab>My stuff!</calcite-tab>\n```\n"
+        "Basic": "`calcite-tab` wraps the content you would like to appear when that tab is selected:\r\n\r\n```html\r\n<calcite-tab>My stuff!</calcite-tab>\r\n```\r\n"
       },
       "props": [
         {
@@ -19487,7 +19535,7 @@
           "mutable": false,
           "attr": "tab",
           "reflectToAttr": true,
-          "docs": "Optionally include a unique name for this tab,\nbe sure to also set this name on the associated title.",
+          "docs": "Optionally include a unique name for this tab,\r\nbe sure to also set this name on the associated title.",
           "docsTags": [],
           "values": [
             {
@@ -19542,7 +19590,7 @@
       "filePath": "./src/components/tab-nav/tab-nav.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-tab-nav",
-      "readme": "# calcite-tab-nav\n\nThe tab-nav groups several [calcite-tab-title](../tab-title) components and builds out the navigation. You can optionally use attibutes on the tab-nav to configure client side storage of the selected tab.\n",
+      "readme": "# calcite-tab-nav\r\n\r\nThe tab-nav groups several [calcite-tab-title](../tab-title) components and builds out the navigation. You can optionally use attibutes on the tab-nav to configure client side storage of the selected tab.\r\n\r",
       "docs": "The tab-nav groups several [calcite-tab-title](../tab-title) components and builds out the navigation. You can optionally use attibutes on the tab-nav to configure client side storage of the selected tab.",
       "docsTags": [
         {
@@ -19551,7 +19599,7 @@
         }
       ],
       "usage": {
-        "Basic": "When tab-nav is the only parent, tab-title can inherit its `scale` and `position` from tab-nav:\n\n```html\n<calcite-tab-nav scale=\"l\" position=\"below\">\n  <calcite-tab-title>Layers</calcite-tab-title>\n  <calcite-tab-title>Maps</calcite-tab-title>\n  <calcite-tab-title active>Data</calcite-tab-title>\n</calcite-tab-nav>\n```\n"
+        "Basic": "When tab-nav is the only parent, tab-title can inherit its `scale` and `position` from tab-nav:\r\n\r\n```html\r\n<calcite-tab-nav scale=\"l\" position=\"below\">\r\n  <calcite-tab-title>Layers</calcite-tab-title>\r\n  <calcite-tab-title>Maps</calcite-tab-title>\r\n  <calcite-tab-title active>Data</calcite-tab-title>\r\n</calcite-tab-nav>\r\n```\r\n"
       },
       "props": [
         {
@@ -19659,7 +19707,7 @@
       "filePath": "./src/components/tab-title/tab-title.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-tab-title",
-      "readme": "# calcite-tab-title\n\nThe tab-title is the link that switches between panes in [calcite-tabs](../tabs).\n",
+      "readme": "# calcite-tab-title\r\n\r\nThe tab-title is the link that switches between panes in [calcite-tabs](../tabs).\r\n\r",
       "docs": "The tab-title is the link that switches between panes in [calcite-tabs](../tabs).",
       "docsTags": [
         {
@@ -19789,7 +19837,7 @@
           "mutable": false,
           "attr": "tab",
           "reflectToAttr": true,
-          "docs": "Optionally include a unique name for the tab title,\nbe sure to also set this name on the associated tab.",
+          "docs": "Optionally include a unique name for the tab title,\r\nbe sure to also set this name on the associated tab.",
           "docsTags": [],
           "values": [
             {
@@ -19874,7 +19922,7 @@
       "filePath": "./src/components/tabs/tabs.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-tabs",
-      "readme": "# calcite-tabs\n",
+      "readme": "# calcite-tabs\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -19887,8 +19935,8 @@
         }
       ],
       "usage": {
-        "Basic": "`calcite-tabs` uses several sub-components ([calcite-tab-nav](../tab-nav), [calcite-tab](../tab), [calcite-tab-title](../tab-title)) to create a tabbed interface with optional client side storage. Place your content inside of the `<calcite-tab>` element:\n\n```html\n<calcite-tabs>\n  <calcite-tab-nav slot=\"tab-nav\">\n    <calcite-tab-title active>Tab 1 Title</calcite-tab-title>\n    <calcite-tab-title>Tab 2 Title</calcite-tab-title>\n  </calcite-tab-nav>\n\n  <calcite-tab active>Tab 1 Content</calcite-tab>\n  <calcite-tab>Tab 2 Content</calcite-tab>\n</calcite-tabs>\n```\n",
-        "Bordered": "```html\n<calcite-tabs bordered>\n  <calcite-tab-nav slot=\"tab-nav\">\n    <calcite-tab-title tab=\"tab1\">Tab 1 Title</calcite-tab-title>\n    <calcite-tab-title tab=\"tab2\">Tab 2 Title</calcite-tab-title>\n    <calcite-tab-title tab=\"tab3\">Tab 3 Title</calcite-tab-title>\n    <calcite-tab-title tab=\"tab4\" active>Tab 4 Title</calcite-tab-title>\n  </calcite-tab-nav>\n  <calcite-tab tab=\"tab1\">Tab 1 Content</calcite-tab>\n  <calcite-tab tab=\"tab2\">Tab 2 Content</calcite-tab>\n  <calcite-tab tab=\"tab3\">Tab 3 Content</calcite-tab>\n  <calcite-tab tab=\"tab4\" active>Tab 4 Content</calcite-tab>\n</calcite-tabs>\n```\n"
+        "Basic": "`calcite-tabs` uses several sub-components ([calcite-tab-nav](../tab-nav), [calcite-tab](../tab), [calcite-tab-title](../tab-title)) to create a tabbed interface with optional client side storage. Place your content inside of the `<calcite-tab>` element:\r\n\r\n```html\r\n<calcite-tabs>\r\n  <calcite-tab-nav slot=\"tab-nav\">\r\n    <calcite-tab-title active>Tab 1 Title</calcite-tab-title>\r\n    <calcite-tab-title>Tab 2 Title</calcite-tab-title>\r\n  </calcite-tab-nav>\r\n\r\n  <calcite-tab active>Tab 1 Content</calcite-tab>\r\n  <calcite-tab>Tab 2 Content</calcite-tab>\r\n</calcite-tabs>\r\n```\r\n",
+        "Bordered": "```html\r\n<calcite-tabs bordered>\r\n  <calcite-tab-nav slot=\"tab-nav\">\r\n    <calcite-tab-title tab=\"tab1\">Tab 1 Title</calcite-tab-title>\r\n    <calcite-tab-title tab=\"tab2\">Tab 2 Title</calcite-tab-title>\r\n    <calcite-tab-title tab=\"tab3\">Tab 3 Title</calcite-tab-title>\r\n    <calcite-tab-title tab=\"tab4\" active>Tab 4 Title</calcite-tab-title>\r\n  </calcite-tab-nav>\r\n  <calcite-tab tab=\"tab1\">Tab 1 Content</calcite-tab>\r\n  <calcite-tab tab=\"tab2\">Tab 2 Content</calcite-tab>\r\n  <calcite-tab tab=\"tab3\">Tab 3 Content</calcite-tab>\r\n  <calcite-tab tab=\"tab4\" active>Tab 4 Content</calcite-tab>\r\n</calcite-tabs>\r\n```\r\n"
       },
       "props": [
         {
@@ -20039,7 +20087,7 @@
       "filePath": "./src/components/tile/tile.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-tile",
-      "readme": "# calcite-tile\n",
+      "readme": "# calcite-tile\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -20052,7 +20100,7 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-tile\n  description=\"Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall.\"\n  heading=\"Tile heading lorem ipsum\"\n  href=\"#\"\n  icon=\"images\"\n></calcite-tile>\n```\n"
+        "Basic": "```html\r\n<calcite-tile\r\n  description=\"Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall.\"\r\n  heading=\"Tile heading lorem ipsum\"\r\n  href=\"#\"\r\n  icon=\"images\"\r\n></calcite-tile>\r\n```\r\n"
       },
       "props": [
         {
@@ -20227,7 +20275,7 @@
       "filePath": "./src/components/tile-select/tile-select.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-tile-select",
-      "readme": "# calcite-tile-select\n",
+      "readme": "# calcite-tile-select\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -20236,7 +20284,7 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-tile-select\n  checked\n  input-enabled\n  description=\"Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall.\"\n  heading=\"Tile heading lorem ipsum\"\n  icon=\"layer\"\n  input-alignment=\"end\"\n  type=\"radio\"\n  value=\"one\"\n></calcite-tile-select>\n```\n"
+        "Basic": "```html\r\n<calcite-tile-select\r\n  checked\r\n  input-enabled\r\n  description=\"Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall.\"\r\n  heading=\"Tile heading lorem ipsum\"\r\n  icon=\"layer\"\r\n  input-alignment=\"end\"\r\n  type=\"radio\"\r\n  value=\"one\"\r\n></calcite-tile-select>\r\n```\r\n"
       },
       "props": [
         {
@@ -20559,7 +20607,7 @@
       "filePath": "./src/components/tile-select-group/tile-select-group.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-tile-select-group",
-      "readme": "# calcite-tile-select-group\n",
+      "readme": "# calcite-tile-select-group\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -20628,7 +20676,7 @@
       "filePath": "./src/components/time-picker/time-picker.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-time-picker",
-      "readme": "# calcite-time-picker\n",
+      "readme": "# calcite-time-picker\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -21016,7 +21064,7 @@
       "filePath": "./src/components/tip/tip.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-tip",
-      "readme": "# calcite-tip\n\nThe `calcite-tip` component can comprise of an image, text and hyperlink to give helpful hints to a user about using the platform.\n",
+      "readme": "# calcite-tip\r\n\r\nThe `calcite-tip` component can comprise of an image, text and hyperlink to give helpful hints to a user about using the platform.\r\n\r",
       "docs": "The `calcite-tip` component can comprise of an image, text and hyperlink to give helpful hints to a user about using the platform.",
       "docsTags": [
         {
@@ -21029,7 +21077,7 @@
         }
       ],
       "usage": {
-        "Basic": "Renders a non-dismissible tip with a heading, thumbnail, info and a link.\n\n```html\n<calcite-tip non-dismissible heading=\"Celestial Bodies!\">\n  <img slot=\"thumbnail\" src=\"https://placeimg.com/1000/600\" alt=\"This is an image of nature.\" />\n  <p>Normal tip with a landscape or square image and a small amount of text in the \"info\" slot.</p>\n  <a href=\"http://www.esri.com\">Put a link hurr!</a>\n</calcite-tip>\n```\n"
+        "Basic": "Renders a non-dismissible tip with a heading, thumbnail, info and a link.\r\n\r\n```html\r\n<calcite-tip non-dismissible heading=\"Celestial Bodies!\">\r\n  <img slot=\"thumbnail\" src=\"https://placeimg.com/1000/600\" alt=\"This is an image of nature.\" />\r\n  <p>Normal tip with a landscape or square image and a small amount of text in the \"info\" slot.</p>\r\n  <a href=\"http://www.esri.com\">Put a link hurr!</a>\r\n</calcite-tip>\r\n```\r\n"
       },
       "props": [
         {
@@ -21196,7 +21244,7 @@
       "filePath": "./src/components/tip-group/tip-group.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-tip-group",
-      "readme": "# calcite-tip-group\n\n`calcite-tip-group` is a wrapper for multiple `calcite-tip`s and is housed in `calcite-tip-manager`.\n",
+      "readme": "# calcite-tip-group\r\n\r\n`calcite-tip-group` is a wrapper for multiple `calcite-tip`s and is housed in `calcite-tip-manager`.\r\n\r",
       "docs": "`calcite-tip-group` is a wrapper for multiple `calcite-tip`s and is housed in `calcite-tip-manager`.",
       "docsTags": [
         {
@@ -21242,7 +21290,7 @@
       "filePath": "./src/components/tip-manager/tip-manager.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-tip-manager",
-      "readme": "# calcite-tip-manager\n\nThe `calcite-tip-manager` component contains multiple `calcite-tip`s that a user can view through via interactive arrows to go back and forth through the tips in the deck.\n",
+      "readme": "# calcite-tip-manager\r\n\r\nThe `calcite-tip-manager` component contains multiple `calcite-tip`s that a user can view through via interactive arrows to go back and forth through the tips in the deck.\r\n\r",
       "docs": "The `calcite-tip-manager` component contains multiple `calcite-tip`s that a user can view through via interactive arrows to go back and forth through the tips in the deck.",
       "docsTags": [
         {
@@ -21251,7 +21299,7 @@
         }
       ],
       "usage": {
-        "Basic": "Renders a tip manager using a group of tips as well as a single tip.\n\n```html\n<calcite-tip-manager>\n  <calcite-tip-group group-title=\"Tip Manager heading\">\n    <calcite-tip heading=\"Tip heading\" selected>\n      <img slot=\"thumbnail\" src=\"https://placeimg.com/200/200\" alt=\"This is an image.\" />\n      <p>\n        Tip description lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n        labore et dolore magna aliqua.\n      </p>\n      <p>\n        This is another slotted paragraph. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n        aliquip ex ea commodo consequat.\n      </p>\n      <calcite-link href=\"https://www.esri.com\" target=\"_blank\" rel=\"noopener noreferrer\">A calcite-link</calcite-link>\n    </calcite-tip>\n    <calcite-tip heading=\"The Long Trees\" hidden>\n      <img slot=\"thumbnail\" src=\"https://placeimg.com/200/200\" alt=\"This is an image.\" />\n      <p>This tip has an image that is a pretty tall. And the text will run out before the end of the image.</p>\n      <p>In astronomy, the terms object and body are often used interchangeably.</p>\n      <calcite-link href=\"https://www.esri.com\" target=\"_blank\" rel=\"noopener noreferrer\">A calcite-link</calcite-link>\n    </calcite-tip>\n  </calcite-tip-group>\n  <calcite-tip heading=\"Square Nature\" hidden>\n    <img slot=\"thumbnail\" src=\"https://placeimg.com/200/200\" alt=\"This is an image.\" />\n    <p>This tip has an image that is square. And the text will run out before the end of the image.</p>\n    <p>In astronomy, the terms object and body are often used interchangeably.</p>\n    <p>\n      In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form\n      of a document without relying on meaningful content (also called greeking). Replacing the actual content with\n      placeholder text allows designers to design the form of the content before the content itself has been produced.\n    </p>\n    <calcite-link href=\"https://www.esri.com\" target=\"_blank\" rel=\"noopener noreferrer\">A calcite-link</calcite-link>\n  </calcite-tip>\n  <calcite-tip heading=\"The lack of imagery\" hidden>\n    <p>This tip has no image. As such, the content area will take up the entire width of the tip.</p>\n    <p>\n      This is the next paragraph and should show how wide the content area is now. Of course, the width of the overall\n      tip will affect things. In astronomy, the terms object and body are often used interchangeably.\n    </p>\n    <calcite-link href=\"https://www.esri.com\" target=\"_blank\" rel=\"noopener noreferrer\">A calcite-link</calcite-link>\n  </calcite-tip>\n</calcite-tip-manager>\n```\n"
+        "Basic": "Renders a tip manager using a group of tips as well as a single tip.\r\n\r\n```html\r\n<calcite-tip-manager>\r\n  <calcite-tip-group group-title=\"Tip Manager heading\">\r\n    <calcite-tip heading=\"Tip heading\" selected>\r\n      <img slot=\"thumbnail\" src=\"https://placeimg.com/200/200\" alt=\"This is an image.\" />\r\n      <p>\r\n        Tip description lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\r\n        labore et dolore magna aliqua.\r\n      </p>\r\n      <p>\r\n        This is another slotted paragraph. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\r\n        aliquip ex ea commodo consequat.\r\n      </p>\r\n      <calcite-link href=\"https://www.esri.com\" target=\"_blank\" rel=\"noopener noreferrer\">A calcite-link</calcite-link>\r\n    </calcite-tip>\r\n    <calcite-tip heading=\"The Long Trees\" hidden>\r\n      <img slot=\"thumbnail\" src=\"https://placeimg.com/200/200\" alt=\"This is an image.\" />\r\n      <p>This tip has an image that is a pretty tall. And the text will run out before the end of the image.</p>\r\n      <p>In astronomy, the terms object and body are often used interchangeably.</p>\r\n      <calcite-link href=\"https://www.esri.com\" target=\"_blank\" rel=\"noopener noreferrer\">A calcite-link</calcite-link>\r\n    </calcite-tip>\r\n  </calcite-tip-group>\r\n  <calcite-tip heading=\"Square Nature\" hidden>\r\n    <img slot=\"thumbnail\" src=\"https://placeimg.com/200/200\" alt=\"This is an image.\" />\r\n    <p>This tip has an image that is square. And the text will run out before the end of the image.</p>\r\n    <p>In astronomy, the terms object and body are often used interchangeably.</p>\r\n    <p>\r\n      In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form\r\n      of a document without relying on meaningful content (also called greeking). Replacing the actual content with\r\n      placeholder text allows designers to design the form of the content before the content itself has been produced.\r\n    </p>\r\n    <calcite-link href=\"https://www.esri.com\" target=\"_blank\" rel=\"noopener noreferrer\">A calcite-link</calcite-link>\r\n  </calcite-tip>\r\n  <calcite-tip heading=\"The lack of imagery\" hidden>\r\n    <p>This tip has no image. As such, the content area will take up the entire width of the tip.</p>\r\n    <p>\r\n      This is the next paragraph and should show how wide the content area is now. Of course, the width of the overall\r\n      tip will affect things. In astronomy, the terms object and body are often used interchangeably.\r\n    </p>\r\n    <calcite-link href=\"https://www.esri.com\" target=\"_blank\" rel=\"noopener noreferrer\">A calcite-link</calcite-link>\r\n  </calcite-tip>\r\n</calcite-tip-manager>\r\n```\r\n"
       },
       "props": [
         {
@@ -21479,7 +21527,7 @@
       "filePath": "./src/components/tooltip/tooltip.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-tooltip",
-      "readme": "# calcite-tooltip\n",
+      "readme": "# calcite-tooltip\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -21488,8 +21536,8 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-tooltip placement=\"auto\" reference-element=\"tooltip-button\"\n  >This is the message of the tooltip</calcite-tooltip\n>\n<p>\n  Lorem <a id=\"tooltip-button\" href=\"#\">ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n  incididunt ut labore et dolore magna aliqua.\n</p>\n```\n",
-        "Virtual": "```html\n<!-- virtually positioned tooltip -->\n<calcite-tooltip id=\"virtual-tooltip\" open>This is the message of the tooltip</calcite-tooltip>\n\n<script>\n  function generateGetBoundingClientRect() {\n    return () => ({\n      width: 0,\n      height: 0,\n      top: 100,\n      right: 100,\n      bottom: 100,\n      left: 600\n    });\n  }\n\n  const virtualElement = {\n    getBoundingClientRect: generateGetBoundingClientRect()\n  };\n\n  const tooltip = document.getElementById(\"virtual-tooltip\");\n  tooltip.referenceElement = virtualElement;\n</script>\n```\n"
+        "Basic": "```html\r\n<calcite-tooltip placement=\"auto\" reference-element=\"tooltip-button\"\r\n  >This is the message of the tooltip</calcite-tooltip\r\n>\r\n<p>\r\n  Lorem <a id=\"tooltip-button\" href=\"#\">ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\r\n  incididunt ut labore et dolore magna aliqua.\r\n</p>\r\n```\r\n",
+        "Virtual": "```html\r\n<!-- virtually positioned tooltip -->\r\n<calcite-tooltip id=\"virtual-tooltip\" open>This is the message of the tooltip</calcite-tooltip>\r\n\r\n<script>\r\n  function generateGetBoundingClientRect() {\r\n    return () => ({\r\n      width: 0,\r\n      height: 0,\r\n      top: 100,\r\n      right: 100,\r\n      bottom: 100,\r\n      left: 600\r\n    });\r\n  }\r\n\r\n  const virtualElement = {\r\n    getBoundingClientRect: generateGetBoundingClientRect()\r\n  };\r\n\r\n  const tooltip = document.getElementById(\"virtual-tooltip\");\r\n  tooltip.referenceElement = virtualElement;\r\n</script>\r\n```\r\n"
       },
       "props": [
         {
@@ -21587,7 +21635,7 @@
           "mutable": false,
           "attr": "overlay-positioning",
           "reflectToAttr": false,
-          "docs": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\".",
+          "docs": "Determines the type of positioning to use for the overlaid content.\r\n\r\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\".",
           "docsTags": [],
           "default": "\"absolute\"",
           "values": [
@@ -21688,7 +21736,7 @@
       "filePath": "./src/components/tooltip-manager/tooltip-manager.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-tooltip-manager",
-      "readme": "# calcite-tooltip-manager\n",
+      "readme": "# calcite-tooltip-manager\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -21745,7 +21793,7 @@
       "filePath": "./src/components/tree/tree.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-tree",
-      "readme": "# calcite-tree\n",
+      "readme": "# calcite-tree\r\n\r",
       "docs": "",
       "docsTags": [
         {
@@ -21754,7 +21802,7 @@
         }
       ],
       "usage": {
-        "Basic": "`<calcite-tree>` can be used as a sidebar navigation tree with optional lines and different selection modes.\n\n```html\n<calcite-tree>\n  <calcite-tree-item>\n    <a href=\"#\">Child 1</a>\n    <calcite-tree slot=\"children\">\n      <calcite-tree-item>\n        <a href=\"#\">Grandchild 1</a>\n      </calcite-tree-item>\n      <calcite-tree-item>\n        <a href=\"#\">Grandchild 2</a>\n      </calcite-tree-item>\n    </calcite-tree>\n  </calcite-tree-item>\n</calcite-tree>\n```\n"
+        "Basic": "`<calcite-tree>` can be used as a sidebar navigation tree with optional lines and different selection modes.\r\n\r\n```html\r\n<calcite-tree>\r\n  <calcite-tree-item>\r\n    <a href=\"#\">Child 1</a>\r\n    <calcite-tree slot=\"children\">\r\n      <calcite-tree-item>\r\n        <a href=\"#\">Grandchild 1</a>\r\n      </calcite-tree-item>\r\n      <calcite-tree-item>\r\n        <a href=\"#\">Grandchild 2</a>\r\n      </calcite-tree-item>\r\n    </calcite-tree>\r\n  </calcite-tree-item>\r\n</calcite-tree>\r\n```\r\n"
       },
       "props": [
         {
@@ -21925,7 +21973,7 @@
       "filePath": "./src/components/tree-item/tree-item.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-tree-item",
-      "readme": "# calcite-tree-item\n\n`<calcite-tree-item>` is used to represent a single item in a `<calcite-tree>`.\n",
+      "readme": "# calcite-tree-item\r\n\r\n`<calcite-tree-item>` is used to represent a single item in a `<calcite-tree>`.\r\n\r",
       "docs": "`<calcite-tree-item>` is used to represent a single item in a `<calcite-tree>`.",
       "docsTags": [
         {
@@ -22016,7 +22064,7 @@
       "filePath": "./src/components/value-list/value-list.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-value-list",
-      "readme": "# calcite-value-list\n\n`calcite-value-list` is housed in a panel and contains `calcite-value-list-item`s. The value list has options for drag and drop, label editing, and single or multi-select of items which can be done through shift+click.\n",
+      "readme": "# calcite-value-list\r\n\r\n`calcite-value-list` is housed in a panel and contains `calcite-value-list-item`s. The value list has options for drag and drop, label editing, and single or multi-select of items which can be done through shift+click.\r\n\r",
       "docs": "`calcite-value-list` is housed in a panel and contains `calcite-value-list-item`s. The value list has options for drag and drop, label editing, and single or multi-select of items which can be done through shift+click.",
       "docsTags": [
         {
@@ -22029,8 +22077,8 @@
         }
       ],
       "usage": {
-        "Basic": "Renders a value list with multiple items able to be selected and a filter.\n\n```html\n<calcite-value-list multiple filter-enabled>\n  <calcite-value-list-item label=\"Dogs\" description=\"Man's best friend\" value=\"dogs\">\n    <calcite-action slot=\"actions-end\" icon=\"plus\"></calcite-action>\n  </calcite-value-list-item>\n  <calcite-value-list-item label=\"Cats\" description=\"Independent and fluffy\" value=\"cats\">\n    <calcite-action slot=\"actions-end\" icon=\"plus\"></calcite-action>\n  </calcite-value-list-item>\n  <calcite-value-list-item\n    label=\"Fish. But not just any fish, a tiger fish caught live in the Atlantic Ocean while on vacation.\"\n    description=\"Easy to care for.\"\n    value=\"fish\"\n  >\n    <calcite-action slot=\"actions-end\" icon=\"plus\"></calcite-action>\n  </calcite-value-list-item>\n</calcite-value-list>\n```\n",
-        "Drag-and-drop": "Renders a value list with drag and drop capability between the items.\n\n```html\n<calcite-value-list drag-enabled>\n  <calcite-value-list-item label=\"Rent\" description=\"Mortgage + housing costs\" value=\"rent\"> </calcite-value-list-item>\n  <calcite-value-list-item label=\"Food\" description=\"its what you eat.\" value=\"food\"> </calcite-value-list-item>\n  <calcite-value-list-item label=\"Utilities\" value=\"utilities\"> </calcite-value-list-item>\n  <calcite-value-list-item label=\"Entertainment\" description=\"Toys and leisure\" value=\"entertainment\">\n  </calcite-value-list-item>\n</calcite-value-list>\n```\n"
+        "Basic": "Renders a value list with multiple items able to be selected and a filter.\r\n\r\n```html\r\n<calcite-value-list multiple filter-enabled>\r\n  <calcite-value-list-item label=\"Dogs\" description=\"Man's best friend\" value=\"dogs\">\r\n    <calcite-action slot=\"actions-end\" icon=\"plus\"></calcite-action>\r\n  </calcite-value-list-item>\r\n  <calcite-value-list-item label=\"Cats\" description=\"Independent and fluffy\" value=\"cats\">\r\n    <calcite-action slot=\"actions-end\" icon=\"plus\"></calcite-action>\r\n  </calcite-value-list-item>\r\n  <calcite-value-list-item\r\n    label=\"Fish. But not just any fish, a tiger fish caught live in the Atlantic Ocean while on vacation.\"\r\n    description=\"Easy to care for.\"\r\n    value=\"fish\"\r\n  >\r\n    <calcite-action slot=\"actions-end\" icon=\"plus\"></calcite-action>\r\n  </calcite-value-list-item>\r\n</calcite-value-list>\r\n```\r\n",
+        "Drag-and-drop": "Renders a value list with drag and drop capability between the items.\r\n\r\n```html\r\n<calcite-value-list drag-enabled>\r\n  <calcite-value-list-item label=\"Rent\" description=\"Mortgage + housing costs\" value=\"rent\"> </calcite-value-list-item>\r\n  <calcite-value-list-item label=\"Food\" description=\"its what you eat.\" value=\"food\"> </calcite-value-list-item>\r\n  <calcite-value-list-item label=\"Utilities\" value=\"utilities\"> </calcite-value-list-item>\r\n  <calcite-value-list-item label=\"Entertainment\" description=\"Toys and leisure\" value=\"entertainment\">\r\n  </calcite-value-list-item>\r\n</calcite-value-list>\r\n```\r\n"
       },
       "props": [
         {
@@ -22106,7 +22154,7 @@
           "mutable": false,
           "attr": "group",
           "reflectToAttr": false,
-          "docs": "The component's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value.",
+          "docs": "The component's group identifier.\r\n\r\nTo drag elements from one list into another, both lists must have the same group value.",
           "docsTags": [],
           "values": [
             {
@@ -22122,7 +22170,7 @@
           "mutable": false,
           "attr": "intl-drag-handle-active",
           "reflectToAttr": false,
-          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the component.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
+          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the component.\r\n\r\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
           "docsTags": [],
           "values": [
             {
@@ -22138,7 +22186,7 @@
           "mutable": false,
           "attr": "intl-drag-handle-change",
           "reflectToAttr": false,
-          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
+          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position.\r\n\r\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
           "docsTags": [],
           "values": [
             {
@@ -22154,7 +22202,7 @@
           "mutable": false,
           "attr": "intl-drag-handle-commit",
           "reflectToAttr": false,
-          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
+          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit.\r\n\r\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
           "docsTags": [],
           "values": [
             {
@@ -22170,7 +22218,7 @@
           "mutable": false,
           "attr": "intl-drag-handle-idle",
           "reflectToAttr": false,
-          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
+          "docs": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position.\r\n\r\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.",
           "docsTags": [],
           "values": [
             {
@@ -22203,7 +22251,7 @@
           "mutable": false,
           "attr": "multiple",
           "reflectToAttr": true,
-          "docs": "Similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple `calcite-value-list-item`s at a time.\nWhen false, only a single `calcite-value-list-item` can be selected at a time,\nand a new selection will deselect previous selections.",
+          "docs": "Similar to standard radio buttons and checkboxes.\r\nWhen true, a user can select multiple `calcite-value-list-item`s at a time.\r\nWhen false, only a single `calcite-value-list-item` can be selected at a time,\r\nand a new selection will deselect previous selections.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -22346,7 +22394,7 @@
       "filePath": "./src/components/value-list-item/value-list-item.tsx",
       "encapsulation": "shadow",
       "tag": "calcite-value-list-item",
-      "readme": "# calcite-value-list-item\n\n`calcite-value-list-item`s are cards contained in a `calcite-value-list`. They each can have a label and description, an icon and can have their label's be editable (inherited from `calcite-value-list`). The developer can disable or preselect each list item and give it a value.\n",
+      "readme": "# calcite-value-list-item\r\n\r\n`calcite-value-list-item`s are cards contained in a `calcite-value-list`. They each can have a label and description, an icon and can have their label's be editable (inherited from `calcite-value-list`). The developer can disable or preselect each list item and give it a value.\r\n\r",
       "docs": "`calcite-value-list-item`s are cards contained in a `calcite-value-list`. They each can have a label and description, an icon and can have their label's be editable (inherited from `calcite-value-list`). The developer can disable or preselect each list item and give it a value.",
       "docsTags": [
         {
@@ -22540,7 +22588,7 @@
           },
           "signature": "toggleSelected(coerce?: boolean) => Promise<void>",
           "parameters": [],
-          "docs": "Toggle the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
+          "docs": "Toggle the selection state. By default this won't trigger an event.\r\nThe first argument allows the value to be coerced, rather than swapping values.",
           "docsTags": [
             {
               "name": "param",