@esri/calcite-components 1.9.0-next.0 → 1.9.0-next.10

package/dist/extras/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-09-16T10:02:54",
+  "timestamp": "2023-09-27T19:36:02",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.22.3",
@@ -352,6 +352,10 @@
         {
           "name": "slot",
           "text": "- A slot for adding a `calcite-icon`."
+        },
+        {
+          "name": "slot",
+          "text": "tooltip - A slot for adding a `calcite-tooltip`."
         }
       ],
       "usage": {
@@ -643,6 +647,10 @@
         {
           "name": "",
           "docs": "A slot for adding a `calcite-icon`."
+        },
+        {
+          "name": "tooltip",
+          "docs": "A slot for adding a `calcite-tooltip`."
         }
       ],
       "parts": [],
@@ -1196,6 +1204,16 @@
           "name": "--calcite-action-group-columns",
           "annotation": "prop",
           "docs": "Sets number of grid-template-columns when the `layout` property is `\"grid\"`."
+        },
+        {
+          "name": "--calcite-action-group-gap",
+          "annotation": "prop",
+          "docs": "Sets the gap (gutters) between rows and columns when the `layout` property is `\"grid\"`."
+        },
+        {
+          "name": "--calcite-action-group-padding",
+          "annotation": "prop",
+          "docs": "Sets the padding when the `layout` property is `\"grid\"`."
         }
       ],
       "slots": [
@@ -1268,6 +1286,28 @@
       ],
       "usage": {},
       "props": [
+        {
+          "name": "appearance",
+          "type": "\"solid\" | \"transparent\"",
+          "mutable": false,
+          "attr": "appearance",
+          "reflectToAttr": true,
+          "docs": "Specifies the appearance of the component.",
+          "docsTags": [],
+          "default": "\"solid\"",
+          "values": [
+            {
+              "value": "solid",
+              "type": "string"
+            },
+            {
+              "value": "transparent",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "expanded",
           "type": "boolean",
@@ -1578,7 +1618,7 @@
       ],
       "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",
+        "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-tooltip slot=\"expand-tooltip\">Let's expand</calcite-tooltip>\n</calcite-action-pad>\n```\n",
         "With-grouping": "Renders a group of `calcite-action`s contained in a `calcite-action-group`. Actions in a group are visually separated from other groups or actions in the pad.\n\n```html\n<calcite-action-pad>\n  <calcite-action-group label=\"Manage item\">\n    <calcite-action text=\"Home\" icon=\"home\"></calcite-action>\n    <calcite-action text=\"Styles\" icon=\"add-in-edit\"></calcite-action>\n  </calcite-action-group>\n\n  <calcite-action text=\"Tips\" icon=\"lightbulb\"></calcite-action>\n</calcite-action-pad>\n```\n"
       },
       "props": [
@@ -2422,11 +2462,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",
+        "Always-open": "Renders a header and content that remains open - no collapsible option.\n\n```html\n<calcite-block heading=\"Dogs\" open>\n  <ul>\n    <li>The first species to be domesticated</li>\n    <li>Domesticated from wolves over 15,000 years ago</li>\n    <li>Adapted to human behavior performing many roles such as hunting, protection, military, therapy, etc.</li>\n  </ul>\n</calcite-block>\n```\n",
         "Basic": "Renders a basic, non-collapsible block.\n\n```html\n<calcite-block heading=\"Fruit\" description=\"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\" description=\"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"
+        "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=\"Dogs\" open>\n    <ul>\n      <li>The first species to be domesticated</li>\n      <li>Domesticated from wolves over 15,000 years ago</li>\n      <li>Adapted to human behavior performing many roles such as hunting, protection, military, therapy, etc.</li>\n    </ul>\n  </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=\"A fantastic heading\" description=\"Add a control, such as an editing action\">\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=\"Dogs\">\n  <div slot=\"icon\">🐕</div>\n</calcite-block>\n```\n"
       },
       "props": [
         {
@@ -2638,6 +2678,42 @@
         }
       ],
       "events": [
+        {
+          "event": "calciteBlockBeforeClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is requested to be closed and before the closing transition begins.",
+          "docsTags": []
+        },
+        {
+          "event": "calciteBlockBeforeOpen",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins.",
+          "docsTags": []
+        },
+        {
+          "event": "calciteBlockClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is closed and animation is complete.",
+          "docsTags": []
+        },
+        {
+          "event": "calciteBlockOpen",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is open and animation is complete.",
+          "docsTags": []
+        },
         {
           "event": "calciteBlockToggle",
           "detail": "void",
@@ -2645,7 +2721,13 @@
           "cancelable": false,
           "composed": true,
           "docs": "Emits when the component's header is clicked.",
-          "docsTags": []
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use `openClose` events: `calciteBlock[Before]Open` and `calciteBlock[Before]Close` instead."
+            }
+          ],
+          "deprecation": "use `openClose` events: `calciteBlock[Before]Open` and `calciteBlock[Before]Close` instead."
         }
       ],
       "listeners": [],
@@ -2886,7 +2968,7 @@
         "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-design-system\" 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\" kind=\"danger\">Delete Map Options</calcite-button>\n<calcite-button icon-end=\"plus\" appearance=\"outline-fill\" kind=\"inverse\">Add to favorites</calcite-button>\n```\n",
         "With-loader-disabled": "```html\n<calcite-button loading kind=\"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"
+        "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 type=\"submit\">Submit</calcite-button>\n</form>\n```\n"
       },
       "props": [
         {
@@ -3570,8 +3652,7 @@
       "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"
+        "Indeterminate-with-native-label": "```html\n<calcite-label for=\"checked-indeterminate\">Status</calcite-label>\n<calcite-checkbox checked indeterminate id=\"checked-indeterminate\" name=\"checked-indeterminate\"></calcite-checkbox>\n```\n"
       },
       "props": [
         {
@@ -4112,7 +4193,10 @@
           "text": "- A slot for adding one or more `calcite-chip`s."
         }
       ],
-      "usage": {},
+      "usage": {
+        "Basic": "```html\n<calcite-chip-group label=\"Basemaps\">\n  <calcite-chip value=\"topographic\">Topographic</calcite-chip>\n  <calcite-chip value=\"navigation\">Navigation</calcite-chip>\n  <calcite-chip value=\"streets\">Streets</calcite-chip>\n  <calcite-chip value=\"imagery\">Imagery</calcite-chip>\n</calcite-chip-group>\n```\n",
+        "SinglePersist": "```html\n<calcite-chip-group label=\"Basemaps\" selection-mode=\"single-persist\">\n  <calcite-chip value=\"topographic\" selected>Topographic</calcite-chip>\n  <calcite-chip value=\"navigation\">Navigation</calcite-chip>\n  <calcite-chip value=\"streets\">Streets</calcite-chip>\n  <calcite-chip value=\"imagery\">Imagery</calcite-chip>\n</calcite-chip-group>\n```\n"
+      },
       "props": [
         {
           "name": "disabled",
@@ -5197,7 +5281,8 @@
       "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",
         "Multiple": "```html\n<calcite-combobox label=\"Mulit selection-mode combobox\" selection-mode=\"multiple\">\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"
+        "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",
+        "SinglePersist": "```html\n<calcite-combobox label=\"Single selection-mode combobox\" selection-mode=\"single-persist\">\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"
       },
       "props": [
         {
@@ -5976,7 +6061,7 @@
       "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 will have to set the value property directly on the component's instance to an array of date strings.\n\n```html\n<calcite-date-picker range min=\"2020-02-01\" max=\"2021-01-01\" />\n```\n"
+        "Range": "You can also add range property to activate date range mode. In this mode, you will have to set the value property directly on the component's instance to an array of date strings.\n\n```html\n<calcite-date-picker min=\"2020-01-01\" max=\"2021-01-31\" range />\n```\n\n```js\ndocument.querySelector(\"calcite-date-picker\").value = [\"2020-01-03\", \"2020-01-05\"];\n```\n"
       },
       "props": [
         {
@@ -6992,9 +7077,9 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-dropdown>\n  <calcite-button slot=\"trigger\">Open Dropdown</calcite-button>\n  <calcite-dropdown-group>\n    <calcite-dropdown-item>Relevance</calcite-dropdown-item>\n    <calcite-dropdown-item selected>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 `close-on-select-disabled` 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 close-on-select-disabled>\n  <calcite-button id=\"trigger\" slot=\"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\" selected> 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=\"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 selected>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 selected>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 selected>Add peas</calcite-dropdown-item>\n  </calcite-dropdown-group>\n</calcite-dropdown>\n```\n"
+        "Basic": "Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`.\n\n```html\n<calcite-dropdown>\n  <calcite-button slot=\"trigger\">Choose a fruit</calcite-button>\n  <calcite-dropdown-group>\n    <calcite-dropdown-item>Apple</calcite-dropdown-item>\n    <calcite-dropdown-item selected>Orange</calcite-dropdown-item>\n    <calcite-dropdown-item>Banana</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 `close-on-select-disabled` attribute. Note that this will only apply when the `calcite-dropdown-group`'s `selectionMode` is set to `\"single\"` or `\"multiple\"`. Dropdowns will always close when the `calcite-dropdown-group`'s `selectionMode` is `\"none\"`.\n\n```html\n<calcite-dropdown close-on-select-disabled>\n  <calcite-button id=\"trigger\" slot=\"trigger\">Choose a fruit</calcite-button>\n  <calcite-dropdown-group id=\"fruits\" selection-mode=\"single\">\n    <calcite-dropdown-item id=\"apple\">Apple</calcite-dropdown-item>\n    <calcite-dropdown-item id=\"orange\" selected>Orange</calcite-dropdown-item>\n    <calcite-dropdown-item id=\"banana\">Banana</calcite-dropdown-item>\n  </calcite-dropdown-group>\n</calcite-dropdown>\n```\n",
+        "Groups": "You can combine groups in a single Dropdown, with different `selectionMode`s:\n\n```html\n<calcite-dropdown>\n  <calcite-button slot=\"trigger\">Add to cart</calcite-button>\n  <calcite-dropdown-group group-title=\"Select one fruit\">\n    <calcite-dropdown-item>Apple</calcite-dropdown-item>\n    <calcite-dropdown-item selected>Orange</calcite-dropdown-item>\n    <calcite-dropdown-item>Banana</calcite-dropdown-item>\n  </calcite-dropdown-group>\n  <calcite-dropdown-group group-title=\"Select multiple vegetables\" selection-mode=\"multiple\">\n    <calcite-dropdown-item>Asparagus</calcite-dropdown-item>\n    <calcite-dropdown-item selected>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 selected>Add peas</calcite-dropdown-item>\n  </calcite-dropdown-group>\n</calcite-dropdown>\n```\n"
       },
       "props": [
         {
@@ -7682,8 +7767,9 @@
       "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"
+        "Loading-and-disabled": "Renders a `calcite-fab` that is `loading` and `disabled`.\n\n```html\n<calcite-fab loading disabled></calcite-fab>\n```\n",
+        "Styling": "Configure styling for a `calcite-fab` to fit your UI and branding with the `appearance` and `kind` attributes/properties:\n\n```html\n<calcite-fab appearance=\"outline-fill\" kind=\"danger\" icon=\"trash\" label=\"Remove layer\"></calcite-fab>\n```\n",
+        "With-text": "Renders a `calcite-fab` that displays text alongside an icon.\n\n```html\n<calcite-fab label=\"Performs my custom action\" text=\"Perform Action!\" text-enabled></calcite-fab>\n```\n"
       },
       "props": [
         {
@@ -8143,8 +8229,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 in the form of buttons.\n\n```html\n<calcite-flow>\n  <calcite-panel heading=\"What are the most popular commute alternatives?\">\n    <button slot=\"header-menu-actions\">Reset</button>\n    <button slot=\"header-menu-actions\">Rename</button>\n    <button slot=\"footer\">Save</button>\n    <button slot=\"footer\">Cancel</button>\n  </calcite-panel>\n</calcite-flow>\n```\n"
+        "Basic": "Populate Flow with `calcite-flow-item`s to step inside a `calcite-panel` element with HTML and JavaScript:\n\n```html\n<calcite-shell>\n  <calcite-shell-panel slot=\"panel-start\" width-scale=\"l\">\n    <calcite-flow id=\"example-flow\">\n      <calcite-flow-item heading=\"Places of Education\">\n        <calcite-block id=\"first-flow-item-block\" heading=\"Recommended for you\" description=\"4 results\" open>\n          <calcite-list>\n            <calcite-list-item label=\"Narnia Community College\" description=\"Wardobe, IA\"> </calcite-list-item>\n            <calcite-list-item label=\"University of Acme\" description=\"Acmeton, CA\"></calcite-list-item>\n            <calcite-list-item label=\"Roadrunner Trade School\" description=\"Zion, UT\"></calcite-list-item>\n            <calcite-list-item label=\"Cartographic Institute\" description=\"Redlands, CA\"> </calcite-list-item>\n          </calcite-list>\n        </calcite-block>\n      </calcite-flow-item>\n    </calcite-flow>\n  </calcite-shell-panel>\n  <calcite-panel heading=\"Content\"></calcite-panel>\n</calcite-shell>\n```\n\n```js\nconst flow = document.getElementById(\"example-flow\");\nconst items = document.querySelectorAll(\"calcite-list-item\");\n\nitems?.forEach((item) => {\n  item.addEventListener(\"calciteListItemSelect\", (event) => {\n    createFlowItem(event, event.target.label, event.target.description, false);\n  });\n});\n\nfunction createFlowItem(event, title, description, isLastLevel) {\n  const newFlowItem = document.createElement(\"calcite-flow-item\");\n  newFlowItem.heading = !isLastLevel ? title : \"Even more details\";\n  newFlowItem.description = !isLastLevel ? description : title;\n\n  const block = document.createElement(\"calcite-block\");\n  block.open = true;\n  block.heading = \"Details\";\n  newFlowItem.append(block);\n\n  const notice = document.createElement(\"calcite-notice\");\n  notice.open = true;\n  notice.width = \"full\";\n  block.append(notice);\n\n  const noticeMessage = document.createElement(\"span\");\n  noticeMessage.slot = \"message\";\n  noticeMessage.innerText = !isLastLevel ? `A new Flow Item for ${title}.` : \"You've reached the end of the line.\";\n  notice.append(noticeMessage);\n\n  if (!isLastLevel) {\n    const button = document.createElement(\"calcite-button\");\n    button.slot = \"footer\";\n    button.width = \"full\";\n    button.innerText = \"Move to a third Flow Item\";\n    button.addEventListener(\"click\", (event) => createFlowItem(event, title, description, true));\n    if (!isLastLevel) newFlowItem.append(button);\n  }\n\n  flow.append(newFlowItem);\n}\n```\n",
+        "Menu-actions-and-footer-actions": "Renders a flow with `\"header-actions-start\"`, `\"header-actions-end\"`, `\"header-menu-actions\"`, `\"fab\"`, and `\"footer\"` slots.\n\n```html\n<calcite-shell>\n  <calcite-shell-panel slot=\"panel-start\" width-scale=\"l\">\n    <calcite-flow>\n      <calcite-flow-item heading=\"Map Options\">\n        <calcite-action icon=\"question\" text=\"Information\" slot=\"header-actions-start\"></calcite-action>\n        <calcite-action icon=\"save\" text=\"Save\" slot=\"header-actions-end\"></calcite-action>\n        <calcite-action icon=\"reset\" text-enabled text=\"Reset\" slot=\"header-menu-actions\"></calcite-action>\n        <calcite-action icon=\"pencil\" text-enabled text=\"Rename\" slot=\"header-menu-actions\"> </calcite-action>\n        <calcite-fab slot=\"fab\"></calcite-fab>\n        <calcite-button width=\"half\" slot=\"footer\" appearance=\"outline\">Cancel</calcite-button>\n        <calcite-button width=\"half\" slot=\"footer\">Next</calcite-button>\n      </calcite-flow-item>\n    </calcite-flow>\n  </calcite-shell-panel>\n  <calcite-panel heading=\"Map\"></calcite-panel>\n</calcite-shell>\n```\n"
       },
       "props": [],
       "methods": [
@@ -8460,7 +8546,7 @@
           "event": "calciteFlowItemBack",
           "detail": "void",
           "bubbles": true,
-          "cancelable": false,
+          "cancelable": true,
           "composed": true,
           "docs": "Fires when the back button is clicked.",
           "docsTags": []
@@ -8789,7 +8875,7 @@
       "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 supply your desired color to the `--calcite-ui-icon-color` CSS variable:\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  --calcite-ui-icon-color: #007ac2;\n}\n```\n"
       },
       "props": [
         {
@@ -9061,9 +9147,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.\n\n```html\n<calcite-inline-editable>\n  <calcite-input value=\"City of Acme Tree Survey\" placeholder=\"City of Acme Tree Survey\"></calcite-input>\n</calcite-inline-editable>\n```\n",
+        "With-label": "```html\n<calcite-label>\n  Survey name\n  <calcite-inline-editable>\n    <calcite-input value=\"City of Acme Tree Survey\" placeholder=\"City of Acme Tree Survey\"></calcite-input>\n  </calcite-inline-editable>\n</calcite-label>\n```\n",
+        "With-save-and-cancel-controls": "Add \"Save\" and \"Cancel\" controls:\n\n```html\n<calcite-inline-editable controls>\n  <calcite-input value=\"City of Acme Tree Survey\" placeholder=\"City of Acme Tree Survey\"></calcite-input>\n</calcite-inline-editable>\n```\n"
       },
       "props": [
         {
@@ -9265,11 +9351,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",
+        "Basic": "```html\n<calcite-input placeholder=\"Enter your region\"></calcite-input>\n```\n",
+        "Clearable": "Display a clear button when the component has a value with the `clearable` attribute:\n\n```html\n<calcite-label>\n  Full name\n  <calcite-input clearable value=\"John Doe\" 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\ninputEl.addEventListener(\"focusin\", logFocus);\ninputEl.addEventListener(\"focusout\", logBlur);\n\nfunction logFocus() {\n  console.log(event.target);\n}\n\nfunction logBlur() {\n  console.log(event.target.value);\n}\n```\n",
         "With-label": "```html\n<calcite-label for=\"invalid-input\">\n  Invalid input\n  <calcite-input status=\"invalid\" id=\"invalid-input\" placeholder=\"Filter your files\" value=\"adfo2h2\"></calcite-input>\n  <calcite-input-message status=\"invalid\" 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\"> Here's something you should know about this input </calcite-input-message>\n</calcite-label>\n```\n"
+        "With-message": "```html\n<calcite-label>\n  Desired subdomain\n  <calcite-input\n    suffix-text=\".city-of-acme.gov\"\n    status=\"invalid\"\n    placeholder=\"Enter your subdomain\"\n    value=\"i-love-maps\"\n  ></calcite-input>\n  <calcite-input-message icon=\"frown\" status=\"invalid\">\n    Apologies, this subdomain has already been registered.\n  </calcite-input-message>\n</calcite-label>\n```\n"
       },
       "props": [
         {
@@ -10225,7 +10311,8 @@
       "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      lang=\"en\"\n      role=\"application\"\n      layout=\"horizontal\"\n    ></calcite-input-date-picker>\n  </calcite-label>\n</div>\n```\n"
+        "Basic": "```html\n<div style=\"width: 400px\">\n  <calcite-label layout=\"inline\">\n    Date\n    <calcite-input-date-picker min=\"2016-08-09\" max=\"2023-12-18\" lang=\"en\"></calcite-input-date-picker>\n  </calcite-label>\n</div>\n```\n",
+        "Range": "Add a `range` to the component. To set the component's value use the JavaScript `value` property with an array of strings:\n\n```html\n<calcite-input-date-picker min=\"2016-08-09\" max=\"2023-12-18\" lang=\"en\" range></calcite-input-date-picker>\n```\n\n```js\ndocument.querySelector(\"calcite-input-date-picker\").value = [\"2023-10-01\", \"2023-11-30\"];\n```\n"
       },
       "props": [
         {
@@ -10876,7 +10963,7 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-label>\n  My great label\n  <calcite-input status=\"invalid\" placeholder=\"“Enter\" your information”></calcite-input>\n  <calcite-input-message status=\"invalid\"\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\n<calcite-label>\n  Desired subdomain\n  <calcite-input suffix-text=\".city-of-acme.gov\" placeholder=\"Enter your subdomain\" value=\"big-map-fan\">\n  </calcite-input>\n  <calcite-input-message icon=\"check-circle\" status=\"valid\">\n    Excellent news - this domain is available.\n  </calcite-input-message>\n</calcite-label>\n```\n"
       },
       "props": [
         {
@@ -11007,7 +11094,10 @@
           "text": "action - A slot for positioning a button next to the component."
         }
       ],
-      "usage": {},
+      "usage": {
+        "Basic": "```html\n<calcite-input-number placeholder=\"Offset distance\" step=\"0.25\" suffix-text=\"miles\"></calcite-input-number>\n```\n",
+        "Integer": "Restrict the component to integer numbers only with `integer`, which will disable exponential notation.\n\n```html\n<calcite-label layout=\"inline\">\n  Birds observed\n  <calcite-input-number placeholder=\"Number of birds\" step=\"1\" min=\"0\" integer></calcite-input-number>\n</calcite-label>\n```\n"
+      },
       "props": [
         {
           "name": "alignment",
@@ -11822,7 +11912,9 @@
           "text": "action - A slot for positioning a button next to the component."
         }
       ],
-      "usage": {},
+      "usage": {
+        "Basic": "```html\n<calcite-input-text placeholder=\"Enter your region\"></calcite-input-text>\n```\n"
+      },
       "props": [
         {
           "name": "alignment",
@@ -12858,6 +12950,24 @@
         }
       ],
       "events": [
+        {
+          "event": "calciteInputTimePickerBeforeClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is requested to be closed and before the closing transition begins.",
+          "docsTags": []
+        },
+        {
+          "event": "calciteInputTimePickerBeforeOpen",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins.",
+          "docsTags": []
+        },
         {
           "event": "calciteInputTimePickerChange",
           "detail": "void",
@@ -12866,6 +12976,24 @@
           "composed": true,
           "docs": "Fires when the time value is changed as a result of user input.",
           "docsTags": []
+        },
+        {
+          "event": "calciteInputTimePickerClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is closed and animation is complete.",
+          "docsTags": []
+        },
+        {
+          "event": "calciteInputTimePickerOpen",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is open and animation is complete.",
+          "docsTags": []
         }
       ],
       "listeners": [],
@@ -16503,13 +16631,31 @@
         }
       ],
       "events": [
+        {
+          "event": "calciteNoticeBeforeClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is requested to be closed and before the closing transition begins.",
+          "docsTags": []
+        },
+        {
+          "event": "calciteNoticeBeforeOpen",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": false,
+          "composed": true,
+          "docs": "Fires when the component is added to the DOM but not rendered, and before the opening transition begins.",
+          "docsTags": []
+        },
         {
           "event": "calciteNoticeClose",
           "detail": "void",
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Fired when the component is closed.",
+          "docs": "Fires when the component is closed and animation is complete.",
           "docsTags": []
         },
         {
@@ -16518,7 +16664,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Fired when the component is opened.",
+          "docs": "Fires when the component is open and animation is complete.",
           "docsTags": []
         }
       ],

package/dist/extras/vscode-data.json

@@ -352,6 +352,18 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "appearance",
+          "description": "Specifies the appearance of the component.",
+          "values": [
+            {
+              "name": "solid"
+            },
+            {
+              "name": "transparent"
+            }
+          ]
+        },
         {
           "name": "expanded",
           "description": "When `true`, the component is expanded."

package/dist/loader/cdn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.0
+ * v1.9.0-next.10
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.0
+ * v1.9.0-next.10
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.0
+ * v1.9.0-next.10
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.0
+ * v1.9.0-next.10
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/types/components/action/action.d.ts

@@ -7,6 +7,7 @@ import { Alignment, Appearance, Scale } from "../interfaces";
 import { ActionMessages } from "./assets/action/t9n";
 /**
  * @slot - A slot for adding a `calcite-icon`.
+ * @slot tooltip - A slot for adding a `calcite-tooltip`.
  */
 export declare class Action implements InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent {
   /**

package/dist/types/components/action-menu/action-menu.d.ts

@@ -2,7 +2,7 @@ import { Event, EventEmitter } from "../../stencil-public-runtime";
 import { VNode } from "../../stencil-public-runtime";
 import { EffectivePlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { LoadableComponent } from "../../utils/loadable";
-import { Scale } from "../interfaces";
+import { Appearance, Scale } from "../interfaces";
 /**
  * @slot - A slot for adding `calcite-action`s.
  * @slot trigger - A slot for adding a `calcite-action` to trigger opening the menu.
@@ -12,6 +12,8 @@ export declare class ActionMenu implements LoadableComponent {
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
+  /** Specifies the appearance of the component. */
+  appearance: Extract<"solid" | "transparent", Appearance>;
   /**
    * When `true`, the component is expanded.
    */

package/dist/types/components/block/block.d.ts

@@ -7,13 +7,14 @@ import { HeadingLevel } from "../functional/Heading";
 import { Status } from "../interfaces";
 import { BlockMessages } from "./assets/block/t9n";
 import { LoadableComponent } from "../../utils/loadable";
+import { OpenCloseComponent } from "../../utils/openCloseComponent";
 /**
  * @slot - A slot for adding custom content.
  * @slot icon - A slot for adding a leading header icon with `calcite-icon`.
  * @slot control - A slot for adding a single HTML input element in a header.
  * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.
  */
-export declare class Block implements ConditionalSlotComponent, InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent {
+export declare class Block implements ConditionalSlotComponent, InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent, OpenCloseComponent {
   /**
    * When `true`, the component is collapsible.
    */
@@ -42,6 +43,7 @@ export declare class Block implements ConditionalSlotComponent, InteractiveCompo
    * When `true`, expands the component and its contents.
    */
   open: boolean;
+  openHandler(): void;
   /**
    * Displays a status-related indicator icon.
    */
@@ -66,20 +68,37 @@ export declare class Block implements ConditionalSlotComponent, InteractiveCompo
    *
    */
   setFocus(): Promise<void>;
+  onBeforeOpen(): void;
+  onOpen(): void;
+  onBeforeClose(): void;
+  onClose(): void;
   el: HTMLCalciteBlockElement;
   effectiveLocale: string;
   effectiveLocaleChange(): void;
   defaultMessages: BlockMessages;
+  openTransitionProp: string;
+  transitionEl: HTMLElement;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): Promise<void>;
   componentDidLoad(): void;
   componentDidRender(): void;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  calciteBlockBeforeClose: EventEmitter<void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  calciteBlockBeforeOpen: EventEmitter<void>;
+  /** Fires when the component is closed and animation is complete. */
+  calciteBlockClose: EventEmitter<void>;
+  /** Fires when the component is open and animation is complete. */
+  calciteBlockOpen: EventEmitter<void>;
   /**
    * Emits when the component's header is clicked.
+   *
+   * @deprecated use `openClose` events: `calciteBlock[Before]Open` and `calciteBlock[Before]Close` instead.
    */
   calciteBlockToggle: EventEmitter<void>;
   onHeaderClick: () => void;
+  private setTransitionEl;
   renderScrim(): VNode[];
   renderIcon(): VNode[];
   renderTitle(): VNode;

package/dist/types/components/dropdown/resources.d.ts

@@ -1,6 +1,3 @@
 export declare const SLOTS: {
   dropdownTrigger: string;
 };
-export declare const CSS: {
-  calciteDropdownContent: string;
-};