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

package/dist/components/calcite-radio-button.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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';
@@ -10,6 +10,7 @@ import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './la
 import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { g as getRoundRobinIndex } from './array.js';
 import { u as updateHostInteraction } from './interactive.js';
+import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 
 const CSS = {
   container: "container"
@@ -156,6 +157,7 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     if (!this.disabled) {
       focusElement(this.containerEl);
     }
@@ -242,7 +244,11 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     connectLabel(this);
     connectForm(this);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
   componentDidLoad() {
+    setComponentLoaded(this);
     if (this.focused && !this.disabled) {
       this.setFocus();
     }

package/dist/components/calcite-radio-group-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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getElementProp, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-radio-group.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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { c as getElementDir } from './dom.js';
 import { c as connectLabel, d as disconnectLabel } from './label2.js';
 import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { u as updateHostInteraction } from './interactive.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
 
 const radioGroupCss = "@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:flex;background-color:var(--calcite-ui-foreground-1);inline-size:-moz-fit-content;inline-size:fit-content;outline:1px solid var(--calcite-ui-border-input);outline-offset:-1px}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([layout=vertical]){flex-direction:column;align-items:flex-start;align-self:flex-start}:host([width=full]){inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content}:host([width=full]) ::slotted(calcite-radio-group-item){flex:1 1 auto}:host([width=full][layout=vertical]) ::slotted(calcite-radio-group-item){justify-content:flex-start}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
@@ -77,6 +78,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   componentWillLoad() {
+    setUpLoadableComponent(this);
     const items = this.getItems();
     const lastChecked = Array.from(items)
       .filter((item) => item.checked)
@@ -90,6 +92,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   componentDidLoad() {
     afterConnectDefaultValueSet(this, this.value);
+    setComponentLoaded(this);
   }
   connectedCallback() {
     connectLabel(this);
@@ -162,6 +165,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   /** 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();
   }
   //--------------------------------------------------------------------------

package/dist/components/calcite-rating.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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';
@@ -9,6 +9,7 @@ import { c as connectLabel, d as disconnectLabel } from './label2.js';
 import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { u as updateHostInteraction } from './interactive.js';
 import { i as isActivationKey } from './key.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$3 } from './chip.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
@@ -84,6 +85,12 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     connectLabel(this);
     connectForm(this);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
@@ -144,6 +151,7 @@ const Rating = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   /** 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 this; }

package/dist/components/calcite-scrim.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.636
  */
 import { S as Scrim, d as defineCustomElement$1 } from './scrim.js';
 

package/dist/components/calcite-select.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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { f as focusElement } from './dom.js';
@@ -9,6 +9,7 @@ import { c as connectLabel, d as disconnectLabel } from './label2.js';
 import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, 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$2 } from './icon.js';
 
 const CSS = {
@@ -106,8 +107,12 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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() {
@@ -120,6 +125,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     focusElement(this.selectEl);
   }
   handleOptionOrGroupChange(event) {

package/dist/components/calcite-shell-center-row.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.636
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { b as getSlotted } from './dom.js';

package/dist/components/calcite-shell-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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, forceUpdate } from '@stencil/core/internal/client/index.js';
 import { c as getElementDir, i as isPrimaryPointerButton, b as getSlotted } from './dom.js';

package/dist/components/calcite-shell.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.636
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { b as getSlotted } from './dom.js';

package/dist/components/calcite-slider.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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';
@@ -12,6 +12,7 @@ import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet
 import { u as updateHostInteraction } from './interactive.js';
 import { i as isActivationKey } from './key.js';
 import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$2 } from './graph.js';
 
 const CSS = {
@@ -184,6 +185,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.removeDragListeners();
   }
   componentWillLoad() {
+    setUpLoadableComponent(this);
     this.tickValues = this.generateTickValues();
     if (!isRange(this.value)) {
       this.value = this.clamp(this.value);
@@ -196,6 +198,9 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.hasHistogram = true;
     }
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     if (this.labelHandles) {
       this.adjustHostObscuredHandleLabel("value");
@@ -471,6 +476,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //--------------------------------------------------------------------------
   /** 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();
   }

package/dist/components/calcite-sortable-list.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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { S as Sortable } from './sortable.esm.js';

package/dist/components/calcite-split-button.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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { u as updateHostInteraction } from './interactive.js';

package/dist/components/calcite-stepper-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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getElementProp, t as toAriaBoolean } from './dom.js';
 import { u as updateHostInteraction } from './interactive.js';
 import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const stepperItemCss = "@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([layout=horizontal][disabled]) .stepper-item-header,:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([scale=s]){--calcite-stepper-item-spacing-unit-s:0.25rem;--calcite-stepper-item-spacing-unit-m:0.75rem;--calcite-stepper-item-spacing-unit-l:1rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-inline-end:0.25rem}:host([scale=s]) .stepper-item-description{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-stepper-item-spacing-unit-s:0.5rem;--calcite-stepper-item-spacing-unit-m:1rem;--calcite-stepper-item-spacing-unit-l:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-inline-end:0.5rem}:host([scale=m]) .stepper-item-description{font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-stepper-item-spacing-unit-s:0.75rem;--calcite-stepper-item-spacing-unit-m:1.25rem;--calcite-stepper-item-spacing-unit-l:1.5rem;font-size:var(--calcite-font-size-1);line-height:1.5rem;margin-inline-end:0.75rem}:host([scale=l]) .stepper-item-description{font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:flex;flex-grow:1;flex-direction:column;align-self:flex-start;margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host .container{position:relative;display:flex;flex-grow:1;cursor:pointer;flex-direction:column;border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-ui-border-3);color:var(--calcite-ui-text-3);text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host{outline-color:transparent}:host(:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:2px}:host .stepper-item-header{display:flex;cursor:pointer;align-items:flex-start}:host .stepper-item-content,:host .stepper-item-header{transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:var(--calcite-stepper-item-spacing-unit-l);padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host .stepper-item-header *{display:inline-flex;align-items:center;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-content{display:none;inline-size:100%;flex-direction:column;font-size:var(--calcite-font-size--2);line-height:1.375}:host .stepper-item-icon{margin-inline-end:var(--calcite-stepper-item-spacing-unit-m);margin-block-start:1px;display:inline-flex;block-size:0.75rem;flex-shrink:0;align-self:flex-start;color:var(--calcite-ui-text-3);opacity:var(--calcite-ui-opacity-disabled);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .stepper-item-header-text{flex-direction:column;text-align:initial;margin-inline-end:auto}:host .stepper-item-heading,:host .stepper-item-description{display:flex;inline-size:100%}:host .stepper-item-heading{margin-block-end:0.25rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2)}:host .stepper-item-description{color:var(--calcite-ui-text-3)}:host .stepper-item-number{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-stepper-item-spacing-unit-m)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([complete]) .container .stepper-item-icon{color:var(--calcite-ui-brand)}:host([error]) .container{border-block-start-color:var(--calcite-ui-danger)}:host([error]) .container .stepper-item-number{color:var(--calcite-ui-danger)}:host([error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-ui-danger)}:host(:hover:not([disabled]):not([selected])) .container,:host(:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-ui-brand)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-heading,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-heading{color:var(--calcite-ui-text-1)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-description,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-description{color:var(--calcite-ui-text-2)}:host([error]:hover:not([disabled]):not([selected])) .container,:host([error]:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-ui-danger-hover)}:host([selected]) .container{border-block-start-color:var(--calcite-ui-brand)}:host([selected]) .container .stepper-item-heading{color:var(--calcite-ui-text-1)}:host([selected]) .container .stepper-item-description{color:var(--calcite-ui-text-2)}:host([selected]) .container .stepper-item-number{color:var(--calcite-ui-brand)}:host([selected]) .container .stepper-item-icon{color:var(--calcite-ui-brand);opacity:1}:host([selected]) .container .stepper-item-content{display:flex}:host([layout=vertical]) .container{margin-inline:0px;margin-block-start:0px;flex:1 1 auto;border-block-start-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);padding-block:0px;border-inline-start-width:2px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]) .container .stepper-item-icon{order:3;margin-block:1px 0px;padding-inline-start:var(--calcite-stepper-item-spacing-unit-s);margin-inline-start:auto}:host([layout=vertical]) .container .stepper-item-header{padding-inline-end:0px}:host([layout=vertical]) .container .stepper-item-content{padding:0px}:host([layout=vertical][complete]) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][complete]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][complete]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-ui-brand)}:host([layout=vertical][error]) .container{border-color:var(--calcite-ui-danger)}:host([layout=vertical][selected]) .container{border-color:var(--calcite-ui-brand)}:host([layout=vertical][selected]) .container .stepper-item-content ::slotted(:last-child){margin-block-end:var(--calcite-stepper-item-spacing-unit-l)}:host([layout=vertical]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical]:focus:not([disabled]):not([selected])) .container{border-color:rgba(0, 122, 194, 0.5)}:host([layout=vertical][error]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][error]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-ui-danger-hover)}:host([layout=horizontal]){display:contents}:host([layout=horizontal]) .container{display:contents}:host([layout=horizontal]) .stepper-item-header{border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-ui-border-3);outline-color:transparent;grid-row:items;margin-inline-end:0.5rem;margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host([layout=horizontal]) .stepper-item-header:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}:host([layout=horizontal]) .stepper-item-content{cursor:auto;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);padding-block:0;padding-inline-end:var(--calcite-stepper-item-spacing-unit-m);text-align:start}:host([layout=horizontal][selected]) .stepper-item-content{grid-area:2/1/2/-1}:host([layout=horizontal][scale=s]) .stepper-item-header{margin-inline-end:0.25rem;margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=l]) .stepper-item-header{margin-inline-end:0.75rem;margin-block-end:var(--calcite-stepper-item-spacing-unit-s)}:host([layout=horizontal][complete]) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][complete]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-ui-brand)}:host([layout=horizontal][error]) .stepper-item-header{border-color:var(--calcite-ui-danger)}:host([layout=horizontal][selected]) .stepper-item-header{border-color:var(--calcite-ui-brand)}:host([layout=horizontal]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:rgba(0, 122, 194, 0.5)}:host([layout=horizontal][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][error]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-ui-danger-hover)}@media (forced-colors: active){:host .container{outline-width:0;outline-offset:0}:host(:focus),:host(:focus-visible){outline-color:canvasText}:host([selected]) .container{border-block-start-color:highlight}:host([selected]) .container .stepper-item-number{color:highlight}:host([selected]) .container .stepper-item-icon{color:highlight}:host([layout=vertical][selected]) .container{border-color:highlight}}";
@@ -150,6 +151,7 @@ const StepperItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   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);
@@ -166,6 +168,9 @@ const StepperItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       useGrouping: false
     };
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this, true);
   }
@@ -196,6 +201,7 @@ const StepperItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //--------------------------------------------------------------------------
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = (this.layout === "vertical" ? this.el : this.headerEl)) === null || _a === void 0 ? void 0 : _a.focus();
   }
   renderIcon() {

package/dist/components/calcite-stepper.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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { f as focusElement } from './dom.js';

package/dist/components/calcite-switch.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.636
  */
 import { S as Switch, d as defineCustomElement$1 } from './switch.js';
 

package/dist/components/calcite-tab-nav.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.636
  */
 import { T as TabNav, d as defineCustomElement$1 } from './tab-nav.js';
 

package/dist/components/calcite-tab-title.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.636
  */
 import { T as TabTitle, d as defineCustomElement$1 } from './tab-title.js';
 

package/dist/components/calcite-tab.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.636
  */
 import { T as Tab, d as defineCustomElement$1 } from './tab.js';
 

package/dist/components/calcite-tabs.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.636
  */
 import { T as Tabs, d as defineCustomElement$1 } from './tabs.js';
 

package/dist/components/calcite-tile-select-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.636
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { u as updateHostInteraction } from './interactive.js';

package/dist/components/calcite-tile-select.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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';
 import { u as updateHostInteraction } from './interactive.js';
+import { c as componentLoaded, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './link.js';
 import { d as defineCustomElement$2 } from './tile.js';
@@ -81,6 +82,7 @@ const TileSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
+    await componentLoaded(this);
     (_a = this.input) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
   //--------------------------------------------------------------------------
@@ -156,6 +158,12 @@ const TileSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   connectedCallback() {
     this.renderInput();
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   disconnectedCallback() {
     this.input.parentNode.removeChild(this.input);
   }

package/dist/components/calcite-tile.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.636
  */
 import { T as Tile, d as defineCustomElement$1 } from './tile.js';
 

package/dist/components/calcite-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.636
  */
 import { T as TimePicker, d as defineCustomElement$1 } from './time-picker.js';
 

package/dist/components/calcite-tip-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.636
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 

package/dist/components/calcite-tip-manager.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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as getElementDir, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-tip.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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { b as getSlotted } from './dom.js';

package/dist/components/calcite-tooltip-manager.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.636
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 

package/dist/components/calcite-tooltip.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.636
  */
 import { T as Tooltip, d as defineCustomElement$1 } from './tooltip.js';
 

package/dist/components/calcite-tree-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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { T as TreeSelectionMode } from './interfaces2.js';

package/dist/components/calcite-tree.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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { f as focusElement, n as nodeListToArray, k as getRootNode } from './dom.js';

package/dist/components/calcite-value-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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { I as ICON_TYPES } from './resources.js';
@@ -10,6 +10,7 @@ import { S as SLOTS$1, C as CSS, d as defineCustomElement$2 } from './pick-list-
 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';
 import { d as defineCustomElement$5 } from './action.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './loader.js';
@@ -92,6 +93,12 @@ const ValueListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
   componentDidRender() {
     updateHostInteraction(this, this.el.closest("calcite-value-list") ? "managed" : false);
   }
@@ -112,6 +119,7 @@ const ValueListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   /** 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) {

package/dist/components/calcite-value-list.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.636
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { S as Sortable } from './sortable.esm.js';
 import { q as getItemIndex, m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, g as getItemData, k as keyDownHandler, t as moveItemIndex, i as initialize, c as initializeObserver, f as handleInitialFilter, e as cleanUpObserver, n as calciteListFocusOutHandler, r as removeItem, j as calciteListItemChangeHandler, l as calciteInternalListItemValueChangeHandler, o as setUpItems, p as setFocus, L as List } from './shared-list-render.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$7 } from './filter.js';
 import { d as defineCustomElement$6 } from './icon.js';
 import { d as defineCustomElement$5 } from './input.js';
@@ -200,7 +201,11 @@ const ValueList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     initialize.call(this);
     initializeObserver.call(this);
   }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
   componentDidLoad() {
+    setComponentLoaded(this);
     this.setUpDragAndDrop();
     handleInitialFilter.call(this);
   }
@@ -286,6 +291,7 @@ const ValueList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @param focusId
    */
   async setFocus(focusId) {
+    await componentLoaded(this);
     return setFocus.call(this, focusId);
   }
   // --------------------------------------------------------------------------