@arcgis/coding-components 4.30.0-next.3 → 4.30.0-next.30

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

@@ -1,10 +1,10 @@
 /*!
  * 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.3
+ * v4.30.0-next.30
  */
-import { r as registerInstance, c as createEvent, g as getAssetPath, h, H as Host, a as getElement, F as Fragment } from './index-3bfb710a.js';
-import { g as generateTokensCSSForColorMap, e as editor, S as StandaloneServices, I as IStandaloneThemeService, c as createCommonjsModule, b as commonjsGlobal, i as ie, s as se, d as importRequest, l as languages, f as arcadeDefaults, B, U as Uri, q, W, h as filterCollection, G, j as importArcade, k as h$1, m as U, n as k, K as KeyCode, Z, D, o as supportedFields, p as K, R as Range, x, r as KeyMod } from './arcade-defaults-372ecf79.js';
+import { f as forceUpdate, g as getAssetPath, r as registerInstance, c as createEvent, h, H as Host, a as getElement, F as Fragment } from './index-06d390be.js';
+import { g as generateTokensCSSForColorMap, e as editor, S as StandaloneServices, I as IStandaloneThemeService, c as createCommonjsModule, b as commonjsGlobal, i as importCoreAccessor, d as importCoreAccessorSupportDecorators, f as isURL, h as hasSameOrigin, j as importRequest, l as languages, k as arcadeDefaults, U as Uri, s as setFocusOnElement, m as filterCollection, n as addLTRMark, o as importArcade, D as Deferred$1, p as generateGuid, q as getElementTheme, K as KeyCode, r as setValuesInString, t as quoteString, u as supportedFields, v as createFilterExpression, R as Range, w as observeAncestorsMutation$1, x as KeyMod } from './arcade-defaults-3f0e1c43.js';
 
 async function colorizeCode(code) {
     return await editor.colorize(code, "arcade", { tabSize: 2 });
@@ -2917,24 +2917,1460 @@ var marked_umd = createCommonjsModule(function (module, exports) {
 // Set up the marked library to use GitHub Flavored Markdown and to use the custom renderer for links.
 marked_umd.marked.use({
     gfm: true,
+    breaks: true,
+    async: false,
     renderer: {
         link(href, title, text) {
             return `<calcite-link href="${href}" title="${title ?? text}" target="Arcade Help">${text}</calcite-link>`;
-        }
-    }
+        },
+    },
 });
 /**
  * Converts a markdown string to HTML using the marked library.
  */
 function convertMarkdownString(value) {
-    value ?? (value = "");
-    const result = marked_umd.marked(typeof value === "string" ? value : value.value, {
-        gfm: true,
-        breaks: true,
-        headerIds: false,
-        mangle: false
+    if (value === null || value === undefined) {
+        return "";
+    }
+    return marked_umd.marked.parse(typeof value === "string" ? value : value.value);
+}
+
+// ../components-utils/dist/index.js
+var Deferred = class {
+  /**
+   * Creates a new deferred promise.
+   */
+  constructor() {
+    this.resolve = () => void 0;
+    this.reject = () => void 0;
+    this.promise = new Promise((resolve, reject) => {
+      this.resolve = resolve;
+      this.reject = reject;
+    });
+  }
+};
+function inTargetElement(element, targetElement) {
+  let currentElement = element;
+  while (currentElement) {
+    if (currentElement === targetElement) {
+      return true;
+    }
+    if (!currentElement.parentNode) {
+      return false;
+    }
+    if (currentElement.parentNode instanceof ShadowRoot) {
+      currentElement = currentElement.parentNode.host;
+    } else {
+      currentElement = currentElement.parentNode;
+    }
+  }
+  return false;
+}
+function observeAncestorsMutation(element, attributeFilter, callback) {
+  const { subscribe } = observe(attributeFilter);
+  return subscribe((mutations) => {
+    const matched = mutations.some((mutation) => inTargetElement(element, mutation.target));
+    if (matched)
+      callback();
+  });
+}
+var observers = {};
+function observe(attributeFilter) {
+  const attributes = attributeFilter.join(",");
+  const previousObserver = observers[attributes];
+  if (previousObserver !== void 0)
+    return previousObserver;
+  const subscribers = /* @__PURE__ */ new Set();
+  const mutationObserver = new MutationObserver((mutations) => subscribers.forEach((callback) => callback(mutations)));
+  mutationObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter,
+    subtree: true
+  });
+  const observer = {
+    subscribe(callback) {
+      subscribers.add(callback);
+      return {
+        remove: () => {
+          subscribers.delete(callback);
+          if (subscribers.size === 0) {
+            mutationObserver.disconnect();
+            observers[attributes] = void 0;
+          }
+        }
+      };
+    }
+  };
+  observers[attributes] = observer;
+  return observer;
+}
+function closestElement(base, selector) {
+  let currentElement = base;
+  while (currentElement) {
+    const element = currentElement.closest(selector);
+    if (element) {
+      return element;
+    }
+    const rootElement = currentElement.getRootNode();
+    if (rootElement === document) {
+      return null;
+    }
+    currentElement = rootElement.host;
+  }
+  return null;
+}
+function getElementAttribute(el, prop, fallbackValue) {
+  const closest = closestElement(el, `[${prop}]`);
+  return closest?.getAttribute(prop) ?? fallbackValue;
+}
+function safeCall(callback) {
+  try {
+    return callback?.();
+  } catch (error) {
+    console.error(error, callback);
+  }
+  return void 0;
+}
+async function safeAsyncCall(callback) {
+  try {
+    return await callback();
+  } catch (error) {
+    console.error(error, callback);
+  }
+  return void 0;
+}
+var capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1);
+var camelToHuman = (value) => capitalize(value.replaceAll(/([a-z])([A-Z])/gu, "$1 $2"));
+var supportedLocales = /* @__PURE__ */ new Set([
+  "ar",
+  "bg",
+  "bs",
+  "ca",
+  "cs",
+  "da",
+  "de",
+  "el",
+  "en",
+  "es",
+  "et",
+  "fi",
+  "fr",
+  "he",
+  "hr",
+  "hu",
+  "id",
+  "it",
+  "ja",
+  "ko",
+  "lt",
+  "lv",
+  "nl",
+  "nb",
+  "pl",
+  "pt-BR",
+  "pt-PT",
+  "ro",
+  "ru",
+  "sk",
+  "sl",
+  "sr",
+  "sv",
+  "th",
+  "tr",
+  "uk",
+  "vi",
+  "zh-CN",
+  "zh-HK",
+  "zh-TW"
+]);
+var defaultLocale = "en";
+async function fetchT9NStringsBundle(locale, assetsPath, prefix = "") {
+  const path = `${assetsPath}/${prefix}`;
+  const filePath = `${path}${locale}.json`;
+  t9nStringsCache[filePath] ?? (t9nStringsCache[filePath] = fetchBundle(locale, path));
+  return await t9nStringsCache[filePath];
+}
+var t9nStringsCache = {};
+async function fetchBundle(locale, path) {
+  const filePath = `${path}${locale}.json`;
+  try {
+    const response = await fetch(filePath);
+    if (response.ok)
+      return await response.json();
+  } catch (error) {
+    console.error(error);
+    return fallbackBundle;
+  }
+  if (locale === defaultLocale)
+    return fallbackBundle;
+  return await fetchBundle(defaultLocale, path);
+}
+var fallbackBundle = new Proxy(
+  {},
+  {
+    get: (_target, property) => camelToHuman(property.toString())
+  }
+);
+function getElementLocales(element) {
+  const lang = getElementAttribute(element, "lang", navigator.language || defaultLocale);
+  if (supportedLocales.has(lang)) {
+    return { lang, t9nLocale: lang };
+  }
+  const rootCode = lang.slice(0, 2);
+  return { lang, t9nLocale: supportedLocales.has(rootCode) ? rootCode : defaultLocale };
+}
+function startLocaleObserver(element, assetsPath, onUpdated, assetName) {
+  let result = void 0;
+  const callback = () => void updateComponentLocateState(element, assetsPath, assetName).then((newResult) => {
+    if (result?.lang !== newResult.lang || result.t9nLocale !== newResult.t9nLocale || result.t9nStrings !== newResult.t9nStrings)
+      onUpdated(newResult);
+    result = newResult;
+  }).catch(console.error);
+  callback();
+  return observeAncestorsMutation(element, ["lang"], callback);
+}
+async function updateComponentLocateState(element, assetsPath, assetName = element.tagName.toLowerCase().replace("arcgis-", "")) {
+  const { lang, t9nLocale } = getElementLocales(element);
+  const t9nAssetsPath = `${assetsPath}/${assetName}/t9n`;
+  const prefix = `${assetName}.t9n.`;
+  const t9nStrings = await fetchT9NStringsBundle(t9nLocale, t9nAssetsPath, prefix);
+  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() {
+    this._ambientControllers = [];
+    /**
+     * The type definition has to be duplicated due to the
+     * "'use' is referenced directly or indirectly in its own type annotation."
+     * error
+     */
+    this.use = async (value, watchExports) => {
+      const controller = this._useRefSync(value);
+      if (controller === void 0) {
+        if (typeof watchExports === "function") {
+          const error = new Error(
+            `Unable to resolve a controller from the provided value, so can't watch it's exports. ${unresolvableExports}`
+          );
+          console.error(error);
+        }
+        return value;
+      }
+      await controller.ready;
+      if (typeof watchExports === "function") {
+        if (controller.watchExports === void 0)
+          throw new Error(`The controller must implement watchExports method to support watching exports`);
+        const unsubscribe = controller.watchExports(
+          (exports) => watchExports(exports, unsubscribe)
+        );
+      }
+      return controller.exports;
+    };
+    this.useRef = async (value) => {
+      const controller = this._useRefSync(value);
+      if (controller === void 0)
+        throw new Error(`Unable to resolve a controller from the provided value. ${unresolvableExports}`);
+      await controller.ready;
+      return controller;
+    };
+    this.shouldBypassSetter = false;
+    this.shouldBypassGetter = false;
+    this.shouldBypassReadonly = false;
+    /**
+     * A map from component instance or component element to component instance.
+     * To get from component instance or component element to component element,
+     * you can just use the .el property
+     */
+    this.elementToInstance = /* @__PURE__ */ new WeakMap();
+  }
+  /*
+   * Allow controllers to implicitly retrieve which component they are in, to
+   * improve DX (avoids the need to pass "this" explicitly for each controller)
+   */
+  setAmbientComponent(component) {
+    if (this._ambientComponent === component)
+      return;
+    this._ambientComponent = component;
+    queueMicrotask(() => {
+      if (this._ambientComponent === component)
+        this._ambientComponent = void 0;
+    });
+  }
+  retrieveComponent(name) {
+    if (this._ambientComponent === void 0)
+      throw new Error(
+        [
+          `Unable to find out which component ${name || "this"} controller `,
+          "belongs to. This might happen if you tried to create a controller ",
+          "outside the component. If so, please wrap your controller ",
+          "definition in an arrow function, ",
+          "`const myController = ()=>makeController(...);` and call that",
+          "function inside the component `my = myController();`, or ",
+          "define your controller using makeGenericController/GenericController ",
+          "instead.\n",
+          "If you wish to use a controller inside an async controller, ",
+          "make sure you are using controller.use.\n",
+          "You might also have multiple instances of Controllers loaded"
+        ].join("\n")
+      );
+    return this._ambientComponent;
+  }
+  /*
+   * Aids proxyExports() in knowing who is it's host
+   */
+  setParentController(controller) {
+    if (controller === void 0) {
+      this._ambientControllers = [];
+      return;
+    }
+    const index = this._ambientControllers.indexOf(controller);
+    this._ambientControllers = index === -1 ? [...this._ambientControllers, controller] : this._ambientControllers.slice(0, index + 1);
+    queueMicrotask(() => {
+      this._ambientControllers = [];
+    });
+  }
+  retrieveParentControllers() {
+    return this._ambientControllers;
+  }
+  /*
+   * Aids controller.use in retrieving controller value when it receives
+   * controller exports, rather than the controller itself
+   */
+  setAmbientChildController(controller) {
+    if (this._ambientChildController === controller)
+      return;
+    this._ambientChildController = controller;
+    queueMicrotask(() => {
+      if (this._ambientChildController === controller)
+        this._ambientChildController = void 0;
+    });
+  }
+  retrieveAmbientChildController() {
+    const controller = this._ambientChildController;
+    this._ambientChildController = void 0;
+    return controller;
+  }
+  /**
+   * Try to resolve a controller, without awaiting it's load
+   */
+  _useRefSync(value) {
+    const ambientChildController = this.retrieveAmbientChildController();
+    if (ambientChildController !== void 0)
+      return ambientChildController;
+    const component = Controller.internals.retrieveComponent();
+    const controller = component.manager.internals.resolveExports(value);
+    if (controller !== void 0)
+      return controller;
+    if (isController(value))
+      return value;
+    return void 0;
+  }
+};
+var unresolvableExports = [
+  "The value you passed is not a controller and not a controller exports. If ",
+  "your controller exports a literal value, try making your controller export ",
+  "an object instead"
+].join("");
+
+// src/stencil.ts
+function retrieveComponentMeta(component) {
+  const constructor = component.constructor;
+  const meta = constructor.__registerControllers?.(component) ?? void 0;
+  constructor.__registerControllers = void 0;
+  if (typeof meta !== "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.meta = { members: meta[0], watchers: meta[1] };
+}
+function parsePropertyValue(value, type = 8 /* Any */) {
+  const isComplex = value == null || typeof value === "object" || typeof value === "function";
+  if (isComplex)
+    return value;
+  if ((type & 4 /* Boolean */) !== 0)
+    return value === "false" ? false : value === "" || !!value;
+  else if ((type & 2 /* Number */) !== 0)
+    return Number.parseFloat(value.toString());
+  else if ((type & 1 /* String */) !== 0)
+    return String(value);
+  else
+    return value;
+}
+var makeMemberFilter = (filter) => (component) => {
+  const members = component.manager.internals.meta?.members;
+  return Object.entries(members ?? {}).filter(([_name, [propType]]) => (propType & filter) !== 0).map(([name]) => name);
+};
+var getPropLikeMembers = makeMemberFilter(63 /* PropLike */);
+var getMemberType = (component, name) => component.manager.internals.meta.members?.[name]?.[0];
+function getPropType(component, name) {
+  const type = getMemberType(component, name);
+  if (type === void 0)
+    return void 0;
+  else if (type & 32 /* State */)
+    return "state";
+  else
+    return "prop";
+}
+function addPropertyWatcher(component, property) {
+  const meta = component.manager.internals.meta;
+  meta.watchers ?? (meta.watchers = {});
+  const watchers = meta.watchers;
+  if (!(property in watchers))
+    watchers[property] = [];
+  if (!watchers[property].includes(watcherCallbackName))
+    watchers[property].push(watcherCallbackName);
+}
+var watcherCallbackName = "dynamicWatcherCallback";
+
+// src/Controller.ts
+var _a;
+var _Controller = class _Controller {
+  constructor(component) {
+    this._ready = new Deferred();
+    this._lifecycleDisconnected = [];
+    this.connectedCalled = false;
+    this.willLoadCalled = false;
+    this.didLoadCalled = false;
+    this[_a] = true;
+    this.ready = this._ready.promise;
+    /*
+     * Setting default exports to "this" so that controllers that don't use
+     * exports/proxyExports(), could still be used as if they did
+     * (i.e with controller.use)
+     */
+    this._exports = makeProvisionalValue(this);
+    this._exportWatchers = /* @__PURE__ */ new Set();
+    const resolvedComponent = toControllerHost(
+      component ?? _Controller.internals.retrieveComponent(new.target.name)
+    );
+    Object.defineProperty(this, "component", {
+      writable: false,
+      enumerable: false,
+      configurable: true,
+      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)
+      queueMicrotask(() => this.catchUpLifecycle());
+    const controller = 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?.()] : []
+    };
+  }
+  /**
+   * If controller is being added dynamically, after the component
+   * construction, then trigger connected and load right away
+   */
+  catchUpLifecycle() {
+    if (this.connectedCalled)
+      return;
+    this.triggerConnected();
+    const loadWillStillHappen = !this.component.manager.willLoadCalled;
+    if (loadWillStillHappen)
+      return;
+    this.triggerLoad().then(() => {
+      const loadedWillStillHappen = !this.component.manager.didLoadCalled;
+      if (loadedWillStillHappen)
+        return;
+      this.triggerLoaded();
+    }).catch(console.error);
+  }
+  get exports() {
+    return this._exports;
+  }
+  /**
+   * Set controller's exports property (for usage with proxyExports()) and mark
+   * controller as ready (for usage in other controllers). Also, triggers
+   * re-render of the component
+   */
+  set exports(exports) {
+    if (this._exports !== exports) {
+      this._exports = exports;
+      if (this.connectedCalled)
+        this.component.requestUpdate();
+      this._exportWatchers.forEach((callback) => callback(exports));
+    }
+    this._ready.resolve(exports);
+  }
+  setProvisionalExports(exports) {
+    this._exports = makeProvisionalValue(exports);
+    this._exportWatchers.forEach((callback) => callback(this._exports));
+  }
+  watchExports(callback) {
+    const safeCallback = (exports) => safeCall(() => callback(exports));
+    this._exportWatchers.add(safeCallback);
+    return () => void this._exportWatchers.delete(safeCallback);
+  }
+  /**
+   * A flexible utility for making sure a controller is loaded before it's used,
+   * regardless of how or where a controller was defined:
+   *
+   * @example
+   * makeGenericController(async (component, controller) => {
+   *   // Await some controller from the component:
+   *   await controller.use(component.someController);
+   *   // Initialize new controllers
+   *   await controller.use(load(importCoreReactiveUtils));
+   *   await controller.use(new ViewModelController(component,newWidgetsHomeHomeViewModel));
+   *   await controller.use(someController(component));
+   * });
+   *
+   * @remarks
+   * If your controller is not async, and you are not creating it async, then
+   * you are not required to use controller.use - you can use it directly.
+   * Similarly, accessing controllers after componentWillLoad callback does not
+   * require awaiting them as they are guaranteed to be loaded by then.
+   */
+  get use() {
+    _Controller.internals.setAmbientComponent(this.component);
+    return _Controller.internals.use;
+  }
+  /**
+   * Just like controller.use, but returns the controller itself, rather than it's
+   * exports
+   *
+   * Use cases:
+   * - You have a controller and you want to make sure it's loaded before you
+   *   try to use it
+   * - Your controller is not using exports, so you wish to access some props on
+   *   it directly
+   * - You have a controller exports only, and you want to retrieve the
+   *   controller itself. This is useful if you wish to call .watchExports() or
+   *   some other method on the controller
+   */
+  get useRef() {
+    _Controller.internals.setAmbientComponent(this.component);
+    return _Controller.internals.useRef;
+  }
+  /**
+   * If you need to set a prop/state without triggering the custom setter you
+   * defined with getSet()/dynamicGetSet()/readonly(), set the value inside
+   * of this function
+   *
+   * @example
+   * @Prop() readOnly = this.manager.readOnly(true);
+   *
+   * someAction(): void {
+   *   this.manager.bypassSetter(()=>{
+   *     this.readOnly = false;
+   *   });
+   * }
+   *
+   */
+  bypassSetter(callback) {
+    _Controller.internals.shouldBypassSetter = true;
+    const result = safeCall(callback);
+    _Controller.internals.shouldBypassSetter = false;
     return result;
+  }
+  /**
+   * Like bypassSetter, but only bypasses this.manager.readonly(), rather that
+   * all setters set using this.manager.getSet()
+   */
+  bypassReadonly(callback) {
+    _Controller.internals.shouldBypassReadonly = true;
+    const result = safeCall(callback);
+    _Controller.internals.shouldBypassReadonly = false;
+    return result;
+  }
+  /**
+   * 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.
+   *
+   * This also bypasses reactiveUtils integration - reading a property inside of
+   * bypassGetter won't make that property tracked.
+   *
+   * @example
+   * reactiveUtils.watch(
+   *   ()=>{
+   *     this.manager.bypassGetter(()=>{
+   *       console.log(this.someProp);
+   *     });
+   *     return this.prop;
+   *   },
+   *   console.log
+   * )
+   */
+  bypassGetter(callback) {
+    _Controller.internals.shouldBypassGetter = true;
+    const result = safeCall(callback);
+    _Controller.internals.shouldBypassGetter = false;
+    return result;
+  }
+  /**
+   * Like this.manager.getSet(), but can be called on any component's
+   * state/prop from anywhere, rather than just from the default value
+   */
+  dynamicGetSet(name, getSet) {
+    this.genericGetSet(name, getSet);
+  }
+  /**
+   * Like dynamicGetSet, but less type-safe. Useful in cases when trying to set
+   * getters/setters in place where property names & types are not known
+   * statically
+   */
+  genericGetSet(property, getSet) {
+    var _a2, _b;
+    const genericGetSet = getSet;
+    if (genericGetSet.get !== void 0) {
+      (_a2 = this.internals.getters)[property] ?? (_a2[property] = []);
+      this.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);
+    }
+  }
+  // FEATURE: improve typings
+  /**
+   * Dynamically set a watcher for any @Prop()/@State() 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`
+      );
+    addPropertyWatcher(this.component, property);
+    (_a2 = this.internals.watchers)[property] ?? (_a2[property] = []);
+    const watchers = this.internals.watchers[property];
+    const genericCallback = callback;
+    const safeCallback = (newValue, oldValue, propertyName) => safeCall(() => genericCallback(newValue, oldValue, propertyName));
+    watchers.push(safeCallback);
+    return () => {
+      const index = watchers.indexOf(safeCallback);
+      if (index !== -1)
+        watchers.splice(index, 1);
+    };
+  }
+  // Register a lifecycle callback
+  onConnected(callback) {
+    this._callbacks.hostConnected.push(callback);
+  }
+  onDisconnected(callback) {
+    this._callbacks.hostDisconnected.push(callback);
+  }
+  onLoad(callback) {
+    this._callbacks.hostLoad.push(callback);
+  }
+  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);
+  }
+  onUpdated(callback) {
+    this._callbacks.hostUpdated.push(callback);
+  }
+  onDestroy(callback) {
+    this.component.manager.ensureHasDestroy();
+    this._callbacks.hostDestroy.push(callback);
+  }
+  onLifecycle(callback) {
+    this._callbacks.hostLifecycle.push(callback);
+    if (this.connectedCalled && this.component.el.isConnected)
+      this._callLifecycle(callback);
+  }
+  // Call each lifecycle hook
+  triggerConnected() {
+    this._callbacks.hostConnected.forEach(safeCall);
+    this.triggerLifecycle();
+    this.connectedCalled = true;
+  }
+  triggerDisconnected() {
+    this._callbacks.hostDisconnected.forEach(safeCall);
+    this._lifecycleDisconnected.forEach(safeCall);
+    this._lifecycleDisconnected = [];
+  }
+  async triggerLoad() {
+    if (this.willLoadCalled)
+      return;
+    this.willLoadCalled = true;
+    if (this._callbacks.hostLoad.length > 0)
+      await Promise.allSettled(this._callbacks.hostLoad.map(safeAsyncCall));
+    this._ready.resolve(this._exports);
+  }
+  triggerLoaded() {
+    if (this.didLoadCalled)
+      return;
+    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));
+  }
+  triggerUpdated() {
+    this._callbacks.hostUpdated.forEach(safeCall);
+  }
+  triggerDestroy() {
+    this._callbacks.hostDestroy.forEach(safeCall);
+  }
+  triggerLifecycle() {
+    this._callbacks.hostLifecycle.forEach((callback) => this._callLifecycle(callback));
+  }
+  _callLifecycle(callback) {
+    const cleanupRaw = safeCall(callback);
+    const cleanup = Array.isArray(cleanupRaw) ? cleanupRaw : [cleanupRaw];
+    cleanup.forEach((cleanup2) => {
+      if (typeof cleanup2 === "function")
+        this._lifecycleDisconnected.push(cleanup2);
+      else if (typeof cleanup2 === "object" && typeof cleanup2.remove === "function")
+        this._lifecycleDisconnected.push(cleanup2.remove);
+    });
+  }
+};
+_a = controllerSymbol;
+_Controller.internals = new ControllerInternals();
+var Controller = _Controller;
+var GenericController = class extends Controller {
+  // Redundant constructor needed to improve typing
+  constructor(component) {
+    super(component);
+  }
+  // Overriding super's watch only to improve typing
+  watch(property, callback) {
+    return super.watch(
+      property,
+      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);
+  }
+};
+function makeProvisionalValue(base) {
+  if (typeof base !== "object" && typeof base !== "function" || base === null)
+    return base;
+  const proxy3 = new Proxy(base, {
+    get(target, prop, receiver) {
+      if (cyclical.has(prop) && prop in target && target[prop] === proxy3)
+        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);
+      console.error(`Trying to access "${prop.toString()}" on the controller before it's loaded. ${accessBeforeLoad}`);
+      return void 0;
+    },
+    set(target, prop, newValue, receiver) {
+      console.error(`Trying to set "${prop.toString()}" on the controller before it's loaded. ${accessBeforeLoad}`);
+      return Reflect.set(target, prop, newValue, receiver);
+    }
+  });
+  return proxy3;
+}
+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("");
+function toControllerHost(component) {
+  if ("addController" in component)
+    return component;
+  else
+    throw new Error(
+      "Component does not implement ControllerHost. This might be because you forgot to add 'manager: Controller<this> = useControllerManager(this);' in your component, or you tried to use some controller before that line"
+    );
+}
+
+// src/trackPropertyKey.ts
+function trackPropertyKey(object, onResolved, defaultValue) {
+  const keys = Object.keys(object);
+  const keyCount = keys.length;
+  if (keyTrackMap === void 0)
+    queueMicrotask(keyTrackResolve);
+  keyTrackMap ?? (keyTrackMap = /* @__PURE__ */ new Map());
+  let pendingTrackers = keyTrackMap.get(object);
+  if (pendingTrackers === void 0) {
+    pendingTrackers = { callbacks: [], keyCount };
+    keyTrackMap.set(object, pendingTrackers);
+  }
+  if (pendingTrackers.keyCount !== keyCount) {
+    pendingTrackers.callbacks.forEach((resolve) => resolve(keys));
+    pendingTrackers.callbacks = [];
+    pendingTrackers.keyCount = keyCount;
+  }
+  pendingTrackers.callbacks.push((keys2) => {
+    const callback = (key2) => safeCall(() => onResolved(key2));
+    const key = keys2[keyCount];
+    if (key === void 0)
+      callback(void 0);
+    else if (object[key] === defaultValue)
+      callback(key);
+    else
+      callback(void 0);
+  });
+  return defaultValue;
+}
+var keyTrackMap = void 0;
+function keyTrackResolve() {
+  Array.from(keyTrackMap?.entries() ?? []).forEach(([object, { callbacks }]) => {
+    const keys = Object.keys(object);
+    callbacks.forEach((commit) => commit(keys));
+  });
+  keyTrackMap = void 0;
+}
+
+// src/ComponentInternals.ts
+var ComponentInternals = class {
+  constructor(component) {
+    this.trackKey = (hostsCandidates, onResolved, defaultValue) => {
+      const candidateHosts = Array.isArray(hostsCandidates) ? hostsCandidates : [hostsCandidates];
+      let leftToResolve = candidateHosts.length + 1;
+      const resolved = (resolution) => {
+        leftToResolve -= 1;
+        if (resolution !== void 0)
+          leftToResolve = 0;
+        if (leftToResolve === 0)
+          onResolved(resolution);
+      };
+      candidateHosts.forEach(
+        (host) => this.component.manager.trackPropertyKey(
+          host,
+          (key) => resolved(
+            key === void 0 ? void 0 : {
+              key,
+              host,
+              type: "property",
+              domValue: void 0
+            }
+          ),
+          defaultValue
+        )
+      );
+      this.component.manager.trackPropKey((key, domValue) => {
+        const propType = key === void 0 ? void 0 : getPropType(this.component, key);
+        resolved(
+          key === void 0 ? void 0 : {
+            key,
+            host: this.component,
+            type: propType ?? "prop",
+            domValue: propType === "prop" ? domValue : void 0
+          }
+        );
+      }, defaultValue);
+      return defaultValue;
+    };
+    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 ? key : void 0, previousValue))
+      );
+      return defaultValue;
+    };
+    this._trackedValue = nothing;
+    this._keyTrackers = [];
+    this.getters = {};
+    this.setters = {};
+    this.accessorGetter = {};
+    this.accessorSetter = {};
+    this._exports = /* @__PURE__ */ new WeakMap();
+    Object.defineProperty(this, "component", {
+      writable: false,
+      enumerable: false,
+      configurable: true,
+      value: component
+    });
+  }
+  _firePropertyTrackers(key, value, oldValue) {
+    const trackers = this._keyTrackers;
+    this._trackedValue = nothing;
+    this._keyTrackers = [];
+    trackers.forEach((tracker) => tracker(key, value, oldValue));
+  }
+  /**
+   * Configure a getter or setter for a given \@Prop/\@State
+   *
+   * Note, since props are defined on the prototype, they are shared between all
+   * instances of a component. Thus, instead of passing a reference to the
+   * getter/setter function, you should update the
+   * ComponentInternals.getters/setters properties, and then call getSetProxy
+   * to apply the changes to the prototype
+   */
+  getSetProxy(property, hasGetter, hasSetter) {
+    const classPrototype = Object.getPrototypeOf(this.component);
+    this._getSetProxy(classPrototype, property, hasGetter, hasSetter, "class");
+    const htmlPrototype = Object.getPrototypeOf(this.component.el);
+    if (classPrototype !== htmlPrototype)
+      this._getSetProxy(htmlPrototype, property, hasGetter, hasSetter, "html");
+  }
+  _getSetProxy(prototype, name, hasGetter, hasSetter, type) {
+    const component = this.component;
+    const propType = getMemberType(component, name);
+    const descriptor = Object.getOwnPropertyDescriptor(prototype, name);
+    const tolerateNotFound = type === "html";
+    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}`
+        );
+      else if (tolerateNotFound)
+        return;
+      else
+        throw new Error(`Unable to find "${name}" property on the ${component.el.tagName} component`);
+    const { get: originalGet, set: originalSet } = descriptor;
+    const isGetterAlreadyOverwritten = customAccessor in originalGet;
+    const isSetterAlreadyOverwritten = customAccessor in originalSet;
+    const shouldOverwriteGet = !isGetterAlreadyOverwritten && hasGetter;
+    const shouldOverwriteSet = !isSetterAlreadyOverwritten && hasSetter;
+    if (!shouldOverwriteGet && !shouldOverwriteSet)
+      return;
+    const finalGetter = shouldOverwriteGet ? function getter() {
+      let value = originalGet.call(this);
+      if (Controller.internals.shouldBypassGetter)
+        return value;
+      const component2 = Controller.internals.elementToInstance.get(this);
+      const internals = component2.manager.internals;
+      value = internals.accessorGetter[name](value, name);
+      const getters = internals.getters[name] ?? emptyArray;
+      for (let i = 0; i < getters.length; i++)
+        value = getters[i](value, name);
+      return value;
+    } : originalGet;
+    const finalSetter = shouldOverwriteSet ? function setter(rawNewValue) {
+      const oldValue = originalGet.call(this);
+      let newValue = parsePropertyValue(rawNewValue, propType);
+      const component2 = Controller.internals.elementToInstance.get(this);
+      const internals = component2.manager.internals;
+      if (newValue === oldValue)
+        originalSet.call(this, rawNewValue);
+      else {
+        const setters = Controller.internals.shouldBypassSetter ? emptyArray : internals.setters[name] ?? emptyArray;
+        for (let i = 0; i < setters.length; i++)
+          newValue = setters[i](newValue, oldValue, name);
+        newValue = internals.accessorSetter[name](newValue, oldValue, name);
+        originalSet.call(this, newValue);
+      }
+      if (internals._keyTrackers.length > 0)
+        internals?._firePropertyTrackers(name, rawNewValue, oldValue);
+    } : originalSet;
+    if (shouldOverwriteGet)
+      Object.defineProperty(finalGetter, customAccessor, { value: true });
+    if (shouldOverwriteSet)
+      Object.defineProperty(finalSetter, customAccessor, { value: true });
+    Object.defineProperty(prototype, name, {
+      ...descriptor,
+      get: finalGetter,
+      set: finalSetter
+    });
+  }
+  /**
+   * Associate an exports object with a controller for reverse lookup in
+   * controller.use
+   */
+  markExports(controller, exports) {
+    if (typeof exports === "object" && exports !== null || typeof exports === "function")
+      this._exports.set(exports, controller);
+  }
+  resolveExports(exports) {
+    if (typeof exports === "object" && exports !== null || typeof exports === "function")
+      return this._exports.get(exports);
+    else
+      return void 0;
+  }
+};
+var emptyArray = [];
+var customAccessor = Symbol("controllersCustomAccessor");
+var nothing = Symbol("nothing");
+var accessorPromise = Promise.all([importCoreAccessor(), 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 ControllerManager = class extends GenericController {
+  constructor(component) {
+    const controllers = /* @__PURE__ */ new Set();
+    const watchers = {};
+    const controllerHost = {
+      addController: (controller) => {
+        controllers.add(controller);
+      },
+      [watcherCallbackName]: (newValue, oldValue, propertyName) => {
+        watchers[propertyName]?.forEach((callback) => callback(newValue, oldValue, propertyName));
+      },
+      removeController: (controller) => {
+        controllers.delete(controller);
+      },
+      requestUpdate: () => forceUpdate(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 = {};
+    /**
+     * A magical solution to finding out what property name a given controller
+     * on a given object was assigned to. Note, this does not work for properties
+     * that have \@Prop() or \@State() decorator - for those, use
+     * manager.trackPropKey() instead.
+     *
+     * @example
+     * function trackMe<T>(defaultValue:T, component:BaseComponent):T {
+     *   component.manager.trackPropertyKey(component, (key)=>console.log(key), defaultValue);
+     *   return defaultValue;
+     * }
+     *
+     * class MyComponent extends BaseComponent {
+     *   // Will console log "myProp"
+     *   myProp = trackMe('a', this);
+     * }
+     *
+     */
+    this.trackPropertyKey = trackPropertyKey;
+    /**
+     * Like manager.trackPropertyKey(), but for props that have \@State() or \@Prop()
+     * decorator
+     *
+     * @example
+     * function trackMe(component:BaseComponent) {
+     *   component.manager.trackPropKey((key)=>console.log(key));
+     * }
+     *
+     * class MyComponent extends BaseComponent {
+     *   // Will console log "myProp"
+     *   @Prop() myProp = trackMe(this);
+     *
+     *   // Will console log "myState"
+     *   @State() myState = trackMe(this);
+     * }
+     */
+    this.trackPropKey = this.internals.trackPropKey;
+    /**
+     * A combination of trackPropertyKey() and trackPropKey(). For usage when
+     * you want to track a property, but don't know if it will be defined with the
+     * \@Prop() decorator or not
+     */
+    this.trackKey = this.internals.trackKey;
+    this._readonlySetter = (newValue, _oldValue, property) => {
+      if (Controller.internals.shouldBypassReadonly)
+        return newValue;
+      const isProp = getPropType(this.component, property) === "prop";
+      if (isProp)
+        forceUpdate(this.component);
+      throw new Error(
+        `Cannot assign to read-only property "${property}" of ${this.component.el.tagName.toLowerCase()}. Trying to assign "${String(
+          newValue
+        )}"`
+      );
+    };
+    /**
+     * In development, on hot module reload, controller would be re-initialized
+     * with all Props and State values persistent, but properties lost. This unsafe
+     * development-only API lets you set or get data for a controller that would
+     * persist across hot reloads.
+     */
+    this.devOnlySetPersistentControllerData = void 0 ;
+    this.devOnlyGetPersistentControllerData = void 0 ;
+    this.component.manager = this;
+    retrieveComponentMeta(component);
+    this._controllers = controllers;
+    this.internals.watchers = watchers;
+    this.exports = void 0;
+    this.hasDestroy = "preserveOnDisconnect" in this.component && typeof this.component.destroy === "function";
+    if (this.hasDestroy)
+      this.watch("preserveOnDisconnect", () => this._preserveOnDisconnectWatcher());
+    this._bindLifecycleMethods();
+    Object.defineProperty(component, "updateComplete", {
+      get: async () => await this._updatePromise.promise
+    });
+    this.internals.reactiveUtilsIntegration = reactiveUtilsIntegration(this.component);
+    Controller.internals.setParentController(void 0);
+    Controller.internals.setAmbientComponent(component);
+    Controller.internals.elementToInstance.set(component.el, component);
+    Controller.internals.elementToInstance.set(component, component);
+  }
+  _bindLifecycleMethods() {
+    const component = this.component;
+    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,
+      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 (this.hasDestroy)
+      component.destroy = this.destroy.bind(this);
+  }
+  /**
+   * Throws an error if component does not implement destroy() lifecycle, but
+   * tries to use it.
+   */
+  ensureHasDestroy() {
+    if (!this.hasDestroy)
+      throw new Error(destroyErrorMessage);
+  }
+  /**
+   * Private because this is not supposed to be called by Component directly.
+   * Instead, _bindLifecycleMethods will take care of that. Otherwise, you risk
+   * calling lifecycle methods twice.
+   */
+  _connectedCallback() {
+    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.`
+      );
+    }
+    keyTrackResolve();
+    this._connected.resolve();
+    this._controllers.forEach(
+      (controller) => "triggerConnected" in controller ? controller.triggerConnected() : safeCall(() => controller.hostConnected?.())
+    );
+    this._originalLifecycles.connectedCallback?.call(this.component);
+  }
+  _disconnectedCallback() {
+    if (this.destroyed)
+      return;
+    this._controllers.forEach(
+      (controller) => "triggerDisconnected" in controller ? controller.triggerDisconnected() : safeCall(() => controller.hostDisconnected?.())
+    );
+    this._originalLifecycles.disconnectedCallback?.call(this.component);
+    if (this.hasDestroy)
+      this._preserveOnDisconnectWatcher();
+  }
+  async _componentWillLoad() {
+    await this.internals.reactiveUtilsIntegration();
+    await Promise.allSettled(
+      Array.from(
+        this._controllers,
+        async (controller) => "triggerLoad" in controller ? await controller.triggerLoad() : await safeAsyncCall(async () => await controller.hostLoad?.())
+      )
+    );
+    await this._originalLifecycles.componentWillLoad?.call(this.component);
+  }
+  _componentDidLoad() {
+    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() {
+    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?.())
+      )
+    );
+    await this._originalLifecycles.componentWillUpdate?.call(this.component);
+  }
+  _componentDidUpdate() {
+    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);
+  }
+  async destroy() {
+    this.ensureHasDestroy();
+    if (this.destroyed)
+      return;
+    if (this.component.el.isConnected) {
+      this.hasDestroy = false;
+      this.component.el.remove();
+      this.hasDestroy = true;
+    }
+    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);
+  }
+  /**
+   * Make a @Prop() or @State() readonly (prevent overwriting default value).
+   *
+   * For internal properties, prefer TypeScript's "readonly" modifier instead.
+   *
+   * @example
+   * // Defining readonly prop
+   * @Prop({ reflect: true }) prop = this.manager.readonly('a');
+   *
+   * @example
+   * // Overwriting readonly prop internally
+   * this.manager.bypassReadonly(()=>{
+   *   this.prop = 'b';
+   * });
+   *
+   */
+  readonly(value) {
+    return this.getSet(value, { set: this._readonlySetter });
+  }
+  /**
+   * Listen for any component's @State()/@Prop() change, and mutate it's
+   * value before it is set.
+   * This is necessary because Stencil's Compiler does not support get/set for
+   * @State()/@Prop().
+   * For private component properties, you should use regular get/set syntax.
+   *
+   * @example
+   * @Prop() exampleProp = this.manager.getSet(defaultValue,{get,set})
+   * @Prop() someProp = this.manager.getSet(
+   *   undefined as string | undefined,
+   *   {
+   *     get: (value)=>value.trim(),
+   *     set: (newValue,oldValue) => newValue.trim() ?? oldValue
+   *   }
+   * )
+   *
+   * @remarks
+   * Unlike a native get/set, the get function receives the current attribute
+   * value, and can modify it before returning it (or can disregard the current
+   * value and get it from elsewhere instead).
+   * Similarly, setter is called with the new and old value, and is expected to
+   * return the final new value (or return the old value to undo the change)
+   */
+  getSet(defaultValue, getSet) {
+    return this.component.manager.trackPropKey((name) => {
+      var _a2;
+      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());
+        this.internals.readonlyProps.add(name);
+      }
+      const genericComponent = this.component;
+      const value = genericComponent[name];
+      if (value != null && value !== defaultValue && typeof getSet.set === "function" && getSet.initialSet !== false) {
+        const newValue = getSet.set(value, defaultValue, name);
+        if (newValue !== value)
+          genericComponent[name] = newValue;
+      }
+      this.genericGetSet(name, getSet);
+    }, defaultValue);
+  }
+};
+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` }
+`.trim();
+
+// 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) => {
+    controller.onLifecycle(
+      () => startLocaleObserver(
+        component.el,
+        getAssetPath("./assets"),
+        ({ t9nLocale, t9nStrings, lang }) => {
+          controller.exports = { ...t9nStrings, _lang: lang, _t9nLocale: t9nLocale };
+          const label = t9nStrings.componentLabel ?? t9nStrings.widgetLabel;
+          if (typeof label === "string" && "label" in component && component.label == null)
+            component.label ?? (component.label = label);
+        },
+        name
+      )
+    );
+    if (blocking)
+      return controller.ready;
+    const locale = getElementLocales(component.el);
+    return { _lang: locale.lang, _t9nLocale: locale.t9nLocale };
+  });
 }
 
 function isMonacoEnvironmentSetup() {
@@ -2977,21 +4413,81 @@ function setupMonacoEnvironment(assetsPath) {
                     break;
             }
             // If we have a relative path or we are on same orgin, we can use the default js implementation
-            if (!ie(url) || se(url, globalThis.location.href, true)) {
+            if (!isURL(url) || hasSameOrigin(url, globalThis.location.href, true)) {
                 return new Worker(url, { name: languageId });
             }
             // For cross orgin, we will load the worker code as a string and manufacture a blob
             const esriRequest = await importRequest();
             const response = await esriRequest(url, {
-                responseType: "text"
+                responseType: "text",
             });
             return new Worker(URL.createObjectURL(new Blob([response.data], {
-                type: "text/javascript"
+                type: "text/javascript",
             })));
-        }
+        },
     };
 }
 
+const themeConfig = {
+	"arcade-light-theme": {
+	comment: "#606060",
+	constant: "#9809C8",
+	date: "#296389",
+	identifier: "#0000B3",
+	keyword: "#BF4900",
+	number: "#136D3D",
+	string: "#A31515"
+},
+	"arcade-dark-theme": {
+	comment: "#BFBFBF",
+	constant: "#CDBAEA",
+	date: "#97A6CE",
+	identifier: "#9FD4F3",
+	keyword: "#EEAA5A",
+	number: "#AAD04B",
+	string: "#F2877B"
+}
+};
+
+function setupArcadeTheme() {
+    ["light", "dark"].forEach((theme) => {
+        const base = theme === "light" ? "vs" : "vs-dark";
+        const colors = themeConfig[`arcade-${theme}-theme`];
+        // Defines the light and dark theme based on the calcite theme name
+        editor.defineTheme(base, {
+            base,
+            inherit: true,
+            rules: [
+                { token: "comment.arc", foreground: colors.comment },
+                { token: "constant.arc", foreground: colors.constant },
+                { token: "keyword.arc", foreground: colors.keyword },
+                { token: "identifier.arc", foreground: colors.identifier },
+                { token: "number.arc", foreground: colors.number },
+                { token: "string.arc", foreground: colors.string },
+            ],
+            colors: {},
+        });
+    });
+}
+const monacoThemeKeys = ["comment", "keyword", "identifier", "string", "number", "constant"];
+const colorRulesKeys = [...monacoThemeKeys, "date"];
+function updateThemeColors(theme, colorRules) {
+    if (colorRules === undefined) {
+        setupArcadeTheme();
+        return;
+    }
+    const base = theme === "light" ? "vs" : "vs-dark";
+    const rules = [];
+    monacoThemeKeys.forEach((key) => {
+        const foreground = colorRules[key];
+        if (!foreground) {
+            return;
+        }
+        rules.push({ token: `${key}.arc`, foreground });
+    });
+    editor.defineTheme(base, { base, inherit: true, rules, colors: {} });
+}
+
 /**
  * Returns the arcade diagnostic service.
  * Example:
@@ -3021,23 +4517,22 @@ async function getArcadeWorker(uri) {
 }
 /**
  * Request the arcade mode
- * @returns mode for arcade
+ * @returns arcade mode module
  */
 async function getMode() {
-    return await import('./arcade-mode-b2b0b42d.js');
+    return await import('./arcade-mode-5aef1763.js');
 }
 // Register the language in Monaco
 languages.register({
     id: arcadeDefaults.languageId,
     aliases: ["Arcade", "arcade"],
     extensions: [".arc"],
-    mimetypes: ["application/arcade"]
+    mimetypes: ["application/arcade"],
 });
 // An event emitted when a language is first time needed
 languages.onLanguage(arcadeDefaults.languageId, () => {
-    // Setup the assets path on the arcadeDefaults
+    setupArcadeTheme();
     arcadeDefaults.setLanguageOptions({ assetsPath: `${getAssetsPath() ?? "."}/arcade-language` });
-    // Async import the language mode
     getMode()
         .then((mode) => {
         // Setup the language mode
@@ -3048,13 +4543,15 @@ languages.onLanguage(arcadeDefaults.languageId, () => {
     });
 });
 
-const arcadeApiCss = ":host{background-color:var(--calcite-color-foreground-1)}:host .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);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-half)}:host calcite-block pre code{font-size:var(--calcite-font-size--2)}";
+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 {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.close = createEvent(this, "close", 3);
         this.itemSelected = createEvent(this, "itemSelected", 3);
+        this.manager = useControllerManager(this);
+        this.messages = useT9n();
         this._emitItemSelected = (e) => {
             const item = e.target?.["data-item"];
             if (!item) {
@@ -3094,9 +4591,6 @@ const ArcgisArcadeApi = class {
         this._updateFilterValue = (e) => {
             this._filterValue = e.target?.value ?? "";
         };
-        this._lang = "";
-        this._t9nLocale = "";
-        this._t9nStrings = undefined;
         this._selectedApiItem = undefined;
         this._filterValue = "";
         this._colorizeStyle = "";
@@ -3110,7 +4604,6 @@ const ArcgisArcadeApi = class {
     async componentWillLoad() {
         this._colorizeStyle = generateColorizeStyles();
         this._themeChangedListner = onColorizeThemeChanged(() => (this._colorizeStyle = generateColorizeStyles()));
-        await B(this, getAssetPath("./assets"));
         arcadeDefaults.onModelContextDidChange((key) => {
             if (!this.modelId || key !== Uri.parse(this.modelId).toString()) {
                 return;
@@ -3120,7 +4613,6 @@ const ArcgisArcadeApi = class {
         await this._updateApiLibrary();
     }
     disconnectedCallback() {
-        q(this);
         this._flowObserver?.disconnect();
         this._themeChangedListner?.dispose();
     }
@@ -3165,7 +4657,7 @@ const ArcgisArcadeApi = class {
         // When switching between flow the same reference is reused
         this._flowObserver = new MutationObserver(() => {
             // Get the last panel and try to set focus on the input element
-            W(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
+            setFocusOnElement(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
         });
         this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
     }
@@ -3176,14 +4668,14 @@ const ArcgisArcadeApi = class {
         if (!filteredApiItems.length) {
             return null;
         }
-        return (h("calcite-list-item-group", { heading: category.title }, filteredApiItems.map((apiItem) => (h("calcite-list-item", { label: G(apiItem.completion.detail), onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": apiItem }, h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "Expand", icon: "chevron-right", iconFlipRtl: true, scale: "s", onClick: this._selectItem, "data-item": apiItem }))))));
+        return (h("calcite-list-item-group", { heading: category.title }, filteredApiItems.map((apiItem) => (h("calcite-list-item", { label: addLTRMark(apiItem.completion.detail), onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": apiItem }, h("calcite-action", { slot: "actions-end", text: this.messages.expand ?? "Expand", icon: "chevron-right", iconFlipRtl: true, scale: "s", onClick: this._selectItem, "data-item": apiItem }))))));
     }
     renderApiItemFlowItem() {
         const apiItem = this._selectedApiItem;
         if (!apiItem) {
             return null;
         }
-        return (h("calcite-flow-item", { heading: this._t9nStrings?.constantsandfunctions, beforeBack: this._unselectItem, closable: true, onCalciteFlowItemClose: this._emitClose }, this.hideDocumentationActions ? null : (h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", scale: "s", href: apiItem.link, target: "Arcade Help", "icon-start": "information" }, this._t9nStrings?.moreinformation)), h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", "icon-start": "code", scale: "s", onClick: this._emitItemSelectedAndClose, "data-item": apiItem, ref: (e) => void e?.setFocus() }, this._t9nStrings?.insert ?? "Insert"), h("calcite-block", { open: true, heading: G(apiItem.completion.detail) }, h("div", { innerHTML: convertMarkdownString(apiItem.completion.documentation) }), apiItem.examples ? (h("div", { ref: (e) => {
+        return (h("calcite-flow-item", { heading: this.messages.constantsandfunctions, beforeBack: this._unselectItem, closable: true, onCalciteFlowItemClose: this._emitClose }, this.hideDocumentationActions ? null : (h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", scale: "s", href: apiItem.link, target: "Arcade Help", "icon-start": "information" }, this.messages.moreinformation)), h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", "icon-start": "code", scale: "s", onClick: this._emitItemSelectedAndClose, "data-item": apiItem, ref: (e) => void e?.setFocus() }, this.messages.insert ?? "Insert"), h("calcite-block", { open: true, heading: addLTRMark(apiItem.completion.detail) }, h("div", { innerHTML: convertMarkdownString(apiItem.completion.documentation) }), apiItem.examples ? (h("div", { ref: (e) => {
                 if (!e) {
                     return;
                 }
@@ -3194,10 +4686,10 @@ const ArcgisArcadeApi = class {
     render() {
         const categories = (this._apiLibrary ?? []).map((apiCategory) => this.renderApiCategory(apiCategory));
         const empty = categories.every((g) => !g);
-        return (h(Host, null, h("style", null, this._colorizeStyle), h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, h("calcite-flow-item", { heading: this._t9nStrings?.constantsandfunctions, closable: true, onCalciteFlowItemClose: this._emitClose }, h("calcite-input", { value: this._filterValue, icon: "magnifying-glass", clearable: true, onCalciteInputInput: this._updateFilterValue, class: "sticky", scale: "m" }), this._preparingApi ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: this._t9nStrings?.loading ?? "Loading" })) : (h("calcite-list", null, empty ? h("div", { class: "notice-container" }, this._t9nStrings?.noitems ?? "No items") : categories))), this.renderApiItemFlowItem())));
+        return (h(Host, null, h("style", null, this._colorizeStyle), h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, h("calcite-flow-item", { heading: this.messages.constantsandfunctions, closable: true, onCalciteFlowItemClose: this._emitClose }, h("calcite-input", { value: this._filterValue, icon: "magnifying-glass", clearable: true, onCalciteInputInput: this._updateFilterValue, class: "sticky", scale: "m" }), this._preparingApi ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: this.messages.loading ?? "Loading" })) : (h("calcite-list", null, empty ? h("div", { class: "notice-container" }, this.messages.noitems ?? "No items") : categories))), this.renderApiItemFlowItem())));
     }
     static get assetsDirs() { return ["assets"]; }
-    get _hostElement() { return getElement(this); }
+    get el() { return getElement(this); }
 };
 ArcgisArcadeApi.style = arcadeApiCss;
 
@@ -3384,7 +4876,7 @@ async function executeScript(editorProfile, script, testContext, console) {
         // Setup an executor with the script
         const arcade = await importArcade();
         const executor = await arcade.createArcadeExecutor(script ?? "", {
-            variables: editorProfile?.variables ?? []
+            variables: editorProfile?.variables ?? [],
         });
         // We want to measure the execution time
         const t1 = performance.now();
@@ -3394,7 +4886,7 @@ async function executeScript(editorProfile, script, testContext, console) {
             spatialReference,
             timeZone,
             rawOutput: true,
-            console
+            console,
         };
         // Execute the script
         const scriptOutput = await executor.executeAsync(profileVariableInstances, executeContext);
@@ -3418,81 +4910,21 @@ async function executeScript(editorProfile, script, testContext, console) {
             error,
             timeStamp,
             compilationTime: 0,
-            executionTime: 0
+            executionTime: 0,
         };
     }
 }
 
-const themeConfig = {
-	"arcade-light-theme": {
-	comment: "#606060",
-	constant: "#9809C8",
-	date: "#296389",
-	identifier: "#0000B3",
-	keyword: "#BF4900",
-	number: "#136D3D",
-	string: "#A31515"
-},
-	"arcade-dark-theme": {
-	comment: "#BFBFBF",
-	constant: "#CDBAEA",
-	date: "#97A6CE",
-	identifier: "#9FD4F3",
-	keyword: "#EEAA5A",
-	number: "#AAD04B",
-	string: "#F2877B"
-}
-};
+const arcadeEditorCss = "arcgis-arcade-editor{display:flex;flex-direction:column;position:relative;overflow:hidden;border:1px solid var(--calcite-color-border-3);box-sizing:border-box;background-color:var(--calcite-color-foreground-1);height:100%}arcgis-arcade-editor .flex-adjustable{flex:1 1 auto;overflow:hidden}arcgis-arcade-editor .flex-panel{flex:1 0 auto}arcgis-arcade-editor .position-relative{position:relative}arcgis-arcade-editor .flex-row{display:flex;flex-direction:row;overflow:hidden}arcgis-arcade-editor .flex-column{display:flex;flex-direction:column;overflow:hidden}arcgis-arcade-editor .border-inline-start{border-inline-start:1px solid var(--calcite-color-border-3);box-sizing:border-box}arcgis-arcade-editor .border-inline-end{border-inline-end:1px solid var(--calcite-color-border-3);box-sizing:border-box}arcgis-arcade-editor .sticky{position:sticky;top:0px;z-index:10}arcgis-arcade-editor .notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1);text-align:center}arcgis-arcade-editor .side-action-bar{max-width:25%}arcgis-arcade-editor .side-panel{max-width:45%;width:600px}arcgis-arcade-editor .side-panel calcite-flow{height:100%}arcgis-arcade-editor .main-action-bar{border-bottom:1px solid var(--calcite-color-border-3);flex:0 0 auto}arcgis-arcade-editor .main-action-bar calcite-action-group{padding-inline-end:var(--calcite-spacing-sm)}arcgis-arcade-editor .main-action-bar calcite-action-group calcite-action{padding-inline-end:var(--calcite-spacing-sm)}arcgis-arcade-editor .main-action-bar calcite-action-group calcite-action:not(:first-child){padding-inline-start:var(--calcite-spacing-sm)}arcgis-arcade-editor .main-action-bar calcite-action-group:last-child{border-inline-end-width:0px}arcgis-arcade-editor .main-action-bar calcite-action-group:not(:first-child){padding-inline-start:var(--calcite-spacing-sm)}arcgis-arcade-editor arcgis-arcade-results{border-top:1px solid var(--calcite-color-border-3);box-sizing:border-box;max-height:50%;min-height:50%;margin-bottom:-1px}arcgis-arcade-editor calcite-flow [slot=footer]{word-break:break-word}arcgis-arcade-editor calcite-list-item-group calcite-list-item{margin-bottom:1px;box-shadow:0 1px 0 var(--calcite-color-border-3)}arcgis-arcade-editor calcite-list-item-group calcite-list-item:last-child{box-shadow:none}arcgis-arcade-editor calcite-list-item-group:last-child{margin-bottom:var(--calcite-spacing-xl)}";
 
-function setupArcadeTheme() {
-    ["light", "dark"].forEach((theme) => {
-        const base = theme === "light" ? "vs" : "vs-dark";
-        const colors = themeConfig[`arcade-${theme}-theme`];
-        // Defines the light and dark theme based on the calcite theme name
-        editor.defineTheme(base, {
-            base,
-            inherit: true,
-            rules: [
-                { token: "comment.arc", foreground: colors.comment },
-                { token: "constant.arc", foreground: colors.constant },
-                { token: "keyword.arc", foreground: colors.keyword },
-                { token: "identifier.arc", foreground: colors.identifier },
-                { token: "number.arc", foreground: colors.number },
-                { token: "string.arc", foreground: colors.string }
-            ],
-            colors: {}
-        });
-    });
-}
-const monacoThemeKeys = ["comment", "keyword", "identifier", "string", "number", "constant"];
-const colorRulesKeys = [...monacoThemeKeys, "date"];
-function updateThemeColors(theme, colorRules) {
-    if (colorRules === undefined) {
-        setupArcadeTheme();
-        return;
-    }
-    const base = theme === "light" ? "vs" : "vs-dark";
-    const rules = [];
-    monacoThemeKeys.forEach((key) => {
-        const foreground = colorRules[key];
-        if (!foreground) {
-            return;
-        }
-        rules.push({ token: `${key}.arc`, foreground });
-    });
-    editor.defineTheme(base, { base, inherit: true, rules, colors: {} });
-}
-
-const arcadeEditorCss = "arcgis-arcade-editor{display:flex;flex-direction:column;height:100%;width:100%;position:relative;overflow:hidden;border:1px solid var(--calcite-color-border-3);box-sizing:border-box;background-color:var(--calcite-color-foreground-1)}arcgis-arcade-editor .flex-adjustable{flex:1 1 auto;overflow:hidden}arcgis-arcade-editor .flex-panel{flex:1 0 auto}arcgis-arcade-editor .position-relative{position:relative}arcgis-arcade-editor .flex-row{display:flex;flex-direction:row;overflow:hidden}arcgis-arcade-editor .flex-column{display:flex;flex-direction:column;overflow:hidden}arcgis-arcade-editor .border-inline-start{border-inline-start:1px solid var(--calcite-color-border-3);box-sizing:border-box}arcgis-arcade-editor .border-inline-end{border-inline-end:1px solid var(--calcite-color-border-3);box-sizing:border-box}arcgis-arcade-editor .sticky{position:sticky;top:0px;z-index:10}arcgis-arcade-editor .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-color-foreground-1);text-align:center}arcgis-arcade-editor .side-action-bar{max-width:25%}arcgis-arcade-editor .side-panel{max-width:45%;width:600px}arcgis-arcade-editor .side-panel calcite-flow{height:100%}arcgis-arcade-editor .main-action-bar{border-bottom:1px solid var(--calcite-color-border-3);flex:0 0 auto}arcgis-arcade-editor .main-action-bar calcite-action-group{padding-inline-end:var(--calcite-spacing-half)}arcgis-arcade-editor .main-action-bar calcite-action-group calcite-action{padding-inline-end:var(--calcite-spacing-half)}arcgis-arcade-editor .main-action-bar calcite-action-group calcite-action:not(:first-child){padding-inline-start:var(--calcite-spacing-half)}arcgis-arcade-editor .main-action-bar calcite-action-group:last-child{border-inline-end-width:0px}arcgis-arcade-editor .main-action-bar calcite-action-group:not(:first-child){padding-inline-start:var(--calcite-spacing-half)}arcgis-arcade-editor arcgis-arcade-results{border-top:1px solid var(--calcite-color-border-3);box-sizing:border-box;max-height:50%;min-height:50%;margin-bottom:-1px}arcgis-arcade-editor calcite-flow [slot=footer]{word-break:break-word}arcgis-arcade-editor calcite-list-item-group calcite-list-item{margin-bottom:1px;box-shadow:0 1px 0 var(--calcite-color-border-3)}arcgis-arcade-editor calcite-list-item-group calcite-list-item:last-child{box-shadow:none}arcgis-arcade-editor calcite-list-item-group:last-child{margin-bottom:var(--calcite-spacing-1)}";
-
-setupArcadeTheme();
 const ArcgisArcadeEditor = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.scriptChange = createEvent(this, "scriptChange", 3);
         this.diagnosticsChange = createEvent(this, "diagnosticsChange", 3);
-        this._componentReadyDefer = new h$1();
-        this._modelId = U();
+        this.manager = useControllerManager(this);
+        this._componentReadyDefer = new Deferred$1();
+        this._modelId = generateGuid();
         this._editorProfilePromise = Promise.resolve(undefined);
         this._disposables = [];
         this._executeScript = async () => {
@@ -3541,9 +4973,7 @@ const ArcgisArcadeEditor = class {
         this._insertAsText = (e) => void this._codeEditorElt?.insertText(e.detail).catch(console.error);
         this._onResultPanelChange = (e) => void (this._resultPanel = e.detail);
         this._onExecutionPanelClose = () => void (this._showExecutionPanel = false);
-        this._lang = "";
-        this._t9nLocale = "";
-        this._t9nStrings = undefined;
+        this.messages = useT9n();
         this._standaloneCodeEditor = undefined;
         this._preparingProfile = false;
         this._editorProfile = undefined;
@@ -3574,7 +5004,7 @@ const ArcgisArcadeEditor = class {
     }
     _snippetChanged() {
         arcadeDefaults.updateApiContextForModel(this._modelId, {
-            snippets: this.snippets
+            snippets: this.snippets,
         });
     }
     // #endregion
@@ -3623,11 +5053,11 @@ const ArcgisArcadeEditor = class {
      * @internal
      */
     async updateThemeColors(colorRules) {
-        const theme = k(this._hostElement);
+        const theme = getElementTheme(this.el);
         updateThemeColors(theme, colorRules);
         if (colorRules === undefined) {
             colorRulesKeys.forEach((key) => {
-                this._hostElement.style.removeProperty(`--arcgis-arcade-editor-${key}`);
+                this.el.style.removeProperty(`--arcgis-arcade-editor-${key}`);
             });
             return;
         }
@@ -3636,7 +5066,7 @@ const ArcgisArcadeEditor = class {
             if (!foreground) {
                 return;
             }
-            this._hostElement.style.setProperty(`--arcgis-arcade-editor-${key}`, foreground);
+            this.el.style.setProperty(`--arcgis-arcade-editor-${key}`, foreground);
         });
     }
     // #endregion
@@ -3648,10 +5078,9 @@ const ArcgisArcadeEditor = class {
         // However, we need to setup the environment before the code editor is instantiated because
         // we need to access the arcade language service to get the api library.
         setupMonacoEnvironment(assetsPath);
-        // Starts a locale observer. It will load the correct t9n strings for the component
-        // when the locale changes. We also pass updateEditorProfile. It will be invoked the first
-        // and on each locale change. The profile has to be refreshed on locale change as well.
-        await B(this, assetsPath, async () => await this._updateEditorProfile());
+        await this._updateEditorProfile();
+        // The profile has to be refreshed on locale change
+        this.manager.watch("messages", () => void this._updateEditorProfile().catch(console.error));
     }
     async componentDidLoad() {
         // Mark on component as ready.
@@ -3674,12 +5103,11 @@ const ArcgisArcadeEditor = class {
                 if (this.testData) {
                     this._executeScript().catch(console.error);
                 }
-            }
+            },
         });
         await this._codeEditorElt?.setFocus();
     }
     disconnectedCallback() {
-        q(this);
         arcadeDefaults.disposeApiContextForModel(this._modelId);
         arcadeDefaults.disposeEditorProfileForModel(this._modelId);
         while (this._disposables.length) {
@@ -3696,8 +5124,8 @@ const ArcgisArcadeEditor = class {
         try {
             // Set a new profile for the model using the profile definition and the locale.
             await arcadeDefaults.setProfileForModel(this._modelId, this.profile, {
-                locale: this._t9nLocale,
-                snippets: this.snippets
+                locale: this.messages._t9nLocale,
+                snippets: this.snippets,
             });
             // Get the corresponding editor profile for the model.
             // The editor profile contains the specialized profile for the UI.
@@ -3717,7 +5145,7 @@ const ArcgisArcadeEditor = class {
         if (!this.testData) {
             return null;
         }
-        return (h("calcite-action-bar", { class: "main-action-bar", layout: "horizontal", scale: "s", expanded: true, "expand-disabled": true }, h("calcite-action-group", { scale: "s" }, h("calcite-action", { text: this._t9nStrings?.run ?? "Run", "text-enabled": true, icon: "play", scale: "s", loading: this._preparingProfile, onClick: this._executeScript }), this._executionResult ? (h("calcite-action", { text: this._t9nStrings?.lastresults ?? "Last results", active: this._showExecutionPanel, "text-enabled": true, icon: "access-string-results", iconFlipRtl: true, scale: "s", onClick: this._toggleShowExecutionPanel })) : null)));
+        return (h("calcite-action-bar", { class: "main-action-bar", layout: "horizontal", scale: "s", expanded: true, "expand-disabled": true }, h("calcite-action-group", { scale: "s" }, h("calcite-action", { text: this.messages.run ?? "Run", "text-enabled": true, icon: "play", scale: "s", loading: this._preparingProfile, onClick: this._executeScript }), this._executionResult ? (h("calcite-action", { text: this.messages.lastresults ?? "Last results", active: this._showExecutionPanel, "text-enabled": true, icon: "access-string-results", iconFlipRtl: true, scale: "s", onClick: this._toggleShowExecutionPanel })) : null)));
     }
     //#endregion
     //#region Render Main Panel
@@ -3726,7 +5154,7 @@ const ArcgisArcadeEditor = class {
     }
     //#endregion
     //#region Rendering the Action Bar
-    renderAction({ id, label, icon, active, panelName, onClick = this._toggleSidePanel }) {
+    renderAction({ id, label, icon, active, panelName, onClick = this._toggleSidePanel, }) {
         return (h(Fragment, null, h("calcite-action", { id: id, text: label, icon: icon, active: active, onClick: onClick, "data-panel-name": panelName }), !this.sideActionBarExpanded && (h("calcite-tooltip", { label: label, "reference-element": id }, h("span", null, label)))));
     }
     renderSideActionBar() {
@@ -3735,33 +5163,33 @@ const ArcgisArcadeEditor = class {
         }
         return (h("calcite-action-bar", { class: "side-action-bar border-inline-start", expanded: !!this.sideActionBarExpanded, position: "end", onCalciteActionBarToggle: this._toggleSideActionBarExpanded }, h("calcite-action-group", null, this.renderAction({
             id: "profile-variables-action",
-            label: this._t9nStrings?.profilevariables ?? "Profile variables",
+            label: this.messages.profilevariables ?? "Profile variables",
             icon: "profile-variables",
             active: this.openedSidePanel === "variables",
-            panelName: "variables"
+            panelName: "variables",
         }), this.renderAction({
             id: "function-action",
-            label: this._t9nStrings?.constantsandfunctions ?? "Constants and functions",
+            label: this.messages.constantsandfunctions ?? "Constants and functions",
             icon: "function",
             active: this.openedSidePanel === "api",
-            panelName: "api"
+            panelName: "api",
         }), this.suggestions?.length
             ? this.renderAction({
                 id: "suggestions-action",
-                label: this._t9nStrings?.suggestions ?? "Suggestions",
+                label: this.messages.suggestions ?? "Suggestions",
                 icon: "lightbulb",
                 active: this.openedSidePanel === "suggestions",
-                panelName: "suggestions"
+                panelName: "suggestions",
             })
             : null, this.hideDocumentationActions
             ? null
             : this.renderAction({
                 id: "developer-website-action",
-                label: this._t9nStrings?.help ?? "Help",
+                label: this.messages.help ?? "Help",
                 icon: "question",
                 active: false,
                 panelName: "none",
-                onClick: this._openArcadeHelp
+                onClick: this._openArcadeHelp,
             }))));
     }
     //#endregion
@@ -3795,7 +5223,7 @@ const ArcgisArcadeEditor = class {
         return (h(Host, null, this.renderMainActionBar(), h("div", { class: "flex-row flex-adjustable" }, h("div", { class: "flex-column flex-adjustable" }, this.renderMainPanel(), this.renderResultsPanel()), this.renderSidePanel(), this.renderSideActionBar())));
     }
     static get assetsDirs() { return ["assets"]; }
-    get _hostElement() { return getElement(this); }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "profile": ["_profileChanged"],
         "testData": ["_testDataChanged"],
@@ -3804,20 +5232,20 @@ const ArcgisArcadeEditor = class {
 };
 ArcgisArcadeEditor.style = arcadeEditorCss;
 
-const arcadeResultsCss = ":host{display:flex;flex-direction:column;width:100%;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2)}:host .flex-adjustable{flex:1 1 auto;overflow:hidden}:host .flex-row{display:flex;flex-direction:row;overflow:hidden}:host .flex-column{display:flex;flex-direction:column;overflow:hidden}:host .y-scrollable-container{overflow-y:auto;block-size:100%;background-color:var(--calcite-color-foreground-1)}:host header{border-bottom:1px solid var(--calcite-color-border-3);flex:0 0 auto}:host .ltr-container{direction:ltr}:host calcite-action-bar calcite-action-group{padding-inline-end:var(--calcite-spacing-half)}:host calcite-action-bar calcite-action-group calcite-action{padding-inline-end:var(--calcite-spacing-half)}:host calcite-action-bar calcite-action-group calcite-action:not(:first-child){padding-inline-start:var(--calcite-spacing-half)}:host calcite-action-bar calcite-action-group:last-child{border-inline-end-width:0px}:host calcite-action-bar calcite-action-group:not(:first-child){padding-inline-start:var(--calcite-spacing-half)}:host .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-color-foreground-1)}:host .color-info{color:var(--calcite-color-status-info)}:host .color-error{color:var(--calcite-color-status-danger)}:host .color-success{color:var(--calcite-color-status-success)}:host [class*=result-value-]{font-size:var(--calcite-font-size--2);line-height:1.25rem;background-color:var(--calcite-color-foreground-1);margin:var(--calcite-spacing-three-quarter)}:host .console-logs-container{background-color:var(--calcite-color-foreground-1);padding:0 var(--calcite-spacing-three-quarter);font-family:var(--calcite-code-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal)}:host .result-value-table table{display:block;max-width:fit-content;overflow-x:auto;border-spacing:0;border-collapse:collapse;text-align:start;white-space:nowrap}:host .result-value-table table thead{background-color:var(--calcite-color-foreground-2)}:host .result-value-table table tr{border-top:1px solid var(--calcite-color-border-3);border-bottom:1px solid var(--calcite-color-border-3)}:host .result-value-table table th,:host .result-value-table table td{border-inline-start:1px solid var(--calcite-color-border-3);border-inline-end:1px solid var(--calcite-color-border-3);text-align:start;padding:var(--calcite-spacing-quarter)}:host .result-value-table table th .string-value,:host .result-value-table table td .string-value{white-space:pre}:host .result-value-table table th{font-weight:var(--calcite-font-weight-medium)}:host .tree-item-label,:host .number-value,:host .string-value,:host .boolean-value{font-family:var(--calcite-code-family)}:host .tree-item-label,:host .value-type{color:var(--calcite-color-text-2);font-weight:var(--calcite-font-weight-normal)}:host .dictionary-property{color:var(--arcgis-arcade-editor-identifier)}:host .number-value{color:var(--arcgis-arcade-editor-number)}:host .string-value{color:var(--arcgis-arcade-editor-string);white-space:pre-wrap}:host .constant-value{color:var(--arcgis-arcade-editor-constant)}:host .date-value{color:var(--arcgis-arcade-editor-date)}";
+const arcadeResultsCss = ":host{display:flex;flex-direction:column;width:100%;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2)}:host .flex-adjustable{flex:1 1 auto;overflow:hidden}:host .flex-row{display:flex;flex-direction:row;overflow:hidden}:host .flex-column{display:flex;flex-direction:column;overflow:hidden}:host .y-scrollable-container{overflow-y:auto;block-size:100%;background-color:var(--calcite-color-foreground-1)}:host header{border-bottom:1px solid var(--calcite-color-border-3);flex:0 0 auto}:host .ltr-container{direction:ltr}:host calcite-action-bar calcite-action-group{padding-inline-end:var(--calcite-spacing-sm)}:host calcite-action-bar calcite-action-group calcite-action{padding-inline-end:var(--calcite-spacing-sm)}:host calcite-action-bar calcite-action-group calcite-action:not(:first-child){padding-inline-start:var(--calcite-spacing-sm)}:host calcite-action-bar calcite-action-group:last-child{border-inline-end-width:0px}:host calcite-action-bar calcite-action-group:not(:first-child){padding-inline-start:var(--calcite-spacing-sm)}:host .notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}:host .color-info{color:var(--calcite-color-status-info)}:host .color-error{color:var(--calcite-color-status-danger)}:host .color-success{color:var(--calcite-color-status-success)}:host [class*=result-value-]{font-size:var(--calcite-font-size--2);line-height:1.25rem;background-color:var(--calcite-color-foreground-1);margin:var(--calcite-spacing-md)}:host .console-logs-container{background-color:var(--calcite-color-foreground-1);padding:0 var(--calcite-spacing-md);font-family:var(--calcite-code-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal)}:host .result-value-table table{display:block;max-width:fit-content;overflow-x:auto;border-spacing:0;border-collapse:collapse;text-align:start;white-space:nowrap}:host .result-value-table table thead{background-color:var(--calcite-color-foreground-2)}:host .result-value-table table tr{border-top:1px solid var(--calcite-color-border-3);border-bottom:1px solid var(--calcite-color-border-3)}:host .result-value-table table th,:host .result-value-table table td{border-inline-start:1px solid var(--calcite-color-border-3);border-inline-end:1px solid var(--calcite-color-border-3);text-align:start;padding:var(--calcite-spacing-xxs)}:host .result-value-table table th .string-value,:host .result-value-table table td .string-value{white-space:pre}:host .result-value-table table th{font-weight:var(--calcite-font-weight-medium)}:host .tree-item-label,:host .number-value,:host .string-value,:host .boolean-value{font-family:var(--calcite-code-family)}:host .tree-item-label,:host .value-type{color:var(--calcite-color-text-2);font-weight:var(--calcite-font-weight-normal)}:host .dictionary-property{color:var(--arcgis-arcade-editor-identifier)}:host .number-value{color:var(--arcgis-arcade-editor-number)}:host .string-value{color:var(--arcgis-arcade-editor-string);white-space:pre-wrap}:host .constant-value{color:var(--arcgis-arcade-editor-constant)}:host .date-value{color:var(--arcgis-arcade-editor-date)}";
 
 //#region Specialized Constants
 const treeProps = {
     lines: true,
     selectionMode: "none",
     scale: "s",
-    onCalciteTreeSelect: (e) => e.target.selectedItems.forEach((itemElt) => (itemElt.selected = false))
+    onCalciteTreeSelect: (e) => e.target.selectedItems.forEach((itemElt) => (itemElt.selected = false)),
 };
 const expandableTreeItemProps = {
     onClick: (e) => {
         const item = e.currentTarget;
         item.expanded = !item.expanded;
-    }
+    },
 };
 //#endregion
 //#region Helper Functions
@@ -3836,7 +5264,7 @@ function renderSimpleValue(arcadeResult) {
         case "null":
             return h("span", { class: "constant-value" }, arcadeResult.type);
         case "text":
-            return h("span", { class: "string-value" }, D(arcadeResult.value));
+            return h("span", { class: "string-value" }, quoteString(arcadeResult.value));
         case "number":
             return h("span", { class: "number-value" }, arcadeResult.value.toString());
         case "boolean":
@@ -3844,9 +5272,9 @@ function renderSimpleValue(arcadeResult) {
         case "date":
             return h("span", { class: "date-value" }, formatArcadeResultDate(arcadeResult));
         case "dateOnly":
-            return h("span", { class: "string-value" }, D(formatArcadeResultDateOnly(arcadeResult)));
+            return h("span", { class: "string-value" }, quoteString(formatArcadeResultDateOnly(arcadeResult)));
         case "time":
-            return h("span", { class: "string-value" }, D(formatArcadeResultTimeOnly(arcadeResult)));
+            return h("span", { class: "string-value" }, quoteString(formatArcadeResultTimeOnly(arcadeResult)));
         default:
             return null;
     }
@@ -3868,6 +5296,9 @@ const ArcgisArcadeResults = class {
         registerInstance(this, hostRef);
         this.openedResultPanelChange = createEvent(this, "openedResultPanelChange", 3);
         this.close = createEvent(this, "close", 3);
+        this.manager = useControllerManager(this);
+        //#region Private Properties
+        this.messages = useT9n();
         this._switchResultPanel = (e) => {
             if (!e.target) {
                 return;
@@ -3879,23 +5310,12 @@ const ArcgisArcadeResults = class {
             this.updateResultPanel(panelName);
         };
         this._emitClose = () => this.close.emit();
-        this._lang = "";
-        this._t9nLocale = "";
-        this._t9nStrings = undefined;
         this.loading = true;
         this.openedResultPanel = "output";
         this.result = undefined;
         this.consoleLogs = undefined;
     }
     //#endregion
-    // #region Component lifecycle events
-    async componentWillLoad() {
-        await B(this, getAssetPath("./assets"));
-    }
-    disconnectedCallback() {
-        q(this);
-    }
-    // #endregion
     //#region Private Methods
     updateResultPanel(resultPanelType) {
         this.openedResultPanel = resultPanelType;
@@ -3910,7 +5330,7 @@ const ArcgisArcadeResults = class {
         if (this.loading && !this.consoleLogs?.length) {
             return h("calcite-loader", { scale: "s", type: "indeterminate", label: "" });
         }
-        return (h("div", { class: "console-logs-container ltr-container" }, this.consoleLogs?.length ? (this.consoleLogs.map((log) => h("p", null, log))) : (h("p", null, this._t9nStrings?.consolemessage))));
+        return (h("div", { class: "console-logs-container ltr-container" }, this.consoleLogs?.length ? this.consoleLogs.map((log) => h("p", null, log)) : h("p", null, this.messages.consolemessage)));
     }
     renderLogPanel() {
         if (this.openedResultPanel !== "log") {
@@ -3920,24 +5340,24 @@ const ArcgisArcadeResults = class {
             return h("calcite-loader", { scale: "s", type: "indeterminate", label: "" });
         }
         const iconClass = this.result?.type === "error" ? "color-error" : "color-success";
-        return (h("calcite-list", null, this.result ? (h(Fragment, null, h("calcite-list-item", { label: Z(this._t9nStrings?.lastexecutionformat, {
-                timeStamp: new Intl.DateTimeFormat(this._t9nLocale, {
+        return (h("calcite-list", null, this.result ? (h(Fragment, null, h("calcite-list-item", { label: setValuesInString(this.messages.lastexecutionformat, {
+                timeStamp: new Intl.DateTimeFormat(this.messages._t9nLocale, {
                     dateStyle: "medium",
-                    timeStyle: "medium"
-                }).format(this.result.timeStamp)
-            }) }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })), h("calcite-list-item", { label: Z(this._t9nStrings?.compilationtimeformat, {
-                time: new Intl.NumberFormat(this._t9nLocale, {
+                    timeStyle: "medium",
+                }).format(this.result.timeStamp),
+            }) }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })), h("calcite-list-item", { label: setValuesInString(this.messages.compilationtimeformat, {
+                time: new Intl.NumberFormat(this.messages._t9nLocale, {
                     style: "unit",
                     unit: "millisecond",
-                    maximumFractionDigits: 2
-                }).format(this.result.compilationTime ?? 0)
-            }) }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })), h("calcite-list-item", { label: Z(this._t9nStrings?.executiontimeformat, {
-                time: new Intl.NumberFormat(this._t9nLocale, {
+                    maximumFractionDigits: 2,
+                }).format(this.result.compilationTime ?? 0),
+            }) }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })), h("calcite-list-item", { label: setValuesInString(this.messages.executiontimeformat, {
+                time: new Intl.NumberFormat(this.messages._t9nLocale, {
                     style: "unit",
                     unit: "millisecond",
-                    maximumFractionDigits: 2
-                }).format(this.result.executionTime ?? 0)
-            }) }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })))) : (h("calcite-list-item", { label: this._t9nStrings?.runscriptmessage ?? "No output, run the script once." }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: "color-info" })))));
+                    maximumFractionDigits: 2,
+                }).format(this.result.executionTime ?? 0),
+            }) }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })))) : (h("calcite-list-item", { label: this.messages.runscriptmessage ?? "No output, run the script once." }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: "color-info" })))));
     }
     renderOutputPanel() {
         if (this.openedResultPanel !== "output") {
@@ -3948,8 +5368,8 @@ const ArcgisArcadeResults = class {
         }
         switch (this.result?.type) {
             case "error":
-                return (h("div", { class: "result-value-simple flex-adjustable" }, Z(this._t9nStrings?.executionerrorformat, {
-                    message: this.result.value
+                return (h("div", { class: "result-value-simple flex-adjustable" }, setValuesInString(this.messages.executionerrorformat, {
+                    message: this.result.value,
                 })));
             case "null":
             case "unknown":
@@ -3979,14 +5399,14 @@ const ArcgisArcadeResults = class {
             case "knowledgeGraph":
                 return (h("div", { class: "result-value-simple ltr-container" }, h("span", { class: "value-type" }, this.result.type, ":\u00A0"), h("span", { class: "string-value" }, this.result.value.url)));
             default:
-                return (h("div", { class: "result-value-simple flex-adjustable ltr-container" }, this._t9nStrings?.runscriptmessage));
+                return h("div", { class: "result-value-simple flex-adjustable ltr-container" }, this.messages.runscriptmessage);
         }
     }
     renderArrayHeader(arcadeResult) {
         const items = arcadeResult.value ?? [];
         const leftoverCount = Math.max(items.length - MaxArrayItems, 0);
-        return (h(Fragment, null, h("span", null, `${arcadeResult.type}(${items.length ?? 0})`), leftoverCount > 0 ? (h("span", null, "\u00A0", Z(this._t9nStrings?.showingfirstitemsformat, {
-            count: MaxArrayItems.toString()
+        return (h(Fragment, null, h("span", null, `${arcadeResult.type}(${items.length ?? 0})`), leftoverCount > 0 ? (h("span", null, "\u00A0", setValuesInString(this.messages.showingfirstitemsformat, {
+            count: MaxArrayItems.toString(),
         }))) : null));
     }
     renderArrayTree(items, subtree = false) {
@@ -4031,15 +5451,15 @@ const ArcgisArcadeResults = class {
         }
     }
     renderFeatureSetLabel(arcadeResult) {
-        return (h("div", { class: "value-type" }, h("span", null, arcadeResult.type, ":"), arcadeResult.features.length >= BatchSize ? (h("span", null, "\u00A0", Z(this._t9nStrings?.showingfirstitemsformat, {
-            count: BatchSize.toString()
+        return (h("div", { class: "value-type" }, h("span", null, arcadeResult.type, ":"), arcadeResult.features.length >= BatchSize ? (h("span", null, "\u00A0", setValuesInString(this.messages.showingfirstitemsformat, {
+            count: BatchSize.toString(),
         }))) : null));
     }
     render() {
-        return (h(Host, null, h("header", { class: "flex-row" }, h("calcite-action-bar", { class: "flex-adjustable", layout: "horizontal", scale: "s", expanded: true, "expand-disabled": true }, h("calcite-action-group", { scale: "s" }, h("calcite-action", { active: this.openedResultPanel === "output", text: this._t9nStrings?.output ?? "Output", "text-enabled": true, scale: "s", icon: "list-show-all", iconFlipRtl: true, onClick: this._switchResultPanel, "data-panel-name": "output" }), h("calcite-action", { active: this.openedResultPanel === "console", text: this._t9nStrings?.console ?? "Console", "text-enabled": true, scale: "s", icon: "console", iconFlipRtl: true, onClick: this._switchResultPanel, "data-panel-name": "console" }), h("calcite-action", { active: this.openedResultPanel === "log", text: this._t9nStrings?.log ?? "Log", "text-enabled": true, scale: "s", icon: "list", iconFlipRtl: true, onClick: this._switchResultPanel, "data-panel-name": "log" }))), h("calcite-action", { scale: "s", icon: "x", text: this._t9nStrings?.close ?? "", onClick: this._emitClose })), h("article", { class: "flex-adjustable" }, this.loading ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: "" })) : (h("div", { class: "flex-column y-scrollable-container" }, this.renderOutputPanel(), this.renderConsolePanel(), this.renderLogPanel())))));
+        return (h(Host, null, h("header", { class: "flex-row" }, h("calcite-action-bar", { class: "flex-adjustable", layout: "horizontal", scale: "s", expanded: true, "expand-disabled": true }, h("calcite-action-group", { scale: "s" }, h("calcite-action", { active: this.openedResultPanel === "output", text: this.messages.output ?? "Output", "text-enabled": true, scale: "s", icon: "list-show-all", iconFlipRtl: true, onClick: this._switchResultPanel, "data-panel-name": "output" }), h("calcite-action", { active: this.openedResultPanel === "console", text: this.messages.console ?? "Console", "text-enabled": true, scale: "s", icon: "console", iconFlipRtl: true, onClick: this._switchResultPanel, "data-panel-name": "console" }), h("calcite-action", { active: this.openedResultPanel === "log", text: this.messages.log ?? "Log", "text-enabled": true, scale: "s", icon: "list", iconFlipRtl: true, onClick: this._switchResultPanel, "data-panel-name": "log" }))), h("calcite-action", { scale: "s", icon: "x", text: this.messages.close ?? "", onClick: this._emitClose })), h("article", { class: "flex-adjustable" }, this.loading ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: "" })) : (h("div", { class: "flex-column y-scrollable-container" }, this.renderOutputPanel(), this.renderConsolePanel(), this.renderLogPanel())))));
     }
     static get assetsDirs() { return ["assets"]; }
-    get _hostElement() { return getElement(this); }
+    get el() { return getElement(this); }
 };
 ArcgisArcadeResults.style = arcadeResultsCss;
 
@@ -4053,13 +5473,15 @@ function isSuggestionGroups(item) {
     return Array.isArray(item[0].suggestions);
 }
 
-const arcadeSuggestionsCss = ":host{background-color:var(--calcite-color-foreground-1)}:host .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);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-half)}:host calcite-block pre code{font-size:var(--calcite-font-size--2)}";
+const arcadeSuggestionsCss = ":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 ArcgisArcadeSuggestions = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.close = createEvent(this, "close", 3);
         this.itemSelected = createEvent(this, "itemSelected", 3);
+        this.manager = useControllerManager(this);
+        this.messages = useT9n();
         this._updateFilterValue = (e) => {
             this._filterValue = e.target?.value ?? "";
         };
@@ -4088,9 +5510,6 @@ const ArcgisArcadeSuggestions = class {
         this._beforeBack = async () => {
             this._selectedSuggestion = undefined;
         };
-        this._lang = "";
-        this._t9nLocale = "";
-        this._t9nStrings = undefined;
         this._selectedSuggestion = undefined;
         this._filterValue = "";
         this._colorizeStyle = "";
@@ -4104,12 +5523,10 @@ const ArcgisArcadeSuggestions = class {
     async componentWillLoad() {
         this._colorizeStyle = generateColorizeStyles();
         this._themeChangedListner = onColorizeThemeChanged(() => (this._colorizeStyle = generateColorizeStyles()));
-        await B(this, getAssetPath("./assets"));
     }
     disconnectedCallback() {
         this._flowObserver?.disconnect();
         this._themeChangedListner?.dispose();
-        q(this);
     }
     // #endregion
     //#region Private Methods
@@ -4127,7 +5544,7 @@ const ArcgisArcadeSuggestions = class {
         // When switching between flow the same reference is reused
         this._flowObserver = new MutationObserver(() => {
             // Get the last panel and try to set focus on the input element
-            W(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
+            setFocusOnElement(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
         });
         this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
     }
@@ -4145,29 +5562,29 @@ const ArcgisArcadeSuggestions = class {
     renderSuggestionListItems(suggestions) {
         suggestions = filterCollection(suggestions, "label", this._filterValue);
         if (!suggestions.length) {
-            return h("div", { class: "notice-container" }, this._t9nStrings?.noitems ?? "No item");
+            return h("div", { class: "notice-container" }, this.messages.noitems ?? "No item");
         }
-        return suggestions.map((suggestion) => (h("calcite-list-item", { label: suggestion.label, description: suggestion.description, onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": suggestion }, h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "", scale: "s", icon: "chevron-right", iconFlipRtl: true, onClick: this._showSuggestionDetail, "data-item": suggestion }))));
+        return suggestions.map((suggestion) => (h("calcite-list-item", { label: suggestion.label, description: suggestion.description, onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": suggestion }, h("calcite-action", { slot: "actions-end", text: this.messages.expand ?? "", scale: "s", icon: "chevron-right", iconFlipRtl: true, onClick: this._showSuggestionDetail, "data-item": suggestion }))));
     }
     renderSuggestionFlowItem() {
         const suggestion = this._selectedSuggestion;
         if (!suggestion) {
             return null;
         }
-        return (h("calcite-flow-item", { heading: this._t9nStrings?.suggestions, closable: true, onCalciteFlowItemClose: this._emitClose, beforeBack: this._beforeBack }, h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", "icon-start": "code", scale: "s", onClick: this._emitItemSelected, ref: (e) => void e?.setFocus(), "data-item": suggestion }, this._t9nStrings?.insert), h("calcite-block", { open: true, heading: suggestion.label, description: suggestion.description }, h("div", { innerHTML: convertMarkdownString(suggestion.documentation) }), h("pre", null, h("code", { ref: (e) => e === undefined ? undefined : void colorizeCodeElement(e, suggestion.code).catch(console.error) })))));
+        return (h("calcite-flow-item", { heading: this.messages.suggestions, closable: true, onCalciteFlowItemClose: this._emitClose, beforeBack: this._beforeBack }, h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", "icon-start": "code", scale: "s", onClick: this._emitItemSelected, ref: (e) => void e?.setFocus(), "data-item": suggestion }, this.messages.insert), h("calcite-block", { open: true, heading: suggestion.label, description: suggestion.description }, h("div", { innerHTML: convertMarkdownString(suggestion.documentation) }), h("pre", null, h("code", { ref: (e) => e === undefined ? undefined : void colorizeCodeElement(e, suggestion.code).catch(console.error) })))));
     }
     render() {
-        return (h(Host, null, h("style", null, this._colorizeStyle), h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, h("calcite-flow-item", { heading: this._t9nStrings?.suggestions, closable: true, onCalciteFlowItemClose: this._emitClose }, h("calcite-input", { value: this._filterValue, icon: "magnifying-glass", clearable: true, onCalciteInputInput: this._updateFilterValue, class: "sticky", scale: "m" }), h("calcite-list", null, this.renderSuggestionGroups())), this.renderSuggestionFlowItem())));
+        return (h(Host, null, h("style", null, this._colorizeStyle), h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, h("calcite-flow-item", { heading: this.messages.suggestions, closable: true, onCalciteFlowItemClose: this._emitClose }, h("calcite-input", { value: this._filterValue, icon: "magnifying-glass", clearable: true, onCalciteInputInput: this._updateFilterValue, class: "sticky", scale: "m" }), h("calcite-list", null, this.renderSuggestionGroups())), this.renderSuggestionFlowItem())));
     }
     static get assetsDirs() { return ["assets"]; }
-    get _hostElement() { return getElement(this); }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "suggestions": ["suggestionsPropChanged"]
     }; }
 };
 ArcgisArcadeSuggestions.style = arcadeSuggestionsCss;
 
-const arcadeVariablesCss = ":host{background-color:var(--calcite-color-foreground-1)}:host .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-color-foreground-1)}:host .sticky{position:sticky;top:0px;z-index:10}:host calcite-flow{height:100%}";
+const arcadeVariablesCss = ":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%}";
 
 function stopEnterPropagation(e) {
     if (e.key === "Enter") {
@@ -4179,6 +5596,8 @@ const ArcgisArcadeVariables = class {
         registerInstance(this, hostRef);
         this.close = createEvent(this, "close", 3);
         this.itemSelected = createEvent(this, "itemSelected", 3);
+        this.manager = useControllerManager(this);
+        this.messages = useT9n();
         this._updateFilterValue = (e) => {
             this._filterValue = e.target.value;
         };
@@ -4211,9 +5630,6 @@ const ArcgisArcadeVariables = class {
             e.stopPropagation();
             this.addPanelRenderer(this.collectionBasedVariableRenderer(collectionVariable));
         };
-        this._lang = "";
-        this._t9nLocale = "";
-        this._t9nStrings = undefined;
         this._mutationCounter = 1;
         this._flowItemRenderers = [];
         this._filterValue = "";
@@ -4224,12 +5640,7 @@ const ArcgisArcadeVariables = class {
         this._flowItemRenderers = [];
     }
     //#endregion
-    // #region Component lifecycle events
-    async componentWillLoad() {
-        await B(this, getAssetPath("./assets"));
-    }
     disconnectedCallback() {
-        q(this);
         this._flowObserver?.disconnect();
     }
     // #endregion
@@ -4254,7 +5665,7 @@ const ArcgisArcadeVariables = class {
         // When switching between flow the same reference is reused
         this._flowObserver = new MutationObserver(() => {
             // Get the last panel and try to set focus on the input element
-            W(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
+            setFocusOnElement(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
         });
         this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
     }
@@ -4283,15 +5694,15 @@ const ArcgisArcadeVariables = class {
                 });
                 loading = true;
             }
-            return (h("calcite-flow-item", { heading: this._t9nStrings?.profilevariables, description: collection.breadcrumb, beforeBack: this._beforeBack, closable: true, onCalciteFlowItemClose: this._emitClose }, h("calcite-action", { slot: "header-actions-end", text: this._t9nStrings?.backtotop ?? "Back to top", scale: "m", hidden: topPanel, icon: "chevrons-left", iconFlipRtl: true, onClick: this._backToTop }), h("calcite-input", { value: this._filterValue, icon: "magnifying-glass", clearable: true, onCalciteInputInput: this._updateFilterValue, class: "sticky", scale: "m" }), loading ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: this._t9nStrings?.loading ?? "Loading" })) : (h("calcite-list", null, this.renderEditorVariables(collection)))));
+            return (h("calcite-flow-item", { heading: this.messages.profilevariables, description: collection.breadcrumb, beforeBack: this._beforeBack, closable: true, onCalciteFlowItemClose: this._emitClose }, h("calcite-action", { slot: "header-actions-end", text: this.messages.backtotop ?? "Back to top", scale: "m", hidden: topPanel, icon: "chevrons-left", iconFlipRtl: true, onClick: this._backToTop }), h("calcite-input", { value: this._filterValue, icon: "magnifying-glass", clearable: true, onCalciteInputInput: this._updateFilterValue, class: "sticky", scale: "m" }), loading ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: this.messages.loading ?? "Loading" })) : (h("calcite-list", null, this.renderEditorVariables(collection)))));
         };
     }
     renderEditorVariables(collection) {
         // Filter the variables. Skip group, we will filter the children later on.
-        const filterExpression = K(this._filterValue);
+        const filterExpression = createFilterExpression(this._filterValue);
         const filteredVariables = collection.variables.filter((variable) => variable.passFilter(filterExpression));
         if (!filteredVariables.length) {
-            return h("div", { class: "notice-container" }, this._t9nStrings?.noitems ?? "No item");
+            return h("div", { class: "notice-container" }, this.messages.noitems ?? "No item");
         }
         return filteredVariables.map((variable) => this.renderEditorVariable(variable));
     }
@@ -4301,18 +5712,18 @@ const ArcgisArcadeVariables = class {
                 // Group is a collection but we represent it differently
                 return (h("calcite-list-item-group", { heading: variable.getLabel() }, this.renderEditorVariables(variable)));
             default:
-                return (h("calcite-list-item", { label: variable.getLabel(), description: variable.getDescription(), onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": variable }, variable.isCollection ? (h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "", scale: "s", icon: "chevron-right", iconFlipRtl: true, onClick: this._showCollectionPanel, onKeyPress: stopEnterPropagation, "data-item": variable })) : null, variable.icon ? h("calcite-icon", { icon: variable.icon, scale: "s", slot: "content-start" }) : null));
+                return (h("calcite-list-item", { label: variable.getLabel(), description: variable.getDescription(), onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": variable }, variable.isCollection ? (h("calcite-action", { slot: "actions-end", text: this.messages.expand ?? "", scale: "s", icon: "chevron-right", iconFlipRtl: true, onClick: this._showCollectionPanel, onKeyPress: stopEnterPropagation, "data-item": variable })) : null, variable.icon ? h("calcite-icon", { icon: variable.icon, scale: "s", slot: "content-start" }) : null));
         }
     }
     render() {
         const profile = arcadeDefaults.getEditorProfileForModel(this.modelId ?? "");
         if (!this.loading && !profile?.variables.length) {
-            return (h("calcite-flow", null, h("calcite-flow-item", { heading: this._t9nStrings?.profilevariables, closable: true, onCalciteFlowItemClose: this._emitClose }, h("div", { class: "notice-container" }, this._t9nStrings?.noprofilevariablesmessage ?? ""))));
+            return (h("calcite-flow", null, h("calcite-flow-item", { heading: this.messages.profilevariables, closable: true, onCalciteFlowItemClose: this._emitClose }, h("div", { class: "notice-container" }, this.messages.noprofilevariablesmessage ?? ""))));
         }
         return (h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, this.collectionBasedVariableRenderer(profile, true)(), this._flowItemRenderers.map((renderer) => renderer())));
     }
     static get assetsDirs() { return ["assets"]; }
-    get _hostElement() { return getElement(this); }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "modelId": ["modelIdPropChanged"]
     }; }
@@ -4330,20 +5741,20 @@ const EditorOptionsDefaults = {
     renderLineHighlight: "none",
     suggest: {
         snippetsPreventQuickSuggestions: false,
-        showWords: false
+        showWords: false,
     },
     tabSize: 2,
-    useShadowDOM: true
+    useShadowDOM: true,
 };
 const ArcgisCodeEditor = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChange = createEvent(this, "valueChange", 3);
-        this._componentReadyDefer = new h$1();
+        this._componentReadyDefer = new Deferred$1();
         this._disposables = [];
         this.value = undefined;
         this.language = undefined;
-        this.modelId = U();
+        this.modelId = generateGuid();
         this.options = undefined;
     }
     valuePropChange(newValue) {
@@ -4471,7 +5882,7 @@ const ArcgisCodeEditor = class {
             ...(this.options ?? {}),
             model,
             fixedOverflowWidgets: true,
-            scrollBeyondLastLine: false
+            scrollBeyondLastLine: false,
         });
         this._disposables.push(this._editorInstance);
         // Set the value now to trigger a diagnostic again
@@ -4485,7 +5896,7 @@ const ArcgisCodeEditor = class {
             this.valueChange.emit(script);
         });
         // Detect if the host element or its ancestors got a theme attribute mutation
-        this._themeObserver = x(this._hostElt, ["class"], () => this.updateTheme());
+        this._themeObserver = observeAncestorsMutation$1(this._hostElt, ["class"], () => this.updateTheme());
         // Update the theme of the Monaco Editor
         this.updateTheme();
         // Creates a resize observer to re-layout the editor on size changing
@@ -4498,7 +5909,7 @@ const ArcgisCodeEditor = class {
         while (this._disposables.length) {
             this._disposables.pop()?.dispose();
         }
-        this._themeObserver?.disconnect();
+        this._themeObserver?.remove();
     }
     //#endregion
     // #region Private methods API
@@ -4516,7 +5927,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 = k(this._hostElt) === "light" ? "vs" : "vs-dark";
+        const theme = getElementTheme(this._hostElt) === "light" ? "vs" : "vs-dark";
         if (theme === this._currentTheme) {
             return;
         }
@@ -4541,7 +5952,7 @@ const ArcgisCodeEditor = class {
             contextMenuOrder: 1,
             // Method that will be executed when the action is triggered.
             // @param editor The editor instance is passed in as a convenience
-            run: async () => await zoomInFn?.run()
+            run: async () => await zoomInFn?.run(),
         });
         this._editorInstance?.addAction({
             id: "editor.action.fontZoomOut",
@@ -4549,7 +5960,7 @@ const ArcgisCodeEditor = class {
             keybindings: [KeyMod.CtrlCmd | KeyCode.Minus],
             contextMenuGroupId: "zooming",
             contextMenuOrder: 2,
-            run: async () => await zoomOutFn?.run()
+            run: async () => await zoomOutFn?.run(),
         });
     }
     //#endregion