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

package/hydrate/index.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
  */
 'use strict';
 
@@ -6496,6 +6496,60 @@ function updateHostInteraction(component, hostIsTabbable = false) {
   component.el.removeAttribute("aria-disabled");
 }
 
+const resolveMap = new WeakMap();
+const promiseMap = new WeakMap();
+/**
+ * This helper util sets up the component for the ability to know when the component has been loaded.
+ *
+ * This should be used in the `componentWillLoad` lifecycle hook.
+ *
+ * ```
+ * componentWillLoad(): void {
+ *   setUpLoadableComponent(this);
+ * }
+ * ```
+ *
+ * @param component
+ */
+function setUpLoadableComponent(component) {
+  promiseMap.set(component, new Promise((resolve) => resolveMap.set(component, resolve)));
+}
+/**
+ * This helper util lets the loadable component know that it is now loaded.
+ *
+ * This should be used in the `componentDidLoad` lifecycle hook.
+ *
+ * ```
+ * componentDidLoad(): void {
+ *   setComponentLoaded(this);
+ * }
+ * ```
+ *
+ * @param component
+ */
+function setComponentLoaded(component) {
+  resolveMap.get(component)();
+}
+/**
+ * This helper util can be used to ensure a component has been loaded (The "componentDidLoad" stencil lifecycle method has been called).
+ *
+ * Requires "setUpLoadableComponent" and "setComponentLoaded" to be called first.
+ *
+ * A component developer can await this method before proceeding with any logic that requires a component to be loaded first.
+ *
+ * ```
+ * async setFocus(): Promise<void> {
+ *   await componentLoaded(this);
+ * }
+ * ```
+ *
+ * @param component
+ * @returns Promise<void>
+ */
+function componentLoaded(component) {
+  return promiseMap.get(component);
+}
+
 const actionCss = "@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*/.sc-calcite-action: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*/.calcite-animate.sc-calcite-action{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-action{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-action{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-action{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-action{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-action:root{--calcite-internal-duration-factor:0.01}}/*!@:host*/.sc-calcite-action-h{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-action-h *.sc-calcite-action{box-sizing:border-box}/*!@:root*/.sc-calcite-action:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-action-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-action-h{pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-action-h{display:flex;background-color:transparent;--calcite-action-indicator-color:var(--calcite-ui-brand)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-action-h[disabled] .sc-calcite-action-s>[calcite-hydrated][disabled],[disabled].sc-calcite-action-h [calcite-hydrated][disabled].sc-calcite-action{opacity:1}/*!@.button*/.button.sc-calcite-action{position:relative;margin:0px;display:flex;inline-size:auto;cursor:pointer;align-items:center;justify-content:flex-start;border-style:none;background-color:var(--calcite-ui-foreground-1);fill:var(--calcite-ui-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-3);outline-color:transparent;text-align:unset;flex:1 0 auto}/*!@.button:hover*/.button.sc-calcite-action:hover{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}/*!@.button:focus*/.button.sc-calcite-action:focus{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1);outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}/*!@.button:active*/.button.sc-calcite-action:active{background-color:var(--calcite-ui-foreground-3)}/*!@.button .icon-container*/.button.sc-calcite-action .icon-container.sc-calcite-action{pointer-events:none;margin:0px;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}/*!@.button .text-container*/.button.sc-calcite-action .text-container.sc-calcite-action{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:margin;transition-property:inline-size}/*!@.button .text-container--visible*/.button.sc-calcite-action .text-container--visible.sc-calcite-action{inline-size:auto;flex:1 1 auto;opacity:1}/*!@:host([scale=s]) .button*/[scale=s].sc-calcite-action-h .button.sc-calcite-action{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}/*!@:host([scale=s]) .button--text-visible .icon-container*/[scale=s].sc-calcite-action-h .button--text-visible.sc-calcite-action .icon-container.sc-calcite-action{margin-inline-end:0.5rem}/*!@:host([scale=m]) .button*/[scale=m].sc-calcite-action-h .button.sc-calcite-action{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}/*!@:host([scale=m]) .button--text-visible .icon-container*/[scale=m].sc-calcite-action-h .button--text-visible.sc-calcite-action .icon-container.sc-calcite-action{margin-inline-end:0.75rem}/*!@:host([scale=l]) .button*/[scale=l].sc-calcite-action-h .button.sc-calcite-action{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}/*!@:host([scale=l]) .button--text-visible .icon-container*/[scale=l].sc-calcite-action-h .button--text-visible.sc-calcite-action .icon-container.sc-calcite-action{margin-inline-end:1rem}/*!@:host([alignment=center]) .button*/[alignment=center].sc-calcite-action-h .button.sc-calcite-action{justify-content:center}/*!@:host([alignment=end]) .button*/[alignment=end].sc-calcite-action-h .button.sc-calcite-action{justify-content:flex-end}/*!@:host([alignment=center]) .button .text-container--visible,\n:host([alignment=end]) .button .text-container--visible*/[alignment=center].sc-calcite-action-h .button.sc-calcite-action .text-container--visible.sc-calcite-action,[alignment=end].sc-calcite-action-h .button.sc-calcite-action .text-container--visible.sc-calcite-action{flex:0 1 auto}/*!@:host([scale=s][compact]) .button,\n:host([scale=m][compact]) .button,\n:host([scale=l][compact]) .button*/[scale=s][compact].sc-calcite-action-h .button.sc-calcite-action,[scale=m][compact].sc-calcite-action-h .button.sc-calcite-action,[scale=l][compact].sc-calcite-action-h .button.sc-calcite-action{padding-inline:0px}/*!@.slot-container*/.slot-container.sc-calcite-action{display:flex}/*!@.slot-container--hidden*/.slot-container--hidden.sc-calcite-action{display:none}/*!@.button--text-visible*/.button--text-visible.sc-calcite-action{inline-size:100%}/*!@:host([active]) .button,\n:host([active]) .button:hover,\n:host([active]) .button:focus,\n:host([active][loading]) .button*/[active].sc-calcite-action-h .button.sc-calcite-action,[active].sc-calcite-action-h .button.sc-calcite-action:hover,[active].sc-calcite-action-h .button.sc-calcite-action:focus,[active][loading].sc-calcite-action-h .button.sc-calcite-action{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}/*!@:host([active]) .button:active*/[active].sc-calcite-action-h .button.sc-calcite-action:active{background-color:var(--calcite-ui-foreground-1)}/*!@:host([appearance=clear]) .button,\n:host([appearance=transparent]) .button*/[appearance=clear].sc-calcite-action-h .button.sc-calcite-action,[appearance=transparent].sc-calcite-action-h .button.sc-calcite-action{background-color:transparent;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}/*!@:host([appearance=clear]) .button:hover,\n:host([appearance=clear]) .button:focus,\n:host([appearance=transparent]) .button:hover,\n:host([appearance=transparent]) .button:focus*/[appearance=clear].sc-calcite-action-h .button.sc-calcite-action:hover,[appearance=clear].sc-calcite-action-h .button.sc-calcite-action:focus,[appearance=transparent].sc-calcite-action-h .button.sc-calcite-action:hover,[appearance=transparent].sc-calcite-action-h .button.sc-calcite-action:focus{background-color:transparent;box-shadow:0 0 0 2px var(--calcite-ui-border-1) inset}/*!@:host([active][appearance=clear]) .button,\n:host([active][appearance=clear]) .button:hover,\n:host([active][appearance=clear]) .button:focus,\n:host([active][appearance=transparent]) .button,\n:host([active][appearance=transparent]) .button:hover,\n:host([active][appearance=transparent]) .button:focus*/[active][appearance=clear].sc-calcite-action-h .button.sc-calcite-action,[active][appearance=clear].sc-calcite-action-h .button.sc-calcite-action:hover,[active][appearance=clear].sc-calcite-action-h .button.sc-calcite-action:focus,[active][appearance=transparent].sc-calcite-action-h .button.sc-calcite-action,[active][appearance=transparent].sc-calcite-action-h .button.sc-calcite-action:hover,[active][appearance=transparent].sc-calcite-action-h .button.sc-calcite-action:focus{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}/*!@:host([appearance=clear][loading]) .button,\n:host([appearance=clear][disabled]) .button,\n:host([appearance=transparent][loading]) .button,\n:host([appearance=transparent][disabled]) .button*/[appearance=clear][loading].sc-calcite-action-h .button.sc-calcite-action,[appearance=clear][disabled].sc-calcite-action-h .button.sc-calcite-action,[appearance=transparent][loading].sc-calcite-action-h .button.sc-calcite-action,[appearance=transparent][disabled].sc-calcite-action-h .button.sc-calcite-action{background-color:transparent}/*!@:host([loading]) .button,\n:host([loading]) .button:hover,\n:host([loading]) .button:focus*/[loading].sc-calcite-action-h .button.sc-calcite-action,[loading].sc-calcite-action-h .button.sc-calcite-action:hover,[loading].sc-calcite-action-h .button.sc-calcite-action:focus{background-color:var(--calcite-ui-foreground-1)}/*!@:host([loading]) .button .text-container,\n:host([loading]) .button:hover .text-container,\n:host([loading]) .button:focus .text-container*/[loading].sc-calcite-action-h .button.sc-calcite-action .text-container.sc-calcite-action,[loading].sc-calcite-action-h .button.sc-calcite-action:hover .text-container.sc-calcite-action,[loading].sc-calcite-action-h .button.sc-calcite-action:focus .text-container.sc-calcite-action{opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([loading]) calcite-loader[inline]*/[loading].sc-calcite-action-h calcite-loader[inline].sc-calcite-action{color:var(--calcite-ui-text-3);margin-inline-end:0px}/*!@:host([disabled]) .button,\n:host([disabled]) .button:hover,\n:host([disabled]) .button:focus*/[disabled].sc-calcite-action-h .button.sc-calcite-action,[disabled].sc-calcite-action-h .button.sc-calcite-action:hover,[disabled].sc-calcite-action-h .button.sc-calcite-action:focus{cursor:default;background-color:var(--calcite-ui-foreground-1);opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled][active]) .button,\n:host([disabled][active]) .button:hover,\n:host([disabled][active]) .button:focus*/[disabled][active].sc-calcite-action-h .button.sc-calcite-action,[disabled][active].sc-calcite-action-h .button.sc-calcite-action:hover,[disabled][active].sc-calcite-action-h .button.sc-calcite-action:focus{background-color:var(--calcite-ui-foreground-3);opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([indicator]) .button::after*/[indicator].sc-calcite-action-h .button.sc-calcite-action::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;border-width:2px;background-color:var(--calcite-action-indicator-color);border-color:var(--calcite-ui-foreground-1);inset-block-end:0.75rem;inset-inline-end:0.75rem}/*!@:host([indicator]) .button--text-visible::after*/[indicator].sc-calcite-action-h .button--text-visible.sc-calcite-action::after{inset-block-end:auto}/*!@:host([indicator]) .button--text-visible .text-container--visible*/[indicator].sc-calcite-action-h .button--text-visible.sc-calcite-action .text-container--visible.sc-calcite-action{margin-inline-end:1rem}/*!@:host([indicator]) .button:hover::after,\n:host([indicator]) .button:focus::after*/[indicator].sc-calcite-action-h .button.sc-calcite-action:hover::after,[indicator].sc-calcite-action-h .button.sc-calcite-action:focus::after{border-color:var(--calcite-ui-foreground-1)}/*!@:host([indicator][scale=s]) .button::after*/[indicator][scale=s].sc-calcite-action-h .button.sc-calcite-action::after{inset-block-end:0.25rem;inset-inline-end:0.25rem}/*!@:host([indicator][scale=s]) .button--text-visible::after*/[indicator][scale=s].sc-calcite-action-h .button--text-visible.sc-calcite-action::after{inset-block-end:auto;inset-inline-end:0.5rem}/*!@:host([indicator][active]) .button::after*/[indicator][active].sc-calcite-action-h .button.sc-calcite-action::after{border-color:var(--calcite-ui-foreground-3)}";
 
 /**
@@ -6578,6 +6632,12 @@ class Action {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -6593,6 +6653,7 @@ class Action {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   // --------------------------------------------------------------------------
@@ -8160,7 +8221,11 @@ class ActionBar {
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
   componentDidLoad() {
+    setComponentLoaded(this);
     this.conditionallyOverflowActions();
   }
   connectedCallback() {
@@ -8200,6 +8265,7 @@ class ActionBar {
    */
   async setFocus(focusId) {
     var _a;
+    await componentLoaded(this);
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
       return;
@@ -8567,6 +8633,12 @@ class ActionMenu {
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     this.disconnectMenuButtonEl();
   }
@@ -8602,6 +8674,7 @@ class ActionMenu {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     focusElement(this.menuButtonEl);
   }
   renderMenuButton() {
@@ -8726,9 +8799,13 @@ class ActionPad {
     disconnectConditionalSlotComponent(this);
   }
   componentWillLoad() {
+    setUpLoadableComponent(this);
     const { el, expanded } = this;
     toggleChildActionText({ parent: el, expanded });
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Methods
@@ -8741,6 +8818,7 @@ class ActionPad {
    */
   async setFocus(focusId) {
     var _a;
+    await componentLoaded(this);
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
       return;
@@ -9337,8 +9415,12 @@ class Alert {
     connectOpenCloseComponent(this);
   }
   componentWillLoad() {
+    setUpLoadableComponent(this);
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     window.clearTimeout(this.autoDismissTimeoutId);
     disconnectOpenCloseComponent(this);
@@ -9388,6 +9470,7 @@ class Alert {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     const alertLinkEl = getSlotted(this.el, { selector: "calcite-link" });
     if (!this.closeButton && !alertLinkEl) {
       return;
@@ -9773,7 +9856,7 @@ const Heading = (props, children) => {
   return hAsync(HeadingTag, { ...props }, children);
 };
 
-const blockCss = "@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*/.sc-calcite-block: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*/.calcite-animate.sc-calcite-block{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-block{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-block{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-block{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-block{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-block:root{--calcite-internal-duration-factor:0.01}}/*!@:host*/.sc-calcite-block-h{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-block-h *.sc-calcite-block{box-sizing:border-box}/*!@:host*/.sc-calcite-block-h{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}/*!@:root*/.sc-calcite-block:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-block-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-block-h{pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-block-h{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);padding:0px;transition-property:margin;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);flex-basis:auto}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-block-h[disabled] .sc-calcite-block-s>[calcite-hydrated][disabled],[disabled].sc-calcite-block-h [calcite-hydrated][disabled].sc-calcite-block{opacity:1}/*!@.header*/.header.sc-calcite-block{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}/*!@.heading*/.heading.sc-calcite-block{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}/*!@.header .heading*/.header.sc-calcite-block .heading.sc-calcite-block{flex:1 1 auto;padding:0.5rem}/*!@.header*/.header.sc-calcite-block{justify-content:flex-start;padding:0px}/*!@.header,\n.toggle*/.header.sc-calcite-block,.toggle.sc-calcite-block{grid-area:header}/*!@.header-container*/.header-container.sc-calcite-block{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:\"handle header control menu\";grid-column:header-start/menu-end;grid-row:1/2}/*!@.toggle*/.toggle.sc-calcite-block{margin:0px;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0px;font-family:inherit;outline-color:transparent;text-align:initial;background-color:transparent}/*!@.toggle:hover*/.toggle.sc-calcite-block:hover{background-color:var(--calcite-ui-foreground-2)}/*!@.toggle:focus*/.toggle.sc-calcite-block:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}/*!@calcite-loader[inline]*/calcite-loader[inline].sc-calcite-block{grid-area:control;align-self:center}/*!@calcite-handle*/calcite-handle.sc-calcite-block{grid-area:handle}/*!@.title*/.title.sc-calcite-block{margin:0px;padding:0.75rem}/*!@.header .title .heading*/.header.sc-calcite-block .title.sc-calcite-block .heading.sc-calcite-block{padding:0px;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-ui-text-2);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}/*!@.description*/.description.sc-calcite-block{margin-block-start:0.125rem;padding:0px;font-size:var(--calcite-font-size--2);color:var(--calcite-ui-text-3);word-wrap:break-word;word-break:break-word}/*!@.icon*/.icon.sc-calcite-block{margin-inline-start:0.75rem;margin-inline-end:0px;margin-block:0.75rem}/*!@.status-icon.valid*/.status-icon.valid.sc-calcite-block{color:var(--calcite-ui-success)}/*!@.status-icon.invalid*/.status-icon.invalid.sc-calcite-block{color:var(--calcite-ui-danger)}/*!@.status-icon.loading*/.status-icon.loading.sc-calcite-block{animation:spin var(--calcite-internal-animation-timing-medium) linear infinite}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}/*!@.toggle-icon*/.toggle-icon.sc-calcite-block{margin-block:0.75rem;align-self:center;justify-self:end;color:var(--calcite-ui-text-3);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:1rem;margin-inline-start:auto}/*!@.toggle:hover .toggle-icon*/.toggle.sc-calcite-block:hover .toggle-icon.sc-calcite-block{color:var(--calcite-ui-text-1)}/*!@.container*/.container.sc-calcite-block{position:relative;display:flex;block-size:100%;flex-direction:column}/*!@.content*/.content.sc-calcite-block{position:relative;flex:1 1 0%}@keyframes in{0%{opacity:0}100%{opacity:1}}/*!@.content*/.content.sc-calcite-block{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out}/*!@.content--spaced*/.content--spaced.sc-calcite-block{padding-block:var(--calcite-block-padding, 0.5rem);padding-inline:var(--calcite-block-padding, 0.625rem)}/*!@.control-container*/.control-container.sc-calcite-block{margin:0px;display:flex;grid-area:control}/*!@calcite-action-menu*/calcite-action-menu.sc-calcite-block{grid-area:menu}/*!@:host([open])*/[open].sc-calcite-block-h{margin-block:0.5rem}/*!@:host([open]) .header .title .heading*/[open].sc-calcite-block-h .header.sc-calcite-block .title.sc-calcite-block .heading.sc-calcite-block{color:var(--calcite-ui-text-1)}";
+const blockCss = "@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*/.sc-calcite-block: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*/.calcite-animate.sc-calcite-block{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-block{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-block{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-block{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-block{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-block:root{--calcite-internal-duration-factor:0.01}}/*!@:host*/.sc-calcite-block-h{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-block-h *.sc-calcite-block{box-sizing:border-box}/*!@:host*/.sc-calcite-block-h{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}/*!@:root*/.sc-calcite-block:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-block-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-block-h{pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-block-h{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);padding:0px;transition-property:margin;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);flex-basis:auto}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-block-h[disabled] .sc-calcite-block-s>[calcite-hydrated][disabled],[disabled].sc-calcite-block-h [calcite-hydrated][disabled].sc-calcite-block{opacity:1}/*!@.header*/.header.sc-calcite-block{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}/*!@.heading*/.heading.sc-calcite-block{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}/*!@.header .heading*/.header.sc-calcite-block .heading.sc-calcite-block{flex:1 1 auto;padding:0.5rem}/*!@.header*/.header.sc-calcite-block{justify-content:flex-start;padding:0px}/*!@.header,\n.toggle*/.header.sc-calcite-block,.toggle.sc-calcite-block{grid-area:header}/*!@.header-container*/.header-container.sc-calcite-block{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:\"handle header control menu\";grid-column:header-start/menu-end;grid-row:1/2}/*!@.toggle*/.toggle.sc-calcite-block{margin:0px;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0px;font-family:inherit;outline-color:transparent;text-align:initial;background-color:transparent}/*!@.toggle:hover*/.toggle.sc-calcite-block:hover{background-color:var(--calcite-ui-foreground-2)}/*!@.toggle:focus*/.toggle.sc-calcite-block:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}/*!@calcite-loader[inline]*/calcite-loader[inline].sc-calcite-block{grid-area:control;align-self:center}/*!@calcite-handle*/calcite-handle.sc-calcite-block{grid-area:handle}/*!@.title*/.title.sc-calcite-block{margin:0px;padding:0.75rem}/*!@.header .title .heading*/.header.sc-calcite-block .title.sc-calcite-block .heading.sc-calcite-block{padding:0px;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-ui-text-2);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}/*!@.description*/.description.sc-calcite-block{margin-block-start:0.125rem;padding:0px;font-size:var(--calcite-font-size--2);color:var(--calcite-ui-text-3);word-wrap:break-word;word-break:break-word}/*!@.icon*/.icon.sc-calcite-block{margin-inline-start:0.75rem;margin-inline-end:0px;margin-block:0.75rem}/*!@.status-icon.valid*/.status-icon.valid.sc-calcite-block{color:var(--calcite-ui-success)}/*!@.status-icon.invalid*/.status-icon.invalid.sc-calcite-block{color:var(--calcite-ui-danger)}/*!@.status-icon.loading*/.status-icon.loading.sc-calcite-block{animation:spin calc(var(--calcite-internal-animation-timing-slow) * 2) linear infinite}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}/*!@.toggle-icon*/.toggle-icon.sc-calcite-block{margin-block:0.75rem;align-self:center;justify-self:end;color:var(--calcite-ui-text-3);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:1rem;margin-inline-start:auto}/*!@.toggle:hover .toggle-icon*/.toggle.sc-calcite-block:hover .toggle-icon.sc-calcite-block{color:var(--calcite-ui-text-1)}/*!@.container*/.container.sc-calcite-block{position:relative;display:flex;block-size:100%;flex-direction:column}/*!@.content*/.content.sc-calcite-block{position:relative;flex:1 1 0%}@keyframes in{0%{opacity:0}100%{opacity:1}}/*!@.content*/.content.sc-calcite-block{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out}/*!@.content--spaced*/.content--spaced.sc-calcite-block{padding-block:var(--calcite-block-padding, 0.5rem);padding-inline:var(--calcite-block-padding, 0.625rem)}/*!@.control-container*/.control-container.sc-calcite-block{margin:0px;display:flex;grid-area:control}/*!@calcite-action-menu*/calcite-action-menu.sc-calcite-block{grid-area:menu}/*!@:host([open])*/[open].sc-calcite-block-h{margin-block:0.5rem}/*!@:host([open]) .header .title .heading*/[open].sc-calcite-block-h .header.sc-calcite-block .title.sc-calcite-block .heading.sc-calcite-block{color:var(--calcite-ui-text-1)}";
 
 /**
  * @slot - A slot for adding content to the component.
@@ -10534,6 +10617,10 @@ class Button {
     this.formEl = null;
   }
   componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -10562,6 +10649,7 @@ class Button {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.childEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   updateHasContent() {
@@ -10871,6 +10959,7 @@ class Checkbox {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.toggleEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   //--------------------------------------------------------------------------
@@ -10887,6 +10976,12 @@ class Checkbox {
     disconnectLabel(this);
     disconnectForm(this);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
@@ -11010,6 +11105,12 @@ class Chip {
       this.handleClosable(this.closable);
     }
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
   }
@@ -11021,6 +11122,7 @@ class Chip {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.closeButton) === null || _a === void 0 ? void 0 : _a.focus();
   }
   //--------------------------------------------------------------------------
@@ -13866,6 +13968,7 @@ class ColorPicker {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     return focusElement(this.colorFieldScopeNode);
   }
   //--------------------------------------------------------------------------
@@ -13874,6 +13977,7 @@ class ColorPicker {
   //
   //--------------------------------------------------------------------------
   componentWillLoad() {
+    setUpLoadableComponent(this);
     const { allowEmpty, color: color$1, format, value } = this;
     const willSetNoColor = allowEmpty && !value;
     const parsedMode = parseMode(value);
@@ -13890,6 +13994,9 @@ class ColorPicker {
       this.savedColors = JSON.parse(localStorage.getItem(storageKey));
     }
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     document.removeEventListener("pointermove", this.globalPointerMoveHandler);
     document.removeEventListener("pointerup", this.globalPointerUpHandler);
@@ -14256,6 +14363,12 @@ class ColorPickerHexInput {
       this.internalSetValue(null, null, false);
     }
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   handleValueChange(value, oldValue) {
     this.internalSetValue(value, oldValue, false);
   }
@@ -14313,6 +14426,7 @@ class ColorPickerHexInput {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     focusElement(this.inputNode);
   }
   //--------------------------------------------------------------------------
@@ -16628,6 +16742,7 @@ class Combobox {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
     this.activeChipIndex = -1;
     this.activeItemIndex = -1;
@@ -16656,11 +16771,13 @@ class Combobox {
     }
   }
   componentWillLoad() {
+    setUpLoadableComponent(this);
     this.updateItems();
   }
   componentDidLoad() {
     afterConnectDefaultValueSet(this, this.getValue());
     this.reposition(true);
+    setComponentLoaded(this);
   }
   componentDidRender() {
     if (this.el.offsetHeight !== this.inputHeight) {
@@ -19165,6 +19282,7 @@ class DropdownItem {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
   //--------------------------------------------------------------------------
@@ -19173,8 +19291,12 @@ class DropdownItem {
   //
   //--------------------------------------------------------------------------
   componentWillLoad() {
+    setUpLoadableComponent(this);
     this.initialize();
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   connectedCallback() {
     const isSelected = this.selected || this.active;
     if (isSelected) {
@@ -19379,6 +19501,12 @@ class Fab {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
@@ -19389,6 +19517,7 @@ class Fab {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     focusElement(this.buttonEl);
   }
   // --------------------------------------------------------------------------
@@ -19511,17 +19640,16 @@ class Filter {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentDidRender() {
-    updateHostInteraction(this);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
   componentWillLoad() {
+    setUpLoadableComponent(this);
     this.updateFiltered(filter(this.items, this.value));
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -19529,6 +19657,7 @@ class Filter {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     focusElement(this.textInput);
   }
   updateFiltered(filtered, emit = false) {
@@ -19835,9 +19964,15 @@ class FlowItem {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Methods
@@ -19847,6 +19982,7 @@ class FlowItem {
    * Sets focus on the component.
    */
   async setFocus() {
+    await componentLoaded(this);
     const { backButtonEl, containerEl } = this;
     if (backButtonEl) {
       backButtonEl.setFocus();
@@ -20202,6 +20338,17 @@ class Handle {
       this.activated = false;
     };
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Methods
@@ -20210,6 +20357,7 @@ class Handle {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.handleButton) === null || _a === void 0 ? void 0 : _a.focus();
   }
   // --------------------------------------------------------------------------
@@ -20502,6 +20650,12 @@ class InlineEditable {
     (_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);
@@ -20536,6 +20690,7 @@ class InlineEditable {
   //--------------------------------------------------------------------------
   async setFocus() {
     var _a, _b;
+    await componentLoaded(this);
     if (this.editingEnabled) {
       (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus();
     }
@@ -21096,11 +21251,15 @@ class Input {
   }
   componentWillLoad() {
     var _a, _b;
+    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 = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentShouldUpdate(newValue, oldValue, property) {
     if (this.type === "number" && property === "value" && newValue && !isValidNumber(newValue)) {
       this.setValue({
@@ -21122,6 +21281,7 @@ class Input {
   /** Sets focus on the component. */
   async setFocus() {
     var _a, _b;
+    await componentLoaded(this);
     if (this.type === "number") {
       (_a = this.childNumberEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -21671,6 +21831,7 @@ class InputDatePicker {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.startInput) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
   /**
@@ -21739,11 +21900,13 @@ class InputDatePicker {
     };
   }
   async componentWillLoad() {
+    setUpLoadableComponent(this);
     await this.loadLocaleData();
     this.onMinChanged(this.min);
     this.onMaxChanged(this.max);
   }
   componentDidLoad() {
+    setComponentLoaded(this);
     this.localizeInputValues();
     this.reposition(true);
   }
@@ -22450,6 +22613,9 @@ class InputNumber {
     this.setDisabledAction();
     this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     var _a;
     disconnectLabel(this);
@@ -22460,6 +22626,7 @@ class InputNumber {
   }
   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");
@@ -22485,6 +22652,7 @@ class InputNumber {
   /** 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`. */
@@ -22880,8 +23048,12 @@ class InputText {
     this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
   componentWillLoad() {
+    setUpLoadableComponent(this);
     this.requestedIcon = setRequestedIcon({}, this.icon, "text");
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
@@ -22893,6 +23065,7 @@ class InputText {
   /** 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`. */
@@ -23423,6 +23596,7 @@ class InputTimePicker {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.calciteInputEl) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
   /**
@@ -23460,7 +23634,11 @@ class InputTimePicker {
       this.open = active;
     }
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
   componentDidLoad() {
+    setComponentLoaded(this);
     this.setInputValue(this.localizedValue);
   }
   disconnectedCallback() {
@@ -23660,6 +23838,12 @@ class Link {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
@@ -23697,6 +23881,7 @@ class Link {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     focusElement(this.childEl);
   }
   get el() { return getElement(this); }
@@ -23750,6 +23935,12 @@ class List$1 {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
@@ -23760,6 +23951,7 @@ class List$1 {
   // --------------------------------------------------------------------------
   /** 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();
   }
@@ -23839,14 +24031,15 @@ class ListItem {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
   }
@@ -23861,6 +24054,7 @@ class ListItem {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   // --------------------------------------------------------------------------
@@ -25465,11 +25659,15 @@ class Modal {
   //
   //--------------------------------------------------------------------------
   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 });
@@ -25566,6 +25764,7 @@ class Modal {
    * @param focusId
    */
   async setFocus(focusId) {
+    await componentLoaded(this);
     const { closeButtonEl } = this;
     if (closeButtonEl && focusId === "close-button") {
       return focusElement(closeButtonEl);
@@ -25788,8 +25987,12 @@ class Notice {
     disconnectConditionalSlotComponent(this);
   }
   componentWillLoad() {
+    setUpLoadableComponent(this);
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   render() {
     const { el } = this;
     const closeButton = (hAsync("button", { "aria-label": this.intlClose, class: CSS$m.close, onClick: this.close, ref: (el) => (this.closeButton = el) }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
@@ -25803,6 +26006,7 @@ class Notice {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     const noticeLinkEl = this.el.querySelector("calcite-link");
     if (!this.closeButton && !noticeLinkEl) {
       return;
@@ -26386,6 +26590,12 @@ class Panel {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this);
   }
@@ -26421,6 +26631,7 @@ class Panel {
    * @param focusId
    */
   async setFocus(focusId) {
+    await componentLoaded(this);
     const { backButtonEl, closeButtonEl, containerEl } = this;
     if (focusId === "back-button") {
       backButtonEl === null || backButtonEl === void 0 ? void 0 : backButtonEl.setFocus();
@@ -27012,7 +27223,11 @@ class PickList {
   disconnectedCallback() {
     cleanUpObserver.call(this);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
   componentDidLoad() {
+    setComponentLoaded(this);
     handleInitialFilter.call(this);
   }
   componentDidRender() {
@@ -27063,6 +27278,7 @@ class PickList {
    * @param focusId
    */
   async setFocus(focusId) {
+    await componentLoaded(this);
     return setFocus.call(this, focusId);
   }
   // --------------------------------------------------------------------------
@@ -27283,6 +27499,12 @@ class PickListItem {
   connectedCallback() {
     connectConditionalSlotComponent(this);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
   }
@@ -27306,6 +27528,7 @@ class PickListItem {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   // --------------------------------------------------------------------------
@@ -27689,7 +27912,11 @@ class Popover {
     }
     this.setUpReferenceElement(this.hasLoaded);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
   componentDidLoad() {
+    setComponentLoaded(this);
     if (this.referenceElement && !this.effectiveReferenceElement) {
       this.setUpReferenceElement();
     }
@@ -27734,6 +27961,7 @@ class Popover {
    * @param focusId
    */
   async setFocus(focusId) {
+    await componentLoaded(this);
     const { closeButtonEl } = this;
     if (focusId === "close-button" && closeButtonEl) {
       forceUpdate$1(closeButtonEl);
@@ -28112,6 +28340,7 @@ class RadioButton {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     if (!this.disabled) {
       focusElement(this.containerEl);
     }
@@ -28198,7 +28427,11 @@ class RadioButton {
     connectLabel(this);
     connectForm(this);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
   componentDidLoad() {
+    setComponentLoaded(this);
     if (this.focused && !this.disabled) {
       this.setFocus();
     }
@@ -28433,6 +28666,7 @@ class RadioGroup {
   //
   //--------------------------------------------------------------------------
   componentWillLoad() {
+    setUpLoadableComponent(this);
     const items = this.getItems();
     const lastChecked = Array.from(items)
       .filter((item) => item.checked)
@@ -28446,6 +28680,7 @@ class RadioGroup {
   }
   componentDidLoad() {
     afterConnectDefaultValueSet(this, this.value);
+    setComponentLoaded(this);
   }
   connectedCallback() {
     connectLabel(this);
@@ -28518,6 +28753,7 @@ class RadioGroup {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = (this.selectedItem || this.getItems()[0])) === null || _a === void 0 ? void 0 : _a.focus();
   }
   //--------------------------------------------------------------------------
@@ -28722,6 +28958,12 @@ class Rating {
     connectLabel(this);
     connectForm(this);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
@@ -28782,6 +29024,7 @@ class Rating {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.inputFocusRef) === null || _a === void 0 ? void 0 : _a.focus();
   }
   get el() { return getElement(this); }
@@ -28967,8 +29210,12 @@ class Select {
     disconnectLabel(this);
     disconnectForm(this);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
   componentDidLoad() {
     var _a, _b;
+    setComponentLoaded(this);
     afterConnectDefaultValueSet(this, (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
   }
   componentDidRender() {
@@ -28981,6 +29228,7 @@ class Select {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     focusElement(this.selectEl);
   }
   handleOptionOrGroupChange(event) {
@@ -29716,6 +29964,7 @@ class Slider {
     this.removeDragListeners();
   }
   componentWillLoad() {
+    setUpLoadableComponent(this);
     this.tickValues = this.generateTickValues();
     if (!isRange(this.value)) {
       this.value = this.clamp(this.value);
@@ -29728,6 +29977,9 @@ class Slider {
       this.hasHistogram = true;
     }
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     if (this.labelHandles) {
       this.adjustHostObscuredHandleLabel("value");
@@ -30003,6 +30255,7 @@ class Slider {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     const handle = this.minHandle ? this.minHandle : this.maxHandle;
     handle === null || handle === void 0 ? void 0 : handle.focus();
   }
@@ -34106,6 +34359,7 @@ class StepperItem {
   }
   componentWillLoad() {
     var _a;
+    setUpLoadableComponent(this);
     this.icon = getElementProp(this.el, "icon", false);
     this.numbered = getElementProp(this.el, "numbered", false);
     this.layout = getElementProp(this.el, "layout", false);
@@ -34122,6 +34376,9 @@ class StepperItem {
       useGrouping: false
     };
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this, true);
   }
@@ -34152,6 +34409,7 @@ class StepperItem {
   //--------------------------------------------------------------------------
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = (this.layout === "vertical" ? this.el : this.headerEl)) === null || _a === void 0 ? void 0 : _a.focus();
   }
   renderIcon() {
@@ -34261,6 +34519,7 @@ class Switch {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     focusElement(this.switchEl);
   }
   onLabelClick() {
@@ -34289,6 +34548,12 @@ class Switch {
     connectLabel(this);
     connectForm(this);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
@@ -35291,6 +35556,7 @@ class TileSelect {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.input) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
   //--------------------------------------------------------------------------
@@ -35366,6 +35632,12 @@ class TileSelect {
   connectedCallback() {
     this.renderInput();
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     this.input.parentNode.removeChild(this.input);
   }
@@ -36067,6 +36339,7 @@ class TimePicker {
    */
   async setFocus(target) {
     var _a;
+    await componentLoaded(this);
     (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
   }
   // --------------------------------------------------------------------------
@@ -36110,6 +36383,12 @@ class TimePicker {
       numberingSystem: this.numberingSystem
     }));
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     disconnectLocalized(this);
   }
@@ -37788,7 +38067,11 @@ class ValueList {
     initialize.call(this);
     initializeObserver.call(this);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
   componentDidLoad() {
+    setComponentLoaded(this);
     this.setUpDragAndDrop();
     handleInitialFilter.call(this);
   }
@@ -37874,6 +38157,7 @@ class ValueList {
    * @param focusId
    */
   async setFocus(focusId) {
+    await componentLoaded(this);
     return setFocus.call(this, focusId);
   }
   // --------------------------------------------------------------------------
@@ -38009,6 +38293,12 @@ class ValueListItem {
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this, this.el.closest("calcite-value-list") ? "managed" : false);
   }
@@ -38029,6 +38319,7 @@ class ValueListItem {
   /** Set focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
   calciteListItemChangeHandler(event) {