@arcgis/coding-components 4.30.0-next.47 → 4.30.0-next.49

package/dist/cjs/arcgis-arcade-api_6.cjs.entry.js

@@ -1,14 +1,14 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
  * See https://js.arcgis.com/4.30/esri/copyright.txt for details.
- * v4.30.0-next.47
+ * v4.30.0-next.49
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-02749111.js');
-const arcadeDefaults = require('./arcade-defaults-4e0664fb.js');
+const index = require('./index-97b5c264.js');
+const arcadeDefaults = require('./arcade-defaults-c09aa6ca.js');
 
 async function colorizeCode(code) {
     return await arcadeDefaults.editor.colorize(code, "arcade", { tabSize: 2 });
@@ -2939,17 +2939,30 @@ function convertMarkdownString(value) {
     return marked_umd.marked.parse(typeof value === "string" ? value : value.value);
 }
 
-// src/stencil.ts
-function retrieveComponentMeta(component) {
-  const constructor = component.constructor;
-  const members = constructor.__registerControllers?.(component) ?? void 0;
-  constructor.__registerControllers = void 0;
-  if (typeof members !== "object")
-    throw new Error(
-      "Failed to retrieve internal component meta. Make sure you have the useComponentsControllers() Rollup Plugin for Stencil Controllers configured in your Stencil config."
+// src/framework.ts
+function retrieveComponentMembers(component, isLit) {
+  if (isLit) {
+    const elementProperties = getLitProperties(component);
+    component.manager.internals.members = Object.fromEntries(
+      Array.from(elementProperties, ([name, { state, type }]) => [
+        name,
+        [
+          state ? 32 /* State */ : type === Number ? 2 /* Number */ : type === Boolean ? 4 /* Boolean */ : 1 /* String */
+        ]
+      ])
     );
-  component.manager.internals.members = members;
+  } else {
+    const constructor = component.constructor;
+    const members = constructor.__registerControllers?.(component) ?? void 0;
+    constructor.__registerControllers = void 0;
+    if (typeof members !== "object")
+      throw new Error(
+        "Failed to retrieve internal component meta. Make sure you have the useComponentsControllers() Rollup Plugin for Stencil Controllers configured in your Stencil config."
+      );
+    component.manager.internals.members = members;
+  }
 }
+var getLitProperties = (component) => component.constructor.elementProperties;
 function parsePropertyValue(value, type = 8 /* Any */) {
   const isComplex = value == null || typeof value === "object" || typeof value === "function";
   if (isComplex)
@@ -2957,7 +2970,7 @@ function parsePropertyValue(value, type = 8 /* Any */) {
   if ((type & 4 /* Boolean */) !== 0)
     return value === "false" ? false : value === "" || !!value;
   else if ((type & 2 /* Number */) !== 0)
-    return Number.parseFloat(value.toString());
+    return Number.parseFloat(value);
   else if ((type & 1 /* String */) !== 0)
     return String(value);
   else
@@ -2979,6 +2992,21 @@ function getPropType(component, name) {
     return "prop";
 }
 
+// src/types.ts
+var controllerSymbol = Symbol("controller");
+
+// src/utils.ts
+function extendObject(base, extend) {
+  Object.entries(extend).forEach(([key, value]) => {
+    if (key in base)
+      throw new Error(`Unable to extend object because property "${key}" is already defined`);
+    const thisBase = base;
+    thisBase[key] = value;
+  });
+  return base;
+}
+var isController = (value) => typeof value === "object" && value !== null && (controllerSymbol in value || "hostConnected" in value || "hostDisconnected" in value || "hostUpdate" in value || "hostUpdated" in value);
+
 // ../components-utils/dist/index.js
 var Deferred = class {
   /**
@@ -3083,6 +3111,7 @@ async function safeAsyncCall(callback) {
   }
   return void 0;
 }
+var camelToKebab = (string) => string.replace(upperBeforeLower, (upper, remainder) => `${remainder === 0 ? "" : "-"}${upper.toLowerCase()}`);
 var upperBeforeLower = /[A-Z]+(?![a-z])|[A-Z]/gu;
 var capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1);
 var camelToHuman = (string) => capitalize(string.replace(upperBeforeLower, (upper, remainder) => `${remainder === 0 ? "" : " "}${upper}`));
@@ -3182,21 +3211,6 @@ async function updateComponentLocateState(element, assetsPath, assetName = eleme
   return { lang, t9nLocale, t9nStrings };
 }
 
-// src/types.ts
-var controllerSymbol = Symbol("controller");
-
-// src/utils.ts
-function extendObject(base, extend) {
-  Object.entries(extend).forEach(([key, value]) => {
-    if (key in base)
-      throw new Error(`Unable to extend object because property "${key}" is already defined`);
-    const thisBase = base;
-    thisBase[key] = value;
-  });
-  return base;
-}
-var isController = (value) => typeof value === "object" && value !== null && (controllerSymbol in value || "hostConnected" in value || "hostDisconnected" in value || "hostUpdate" in value || "hostUpdated" in value);
-
 // src/ControllerInternals.ts
 var ControllerInternals = class {
   constructor() {
@@ -3361,26 +3375,23 @@ var _Controller = class _Controller {
       value: resolvedComponent
     });
     this.component.addController(this);
-    const manager = this.component.manager;
-    this.connected = manager?.connected;
-    this.internals = manager?.internals;
     _Controller.internals.setParentController(this);
     if ("hostDestroy" in this)
       this.component.manager.ensureHasDestroy();
-    if (manager !== void 0)
+    const manager = this.component.manager;
+    const isInControllerManager = manager === void 0;
+    if (!isInControllerManager)
       queueMicrotask(() => this.catchUpLifecycle());
-    const controller = this;
+    const controller = isInControllerManager ? {} : this;
     this._callbacks = {
-      hostConnected: "hostConnected" in this ? [() => controller.hostConnected?.()] : [],
-      hostDisconnected: "hostDisconnected" in this ? [() => controller.hostDisconnected?.()] : [],
-      hostLoad: "hostLoad" in this ? [() => controller.hostLoad?.()] : [],
-      hostLoaded: "hostLoaded" in this ? [() => controller.hostLoaded?.()] : [],
-      hostRender: "hostRender" in this ? [() => controller.hostRender?.()] : [],
-      hostRendered: "hostRendered" in this ? [() => controller.hostRendered?.()] : [],
-      hostUpdate: "hostUpdate" in this ? [() => controller.hostUpdate?.()] : [],
-      hostUpdated: "hostUpdated" in this ? [() => controller.hostUpdated?.()] : [],
-      hostDestroy: "hostDestroy" in this ? [() => controller.hostDestroy?.()] : [],
-      hostLifecycle: "hostLifecycle" in this ? [() => controller.hostLifecycle?.()] : []
+      hostConnected: "hostConnected" in controller ? [() => controller.hostConnected?.()] : [],
+      hostDisconnected: "hostDisconnected" in controller ? [() => controller.hostDisconnected?.()] : [],
+      hostLoad: "hostLoad" in controller ? [() => controller.hostLoad?.()] : [],
+      hostLoaded: "hostLoaded" in controller ? [() => controller.hostLoaded?.()] : [],
+      hostUpdate: "hostUpdate" in controller ? [() => controller.hostUpdate?.()] : [],
+      hostUpdated: "hostUpdated" in controller ? [() => controller.hostUpdated?.()] : [],
+      hostDestroy: "hostDestroy" in controller ? [() => controller.hostDestroy?.()] : [],
+      hostLifecycle: "hostLifecycle" in controller ? [() => controller.hostLifecycle?.()] : []
     };
   }
   /**
@@ -3505,7 +3516,7 @@ var _Controller = class _Controller {
   }
   /**
    * Property reads inside of this function will bypass any custom getter you
-   * may have, and read the value directly from what's stored in Stencil.
+   * may have, and read the value directly from what's stored in Stencil/Lit.
    *
    * This also bypasses reactiveUtils integration - reading a property inside of
    * bypassGetter won't make that property tracked.
@@ -3544,28 +3555,30 @@ var _Controller = class _Controller {
   genericGetSet(property, getSet) {
     var _a2, _b;
     const genericGetSet = getSet;
+    const internals = this.component.manager.internals;
     if (genericGetSet.get !== void 0) {
-      (_a2 = this.internals.getters)[property] ?? (_a2[property] = []);
-      this.internals.getters[property].unshift(genericGetSet.get);
+      (_a2 = internals.getters)[property] ?? (_a2[property] = []);
+      internals.getters[property].unshift(genericGetSet.get);
     }
     if (genericGetSet.set !== void 0) {
-      (_b = this.internals.setters)[property] ?? (_b[property] = []);
-      this.internals.setters[property].unshift(genericGetSet.set);
+      (_b = internals.setters)[property] ?? (_b[property] = []);
+      internals.setters[property].unshift(genericGetSet.set);
     }
   }
   // FEATURE: improve typings
   /**
-   * Dynamically set a watcher for any \@Prop()/\@State() property
+   * Dynamically set a watcher for any reactive property
    */
   watch(property, callback) {
     var _a2;
     const type = getMemberType(this.component, property);
     if (type === void 0)
       throw new Error(
-        `Trying to watch a non-@Prop, non-@State property "${property}". Either convert it into a @State() or use manager.getSet/dynamicGetSet`
+        `Trying to watch a non-@property, non-@state property "${property}". Either convert it into a @state() or use get/set syntax`
       );
-    (_a2 = this.internals.allWatchers)[property] ?? (_a2[property] = []);
-    const watchers = this.internals.allWatchers[property];
+    const internals = this.component.manager.internals;
+    (_a2 = internals.allWatchers)[property] ?? (_a2[property] = []);
+    const watchers = internals.allWatchers[property];
     const genericCallback = callback;
     const safeCallback = (newValue, oldValue, propertyName) => safeCall(() => genericCallback(newValue, oldValue, propertyName));
     watchers.push(safeCallback);
@@ -3588,12 +3601,6 @@ var _Controller = class _Controller {
   onLoaded(callback) {
     this._callbacks.hostLoaded.push(callback);
   }
-  onRender(callback) {
-    this._callbacks.hostRender.push(callback);
-  }
-  onRendered(callback) {
-    this._callbacks.hostRendered.push(callback);
-  }
   onUpdate(callback) {
     this._callbacks.hostUpdate.push(callback);
   }
@@ -3634,16 +3641,8 @@ var _Controller = class _Controller {
     this._callbacks.hostLoaded.forEach(safeCall);
     this.didLoadCalled = true;
   }
-  async triggerRender() {
-    if (this._callbacks.hostRender.length > 0)
-      await Promise.allSettled(this._callbacks.hostRender.map(safeAsyncCall));
-  }
-  triggerRendered() {
-    this._callbacks.hostRendered.forEach(safeCall);
-  }
-  async triggerUpdate() {
-    if (this._callbacks.hostUpdate.length > 0)
-      await Promise.allSettled(this._callbacks.hostUpdate.map(safeAsyncCall));
+  triggerUpdate() {
+    this._callbacks.hostUpdate.forEach(safeCall);
   }
   triggerUpdated() {
     this._callbacks.hostUpdated.forEach(safeCall);
@@ -3655,6 +3654,7 @@ var _Controller = class _Controller {
     this._callbacks.hostLifecycle.forEach((callback) => this._callLifecycle(callback));
   }
   _callLifecycle(callback) {
+    _Controller.internals.setAmbientComponent(this.component);
     const cleanupRaw = safeCall(callback);
     const cleanup = Array.isArray(cleanupRaw) ? cleanupRaw : [cleanupRaw];
     cleanup.forEach((cleanup2) => {
@@ -3680,12 +3680,6 @@ var GenericController = class extends Controller {
       callback
     );
   }
-  /**
-   * Silence "Property 'dynamicGetSet' in type
-   * 'GenericController<Exports, Requires>' is not assignable to the same
-   * property in base type 'Controller<Exports>'", as TypeScript is being overly
-   * conservative here with what it allows
-   */
   dynamicGetSet(property, getSet) {
     super.genericGetSet(property, getSet);
   }
@@ -3693,9 +3687,9 @@ var GenericController = class extends Controller {
 function makeProvisionalValue(base) {
   if (typeof base !== "object" && typeof base !== "function" || base === null)
     return base;
-  const proxy3 = new Proxy(base, {
+  const proxy2 = new Proxy(base, {
     get(target, prop, receiver) {
-      if (cyclical.has(prop) && prop in target && target[prop] === proxy3)
+      if (cyclical.has(prop) && prop in target && target[prop] === proxy2)
         return void 0;
       if (prop in target || prop in Promise.prototype || typeof prop === "symbol")
         return typeof target === "function" ? target[prop] : Reflect.get(target, prop, receiver);
@@ -3707,16 +3701,10 @@ function makeProvisionalValue(base) {
       return Reflect.set(target, prop, newValue, receiver);
     }
   });
-  return proxy3;
+  return proxy2;
 }
 var cyclical = /* @__PURE__ */ new Set(["exports", "_exports"]);
-var accessBeforeLoad = [
-  "This might be the case if you are trying to access an async controller in ",
-  "connectedCallback(). Or, if you are using it inside of ",
-  "componentWillLoad()/another controller without controller.use. Example correct ",
-  "usage:\n",
-  "makeController(async (component, controller)=>{ await controller.use(someOtherController); });"
-].join("");
+var accessBeforeLoad = "" ;
 function toControllerHost(component) {
   if ("addController" in component)
     return component;
@@ -3726,6 +3714,82 @@ function toControllerHost(component) {
     );
 }
 
+// src/proxyExports.ts
+var proxyExports = (Class) => (...args) => {
+  const ambientControllers = Controller.internals.retrieveParentControllers();
+  const instance = new Class(...args);
+  const initialExports = instance.exports;
+  Controller.internals.setParentController(ambientControllers.at(-1));
+  const internals = instance.component.manager.internals;
+  internals.markExports(instance, initialExports);
+  instance.watchExports((exports) => internals.markExports(instance, exports));
+  Controller.internals.setAmbientChildController(instance);
+  const hostCandidates = [instance.component, ...ambientControllers].reverse();
+  return internals.trackKey(
+    hostCandidates,
+    (resolution) => resolution === void 0 ? void 0 : setProxy(instance, resolution.host, resolution.key, initialExports),
+    initialExports
+  );
+};
+function setProxy(controller, host, key, initialExports) {
+  const genericHost = host;
+  const controllerValueChanged = genericHost[key] !== controller.exports;
+  const hostValueChanged = genericHost[key] !== initialExports;
+  const controllerUpdatedExports = initialExports !== controller.exports;
+  if (controllerValueChanged && !hostValueChanged && controllerUpdatedExports)
+    genericHost[key] = controller.exports;
+  controller.watchExports(() => {
+    if (genericHost[key] === controller.exports)
+      return;
+    const manager = controller.component.manager;
+    const isReadOnly = manager.internals.readonlyProps?.has(key) === true;
+    if (isReadOnly)
+      manager.bypassReadonly(() => {
+        genericHost[key] = controller.exports;
+      });
+    else
+      genericHost[key] = controller.exports;
+  });
+}
+
+// src/functional.ts
+var makeController = (constructor) => proxy(void 0, constructor);
+var FunctionalController = class extends Controller {
+  constructor(component, constructor) {
+    super(component);
+    const originalExports = this.exports;
+    try {
+      Controller.internals.setAmbientComponent(this.component);
+      const value = constructor(this.component, this);
+      const constructorChangedExports = this.exports !== originalExports;
+      if (value instanceof Promise) {
+        if (!constructorChangedExports)
+          this.setProvisionalExports(value);
+        const resolved = value.then((result) => {
+          this.exports = result;
+          super.catchUpLifecycle();
+        }).catch((error) => {
+          this._ready.reject(error);
+          console.error(error);
+        });
+        this.onLoad(async () => await resolved);
+      } else {
+        if (!constructorChangedExports || value !== void 0)
+          this.exports = value;
+        queueMicrotask(() => super.catchUpLifecycle());
+      }
+    } catch (error) {
+      this._ready.reject(error);
+      console.error(error);
+    }
+  }
+  /** Noop - will be called in the constructor instead */
+  catchUpLifecycle() {
+    return;
+  }
+};
+var proxy = proxyExports(FunctionalController);
+
 // src/trackPropertyKey.ts
 function trackPropertyKey(object, onResolved, defaultValue) {
   const keys = Object.keys(object);
@@ -3816,16 +3880,14 @@ var ComponentInternals = class {
       }, defaultValue);
       return defaultValue;
     };
-    this.trackPropKey = (onResolved, defaultValue, ignoreDefaultValueMismatch = false) => {
+    this.trackPropKey = (onResolved, defaultValue) => {
       if (this._trackedValue !== nothing && this._trackedValue !== defaultValue)
         this._firePropertyTrackers(void 0, void 0, void 0);
       if (this._keyTrackers.length === 0)
         queueMicrotask(() => this._firePropertyTrackers(void 0, void 0, void 0));
       this._trackedValue = defaultValue;
       this._keyTrackers.push(
-        (key, value, previousValue) => safeCall(
-          () => onResolved(defaultValue === value || ignoreDefaultValueMismatch ? key : void 0, previousValue)
-        )
+        (key, value, previousValue) => safeCall(() => onResolved(defaultValue === value ? key : void 0, previousValue))
       );
       return defaultValue;
     };
@@ -3859,9 +3921,12 @@ var ComponentInternals = class {
    * to apply the changes to the prototype
    */
   getSetProxy(property, hasGetter, hasSetter) {
-    const classPrototype = Object.getPrototypeOf(this.component);
+    const component = this.component;
+    const classPrototype = component.constructor.prototype;
     this._getSetProxy(classPrototype, property, hasGetter, hasSetter, "class");
-    const htmlPrototype = Object.getPrototypeOf(this.component.el);
+    if (component.manager.isLit)
+      return;
+    const htmlPrototype = component.el.constructor.prototype;
     if (classPrototype !== htmlPrototype)
       this._getSetProxy(htmlPrototype, property, hasGetter, hasSetter, "html");
   }
@@ -3873,7 +3938,7 @@ var ComponentInternals = class {
     if (descriptor?.set === void 0 || descriptor.get === void 0)
       if (descriptor !== void 0 && "value" in descriptor)
         throw new Error(
-          `getSet() should only be used on Stencil's @Prop and @State properties. For internal component properties, use regular get/set syntax. Tried to use it on "${name}" in ${component.el.tagName}`
+          `getSet() should only be used on @Prop/@property/@State/@state properties. For internal component properties, use regular get/set syntax. Tried to use it on "${name}" in ${component.el.tagName}`
         );
       else if (tolerateNotFound)
         return;
@@ -3900,12 +3965,12 @@ var ComponentInternals = class {
     } : originalGet;
     const finalSetter = shouldOverwriteSet ? function setter(rawNewValue) {
       const oldValue = originalGet.call(this);
-      let newValue = parsePropertyValue(rawNewValue, propType);
       const component2 = Controller.internals.elementToInstance.get(this);
       if (component2 === void 0) {
         originalSet.call(this, rawNewValue);
         return;
       }
+      let newValue = component2.manager.isLit ? rawNewValue : parsePropertyValue(rawNewValue, propType);
       const internals = component2.manager.internals;
       if (newValue === oldValue)
         originalSet.call(this, rawNewValue);
@@ -3949,59 +4014,30 @@ var ComponentInternals = class {
 var emptyArray = [];
 var customAccessor = Symbol("controllersCustomAccessor");
 var nothing = Symbol("nothing");
-var accessorPromise = Promise.all([arcadeDefaults.importCoreAccessor(), arcadeDefaults.importCoreAccessorSupportDecorators()]);
-function reactiveUtilsIntegration(component) {
-  const members = getPropLikeMembers(component);
-  const internals = component.manager.internals;
-  members.forEach((name) => {
-    internals.accessorGetter[name] = defaultGetterSetter;
-    internals.accessorSetter[name] = defaultGetterSetter;
-    internals.getSetProxy(name, true, true);
-  });
-  return async (enabledMembers = members) => {
-    const [Accessor, { subclass, property }] = await accessorPromise;
-    class AccessorSubclass extends Accessor {
-    }
-    const getter = (_value, propertyName) => accessor[propertyName];
-    function setter(newValue, _oldValue, propertyName) {
-      if (accessor !== void 0)
-        accessor[propertyName] = newValue;
-      return newValue;
-    }
-    component.manager.bypassGetter(
-      () => enabledMembers.forEach((name) => {
-        internals.accessorGetter[name] = getter;
-        internals.accessorSetter[name] = setter;
-        property({
-          value: component[name]
-        })(AccessorSubclass.prototype, name);
-      })
-    );
-    const Subclass = subclass(component.el.tagName)(AccessorSubclass);
-    const accessor = new Subclass();
-  };
-}
-var defaultGetterSetter = (value) => value;
 
 // src/ControllerManager.ts
-var useControllerManager = (component) => new ControllerManager(component);
+var useControllerManager = (component, forceUpdate) => new ControllerManager(component, forceUpdate);
 var ControllerManager = class extends GenericController {
-  constructor(component) {
+  constructor(component, forceUpdate) {
+    const isLit = "addController" in component;
     const controllers = /* @__PURE__ */ new Set();
-    const controllerHost = {
-      addController: (controller) => {
-        controllers.add(controller);
-      },
-      removeController: (controller) => {
-        controllers.delete(controller);
-      },
-      requestUpdate: () => index.forceUpdate(component)
-    };
-    extendObject(component, controllerHost);
+    function addController(controller) {
+      controllers.add(controller);
+      if (isLit && !(controllerSymbol in controller) && component.el.isConnected)
+        controller.hostConnected?.();
+    }
+    const removeController = (controller) => void controllers.delete(controller);
+    if (!isLit) {
+      const update = forceUpdate ?? component.constructor.__forceUpdate;
+      const controllerHost = {
+        addController,
+        removeController,
+        requestUpdate: () => update(component)
+      };
+      extendObject(component, controllerHost);
+    }
     super(component);
-    this._connected = new Deferred();
     this.internals = new ComponentInternals(this.component);
-    this.connected = this._connected.promise;
     this.destroyed = false;
     this._updatePromise = new Deferred();
     this._originalLifecycles = {};
@@ -4048,14 +4084,25 @@ var ControllerManager = class extends GenericController {
      * \@Prop() decorator or not
      */
     this.trackKey = this.internals.trackKey;
-    this._readonlySetter = (newValue, _oldValue, property) => {
+    this._readonlySetter = (newValue, oldValue, property) => {
       if (Controller.internals.shouldBypassReadonly)
         return newValue;
-      const isProp = getPropType(this.component, property) === "prop";
-      if (isProp)
-        index.forceUpdate(this.component);
+      const component = this.component;
+      const isProp = getPropType(component, property) === "prop";
+      if (isProp) {
+        if (this.isLit) {
+          const details = getLitProperties(component).get(property);
+          if (details && details?.attribute !== false)
+            component.el.setAttribute(
+              typeof details.attribute === "string" ? details.attribute : camelToKebab(property),
+              // Not using converter.toAttribute to keep this unlikely case simpler
+              String(oldValue)
+            );
+        } else
+          component.requestUpdate();
+      }
       throw new Error(
-        `Cannot assign to read-only property "${property}" of ${this.component.el.tagName.toLowerCase()}. Trying to assign "${String(
+        `Cannot assign to read-only property "${property}" of ${component.el.tagName.toLowerCase()}. Trying to assign "${String(
           newValue
         )}"`
       );
@@ -4068,18 +4115,30 @@ var ControllerManager = class extends GenericController {
      */
     this.devOnlySetPersistentControllerData = void 0 ;
     this.devOnlyGetPersistentControllerData = void 0 ;
+    if (isLit) {
+      component.addController = addController;
+      component.removeController = removeController;
+    }
+    this.isLit = isLit;
     this.component.manager = this;
-    retrieveComponentMeta(component);
+    retrieveComponentMembers(component, isLit);
     this._controllers = controllers;
     this.exports = void 0;
     this.hasDestroy = "autoDestroyDisabled" in this.component && typeof this.component.destroy === "function";
     if (this.hasDestroy)
       this.watch("autoDestroyDisabled", () => this._autoDestroyDisabledWatcher());
     this._bindLifecycleMethods();
-    Object.defineProperty(component, "updateComplete", {
-      get: async () => await this._updatePromise.promise
+    if (!isLit)
+      Object.defineProperty(component, "updateComplete", {
+        get: async () => await this._updatePromise.promise
+      });
+    const members = getPropLikeMembers(component);
+    const internals = component.manager.internals;
+    members.forEach((name) => {
+      internals.accessorGetter[name] = defaultGetterSetter;
+      internals.accessorSetter[name] = defaultGetterSetter;
+      internals.getSetProxy(name, true, true);
     });
-    this.internals.reactiveUtilsIntegration = reactiveUtilsIntegration(this.component);
     Controller.internals.setParentController(void 0);
     Controller.internals.setAmbientComponent(component);
     Controller.internals.elementToInstance.set(component.el, component);
@@ -4087,25 +4146,25 @@ var ControllerManager = class extends GenericController {
   }
   _bindLifecycleMethods() {
     const component = this.component;
+    const isLit = this.isLit;
     this._originalLifecycles = {
-      connectedCallback: component.connectedCallback,
-      disconnectedCallback: component.disconnectedCallback,
-      componentWillLoad: component.componentWillLoad,
-      componentDidLoad: component.componentDidLoad,
-      componentWillRender: component.componentWillRender,
-      componentDidRender: component.componentDidRender,
-      componentWillUpdate: component.componentWillUpdate,
-      componentDidUpdate: component.componentDidUpdate,
+      // These callbacks will be called by Lit, so we don't have to
+      connectedCallback: isLit ? void 0 : component.connectedCallback,
+      disconnectedCallback: isLit ? void 0 : component.disconnectedCallback,
+      componentWillLoad: isLit ? void 0 : component.componentWillLoad,
+      componentDidLoad: isLit ? void 0 : component.componentDidLoad,
+      componentWillUpdate: isLit ? void 0 : component.componentWillUpdate,
+      componentDidUpdate: isLit ? void 0 : component.componentDidUpdate,
       destroy: component.destroy
     };
-    component.connectedCallback = this._connectedCallback.bind(this);
-    component.disconnectedCallback = this._disconnectedCallback.bind(this);
-    component.componentWillLoad = this._componentWillLoad.bind(this);
-    component.componentDidLoad = this._componentDidLoad.bind(this);
-    component.componentWillRender = this._componentWillRender.bind(this);
-    component.componentDidRender = this._componentDidRender.bind(this);
-    component.componentWillUpdate = this._componentWillUpdate.bind(this);
-    component.componentDidUpdate = this._componentDidUpdate.bind(this);
+    if (!isLit) {
+      component.connectedCallback = this.hostConnected.bind(this);
+      component.disconnectedCallback = this.hostDisconnected.bind(this);
+      component.componentWillLoad = this.hostLoad.bind(this);
+      component.componentDidLoad = this.hostLoaded.bind(this);
+      component.componentWillUpdate = this.hostUpdate.bind(this);
+      component.componentDidUpdate = this.hostUpdated.bind(this);
+    }
     if (this.hasDestroy)
       component.destroy = this.destroy.bind(this);
   }
@@ -4122,7 +4181,7 @@ var ControllerManager = class extends GenericController {
    * Instead, _bindLifecycleMethods will take care of that. Otherwise, you risk
    * calling lifecycle methods twice.
    */
-  _connectedCallback() {
+  hostConnected() {
     if (this.destroyed) {
       const tagName = this.component.el.tagName.toLowerCase();
       this.component.el.remove();
@@ -4134,13 +4193,12 @@ var ControllerManager = class extends GenericController {
       clearTimeout(this._autoDestroyTimeout);
     this.internals.enabledWatchers = this.internals.allWatchers;
     keyTrackResolve();
-    this._connected.resolve();
     this._controllers.forEach(
       (controller) => "triggerConnected" in controller ? controller.triggerConnected() : safeCall(() => controller.hostConnected?.())
     );
     this._originalLifecycles.connectedCallback?.call(this.component);
   }
-  _disconnectedCallback() {
+  hostDisconnected() {
     if (this.destroyed)
       return;
     this._controllers.forEach(
@@ -4150,8 +4208,10 @@ var ControllerManager = class extends GenericController {
     if (this.hasDestroy)
       this._autoDestroyDisabledWatcher();
   }
-  async _componentWillLoad() {
-    await this.internals.reactiveUtilsIntegration();
+  // REFACTOR: don't force async if there are no async load controllers?
+  async hostLoad() {
+    if (typeof this.internals.reactiveUtilsIntegration === "function")
+      await this.internals.reactiveUtilsIntegration();
     await Promise.allSettled(
       Array.from(
         this._controllers,
@@ -4160,44 +4220,28 @@ var ControllerManager = class extends GenericController {
     );
     await this._originalLifecycles.componentWillLoad?.call(this.component);
   }
-  _componentDidLoad() {
+  hostLoaded() {
     this._controllers.forEach(
       (controller) => "triggerLoaded" in controller ? controller.triggerLoaded() : safeCall(() => controller.hostLoaded?.())
     );
     this._originalLifecycles.componentDidLoad?.call(this.component);
   }
-  async _componentWillRender() {
-    await Promise.allSettled(
-      Array.from(
-        this._controllers,
-        async (controller) => "triggerRender" in controller ? await controller.triggerRender() : await safeAsyncCall(async () => await controller.hostRender?.())
-      )
-    );
-    await this._originalLifecycles.componentWillRender?.call(this.component);
-  }
-  _componentDidRender() {
+  hostUpdate() {
     this._controllers.forEach(
-      (controller) => "triggerRendered" in controller ? controller.triggerRendered() : safeCall(() => controller.hostRendered?.())
+      (controller) => "triggerUpdate" in controller ? controller.triggerUpdate() : safeCall(() => controller.hostUpdate?.())
     );
-    this._originalLifecycles.componentDidRender?.call(this.component);
+    void this._originalLifecycles.componentWillUpdate?.call(this.component);
   }
-  async _componentWillUpdate() {
-    await Promise.allSettled(
-      Array.from(
-        this._controllers,
-        async (controller) => "triggerUpdate" in controller ? await controller.triggerUpdate() : await safeAsyncCall(async () => await controller.hostUpdate?.())
-      )
-    );
-    await this._originalLifecycles.componentWillUpdate?.call(this.component);
-  }
-  _componentDidUpdate() {
+  hostUpdated() {
     this._controllers.forEach(
       (controller) => "triggerUpdated" in controller ? controller.triggerUpdated() : safeCall(() => controller.hostUpdated?.())
     );
     this._originalLifecycles.componentDidUpdate?.call(this.component);
-    const updatePromise = this._updatePromise;
-    this._updatePromise = new Deferred();
-    updatePromise.resolve(true);
+    if (!this.isLit) {
+      const updatePromise = this._updatePromise;
+      this._updatePromise = new Deferred();
+      updatePromise.resolve(true);
+    }
   }
   async destroy() {
     this.ensureHasDestroy();
@@ -4216,6 +4260,7 @@ var ControllerManager = class extends GenericController {
     this._controllers.forEach(
       (controller) => "triggerDestroy" in controller ? controller.triggerDestroy() : safeCall(() => controller.hostDestroy?.())
     );
+    this._controllers.clear();
     await this._originalLifecycles.destroy?.call(this.component);
   }
   _autoDestroyDisabledWatcher() {
@@ -4226,6 +4271,7 @@ var ControllerManager = class extends GenericController {
       this._autoDestroyTimeout = setTimeout(destroy, autoDestroyOnDisconnectTimeout);
     }
   }
+  // REFACTOR: replace this with a readonly:true option in @property()
   /**
    * Make a @Prop() or @State() readonly (prevent overwriting default value).
    *
@@ -4245,6 +4291,7 @@ var ControllerManager = class extends GenericController {
   readonly(value) {
     return this.getSet(value, { set: this._readonlySetter });
   }
+  // REFACTOR: remove this in Lit in favor of native get/set
   /**
    * Listen for any component's @State()/@Prop() change, and mutate it's
    * value before it is set.
@@ -4271,13 +4318,13 @@ var ControllerManager = class extends GenericController {
    */
   getSet(defaultValue, getSet) {
     return this.component.manager.trackPropKey((name) => {
-      var _a2;
+      var _a;
       if (name === void 0)
         throw new Error(
           "Unable to resolve get/set's prop name. Make sure you are using it like @Prop() someProp = this.manager.getSet(defaultValue,{get,set})"
         );
       if (getSet.set === this._readonlySetter) {
-        (_a2 = this.internals).readonlyProps ?? (_a2.readonlyProps = /* @__PURE__ */ new Set());
+        (_a = this.internals).readonlyProps ?? (_a.readonlyProps = /* @__PURE__ */ new Set());
         this.internals.readonlyProps.add(name);
       }
       const genericComponent = this.component;
@@ -4298,91 +4345,16 @@ ${// Don't expose internal code in production, and keep bundle smaller:
 `autoDestroyDisabled and destroy` }
 `.trim();
 var autoDestroyOnDisconnectTimeout = 1e3;
+var defaultGetterSetter = (value) => value;
 
-// src/proxyExports.ts
-var proxyExports = (Class) => (...args) => {
-  const ambientControllers = Controller.internals.retrieveParentControllers();
-  const instance = new Class(...args);
-  const initialExports = instance.exports;
-  Controller.internals.setParentController(ambientControllers.at(-1));
-  const internals = instance.component.manager.internals;
-  internals.markExports(instance, initialExports);
-  instance.watchExports((exports) => internals.markExports(instance, exports));
-  Controller.internals.setAmbientChildController(instance);
-  const hostCandidates = [instance.component, ...ambientControllers].reverse();
-  return internals.trackKey(
-    hostCandidates,
-    (resolution) => resolution === void 0 ? void 0 : setProxy(instance, resolution.host, resolution.key, initialExports),
-    initialExports
-  );
-};
-function setProxy(controller, host, key, initialExports) {
-  const genericHost = host;
-  const controllerValueChanged = genericHost[key] !== controller.exports;
-  const hostValueChanged = genericHost[key] !== initialExports;
-  const controllerUpdatedExports = initialExports !== controller.exports;
-  if (controllerValueChanged && !hostValueChanged && controllerUpdatedExports)
-    genericHost[key] = controller.exports;
-  controller.watchExports(() => {
-    if (genericHost[key] === controller.exports)
-      return;
-    const manager = controller.component.manager;
-    const isReadOnly = manager.internals.readonlyProps?.has(key) === true;
-    if (isReadOnly)
-      manager.bypassReadonly(() => {
-        genericHost[key] = controller.exports;
-      });
-    else
-      genericHost[key] = controller.exports;
-  });
-}
-
-// src/functional.ts
-var makeController = (constructor) => proxy(void 0, constructor);
-var FunctionalController = class extends Controller {
-  constructor(component, constructor) {
-    super(component);
-    const originalExports = this.exports;
-    try {
-      Controller.internals.setAmbientComponent(this.component);
-      const value = constructor(this.component, this);
-      const constructorChangedExports = this.exports !== originalExports;
-      if (value instanceof Promise) {
-        if (!constructorChangedExports)
-          this.setProvisionalExports(value);
-        const resolved = value.then((result) => {
-          this.exports = result;
-          super.catchUpLifecycle();
-        }).catch((error) => {
-          this._ready.reject(error);
-          console.error(error);
-        });
-        this.onLoad(async () => await resolved);
-      } else {
-        if (!constructorChangedExports || value !== void 0)
-          this.exports = value;
-        queueMicrotask(() => super.catchUpLifecycle());
-      }
-    } catch (error) {
-      this._ready.reject(error);
-      console.error(error);
-    }
-  }
-  /** Noop - will be called in the constructor instead */
-  catchUpLifecycle() {
-    return;
-  }
-};
-var proxy = proxyExports(FunctionalController);
-function useT9n({
-  blocking = false,
-  name
-} = {}) {
-  return makeController((component, controller) => {
+// src/useT9n.ts
+var makeT9nController = (getAssetPath) => ({ blocking = false, name } = {}) => (
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  makeController((component, controller) => {
     controller.onLifecycle(
       () => startLocaleObserver(
         component.el,
-        index.getAssetPath("./assets"),
+        getAssetPath("./assets"),
         ({ t9nLocale, t9nStrings, lang }) => {
           controller.exports = { ...t9nStrings, _lang: lang, _t9nLocale: t9nLocale };
           const label = t9nStrings.componentLabel ?? t9nStrings.widgetLabel;
@@ -4396,8 +4368,8 @@ function useT9n({
       return controller.ready;
     const locale = getElementLocales(component.el);
     return { _lang: locale.lang, _t9nLocale: locale.t9nLocale };
-  });
-}
+  })
+);
 
 function isMonacoEnvironmentSetup() {
     return !!window.MonacoEnvironment?.getWorkerUrl;
@@ -4546,7 +4518,7 @@ async function getArcadeWorker(uri) {
  * @returns arcade mode module
  */
 async function getMode() {
-    return await Promise.resolve().then(function () { return require('./arcade-mode-61a07430.js'); });
+    return await Promise.resolve().then(function () { return require('./arcade-mode-f43455a9.js'); });
 }
 // Register the language in Monaco
 arcadeDefaults.languages.register({
@@ -4569,6 +4541,8 @@ arcadeDefaults.languages.onLanguage(arcadeDefaults.arcadeDefaults.languageId, ()
     });
 });
 
+const useT9n = makeT9nController(index.getAssetPath);
+
 const arcadeApiCss = ":host{background-color:var(--calcite-color-foreground-1)}:host .notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}:host .sticky{position:sticky;top:0px;z-index:10}:host calcite-flow{height:100%}:host calcite-block p:first-of-type{margin-top:0}:host calcite-block code{font-family:var(--calcite-code-family)}:host calcite-block pre{direction:ltr;overflow-x:auto;background-color:var(--calcite-color-foreground-2);padding:var(--calcite-spacing-sm)}:host calcite-block pre code{font-size:var(--calcite-font-size--2)}";
 
 const ArcgisArcadeApi = class {
@@ -5551,11 +5525,11 @@ const ArcgisArcadeSuggestions = class {
     // #region Component lifecycle events
     async componentWillLoad() {
         this._colorizeStyle = generateColorizeStyles();
-        this._themeChangedListner = onColorizeThemeChanged(() => (this._colorizeStyle = generateColorizeStyles()));
+        this._themeChangedListener = onColorizeThemeChanged(() => (this._colorizeStyle = generateColorizeStyles()));
     }
     disconnectedCallback() {
         this._flowObserver?.disconnect();
-        this._themeChangedListner?.dispose();
+        this._themeChangedListener?.dispose();
     }
     // #endregion
     //#region Private Methods