@arcgis/lumina 5.1.0-next.6 → 5.1.0-next.60

package/dist/{Controller-DQnXLHsP.js → Controller-mLlWzD96.js}

@@ -1,5 +1,5 @@
 import { safeCall, isEsriInternalEnv, safeAsyncCall } from "@arcgis/toolkit/error";
-import { r as retrieveComponent, d as retrieveParentControllers, b as setParentController, a as setAmbientComponent, u as use, k as useRef, l as useRefSync, c as controllerSymbol } from "./ControllerInternals-By6dhpY-.js";
+import { r as retrieveComponent, d as retrieveParentControllers, b as setParentController, a as setAmbientComponent, u as use, k as useRef, l as useRefSync, c as controllerSymbol } from "./ControllerInternals-DP8cXrza.js";
 import { nothing } from "lit";
 import { Deferred } from "@arcgis/toolkit/promise";
 import { rethrowError } from "@arcgis/toolkit/log";
@@ -211,19 +211,19 @@ class Controller {
    * controller as ready (for usage in other controllers). Also, triggers
    * re-render of the component
    */
-  set exports(exports) {
+  set exports(exports$1) {
     const oldExports = this.#exports;
-    if (oldExports !== exports) {
-      this.#exports = exports;
+    if (oldExports !== exports$1) {
+      this.#exports = exports$1;
       this.#exportWatchers.forEach(safeCall);
       if (this.connectedCalled && this.O !== false) {
         this.#component.requestUpdate(this.O, oldExports);
       }
     }
-    this.P.resolve(exports);
+    this.P.resolve(exports$1);
   }
-  setProvisionalExports(exports, proxy = true) {
-    this.#exports = proxy ? makeProvisionalValue(exports) : exports;
+  setProvisionalExports(exports$1, proxy = true) {
+    this.#exports = proxy ? makeProvisionalValue(exports$1) : exports$1;
     this.#exportWatchers.forEach(safeCall);
   }
   #exportWatchers;
@@ -454,9 +454,9 @@ export {
   Controller as C,
   GenericController as G,
   createEventFactory as a,
-  trackPropertyKey as b,
+  trackPropKey as b,
   createEvent as c,
-  trackPropKey as d,
+  trackPropertyKey as d,
   propertyTrackResolve as p,
   trackKey as t
 };

package/dist/{ControllerInternals-By6dhpY-.js → ControllerInternals-DP8cXrza.js}

@@ -74,7 +74,7 @@ const use = async (value, watchExports) => {
       throw new Error(`The controller must implement watchExports method to support watching exports`);
     }
     const unsubscribe = controller.watchExports(
-      (exports) => watchExports(exports, unsubscribe)
+      (exports$1) => watchExports(exports$1, unsubscribe)
     );
   }
   return controller.exports;
@@ -119,10 +119,10 @@ export {
   setParentController as b,
   controllerSymbol as c,
   retrieveParentControllers as d,
-  bypassSetter as e,
-  bypassReadOnly as f,
-  isController as g,
-  getControllersCount as h,
+  bypassReadOnly as e,
+  bypassSetter as f,
+  getControllersCount as g,
+  isController as h,
   isPromise as i,
   setAmbientChildController as j,
   useRef as k,

package/dist/{ControllerManager-eFkqujn9.js → ControllerManager-A4d_wLLl.js}

@@ -1,8 +1,8 @@
 import { safeCall, isEsriInternalEnv } from "@arcgis/toolkit/error";
-import { G as GenericController, p as propertyTrackResolve } from "./Controller-DQnXLHsP.js";
+import { G as GenericController, p as propertyTrackResolve } from "./Controller-mLlWzD96.js";
 import { nothing, LitElement as LitElement$1 } from "lit";
 import { devToolsAwareTimeout } from "@arcgis/toolkit/promise";
-import { a as setAmbientComponent } from "./ControllerInternals-By6dhpY-.js";
+import { a as setAmbientComponent } from "./ControllerInternals-DP8cXrza.js";
 class ControllerManager extends GenericController {
   constructor(component) {
     super(component);
@@ -132,15 +132,15 @@ class ControllerManager extends GenericController {
    *
    * @private
    */
-  W(controller, exports) {
-    if (typeof exports === "object" && exports !== null || typeof exports === "function") {
-      this.#exportsStore.set(exports, controller);
+  W(controller, exports$1) {
+    if (typeof exports$1 === "object" && exports$1 !== null || typeof exports$1 === "function") {
+      this.#exportsStore.set(exports$1, controller);
     }
   }
   /** @private */
-  X(exports) {
-    if (typeof exports === "object" && exports !== null || typeof exports === "function") {
-      return this.#exportsStore.get(exports);
+  X(exports$1) {
+    if (typeof exports$1 === "object" && exports$1 !== null || typeof exports$1 === "function") {
+      return this.#exportsStore.get(exports$1);
     } else {
       return void 0;
     }

package/dist/LitElement.d.ts

@@ -5,6 +5,7 @@ import { ToElement } from './jsx/types.ts';
 import { BaseController, LuminaPropertyDeclaration } from './controllers/types.ts';
 import { ControllerManager } from './controllers/ControllerManager.ts';
 import { Controller } from './controllers/Controller.ts';
+import { FormAssociatedEvents } from './formAssociatedUtils.ts';
 type ComponentLifecycle = {
     connectedCallback?: () => void;
     disconnectedCallback?: () => void;
@@ -117,6 +118,19 @@ export declare class LitElement extends OriginalLitElement implements ComponentL
      * @private
      */
     __offspringComponents: ProxyComponent["__offspringComponents"];
+    /**
+     * For HMR, if the .elementInternals was created, preserve that element
+     * internals instance across hot reloads. This method lets HMR get a reference
+     * to element internals in a side-effect free way and without adding production
+     * bytes.
+     *
+     * @private
+     */
+    devOnly$PureGetElementInternals?: () => ElementInternals | undefined;
+    /**
+     * @see [MDN ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
+     */
+    get elementInternals(): ElementInternals;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -157,6 +171,7 @@ export declare class LitElement extends OriginalLitElement implements ComponentL
      * ```
      */
     listen<K extends keyof HTMLElementEventMap>(name: K, listener: (this: this, event: HTMLElementEventMap[K]) => unknown, options?: AddEventListenerOptions | boolean): void;
+    listen<K extends keyof FormAssociatedEvents>(name: K, listener: (this: this, event: FormAssociatedEvents[K]) => unknown, options?: Omit<AddEventListenerOptions, "capture" | "passive"> | boolean): void;
     listen(name: string, listener: (this: this, event: Event) => unknown, options?: AddEventListenerOptions | boolean): void;
     listen<EventType extends Event = CustomEvent<"Provide type like this.listenOn<ToEvents<ArcgisCounter>['arcgisClick']>() to get type-checked payload type">>(name: string, 
     /**

package/dist/context.js

@@ -1,5 +1,5 @@
-import { ContextProvider, ContextConsumer } from "@lit/context";
-import { r as retrieveComponent } from "./ControllerInternals-By6dhpY-.js";
+import { ContextConsumer, ContextProvider } from "@lit/context";
+import { r as retrieveComponent } from "./ControllerInternals-DP8cXrza.js";
 const useContextProvider = (options) => {
   const component = retrieveComponent();
   const controller = new ContextProvider(component.el, options);

package/dist/controllers/accessor/index.js

@@ -1,8 +1,8 @@
 import { isEsriInternalEnv } from "@arcgis/toolkit/error";
-import { r as retrieveComponent } from "../../ControllerInternals-By6dhpY-.js";
+import { r as retrieveComponent } from "../../ControllerInternals-DP8cXrza.js";
 import { on, watch } from "@arcgis/core/core/reactiveUtils.js";
-import { a as createEventFactory, G as GenericController, d as trackPropKey, t as trackKey } from "../../Controller-DQnXLHsP.js";
-import { p as proxyExports } from "../../proxyExports-CXEnG2Az.js";
+import { a as createEventFactory, G as GenericController, b as trackPropKey, t as trackKey } from "../../Controller-mLlWzD96.js";
+import { p as proxyExports } from "../../proxyExports-i81aYgwa.js";
 import { createObservable, trackAccess } from "@arcgis/core/applications/Components/reactiveUtils.js";
 import { property, subclass } from "@arcgis/core/core/accessorSupport/decorators.js";
 import Accessor from "@arcgis/core/core/Accessor.js";

package/dist/controllers/index.js

@@ -1,13 +1,13 @@
-import { C as Controller, t as trackKey, a as createEventFactory, p as propertyTrackResolve } from "../Controller-DQnXLHsP.js";
-import { G, d, b } from "../Controller-DQnXLHsP.js";
-import { a as setAmbientComponent, i as isPromise, b as setParentController, d as retrieveParentControllers, r as retrieveComponent } from "../ControllerInternals-By6dhpY-.js";
-import { f, e, c, h, g } from "../ControllerInternals-By6dhpY-.js";
-import { p as proxyExports } from "../proxyExports-CXEnG2Az.js";
+import { C as Controller, t as trackKey, a as createEventFactory, p as propertyTrackResolve } from "../Controller-mLlWzD96.js";
+import { G, b, d } from "../Controller-mLlWzD96.js";
+import { a as setAmbientComponent, i as isPromise, b as setParentController, d as retrieveParentControllers, r as retrieveComponent } from "../ControllerInternals-DP8cXrza.js";
+import { e, f, c, g, h } from "../ControllerInternals-DP8cXrza.js";
+import { p as proxyExports } from "../proxyExports-i81aYgwa.js";
 import { isServer } from "lit";
 import { isEsriInternalEnv } from "@arcgis/toolkit/error";
 import { observeAncestorsMutation, getElementAttribute } from "@arcgis/toolkit/dom";
 import { getElementLocale, startLocaleObserver } from "@arcgis/toolkit/intl";
-import { s as setAutoDestroyOnDisconnectTimeout, b as autoDestroyOnDisconnectTimeout } from "../ControllerManager-eFkqujn9.js";
+import { s as setAutoDestroyOnDisconnectTimeout, b as autoDestroyOnDisconnectTimeout } from "../ControllerManager-A4d_wLLl.js";
 const makeController = (constructor) => proxy(void 0, constructor);
 const makeGenericController = (constructor) => (component) => proxy(
   component,
@@ -258,12 +258,12 @@ const exportsForTests = {
 export {
   Controller,
   G as GenericController,
-  f as bypassReadOnly,
-  e as bypassSetter,
+  e as bypassReadOnly,
+  f as bypassSetter,
   c as controllerSymbol,
   exportsForTests,
-  h as getControllersCount,
-  g as isController,
+  g as getControllersCount,
+  h as isController,
   keyTrackResolve,
   load,
   makeController,
@@ -274,8 +274,8 @@ export {
   retrieveComponent,
   toFunction,
   trackKey,
-  d as trackPropKey,
-  b as trackPropertyKey,
+  b as trackPropKey,
+  d as trackPropertyKey,
   useDirection,
   useMedia,
   usePropertyChange,

package/dist/formAssociatedUtils.d.ts

@@ -0,0 +1,48 @@
+import { ProxyComponent } from './lazyLoad.ts';
+import { LitElement } from './LitElement.ts';
+/**
+ * Web platform allows custom elements to define these methods to handle the
+ * corresponding form events. For performance reasons, the engines require that
+ * these methods are present when the customElements.define() is called - it
+ * means that we need to include them in the lazy proxy as well.
+ *
+ * The lazy proxy today only creates the methods proxies the first time a proxy
+ * element of that tag name is created, which is too late.
+ *
+ * We could update the proxy to define the method proxies right away. Some cons
+ * with that:
+ * - In lazy builds, most components are never loaded, so I want to keep the
+ *   per-proxy overhead minimal.
+ * - To handle this form event, the component would need to define a
+ *   corresponding method with a \@method() decorator (to ensure it is present
+ *   on the proxy), and the method needs to be async (so that the lazy proxy
+ *   knows to await component loading before calling the method)
+ *   - If you forget to add \@method(), lazy proxy won't proxy this method. If
+ *     you forget to make it async, lazy proxy will error if the component is
+ *     not loaded yet. These are not obvious constraints from lazy-loading, and
+ *     do not match the examples online/copilot. We may need lint rules about
+ *     this.
+ * - Such API is not composable - if the method needs to be present on the
+ *   component, it is hard for a controller to handle it, creating wiring
+ *   boilerplate.
+ *
+ * To address these concerns, the proxy does the following:
+ * - Always define these methods on the prototype (harmless for
+ *   non-form-associated components). The methods are created once, so no
+ *   per-proxy overhead.
+ * - The proxy waits for component to be loaded. This avoids a race condition of
+ *   event being emitted before the constructor is lazy-loaded, and keeps timing
+ *   consistent with non-lazy builds.
+ * - The proxy will emit a corresponding event on itself. The component or any
+ *   controller can choose to listen to these events. The event does not bubble
+ *   and does not compose, so will have minimum visibility outside the component.
+ * - To keep the non-lazy behavior aligned, we also emit such events on itself
+ *   in non-lazy builds.
+ */
+export interface FormAssociatedEvents {
+    luminaFormAssociatedCallback: CustomEvent<readonly [form: HTMLFormElement | null]>;
+    luminaFormDisabledCallback: CustomEvent<readonly [disabled: boolean]>;
+    luminaFormResetCallback: CustomEvent<readonly []>;
+    luminaFormStateRestoreCallback: CustomEvent<readonly [state: unknown, mode: "autocomplete" | "restore"]>;
+}
+export declare function proxyFormMethodsToEvents(constructor: typeof LitElement | typeof ProxyComponent): void;

package/dist/hmrSupport.d.ts

@@ -21,6 +21,7 @@ export type HmrComponentMeta = {
     readonly properties: (readonly [property: string, attribute: string] | readonly [property: string])[];
     readonly asyncMethods: readonly string[];
     readonly syncMethods: readonly string[];
+    readonly formAssociated: boolean;
 };
 /**
  * Update lazy component meta

package/dist/hmrSupport.js

@@ -1,4 +1,4 @@
-import { n as noShadowRoot, P as ProxyComponent } from "./lazyLoad-DJM-hmfq.js";
+import { P as ProxyComponent, n as noShadowRoot } from "./lazyLoad-D3mMxcvZ.js";
 import { camelToKebab } from "@arcgis/toolkit/string";
 function handleHmrUpdate(newModules) {
   newModules.forEach((newModule) => {
@@ -56,6 +56,8 @@ function reInitialize(instance, newModule) {
     ([propertyName, descriptor]) => typeof propertyName === "string" && (instance.devOnly$hmrSetProps.has(propertyName) || typeof descriptor.attribute === "string" && instance.devOnly$hmrSetAttributes.has(descriptor.attribute))
   ).map(([key]) => [key, instance[key]]);
   instance.devOnly$hmrResetStore(Object.fromEntries(preservedProperties));
+  const elementInternals = instance.$component.devOnly$PureGetElementInternals();
+  instance.devOnly$elementInternals = elementInternals;
   if (instance.isConnected) {
     instance.$component.disconnectedCallback();
   }

package/dist/index.js

@@ -1,15 +1,15 @@
-import { p as propertyTrackResolve } from "./Controller-DQnXLHsP.js";
-import { c } from "./Controller-DQnXLHsP.js";
+import { p as propertyTrackResolve } from "./Controller-mLlWzD96.js";
+import { c } from "./Controller-mLlWzD96.js";
 import { state } from "lit/decorators/state.js";
 import { property as property$1 } from "lit/decorators/property.js";
-import { e as emptyFunction, n as noShadowRoot, a as attachToAncestor } from "./lazyLoad-DJM-hmfq.js";
-import { d, m } from "./lazyLoad-DJM-hmfq.js";
+import { e as emptyFunction, n as noShadowRoot, p as proxyFormMethodsToEvents, a as attachToAncestor } from "./lazyLoad-D3mMxcvZ.js";
+import { d, m } from "./lazyLoad-D3mMxcvZ.js";
 import { isEsriInternalEnv, safeAsyncCall, safeCall } from "@arcgis/toolkit/error";
 import { camelToKebab } from "@arcgis/toolkit/string";
 import { Deferred } from "@arcgis/toolkit/promise";
 import { LitElement as LitElement$1, isServer, notEqual, noChange as noChange$1, nothing as nothing$1, render } from "lit";
-import { c as controllerSymbol, s as shouldBypassReadOnly } from "./ControllerInternals-By6dhpY-.js";
-import { C as ControllerManager, a as autoDestroyDisabledPropName } from "./ControllerManager-eFkqujn9.js";
+import { c as controllerSymbol, s as shouldBypassReadOnly } from "./ControllerInternals-DP8cXrza.js";
+import { C as ControllerManager, a as autoDestroyDisabledPropName } from "./ControllerManager-A4d_wLLl.js";
 import { propertyFlagAttribute, propertyFlagNoAccessor, propertyFlagReadOnly, propertyFlagState, propertyFlagBoolean, propertyFlagNumber, propertyFlagReflect } from "./config.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -65,6 +65,10 @@ class LitElement extends LitElement$1 {
             );
           }
         });
+        this.devOnly$PureGetElementInternals = () => this.#elementInternals;
+        if (lazy?.devOnly$elementInternals !== void 0) {
+          this.#elementInternals = lazy.devOnly$elementInternals;
+        }
       }
     }
     if (createObservable) {
@@ -160,6 +164,9 @@ class LitElement extends LitElement$1 {
   static {
     this.lumina = true;
   }
+  static {
+    proxyFormMethodsToEvents(this);
+  }
   /**
    * The JS API's Accessor observables. This is used to integrate with the JS
    * API's reactivity system.
@@ -171,14 +178,26 @@ class LitElement extends LitElement$1 {
   #enableUpdating;
   #postLoadedDeferred;
   #trackingTarget;
+  #elementInternals;
+  /**
+   * @see [MDN ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
+   */
+  get elementInternals() {
+    this.#elementInternals ??= this.el.attachInternals();
+    return this.#elementInternals;
+  }
   connectedCallback() {
-    if (this.el.hasAttribute("defer-hydration")) {
-      return;
+    if (!this.hasAttribute("defer-hydration")) {
+      this.#connectedCallback(true);
     }
+  }
+  #connectedCallback(callSuper) {
     const trackingTarget = this.constructor.K.c?.(() => this.requestUpdate());
     this.#trackingTarget = trackingTarget;
     const isFirstCall = !this.manager.connectedCalled;
-    super.connectedCallback();
+    if (callSuper) {
+      super.connectedCallback();
+    }
     if (isFirstCall) {
       queueMicrotask(
         // eslint-disable-next-line @typescript-eslint/promise-function-async, @typescript-eslint/no-misused-promises
@@ -222,9 +241,13 @@ class LitElement extends LitElement$1 {
     const options = Class.shadowRootOptions;
     const useLightDom = options === noShadowRoot;
     const renderRoot = existingShadowRoot ?? (useLightDom ? this.el : this.el.attachShadow(options));
-    if (existingShadowRoot && // The shadow root may already exist if we are doing HMR - such case is not
-    // SSR so ignore it
-    process.env.NODE_ENV !== "production" && (this.el.constructor.devOnly$hmrIndex ?? 0) === 0) {
+    if (existingShadowRoot && // If we are in production, we are not in HMR, so assume SSR.
+    // If we are not in production, we might still be in SSR, as long as we
+    // are not in HMR
+    (process.env.NODE_ENV === "production" || this.el.constructor.devOnly$hmrIndex === void 0)) {
+      if (!this.manager.connectedCalled) {
+        this.#connectedCallback(false);
+      }
       LitElement$1.prototype.createRenderRoot.call(this);
       return existingShadowRoot;
     }
@@ -264,7 +287,7 @@ class LitElement extends LitElement$1 {
     this.#enableUpdating(true);
     this.performUpdate();
     this.I.resolve();
-    await Promise.resolve();
+    await 0;
     const pendingChildren = this.J.filter((loaded) => !loaded.manager?.loadedCalled);
     if (pendingChildren.length) {
       await Promise.allSettled(pendingChildren.map(async (child) => await child.componentOnReady()));
@@ -386,7 +409,15 @@ const makeRuntime = (options) => {
     customElement(tagName, component) {
       component.K = runtime;
       component.L = tagName;
-      if (!customElements.get(tagName)) {
+      if (isServer) {
+        let define = function() {
+          try {
+            customElements.define(tagName, component);
+          } catch {
+          }
+        };
+        define();
+      } else if (!customElements.get(tagName)) {
         customElements.define(tagName, component);
       }
     }

package/dist/jsx/types.d.ts

@@ -178,7 +178,7 @@ interface JsxNodeArray extends Array<JsxNode> {
  * Do not exclude "manager" and "componentOnReady" since these properties are
  * available both on lazy and non-lazy instance.
  */
-type ExcludedProperties = "addController" | "attributeChangedCallback" | "connectedCallback" | "disconnectedCallback" | "el" | "hasUpdated" | "isUpdatePending" | "listen" | "load" | "loaded" | "removeController" | "render" | "renderOptions" | "renderRoot" | "requestUpdate" | "updateComplete" | "updated" | "willUpdate";
+type ExcludedProperties = "addController" | "attributeChangedCallback" | "connectedCallback" | "disconnectedCallback" | "el" | "elementInternals" | "hasUpdated" | "isUpdatePending" | "listen" | "load" | "loaded" | "removeController" | "render" | "renderOptions" | "renderRoot" | "requestUpdate" | "updateComplete" | "updated" | "willUpdate";
 /**
  * this.el property on a component only has the public properties of the
  * component. All internal methods, properties, as well as LitElement methods

package/dist/{lazyLoad-DJM-hmfq.js → lazyLoad-D3mMxcvZ.js}

@@ -15,6 +15,8 @@ function devOnlyDetectIncorrectLazyUsages(LitClass) {
     "setAttribute",
     // Called by Lit SSR - we proxy it to this.el in ProxyComponent
     "removeAttribute",
+    // Called by Lit SSR - we proxy it to this.el in ProxyComponent
+    "hasAttribute",
     // 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.
@@ -32,21 +34,18 @@ function devOnlyDetectIncorrectLazyUsages(LitClass) {
     if (allowList.has(key)) {
       return;
     }
-    function validateUsage(...args) {
+    function validateUsage() {
       const isDynamicallyCreatedComponentInTest = this === this.el;
       if (isDynamicallyCreatedComponentInTest) {
         return;
       }
-      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] = function functionWrapper(...args) {
-        return validateUsage.call(this, ...args) ?? value.value.call(this, ...args);
+        return validateUsage.call(this) ?? value.value.call(this, ...args);
       };
     } else if (typeof value.get === "function") {
       Object.defineProperty(genericPrototype, key, {
@@ -62,7 +61,7 @@ function devOnlyDetectIncorrectLazyUsages(LitClass) {
     } else if (key === key.toUpperCase() && typeof value.value === "number") {
       return;
     } else {
-      throw new Error(`Unexpected value type for ${key}: ${value}`);
+      throw new Error(`Unexpected value type for ${key}: ${String(value)}`);
     }
   });
 }
@@ -106,6 +105,17 @@ const devOnly$getLitElementTagNameAndRuntime = process.env.NODE_ENV !== "product
     runtime: componentClass.K
   };
 } : void 0;
+function proxyFormMethodsToEvents(constructor) {
+  for (const namePart of ["Associated", "Disabled", "Reset", "StateRestore"]) {
+    const callbackNamePart = `orm${namePart}Callback`;
+    constructor.prototype["f" + callbackNamePart] = async function(...args) {
+      await this.componentOnReady();
+      (this.el ?? this).dispatchEvent(
+        new CustomEvent(`luminaF${callbackNamePart}`, { detail: args })
+      );
+    };
+  }
+}
 const makeDefineCustomElements = (runtime, structure) => function defineCustomElements(windowOrOptions, options) {
   if (!globalThis.customElements) {
     return;
@@ -115,7 +125,7 @@ const makeDefineCustomElements = (runtime, structure) => function defineCustomEl
   if (resourcesUrl) {
     runtime.setAssetPath(resourcesUrl);
   }
-  for (const [tagName, [load, compactMeta = ""]] of Object.entries(structure)) {
+  for (const [tagName, [load, compactMeta = "", flags = 0]] of Object.entries(structure)) {
     if (customElements.get(tagName)) {
       continue;
     }
@@ -123,6 +133,9 @@ const makeDefineCustomElements = (runtime, structure) => function defineCustomEl
     const observedProps = compactObservedProps ? compactObservedProps?.split(lazyMetaItemJoiner).map(parseCondensedProp) : void 0;
     const observedProperties = observedProps?.map(([property]) => property);
     const ProxyClass = class extends ProxyComponent {
+      static {
+        this.formAssociated = flags === 1;
+      }
       static {
         this.observedAttributes = observedProps?.map(([, attribute]) => attribute).filter((attribute) => attribute !== "");
       }
@@ -179,6 +192,7 @@ class ProxyComponent extends HtmlElement {
       this.devOnly$hmrResetStore = (newStore) => {
         this.#store = newStore;
       };
+      this.devOnly$elementInternals = void 0;
     }
     const that = this;
     const ProxyClass = that.constructor;
@@ -265,6 +279,9 @@ class ProxyComponent extends HtmlElement {
       });
     }
   }
+  static {
+    proxyFormMethodsToEvents(this);
+  }
   #litElement;
   #store;
   #pendingAttributes;
@@ -394,6 +411,9 @@ const patchLitElement = (parentClass) => {
     litElementPrototype.removeAttribute = function(qualifiedName) {
       elementPrototype.removeAttribute.call(this.el, qualifiedName);
     };
+    litElementPrototype.hasAttribute = function(qualifiedName) {
+      return elementPrototype.hasAttribute.call(this.el, qualifiedName);
+    };
     defineProperty(litElementPrototype, "isConnected", {
       get() {
         return Reflect.get(elementPrototype, "isConnected", this.el);
@@ -410,5 +430,6 @@ export {
   devOnly$getLitElementTagNameAndRuntime as d,
   emptyFunction as e,
   makeDefineCustomElements as m,
-  noShadowRoot as n
+  noShadowRoot as n,
+  proxyFormMethodsToEvents as p
 };

package/dist/lazyLoad.d.ts

@@ -9,6 +9,7 @@ import { ControllerManager } from './controllers/ControllerManager.ts';
  * it will start loading the actual web component source code.
  */
 export interface DefineCustomElements {
+    /** @deprecated Passing the Window argument is not necessary - omit the first argument */
     (_window?: Window, options?: LazyLoadOptions): void;
     (options?: LazyLoadOptions): void;
 }
@@ -24,14 +25,19 @@ export declare const makeDefineCustomElements: (runtime: Runtime, structure: Rea
  * map-components). Also, the meta is a string to speed-up parsing
  * (browsers parse strings much faster).
  * See https://twitter.com/mathias/status/1143551692732030979
+ *
+ * - 1st item - the promise to load the component.
+ * - 2nd item: compact metadata string (lists attributes, properties, async
+ *   methods, and sync methods)
+ * - 3rd item: flags. If present, it will be 1 and indicates that the component
+ *   is formAssociated. We can expand this field to include more information in
+ *   the future using bit flags.
  */
-type CompactMeta = readonly [load: () => Promise<Record<string, typeof LitElement>>, compact?: string];
+type CompactMeta = readonly [load: () => Promise<Record<string, typeof LitElement>>, compact?: string, flags?: 1];
 /**
  * If this file is run from a Node.js environment, HTMLElement won't be defined.
- * Falling back to uselessly extending parseCondensedProp in that case
- * (that particular function chosen just because it already exists, rather than
- * needlessly creating mock class/function)
- * That will error if you try to instantiate a ProxyComponent in Node.js, but
+ * Falling back to uselessly extending emptyFunction in that case.
+ * This will error if you try to instantiate a ProxyComponent in Node.js, but
  * that is expected - if you need to instantiate ProxyComponent, HTMLElement
  * must be defined
  */
@@ -75,6 +81,7 @@ export declare abstract class ProxyComponent extends HtmlElement {
     devOnly$hmrSetAttributes: Set<string>;
     devOnly$InitializeComponent?: (module: Record<string, typeof LitElement>) => void;
     devOnly$hmrResetStore?: (newStore: Record<string, unknown>) => void;
+    devOnly$elementInternals?: ElementInternals;
     /**
      * This property is only set in development mode and exists only for usage in
      * tests or during debugging

package/dist/makeRuntime.d.ts

@@ -70,7 +70,7 @@ export type Runtime = RuntimeOptions & {
      */
     o?: () => AccessorObservableLike;
     /**
-     * In CDN build, we can only import @arcgis/core async, so the lazy loader will need
+     * In CDN build, we can only import `@arcgis/core` async, so the lazy loader will need
      * to await this promise before beginning hydration so that the reactiveUtils
      * integration modules had time to load.
      *

package/dist/{proxyExports-CXEnG2Az.js → proxyExports-i81aYgwa.js}

@@ -1,5 +1,5 @@
-import { b as setParentController, d as retrieveParentControllers, j as setAmbientChildController, f as bypassReadOnly } from "./ControllerInternals-By6dhpY-.js";
-import { t as trackKey } from "./Controller-DQnXLHsP.js";
+import { b as setParentController, j as setAmbientChildController, d as retrieveParentControllers, e as bypassReadOnly } from "./ControllerInternals-DP8cXrza.js";
+import { t as trackKey } from "./Controller-mLlWzD96.js";
 const proxyExports = (Class) => (...args) => {
   const ambientControllers = retrieveParentControllers();
   const instance = new Class(...args);

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@arcgis/lumina",
-  "version": "5.1.0-next.6",
+  "version": "5.1.0-next.60",
+  "description": "Runtime for WebGIS SDK web components",
   "sideEffects": false,
   "type": "module",
   "main": "dist/index.cjs",
@@ -28,7 +29,7 @@
   "dependencies": {
     "csstype": "^3.1.3",
     "tslib": "^2.8.1",
-    "@arcgis/toolkit": "~5.1.0-next.6"
+    "@arcgis/toolkit": "~5.1.0-next.60"
   },
   "peerDependencies": {
     "@lit/context": "^1.1.6",