@esri/calcite-components 1.9.0-next.6 → 1.9.0-next.8

package/dist/extras/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-09-20T22:08:41",
+  "timestamp": "2023-09-23T03:47:44",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.22.3",
@@ -2656,6 +2656,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",
@@ -2663,7 +2699,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": [],
@@ -5997,7 +6039,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": [
         {
@@ -7013,9 +7055,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": [
         {
@@ -7703,8 +7745,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": [
         {
@@ -8164,8 +8207,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": [
@@ -8481,7 +8524,7 @@
           "event": "calciteFlowItemBack",
           "detail": "void",
           "bubbles": true,
-          "cancelable": false,
+          "cancelable": true,
           "composed": true,
           "docs": "Fires when the back button is clicked.",
           "docsTags": []
@@ -8810,7 +8853,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": [
         {
@@ -9082,9 +9125,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": [
         {
@@ -9286,11 +9329,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": [
         {
@@ -10246,7 +10289,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": [
         {
@@ -10897,7 +10941,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": [
         {
@@ -11028,7 +11072,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",
@@ -11843,7 +11890,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",
@@ -12879,6 +12928,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",
@@ -12887,6 +12954,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": [],
@@ -16524,13 +16609,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": []
         },
         {
@@ -16539,7 +16642,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/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.6
+ * v1.9.0-next.8
  */
 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.6
+ * v1.9.0-next.8
  */
 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.6
+ * v1.9.0-next.8
  */
 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.6
+ * v1.9.0-next.8
  */
 (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/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/flow/flow.d.ts

@@ -28,7 +28,7 @@ export declare class Flow implements LoadableComponent {
   componentWillLoad(): Promise<void>;
   componentDidLoad(): void;
   disconnectedCallback(): void;
-  handleItemBackClick(): Promise<void>;
+  handleItemBackClick(event: CustomEvent): Promise<void>;
   getFlowDirection: (oldFlowItemCount: number, newFlowItemCount: number) => FlowDirection | null;
   updateFlowProps: () => void;
   render(): VNode;

package/dist/types/components/input-time-picker/input-time-picker.d.ts

@@ -11,10 +11,11 @@ import { Scale } from "../interfaces";
 import { TimePickerMessages } from "../time-picker/assets/time-picker/t9n";
 import { T9nComponent } from "../../utils/t9n";
 import { InputTimePickerMessages } from "./assets/input-time-picker/t9n";
-export declare class InputTimePicker implements FloatingUIComponent, FocusTrapComponent, FormComponent, InteractiveComponent, LabelableComponent, LoadableComponent, LocalizedComponent, T9nComponent {
+import { OpenCloseComponent } from "../../utils/openCloseComponent";
+export declare class InputTimePicker implements FloatingUIComponent, FocusTrapComponent, FormComponent, InteractiveComponent, LabelableComponent, LoadableComponent, LocalizedComponent, OpenCloseComponent, T9nComponent {
   /** When `true`, displays the `calcite-time-picker` component. */
   open: boolean;
-  openHandler(value: boolean): void;
+  openHandler(open: boolean): void;
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
   /**
@@ -94,13 +95,23 @@ export declare class InputTimePicker implements FloatingUIComponent, FocusTrapCo
   /** whether the value of the input was changed as a result of user typing or not */
   private userChangedValue;
   private referenceElementId;
+  openTransitionProp: string;
+  transitionEl: HTMLCalciteInputElement;
   defaultMessages: InputTimePickerMessages;
   effectiveLocale: string;
   effectiveLocaleWatcher(locale: SupportedLocale): Promise<void>;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  calciteInputTimePickerBeforeClose: EventEmitter<void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  calciteInputTimePickerBeforeOpen: EventEmitter<void>;
   /**
    * Fires when the time value is changed as a result of user input.
    */
   calciteInputTimePickerChange: EventEmitter<void>;
+  /** Fires when the component is closed and animation is complete. */
+  calciteInputTimePickerClose: EventEmitter<void>;
+  /** Fires when the component is open and animation is complete. */
+  calciteInputTimePickerOpen: EventEmitter<void>;
   private hostBlurHandler;
   private calciteInternalInputFocusHandler;
   private calciteInternalInputInputHandler;
@@ -113,6 +124,10 @@ export declare class InputTimePicker implements FloatingUIComponent, FocusTrapCo
    * @param delayed
    */
   reposition(delayed?: boolean): Promise<void>;
+  onBeforeOpen(): void;
+  onOpen(): void;
+  onBeforeClose(): void;
+  onClose(): void;
   private delocalizeTimeString;
   private delocalizeTimeStringToParts;
   private getTimeStringFromParts;
@@ -126,7 +141,7 @@ export declare class InputTimePicker implements FloatingUIComponent, FocusTrapCo
   private shouldIncludeSeconds;
   private shouldIncludeFractionalSeconds;
   private setCalcitePopoverEl;
-  private setCalciteInputEl;
+  private setInputAndTransitionEl;
   private setCalciteTimePickerEl;
   private setInputValue;
   /**

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

@@ -5,6 +5,7 @@ import { LocalizedComponent } from "../../utils/locale";
 import { T9nComponent } from "../../utils/t9n";
 import { Kind, Scale, Width } from "../interfaces";
 import { NoticeMessages } from "./assets/notice/t9n";
+import { OpenCloseComponent } from "../../utils/openCloseComponent";
 /**
  * Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
  * notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
@@ -17,9 +18,10 @@ import { NoticeMessages } from "./assets/notice/t9n";
  * @slot link - A slot for adding a `calcite-action` to take, such as: "undo", "try again", "link to page", etc.
  * @slot actions-end - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less actions.
  */
-export declare class Notice implements ConditionalSlotComponent, LoadableComponent, T9nComponent, LocalizedComponent {
+export declare class Notice implements ConditionalSlotComponent, LoadableComponent, T9nComponent, LocalizedComponent, OpenCloseComponent {
   /** When `true`, the component is visible. */
   open: boolean;
+  openHandler(): void;
   /** Specifies the kind of the component (will apply to top border and icon). */
   kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>;
   /** When `true`, a close button is added to the component. */
@@ -51,12 +53,21 @@ export declare class Notice implements ConditionalSlotComponent, LoadableCompone
   componentWillLoad(): Promise<void>;
   componentDidLoad(): void;
   render(): VNode;
-  /** Fired when the component is closed. */
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  calciteNoticeBeforeClose: EventEmitter<void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  calciteNoticeBeforeOpen: EventEmitter<void>;
+  /** Fires when the component is closed and animation is complete. */
   calciteNoticeClose: EventEmitter<void>;
-  /** Fired when the component is opened. */
+  /** Fires when the component is open and animation is complete. */
   calciteNoticeOpen: EventEmitter<void>;
   /** Sets focus on the component's first focusable element. */
   setFocus(): Promise<void>;
+  onBeforeClose(): void;
+  onBeforeOpen(): void;
+  onClose(): void;
+  onOpen(): void;
+  private setTransitionEl;
   private close;
   el: HTMLCalciteNoticeElement;
   /** The close button element. */
@@ -66,4 +77,6 @@ export declare class Notice implements ConditionalSlotComponent, LoadableCompone
   effectiveLocale: string;
   effectiveLocaleChange(): void;
   defaultMessages: NoticeMessages;
+  openTransitionProp: string;
+  transitionEl: HTMLElement;
 }

package/dist/types/components.d.ts

@@ -6445,8 +6445,25 @@ declare namespace LocalJSX {
           * Use this property to override individual strings used by the component.
          */
         "messageOverrides"?: Partial<BlockMessages>;
+        /**
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteBlockBeforeClose"?: (event: CalciteBlockCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteBlockBeforeOpen"?: (event: CalciteBlockCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteBlockClose"?: (event: CalciteBlockCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteBlockOpen"?: (event: CalciteBlockCustomEvent<void>) => void;
         /**
           * Emits when the component's header is clicked.
+          * @deprecated use `openClose` events: `calciteBlock[Before]Open` and `calciteBlock[Before]Close` instead.
          */
         "onCalciteBlockToggle"?: (event: CalciteBlockCustomEvent<void>) => void;
         /**
@@ -8172,10 +8189,26 @@ declare namespace LocalJSX {
           * Specifies the Unicode numeral system used by the component for localization.
          */
         "numberingSystem"?: NumberingSystem;
+        /**
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteInputTimePickerBeforeClose"?: (event: CalciteInputTimePickerCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteInputTimePickerBeforeOpen"?: (event: CalciteInputTimePickerCustomEvent<void>) => void;
         /**
           * Fires when the time value is changed as a result of user input.
          */
         "onCalciteInputTimePickerChange"?: (event: CalciteInputTimePickerCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteInputTimePickerClose"?: (event: CalciteInputTimePickerCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteInputTimePickerOpen"?: (event: CalciteInputTimePickerCustomEvent<void>) => void;
         /**
           * When `true`, displays the `calcite-time-picker` component.
          */
@@ -8798,11 +8831,19 @@ declare namespace LocalJSX {
          */
         "messageOverrides"?: Partial<NoticeMessages>;
         /**
-          * Fired when the component is closed.
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteNoticeBeforeClose"?: (event: CalciteNoticeCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteNoticeBeforeOpen"?: (event: CalciteNoticeCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
          */
         "onCalciteNoticeClose"?: (event: CalciteNoticeCustomEvent<void>) => void;
         /**
-          * Fired when the component is opened.
+          * Fires when the component is open and animation is complete.
          */
         "onCalciteNoticeOpen"?: (event: CalciteNoticeCustomEvent<void>) => void;
         /**