@arcgis/lumina 4.33.0-next.13 → 4.33.0-next.132

package/dist/index.js

@@ -1,143 +1,258 @@
-import {
-  attachToAncestor,
-  makeDefineCustomElements,
-  noShadowRoot
-} from "./chunk-NO7HOBNA.js";
-import "./chunk-PGHUBTOM.js";
-
-// src/context.ts
-import { retrieveComponent } from "@arcgis/components-controllers";
-import { ContextConsumer, ContextProvider } from "@lit/context";
-function useContextProvider(options) {
+import { ContextProvider, ContextConsumer } from "@lit/context";
+import { r as retrieveComponent, G as GenericController, k as keyTrackResolve, s as setAmbientComponent, c as controllerSymbol, a as shouldBypassReadOnly } from "./Controller-BQOv8BAL.js";
+import { b } from "./Controller-BQOv8BAL.js";
+import { state } from "@lit/reactive-element/decorators/state.js";
+import { property as property$1 } from "@lit/reactive-element/decorators/property.js";
+import { e as emptyFunction, n as noShadowRoot, a as attachToAncestor } from "./lazyLoad-ByH-FaBP.js";
+import { d, m } from "./lazyLoad-ByH-FaBP.js";
+import { isEsriInternalEnv, safeCall, devToolsAwareTimeout, Deferred, camelToKebab, safeAsyncCall } from "@arcgis/components-utils";
+import { nothing as nothing$1, LitElement as LitElement$1, isServer, notEqual, noChange as noChange$1 } from "lit";
+import { propertyFlagAttribute, propertyFlagNoAccessor, propertyFlagReadOnly, propertyFlagState, propertyFlagBoolean, propertyFlagNumber, propertyFlagReflect } from "./config.js";
+import { classMap } from "lit-html/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { directive as directive$1, Directive } from "lit-html/directive.js";
+import { live as live$1 } from "lit-html/directives/live.js";
+import { nothing as nothing$2, noChange as noChange$2, render } from "lit-html";
+const useContextProvider = (options) => {
   const component = retrieveComponent();
   const controller = new ContextProvider(component.el, options);
   component.addController(controller);
   return controller;
-}
-function useContextConsumer(options) {
+};
+const useContextConsumer = (options) => {
   const component = retrieveComponent();
   const controller = new ContextConsumer(component.el, options);
   component.addController(controller);
   return controller;
-}
-
-// src/createEvent.ts
-import { retrieveComponent as retrieveComponent2, keyTrackResolve, trackKey } from "@arcgis/components-controllers";
-import { isEsriInternalEnv } from "@arcgis/components-utils";
-var createEventFactory = (eventName = "", options = {}, component = retrieveComponent2()) => {
-  const emitter = {
-    emit: (payload) => {
-      if (process.env.NODE_ENV !== "production" && isEsriInternalEnv() && !component.el.isConnected) {
-        console.warn(
-          `Trying to emit an ${eventName} event on a disconnected element ${component.el.tagName.toLowerCase()}`
-        );
-      }
-      if (eventName === "") {
+};
+const property = property$1;
+const method = void 0;
+class ControllerManager extends GenericController {
+  constructor(component) {
+    super(component);
+    this.destroyed = false;
+    this.R = false;
+    this.V = nothing$1;
+    this.T = [];
+    this.#exportsStore = /* @__PURE__ */ new WeakMap();
+    this.#component = component;
+    this.exports = void 0;
+    this.hasDestroy = autoDestroyDisabledPropName in component && typeof component.destroy === "function";
+    LitElement$1.prototype.addController.call(component, {
+      // Lit will call these callbacks
+      // We do not directly implement hostConnected and etc on ControllerManager
+      // because ControllerManager is also included in the list of controllers
+      // we manage - and for each controller we manage we call hostConnected
+      // (from inside of .triggerConnected). So there would be an infinite
+      // loop if Lit calls hostConnected which in turn calls
+      // triggerConnected which calls hostConnected again.
+      hostConnected: () => {
+        if (this.destroyed) {
+          const tagName = component.el.localName;
+          component.el.remove();
+          throw new Error(
+            `The ${tagName} component has already been destroyed. It cannot be used again. If you meant to disconnect and reconnect a component without automatic destroy, set the ${autoDestroyDisabledPropName} prop.`
+          );
+        }
+        if (this.#autoDestroyTimeout !== void 0) {
+          clearTimeout(this.#autoDestroyTimeout);
+        }
         keyTrackResolve();
-        if (process.env.NODE_ENV !== "production" && isEsriInternalEnv() && eventName === "") {
-          throw new Error("Unable to resolve event name from property name");
+        for (const controller of component.M) {
+          if ("triggerConnected" in controller) {
+            controller.triggerConnected();
+          } else {
+            safeCall(controller.hostConnected, controller);
+          }
         }
-      }
-      const event = new CustomEvent(eventName, {
-        detail: payload,
-        cancelable: true,
-        bubbles: true,
-        composed: true,
-        ...options
-      });
-      component.el.dispatchEvent(event);
-      return event;
-    }
-  };
-  if (eventName === "") {
-    trackKey(
-      void 0,
-      (resolution) => {
-        if (process.env.NODE_ENV !== "production" && isEsriInternalEnv() && resolution === void 0) {
-          throw new Error(`createEvent must be called in property default value only`);
+      },
+      hostDisconnected: () => {
+        for (const controller of component.M) {
+          if ("triggerDisconnected" in controller) {
+            controller.triggerDisconnected();
+          } else {
+            safeCall(controller.hostDisconnected, controller);
+          }
+        }
+        if (this.hasDestroy && !this.destroyed) {
+          this.U();
         }
-        eventName = resolution.key;
       },
-      emitter
-    );
+      hostUpdate: () => {
+        for (const controller of component.M) {
+          if ("triggerUpdate" in controller) {
+            controller.triggerUpdate(this.Q);
+          } else {
+            safeCall(controller.hostUpdate, controller, this.Q);
+          }
+        }
+      },
+      hostUpdated: () => {
+        for (const controller of component.M) {
+          if ("triggerUpdated" in controller) {
+            controller.triggerUpdated(this.Q);
+          } else {
+            safeCall(controller.hostUpdated, controller, this.Q);
+          }
+        }
+        this.Q = void 0;
+      }
+    });
+    queueMicrotask(() => this.R = true);
+    setAmbientComponent(component);
   }
-  return emitter;
-};
-var createEvent = createEventFactory.bind(null, "");
-
-// src/decorators.ts
-import { state } from "@lit/reactive-element/decorators/state.js";
-import { property as litProperty } from "@lit/reactive-element/decorators/property.js";
-var property = litProperty;
-var method = void 0;
+  #autoDestroyTimeout;
+  #component;
+  // Keep this method async needlessly for now to avoid a breaking change if we
+  // would need to make it async in the future
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async destroy() {
+    if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+      this.devOnly$ensureHasDestroy?.();
+    }
+    if (this.destroyed) {
+      return;
+    }
+    if (this.#component.el.isConnected) {
+      this.hasDestroy = false;
+      this.#component.el.remove();
+    }
+    this.#autoDestroyTimeout = void 0;
+    this.destroyed = true;
+    for (const controller of this.#component.M) {
+      if ("triggerDestroy" in controller) {
+        controller.triggerDestroy();
+      } else {
+        safeCall(controller.hostDestroy, controller);
+      }
+    }
+    this.#component.M.splice(0);
+  }
+  /** @private */
+  U() {
+    if (this.#autoDestroyTimeout !== void 0) {
+      clearTimeout(this.#autoDestroyTimeout);
+    }
+    if (!this.#component.el.isConnected && !this.#component.autoDestroyDisabled) {
+      const destroy = () => void this.#component.destroy();
+      if (process.env.NODE_ENV !== "production" && isEsriInternalEnv() && autoDestroyOnDisconnectTimeout === 0) ;
+      else {
+        this.#autoDestroyTimeout = devToolsAwareTimeout(destroy, autoDestroyOnDisconnectTimeout);
+      }
+    }
+  }
+  /** @private */
+  S(key, value) {
+    const trackers = this.T;
+    this.V = nothing$1;
+    this.T = [];
+    trackers.forEach((tracker) => tracker(key, value));
+  }
+  #exportsStore;
+  /**
+   * Associate an exports object with a controller for reverse lookup in
+   * controller.use
+   *
+   * @private
+   */
+  W(controller, exports) {
+    if (typeof exports === "object" && exports !== null || typeof exports === "function") {
+      this.#exportsStore.set(exports, controller);
+    }
+  }
+  /** @private */
+  X(exports) {
+    if (typeof exports === "object" && exports !== null || typeof exports === "function") {
+      return this.#exportsStore.get(exports);
+    } else {
+      return void 0;
+    }
+  }
+}
+if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+  ControllerManager.prototype.devOnly$ensureHasDestroy = function ensureHasDestroy() {
+    if (!this.hasDestroy) {
+      throw new Error(
+        `
+          If the component uses a controller that uses destroy() method, then the
+          component must have the following properties:
+          /**
+           * If true, the component will not be destroyed automatically when it is
+           * disconnected from the document. This is useful when you want to move the
+           * component to a different place on the page, or temporarily hide it. If this
+           * is set, make sure to call the \`destroy\` method when you are done to prevent
+           * memory leaks.
+           */
+          @property() ${autoDestroyDisabledPropName} = false;
 
-// src/LitElement.ts
-import { Deferred, camelToKebab, isEsriInternalEnv as isEsriInternalEnv2 } from "@arcgis/components-utils";
-import { LitElement as OriginalLitElement, isServer } from "lit";
-import { useControllerManager } from "@arcgis/components-controllers";
-var emptyFunction = () => void 0;
-var LitElement = class _LitElement extends OriginalLitElement {
+          /** Permanently destroy the component */
+          @method()
+          async destroy(): Promise<void> {
+            await this.manager.destroy();
+          }
+          `.trim().split("\n").map((line) => line.trim()).join("\n")
+      );
+    }
+  };
+}
+let autoDestroyOnDisconnectTimeout = 1e3;
+const autoDestroyDisabledPropName = "autoDestroyDisabled";
+process.env.NODE_ENV !== "production" && isEsriInternalEnv() ? {} : void 0;
+class LitElement extends LitElement$1 {
   constructor() {
     super();
-    /**
-     * In lazy build, the actual DOM element differs from the class instance:
-     * - "this.el" is a proxy custom element - it's physically present in the DOM
-     *   even before the Lit component is loaded.
-     * - "this" is the actual Lit component - in case of Lazy builds, it's
-     *   never directly attached to the DOM. Instead, all interactions with the
-     *   proxy are forwarded to the actual Lit component. And, when Lit wants to
-     *   render, it renders into the shadow root of the proxy.
-     *
-     * "this.el" should be used instead of "this" for all things involving the
-     * DOM (addEventListener, querySelector, children, setAttribute,
-     * MutationObserver, etc...)
-     *
-     * @example
-     * ```ts
-     * // Generally, you shouldn't have to write logic specific to lazy or non-lazy
-     * // build, but if you have to, you can detect if you are in a lazy build like so:
-     * const isLazy = this.el !== this;
-     * ```
-     */
-    this.el = this.constructor.lazy ?? this;
-    /**
-     * Controller Manager orchestrates all controllers used by this component,
-     * connecting their lifecycle hooks and providing context information.
-     */
-    this.manager = useControllerManager(this);
-    /** @internal */
-    this._postLoad = this.constructor.lazy?._postLoad ?? new Deferred();
-    /**
-     * Direct offspring that should be awaited before loaded() is emitted.
-     *
-     * `attachToAncestor()` will add elements to this array
-     *
-     * @internal
-     */
-    this._offspring = this.constructor.lazy?._offspring ?? [];
-    this._postLoaded = this.constructor.lazy?._postLoaded ?? new Deferred();
-    this._enableUpdating = this.enableUpdating;
-    this.enableUpdating = emptyFunction;
-    const ourShouldUpdate = _LitElement.prototype.shouldUpdate;
-    if (this.shouldUpdate !== ourShouldUpdate) {
-      this._originalShouldUpdate = this.shouldUpdate;
-      this.shouldUpdate = ourShouldUpdate;
+    this.M = [];
+    this.manager = new ControllerManager(this);
+    const that = this;
+    const constructor = that.constructor;
+    const lazy = constructor.N;
+    const createObservable = constructor.K.o;
+    const ourShouldUpdate = LitElement.prototype.shouldUpdate;
+    that.#postLoadedDeferred = lazy?.H ?? new Deferred();
+    that.I = lazy?.I ?? new Deferred();
+    that.J = lazy?.J ?? [];
+    that["_offspring"] = that.J;
+    that["_postLoad"] = that.I;
+    that.el = lazy ?? that;
+    that.#enableUpdating = that.enableUpdating;
+    that.enableUpdating = emptyFunction;
+    if (that.shouldUpdate !== ourShouldUpdate) {
+      that.#originalShouldUpdate = that.shouldUpdate;
+      that.shouldUpdate = ourShouldUpdate;
     }
     if (process.env.NODE_ENV !== "production") {
-      const isOwnComponent = globalThis.devOnly$ownTagNames?.has(
-        this.el.tagName.toLowerCase()
-      );
-      const constructor = this.constructor;
-      const warningsWereCustomized = constructor.enabledWarnings !== OriginalLitElement.enabledWarnings;
+      const isOwnComponent = globalThis.devOnly$ownTagNames?.has(that.el.localName);
+      const constructor2 = this.constructor;
+      const warningsWereCustomized = constructor2.enabledWarnings !== LitElement$1.enabledWarnings;
       if (!isOwnComponent && !warningsWereCustomized) {
-        constructor.disableWarning?.("change-in-update");
+        constructor2.disableWarning?.("change-in-update");
       }
-      if (isEsriInternalEnv2()) {
+      if (isEsriInternalEnv()) {
         globalThis.devOnly$luminaComponentRefCallback?.(this);
+        const stencilToLitMapping = {
+          componentDidLoad: "loaded",
+          componentDidRender: "updated",
+          componentDidUpdate: "updated",
+          componentShouldUpdate: "shouldUpdate",
+          componentWillLoad: "load",
+          componentWillRender: "willUpdate",
+          componentWillUpdate: "willUpdate"
+        };
+        Object.entries(stencilToLitMapping).forEach(([stencilMethod, litMethod]) => {
+          if (stencilMethod in this) {
+            throw new Error(
+              `Unexpected ${stencilMethod}() in a Lit component ${this.el.localName}. In Lit, you should use ${litMethod}() instead`
+            );
+          }
+        });
       }
     }
+    if (createObservable) {
+      that.#observables = /* @__PURE__ */ new Map();
+      constructor.elementProperties.forEach((_, name) => that.#observables.set(name, createObservable()));
+    }
     if (isServer) {
-      this.el.setAttribute(this.constructor.runtime.hydratedAttribute, "");
+      that.el.setAttribute(constructor.K.hydratedAttribute, "");
     }
   }
   /**
@@ -149,12 +264,13 @@ var LitElement = class _LitElement extends OriginalLitElement {
     }
     const finalizedStyles = super.finalizeStyles(styles);
     const useLightDom = this.shadowRootOptions === noShadowRoot;
-    return this.runtime?.commonStyles === void 0 || useLightDom ? finalizedStyles : [this.runtime.commonStyles, ...finalizedStyles];
+    return this.K?.commonStyles === void 0 || useLightDom ? finalizedStyles : [this.K.commonStyles, ...finalizedStyles];
   }
   static createProperty(name, options) {
     const flags = typeof options === "number" ? options : Array.isArray(options) ? options[0] : 0;
     const rest = Array.isArray(options) ? options[1] : void 0;
-    super.createProperty(name, {
+    const hasChanged = rest?.hasChanged ?? notEqual;
+    const normalizedOptions = {
       /**
        * By default to infer attribute name from property name, Lit just
        * converts property name to lowercase. That is consistent with
@@ -171,42 +287,105 @@ var LitElement = class _LitElement extends OriginalLitElement {
        *
        * Thus, overwriting Lit's default behavior to use kebab-case:
        */
-      attribute: !!(flags & 1 /* ATTRIBUTE */) && typeof name === "string" ? camelToKebab(name) : false,
-      reflect: !!(flags & 2 /* REFLECT */),
-      type: flags & 4 /* BOOLEAN */ ? Boolean : flags & 8 /* NUMBER */ ? Number : void 0,
+      attribute: !!(flags & propertyFlagAttribute) && typeof name === "string" ? camelToKebab(name) : false,
+      reflect: !!(flags & propertyFlagReflect),
+      type: flags & propertyFlagBoolean ? Boolean : flags & propertyFlagNumber ? Number : void 0,
       /**
        * At the moment in Lit, state:true just means attribute:false, so this
        * line is technically redundant, but let's keep it here just in case Lit
        * will add more meaning to state:true in the future.
        */
-      state: !!(flags & 16 /* STATE */),
+      state: !!(flags & propertyFlagState),
       // Controllers add this option to Lit
-      readOnly: !!(flags & 32 /* READ_ONLY */),
-      noAccessor: !!(flags & 64 /* NO_ACCESSOR */),
-      ...rest
-    });
+      readOnly: !!(flags & propertyFlagReadOnly),
+      noAccessor: !!(flags & propertyFlagNoAccessor),
+      c: false,
+      ...rest,
+      hasChanged(newValue, oldValue) {
+        const changed = hasChanged(newValue, oldValue);
+        normalizedOptions.c = changed;
+        return changed;
+      }
+    };
+    super.createProperty(name, normalizedOptions);
+  }
+  static getPropertyDescriptor(name, key, options) {
+    const runtime = this.K;
+    const accessor = super.getPropertyDescriptor(name, key, options);
+    options.d = accessor;
+    return {
+      ...accessor,
+      get() {
+        runtime.t?.(this.#observables.get(name));
+        return accessor.get?.call(this);
+      },
+      set(rawNewValue) {
+        const manager = this.manager;
+        if (options.readOnly && !shouldBypassReadOnly && (manager.R || manager.connectedCalled)) {
+          throw Error(
+            `Cannot assign to read-only property "${name}" of ${this.el.localName}. Trying to assign "${rawNewValue}"`
+          );
+        }
+        accessor.set.call(this, rawNewValue ?? void 0);
+        if (options.c) {
+          this.#observables?.get(name)?.notify();
+        }
+        if (manager.T.length > 0) {
+          manager?.S(name, rawNewValue);
+        }
+      }
+    };
   }
   static {
     this.lumina = true;
   }
+  /**
+   * The JS API's Accessor observables. This is used to integrate with the JS
+   * API's reactivity system.
+   *
+   * @private
+   */
+  #observables;
+  #originalShouldUpdate;
+  #enableUpdating;
+  #postLoadedDeferred;
+  #trackingTarget;
   connectedCallback() {
     if (this.el.hasAttribute("defer-hydration")) {
       return;
     }
+    const trackingTarget = this.manager.A?.(() => this.requestUpdate());
+    this.#trackingTarget = trackingTarget;
     const isFirstCall = !this.manager.connectedCalled;
     super.connectedCallback();
     if (isFirstCall) {
       queueMicrotask(
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async
-        () => this._load().catch((error) => {
-          this._postLoaded.reject(error);
+        // eslint-disable-next-line @typescript-eslint/promise-function-async, @typescript-eslint/no-misused-promises
+        () => this.#load().catch((error) => {
+          this.#postLoadedDeferred.reject(error);
           setTimeout(() => {
             throw error;
           });
         })
       );
+    } else if (trackingTarget) {
+      this.requestUpdate();
     }
   }
+  #doTrackedUpdate(changedProperties) {
+    try {
+      this.#trackingTarget.clear();
+      this.manager.B(this.#trackingTarget, () => super.update(changedProperties));
+    } catch (error) {
+      this.#trackingTarget.clear();
+      throw error;
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#trackingTarget?.destroy();
+    this.#trackingTarget = void 0;
+  }
   /**
    * Overwrite Lit's default behavior of attaching shadow root to the lit
    * element, and instead use this.el to support lazy builds.
@@ -219,13 +398,9 @@ var LitElement = class _LitElement extends OriginalLitElement {
     const options = Class.shadowRootOptions;
     const useLightDom = options === noShadowRoot;
     const renderRoot = existingShadowRoot ?? (useLightDom ? this.el : this.el.attachShadow(options));
-    Object.defineProperty(this, "shadowRoot", {
-      // Create shadow root on the proxy instance, to make Lit render content there
-      value: renderRoot
-    });
     if (existingShadowRoot) {
       if (process.env.NODE_ENV === "production") {
-        OriginalLitElement.prototype.createRenderRoot.call(this);
+        LitElement$1.prototype.createRenderRoot.call(this);
       }
       return existingShadowRoot;
     }
@@ -242,32 +417,60 @@ var LitElement = class _LitElement extends OriginalLitElement {
     return renderRoot;
   }
   /** Do asynchronous component load */
-  async _load() {
-    const parentLoadPromise = this.el._ancestorLoad ?? attachToAncestor(this.el);
+  async #load() {
+    const parentLoadPromise = this.el.G ?? attachToAncestor(this.el);
     if (parentLoadPromise) {
       await parentLoadPromise;
     }
-    await this.manager._load();
-    this._enableUpdating(true);
+    const promises = [];
+    for (const controller of this.M) {
+      if ("triggerLoad" in controller) {
+        promises.push(controller.triggerLoad());
+      } else {
+        promises.push(safeAsyncCall(controller.hostLoad, controller));
+      }
+    }
+    await Promise.all(promises);
+    await this.load?.();
+    if (this.manager.hasDestroy) {
+      this.manager.onUpdate(
+        (changes) => changes.has(autoDestroyDisabledPropName) && this.manager.U()
+      );
+    }
+    this.#enableUpdating(true);
     this.performUpdate();
-    this._postLoad.resolve();
+    this.I.resolve();
     await Promise.resolve();
-    const pendingChildren = this._offspring.filter((loaded) => !loaded.manager?.loadedCalled);
+    const pendingChildren = this.J.filter((loaded) => !loaded.manager?.loadedCalled);
     if (pendingChildren.length) {
       await Promise.allSettled(pendingChildren.map(async (child) => await child.componentOnReady()));
     }
-    this._offspring.length = 0;
-    this.el.setAttribute(this.constructor.runtime.hydratedAttribute, "");
-    this.manager._loaded();
-    this._postLoaded.resolve();
+    this.J.length = 0;
+    this.el.setAttribute(this.constructor.K.hydratedAttribute, "");
+    for (const controller of this.M) {
+      if ("triggerLoaded" in controller) {
+        controller.triggerLoaded();
+      } else {
+        safeCall(controller.hostLoaded, controller);
+      }
+    }
+    this.loaded?.();
+    this.#postLoadedDeferred.resolve();
   }
   /**
    * Overwriting default shouldUpdate simply to get access to
    * "changedProperties" so that we can later provide it to ControllerManager
    */
   shouldUpdate(_changedProperties) {
-    this.$changes = _changedProperties;
-    return this._originalShouldUpdate?.(_changedProperties) ?? true;
+    this.manager.Q = _changedProperties;
+    return this.#originalShouldUpdate?.(_changedProperties) ?? true;
+  }
+  update(changedProperties) {
+    if (this.#trackingTarget) {
+      this.#doTrackedUpdate(changedProperties);
+    } else {
+      super.update(changedProperties);
+    }
   }
   listen(name, listener, options) {
     const boundListener = listener?.bind(this) ?? listener;
@@ -294,22 +497,33 @@ var LitElement = class _LitElement extends OriginalLitElement {
    * });
    */
   async componentOnReady() {
-    await this._postLoaded.promise;
+    await this.#postLoadedDeferred.promise;
     return this;
   }
-};
-LitElement.$createEvent = createEventFactory;
-if (process.env.NODE_ENV !== "production" && isEsriInternalEnv2()) {
-  const globalWithLit = globalThis;
-  globalWithLit.litIssuedWarnings ??= /* @__PURE__ */ new Set();
-  globalWithLit.litIssuedWarnings.add(
-    "Overriding ReactiveElement.createProperty() is deprecated. The override will not be called with standard decorators See https://lit.dev/msg/no-override-create-property for more information."
-  );
+  /**
+   * Adds a controller to the host, which connects the controller's lifecycle
+   * methods to the host's lifecycle.
+   *
+   * @remarks
+   * Even though Lit's LitElement already has addController,
+   * we overwrite it with a compatible version to have more control over
+   * timing, and to add support for load/loaded lifecycle hooks.
+   */
+  addController(controller) {
+    this.M.push(controller);
+    if (!(controllerSymbol in controller) && this.renderRoot && this.el.isConnected) {
+      controller.hostConnected?.();
+    }
+  }
+  /**
+   * Removes a controller from the host.
+   */
+  removeController(controller) {
+    this.M.splice(this.M.indexOf(controller), 1);
+    controller.controllerRemoved?.();
+  }
 }
-
-// src/runtime.ts
-import { isEsriInternalEnv as isEsriInternalEnv3 } from "@arcgis/components-utils";
-function makeRuntime(options) {
+const makeRuntime = (options) => {
   let assetPath;
   const setAssetPath = (path) => {
     assetPath = new URL(
@@ -343,41 +557,43 @@ function makeRuntime(options) {
     },
     setAssetPath,
     customElement(tagName, component) {
-      component.runtime = runtime;
-      component.tagName = tagName;
+      component.K = runtime;
+      component.L = tagName;
       if (!customElements.get(tagName)) {
         customElements.define(tagName, component);
       }
     }
   };
   setAssetPath(options.defaultAssetPath);
-  if (process.env.NODE_ENV !== "production" && isEsriInternalEnv3()) {
+  if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
     globalThis.devOnly$luminaRuntime = runtime;
   }
   return runtime;
+};
+const Fragment = void 0;
+const bindAttribute = void 0;
+const bindBooleanAttribute = void 0;
+const bindProperty = void 0;
+const bindEvent = void 0;
+const safeClassMap = (parameters) => typeof parameters === "object" && parameters != null ? classMap(parameters) : parameters;
+const safeStyleMap = (parameters) => typeof parameters === "object" && parameters != null ? styleMap(parameters) : parameters;
+class DeferLoad extends Directive {
+  update(part) {
+    const tagName = part.element.localName;
+    if (!customElements.get(tagName)) {
+      void deferredLoaders.get(tagName)?.();
+    }
+  }
+  render() {
+    return noChange$1;
+  }
 }
-
-// src/jsx/types.ts
-var Fragment = void 0;
-var bindAttribute = void 0;
-var bindBooleanAttribute = void 0;
-var bindProperty = void 0;
-var bindEvent = void 0;
-
-// src/jsx/directives.ts
-import { classMap } from "lit-html/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { directive as litDirective } from "lit-html/directive.js";
-import { live as litLive } from "lit-html/directives/live.js";
-var safeClassMap = (parameters) => typeof parameters === "object" && parameters != null ? classMap(parameters) : parameters;
-var safeStyleMap = (parameters) => typeof parameters === "object" && parameters != null ? styleMap(parameters) : parameters;
-var directive = litDirective;
-var live = litLive;
-
-// src/jsx/utils.ts
-import { noChange as litNoChange, nothing as litNothing } from "lit-html";
-var nothing = litNothing;
-var noChange = litNoChange;
+const deferLoad = /* @__PURE__ */ directive$1(DeferLoad)();
+const deferredLoaders = /* @__PURE__ */ new Map();
+const directive = directive$1;
+const live = live$1;
+const nothing = nothing$2;
+const noChange = noChange$2;
 function setAttribute(element, attributeName, value) {
   if (value == null) {
     element.removeAttribute(attributeName);
@@ -385,13 +601,11 @@ function setAttribute(element, attributeName, value) {
     element.setAttribute(attributeName, value);
   }
 }
-var stringOrBoolean = {
+const stringOrBoolean = {
   toAttribute: (value) => value === true ? "" : value === false ? null : value
 };
-
-// src/wrappersUtils.ts
-var emptyObject = {};
-var makeReactWrapperFactory = (react, createComponent) => (options) => {
+const emptyObject = {};
+const makeReactWrapperFactory = (react, createComponent) => (options) => {
   const tagName = options.tagName;
   let customElementPrototype = emptyObject;
   const elementClass = {
@@ -429,7 +643,12 @@ var makeReactWrapperFactory = (react, createComponent) => (options) => {
   customElementPrototype = void 0;
   return result;
 };
-var getReactWrapperOptions = (tagNameAndElement, events) => ({ tagName: tagNameAndElement, events });
+const getReactWrapperOptions = (tagNameAndElement, events) => ({ tagName: tagNameAndElement, events });
+const renderElement = (element) => {
+  const container = document.createElement("div");
+  render(element, container);
+  return container.firstElementChild;
+};
 export {
   Fragment,
   LitElement,
@@ -437,11 +656,14 @@ export {
   bindBooleanAttribute,
   bindEvent,
   bindProperty,
-  createEvent,
+  b as createEvent,
+  deferLoad,
+  deferredLoaders,
+  d as devOnly$getLitElementTagNameAndRuntime,
   directive,
   getReactWrapperOptions,
   live,
-  makeDefineCustomElements,
+  m as makeDefineCustomElements,
   makeReactWrapperFactory,
   makeRuntime,
   method,
@@ -449,6 +671,7 @@ export {
   noShadowRoot,
   nothing,
   property,
+  renderElement,
   safeClassMap,
   safeStyleMap,
   setAttribute,