@arcgis/lumina 4.31.0-next.98 → 4.32.0-next.10

package/dist/LitElement.d.ts

@@ -36,6 +36,9 @@ export declare class LitElement extends OriginalLitElement implements ComponentL
     /** @internal */
     static runtime: Runtime;
     static tagName: string;
+    /**
+     * Customize Lit's default style handling to support non-shadow-root styles
+     */
     static finalizeStyles(styles?: CSSResultGroup): CSSResultOrNative[];
     static createProperty(name: PropertyKey, 
     /**
@@ -156,8 +159,17 @@ export declare class LitElement extends OriginalLitElement implements ComponentL
      * }
      * ```
      */
-    listen<K extends keyof HTMLElementEventMap>(type: K, listener: (this: this, event: HTMLElementEventMap[K]) => unknown, options?: AddEventListenerOptions | boolean): void;
-    listen(type: string, listener: (this: this, event: Event) => unknown, options?: AddEventListenerOptions | boolean): void;
+    listen<K extends keyof HTMLElementEventMap>(name: K, listener: (this: this, event: HTMLElementEventMap[K]) => unknown, options?: AddEventListenerOptions | 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, 
+    /**
+     * The "NoInfer" here forces type argument to be specified explicitly.
+     * Without it, the following would be allowed:
+     * ```tsx
+     * this.listen("focus",(event:NotFocusEvent)=>{....})
+     * ```
+     */
+    listener: (this: this, event: NoInfer<EventType>) => unknown, options?: AddEventListenerOptions | boolean): void;
     /**
      * A helper for setting even listener on any element (or window / document).
      *
@@ -195,7 +207,15 @@ export declare class LitElement extends OriginalLitElement implements ComponentL
     listenOn<Name extends keyof HTMLElementEventMap>(target: HTMLElement, name: Name, listener: Listener<this, HTMLElementEventMap[Name] & {
         currentTarget: HTMLElement;
     }>, options?: AddEventListenerOptions | boolean): void;
-    listenOn<EventType extends Event = CustomEvent<"Provide type like this.listenOn<ToEvents<ArcgisCounter>['arcgisClick']>() to get type-checked payload type">, Target = EventTarget>(target: Target, name: string, listener: Listener<this, EventType & {
+    listenOn<EventType extends Event = CustomEvent<"Provide type like this.listenOn<ToEvents<ArcgisCounter>['arcgisClick']>() to get type-checked payload type">, Target = EventTarget>(target: Target, name: string, 
+    /**
+     * The "NoInfer" here forces type argument to be specified explicitly.
+     * Without it, the following would be allowed:
+     * ```tsx
+     * this.listen("focus",(event:NotFocusEvent)=>{....})
+     * ```
+     */
+    listener: Listener<this, NoInfer<EventType> & {
         currentTarget: Target;
     }>, options?: AddEventListenerOptions | boolean): void;
     /**

package/dist/createEvent.d.ts

@@ -1,4 +1,4 @@
-import type { EventEmitter } from "@arcgis/components-controllers";
+import type { BaseComponent, EventEmitter } from "@arcgis/components-controllers";
 export type EventOptions = {
     /**
      * A Boolean indicating whether the event bubbles up through the DOM or not.
@@ -22,7 +22,7 @@ export type EventOptions = {
      */
     composed?: boolean;
 };
-export declare const createEventFactory: <T = undefined>(eventName?: string, options?: EventOptions, component?: import("@arcgis/components-controllers").BaseComponent) => EventEmitter<T>;
+export declare const createEventFactory: <T = undefined>(eventName?: string, options?: EventOptions, component?: BaseComponent) => EventEmitter<T>;
 /**
  * Creates an event emitter.
  * Events emitted by your component will be included in the documentation.

package/dist/devOnlyDetectIncorrectLazyUsages.d.ts

@@ -4,7 +4,10 @@ import type { LitElement } from "./LitElement";
  * Instead, a proxy element is present and should be used for all DOM actions.
  *
  * In practice, this means using this.el.getAttribute() instead of
- * this.getAttribute() and etc for each DOM method
+ * this.getAttribute() and etc for each DOM method.
+ *
+ * To detect incorrect usages, this function overwrites each DOM member on the
+ * LitElement prototype with an exception-throwing function.
  *
  * This code does not ship in production builds.
  */

package/dist/index.d.ts

@@ -3,13 +3,14 @@ export { createEvent } from "./createEvent";
 export { state, property, method } from "./decorators";
 export type { HmrComponentMeta } from "./hmrSupport";
 export { handleComponentMetaUpdate, handleHmrUpdate } from "./hmrSupport";
-export type { DefineCustomElements, LazyLoadOptions } from "./lazyLoad";
+export type { DefineCustomElements, LazyLoadOptions, GlobalThisWithPuppeteerEnv } from "./lazyLoad";
 export { makeDefineCustomElements } from "./lazyLoad";
 export { LitElement } from "./LitElement";
 export type { PublicLitElement } from "./PublicLitElement";
 export type { Runtime, RuntimeOptions, DevOnlyGlobalRuntime, DevOnlyGlobalComponentRefCallback } from "./runtime";
 export { makeRuntime } from "./runtime";
 export * from "./jsx/jsx";
-export { safeClassMap, safeStyleMap } from "./jsx/directives";
+export { safeClassMap, safeStyleMap, directive, live } from "./jsx/directives";
+export { nothing, noChange, setAttribute, stringOrBoolean } from "./jsx/utils";
 export { noShadowRoot } from "./utils";
 export { createPrototypeProxy } from "./wrappersUtils";

package/dist/index.js

@@ -8,19 +8,20 @@ import {
 } from "./chunk-CH52Q2MB.js";
 
 // src/createEvent.ts
-import { retrieveComponent, trackPropertyKey } from "@arcgis/components-controllers";
+import { retrieveComponent, trackPropertyKey, keyTrackResolve } from "@arcgis/components-controllers";
 var createEventFactory = (eventName = "", options = {}, component = retrieveComponent()) => {
   const emitter = {
     emit: (payload) => {
-      if (process.env.NODE_ENV !== "production") {
-        if (eventName === "") {
+      if (process.env.NODE_ENV !== "production" && !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" && 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,
@@ -61,11 +62,21 @@ 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"
+    "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()"
@@ -75,28 +86,36 @@ function devOnlyDetectIncorrectLazyUsages(LitClass) {
     ...Object.getOwnPropertyDescriptors(Element.prototype),
     ...Object.getOwnPropertyDescriptors(Node.prototype),
     ...Object.getOwnPropertyDescriptors(EventTarget.prototype)
-  }).filter(([key, { value }]) => typeof value === "function" && !allowList.has(key)).forEach(([key]) => {
-    genericPrototype[key] = (...args) => {
+  }).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 calling this.${key}() directly as it won't work correctly in lazy-builds. Instead, ${customErrorMessages[key] ?? `use this.el.${key}()`}`
+        `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, el) {
-  let ancestor = el;
+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 litParent._postLoad.promise;
     }
   }
   return false;
@@ -151,6 +170,7 @@ function createLazyElement([tagName, [load, compactMeta = ""]]) {
   };
   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;
@@ -159,15 +179,6 @@ var HtmlElement = globalThis.HTMLElement ?? parseCondensedProp;
 var ProxyComponent = class extends HtmlElement {
   constructor() {
     super();
-    /**
-     * On HMR, preserve the values of all properties that at least once were set
-     * by someone other than component itself.
-     *
-     * @internal
-     */
-    this._hmrSetProps = /* @__PURE__ */ new Set();
-    /** @internal */
-    this._hmrSetAttributes = /* @__PURE__ */ new Set();
     /** @internal */
     this._store = {};
     /**
@@ -189,16 +200,32 @@ var ProxyComponent = class extends HtmlElement {
      * 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(this._postLoaded.reject);
+      void ProxyClass._loadPromise.then(this._initializeComponent.bind(this)).catch((error) => {
+        this._postLoaded.reject(error);
+        setTimeout(() => {
+          throw 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 {
@@ -211,7 +238,7 @@ var ProxyComponent = class extends HtmlElement {
     this._syncMethods?.forEach(this._bindSync, this);
   }
   static _bindProp(propName) {
-    Object.defineProperty(this.prototype, propName, {
+    defineProperty(this.prototype, propName, {
       configurable: true,
       enumerable: true,
       get() {
@@ -226,7 +253,7 @@ var ProxyComponent = class extends HtmlElement {
     });
   }
   static _bindAsync(methodName) {
-    Object.defineProperty(this.prototype, methodName, {
+    defineProperty(this.prototype, methodName, {
       async value(...args) {
         if (!this._litElement) {
           await this._postLoaded.promise;
@@ -234,13 +261,11 @@ var ProxyComponent = class extends HtmlElement {
         const genericLitElement = this._litElement;
         return await genericLitElement[methodName](...args);
       },
-      configurable: true,
-      writable: true,
-      enumerable: true
+      configurable: true
     });
   }
   static _bindSync(methodName) {
-    Object.defineProperty(this.prototype, methodName, {
+    defineProperty(this.prototype, methodName, {
       value(...args) {
         if (process.env.NODE_ENV === "development" && !this._litElement) {
           const ProxyClass = this.constructor;
@@ -251,8 +276,7 @@ var ProxyComponent = class extends HtmlElement {
         const genericLitElement = this._litElement;
         return genericLitElement[methodName](...args);
       },
-      configurable: true,
-      enumerable: true
+      configurable: true
     });
   }
   get manager() {
@@ -310,10 +334,10 @@ var ProxyComponent = class extends HtmlElement {
   }
   connectedCallback() {
     if (this._litElement) {
-      this._litElement?.connectedCallback();
+      this._litElement.connectedCallback();
     } else {
       queueMicrotask(() => {
-        this._ancestorLoad = attachToAncestor(this, this);
+        this._ancestorLoad = attachToAncestor(this);
       });
     }
   }
@@ -325,7 +349,7 @@ var ProxyComponent = class extends HtmlElement {
    */
   async componentOnReady() {
     await this._postLoaded.promise;
-    return this._litElement;
+    return this;
   }
   /** @internal */
   _initializeComponent(module) {
@@ -352,17 +376,38 @@ var ProxyComponent = class extends HtmlElement {
     const isFirstInitialization = !ProxyClass._LitConstructor;
     if (isFirstInitialization) {
       ProxyClass._LitConstructor = LitConstructor;
-      LitConstructor.prototype.removeAttribute = removeAttribute;
-      LitConstructor.prototype.setAttribute = setAttribute;
+      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) {
-        devOnlyDetectIncorrectLazyUsages(Object.getPrototypeOf(LitConstructor));
+        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;
-    this._litElement = litElement;
+    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(
@@ -381,26 +426,24 @@ var ProxyComponent = class extends HtmlElement {
       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 can not infer statically. For these attributes, lazy-loading version of your component won't work correctly, thus this must be resolved`
+          `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 can not infer statically. This is a non-critical issue, but does indicate that something is going wrong and should be fixed`
+          `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`
         );
       }
     }
-    if (this.isConnected) {
-      litElement.connectedCallback();
+    const isStillConnected = this.isConnected;
+    if (isStillConnected || this._ancestorLoad) {
+      litElement.connectedCallback?.();
+      if (!isStillConnected) {
+        litElement.disconnectedCallback();
+      }
     }
   }
 };
-function removeAttribute(qualifiedName) {
-  HTMLElement.prototype.removeAttribute.call(this.el, qualifiedName);
-}
-function setAttribute(qualifiedName, value) {
-  HTMLElement.prototype.setAttribute.call(this.el, qualifiedName, value);
-}
 function syncLitElement([key, value]) {
   this[key] = value;
 }
@@ -542,13 +585,6 @@ var LitElement = class _LitElement extends OriginalLitElement {
      * @internal
      */
     this._offspring = this.constructor.lazy?._offspring ?? [];
-    /**
-     * Promise that resolves once parent's load() completed. False if there is no
-     * parent
-     *
-     * @internal
-     */
-    this._ancestorLoad = this.constructor.lazy?._ancestorLoad;
     this._postLoaded = this.constructor.lazy?._postLoaded ?? new Deferred2();
     this._enableUpdating = this.enableUpdating;
     this.enableUpdating = emptyFunction;
@@ -564,6 +600,9 @@ var LitElement = class _LitElement extends OriginalLitElement {
       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);
@@ -618,7 +657,15 @@ var LitElement = class _LitElement extends OriginalLitElement {
     const isFirstCall = !this.manager.connectedCalled;
     super.connectedCallback();
     if (isFirstCall) {
-      queueMicrotask(() => void this._load().catch(this._postLoaded.reject));
+      queueMicrotask(
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises, @typescript-eslint/promise-function-async
+        () => this._load().catch((error) => {
+          this._postLoaded.reject(error);
+          setTimeout(() => {
+            throw error;
+          });
+        })
+      );
     }
   }
   /**
@@ -643,16 +690,18 @@ 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 */
   async _load() {
-    const parentLoadPromise = this._ancestorLoad ?? attachToAncestor(this, this);
+    const parentLoadPromise = this.el._ancestorLoad ?? attachToAncestor(this.el);
     if (parentLoadPromise) {
       await parentLoadPromise;
     }
@@ -746,21 +795,36 @@ function makeRuntime(options) {
 }
 
 // src/jsx/jsx.ts
-import { directive as litDirective } from "lit-html/directive.js";
-import { noChange as litNoChange, nothing as litNothing } from "lit-html";
+var Fragment = void 0;
 var bindAttribute = void 0;
 var bindBooleanAttribute = void 0;
 var bindProperty = void 0;
 var bindEvent = void 0;
-var nothing = litNothing;
-var noChange = litNoChange;
-var directive = litDirective;
 
 // 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;
+function setAttribute(element, attributeName, value) {
+  if (value == null) {
+    element.removeAttribute(attributeName);
+  } else {
+    element.setAttribute(attributeName, value);
+  }
+}
+var stringOrBoolean = {
+  toAttribute: (value) => value === true ? "" : value === false ? null : value
+};
 
 // src/wrappersUtils.ts
 function createPrototypeProxy(tagName) {
@@ -782,6 +846,7 @@ function createPrototypeProxy(tagName) {
   return customElement;
 }
 export {
+  Fragment,
   LitElement,
   bindAttribute,
   bindBooleanAttribute,
@@ -792,6 +857,7 @@ export {
   directive,
   handleComponentMetaUpdate,
   handleHmrUpdate,
+  live,
   makeDefineCustomElements,
   makeRuntime,
   method,
@@ -801,5 +867,7 @@ export {
   property,
   safeClassMap,
   safeStyleMap,
-  state
+  setAttribute,
+  state,
+  stringOrBoolean
 };

package/dist/jsx/directives.d.ts

@@ -4,6 +4,7 @@ import type { ClassInfo } from "lit-html/directives/class-map.js";
 import type { DirectiveResult } from "lit/directive.js";
 import type { ClassMapDirective } from "lit/directives/class-map.js";
 import type { StyleMapDirective } from "lit/directives/style-map.js";
+import type { DirectiveClass } from "lit-html/directive.js";
 /**
  * You likely won't have to import this directly. It will be added during
  * _JSX to lit-html_ conversion.
@@ -50,3 +51,23 @@ export declare const safeClassMap: (parameters: ClassInfo | Nil | string) => Dir
  * determine at runtime if directive should be called
  */
 export declare const safeStyleMap: (parameters: CssProperties | Nil | string) => DirectiveResult<typeof StyleMapDirective> | Nil | string;
+/**
+ * Creates a user-facing directive function from a Directive class. This
+ * function has the same parameters as the directive's render() method.
+ *
+ * @remarks
+ * This is equivalent to Lit's native "directive()", but has return type
+ * "never" to allow it be set as a value for any JSX attribute.
+ */
+export declare const directive: <C extends DirectiveClass>(c: C) => (...values: Parameters<InstanceType<C>["render"]>) => never;
+/**
+ * Checks binding values against live DOM values, instead of previously bound
+ * values, when determining whether to update the value.
+ *
+ * @see https://lit.dev/docs/templates/directives/#live
+ *
+ * @remarks
+ * This is equivalent to Lit's native "directive()", but has return type
+ * "never" to allow it be set as a value for any JSX attribute.
+ */
+export declare const live: (value: unknown) => never;

package/dist/jsx/jsx.d.ts

@@ -10,11 +10,9 @@
 import type { Properties as CssProperties } from "csstype";
 import type { TemplateResult } from "lit-html";
 import type { DirectiveResult } from "lit-html/directive.js";
-import type { ClassMapDirective } from "lit-html/directives/class-map.js";
+import type { ClassMapDirective, ClassInfo } from "lit-html/directives/class-map.js";
 import type { StyleMapDirective } from "lit-html/directives/style-map.js";
 import type { Ref } from "lit-html/directives/ref.js";
-import type { ClassInfo } from "lit/directives/class-map.js";
-import type { DirectiveClass } from "lit/directive.js";
 /**
  * The "h" namespace is used to import JSX types for elements and attributes.
  * It is imported in order to avoid conflicting global JSX issues.
@@ -24,31 +22,21 @@ export declare namespace h {
     export type { LuminaJsx as JSX };
 }
 /**
- * Fragment
- *
- * @remarks
- * This function is not actually defined in the code since references to it will
- * be removed at build time by the jsxToLitHtml plugin.
+ * The references to this function are removed at build time.
  */
-export declare function Fragment(props: {
+export declare const Fragment: (props: {
     children?: JsxNode;
-}): TemplateResult;
+}) => TemplateResult;
 /**
- * @remarks
- * This function is not actually defined in the code since references to it will
- * be removed at build time by the jsxToLitHtml plugin.
- */
-export declare function h(sel: any, data?: any, text?: any): TemplateResult;
-/**
- * @remarks
- * This function is not actually defined in the code since references to it will
- * be removed at build time by the jsxToLitHtml plugin.
+ * @internal
+ * The references to this function are removed at build time. You do not need
+ * to import it directly
  */
 export declare function jsx(type: string, props: unknown, key?: unknown): JsxNode;
 /**
- * @remarks
- * This function is not actually defined in the code since references to it will
- * be removed at build time by the jsxToLitHtml plugin.
+ * @internal
+ * The references to this function are removed at build time. You do not need
+ * to import it directly
  */
 export declare function jsxs(type: string, props: unknown, key?: unknown): JsxNode;
 /**
@@ -177,44 +165,6 @@ export declare const bindEvent: <T>(descriptor: T | (AddEventListenerOptions & {
 export type JsxNode = DirectiveResult<any> | JsxNodeArray | Node | TemplateResult | boolean | number | (NonNullable<unknown> & string) | null | undefined;
 interface JsxNodeArray extends Array<JsxNode> {
 }
-/**
- * Equivalent to Lit's "nothing", but has type "never" to allow it to be set as a
- * value for any JSX attribute.
- *
- * By default in Lit, nullish attribute value renders to an attribute without a
- * value (which is interpreted by HTML as "true"). To tell Lit that you don't
- * want the attribute to be present, use the `nothing` value.
- *
- * @example
- * ```tsx
- * <a href={this.href ?? nothing}>{this.label}</a>
- * ```
- *
- * @remarks
- * This is not a concern for properties as they are passed as is without
- * serialization. For this reason, during _JSX to lit-html_ conversion, most JSX
- * props are converted properties, except for the few cases when an attribute
- * has no equivalent property.
- */
-export declare const nothing: never;
-/**
- * A sentinel value that signals that a value was handled by a directive and
- * should not be written to the DOM.
- *
- * @remarks
- * This is equivalent to Lit's native "noChange", but has type "never" to allow
- * it be set as a value for any JSX attribute.
- */
-export declare const noChange: never;
-/**
- * Creates a user-facing directive function from a Directive class. This
- * function has the same parameters as the directive's render() method.
- *
- * @remarks
- * This is equivalent to Lit's native "directive()", but has return type
- * "never" to allow it be set as a value for any JSX attribute.
- */
-export declare const directive: <C extends DirectiveClass>(c: C) => (...values: Parameters<InstanceType<C>["render"]>) => never;
 /**
  * this.el property on a component only has the public properties of the
  * component. All internal methods, properties, as well as LitElement methods
@@ -1078,6 +1028,7 @@ export declare namespace LuminaJsx {
         fetchPriority?: "high" | "low" | "auto";
     }
     interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
+        autocomplete?: AutoFill;
         accept?: string;
         alt?: string;
         autofocus?: boolean;
@@ -1342,6 +1293,8 @@ export declare namespace LuminaJsx {
         form?: string;
         for?: string;
         name?: string;
+        value?: string | number;
+        defaultValue?: string | number;
     }
     interface ProgressHTMLAttributes<T> extends HTMLAttributes<T> {
         max?: number | string;
@@ -1409,6 +1362,7 @@ export declare namespace LuminaJsx {
         required?: boolean;
         rows?: number | string;
         value?: string | number;
+        defaultValue?: string | number;
         wrap?: "hard" | "soft" | "off";
         maxLength?: number | string;
         minLength?: number | string;
@@ -1910,7 +1864,7 @@ export declare namespace LuminaJsx {
         base: BaseHTMLAttributes<HTMLBaseElement>;
         bdi: HTMLAttributes;
         bdo: HTMLAttributes;
-        blockquote: BlockquoteHTMLAttributes<HTMLElement>;
+        blockquote: BlockquoteHTMLAttributes<HTMLQuoteElement>;
         body: HTMLAttributes<HTMLBodyElement>;
         br: HTMLAttributes<HTMLBRElement>;
         button: ButtonHTMLAttributes<HTMLButtonElement>;
@@ -1920,7 +1874,7 @@ export declare namespace LuminaJsx {
         code: HTMLAttributes;
         col: ColHTMLAttributes<HTMLTableColElement>;
         colgroup: ColgroupHTMLAttributes<HTMLTableColElement>;
-        data: DataHTMLAttributes<HTMLElement>;
+        data: DataHTMLAttributes<HTMLDataElement>;
         datalist: HTMLAttributes<HTMLDataListElement>;
         dd: HTMLAttributes;
         del: HTMLAttributes;
@@ -1962,16 +1916,16 @@ export declare namespace LuminaJsx {
         map: MapHTMLAttributes<HTMLMapElement>;
         math: MathMLAttributes;
         mark: HTMLAttributes;
-        menu: MenuHTMLAttributes<HTMLElement>;
+        menu: MenuHTMLAttributes<HTMLMenuElement>;
         meta: MetaHTMLAttributes<HTMLMetaElement>;
-        meter: MeterHTMLAttributes<HTMLElement>;
+        meter: MeterHTMLAttributes<HTMLMeterElement>;
         nav: HTMLAttributes;
         noscript: HTMLAttributes;
         object: ObjectHTMLAttributes<HTMLObjectElement>;
         ol: OlHTMLAttributes<HTMLOListElement>;
         optgroup: OptgroupHTMLAttributes<HTMLOptGroupElement>;
         option: OptionHTMLAttributes<HTMLOptionElement>;
-        output: OutputHTMLAttributes<HTMLElement>;
+        output: OutputHTMLAttributes<HTMLOutputElement>;
         p: HTMLAttributes<HTMLParagraphElement>;
         picture: HTMLAttributes;
         pre: HTMLAttributes<HTMLPreElement>;
@@ -2009,7 +1963,7 @@ export declare namespace LuminaJsx {
         tfoot: HTMLAttributes<HTMLTableSectionElement>;
         th: ThHTMLAttributes<HTMLTableCellElement>;
         thead: HTMLAttributes<HTMLTableSectionElement>;
-        time: TimeHTMLAttributes<HTMLElement>;
+        time: TimeHTMLAttributes<HTMLTimeElement>;
         title: HTMLAttributes<HTMLTitleElement>;
         tr: HTMLAttributes<HTMLTableRowElement>;
         track: TrackHTMLAttributes<HTMLTrackElement>;

package/dist/jsx/utils.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Equivalent to Lit's "nothing", but has type "never" to allow it to be set as a
+ * value for any JSX attribute.
+ *
+ * By default in Lit, nullish attribute value renders to an attribute without a
+ * value (which is interpreted by HTML as "true"). To tell Lit that you don't
+ * want the attribute to be present, use the `nothing` value.
+ *
+ * @example
+ * ```tsx
+ * <a href={this.href ?? nothing}>{this.label}</a>
+ * ```
+ *
+ * @remarks
+ * This is not a concern for properties as they are passed as is without
+ * serialization. For this reason, during _JSX to lit-html_ conversion, most JSX
+ * props are converted properties, except for the few cases when an attribute
+ * has no equivalent property.
+ */
+export declare const nothing: never;
+/**
+ * A sentinel value that signals that a value was handled by a directive and
+ * should not be written to the DOM.
+ *
+ * @remarks
+ * This is equivalent to Lit's native "noChange", but has type "never" to allow
+ * it be set as a value for any JSX attribute.
+ */
+export declare const noChange: never;
+/**
+ * Like native element.setAttribute(), but instead of stringifying nullish
+ * values, will call element.removeAttribute()
+ */
+export declare function setAttribute(element: Element, attributeName: string, value: unknown): void;
+/**
+ * If you have a property that can be both of string or boolean type, there is
+ * no automatic boolean conversion in place - that means the attribute is
+ * treated as a string.
+ *
+ * This converter improves that handling by converting `true` property value to
+ * an empty attribute, and `false` to removing the attribute.
+ *
+ * When setting the boolean attribute, the value is still not parsed (and will
+ * be either `null` or `""`). This matches the behavior in Stencil.
+ *
+ * ```tsx
+ * @property({ reflects:true, converter: stringOrBoolean }) icon: string | boolean;
+ * // ...
+ * this.icon = false;  // attribute is removed
+ * this.icon = true;  // attribute is ""
+ * this.icon = "name";  // attribute is "name"
+ * ```
+ */
+export declare const stringOrBoolean: {
+    toAttribute: (value: unknown) => string | null;
+};

package/dist/lazyLoad.d.ts

@@ -2,6 +2,7 @@ import { Deferred } from "@arcgis/components-utils";
 import type { LitElement } from "./LitElement";
 import type { Runtime } from "./runtime";
 import type { ControllerManager } from "@arcgis/components-controllers";
+import type { PublicLitElement } from "./PublicLitElement";
 /**
  * Defines lazy-loading proxy components for all web components in this package.
  *
@@ -105,7 +106,9 @@ export declare abstract class ProxyComponent extends HtmlElement {
     /**
      * Direct offspring that should be awaited before loaded() is emitted
      */
-    _offspring: (Partial<Pick<LitElement, "manager">> & Pick<LitElement, "componentOnReady">)[];
+    _offspring: (PublicLitElement & {
+        manager?: LitElement["manager"];
+    })[];
     /**
      * Promise that resolves once parent's load() completed. False if there is no
      * parent
@@ -147,8 +150,11 @@ export declare abstract class ProxyComponent extends HtmlElement {
     /**
      * Create a promise that resolves once component is fully loaded
      */
-    componentOnReady(): Promise<LitElement>;
+    componentOnReady(): Promise<this>;
     /** @internal */
     _initializeComponent(module: Record<string, typeof LitElement>): void;
 }
+export type GlobalThisWithPuppeteerEnv = typeof globalThis & {
+    devOnly$createdElements?: WeakRef<ProxyComponent>[];
+};
 export {};

package/dist/lifecycleSupport.d.ts

@@ -5,4 +5,4 @@ import type { ProxyComponent } from "./lazyLoad";
  * Also, return a promise that will delay our load() until parent's load()
  * is completed.
  */
-export declare function attachToAncestor(child: ProxyComponent["_offspring"][number], el: HTMLElement): Promise<void> | false;
+export declare function attachToAncestor(child: ProxyComponent["_offspring"][number]): Promise<void> | false;

package/dist/runtime.d.ts

@@ -3,12 +3,12 @@ import type { LitElement } from "./LitElement";
 /**
  * `@arcgis/lumina` package may be bundled once but used by multiple packages with
  * different configuration options. For that reason, the configuration options
- * can not be a global object, but has to be an object that you pass around.
+ * cannot be a global object, but has to be an object that you pass around.
  */
 export type Runtime = RuntimeOptions & {
     /**
      * Get the base path to where the package assets can be found.
-     * By default, the package asset path is set to "https://js.arcgis.com/<simplified-package-name>/<released-verion>/".
+     * By default, the package asset path is set to `https://js.arcgis.com/<simplified-package-name>/<released-verion>/`.
      * We are hosting our assets on a CDN (Content Delivery Network) to ensure fast and reliable access.
      * It is CORS-enabled, so you can load the assets from any domain.
      * Use "setAssetPath(path)" if the path needs to be customized.
@@ -18,8 +18,8 @@ export type Runtime = RuntimeOptions & {
      * Used to manually set the base path where package assets (like localization
      * and icons) can be found.
      *
-     * By default, the package asset path is set to "https://js.arcgis.com/<simplified-package-name>/<released-verion>/".
-     * For example, "https://js.arcgis.com/map-components/4.30/".
+     * By default, the package asset path is set to `https://js.arcgis.com/<simplified-package-name>/<released-verion>/`.
+     * For example, `https://js.arcgis.com/map-components/4.30/`.
      * We are hosting our assets on a CDN (Content Delivery Network) to ensure fast and reliable access.
      * It is CORS-enabled, so you can load the assets from any domain.
      * This is the recommended way to load the assets and avoid bundling them with your application.

package/dist/{stencil-ssr-compatibility → stencilSsrCompatibility}/index.js

@@ -1,8 +1,8 @@
-// src/stencil-ssr-compatibility/index.ts
+// src/stencilSsrCompatibility/index.ts
 import { getWindow } from "@lit-labs/ssr/lib/dom-shim.js";
 import { render } from "@lit-labs/ssr/lib/render.js";
 import { html } from "@lit-labs/ssr/lib/server-template.js";
-import { unsafeStatic, withStatic } from "lit/static-html.js";
+import { unsafeStatic, withStatic } from "lit-html/static.js";
 import { collectResult } from "@lit-labs/ssr/lib/render-result.js";
 import { RenderResultReadable } from "@lit-labs/ssr/lib/render-result-readable.js";
 var staticHtml = withStatic(html);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcgis/lumina",
-  "version": "4.31.0-next.98",
+  "version": "4.32.0-next.10",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -8,7 +8,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./config": "./dist/config.js",
-    "./stencil-ssr-compatibility": "./dist/stencil-ssr-compatibility/index.js",
+    "./stencilSsrCompatibility": "./dist/stencilSsrCompatibility/index.js",
     "./typings": {
       "types": "./dist/typings/index.d.ts"
     },
@@ -17,33 +17,14 @@
   "files": [
     "dist/"
   ],
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public"
-  },
   "license": "SEE LICENSE IN LICENSE.md",
-  "scripts": {
-    "build": "tsup",
-    "build:dev": "tsup --sourcemap",
-    "watch": "yarn build:dev --watch",
-    "clean": "rimraf ./dist ./build ./turbo ./node_modules"
-  },
   "dependencies": {
-    "@arcgis/components-controllers": "4.31.0-next.98",
-    "@arcgis/components-utils": "4.31.0-next.98",
+    "@arcgis/components-controllers": "4.32.0-next.10",
+    "@arcgis/components-utils": "4.32.0-next.10",
     "@lit-labs/ssr": "^3.2.2",
     "@lit-labs/ssr-client": "^1.1.7",
     "csstype": "^3.1.3",
-    "lit": "^3.1.2",
+    "lit": "^3.2.0",
     "tslib": "^2.7.0"
-  },
-  "devDependencies": {
-    "@arcgis/typescript-config": "4.31.0-next.98",
-    "@types/node": "^20.2.5",
-    "eslint": "^8.55.0",
-    "rimraf": "^5.0.0",
-    "tsup": "^8.2.4",
-    "typescript": "~5.4.0"
-  },
-  "gitHead": "cbe08697f9589db42635f6184bf7bd3dafcb2d79"
-}
+  }
+}