@arcgis/coding-components 4.30.0-next.46 → 4.30.0-next.48

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.46
+ * v4.30.0-next.48
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d8bdd589.js');
-const arcadeDefaults = require('./arcade-defaults-c2d9ee63.js');
+const index = require('./index-dbf19c86.js');
+const arcadeDefaults = require('./arcade-defaults-21ac6e84.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);
@@ -3859,9 +3923,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 +3940,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 +3967,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,60 +4016,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.hasDestroy = false;
     this.destroyed = false;
     this._updatePromise = new Deferred();
     this._originalLifecycles = {};
@@ -4049,14 +4086,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
         )}"`
       );
@@ -4069,18 +4117,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 = "preserveOnDisconnect" in this.component && typeof this.component.destroy === "function";
+    this.hasDestroy = "autoDestroyDisabled" in this.component && typeof this.component.destroy === "function";
     if (this.hasDestroy)
-      this.watch("preserveOnDisconnect", () => this._preserveOnDisconnectWatcher());
+      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);
@@ -4088,25 +4148,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);
   }
@@ -4123,23 +4183,24 @@ 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();
       throw new Error(
-        `The ${tagName} component has already been destroyed. It can not be used again. If you meant to disconnect and reconnect a component without automatic destroy, set the preserveOnDisconnect prop.`
+        `The ${tagName} component has already been destroyed. It can not be used again. If you meant to disconnect and reconnect a component without automatic destroy, set the autoDestroyDisabled prop.`
       );
     }
+    if (this._autoDestroyTimeout !== void 0)
+      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(
@@ -4147,10 +4208,12 @@ var ControllerManager = class extends GenericController {
     );
     this._originalLifecycles.disconnectedCallback?.call(this.component);
     if (this.hasDestroy)
-      this._preserveOnDisconnectWatcher();
+      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,
@@ -4159,44 +4222,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?.())
-    );
-    this._originalLifecycles.componentDidRender?.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?.())
-      )
+      (controller) => "triggerUpdate" in controller ? controller.triggerUpdate() : safeCall(() => controller.hostUpdate?.())
     );
-    await this._originalLifecycles.componentWillUpdate?.call(this.component);
+    void 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();
@@ -4204,19 +4251,28 @@ var ControllerManager = class extends GenericController {
       return;
     if (this.component.el.isConnected) {
       this.hasDestroy = false;
-      this.component.el.remove();
-      this.hasDestroy = true;
+      try {
+        this.component.el.remove();
+      } finally {
+        this.hasDestroy = true;
+      }
     }
+    this._autoDestroyTimeout = void 0;
     this.destroyed = true;
     this._controllers.forEach(
       (controller) => "triggerDestroy" in controller ? controller.triggerDestroy() : safeCall(() => controller.hostDestroy?.())
     );
     await this._originalLifecycles.destroy?.call(this.component);
   }
-  _preserveOnDisconnectWatcher() {
-    if (!this.component.el.isConnected && !this.component.preserveOnDisconnect)
-      void this.destroy().catch(console.error);
+  _autoDestroyDisabledWatcher() {
+    if (!this.component.el.isConnected && !this.component.autoDestroyDisabled) {
+      if (this._autoDestroyTimeout !== void 0)
+        clearTimeout(this._autoDestroyTimeout);
+      const destroy = () => void this.destroy().catch(console.error);
+      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).
    *
@@ -4236,6 +4292,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.
@@ -4262,13 +4319,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;
@@ -4286,93 +4343,19 @@ var destroyErrorMessage = `
 If the component uses a controller that uses destroy() method, then the
 component must have the following properties:
 ${// Don't expose internal code in production, and keep bundle smaller:
-`preserveOnDisconnect and destroy` }
+`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;
@@ -4386,8 +4369,8 @@ function useT9n({
       return controller.ready;
     const locale = getElementLocales(component.el);
     return { _lang: locale.lang, _t9nLocale: locale.t9nLocale };
-  });
-}
+  })
+);
 
 function isMonacoEnvironmentSetup() {
     return !!window.MonacoEnvironment?.getWorkerUrl;
@@ -4536,7 +4519,7 @@ async function getArcadeWorker(uri) {
  * @returns arcade mode module
  */
 async function getMode() {
-    return await Promise.resolve().then(function () { return require('./arcade-mode-df790d78.js'); });
+    return await Promise.resolve().then(function () { return require('./arcade-mode-fac05e67.js'); });
 }
 // Register the language in Monaco
 arcadeDefaults.languages.register({
@@ -4559,6 +4542,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 {
@@ -4981,8 +4966,9 @@ const ArcgisArcadeEditor = class {
             }
         };
         this._openArcadeHelp = () => void window.open(DevelopersWebSitePath, "Arcade Help");
-        this._emitScriptChange = (e) => {
+        this._onCodeEditorValueChange = (e) => {
             e.stopPropagation();
+            this.script = e.detail;
             this.arcgisScriptChange.emit(e.detail);
         };
         this._insertAsSnippet = (e) => void this._codeEditorElt?.insertSnippet(e.detail).catch(console.error);
@@ -5008,6 +4994,10 @@ const ArcgisArcadeEditor = class {
         this.sideActionBarExpanded = false;
         this.openedSidePanel = "none";
         this.editorOptions = undefined;
+        this.editorInstance = this.manager.getSet(undefined, {
+            get: () => this._codeEditorElt?.editorInstance,
+            set: (_value, prevValue) => prevValue,
+        });
     }
     _profileChanged() {
         this._updateEditorProfile().catch(console.error);
@@ -5026,12 +5016,11 @@ const ArcgisArcadeEditor = class {
     // #endregion
     // #region Public methods API
     /**
-     * Returns the current script.
-     * @returns {Promise<string>}
+     * @deprecated Use `script` property instead.
      */
     async getScript() {
         await this._componentReadyDefer.promise;
-        return await this._codeEditorElt?.getValue();
+        return this._codeEditorElt?.value;
     }
     /**
      * Set the focus on the element.
@@ -5042,12 +5031,11 @@ const ArcgisArcadeEditor = class {
     }
     /**
      * @internal
-     * Returns the editor instance.
-     * @returns {Promise<IStandaloneCodeEditor>} - The monaco editor instance
+     * @deprecated Use `editorInstance` property instead.
      */
     async getEditorInstance() {
         await this._componentReadyDefer.promise;
-        return await this._codeEditorElt?.getEditorInstance();
+        return this._codeEditorElt?.editorInstance;
     }
     /**
      * Returns the Arcade result for the script for the provided test data.
@@ -5166,7 +5154,7 @@ const ArcgisArcadeEditor = class {
     //#endregion
     //#region Render Main Panel
     renderMainPanel() {
-        return (index.h("arcgis-code-editor", { class: "flex-adjustable", language: arcadeDefaults.arcadeDefaults.languageId, value: this.script ?? "", modelId: this._modelId, options: this.editorOptions, onArcgisValueChange: this._emitScriptChange, ref: (e) => (this._codeEditorElt = e) }));
+        return (index.h("arcgis-code-editor", { class: "flex-adjustable", language: arcadeDefaults.arcadeDefaults.languageId, value: this.script ?? "", modelId: this._modelId, options: this.editorOptions, onArcgisValueChange: this._onCodeEditorValueChange, ref: (e) => (this._codeEditorElt = e) }));
     }
     //#endregion
     //#region Rendering the Action Bar
@@ -5538,11 +5526,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
@@ -5767,65 +5755,66 @@ const ArcgisCodeEditor = class {
         index.registerInstance(this, hostRef);
         this.arcgisValueChange = index.createEvent(this, "arcgisValueChange", 3);
         this.arcgisSelectionChange = index.createEvent(this, "arcgisSelectionChange", 3);
+        this.manager = useControllerManager(this);
         this._componentReadyDefer = new arcadeDefaults.Deferred();
         this._disposables = [];
-        this.value = undefined;
+        this.value = this.manager.getSet("", {
+            get: () => this._editorInstance?.getValue() ?? "",
+            set: (newValue, oldValue) => {
+                if (!this._editorInstance) {
+                    return "";
+                }
+                const model = this._editorInstance.getModel();
+                if (!model) {
+                    return "";
+                }
+                if (model.getValue() === newValue) {
+                    return newValue;
+                }
+                // Set the value and preserve the undo stack
+                const range = model.getFullModelRange();
+                this._editorInstance.executeEdits("", [{ range, text: newValue ?? "", forceMoveMarkers: true }]);
+                this._editorInstance.pushUndoStop();
+                // By returning oldValue we are preventing a re-render.
+                // The getter will return the new value anyway.
+                return oldValue;
+            },
+        });
         this.language = undefined;
         this.modelId = arcadeDefaults.generateGuid();
         this.options = undefined;
-    }
-    valuePropChange(newValue) {
-        if (!this._editorInstance) {
-            return;
-        }
-        this._editorInstance.setValue(newValue ?? "");
+        this.editorInstance = this.manager.getSet(undefined, {
+            get: () => this._editorInstance,
+            set: (_value, prevValue) => prevValue,
+        });
     }
     languagePropChange() {
-        if (!this._editorInstance) {
-            return;
-        }
         this.updateModel();
     }
     modelIdPropChange() {
-        if (!this._editorInstance) {
-            return;
-        }
         this.updateModel();
     }
     optionsPropChange(newValue) {
-        if (!this._editorInstance || !newValue) {
+        if (!newValue) {
             return;
         }
-        this._editorInstance.updateOptions(newValue);
+        this._editorInstance?.updateOptions(newValue);
     }
     //#endregion
     // #region Public methods API
     /**
-     * Gets the current value in the editor.
-     * @returns {Promise<string>}
+     * @deprecated Use `value` property instead.
      */
     async getValue() {
         await this._componentReadyDefer.promise;
-        return this._editorInstance?.getValue() ?? "";
+        return this.value;
     }
     /**
-     * Sets the new value in the editor. Use this method instead of setting the value
-     * on the model to preserve undo/redo stack.
-     * @param text
-     * @returns {Promise<void>}
+     * @deprecated Use `value` property instead.
      */
     async setValue(text) {
         await this._componentReadyDefer.promise;
-        if (!this._editorInstance) {
-            return;
-        }
-        const model = this._editorInstance.getModel();
-        if (!model) {
-            return;
-        }
-        const range = model.getFullModelRange();
-        this._editorInstance.executeEdits("", [{ range, text: text ?? "", forceMoveMarkers: true }]);
-        this._editorInstance.pushUndoStop();
+        this.value = text ?? "";
     }
     /**
      * Inserts a text at the current position in the editor.
@@ -5860,8 +5849,7 @@ const ArcgisCodeEditor = class {
     }
     /**
      * @internal
-     * Returns the editor instance.
-     * @returns {Promise<IStandaloneCodeEditor>} - The monaco editor instance
+     * @deprecated Use `editorInstance` property instead.
      */
     async getEditorInstance() {
         await this._componentReadyDefer.promise;
@@ -5895,7 +5883,7 @@ const ArcgisCodeEditor = class {
         const model = arcadeDefaults.editor.createModel("", this.language, this.getUri());
         // Create the editor for the host element.
         // This will not trigger a diagnostic.
-        this._editorInstance = arcadeDefaults.editor.create(this._hostElt, {
+        this._editorInstance = arcadeDefaults.editor.create(this.el, {
             ...(this.options ?? {}),
             model,
             fixedOverflowWidgets: true,
@@ -5908,19 +5896,19 @@ const ArcgisCodeEditor = class {
         this._componentReadyDefer.resolve();
         this._editorInstance.updateOptions(EditorOptionsDefaults);
         this._editorInstance.onDidChangeModelContent(() => {
-            const script = this._editorInstance?.getValue() ?? "";
-            this.arcgisValueChange.emit(script);
+            this.value = this._editorInstance?.getValue() ?? "";
+            this.arcgisValueChange.emit(this.value);
         });
         this._editorInstance.onDidChangeCursorSelection((e) => {
             this.arcgisSelectionChange.emit({ selection: e.selection, model: this._editorInstance?.getModel() });
         });
         // Detect if the host element or its ancestors got a theme attribute mutation
-        this._themeObserver = arcadeDefaults.observeAncestorsMutation(this._hostElt, ["class"], () => this.updateTheme());
+        this._themeObserver = arcadeDefaults.observeAncestorsMutation(this.el, ["class"], () => this.updateTheme());
         // Update the theme of the Monaco Editor
         this.updateTheme();
         // Creates a resize observer to re-layout the editor on size changing
         const resizeObserver = new ResizeObserver(() => this._editorInstance?.layout());
-        resizeObserver.observe(this._hostElt);
+        resizeObserver.observe(this.el);
         // Add common actions to the Monaco Editor's context menu and command palette
         this.addCommonEditorActions();
     }
@@ -5930,6 +5918,13 @@ const ArcgisCodeEditor = class {
         }
         this._themeObserver?.remove();
     }
+    componentShouldUpdate(_newVal, _oldVal, propName) {
+        if (propName === "value" || propName === "language" || propName === "modelId" || propName === "options") {
+            // These are properties that we directly pass to the editor
+            return false;
+        }
+        return true;
+    }
     //#endregion
     // #region Private methods API
     updateModel() {
@@ -5937,7 +5932,7 @@ const ArcgisCodeEditor = class {
             return;
         }
         this._editorInstance.getModel()?.dispose();
-        this._editorInstance.setModel(arcadeDefaults.editor.createModel(this.value ?? "", this.language, this.getUri()));
+        this._editorInstance.setModel(arcadeDefaults.editor.createModel(this.value, this.language, this.getUri()));
     }
     getUri() {
         return this.modelId ? arcadeDefaults.Uri.parse(this.modelId) : arcadeDefaults.Uri.parse("");
@@ -5946,7 +5941,7 @@ const ArcgisCodeEditor = class {
         // This is called the first time and subsequently by the Mutation Observer
         // Figure out the theme by walking the ancestor path.
         // If no theme is found then default to light.
-        const theme = arcadeDefaults.getElementTheme(this._hostElt) === "light" ? "vs" : "vs-dark";
+        const theme = arcadeDefaults.getElementTheme(this.el) === "light" ? "vs" : "vs-dark";
         if (theme === this._currentTheme) {
             return;
         }
@@ -5988,9 +5983,8 @@ const ArcgisCodeEditor = class {
         return index.h(index.Host, null);
     }
     static get assetsDirs() { return ["assets"]; }
-    get _hostElt() { return index.getElement(this); }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
-        "value": ["valuePropChange"],
         "language": ["languagePropChange"],
         "modelId": ["modelIdPropChange"],
         "options": ["optionsPropChange"]