@esri/calcite-components 1.0.0-next.635 → 1.0.0-next.637

package/dist/components/calcite-dropdown-item.js

@@ -1,10 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getElementProp, t as toAriaBoolean } from './dom.js';
+import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const CSS = {
@@ -55,6 +56,7 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
   //--------------------------------------------------------------------------
@@ -63,8 +65,12 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   //
   //--------------------------------------------------------------------------
   componentWillLoad() {
+    setUpLoadableComponent(this);
     this.initialize();
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   connectedCallback() {
     const isSelected = this.selected || this.active;
     if (isSelected) {

package/dist/components/calcite-dropdown.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { D as Dropdown, d as defineCustomElement$1 } from './dropdown.js';
 

package/dist/components/calcite-fab.js

@@ -1,11 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { f as focusElement } from './dom.js';
 import { u as updateHostInteraction } from './interactive.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$4 } from './button.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './loader.js';
@@ -65,6 +66,12 @@ const Fab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
@@ -75,6 +82,7 @@ const Fab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     focusElement(this.buttonEl);
   }
   // --------------------------------------------------------------------------

package/dist/components/calcite-filter.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { F as Filter, d as defineCustomElement$1 } from './filter.js';
 

package/dist/components/calcite-flow-item.js

@@ -1,12 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as getElementDir } from './dom.js';
 import { S as SLOTS$1, d as defineCustomElement$5 } from './panel.js';
 import { u as updateHostInteraction } from './interactive.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$9 } from './action.js';
 import { d as defineCustomElement$8 } from './action-menu.js';
 import { d as defineCustomElement$7 } from './icon.js';
@@ -103,9 +104,15 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Methods
@@ -115,6 +122,7 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * Sets focus on the component.
    */
   async setFocus() {
+    await componentLoaded(this);
     const { backButtonEl, containerEl } = this;
     if (backButtonEl) {
       backButtonEl.setFocus();

package/dist/components/calcite-flow.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { c as createObserver } from './observers.js';

package/dist/components/calcite-graph.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { G as Graph, d as defineCustomElement$1 } from './graph.js';
 

package/dist/components/calcite-handle.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { H as Handle, d as defineCustomElement$1 } from './handle.js';
 

package/dist/components/calcite-icon.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { I as Icon, d as defineCustomElement$1 } from './icon.js';
 

package/dist/components/calcite-inline-editable.js

@@ -1,13 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { g as getElementProp, b as getSlotted } from './dom.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label2.js';
 import { c as createObserver } from './observers.js';
 import { u as updateHostInteraction } from './interactive.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$4 } from './button.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './loader.js';
@@ -166,6 +167,12 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
     this.mutationObserverCallback();
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     var _a;
     disconnectLabel(this);
@@ -200,6 +207,7 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   //--------------------------------------------------------------------------
   async setFocus() {
     var _a, _b;
+    await componentLoaded(this);
     if (this.editingEnabled) {
       (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus();
     }

package/dist/components/calcite-input-date-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { T as TEXT, g as getValueAsDateRange, a as getLocaleData, d as defineCustomElement$8 } from './date-picker.js';
@@ -14,6 +14,7 @@ import { t as toAriaBoolean } from './dom.js';
 import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent.js';
 import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { n as numberKeys } from './key.js';
+import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { d as defineCustomElement$7 } from './date-picker-day.js';
 import { d as defineCustomElement$6 } from './date-picker-month.js';
 import { d as defineCustomElement$5 } from './date-picker-month-header.js';
@@ -394,6 +395,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.startInput) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
   /**
@@ -462,11 +464,13 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     };
   }
   async componentWillLoad() {
+    setUpLoadableComponent(this);
     await this.loadLocaleData();
     this.onMinChanged(this.min);
     this.onMaxChanged(this.max);
   }
   componentDidLoad() {
+    setComponentLoaded(this);
     this.localizeInputValues();
     this.reposition(true);
   }

package/dist/components/calcite-input-message.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { s as setRequestedIcon, g as getElementProp } from './dom.js';

package/dist/components/calcite-input-number.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { T as TEXT$1, b as getSlotted, i as isPrimaryPointerButton, s as setRequestedIcon, g as getElementProp, c as getElementDir, C as CSS_UTILITY } from './dom.js';
@@ -12,6 +12,7 @@ import { n as numberKeys } from './key.js';
 import { d as decimalPlaces } from './math.js';
 import { c as createObserver } from './observers.js';
 import { u as updateHostInteraction } from './interactive.js';
+import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './progress.js';
 
@@ -435,6 +436,9 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.setDisabledAction();
     this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     var _a;
     disconnectLabel(this);
@@ -445,6 +449,7 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   componentWillLoad() {
     var _a, _b;
+    setUpLoadableComponent(this);
     this.maxString = (_a = this.max) === null || _a === void 0 ? void 0 : _a.toString();
     this.minString = (_b = this.min) === null || _b === void 0 ? void 0 : _b.toString();
     this.requestedIcon = setRequestedIcon({}, this.icon, "number");
@@ -470,6 +475,7 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.childNumberEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   /** Selects all text of the component's `value`. */

package/dist/components/calcite-input-text.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { T as TEXT$1, b as getSlotted, s as setRequestedIcon, g as getElementProp, c as getElementDir, C as CSS_UTILITY } from './dom.js';
@@ -9,6 +9,7 @@ import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './la
 import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { c as createObserver } from './observers.js';
 import { u as updateHostInteraction } from './interactive.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './progress.js';
 
@@ -266,8 +267,12 @@ const InputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
   componentWillLoad() {
+    setUpLoadableComponent(this);
     this.requestedIcon = setRequestedIcon({}, this.icon, "text");
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
@@ -279,6 +284,7 @@ const InputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.childEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   /** Selects all text of the component's `value`. */

package/dist/components/calcite-input-time-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';
@@ -11,6 +11,7 @@ import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenForm
 import { u as updateHostInteraction } from './interactive.js';
 import { n as numberStringFormatter, u as updateEffectiveLocale, c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { n as numberKeys } from './key.js';
+import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { d as defineCustomElement$8 } from './action.js';
 import { d as defineCustomElement$7 } from './icon.js';
 import { d as defineCustomElement$6 } from './input.js';
@@ -279,6 +280,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.calciteInputEl) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
   /**
@@ -316,7 +318,11 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       this.open = active;
     }
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
   componentDidLoad() {
+    setComponentLoaded(this);
     this.setInputValue(this.localizedValue);
   }
   disconnectedCallback() {

package/dist/components/calcite-input.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { I as Input, d as defineCustomElement$1 } from './input.js';
 

package/dist/components/calcite-label.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { L as Label, d as defineCustomElement$1 } from './label.js';
 

package/dist/components/calcite-link.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { L as Link, d as defineCustomElement$1 } from './link.js';
 

package/dist/components/calcite-list-item-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { H as Heading, c as constrainHeadingLevel } from './Heading.js';

package/dist/components/calcite-list-item.js

@@ -1,12 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { b as getSlotted } from './dom.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { u as updateHostInteraction } from './interactive.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
 
 const CSS = {
   container: "container",
@@ -55,14 +56,15 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
   }
@@ -77,6 +79,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   // --------------------------------------------------------------------------

package/dist/components/calcite-list.js

@@ -1,10 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { u as updateHostInteraction } from './interactive.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
 
 const CSS = {
   container: "container"
@@ -32,6 +33,12 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
@@ -42,6 +49,7 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     const firstListItem = this.el.querySelector(`calcite-list-item:not([non-interactive])`);
     firstListItem === null || firstListItem === void 0 ? void 0 : firstListItem.setFocus();
   }

package/dist/components/calcite-loader.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { L as Loader, d as defineCustomElement$1 } from './loader.js';
 

package/dist/components/calcite-modal.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { b as getSlotted, f as focusElement, h as ensureId } from './dom.js';
@@ -9,6 +9,7 @@ import { c as createObserver } from './observers.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { c as connectOpenCloseComponent, d as disconnectOpenCloseComponent } from './openCloseComponent.js';
 import { c as connectFocusTrap, a as activateFocusTrap, d as deactivateFocusTrap } from './focusTrapComponent.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './loader.js';
 import { d as defineCustomElement$2 } from './scrim.js';
@@ -146,11 +147,15 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   componentWillLoad() {
+    setUpLoadableComponent(this);
     // when modal initially renders, if active was set we need to open as watcher doesn't fire
     if (this.open) {
       requestAnimationFrame(() => this.openModal());
     }
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   connectedCallback() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
@@ -247,6 +252,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @param focusId
    */
   async setFocus(focusId) {
+    await componentLoaded(this);
     const { closeButtonEl } = this;
     if (closeButtonEl && focusId === "close-button") {
       return focusElement(closeButtonEl);

package/dist/components/calcite-notice.js

@@ -1,12 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { S as StatusIcons } from './interfaces.js';
 import { s as setRequestedIcon, b as getSlotted } from './dom.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const TEXT = {
@@ -116,8 +117,12 @@ const Notice = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     disconnectConditionalSlotComponent(this);
   }
   componentWillLoad() {
+    setUpLoadableComponent(this);
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   render() {
     const { el } = this;
     const closeButton = (h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButton = el) }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
@@ -131,6 +136,7 @@ const Notice = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     const noticeLinkEl = this.el.querySelector("calcite-link");
     if (!this.closeButton && !noticeLinkEl) {
       return;

package/dist/components/calcite-option-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 

package/dist/components/calcite-option.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as createObserver } from './observers.js';

package/dist/components/calcite-pagination.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale.js';

package/dist/components/calcite-panel.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { P as Panel, d as defineCustomElement$1 } from './panel.js';
 

package/dist/components/calcite-pick-list-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { C as CSS, S as SLOTS } from './resources2.js';

package/dist/components/calcite-pick-list-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.635
+ * v1.0.0-next.637
  */
 import { P as PickListItem, d as defineCustomElement$1 } from './pick-list-item.js';