@arcgis/lumina 4.32.0-next.8 → 4.32.0-next.80

package/dist/jsx/types.d.ts

@@ -0,0 +1,421 @@
+/**
+ * This reference directive is removed by tsup at compile time. It is only
+ * needed to correctly type-check this package. For consumers of this package,
+ * they should have an `./src/lumina.ts` file like so:
+ * ```ts
+ * /// <reference types="@arcgis/lumina/typings" />
+ * ```
+ */
+import type { TemplateResult } from "lit-html";
+import type { DirectiveResult } from "lit-html/directive.js";
+import type { HTMLElementTags, HTMLAttributes, GlobalEventHandlersCamelCase, SvgElementTags, DOMAttributes, AriaAttributes } from "./generatedTypes";
+import type { CustomAttributes } from "./baseTypes";
+/**
+ * The "h" namespace is used to import JSX types for elements and attributes.
+ * It is imported in order to avoid conflicting global JSX issues.
+ */
+export declare namespace h {
+    export function h(sel: any, data?: any, text?: any): TemplateResult;
+    export type { LuminaJsx as JSX };
+}
+/**
+ * The references to this function are removed at build time.
+ */
+export declare const Fragment: (props: {
+    children?: JsxNode;
+}) => TemplateResult;
+/**
+ * @private
+ * 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;
+/**
+ * @private
+ * 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;
+/**
+ * The JSX to lit-html conversion has a heuristic to determine whether a prop
+ * should be converted to a property or attribute at runtime. In cases where
+ * that heuristic is not sufficient, you can use the `bindAttribute()` function to
+ * explicitly tell the conversion to treat the prop as an attribute.
+ *
+ * This function call will be erased at build-time, thus it has no runtime
+ * impact. But that also means you should not call this function anywhere other
+ * than at the top level of a JSX prop value
+ *
+ * @example
+ * ```tsx
+ * <my-component
+ *   name={bindAttribute("Pass name as attribute rather than property")}
+ * />
+ * ```
+ *
+ * Will be converted at build time into:
+ * ```ts
+ * html`<my-component name="Pass name as attribute rather than property"></my-component>`
+ * ```
+ *
+ * @remarks
+ * If you often encounter cases where the JSX to lit-html incorrectly converts
+ * the prop to a property necessitating the use of `bindAttribute()`, please open
+ * an issue for Lumina.
+ */
+export declare const bindAttribute: <T>(value: T) => T;
+/**
+ * The JSX to lit-html conversion has a heuristic to determine whether a prop
+ * should be converted to a property, attribute or boolean attribute at runtime.
+ * In cases where that heuristic is not sufficient, you can use the
+ * `bindBooleanAttribute()` function to explicitly tell the conversion to treat the
+ * prop as a boolean attribute.
+ *
+ * This function call will be erased at build-time, thus it has no runtime
+ * impact. But that also means you should not call this function anywhere other
+ * than at the top level of a JSX prop value
+ *
+ * @see https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions
+ *
+ * @example
+ * ```tsx
+ * <my-component
+ *   checked={bindBooleanAttribute(myBoolean)}
+ * />
+ * ```
+ *
+ * Will be converted at build time into:
+ * ```ts
+ * html`<my-component ?checked=${myBoolean}></my-component>`
+ * ```
+ *
+ * @remarks
+ * If you often encounter cases where the JSX to lit-html incorrectly converts
+ * the prop necessitating the use of `bindBooleanAttribute()`, please open
+ * an issue for Lumina.
+ */
+export declare const bindBooleanAttribute: <T>(value: T) => T;
+/**
+ * The JSX to lit-html conversion has a heuristic to determine whether a prop
+ * should be converted to a property or attribute at runtime. In cases where
+ * that heuristic is not sufficient, you can use the `bindProperty()` function to
+ * explicitly tell the conversion to treat the prop as a property.
+ *
+ * This function call will be erased at build-time, thus it has no runtime
+ * impact. But that also means you should not call this function anywhere other
+ * than at the top level of a JSX prop value
+ *
+ * @example
+ * ```tsx
+ * <my-component
+ *   my-prop={bindProperty("Pass my-prop as a property rather than attribute")}
+ * />
+ * ```
+ *
+ * Will be converted at build time into:
+ * ```ts
+ * html`<my-component .my-prop="Pass my-prop as a property rather than attribute"></my-component>`
+ * ```
+ *
+ * @remarks
+ * If you often encounter cases where the JSX to lit-html incorrectly converts
+ * the prop to an attribute necessitating the use of `bindProperty()`, please open
+ * an issue for Lumina.
+ *
+ * @remarks
+ * This function is not named `property()` because that is already taken by
+ * Lit's \@property() decorator
+ */
+export declare const bindProperty: <T>(value: T) => T;
+/**
+ * The `bindEvent()` function lets you customize the event binding behavior by
+ * providing options like passive, capture, once and other options that you
+ * normally can provide to `addEventListener`
+ *
+ * This function call will be erased at build-time, thus it has no runtime
+ * impact.
+ *
+ * @example
+ * ```tsx
+ * <my-component
+ *   onScroll={bindEvent({ handleEvent: console.log, passive:true })}
+ * />
+ * ```tsx
+ *
+ * ```ts
+ * html`<my-component onScroll=${{ handleEvent: console.log, passive:true }}></my-component>`
+ * ```
+ *
+ * @remarks
+ * This function is a _JSX to lit-html_ adaptation of the Lit's event listener
+ * customization syntax.
+ * See https://lit.dev/docs/components/events/#event-options-decorator
+ *
+ *
+ * @remarks
+ * This function is not named `event` because there is a legacy `window.event`
+ * global that was interfering with auto-imports of this function.
+ */
+export declare const bindEvent: <T>(descriptor: T | (AddEventListenerOptions & {
+    handleEvent: T;
+})) => T;
+export type JsxNode = DirectiveResult<any> | JsxNodeArray | Node | TemplateResult | boolean | number | (NonNullable<unknown> & string) | null | undefined;
+interface JsxNodeArray extends Array<JsxNode> {
+}
+/**
+ * By not requiring to have some sort of typings generation watcher to run
+ * in the background and generate types for the components based on the
+ * exposed properties, we improve developer experience a lot.
+ * (no need to run a watcher in the background, no need to commit an
+ * autogenerated file, fewer merge conflicts...)
+ *
+ * The trade-off is that we can't tell in TypeScript if component's public
+ * properties have a `@property()` decorator or not, so have to expose them
+ * all. To reduce the noise, we exclude some properties that we know are
+ * definitely not props (as they are coming from LitElement)
+ *
+ * An ESLint rule that mandates all properties to be private/protected or else
+ * to have a `@property()` decorator would mitigate the issue to a large
+ * extent.
+ *
+ * This does not impact the typings we publish - at build time we have all the
+ * information and can generate the typings that expose only the actual
+ * properties component declared.
+ *
+ * @remarks
+ * 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";
+/**
+ * this.el property on a component only has the public properties of the
+ * component. All internal methods, properties, as well as LitElement methods
+ * are excluded. This type approximates what the public API of the component
+ * looks like.
+ *
+ * @example
+ * Usually, you don't need to use this type directly. If you have an
+ * `ArcgisCounter` element, you can get its el type by using
+ * `ArcgisCounter["el"]`
+ *
+ * @remarks
+ * By using Omit<>, TypeScript also "forgets" all private members of the
+ * passed in type, which is convenient for us.
+ */
+export type ToElement<Component> = Omit<Component, ExcludedProperties>;
+/**
+ * Utility type for getting the JSX prop types for a given component. In particular:
+ *
+ * - Excludes LitElement properties that should not be exposed to the end-user
+ * - Converts event .emit() properties into event callbacks
+ * - Replaces original HTMLElement property typings with the ones we provide for
+ *   greater type-safety and control
+ * - For native events listeners, makes currentTarget equal to the component's
+ *   HTML instance
+ *
+ * We mark all component properties as optional because there is no easy
+ * way for us to differentiate between public component properties and just
+ * regular members that don't have `@property()` decorator (presence or
+ * absence of decorator does not change the type). Thus, if we don't mark all
+ * properties as optional, TypeScript will force us to provide a value for all
+ * methods, and regular properties component may have.
+ */
+export type ToJsx<Component extends {
+    el: unknown;
+}> = HTMLAttributes<Component["el"]> & Partial<Omit<Component, ExcludedProperties | keyof HTMLElement | keyof RemapEvents<Component>>> & RemapEvents<Component>;
+/**
+ * From event emitters create event listener callbacks
+ */
+type RemapEvents<Component extends {
+    el: unknown;
+}> = {
+    [Key in keyof Component as `on${Key & string}`]?: unknown extends Component[Key] ? never : Component[Key] extends {
+        emit: (...rest: never[]) => infer PayloadType;
+    } ? (event: PayloadType & {
+        currentTarget: Component["el"];
+        target: Component["el"];
+    }) => void : never;
+};
+/**
+ * This interface will be automatically extended in src/lumina.ts files to add
+ * typings for Stencil elements usages in Lumina. You do not need to manually
+ * extend this interface.
+ *
+ * @private
+ * @example
+ * ```ts
+ * import type { JSX as CalciteJSX } from "@esri/calcite-components/dist/types/components";
+ * import type { JSX as CommonComponentsJsx } from "@arcgis/common-components/dist/types/components";
+ *
+ * declare module "@arcgis/lumina" {
+ *   interface ImportStencilElements
+ *     extends CalciteJSX.IntrinsicElements,
+ *     CommonComponentsJsx.IntrinsicElements {
+ *   }
+ * }
+ * ```
+ */
+export interface ImportStencilElements {
+}
+/**
+ * Get the type of all events for a given component. Includes native DOM events
+ * and custom events.
+ *
+ * @example
+ * ```tsx
+ * render() {
+ *   return <arcgis-map onArcgisViewClick={this._handleViewClick} />;
+ * }
+ * _handleViewClick(event: ToEvents<HTMLArcgisMapElement>["arcgisViewClick"]) {
+ *   // event.detail
+ *   // event.currentTarget
+ * }
+ * ```
+ *
+ * @remarks
+ * This helper is intended to be used on components defined within the same
+ * package. For external components, you can use
+ * `HTMLArcgisMapElement["arcgisViewClick"]` directly, without need for
+ * `ToEvents<>`.
+ *
+ * @remarks
+ * Alternative implementation of this type that is simpler, and potentially
+ * more performant, but looses "go to definition" information.
+ *
+ * ```tsx
+ * export type ToEvents<Component extends { el: unknown }> = {
+ *   [Key in keyof ToJsx<Component> as Key extends `on${infer EventName}`
+ *     ? Uncapitalize<EventName>
+ *     : never]-?: ListenerToPayloadType<ToJsx<Component>[Key]>;
+ * };
+ *
+ * type ListenerToPayloadType<Listener> = Listener extends (event: infer EventType) => unknown ? EventType : never;
+ * ```
+ *
+ * TypeScript issues that may fix this:
+ * - https://github.com/microsoft/TypeScript/issues/49909
+ * - https://github.com/microsoft/TypeScript/issues/50715
+ */
+export type ToEvents<Component> = GlobalEventTypes<MaybeEl<Component>> & {
+    [Key in keyof Component as ListenerToPayloadType<Component[Key]> extends BaseEvent ? Key : never]-?: ListenerToPayloadType<Component[Key]> & {
+        currentTarget: MaybeEl<Component>;
+        target: MaybeEl<Component>;
+    };
+};
+type MaybeEl<Component> = Component extends {
+    el: unknown;
+} ? Component["el"] : Component;
+export interface TargetedEvent<Target = EventTarget | null, Payload = void> extends BaseEvent {
+    /**
+     * Returns any custom data event was created with.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/CustomEvent/detail)
+     */
+    readonly detail: Payload;
+    /**
+     * Returns the object whose event listener's callback is currently being invoked.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/currentTarget)
+     */
+    readonly currentTarget: Target;
+    /**
+     * Returns the object to which event is dispatched (its target).
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target)
+     */
+    readonly target: Target;
+}
+interface BaseEvent extends Omit<Event, "currentTarget" | "target"> {
+    /** @deprecated */
+    initCustomEvent(type: string, bubbles?: boolean, cancelable?: boolean, detail?: any): void;
+}
+/**
+ * From "GlobalEventHandlersCamelCase" extract event names and their payloads.
+ * Not using "HTMLElementEventMap" because that map has all events in lowercase.
+ */
+type GlobalEventTypes<Target = HTMLElement> = {
+    [Key in keyof GlobalEventHandlersCamelCase<Target> as Key extends `on${infer EventName}` ? Uncapitalize<EventName> : never]-?: Parameters<NonNullable<GlobalEventHandlersCamelCase<Target>[Key]>>[0];
+};
+type ListenerToPayloadType<Listener> = unknown extends Listener ? void : Listener extends {
+    emit: (...rest: never[]) => infer PayloadType;
+} ? PayloadType : Listener extends BaseEvent ? Listener : void;
+/**
+ * Defined Lumina custom elements. This interface is used only for internal
+ * type-checking.
+ */
+export interface DeclareElements {
+}
+type ReMappedComponents<Components> = {
+    [Key in keyof Components]: Components[Key] extends {
+        el: unknown;
+    } ? ToJsx<Components[Key]> : never;
+};
+/**
+ * For common properties, add Lumina's types rather than use Stencil's types
+ */
+type ReMapStencilComponents<Components> = {
+    [Key in keyof Pick<Components, keyof Components & keyof HTMLElementTagNameMap>]: HTMLAttributes<HTMLElementTagNameMap[Key]> & ReMapStencilComponent<Components[Key]>;
+};
+type ReMapStencilComponent<Component> = {
+    [Key in keyof Component as FixupStencilEventCasing<Key>]: Component[Key];
+};
+type FixupStencilEventCasing<PropertyName extends PropertyKey> = PropertyName extends `on${infer EventName}` ? `on${Uncapitalize<EventName>}` : PropertyName;
+/**
+ * These typings are based on dom-expressions typings:
+ * https://github.com/ryansolid/dom-expressions/blob/main/packages/dom-expressions/src/jsx.d.ts
+ *
+ * They in turn based the typings on Surplus and Inferno:
+ * - https://github.com/adamhaile/surplus/blob/master/index.d.ts
+ * - https://github.com/infernojs/inferno/blob/master/packages/inferno/src/core/types.ts
+ *
+ * Documentation about how to type JSX in TypeScript:
+ * https://www.typescriptlang.org/docs/handbook/jsx.html
+ */
+export declare namespace LuminaJsx {
+    /**
+     * Whether to pick TemplateResult or JsxNode here is a compromise.
+     *
+     * - If I tell it Lit JSX type is JsxNode, then even <a /> expression will
+     *   have a very broad JsxNode type (union of template results, null,
+     *   undefined, false, and more). This may slow down type-checking and may be
+     *   too-broad for certain use cases.
+     *   - Since <a /> would be typed very broad, you won't be able to declare
+     *     your function as receiving just TemplateResult
+     *   - Also, this makes TypeScript not allow you to return undefined from
+     *     your functional component
+     *   - This is what React did and what I am going with
+     * - If I tell TypeScript that JSX type is TemplateResult, then my function
+     *   component is no longer allowed to return undefined or string or etc.
+     *
+     * This is mainly a TypeScript limitation. Issues tracking this:
+     * - https://github.com/microsoft/TypeScript/issues/21699
+     * - https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18912
+     *
+     */
+    export type Element = TemplateResult;
+    export interface ElementClass {
+    }
+    export interface ElementAttributesProperty {
+    }
+    export interface IntrinsicClassAttributes {
+    }
+    export interface ElementChildrenAttribute {
+        children: JsxNode;
+    }
+    export interface IntrinsicAttributes {
+        /**
+         * The `key` is a special attribute that can be set on any element.
+         *
+         * At build-time it is translated into the `keyed()` directive:
+         * https://lit.dev/docs/templates/directives/#keyed
+         *
+         * @remarks
+         * Unlike in React or Stencil, any JavaScript value is acceptable as a key
+         */
+        key?: unknown;
+    }
+    export interface IntrinsicElements extends HTMLElementTags, SvgElementTags, ReMappedComponents<DeclareElements>, ReMapStencilComponents<ImportStencilElements> {
+    }
+    export type { CustomAttributes, DOMAttributes, HTMLAttributes, HTMLElementTags, SvgElementTags, AriaAttributes };
+}
+export {};

package/dist/lazyLoad.d.ts

@@ -2,7 +2,6 @@ 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.
  *
@@ -16,6 +15,9 @@ export interface DefineCustomElements {
 export type LazyLoadOptions = {
     readonly resourcesUrl?: string;
 };
+interface CommonInterface extends HTMLElement {
+    componentOnReady: () => Promise<this>;
+}
 export declare const makeDefineCustomElements: (runtime: Runtime, structure: Readonly<Record<string, CompactMeta>>) => DefineCustomElements;
 /**
  * Use compact meta to reduce bundle size (otherwise, it would be ~65kb for
@@ -106,7 +108,7 @@ export declare abstract class ProxyComponent extends HtmlElement {
     /**
      * Direct offspring that should be awaited before loaded() is emitted
      */
-    _offspring: (PublicLitElement & {
+    _offspring: (CommonInterface & {
         manager?: LitElement["manager"];
     })[];
     /**
@@ -153,7 +155,16 @@ export declare abstract class ProxyComponent extends HtmlElement {
     componentOnReady(): Promise<this>;
     /** @internal */
     _initializeComponent(module: Record<string, typeof LitElement>): void;
+    /**
+     * Implemented on the proxy for compatibility with Lit Context.
+     */
+    addController(): void;
+    /**
+     * Implemented on the proxy for compatibility with Lit Context.
+     */
+    requestUpdate(): void;
 }
+/** @private */
 export type GlobalThisWithPuppeteerEnv = typeof globalThis & {
     devOnly$createdElements?: WeakRef<ProxyComponent>[];
 };

package/dist/runtime.d.ts

@@ -92,6 +92,8 @@ export declare function makeRuntime(options?: RuntimeOptions): Runtime;
 /**
  * Exposing the reference to the runtime globally when in tests or development.
  * This is primarily for usage by dynamically created components in tests
+ *
+ * @private
  */
 export type DevOnlyGlobalRuntime = typeof globalThis & {
     devOnly$luminaRuntime?: Runtime;
@@ -99,6 +101,8 @@ export type DevOnlyGlobalRuntime = typeof globalThis & {
 /**
  * Called from the component constructor when in development or test mode.
  * Used primarily by mount to get a reference to the rendered component.
+ *
+ * @private
  */
 export type DevOnlyGlobalComponentRefCallback = typeof globalThis & {
     devOnly$luminaComponentRefCallback?: (component: LitElement) => void;

package/dist/stencilSsrCompatibility/index.d.ts

@@ -2,7 +2,6 @@
  * Lots of silencing of ESLint in this file to be compatible with Stencil's
  * unsafe typings.
  */
-/// <reference types="node" />
 import { type RenderInfo } from "@lit-labs/ssr/lib/render.js";
 import type { Readable } from "node:stream";
 /**

package/dist/typings/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference path="jsxGlobals.d.ts" />
-/// <reference path="loadLitCss.d.ts" />
-/// <reference path="viteEnv.d.ts" />
-/// <reference path="importMeta.d.ts" />
+/// <reference path="jsxGlobals.d.ts" preserve="true" />
+/// <reference path="loadLitCss.d.ts" preserve="true" />
+/// <reference path="viteEnv.d.ts" preserve="true" />
+/// <reference path="importMeta.d.ts" preserve="true" />

package/dist/typings/jsxGlobals.d.ts

@@ -1,4 +1,8 @@
-export {};
+/**
+ * This file is used for internal type checking only. It should not be
+ * referenced in public types of your package to not pollute the global types
+ * namespace
+ */
 declare global {
     /**
      * This interface will be extended in each source file that defines a LitElement.
@@ -19,23 +23,17 @@ declare global {
     };
     interface HTMLElementTagNameMap extends ReMappedDeclareElements {
     }
-    /**
-     * Extend this interface with Stencil web components that you wish to use
-     * in Lit
-     *
-     * @example
-     * ```ts
-     * import type { JSX as CalciteJSX } from "@esri/calcite-components/dist/types/components";
-     * import type { JSX as CommonComponentsJsx } from "@arcgis/common-components/dist/types/components";
-     *
-     * declare global {
-     *   interface ImportStencilElements
-     *     extends CalciteJSX.IntrinsicElements,
-     *     CommonComponentsJsx.IntrinsicElements {
-     *   }
-     * }
-     * ```
-     */
-    export interface ImportStencilElements {
+}
+export interface DeclareElements extends globalThis.DeclareElements {
+}
+/**
+ * In the component files, we declare "DeclareElements" interface on the
+ * `declare global` namespace as it's shorter than writing
+ * `declare module "@arcgis/lumina"`. However, we want to avoid polluting
+ * global typings with this interface - thus we use namespace merging to
+ * extend the namespaced DeclareElements based on the global DeclareElements.
+ */
+declare module "../jsx/types" {
+    interface DeclareElements extends globalThis.DeclareElements {
     }
 }

package/dist/wrappersUtils.d.ts

@@ -1,9 +1,33 @@
+export interface Options<I extends HTMLElement, E extends EventNames> {
+    react: any;
+    tagName: string;
+    elementClass: Constructor<I>;
+    events?: E;
+    displayName?: string;
+}
+export type EventNames = Record<string, string>;
+type Constructor<T> = new () => T;
 /**
- * Returns a proxy object for a custom element prototype.
- * The function that creates a React wrapper component for a custom element,
- * if rendered, will need the custom element prototype to define the React component properties.
- * Because the custom element may not yet be defined in global scope when
- * `createPrototypeProxy()` is called, this small proxy delays retrieving the custom
- * element prototype until it is actually needed, and caches the result for future calls.
+ * Wrap `createComponent` from `@lit/react` to improve lazy loading
+ * compatibility.
+ *
+ * @private
  */
-export declare function createPrototypeProxy<T extends HTMLElement>(tagName: string): new () => T;
+export declare const makeReactWrapperFactory: (react: unknown, createComponent: (options: Options<HTMLElement, EventNames>) => unknown) => (options: Pick<Options<HTMLElement, EventNames>, "events" | "tagName">) => unknown;
+/**
+ * Helper for `createComponent` to declare options in a type-safe and concise
+ * manner.
+ *
+ * @remarks
+ * Only tagName and events need to be provided to the wrapped version of the
+ * `createComponent` function. However, since we inherit the typings from
+ * the original `createComponent`, TypeScript would still force us to provide
+ * `react` and `elementClass` properties - instead, this helper convinces
+ * TypeScript that we are providing `react` and `elementClass` properties.
+ *
+ * @private
+ */
+export declare const getReactWrapperOptions: <Element extends HTMLElement, Events extends EventNames>(tagNameAndElement: Element, events: Events) => Options<Element & {
+    class?: string;
+}, Events>;
+export {};

package/dist/wrappersUtils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcgis/lumina",
-  "version": "4.32.0-next.8",
+  "version": "4.32.0-next.80",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -8,6 +8,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./config": "./dist/config.js",
+    "./hmrSupport": "./dist/hmrSupport.js",
     "./stencilSsrCompatibility": "./dist/stencilSsrCompatibility/index.js",
     "./typings": {
       "types": "./dist/typings/index.d.ts"
@@ -19,10 +20,11 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "@arcgis/components-controllers": "4.32.0-next.8",
-    "@arcgis/components-utils": "4.32.0-next.8",
+    "@arcgis/components-controllers": "4.32.0-next.80",
+    "@arcgis/components-utils": "4.32.0-next.80",
     "@lit-labs/ssr": "^3.2.2",
     "@lit-labs/ssr-client": "^1.1.7",
+    "@lit/context": "^1.1.3",
     "csstype": "^3.1.3",
     "lit": "^3.2.0",
     "tslib": "^2.7.0"