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

package/dist/types/components/color-picker/color-picker.d.ts

@@ -5,7 +5,8 @@ import { Scale } from "../interfaces";
 import { Format } from "./utils";
 import { InteractiveComponent } from "../../utils/interactive";
 import { NumberingSystem } from "../../utils/locale";
-export declare class ColorPicker implements InteractiveComponent {
+import { LoadableComponent } from "../../utils/loadable";
+export declare class ColorPicker implements InteractiveComponent, LoadableComponent {
   el: HTMLCalciteColorPickerElement;
   /**
    * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
@@ -193,6 +194,11 @@ export declare class ColorPicker implements InteractiveComponent {
   channelMode: ColorMode;
   channels: [number, number, number];
   dimensions: {
+    /**
+     * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
+     *
+     * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
+     */
     slider: {
       height: number;
       width: number;
@@ -200,7 +206,11 @@ export declare class ColorPicker implements InteractiveComponent {
     colorField: {
       height: number;
       width: number;
-    };
+    }; /**
+     * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
+     *
+     * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
+     */
     thumb: {
       radius: number;
     };
@@ -238,6 +248,7 @@ export declare class ColorPicker implements InteractiveComponent {
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   componentWillLoad(): void;
+  componentDidLoad(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;
   render(): VNode;

package/dist/types/components/color-picker-hex-input/color-picker-hex-input.d.ts

@@ -2,9 +2,12 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import Color from "color";
 import { Scale } from "../interfaces";
 import { NumberingSystem } from "../../utils/locale";
-export declare class ColorPickerHexInput {
+import { LoadableComponent } from "../../utils/loadable";
+export declare class ColorPickerHexInput implements LoadableComponent {
   el: HTMLCalciteColorPickerHexInputElement;
   connectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   /**
    * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
    *

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

@@ -6,6 +6,7 @@ import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
 import { OpenCloseComponent } from "../../utils/openCloseComponent";
+import { LoadableComponent } from "../../utils/loadable";
 interface ItemData {
   label: string;
   value: string;
@@ -13,7 +14,7 @@ interface ItemData {
 /**
  * @slot - A slot for adding `calcite-combobox-item`s.
  */
-export declare class Combobox implements LabelableComponent, FormComponent, InteractiveComponent, OpenCloseComponent, FloatingUIComponent {
+export declare class Combobox implements LabelableComponent, FormComponent, InteractiveComponent, OpenCloseComponent, FloatingUIComponent, LoadableComponent {
   el: HTMLCalciteComboboxElement;
   /**
    * When `true`, displays and positions the component.

package/dist/types/components/dropdown-item/dropdown-item.d.ts

@@ -2,10 +2,11 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ItemKeyboardEvent } from "../dropdown/interfaces";
 import { FlipContext } from "../interfaces";
 import { RequestedItem } from "../dropdown-group/interfaces";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding text.
  */
-export declare class DropdownItem {
+export declare class DropdownItem implements LoadableComponent {
   el: HTMLCalciteDropdownItemElement;
   /**
    * Indicates whether the item is active.
@@ -42,6 +43,7 @@ export declare class DropdownItem {
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   componentWillLoad(): void;
+  componentDidLoad(): void;
   connectedCallback(): void;
   render(): VNode;
   onClick(): void;

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

@@ -2,7 +2,8 @@ import { VNode } from "../../stencil-public-runtime";
 import { Appearance, Scale } from "../interfaces";
 import { ButtonColor } from "../button/interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
-export declare class Fab implements InteractiveComponent {
+import { LoadableComponent } from "../../utils/loadable";
+export declare class Fab implements InteractiveComponent, LoadableComponent {
   /**
    * Used to set the button's appearance. Default is outline.
    */
@@ -43,6 +44,8 @@ export declare class Fab implements InteractiveComponent {
   textEnabled: boolean;
   el: HTMLCalciteFabElement;
   private buttonEl;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   componentDidRender(): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;

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

@@ -1,7 +1,8 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
-export declare class Filter implements InteractiveComponent {
+import { LoadableComponent } from "../../utils/loadable";
+export declare class Filter implements InteractiveComponent, LoadableComponent {
   /**
    * The items to filter through. The filter uses this as the starting point, and returns items
    * that contain the string entered in the input, using a partial match and recursive search.
@@ -41,12 +42,13 @@ export declare class Filter implements InteractiveComponent {
   valueHandler(value: string): void;
   el: HTMLCalciteFilterElement;
   textInput: HTMLCalciteInputElement;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   componentDidRender(): void;
   /**
    * This event fires when the filter text changes.
    */
   calciteFilterChange: EventEmitter<void>;
-  componentWillLoad(): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   private filter;

package/dist/types/components/flow-item/flow-item.d.ts

@@ -2,6 +2,7 @@ import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { HeadingLevel } from "../functional/Heading";
 import { Scale } from "../interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding custom content.
  * @slot header-actions-start - A slot for adding actions or content to the start side of the header.
@@ -12,7 +13,7 @@ import { InteractiveComponent } from "../../utils/interactive";
  * @slot footer-actions - A slot for adding buttons to the footer.
  * @slot footer - A slot for adding custom content to the footer.
  */
-export declare class FlowItem implements InteractiveComponent {
+export declare class FlowItem implements InteractiveComponent, LoadableComponent {
   /** When true, displays a close button in the trailing side of the header */
   closable: boolean;
   /** When true, flow-item will be hidden */
@@ -67,7 +68,9 @@ export declare class FlowItem implements InteractiveComponent {
    * Specifies the width of the component.
    */
   widthScale?: Scale;
+  componentWillLoad(): void;
   componentDidRender(): void;
+  componentDidLoad(): void;
   /**
    * Fires when the back button is clicked.
    */

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

@@ -1,6 +1,7 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { DeprecatedEventPayload } from "../interfaces";
-export declare class Handle {
+import { LoadableComponent } from "../../utils/loadable";
+export declare class Handle implements LoadableComponent {
   /**
    * @internal
    */
@@ -9,6 +10,8 @@ export declare class Handle {
    * Value for the button title attribute
    */
   textTitle: string;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   el: HTMLCalciteHandleElement;
   handleButton: HTMLElement;
   /**

package/dist/types/components/inline-editable/inline-editable.d.ts

@@ -2,10 +2,11 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding a `calcite-input`.
  */
-export declare class InlineEditable implements InteractiveComponent, LabelableComponent {
+export declare class InlineEditable implements InteractiveComponent, LabelableComponent, LoadableComponent {
   el: HTMLCalciteInlineEditableElement;
   /** specify whether editing can be enabled */
   disabled: boolean;
@@ -40,6 +41,8 @@ export declare class InlineEditable implements InteractiveComponent, LabelableCo
   /** when controls, specify a callback to be executed prior to disabling editing. when provided, loading state will be handled automatically. */
   afterConfirm?: () => Promise<void>;
   connectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;
   render(): VNode;

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

@@ -6,11 +6,12 @@ import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { NumberingSystem, LocalizedComponent } from "../../utils/locale";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 declare type NumberNudgeDirection = "up" | "down";
 /**
  * @slot action - A slot for positioning a `calcite-button` next to the component.
  */
-export declare class Input implements LabelableComponent, FormComponent, InteractiveComponent, LocalizedComponent {
+export declare class Input implements LabelableComponent, FormComponent, InteractiveComponent, LocalizedComponent, LoadableComponent {
   el: HTMLCalciteInputElement;
   /** Specifies the text alignment of the component's value. */
   alignment: Position;
@@ -191,6 +192,7 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): void;
+  componentDidLoad(): void;
   componentShouldUpdate(newValue: string, oldValue: string, property: string): boolean;
   componentDidRender(): void;
   /**

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

@@ -7,7 +7,8 @@ import { DateRangeChange } from "../date-picker/interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
 import { OpenCloseComponent } from "../../utils/openCloseComponent";
 import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
-export declare class InputDatePicker implements LabelableComponent, FormComponent, InteractiveComponent, OpenCloseComponent, FloatingUIComponent, LocalizedComponent {
+import { LoadableComponent } from "../../utils/loadable";
+export declare class InputDatePicker implements LabelableComponent, FormComponent, InteractiveComponent, OpenCloseComponent, FloatingUIComponent, LocalizedComponent, LoadableComponent {
   el: HTMLCalciteInputDatePickerElement;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.

package/dist/types/components/input-number/input-number.d.ts

@@ -5,11 +5,12 @@ import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { NumberingSystem, LocalizedComponent } from "../../utils/locale";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 declare type NumberNudgeDirection = "up" | "down";
 /**
  * @slot action - A slot for positioning a button next to the component.
  */
-export declare class InputNumber implements LabelableComponent, FormComponent, InteractiveComponent, LocalizedComponent {
+export declare class InputNumber implements LabelableComponent, FormComponent, InteractiveComponent, LocalizedComponent, LoadableComponent {
   el: HTMLCalciteInputNumberElement;
   /** Specifies the text alignment of the component's value. */
   alignment: Position;
@@ -170,6 +171,7 @@ export declare class InputNumber implements LabelableComponent, FormComponent, I
   effectiveLocale: string;
   localizedValue: string;
   connectedCallback(): void;
+  componentDidLoad(): void;
   disconnectedCallback(): void;
   componentWillLoad(): void;
   componentShouldUpdate(newValue: string, oldValue: string, property: string): boolean;

package/dist/types/components/input-text/input-text.d.ts

@@ -4,10 +4,11 @@ import { Position } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot action - A slot for positioning a button next to the component.
  */
-export declare class InputText implements LabelableComponent, FormComponent, InteractiveComponent {
+export declare class InputText implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent {
   el: HTMLCalciteInputTextElement;
   /** Specifies the text alignment of the component's value. */
   alignment: Position;
@@ -119,6 +120,7 @@ export declare class InputText implements LabelableComponent, FormComponent, Int
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): void;
+  componentDidLoad(): void;
   componentDidRender(): void;
   /**
    * @internal

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

@@ -5,7 +5,8 @@ import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
 import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
-export declare class InputTimePicker implements LabelableComponent, FormComponent, InteractiveComponent, FloatingUIComponent, LocalizedComponent {
+import { LoadableComponent } from "../../utils/loadable";
+export declare class InputTimePicker implements LabelableComponent, FormComponent, InteractiveComponent, FloatingUIComponent, LocalizedComponent, LoadableComponent {
   el: HTMLCalciteInputTimePickerElement;
   /**
    * When `true`, the component is active.
@@ -134,6 +135,7 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   private setInputValue;
   private setValue;
   connectedCallback(): void;
+  componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;

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

@@ -1,11 +1,12 @@
 import { VNode } from "../../stencil-public-runtime";
 import { FlipContext } from "../interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 /** Any attributes placed on <calcite-link> component will propagate to the rendered child */
 /** Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any link attributes for form submission */
 /** @slot - A slot for adding text. */
-export declare class Link implements InteractiveComponent {
+export declare class Link implements InteractiveComponent, LoadableComponent {
   el: HTMLCalciteLinkElement;
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
@@ -27,6 +28,8 @@ export declare class Link implements InteractiveComponent {
   rel?: string;
   /** Specifies the frame or window to open the linked document. */
   target?: string;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   componentDidRender(): void;
   render(): VNode;
   clickHandler(event: PointerEvent): void;

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

@@ -1,12 +1,13 @@
 import { VNode } from "../../stencil-public-runtime";
 import { HeadingLevel } from "../functional/Heading";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
  *
  * @slot - A slot for adding `calcite-list-item` elements.
  */
-export declare class List implements InteractiveComponent {
+export declare class List implements InteractiveComponent, LoadableComponent {
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
@@ -15,6 +16,8 @@ export declare class List implements InteractiveComponent {
    * Specifies the number at which section headings should start.
    */
   headingLevel: HeadingLevel;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   componentDidRender(): void;
   el: HTMLCalciteListElement;
   /** Sets focus on the component. */

package/dist/types/components/list-item/list-item.d.ts

@@ -1,6 +1,7 @@
 import { VNode } from "../../stencil-public-runtime";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
  * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the component.
@@ -8,7 +9,7 @@ import { InteractiveComponent } from "../../utils/interactive";
  * @slot content-end - A slot for adding non-actionable elements after the label and description of the component.
  * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component.
  */
-export declare class ListItem implements ConditionalSlotComponent, InteractiveComponent {
+export declare class ListItem implements ConditionalSlotComponent, InteractiveComponent, LoadableComponent {
   /**
    * When `true`, prevents the content of the component from user interaction.
    */
@@ -27,6 +28,8 @@ export declare class ListItem implements ConditionalSlotComponent, InteractiveCo
   label: string;
   el: HTMLCalciteListItemElement;
   focusEl: HTMLButtonElement;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   componentDidRender(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;

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

@@ -4,6 +4,7 @@ import { ModalBackgroundColor } from "./interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { OpenCloseComponent } from "../../utils/openCloseComponent";
 import { FocusTrapComponent, FocusTrap } from "../../utils/focusTrapComponent";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot header - A slot for adding header text.
  * @slot content - A slot for adding the component's content.
@@ -11,7 +12,7 @@ import { FocusTrapComponent, FocusTrap } from "../../utils/focusTrapComponent";
  * @slot secondary - A slot for adding a secondary button.
  * @slot back - A slot for adding a back button.
  */
-export declare class Modal implements ConditionalSlotComponent, OpenCloseComponent, FocusTrapComponent {
+export declare class Modal implements ConditionalSlotComponent, OpenCloseComponent, FocusTrapComponent, LoadableComponent {
   el: HTMLCalciteModalElement;
   /**
    * When `true`, the component is active.
@@ -53,6 +54,7 @@ export declare class Modal implements ConditionalSlotComponent, OpenCloseCompone
    */
   noPadding: boolean;
   componentWillLoad(): void;
+  componentDidLoad(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
   render(): VNode;

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

@@ -2,6 +2,7 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale, Width } from "../interfaces";
 import { StatusColor } from "../alert/interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
  * notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
@@ -14,7 +15,7 @@ import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
  * @slot link - A slot for adding actions to take, such as: undo, try again, link to page, etc.
  * @slot actions-end - A slot for adding actions to the end of the component. It is recommended to use two or less actions.
  */
-export declare class Notice implements ConditionalSlotComponent {
+export declare class Notice implements ConditionalSlotComponent, LoadableComponent {
   el: HTMLCalciteNoticeElement;
   /**
    * When `true`, the component is active.
@@ -56,6 +57,7 @@ export declare class Notice implements ConditionalSlotComponent {
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): void;
+  componentDidLoad(): void;
   render(): VNode;
   /** Fired when the component is closed. */
   calciteNoticeClose: EventEmitter<void>;

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

@@ -2,6 +2,7 @@ import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { HeadingLevel } from "../functional/Heading";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding custom content.
  * @slot header-actions-start - A slot for adding actions or content to the start side of the header.
@@ -12,7 +13,7 @@ import { InteractiveComponent } from "../../utils/interactive";
  * @slot footer-actions - A slot for adding buttons to the footer.
  * @slot footer - A slot for adding custom content to the footer.
  */
-export declare class Panel implements InteractiveComponent {
+export declare class Panel implements InteractiveComponent, LoadableComponent {
   /**
    * When `true`, hides the component.
    *
@@ -95,6 +96,8 @@ export declare class Panel implements InteractiveComponent {
    * When `true`, the action menu items in the `header-menu-actions` slot are open.
    */
   menuOpen: boolean;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   componentDidRender(): void;
   el: HTMLCalcitePanelElement;
   backButtonEl: HTMLCalciteActionElement;

package/dist/types/components/pick-list/pick-list.d.ts

@@ -3,11 +3,12 @@ import { ICON_TYPES } from "./resources";
 import { ListFocusId, ItemData } from "./shared-list-logic";
 import { HeadingLevel } from "../functional/Heading";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding `calcite-pick-list-item` or `calcite-pick-list-group` elements. Items are displayed as a vertical list.
  * @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.
  */
-export declare class PickList<ItemElement extends HTMLCalcitePickListItemElement = HTMLCalcitePickListItemElement> implements InteractiveComponent {
+export declare class PickList<ItemElement extends HTMLCalcitePickListItemElement = HTMLCalcitePickListItemElement> implements InteractiveComponent, LoadableComponent {
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
@@ -66,6 +67,7 @@ export declare class PickList<ItemElement extends HTMLCalcitePickListItemElement
   filterEl: HTMLCalciteFilterElement;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentWillLoad(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
   /**

package/dist/types/components/pick-list-item/pick-list-item.d.ts

@@ -2,11 +2,12 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ICON_TYPES } from "../pick-list/resources";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component.
  * @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component.
  */
-export declare class PickListItem implements ConditionalSlotComponent, InteractiveComponent {
+export declare class PickListItem implements ConditionalSlotComponent, InteractiveComponent, LoadableComponent {
   /**
    * A description for the component that displays below the label text.
    */
@@ -64,6 +65,8 @@ export declare class PickListItem implements ConditionalSlotComponent, Interacti
   private focusEl;
   shiftPressed: boolean;
   connectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;
   /**

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

@@ -4,10 +4,11 @@ import { FocusTrapComponent, FocusTrap } from "../../utils/focusTrapComponent";
 import { OpenCloseComponent } from "../../utils/openCloseComponent";
 import { HeadingLevel } from "../functional/Heading";
 import { Scale } from "../interfaces";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding custom content.
  */
-export declare class Popover implements FloatingUIComponent, OpenCloseComponent, FocusTrapComponent {
+export declare class Popover implements FloatingUIComponent, OpenCloseComponent, FocusTrapComponent, LoadableComponent {
   /**
    * When `true`, clicking outside of the component automatically closes open `calcite-popover`s.
    */
@@ -120,6 +121,7 @@ export declare class Popover implements FloatingUIComponent, OpenCloseComponent,
   focusTrap: FocusTrap;
   focusTrapEl: HTMLDivElement;
   connectedCallback(): void;
+  componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   /** Fires when the component is requested to be closed and before the closing transition begins. */

package/dist/types/components/radio-button/radio-button.d.ts

@@ -3,7 +3,8 @@ import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { CheckableFormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
-export declare class RadioButton implements LabelableComponent, CheckableFormComponent, InteractiveComponent {
+import { LoadableComponent } from "../../utils/loadable";
+export declare class RadioButton implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent {
   el: HTMLCalciteRadioButtonElement;
   /** When `true`, the component is checked. */
   checked: boolean;
@@ -94,6 +95,7 @@ export declare class RadioButton implements LabelableComponent, CheckableFormCom
   private onContainerBlur;
   private onContainerFocus;
   connectedCallback(): void;
+  componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;

package/dist/types/components/radio-group/radio-group.d.ts

@@ -4,10 +4,11 @@ import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { RadioAppearance } from "./interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding `calcite-radio-group-item`s.
  */
-export declare class RadioGroup implements LabelableComponent, FormComponent, InteractiveComponent {
+export declare class RadioGroup implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent {
   el: HTMLCalciteRadioGroupElement;
   /** Specifies the appearance style of the component. */
   appearance: RadioAppearance;

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

@@ -3,7 +3,8 @@ import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
-export declare class Rating implements LabelableComponent, FormComponent, InteractiveComponent {
+import { LoadableComponent } from "../../utils/loadable";
+export declare class Rating implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent {
   el: HTMLCalciteRatingElement;
   /** Specifies the size of the component. */
   scale: Scale;
@@ -40,6 +41,8 @@ export declare class Rating implements LabelableComponent, FormComponent, Intera
    */
   required: boolean;
   connectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;
   /**

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

@@ -3,10 +3,11 @@ import { Scale, Width } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
+import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding `calcite-option`s.
  */
-export declare class Select implements LabelableComponent, FormComponent, InteractiveComponent {
+export declare class Select implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent {
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
@@ -53,6 +54,7 @@ export declare class Select implements LabelableComponent, FormComponent, Intera
   private selectEl;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentWillLoad(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
   /** Sets focus on the component. */

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

@@ -5,7 +5,8 @@ import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
 import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
-export declare class Slider implements LabelableComponent, FormComponent, InteractiveComponent, LocalizedComponent {
+import { LoadableComponent } from "../../utils/loadable";
+export declare class Slider implements LabelableComponent, FormComponent, InteractiveComponent, LocalizedComponent, LoadableComponent {
   el: HTMLCalciteSliderElement;
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
@@ -79,6 +80,7 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): void;
+  componentDidLoad(): void;
   componentDidRender(): void;
   render(): VNode;
   private renderGraph;