@arcgis/lumina 4.32.0-next.1 → 4.32.0-next.100

package/dist/index.js

@@ -1,32 +1,48 @@
 import {
-  defaultEventBubbles,
-  defaultEventCancelable,
-  defaultEventComposed,
-  lazyMetaGroupJoiner,
-  lazyMetaItemJoiner,
-  lazyMetaSubItemJoiner
-} from "./chunk-CH52Q2MB.js";
+  attachToAncestor,
+  makeDefineCustomElements,
+  noShadowRoot
+} from "./chunk-6HCCSL5F.js";
+import "./chunk-PGHUBTOM.js";
+
+// src/context.ts
+import { retrieveComponent } from "@arcgis/components-controllers";
+import { ContextConsumer, ContextProvider } from "@lit/context";
+function useContextProvider(options) {
+  const component = retrieveComponent();
+  const controller = new ContextProvider(component.el, options);
+  component.addController(controller);
+  return controller;
+}
+function useContextConsumer(options) {
+  const component = retrieveComponent();
+  const controller = new ContextConsumer(component.el, options);
+  component.addController(controller);
+  return controller;
+}
 
 // src/createEvent.ts
-import { retrieveComponent, trackPropertyKey } from "@arcgis/components-controllers";
-var createEventFactory = (eventName = "", options = {}, component = retrieveComponent()) => {
+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") {
-        if (eventName === "") {
+      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 === "") {
+        keyTrackResolve();
+        if (process.env.NODE_ENV !== "production" && isEsriInternalEnv() && eventName === "") {
           throw new Error("Unable to resolve event name from property name");
         }
-        if (!component.el.isConnected) {
-          console.warn(
-            `Trying to emit an ${eventName} event on a disconnected element ${component.el.tagName.toLowerCase()}`
-          );
-        }
       }
       const event = new CustomEvent(eventName, {
         detail: payload,
-        cancelable: defaultEventCancelable,
-        bubbles: defaultEventBubbles,
-        composed: defaultEventComposed,
+        cancelable: true,
+        bubbles: true,
+        composed: true,
         ...options
       });
       component.el.dispatchEvent(event);
@@ -34,13 +50,13 @@ var createEventFactory = (eventName = "", options = {}, component = retrieveComp
     }
   };
   if (eventName === "") {
-    trackPropertyKey(
-      component,
-      (key) => {
-        if (process.env.NODE_ENV !== "production" && key === void 0) {
+    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`);
         }
-        eventName = key;
+        eventName = resolution.key;
       },
       emitter
     );
@@ -55,491 +71,8 @@ import { property as litProperty } from "@lit/reactive-element/decorators/proper
 var property = litProperty;
 var method = void 0;
 
-// src/lazyLoad.ts
-import { Deferred, camelToKebab } from "@arcgis/components-utils";
-
-// src/devOnlyDetectIncorrectLazyUsages.ts
-function devOnlyDetectIncorrectLazyUsages(LitClass) {
-  const genericPrototype = LitClass.prototype;
-  const descriptor = Object.getOwnPropertyDescriptor(genericPrototype, "innerText");
-  if (descriptor !== void 0 && descriptor.get === descriptor.set) {
-    return;
-  }
-  const allowList = /* @__PURE__ */ new Set([
-    // We shouldn't be overwriting this property
-    "constructor",
-    // Called by Lit - we proxy it to this.el in ProxyComponent
-    "setAttribute",
-    // Called by Lit SSR - we proxy it to this.el in ProxyComponent
-    "removeAttribute",
-    // Called by Lit - we proxy it to this.el in ProxyComponent
-    "isConnected",
-    // Called by Lit, but only in dev mode for warnings, so we don't have to proxy.
-    "localName"
-  ]);
-  const customErrorMessages = {
-    addEventListener: "use this.listen() or this.el.addEventListener()"
-  };
-  Object.entries({
-    ...Object.getOwnPropertyDescriptors(HTMLElement.prototype),
-    ...Object.getOwnPropertyDescriptors(Element.prototype),
-    ...Object.getOwnPropertyDescriptors(Node.prototype),
-    ...Object.getOwnPropertyDescriptors(EventTarget.prototype)
-  }).forEach(([key, value]) => {
-    if (allowList.has(key)) {
-      return;
-    }
-    const callback = (...args) => {
-      if (key === "hasAttribute" && args[0] === "defer-hydration") {
-        return false;
-      }
-      throw new Error(
-        `You should not be trying to access this.${key} directly as it won't work correctly in lazy-builds. Instead, ${customErrorMessages[key] ?? `use this.el.${key}`}`
-      );
-    };
-    if (typeof value.value === "function") {
-      genericPrototype[key] = callback;
-    } else {
-      Object.defineProperty(genericPrototype, key, { get: callback, set: callback });
-    }
-  });
-}
-
-// src/lifecycleSupport.ts
-function attachToAncestor(child) {
-  let ancestor = child;
-  while (ancestor = ancestor.parentNode ?? ancestor.host) {
-    if (ancestor?.constructor?.lumina) {
-      const litParent = ancestor;
-      if (!litParent.manager?.loadedCalled) {
-        litParent._offspring.push(child);
-      }
-      return litParent._postLoad.promise;
-    }
-  }
-  return false;
-}
-
-// src/utils.ts
-var noShadowRoot = {};
-
-// src/lazyLoad.ts
-var makeDefineCustomElements = (runtime, structure) => function defineCustomElements(windowOrOptions, options) {
-  if (!globalThis.customElements) {
-    return;
-  }
-  const resolvedOptions = options ?? windowOrOptions ?? {};
-  const resourcesUrl = resolvedOptions.resourcesUrl;
-  if (resourcesUrl) {
-    runtime.setAssetPath(resourcesUrl);
-  }
-  Object.entries(structure).forEach(createLazyElement);
-};
-function createLazyElement([tagName, [load, compactMeta = ""]]) {
-  if (customElements.get(tagName)) {
-    return;
-  }
-  const [compactObservedProps, compactAsyncMethods, compactSyncMethods] = compactMeta.split(lazyMetaGroupJoiner);
-  const observedProps = compactObservedProps ? compactObservedProps?.split(lazyMetaItemJoiner).map(parseCondensedProp) : void 0;
-  const observedProperties = observedProps?.map(([property2]) => property2);
-  const ProxyClass = class extends ProxyComponent {
-    static {
-      this.observedAttributes = observedProps?.map(([, attribute]) => attribute).filter((attribute) => attribute !== "");
-    }
-    static {
-      this._properties = observedProperties;
-    }
-    static {
-      this._asyncMethods = compactAsyncMethods ? compactAsyncMethods?.split(lazyMetaItemJoiner) : void 0;
-    }
-    static {
-      this._syncMethods = compactSyncMethods?.split(lazyMetaItemJoiner);
-    }
-    static {
-      this._name = tagName;
-    }
-    constructor() {
-      const isFirstInstanceOfType = !ProxyClass._loadPromise;
-      if (isFirstInstanceOfType) {
-        ProxyClass._loadPromise = load();
-        ProxyClass._initializePrototype();
-      }
-      super();
-    }
-  };
-  customElements.define(tagName, ProxyClass);
-}
-var defineProperty = Object.defineProperty;
-function parseCondensedProp(propAndAttribute) {
-  const name = propAndAttribute.split(lazyMetaSubItemJoiner);
-  return name.length === 1 ? [name[0], camelToKebab(name[0])] : name;
-}
-var HtmlElement = globalThis.HTMLElement ?? parseCondensedProp;
-var ProxyComponent = class extends HtmlElement {
-  constructor() {
-    super();
-    /** @internal */
-    this._store = {};
-    /**
-     * If attributeChangedCallback() is called before the LitElement is loaded,
-     * store the attributes here, and replay later
-     */
-    this._pendingAttributes = [];
-    /**
-     * Resolved once LitElement's load() is complete.
-     * Not read inside of this class, but needed for LitElement to determine if
-     * it's closest ancestor finished load()
-     */
-    this._postLoad = new Deferred();
-    /**
-     * Resolved once LitElement's loaded() is complete
-     */
-    this._postLoaded = new Deferred();
-    /**
-     * Direct offspring that should be awaited before loaded() is emitted
-     */
-    this._offspring = [];
-    if (process.env.NODE_ENV !== "production") {
-      this._hmrSetProps = /* @__PURE__ */ new Set();
-      this._hmrSetAttributes = /* @__PURE__ */ new Set();
-      globalThis.devOnly$createdElements ??= [];
-      globalThis.devOnly$createdElements.push(new WeakRef(this));
-    }
-    this._saveInstanceProperties();
-    const ProxyClass = this.constructor;
-    if (ProxyClass._LitConstructor) {
-      this._initializeComponent({ a: ProxyClass._LitConstructor });
-    } else {
-      void ProxyClass._loadPromise.then(this._initializeComponent.bind(this)).catch((error) => {
-        console.error(error);
-        this._postLoaded.reject(error);
-      });
-    }
-    if (process.env.NODE_ENV !== "production") {
-      ProxyClass._hmrInstances ??= [];
-      ProxyClass._hmrInstances.push(new WeakRef(this));
-      Object.defineProperty(this, "_store", {
-        value: this._store,
-        enumerable: false,
-        configurable: true
-      });
-    }
-  }
-  static {
-    this.lumina = true;
-  }
-  /** @internal */
-  static _initializePrototype() {
-    this._properties?.forEach(this._bindProp, this);
-    this._asyncMethods?.forEach(this._bindAsync, this);
-    this._syncMethods?.forEach(this._bindSync, this);
-  }
-  static _bindProp(propName) {
-    defineProperty(this.prototype, propName, {
-      configurable: true,
-      enumerable: true,
-      get() {
-        return this._store[propName];
-      },
-      set(value) {
-        this._store[propName] = value;
-        if (process.env.NODE_ENV !== "production") {
-          this._hmrSetProps.add(propName);
-        }
-      }
-    });
-  }
-  static _bindAsync(methodName) {
-    defineProperty(this.prototype, methodName, {
-      async value(...args) {
-        if (!this._litElement) {
-          await this._postLoaded.promise;
-        }
-        const genericLitElement = this._litElement;
-        return await genericLitElement[methodName](...args);
-      },
-      configurable: true
-    });
-  }
-  static _bindSync(methodName) {
-    defineProperty(this.prototype, methodName, {
-      value(...args) {
-        if (process.env.NODE_ENV === "development" && !this._litElement) {
-          const ProxyClass = this.constructor;
-          throw new Error(
-            `Tried to call method ${methodName}() on <${ProxyClass._name}> component before it's fully loaded. Please do 'await component.componentOnReady();' before calling this method.`
-          );
-        }
-        const genericLitElement = this._litElement;
-        return genericLitElement[methodName](...args);
-      },
-      configurable: true
-    });
-  }
-  get manager() {
-    return this._litElement?.manager;
-  }
-  /**
-   * Until the custom element is registered on the page, an instance of that
-   * element can be constructed and some properties on that instance set.
-   *
-   * These properties are set before the element prototype is set to this proxy
-   * class and thus none of our getters/setters are yet registered - such
-   * properties will be set by JavaScript on the instance directly.
-   *
-   * Once element is registered, the properties set in the meanwhile will shadow
-   * the getter/setters, and thus break reactivity. The fix is to delete these
-   * properties from the instance, and re-apply them once accessors are set.
-   *
-   * @example
-   * ```ts
-   * import { defineCustomElements } from '@arcgis/map-components';
-   * const map = document.createElement('arcgis-map');
-   * // This will shadow the getter/setters
-   * map.itemId = '...';
-   * // This finally defines the custom elements and sets the property accessors
-   * defineCustomElements();
-   * ```
-   *
-   * @remarks
-   * This is an equivalent of the __saveInstanceProperties method in Lit's
-   * ReactiveElement. Lit takes care of this on LitElement, but we have to take
-   * care of this on the lazy proxy
-   */
-  _saveInstanceProperties() {
-    const ProxyClass = this.constructor;
-    const genericThis = this;
-    ProxyClass._properties?.forEach((propName) => {
-      if (Object.hasOwn(this, propName)) {
-        this._store[propName] = genericThis[propName];
-        delete genericThis[propName];
-      }
-    });
-  }
-  /*
-   * This method must be statically present rather than added later, or else,
-   * browsers won't call it. Same for connected and disconnected callbacks.
-   */
-  attributeChangedCallback(name, oldValue, newValue) {
-    this._litElement?.attributeChangedCallback(name, oldValue, newValue);
-    if (!this._litElement) {
-      this._pendingAttributes.push(name);
-    }
-    if (process.env.NODE_ENV !== "production") {
-      this._hmrSetAttributes.add(name);
-    }
-  }
-  connectedCallback() {
-    if (this._litElement) {
-      this._litElement.connectedCallback();
-    } else {
-      queueMicrotask(() => {
-        this._ancestorLoad = attachToAncestor(this);
-      });
-    }
-  }
-  disconnectedCallback() {
-    this._litElement?.disconnectedCallback();
-  }
-  /**
-   * Create a promise that resolves once component is fully loaded
-   */
-  async componentOnReady() {
-    await this._postLoaded.promise;
-    return this._litElement;
-  }
-  /** @internal */
-  _initializeComponent(module) {
-    const ProxyClass = this.constructor;
-    const tagName = ProxyClass._name;
-    if (process.env.NODE_ENV !== "production") {
-      Object.entries(module).forEach(([name, LitConstructor2]) => {
-        if (name !== "exportsForTests" && typeof LitConstructor2 !== "function" || typeof LitConstructor2.tagName !== "string") {
-          console.warn(
-            `Found non-component export "${name}" in the file for the "${tagName}" component. This will interfere with hot module replacement. Please move "${name}" into a separate file.`
-          );
-        }
-      });
-    }
-    const LitConstructor = Object.values(module).find(
-      (LitConstructor2) => LitConstructor2.tagName === tagName
-    );
-    if (process.env.NODE_ENV !== "production" && !LitConstructor) {
-      throw new Error(
-        `Unable to find the LitElement class for the "${tagName}" custom element in the lazy-loaded module`
-      );
-    }
-    const lazyTagName = process.env.NODE_ENV === "production" ? `${tagName}--lazy` : (ProxyClass._hmrIndex ?? 0) === 0 ? `${tagName}--lazy` : `${tagName}--lazy-${ProxyClass._hmrIndex}`;
-    const isFirstInitialization = !ProxyClass._LitConstructor;
-    if (isFirstInitialization) {
-      ProxyClass._LitConstructor = LitConstructor;
-      LitConstructor.prototype.removeAttribute = function(qualifiedName) {
-        HTMLElement.prototype.removeAttribute.call(this.el, qualifiedName);
-      };
-      LitConstructor.prototype.setAttribute = function(qualifiedName, value) {
-        HTMLElement.prototype.setAttribute.call(this.el, qualifiedName, value);
-      };
-      defineProperty(LitConstructor.prototype, "isConnected", {
-        get() {
-          return this.el.isConnected;
-        }
-      });
-      if (process.env.NODE_ENV !== "production" && LitConstructor.shadowRootOptions !== noShadowRoot) {
-        let prototype = LitConstructor;
-        while (prototype && !Object.hasOwn(prototype, "lumina")) {
-          prototype = Object.getPrototypeOf(prototype);
-        }
-        devOnlyDetectIncorrectLazyUsages(prototype);
-      }
-      customElements.define(lazyTagName, LitConstructor);
-    }
-    LitConstructor.lazy = this;
-    const litElement = document.createElement(lazyTagName);
-    LitConstructor.lazy = void 0;
-    if (process.env.NODE_ENV !== "production") {
-      Object.defineProperty(this, "_litElement", {
-        value: litElement,
-        configurable: true,
-        enumerable: false
-      });
-    } else {
-      this._litElement = litElement;
-    }
-    this._pendingAttributes.forEach((name) => {
-      const value = this.getAttribute(name);
-      litElement.attributeChangedCallback(
-        name,
-        // Lit doesn't look at this value, thus even if attribute already exists, that's ok
-        null,
-        value
-      );
-    });
-    Object.entries(this._store).forEach(syncLitElement, litElement);
-    this._store = litElement;
-    if (process.env.NODE_ENV !== "production") {
-      const litObserved = LitConstructor.observedAttributes ?? [];
-      const lazyObserved = ProxyClass.observedAttributes ?? [];
-      const missingFromLazy = litObserved.filter((attribute) => !lazyObserved.includes(attribute));
-      const missingFromLit = lazyObserved.filter((attribute) => !litObserved.includes(attribute));
-      if (missingFromLazy.length > 0) {
-        console.warn(
-          `The following attributes on <${ProxyClass._name}> are present on the Lit element, but are missing from the lazy proxy component: ${missingFromLazy.join(", ")}. This either indicates a bug in Lumina, or you are creating the attribute dynamically in a way that compiler cannot infer statically. For these attributes, lazy-loading version of your component won't work correctly, thus this must be resolved`
-        );
-      }
-      if (missingFromLit.length > 0) {
-        console.warn(
-          `The following attributes on <${ProxyClass._name}> are defined on the lazy proxy component, but not on the actual Lit element: ${missingFromLit.join(", ")}. This either indicates a bug in Lumina, or you are creating the attribute dynamically in a way that compiler cannot infer statically. This is a non-critical issue, but does indicate that something is going wrong and should be fixed`
-        );
-      }
-    }
-    const isStillConnected = this.isConnected;
-    if (isStillConnected || this._ancestorLoad) {
-      litElement.connectedCallback?.();
-      if (!isStillConnected) {
-        litElement.disconnectedCallback();
-      }
-    }
-  }
-};
-function syncLitElement([key, value]) {
-  this[key] = value;
-}
-
-// src/hmrSupport.ts
-import { camelToKebab as camelToKebab2 } from "@arcgis/components-utils";
-function handleHmrUpdate(newModules) {
-  newModules.forEach((newModule) => {
-    if (newModule === void 0) {
-      return;
-    }
-    Object.values(newModule).forEach((exported) => {
-      if (typeof exported !== "function" || typeof exported.tagName !== "string") {
-        return;
-      }
-      const LitConstructor = exported;
-      const ProxyClass = customElements.get(LitConstructor.tagName);
-      if (ProxyClass === void 0) {
-        throw new Error(`Failed to find custom element proxy for tag name: ${LitConstructor.tagName}`);
-      }
-      ProxyClass._LitConstructor = void 0;
-      ProxyClass._loadPromise = void 0;
-      ProxyClass._hmrIndex ??= 0;
-      ProxyClass._hmrIndex += 1;
-      ProxyClass._initializePrototype();
-      ProxyClass._hmrInstances?.forEach((instanceWeakRef) => {
-        const instance = instanceWeakRef.deref();
-        if (instance === void 0) {
-          return;
-        }
-        if (instance._litElement === void 0) {
-          void ProxyClass._loadPromise.then(() => reInitialize(instance, newModule));
-        } else {
-          reInitialize(instance, newModule);
-        }
-      });
-      return;
-    });
-  });
-}
-function reInitialize(instance, newModule) {
-  const PreviousLitConstructor = instance._litElement.constructor;
-  const properties = PreviousLitConstructor.elementProperties;
-  const preservedProperties = Array.from(properties.entries()).filter(
-    ([propertyName, descriptor]) => typeof propertyName === "string" && (instance._hmrSetProps.has(propertyName) || typeof descriptor.attribute === "string" && instance._hmrSetAttributes.has(descriptor.attribute))
-  ).map(([key]) => [key, instance[key]]);
-  instance._store = Object.fromEntries(preservedProperties);
-  const isConnected = instance.isConnected;
-  if (isConnected) {
-    instance._litElement.disconnectedCallback();
-  }
-  instance._initializeComponent(newModule);
-}
-function handleComponentMetaUpdate(meta) {
-  const ProxyClass = customElements.get(meta.tagName);
-  if (ProxyClass === void 0) {
-    return;
-  }
-  const attributes = meta.properties.map(([property2, attribute]) => attribute ?? camelToKebab2(property2)).filter(Boolean);
-  observedAttributes[meta.tagName] ??= {};
-  observedAttributes[meta.tagName].original ??= new Set(ProxyClass.observedAttributes);
-  const originallyObserved = observedAttributes[meta.tagName].original;
-  observedAttributes[meta.tagName].manuallyObserved ??= new Set(
-    /**
-     * Never manually observe attributes that were in the original
-     * observedAttributes as those would be observed by the browser
-     */
-    attributes.filter((attribute) => !originallyObserved.has(attribute))
-  );
-  ProxyClass._asyncMethods = meta.asyncMethods;
-  ProxyClass._syncMethods = meta.syncMethods;
-  ProxyClass._properties = meta.properties.map(([name]) => name);
-  ProxyClass.observedAttributes = attributes;
-}
-var observedAttributesSymbol = Symbol.for("@arcgis/lumina:observedAttributes");
-var globalThisWithObservedAttributes = globalThis;
-var alreadyHadObservers = observedAttributesSymbol in globalThisWithObservedAttributes;
-globalThisWithObservedAttributes[observedAttributesSymbol] ??= {};
-var observedAttributes = globalThisWithObservedAttributes[observedAttributesSymbol];
-if (!alreadyHadObservers) {
-  const makeObserver = (original) => function observeAttributes(qualifiedName, ...rest) {
-    const observed = observedAttributes[this.tagName.toLowerCase()]?.manuallyObserved;
-    if (observed?.has(qualifiedName)) {
-      const oldValue = this.getAttribute(qualifiedName);
-      const returns = original.call(this, qualifiedName, ...rest);
-      const newValue = this.getAttribute(qualifiedName);
-      this.attributeChangedCallback(qualifiedName, oldValue, newValue);
-      return returns;
-    } else {
-      return original.call(this, qualifiedName, ...rest);
-    }
-  };
-  ProxyComponent.prototype.setAttribute = makeObserver(ProxyComponent.prototype.setAttribute);
-  ProxyComponent.prototype.toggleAttribute = makeObserver(ProxyComponent.prototype.toggleAttribute);
-  ProxyComponent.prototype.removeAttribute = makeObserver(ProxyComponent.prototype.removeAttribute);
-}
-
 // src/LitElement.ts
-import { Deferred as Deferred2, camelToKebab as camelToKebab3 } from "@arcgis/components-utils";
+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;
@@ -573,7 +106,7 @@ var LitElement = class _LitElement extends OriginalLitElement {
      */
     this.manager = useControllerManager(this);
     /** @internal */
-    this._postLoad = this.constructor.lazy?._postLoad ?? new Deferred2();
+    this._postLoad = this.constructor.lazy?._postLoad ?? new Deferred();
     /**
      * Direct offspring that should be awaited before loaded() is emitted.
      *
@@ -582,7 +115,7 @@ var LitElement = class _LitElement extends OriginalLitElement {
      * @internal
      */
     this._offspring = this.constructor.lazy?._offspring ?? [];
-    this._postLoaded = this.constructor.lazy?._postLoaded ?? new Deferred2();
+    this._postLoaded = this.constructor.lazy?._postLoaded ?? new Deferred();
     this._enableUpdating = this.enableUpdating;
     this.enableUpdating = emptyFunction;
     const ourShouldUpdate = _LitElement.prototype.shouldUpdate;
@@ -591,19 +124,31 @@ var LitElement = class _LitElement extends OriginalLitElement {
       this.shouldUpdate = ourShouldUpdate;
     }
     if (process.env.NODE_ENV !== "production") {
-      globalThis.devOnly$luminaComponentRefCallback?.(this);
+      const isOwnComponent = globalThis.devOnly$ownTagNames?.has(
+        this.el.tagName.toLowerCase()
+      );
+      const constructor = this.constructor;
+      const warningsWereCustomized = constructor.enabledWarnings !== OriginalLitElement.enabledWarnings;
+      if (!isOwnComponent && !warningsWereCustomized) {
+        constructor.disableWarning?.("change-in-update");
+      }
+      if (isEsriInternalEnv2()) {
+        globalThis.devOnly$luminaComponentRefCallback?.(this);
+      }
     }
     if (isServer) {
       this.el.setAttribute(this.constructor.runtime.hydratedAttribute, "");
     }
   }
+  /**
+   * Customize Lit's default style handling to support non-shadow-root styles
+   */
   static finalizeStyles(styles) {
     if (process.env.NODE_ENV === "test" && Array.isArray(styles)) {
       styles = styles.filter(Boolean);
     }
     const finalizedStyles = super.finalizeStyles(styles);
-    const options = this.constructor.shadowRootOptions;
-    const useLightDom = options === noShadowRoot;
+    const useLightDom = this.shadowRootOptions === noShadowRoot;
     return this.runtime?.commonStyles === void 0 || useLightDom ? finalizedStyles : [this.runtime.commonStyles, ...finalizedStyles];
   }
   static createProperty(name, options) {
@@ -626,7 +171,7 @@ var LitElement = class _LitElement extends OriginalLitElement {
        *
        * Thus, overwriting Lit's default behavior to use kebab-case:
        */
-      attribute: !!(flags & 1 /* ATTRIBUTE */) && typeof name === "string" ? camelToKebab3(name) : false,
+      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,
       /**
@@ -654,8 +199,10 @@ var LitElement = class _LitElement extends OriginalLitElement {
       queueMicrotask(
         // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async
         () => this._load().catch((error) => {
-          console.error(error);
           this._postLoaded.reject(error);
+          setTimeout(() => {
+            throw error;
+          });
         })
       );
     }
@@ -682,11 +229,13 @@ var LitElement = class _LitElement extends OriginalLitElement {
       }
       return existingShadowRoot;
     }
-    const domRoot = renderRoot.getRootNode();
-    domRoot.adoptedStyleSheets = [
-      ...domRoot.adoptedStyleSheets,
-      ...Class.elementStyles.map((stylesheet) => "styleSheet" in stylesheet ? stylesheet.styleSheet : stylesheet)
-    ];
+    if (this.isConnected) {
+      const domRoot = renderRoot.getRootNode();
+      domRoot.adoptedStyleSheets = [
+        ...domRoot.adoptedStyleSheets,
+        ...Class.elementStyles.map((stylesheet) => "styleSheet" in stylesheet ? stylesheet.styleSheet : stylesheet)
+      ];
+    }
     return renderRoot;
   }
   /** Do asynchronous component load */
@@ -747,7 +296,7 @@ var LitElement = class _LitElement extends OriginalLitElement {
   }
 };
 LitElement.$createEvent = createEventFactory;
-if (process.env.NODE_ENV !== "production") {
+if (process.env.NODE_ENV !== "production" && isEsriInternalEnv2()) {
   const globalWithLit = globalThis;
   globalWithLit.litIssuedWarnings ??= /* @__PURE__ */ new Set();
   globalWithLit.litIssuedWarnings.add(
@@ -756,10 +305,31 @@ if (process.env.NODE_ENV !== "production") {
 }
 
 // src/runtime.ts
+import { isEsriInternalEnv as isEsriInternalEnv3 } from "@arcgis/components-utils";
 function makeRuntime(options) {
   let assetPath;
   const setAssetPath = (path) => {
-    assetPath = new URL(path, globalThis.location?.href).href;
+    assetPath = new URL(
+      path,
+      /**
+       * setAssetPath() is called in global scope whenever Lumina runtime is
+       * imported. Thus we need to carefully handle different environments.
+       *
+       * Need `|| undefined` because Stencil's unit tests mock-dock defines
+       * `location.href` as empty string, which crashes `new URL()`. Stencil's
+       * test environment does not define `NODE_ENV` by default, so we have to
+       * add a few bytes to production.
+       *
+       * For happy-dom and jsdom, we are assuming that `NODE_ENV` is set.
+       * Depending on configuration, `location?.href` is either undefined (not
+       * an exception) or `about:blank` (an exception - thus handling that case
+       * explicitly).
+       *
+       * For Node.js without a DOM environment, `location?.href` is undefined so
+       * all is good.
+       */
+      process.env.NODE_ENV === "test" ? globalThis.location?.href === "about:blank" ? void 0 : globalThis.location?.href || void 0 : globalThis.location?.href || void 0
+    ).href;
   };
   const runtime = {
     ...options,
@@ -778,13 +348,13 @@ function makeRuntime(options) {
     }
   };
   setAssetPath(options.defaultAssetPath);
-  if (process.env.NODE_ENV !== "production") {
+  if (process.env.NODE_ENV !== "production" && isEsriInternalEnv3()) {
     globalThis.devOnly$luminaRuntime = runtime;
   }
   return runtime;
 }
 
-// src/jsx/jsx.ts
+// src/jsx/types.ts
 var Fragment = void 0;
 var bindAttribute = void 0;
 var bindBooleanAttribute = void 0;
@@ -794,47 +364,11 @@ 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 } from "lit-html/directive.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 DynamicHtmlValueDirective = class extends Directive {
-  update(part, [prop, value]) {
-    if (process.env.NODE_ENV !== "production") {
-      if (part.type !== 6) {
-        throw new Error("DynamicHtmlValueDirective can only be used in the element part position");
-      }
-      if (prop !== "value" && prop !== "defaultValue") {
-        throw new Error('Expected the first argument to DynamicHtmlValueDirective to be "value" or "defaultValue"');
-      }
-      if (typeof value === "object" && value != null) {
-        if ("_$litDirective$" in value) {
-          throw new Error(
-            "Directive is not supported as a value for the `value` or `defaultValue` prop when the tag name is dynamic."
-          );
-        } else {
-          throw new Error(
-            `Tried to set an object as the value/defaultValue prop in a <${part.element.tagName}> element.`
-          );
-        }
-      }
-    }
-    const element = part.element;
-    const tagName = element.tagName;
-    if (prop === "value" ? tagName === "INPUT" : tagName === "BUTTON" || tagName === "DATA") {
-      if (element[prop] !== value) {
-        element[prop] = value;
-      }
-    } else if (value != null) {
-      element.setAttribute("value", value);
-    } else {
-      element.removeAttribute("value");
-    }
-  }
-};
-var dynamicValueDirective = directive(DynamicHtmlValueDirective);
 var live = litLive;
 
 // src/jsx/utils.ts
@@ -853,24 +387,46 @@ var stringOrBoolean = {
 };
 
 // src/wrappersUtils.ts
-function createPrototypeProxy(tagName) {
-  const customElement = {
+var emptyObject = {};
+var makeReactWrapperFactory = (react, createComponent) => (options) => {
+  const tagName = options.tagName;
+  let customElementPrototype = emptyObject;
+  const elementClass = {
     name: tagName,
+    /**
+     * Lit's createComponent tries to access the elementClass.prototype in
+     * global scope (in development mode). The elementClass may not be defined
+     * yet (because we are in a lazy loading build, or because current app
+     * doesn't import a given custom element as it doesn't use it).
+     *
+     * Thus, we return an empty object as a fake prototype.
+     *
+     * Right after the call to `createComponent`, we set to
+     * customElementPrototype undefined so that the next access of
+     * `.prototype` tries to get the real prototype.
+     * `createPrototypeProxy()` is called, this small proxy delays retrieving the custom
+     * element prototype until it is actually needed, and caches the result for future calls.
+     */
     get prototype() {
-      const customElementPrototype = customElements.get(tagName)?.prototype;
-      if (!customElementPrototype) {
-        if (process.env.NODE_ENV === "production") {
+      if (customElementPrototype === void 0) {
+        customElementPrototype = customElements.get(tagName)?.prototype;
+        if (!customElementPrototype) {
           throw new Error(`Custom element "${tagName}" not found`);
-        } else {
-          return Object.create(HTMLElement.prototype);
         }
+        Object.defineProperty(elementClass, "prototype", { value: customElementPrototype });
       }
-      Object.defineProperty(customElement, "prototype", customElementPrototype);
       return customElementPrototype;
     }
   };
-  return customElement;
-}
+  const result = createComponent({
+    ...options,
+    react,
+    elementClass
+  });
+  customElementPrototype = void 0;
+  return result;
+};
+var getReactWrapperOptions = (tagNameAndElement, events) => ({ tagName: tagNameAndElement, events });
 export {
   Fragment,
   LitElement,
@@ -879,13 +435,11 @@ export {
   bindEvent,
   bindProperty,
   createEvent,
-  createPrototypeProxy,
   directive,
-  dynamicValueDirective,
-  handleComponentMetaUpdate,
-  handleHmrUpdate,
+  getReactWrapperOptions,
   live,
   makeDefineCustomElements,
+  makeReactWrapperFactory,
   makeRuntime,
   method,
   noChange,
@@ -896,5 +450,7 @@ export {
   safeStyleMap,
   setAttribute,
   state,
-  stringOrBoolean
+  stringOrBoolean,
+  useContextConsumer,
+  useContextProvider
 };