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

package/dist/cjs/calcite-input-date-picker.cjs.entry.js

@@ -1,26 +1,27 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d158670.js');
-const resources = require('./resources-adc133e8.js');
-const label = require('./label-dd4edfec.js');
-const form = require('./form-2ee231ac.js');
-const floatingUi = require('./floating-ui-c4264248.js');
-const interactive = require('./interactive-659fd37c.js');
-const dom = require('./dom-5245652b.js');
-const openCloseComponent = require('./openCloseComponent-389f3b15.js');
-const locale = require('./locale-3825dbc0.js');
-const key = require('./key-feab4f11.js');
-require('./debounce-27f4872f.js');
-require('./resources-eef7f920.js');
-require('./guid-88aff5b7.js');
-require('./observers-460db0ff.js');
+const index = require('./index-f3b0bc03.js');
+const resources = require('./resources-2153bd78.js');
+const label = require('./label-17ebdfde.js');
+const form = require('./form-d5c353af.js');
+const floatingUi = require('./floating-ui-94bee11e.js');
+const interactive = require('./interactive-7ef912a7.js');
+const dom = require('./dom-0bdb3e4d.js');
+const openCloseComponent = require('./openCloseComponent-016fdd87.js');
+const locale = require('./locale-3b95ea90.js');
+const key = require('./key-f99aca0a.js');
+const loadable = require('./loadable-739e30f1.js');
+require('./debounce-70be4d63.js');
+require('./resources-dbf9e229.js');
+require('./guid-140e20e0.js');
+require('./observers-44b70579.js');
 
 const CSS = {
   menu: "menu-container",
@@ -393,6 +394,7 @@ const InputDatePicker = class {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await loadable.componentLoaded(this);
     (_a = this.startInput) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
   /**
@@ -461,11 +463,13 @@ const InputDatePicker = class {
     };
   }
   async componentWillLoad() {
+    loadable.setUpLoadableComponent(this);
     await this.loadLocaleData();
     this.onMinChanged(this.min);
     this.onMaxChanged(this.max);
   }
   componentDidLoad() {
+    loadable.setComponentLoaded(this);
     this.localizeInputValues();
     this.reposition(true);
   }

package/dist/cjs/calcite-input-message.cjs.entry.js

@@ -1,16 +1,16 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d158670.js');
-const dom = require('./dom-5245652b.js');
-require('./resources-eef7f920.js');
-require('./guid-88aff5b7.js');
+const index = require('./index-f3b0bc03.js');
+const dom = require('./dom-0bdb3e4d.js');
+require('./resources-dbf9e229.js');
+require('./guid-140e20e0.js');
 
 var StatusIconDefaults;
 (function (StatusIconDefaults) {

package/dist/cjs/calcite-input-number.cjs.entry.js

@@ -1,23 +1,24 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d158670.js');
-const dom = require('./dom-5245652b.js');
-const label = require('./label-dd4edfec.js');
-const form = require('./form-2ee231ac.js');
-const locale = require('./locale-3825dbc0.js');
-const key = require('./key-feab4f11.js');
-const resources = require('./resources-eef7f920.js');
-const math = require('./math-3ef4a1ed.js');
-const observers = require('./observers-460db0ff.js');
-const interactive = require('./interactive-659fd37c.js');
-require('./guid-88aff5b7.js');
+const index = require('./index-f3b0bc03.js');
+const dom = require('./dom-0bdb3e4d.js');
+const label = require('./label-17ebdfde.js');
+const form = require('./form-d5c353af.js');
+const locale = require('./locale-3b95ea90.js');
+const key = require('./key-f99aca0a.js');
+const resources = require('./resources-dbf9e229.js');
+const math = require('./math-78af568b.js');
+const observers = require('./observers-44b70579.js');
+const interactive = require('./interactive-7ef912a7.js');
+const loadable = require('./loadable-739e30f1.js');
+require('./guid-140e20e0.js');
 
 const CSS = {
   loader: "loader",
@@ -437,6 +438,9 @@ const InputNumber = class {
     this.setDisabledAction();
     this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
+  componentDidLoad() {
+    loadable.setComponentLoaded(this);
+  }
   disconnectedCallback() {
     var _a;
     label.disconnectLabel(this);
@@ -447,6 +451,7 @@ const InputNumber = class {
   }
   componentWillLoad() {
     var _a, _b;
+    loadable.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 = dom.setRequestedIcon({}, this.icon, "number");
@@ -472,6 +477,7 @@ const InputNumber = class {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await loadable.componentLoaded(this);
     (_a = this.childNumberEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   /** Selects all text of the component's `value`. */

package/dist/cjs/calcite-input-text.cjs.entry.js

@@ -1,20 +1,21 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d158670.js');
-const dom = require('./dom-5245652b.js');
-const label = require('./label-dd4edfec.js');
-const form = require('./form-2ee231ac.js');
-const resources = require('./resources-eef7f920.js');
-const observers = require('./observers-460db0ff.js');
-const interactive = require('./interactive-659fd37c.js');
-require('./guid-88aff5b7.js');
+const index = require('./index-f3b0bc03.js');
+const dom = require('./dom-0bdb3e4d.js');
+const label = require('./label-17ebdfde.js');
+const form = require('./form-d5c353af.js');
+const resources = require('./resources-dbf9e229.js');
+const observers = require('./observers-44b70579.js');
+const interactive = require('./interactive-7ef912a7.js');
+const loadable = require('./loadable-739e30f1.js');
+require('./guid-140e20e0.js');
 
 const CSS = {
   loader: "loader",
@@ -268,8 +269,12 @@ const InputText = class {
     this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
   componentWillLoad() {
+    loadable.setUpLoadableComponent(this);
     this.requestedIcon = dom.setRequestedIcon({}, this.icon, "text");
   }
+  componentDidLoad() {
+    loadable.setComponentLoaded(this);
+  }
   componentDidRender() {
     interactive.updateHostInteraction(this);
   }
@@ -281,6 +286,7 @@ const InputText = class {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await loadable.componentLoaded(this);
     (_a = this.childEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   /** Selects all text of the component's `value`. */

package/dist/cjs/calcite-input-time-picker_2.cjs.entry.js

@@ -1,22 +1,23 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d158670.js');
-const guid = require('./guid-88aff5b7.js');
-const locale = require('./locale-3825dbc0.js');
-const label = require('./label-dd4edfec.js');
-const form = require('./form-2ee231ac.js');
-const interactive = require('./interactive-659fd37c.js');
-const key = require('./key-feab4f11.js');
-require('./observers-460db0ff.js');
-require('./dom-5245652b.js');
-require('./resources-eef7f920.js');
+const index = require('./index-f3b0bc03.js');
+const guid = require('./guid-140e20e0.js');
+const locale = require('./locale-3b95ea90.js');
+const label = require('./label-17ebdfde.js');
+const form = require('./form-d5c353af.js');
+const interactive = require('./interactive-7ef912a7.js');
+const key = require('./key-f99aca0a.js');
+const loadable = require('./loadable-739e30f1.js');
+require('./observers-44b70579.js');
+require('./dom-0bdb3e4d.js');
+require('./resources-dbf9e229.js');
 
 const maxTenthForMinuteAndSecond = 5;
 function createLocaleDateTimeFormatter(locale$1, numberingSystem, includeSeconds = true) {
@@ -454,6 +455,7 @@ const InputTimePicker = class {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await loadable.componentLoaded(this);
     (_a = this.calciteInputEl) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
   /**
@@ -491,7 +493,11 @@ const InputTimePicker = class {
       this.open = active;
     }
   }
+  componentWillLoad() {
+    loadable.setUpLoadableComponent(this);
+  }
   componentDidLoad() {
+    loadable.setComponentLoaded(this);
     this.setInputValue(this.localizedValue);
   }
   disconnectedCallback() {
@@ -1099,6 +1105,7 @@ const TimePicker = class {
    */
   async setFocus(target) {
     var _a;
+    await loadable.componentLoaded(this);
     (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
   }
   // --------------------------------------------------------------------------
@@ -1142,6 +1149,12 @@ const TimePicker = class {
       numberingSystem: this.numberingSystem
     }));
   }
+  componentWillLoad() {
+    loadable.setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    loadable.setComponentLoaded(this);
+  }
   disconnectedCallback() {
     locale.disconnectLocalized(this);
   }

package/dist/cjs/calcite-input.cjs.entry.js

@@ -1,23 +1,24 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d158670.js');
-const dom = require('./dom-5245652b.js');
-const label = require('./label-dd4edfec.js');
-const form = require('./form-2ee231ac.js');
-const locale = require('./locale-3825dbc0.js');
-const key = require('./key-feab4f11.js');
-const resources = require('./resources-eef7f920.js');
-const math = require('./math-3ef4a1ed.js');
-const observers = require('./observers-460db0ff.js');
-const interactive = require('./interactive-659fd37c.js');
-require('./guid-88aff5b7.js');
+const index = require('./index-f3b0bc03.js');
+const dom = require('./dom-0bdb3e4d.js');
+const label = require('./label-17ebdfde.js');
+const form = require('./form-d5c353af.js');
+const locale = require('./locale-3b95ea90.js');
+const key = require('./key-f99aca0a.js');
+const resources = require('./resources-dbf9e229.js');
+const math = require('./math-78af568b.js');
+const observers = require('./observers-44b70579.js');
+const interactive = require('./interactive-7ef912a7.js');
+const loadable = require('./loadable-739e30f1.js');
+require('./guid-140e20e0.js');
 
 const CSS = {
   loader: "loader",
@@ -514,11 +515,15 @@ const Input = class {
   }
   componentWillLoad() {
     var _a, _b;
+    loadable.setUpLoadableComponent(this);
     this.childElType = this.type === "textarea" ? "textarea" : "input";
     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 = dom.setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
   }
+  componentDidLoad() {
+    loadable.setComponentLoaded(this);
+  }
   componentShouldUpdate(newValue, oldValue, property) {
     if (this.type === "number" && property === "value" && newValue && !locale.isValidNumber(newValue)) {
       this.setValue({
@@ -540,6 +545,7 @@ const Input = class {
   /** Sets focus on the component. */
   async setFocus() {
     var _a, _b;
+    await loadable.componentLoaded(this);
     if (this.type === "number") {
       (_a = this.childNumberEl) === null || _a === void 0 ? void 0 : _a.focus();
     }

package/dist/cjs/calcite-label.cjs.entry.js

@@ -1,17 +1,17 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d158670.js');
-const label = require('./label-dd4edfec.js');
-require('./dom-5245652b.js');
-require('./resources-eef7f920.js');
-require('./guid-88aff5b7.js');
+const index = require('./index-f3b0bc03.js');
+const label = require('./label-17ebdfde.js');
+require('./dom-0bdb3e4d.js');
+require('./resources-dbf9e229.js');
+require('./guid-140e20e0.js');
 
 const CSS = {
   container: "container"

package/dist/cjs/calcite-link.cjs.entry.js

@@ -1,17 +1,18 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d158670.js');
-const dom = require('./dom-5245652b.js');
-const resources = require('./resources-eef7f920.js');
-const interactive = require('./interactive-659fd37c.js');
-require('./guid-88aff5b7.js');
+const index = require('./index-f3b0bc03.js');
+const dom = require('./dom-0bdb3e4d.js');
+const resources = require('./resources-dbf9e229.js');
+const interactive = require('./interactive-7ef912a7.js');
+const loadable = require('./loadable-739e30f1.js');
+require('./guid-140e20e0.js');
 
 const linkCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:inline}:host a,:host span{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0px;border-style:none;font-family:inherit;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host span:hover{text-decoration:none}:host a,:host span{outline-color:transparent}:host a:focus,:host span:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-block-start:-0.25em}:host .calcite-link--icon.icon-start{margin-inline-end:0.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:0.5rem}:host span,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0px;color:var(--calcite-ui-text-link);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor, currentColor), linear-gradient(var(--calcite-link-blue-underline), var(--calcite-link-blue-underline));background-position-x:0%, 100%;background-position-y:min(1.5em, 100%);background-repeat:no-repeat, no-repeat;background-size:0% 1px, 100% 1px}:host span:hover,:host span:focus,:host a:hover,:host a:focus{background-size:100% 1px, 100% 1px}:host span:active,:host a:active{background-size:100% 2px, 100% 2px}:host span.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%, 100% 100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}";
 
@@ -51,6 +52,12 @@ const Link = class {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    loadable.setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    loadable.setComponentLoaded(this);
+  }
   componentDidRender() {
     interactive.updateHostInteraction(this);
   }
@@ -88,6 +95,7 @@ const Link = class {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await loadable.componentLoaded(this);
     dom.focusElement(this.childEl);
   }
   get el() { return index.getElement(this); }

package/dist/cjs/calcite-list_3.cjs.entry.js

@@ -1,20 +1,21 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d158670.js');
-const interactive = require('./interactive-659fd37c.js');
-const dom = require('./dom-5245652b.js');
-const conditionalSlot = require('./conditionalSlot-c28021dc.js');
-const Heading = require('./Heading-2e9dceb8.js');
-require('./resources-eef7f920.js');
-require('./guid-88aff5b7.js');
-require('./observers-460db0ff.js');
+const index = require('./index-f3b0bc03.js');
+const interactive = require('./interactive-7ef912a7.js');
+const loadable = require('./loadable-739e30f1.js');
+const dom = require('./dom-0bdb3e4d.js');
+const conditionalSlot = require('./conditionalSlot-aaac3923.js');
+const Heading = require('./Heading-72043eb0.js');
+require('./resources-dbf9e229.js');
+require('./guid-140e20e0.js');
+require('./observers-44b70579.js');
 
 const CSS$2 = {
   container: "container"
@@ -40,6 +41,12 @@ const List = class {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    loadable.setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    loadable.setComponentLoaded(this);
+  }
   componentDidRender() {
     interactive.updateHostInteraction(this);
   }
@@ -50,6 +57,7 @@ const List = class {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await loadable.componentLoaded(this);
     const firstListItem = this.el.querySelector(`calcite-list-item:not([non-interactive])`);
     firstListItem === null || firstListItem === void 0 ? void 0 : firstListItem.setFocus();
   }
@@ -110,14 +118,15 @@ const ListItem = class {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    loadable.setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    loadable.setComponentLoaded(this);
+  }
   componentDidRender() {
     interactive.updateHostInteraction(this);
   }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
   connectedCallback() {
     conditionalSlot.connectConditionalSlotComponent(this);
   }
@@ -132,6 +141,7 @@ const ListItem = class {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await loadable.componentLoaded(this);
     (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   // --------------------------------------------------------------------------

package/dist/cjs/calcite-loader.cjs.entry.js

@@ -1,14 +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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d158670.js');
-const guid = require('./guid-88aff5b7.js');
+const index = require('./index-f3b0bc03.js');
+const guid = require('./guid-140e20e0.js');
 
 const loaderCss = "@charset \"UTF-8\";@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;margin-inline:auto;display:none;align-items:center;justify-content:center;opacity:1;min-block-size:var(--calcite-loader-size);font-size:var(--calcite-loader-font-size);stroke:var(--calcite-ui-brand);stroke-width:3;fill:none;transform:scale(1, 1);animation:loader-color-shift calc(var(--calcite-internal-animation-timing-slow) * 2) alternate-reverse infinite linear;padding-block:var(--calcite-loader-padding, 4rem)}:host([scale=s]){--calcite-loader-font-size:var(--calcite-font-size--2);--calcite-loader-size:2rem;--calcite-loader-size-inline:0.75rem}:host([scale=m]){--calcite-loader-font-size:var(--calcite-font-size-0);--calcite-loader-size:4rem;--calcite-loader-size-inline:1rem}:host([scale=l]){--calcite-loader-font-size:var(--calcite-font-size-2);--calcite-loader-size:6rem;--calcite-loader-size-inline:1.5rem}:host([no-padding]){padding-block:0px}:host{display:flex}.loader__text{display:block;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-1);margin-block-start:calc(var(--calcite-loader-size) + 1.5rem)}.loader__percentage{position:absolute;display:block;text-align:center;color:var(--calcite-ui-text-1);font-size:var(--calcite-loader-font-size);inline-size:var(--calcite-loader-size);inset-inline-start:50%;margin-inline-start:calc(var(--calcite-loader-size) / 2 * -1);line-height:0.25;transform:scale(1, 1)}.loader__svgs{position:absolute;overflow:visible;opacity:1;inline-size:var(--calcite-loader-size);block-size:var(--calcite-loader-size);inset-inline-start:50%;margin-inline-start:calc(var(--calcite-loader-size) / 2 * -1);transform:scale(1, 1)}.loader__svg{position:absolute;inset-block-start:0px;transform-origin:center;overflow:visible;inset-inline-start:0;inline-size:var(--calcite-loader-size);block-size:var(--calcite-loader-size);animation-iteration-count:infinite;animation-timing-function:linear;animation-name:loader-clockwise}@supports (display: grid){.loader__svg--1{animation-name:loader-offset-1}.loader__svg--2{animation-name:loader-offset-2}.loader__svg--3{animation-name:loader-offset-3}}:host([type=determinate]){animation:none;stroke:var(--calcite-ui-border-3)}:host([type=determinate]) .loader__svg--3{animation:none;stroke:var(--calcite-ui-brand);stroke-dasharray:150.79632;transform:rotate(-90deg);transition:all var(--calcite-internal-animation-timing-fast) linear}:host([inline]){position:relative;margin:0px;animation:none;stroke:currentColor;stroke-width:2;padding-block:0px;block-size:var(--calcite-loader-size-inline);min-block-size:var(--calcite-loader-size-inline);inline-size:var(--calcite-loader-size-inline);margin-inline-end:calc(var(--calcite-loader-size-inline) * 0.5);vertical-align:calc(var(--calcite-loader-size-inline) * -1 * 0.2);display:inline-block}:host([inline]) .loader__svgs{inset-block-start:0px;margin:0px;inset-inline-start:0;inline-size:var(--calcite-loader-size-inline);block-size:var(--calcite-loader-size-inline)}:host([inline]) .loader__svg{inline-size:var(--calcite-loader-size-inline);block-size:var(--calcite-loader-size-inline)}:host([complete]){opacity:0;transform:scale(0.75, 0.75);transform-origin:center;transition:opacity var(--calcite-internal-animation-timing-medium) linear 1000ms, transform var(--calcite-internal-animation-timing-medium) linear 1000ms}:host([complete]) .loader__svgs{opacity:0;transform:scale(0.75, 0.75);transform-origin:center;transition:opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms, transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms}:host([complete]) .loader__percentage{color:var(--calcite-ui-brand);transform:scale(1.05, 1.05);transform-origin:center;transition:color var(--calcite-internal-animation-timing-medium) linear, transform var(--calcite-internal-animation-timing-medium) linear}.loader__svg--1{stroke-dasharray:27.9252444444% 139.6262222222%;animation-duration:calc(var(--calcite-internal-animation-timing-slow) * 2.4)}@keyframes loader-offset-1{0%{stroke-dasharray:27.9252444444% 251.3272%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-83.7757333333%}100%{stroke-dasharray:27.9252444444% 251.3272%;stroke-dashoffset:-279.2524444444%}}.loader__svg--2{stroke-dasharray:55.8504888889% 139.6262222222%;animation-duration:calc(var(--calcite-internal-animation-timing-slow) * 3.2)}@keyframes loader-offset-2{0%{stroke-dasharray:55.8504888889% 223.4019555556%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-97.7383555556%}100%{stroke-dasharray:55.8504888889% 223.4019555556%;stroke-dashoffset:-279.2524444444%}}.loader__svg--3{stroke-dasharray:13.9626222222% 139.6262222222%;animation-duration:calc(var(--calcite-internal-animation-timing-slow) * 3.867)}@keyframes loader-offset-3{0%{stroke-dasharray:13.9626222222% 265.2898222222%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-76.7944222222%}100%{stroke-dasharray:13.9626222222% 265.2898222222%;stroke-dashoffset:-279.2524444444%}}@keyframes loader-color-shift{0%{stroke:var(--calcite-ui-brand)}33%{stroke:var(--calcite-ui-brand-press)}66%{stroke:var(--calcite-ui-brand-hover)}100%{stroke:var(--calcite-ui-brand)}}@keyframes loader-clockwise{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
 

package/dist/cjs/calcite-modal.cjs.entry.js

@@ -1,20 +1,21 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d158670.js');
-const dom = require('./dom-5245652b.js');
-const observers = require('./observers-460db0ff.js');
-const conditionalSlot = require('./conditionalSlot-c28021dc.js');
-const openCloseComponent = require('./openCloseComponent-389f3b15.js');
-const focusTrapComponent = require('./focusTrapComponent-ff4957d9.js');
-require('./resources-eef7f920.js');
-require('./guid-88aff5b7.js');
+const index = require('./index-f3b0bc03.js');
+const dom = require('./dom-0bdb3e4d.js');
+const observers = require('./observers-44b70579.js');
+const conditionalSlot = require('./conditionalSlot-aaac3923.js');
+const openCloseComponent = require('./openCloseComponent-016fdd87.js');
+const focusTrapComponent = require('./focusTrapComponent-bda38907.js');
+const loadable = require('./loadable-739e30f1.js');
+require('./resources-dbf9e229.js');
+require('./guid-140e20e0.js');
 
 const CSS = {
   modal: "modal",
@@ -147,11 +148,15 @@ const Modal = class {
   //
   //--------------------------------------------------------------------------
   componentWillLoad() {
+    loadable.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() {
+    loadable.setComponentLoaded(this);
+  }
   connectedCallback() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
@@ -248,6 +253,7 @@ const Modal = class {
    * @param focusId
    */
   async setFocus(focusId) {
+    await loadable.componentLoaded(this);
     const { closeButtonEl } = this;
     if (closeButtonEl && focusId === "close-button") {
       return dom.focusElement(closeButtonEl);

package/dist/cjs/calcite-notice.cjs.entry.js

@@ -1,19 +1,20 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3d158670.js');
-const interfaces = require('./interfaces-40ceb8ba.js');
-const dom = require('./dom-5245652b.js');
-const conditionalSlot = require('./conditionalSlot-c28021dc.js');
-require('./resources-eef7f920.js');
-require('./guid-88aff5b7.js');
-require('./observers-460db0ff.js');
+const index = require('./index-f3b0bc03.js');
+const interfaces = require('./interfaces-36163b36.js');
+const dom = require('./dom-0bdb3e4d.js');
+const conditionalSlot = require('./conditionalSlot-aaac3923.js');
+const loadable = require('./loadable-739e30f1.js');
+require('./resources-dbf9e229.js');
+require('./guid-140e20e0.js');
+require('./observers-44b70579.js');
 
 const TEXT = {
   close: "Close"
@@ -120,8 +121,12 @@ const Notice = class {
     conditionalSlot.disconnectConditionalSlotComponent(this);
   }
   componentWillLoad() {
+    loadable.setUpLoadableComponent(this);
     this.requestedIcon = dom.setRequestedIcon(interfaces.StatusIcons, this.icon, this.color);
   }
+  componentDidLoad() {
+    loadable.setComponentLoaded(this);
+  }
   render() {
     const { el } = this;
     const closeButton = (index.h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButton = el) }, index.h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
@@ -135,6 +140,7 @@ const Notice = class {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await loadable.componentLoaded(this);
     const noticeLinkEl = this.el.querySelector("calcite-link");
     if (!this.closeButton && !noticeLinkEl) {
       return;