@arcgis/map-components 4.30.0 → 4.31.0-next.10

package/dist/esm/{index-8552f550.js → index-184537f4.js}

@@ -1,21 +1,24 @@
 /*!
  * 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
+ * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
+ * v4.31.0-next.10
  */
-import { D as Deferred, c as camelToKebab, d as safeCall, e as safeAsyncCall, f as devToolsAwareTimeout, h as importCoreAccessor, j as importCoreAccessorSupportDecorators, k as isNotUndefined, i as importCoreReactiveUtils } from './index-782d6c13.js';
+import { e as isNotUndefined, f as safeCall, D as Deferred, h as safeAsyncCall, j as devToolsAwareTimeout, k as importCoreAccessor, l as importCoreAccessorSupportDecorators, m as camelToKebab, a as importCoreReactiveUtils } from './index-223264ee.js';
 
 // src/framework.ts
 function retrieveComponentMembers(component, isLit) {
   if (isLit) {
-    const elementProperties = getLitProperties(component);
+    const elementProperties = component.constructor.elementProperties;
     component.manager.internals.members = Object.fromEntries(
-      Array.from(elementProperties, ([name, { state, type }]) => [
-        name,
-        [
-          state ? 32 /* State */ : type === Number ? 2 /* Number */ : type === Boolean ? 4 /* Boolean */ : 1 /* String */
+      Array.from(
+        elementProperties,
+        ([name, descriptor]) => descriptor.noAccessor ? void 0 : [
+          name,
+          [
+            (descriptor.readOnly ? 2048 /* ReadOnly */ : 0) | (descriptor.state ? 32 /* State */ : descriptor.type === Number ? 2 /* Number */ : descriptor.type === Boolean ? 4 /* Boolean */ : 1 /* String */)
+          ]
         ]
-      ])
+      ).filter(isNotUndefined)
     );
   } else {
     const constructor = component.constructor;
@@ -23,13 +26,14 @@ function retrieveComponentMembers(component, isLit) {
     constructor.__registerControllers = void 0;
     if (typeof members !== "object") {
       throw new Error(
-        "Failed to retrieve internal component meta. Make sure you have the useComponentsControllers() Rollup Plugin for Stencil Controllers configured in your Stencil config."
+        "Failed to retrieve component meta" 
       );
     }
-    component.manager.internals.members = members;
+    component.manager.internals.members = Object.fromEntries(
+      Object.entries(members).filter(([_name, [propType]]) => (propType & 63 /* PropLike */) !== 0)
+    );
   }
 }
-var getLitProperties = (component) => component.constructor.elementProperties;
 function parsePropertyValue(value, type = 8 /* Any */) {
   const isComplex = value == null || typeof value === "object" || typeof value === "function";
   if (isComplex) {
@@ -45,177 +49,103 @@ function parsePropertyValue(value, type = 8 /* Any */) {
     return value;
   }
 }
-var makeMemberFilter = (filter) => (component) => {
-  const members = component.manager.internals.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.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";
-  }
-}
 
 // src/types.ts
-var controllerSymbol = Symbol("controller");
+var controllerSymbol = Symbol.for("controller");
 
 // src/utils.ts
 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.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;
-    };
-    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();
+var ambientComponent;
+function setAmbientComponent(component) {
+  if (ambientComponent === component) {
+    return;
   }
-  /*
-   * 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;
+  ambientComponent = component;
+  queueMicrotask(() => {
+    if (ambientComponent === component) {
+      ambientComponent = void 0;
     }
-    this._ambientComponent = component;
-    queueMicrotask(() => {
-      if (this._ambientComponent === component) {
-        this._ambientComponent = void 0;
-      }
-    });
+  });
+}
+function retrieveComponent(name2) {
+  return ambientComponent;
+}
+var ambientControllers = [];
+function setParentController(controller) {
+  if (controller === void 0) {
+    ambientControllers = [];
+    return;
   }
-  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;
+  const index = ambientControllers.indexOf(controller);
+  ambientControllers = index === -1 ? [...ambientControllers, controller] : ambientControllers.slice(0, index + 1);
+  queueMicrotask(() => {
+    ambientControllers = [];
+  });
+}
+function retrieveParentControllers() {
+  return ambientControllers;
+}
+var ambientChildController;
+function setAmbientChildController(controller) {
+  if (ambientChildController === controller) {
+    return;
   }
-  /*
-   * Aids proxyExports() in knowing who is it's host
-   */
-  setParentController(controller) {
-    if (controller === void 0) {
-      this._ambientControllers = [];
-      return;
+  ambientChildController = controller;
+  queueMicrotask(() => {
+    if (ambientChildController === controller) {
+      ambientChildController = void 0;
     }
-    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;
+  });
+}
+function retrieveAmbientChildController() {
+  const controller = ambientChildController;
+  ambientChildController = void 0;
+  return controller;
+}
+var use = async (value, watchExports) => {
+  const controller = useRefSync(value);
+  if (controller === void 0) {
+    return value;
   }
-  /*
-   * 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;
-      }
-    });
+  await controller.ready;
+  if (typeof watchExports === "function") {
+    const unsubscribe = controller.watchExports(
+      (exports) => watchExports(exports, unsubscribe)
+    );
   }
-  retrieveAmbientChildController() {
-    const controller = this._ambientChildController;
-    this._ambientChildController = void 0;
+  return controller.exports;
+};
+var useRef = async (value) => {
+  const controller = useRefSync(value);
+  await controller.ready;
+  return controller;
+};
+var useRefSync = (value) => {
+  const ambientChildController2 = retrieveAmbientChildController();
+  if (ambientChildController2 !== void 0) {
+    return ambientChildController2;
+  }
+  const component = 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/Controller.ts
+var shouldBypass = {
+  setter: false,
+  getter: false,
+  readOnly: false
+};
+var elementToInstance = /* @__PURE__ */ new WeakMap();
 var _a;
-var _Controller = class _Controller {
+var Controller = class {
   constructor(component) {
     this._callbacks = {
       hostConnected: [],
@@ -228,7 +158,7 @@ var _Controller = class _Controller {
       hostLifecycle: []
     };
     this._ready = new Deferred();
-    this._lifecycleDisconnected = [];
+    this._lifecycleCleanups = [];
     this.connectedCalled = false;
     this.willLoadCalled = false;
     this.didLoadCalled = false;
@@ -241,20 +171,12 @@ var _Controller = class _Controller {
      */
     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);
-    _Controller.internals.setParentController(this);
-    if ("hostDestroy" in this) {
-      this.component.manager.ensureHasDestroy();
+    const resolvedComponent = toControllerHost(component ?? retrieveComponent());
+    {
+      this.component = resolvedComponent;
     }
+    this.component.addController(this);
+    setParentController(this);
     const manager = this.component.manager;
     const isInControllerManager = manager === void 0;
     if (!isInControllerManager) {
@@ -292,12 +214,13 @@ var _Controller = class _Controller {
    * re-render of the component
    */
   set exports(exports) {
-    if (this._exports !== exports) {
+    const oldExports = this._exports;
+    if (oldExports !== exports) {
       this._exports = exports;
-      if (this.connectedCalled) {
-        this.component.requestUpdate();
-      }
       this._exportWatchers.forEach(safeCall);
+      if (this.connectedCalled && this.assignedProperty !== false) {
+        this.component.requestUpdate(this.assignedProperty, oldExports);
+      }
     }
     this._ready.resolve(exports);
   }
@@ -331,8 +254,8 @@ var _Controller = class _Controller {
    * require awaiting them as they are guaranteed to be loaded by then.
    */
   get use() {
-    _Controller.internals.setAmbientComponent(this.component);
-    return _Controller.internals.use;
+    setAmbientComponent(this.component);
+    return use;
   }
   /**
    * Just like controller.use, but returns the controller itself, rather than it's
@@ -348,127 +271,17 @@ var _Controller = class _Controller {
    *   some other method on the controller
    */
   get useRef() {
-    _Controller.internals.setAmbientComponent(this.component);
-    return _Controller.internals.useRef;
+    setAmbientComponent(this.component);
+    return useRef;
   }
   /**
    * Like useRef, but doesn't wait for the controller to get ready
-   */
-  get useRefSync() {
-    _Controller.internals.setAmbientComponent(this.component);
-    return _Controller.internals.useRefSync;
-  }
-  /**
-   * 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;
-    try {
-      return callback();
-    } finally {
-      _Controller.internals.shouldBypassSetter = false;
-    }
-  }
-  /**
-   * Like bypassSetter, but only bypasses this.manager.readonly(), rather that
-   * all setters set using this.manager.getSet()
-   */
-  bypassReadonly(callback) {
-    _Controller.internals.shouldBypassReadonly = true;
-    try {
-      return callback();
-    } finally {
-      _Controller.internals.shouldBypassReadonly = false;
-    }
-  }
-  /**
-   * 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/Lit.
    *
-   * 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
-   * )
+   * @internal
    */
-  bypassGetter(callback) {
-    _Controller.internals.shouldBypassGetter = true;
-    try {
-      return callback();
-    } finally {
-      _Controller.internals.shouldBypassGetter = false;
-    }
-  }
-  /**
-   * 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;
-    const internals = this.component.manager.internals;
-    if (typeof genericGetSet.get === "function") {
-      (_a2 = internals.getters)[property] ?? (_a2[property] = []);
-      internals.getters[property].unshift(genericGetSet.get);
-    }
-    const set = genericGetSet.set === "ignore" ? ignoreSet : genericGetSet.set;
-    if (set) {
-      (_b = internals.setters)[property] ?? (_b[property] = []);
-      internals.setters[property].unshift(set);
-    }
-  }
-  // FEATURE: improve typings
-  /**
-   * Dynamically set a watcher for any reactive property
-   */
-  watch(property, callback) {
-    var _a2;
-    const type = getMemberType(this.component, property);
-    if (type === void 0) {
-      throw new Error(
-        `Trying to watch a non-@property, non-@state property "${property}". Either convert it into a @state() or use get/set syntax`
-      );
-    }
-    const internals = this.component.manager.internals;
-    (_a2 = internals.allWatchers)[property] ?? (_a2[property] = []);
-    const watchers = internals.allWatchers[property];
-    const genericCallback = callback;
-    const safeCallback = (newValue, oldValue, propertyName) => safeCall(genericCallback, null, newValue, oldValue, propertyName);
-    watchers.push(safeCallback);
-    return () => {
-      const index = watchers.indexOf(safeCallback);
-      if (index !== -1) {
-        watchers.splice(index, 1);
-      }
-    };
+  get useRefSync() {
+    setAmbientComponent(this.component);
+    return useRefSync;
   }
   controllerRemoved() {
     if (this.component.el.isConnected) {
@@ -496,7 +309,6 @@ var _Controller = class _Controller {
     this._callbacks.hostUpdated.push(callback);
   }
   onDestroy(callback) {
-    this.component.manager.ensureHasDestroy();
     this._callbacks.hostDestroy.push(callback);
   }
   onLifecycle(callback) {
@@ -506,6 +318,7 @@ var _Controller = class _Controller {
     }
   }
   // Call each lifecycle hook
+  /** @internal */
   triggerConnected() {
     const genericController = this;
     if (genericController.hostConnected) {
@@ -515,15 +328,17 @@ var _Controller = class _Controller {
     this.triggerLifecycle();
     this.connectedCalled = true;
   }
+  /** @internal */
   triggerDisconnected() {
     const genericController = this;
     if (genericController.hostDisconnected) {
       safeCall(genericController.hostDisconnected, genericController);
     }
     this._callbacks.hostDisconnected.forEach(safeCall);
-    this._lifecycleDisconnected.forEach(safeCall);
-    this._lifecycleDisconnected = [];
+    this._lifecycleCleanups.forEach(safeCall);
+    this._lifecycleCleanups = [];
   }
+  /** @internal */
   async triggerLoad() {
     if (this.willLoadCalled) {
       return;
@@ -538,6 +353,7 @@ var _Controller = class _Controller {
     }
     this._ready.resolve(this._exports);
   }
+  /** @internal */
   triggerLoaded() {
     if (this.didLoadCalled) {
       return;
@@ -549,20 +365,23 @@ var _Controller = class _Controller {
     this._callbacks.hostLoaded.forEach(safeCall);
     this.didLoadCalled = true;
   }
-  triggerUpdate() {
+  /** @internal */
+  triggerUpdate(changedProperties) {
     const genericController = this;
     if (genericController.hostUpdate) {
-      safeCall(genericController.hostUpdate, genericController);
+      safeCall(genericController.hostUpdate, genericController, changedProperties);
     }
-    this._callbacks.hostUpdate.forEach(safeCall);
+    this._callbacks.hostUpdate.forEach(callUpdate, changedProperties);
   }
-  triggerUpdated() {
+  /** @internal */
+  triggerUpdated(changedProperties) {
     const genericController = this;
     if (genericController.hostUpdated) {
-      safeCall(genericController.hostUpdated, genericController);
+      safeCall(genericController.hostUpdated, genericController, changedProperties);
     }
-    this._callbacks.hostUpdated.forEach(safeCall);
+    this._callbacks.hostUpdated.forEach(callUpdate, changedProperties);
   }
+  /** @internal */
   triggerDestroy() {
     const genericController = this;
     if (genericController.hostDestroy) {
@@ -570,45 +389,32 @@ var _Controller = class _Controller {
     }
     this._callbacks.hostDestroy.forEach(safeCall);
   }
+  /** @internal */
   triggerLifecycle() {
     const genericController = this;
     if (genericController.hostLifecycle) {
       this._callLifecycle(() => genericController.hostLifecycle());
     }
-    this._callbacks.hostLifecycle.forEach((callback) => this._callLifecycle(callback));
+    this._callbacks.hostLifecycle.forEach(this._callLifecycle, this);
   }
   _callLifecycle(callback) {
-    _Controller.internals.setAmbientComponent(this.component);
+    setAmbientComponent(this.component);
     const cleanupRaw = safeCall(callback);
     const cleanup = Array.isArray(cleanupRaw) ? cleanupRaw : [cleanupRaw];
     cleanup.forEach((cleanup2) => {
       if (typeof cleanup2 === "function") {
-        this._lifecycleDisconnected.push(cleanup2);
+        this._lifecycleCleanups.push(cleanup2);
       } else if (typeof cleanup2 === "object" && typeof cleanup2.remove === "function") {
-        this._lifecycleDisconnected.push(cleanup2.remove);
+        this._lifecycleCleanups.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
-    );
-  }
-  dynamicGetSet(property, getSet) {
-    super.genericGetSet(property, getSet);
-  }
-};
+function callUpdate(callback) {
+  safeCall(callback, void 0, this);
+}
+var GenericController = Controller;
 function makeProvisionalValue(base) {
   if (typeof base !== "object" && typeof base !== "function" || base === null) {
     return base;
@@ -621,28 +427,20 @@ function makeProvisionalValue(base) {
       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}`);
+    set: (target, prop, newValue, receiver) => {
       return Reflect.set(target, prop, newValue, receiver);
     }
   });
   return proxy2;
 }
 var cyclical = /* @__PURE__ */ new Set(["exports", "_exports"]);
-var accessBeforeLoad = "" ;
 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"
-    );
   }
 }
-var ignoreSet = (_, value) => value;
 function trackPropertyKey(object, onResolved, defaultValue) {
   const keys = Object.keys(object);
   const keyCount = keys.length;
@@ -681,6 +479,24 @@ function keyTrackResolve() {
   });
   keyTrackMap = void 0;
 }
+function watch(component, property, callback) {
+  var _a2;
+  const genericProperty = property;
+  const internals = component.manager.internals;
+  (_a2 = internals.allWatchers)[genericProperty] ?? (_a2[genericProperty] = []);
+  const watchers = internals.allWatchers[genericProperty];
+  const genericCallback = callback;
+  const safeCallback = (newValue, oldValue, propertyName) => safeCall(genericCallback, null, newValue, oldValue, propertyName);
+  watchers.push(safeCallback);
+  return () => {
+    const index = watchers.indexOf(safeCallback);
+    if (index !== -1) {
+      watchers.splice(index, 1);
+    }
+  };
+}
+
+// src/ComponentInternals.ts
 var ComponentInternals = class {
   constructor(component) {
     /**
@@ -695,79 +511,56 @@ var ComponentInternals = class {
      */
     this.enabledWatchers = {};
     this.allWatchers = {};
-    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));
+    /**
+     * "readOnly" is not enabled initially since we need to allow to set property
+     * default values in the constructor.
+     * For Stencil, readonly is enabled by the `readonly()` controller.
+     * For Lit, we have the following logic:
+     */
+    this.enableReadonly = () => {
+      this.enableReadonly = void 0;
+      if (!this.component.manager.isLit) {
+        return;
       }
-      this._trackedValue = defaultValue;
-      this._keyTrackers.push(
-        (key, value, previousValue) => safeCall(onResolved, void 0, defaultValue === value ? key : void 0, previousValue)
-      );
-      return defaultValue;
+      const internals = this.component.manager.internals;
+      Object.entries(internals.members).forEach(([name2, [type]]) => {
+        var _a2;
+        const isReadOnly = type & 2048 /* ReadOnly */;
+        if (isReadOnly) {
+          (_a2 = internals.setters)[name2] ?? (_a2[name2] = []);
+          internals.setters[name2].push(internals.readonlySetter);
+        }
+      });
     };
-    this._trackedValue = nothing;
-    this._keyTrackers = [];
+    this.trackedValue = nothing;
+    this.keyTrackers = [];
     this.getters = {};
     this.setters = {};
     this.accessorGetter = {};
     this.accessorSetter = {};
     this.reactiveUtilsIntegrations = /* @__PURE__ */ new Set();
     this._exports = /* @__PURE__ */ new WeakMap();
-    Object.defineProperty(this, "component", {
-      writable: false,
-      enumerable: false,
-      configurable: true,
-      value: component
-    });
+    this.readonlySetter = (newValue, _oldValue, property) => {
+      if (shouldBypass.readOnly) {
+        return newValue;
+      }
+      throw new Error(
+        `Cannot assign to read-only property "${property}" of ${this.component.el.tagName.toLowerCase()}. Trying to assign "${String(
+          newValue
+        )}"`
+      );
+    };
+    {
+      this.component = component;
+    }
   }
-  _firePropertyTrackers(key, value, oldValue) {
-    const trackers = this._keyTrackers;
-    this._trackedValue = nothing;
-    this._keyTrackers = [];
-    trackers.forEach((tracker) => tracker(key, value, oldValue));
+  firePropTrackers(key, value) {
+    const trackers = this.keyTrackers;
+    this.trackedValue = nothing;
+    this.keyTrackers = [];
+    trackers.forEach((tracker) => tracker(key, value));
   }
+  // REFACTOR: once Stencil is no longer supported, simplify this with Lit's getPropertyDescriptor(), or https://github.com/shoelace-style/shoelace/issues/1990
   /**
    * Configure a getter or setter for a given \@Prop/\@State
    *
@@ -777,59 +570,51 @@ var ComponentInternals = class {
    * ComponentInternals.getters/setters properties, and then call getSetProxy
    * to apply the changes to the prototype
    */
-  getSetProxy(property, hasGetter, hasSetter) {
+  getSetProxy(property) {
     const component = this.component;
     const classPrototype = component.constructor.prototype;
-    this._getSetProxy(classPrototype, property, hasGetter, hasSetter, "class");
+    this._getSetProxy(classPrototype, property, "class");
     if (component.manager.isLit) {
       return;
     }
     const htmlPrototype = component.el.constructor.prototype;
     if (classPrototype !== htmlPrototype) {
-      this._getSetProxy(htmlPrototype, property, hasGetter, hasSetter, "html");
+      this._getSetProxy(htmlPrototype, property, "html");
     }
   }
-  _getSetProxy(prototype, name, hasGetter, hasSetter, type) {
+  _getSetProxy(prototype, name2, 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 @Prop/@property/@State/@state properties. For internal component properties, use regular get/set syntax. Tried to use it on "${name}" in ${component.el.tagName}`
-        );
-      } else if (tolerateNotFound) {
-        return;
-      } else {
-        throw new Error(`Unable to find "${name}" property on the ${component.el.tagName} component`);
-      }
+    const propType = getMemberType(component, name2);
+    const descriptor = Object.getOwnPropertyDescriptor(prototype, name2);
+    if (!descriptor) {
+      return void 0;
     }
-    const { get: originalGet, set: originalSet } = descriptor;
+    const originalGet = descriptor.get;
+    const originalSet = descriptor.set;
     const isGetterAlreadyOverwritten = customAccessor in originalGet;
     const isSetterAlreadyOverwritten = customAccessor in originalSet;
-    const shouldOverwriteGet = !isGetterAlreadyOverwritten && hasGetter;
-    const shouldOverwriteSet = !isSetterAlreadyOverwritten && hasSetter;
+    const shouldOverwriteGet = !isGetterAlreadyOverwritten;
+    const shouldOverwriteSet = !isSetterAlreadyOverwritten;
     if (!shouldOverwriteGet && !shouldOverwriteSet) {
       return;
     }
     const finalGetter = shouldOverwriteGet ? function getter() {
       let value = originalGet.call(this);
-      const component2 = Controller.internals.elementToInstance.get(this);
-      if (Controller.internals.shouldBypassGetter || component2 === void 0) {
+      const component2 = elementToInstance.get(this);
+      if (shouldBypass.getter || component2 === void 0) {
         return value;
       }
       const internals = component2.manager.internals;
-      value = internals.accessorGetter[name](value, name);
-      const getters = internals.getters[name] ?? emptyArray;
+      value = internals.accessorGetter[name2](value, name2);
+      const getters = internals.getters[name2] ?? emptyArray;
       for (let i = 0; i < getters.length; i++) {
-        value = getters[i](value, name);
+        value = getters[i](value, name2);
       }
       return value;
     } : originalGet;
     const finalSetter = shouldOverwriteSet ? function setter(rawNewValue) {
       const oldValue = originalGet.call(this);
-      const component2 = Controller.internals.elementToInstance.get(this);
+      const component2 = elementToInstance.get(this);
       if (component2 === void 0) {
         originalSet.call(this, rawNewValue);
         return;
@@ -839,30 +624,30 @@ var ComponentInternals = class {
       if (newValue === oldValue) {
         originalSet.call(this, rawNewValue);
       } else {
-        const setters = Controller.internals.shouldBypassSetter ? emptyArray : internals.setters[name] ?? emptyArray;
+        const setters = shouldBypass.setter ? emptyArray : internals.setters[name2] ?? emptyArray;
         for (let i = 0; i < setters.length; i++) {
-          newValue = setters[i](newValue, oldValue, name);
+          newValue = setters[i](newValue, oldValue, name2);
           if (newValue === oldValue) {
             break;
           }
         }
-        newValue = internals.accessorSetter[name](newValue, oldValue, name);
+        newValue = internals.accessorSetter[name2](newValue, oldValue, name2);
         originalSet.call(this, newValue);
         if (newValue !== oldValue) {
-          internals.enabledWatchers[name]?.forEach((watcher) => watcher(newValue, oldValue, name));
+          internals.enabledWatchers[name2]?.forEach((watcher) => watcher(newValue, oldValue, name2));
         }
       }
-      if (internals._keyTrackers.length > 0) {
-        internals?._firePropertyTrackers(name, rawNewValue, oldValue);
+      if (internals.keyTrackers.length > 0) {
+        internals?.firePropTrackers(name2, rawNewValue);
       }
     } : originalSet;
     if (shouldOverwriteGet) {
-      Object.defineProperty(finalGetter, customAccessor, { value: true });
+      finalGetter[customAccessor] = true;
     }
     if (shouldOverwriteSet) {
-      Object.defineProperty(finalSetter, customAccessor, { value: true });
+      finalSetter[customAccessor] = true;
     }
-    Object.defineProperty(prototype, name, {
+    Object.defineProperty(prototype, name2, {
       ...descriptor,
       get: finalGetter,
       set: finalSetter
@@ -886,8 +671,11 @@ var ComponentInternals = class {
   }
 };
 var emptyArray = [];
-var customAccessor = Symbol("controllersCustomAccessor");
-var nothing = Symbol("nothing");
+var customAccessor = Symbol();
+var nothing = (
+  // eslint-disable-next-line symbol-description
+  Symbol()
+) ;
 var useControllerManager = (component, forceUpdate) => new ControllerManager(component, forceUpdate);
 var ControllerManager = class extends GenericController {
   constructor(component, forceUpdate) {
@@ -911,113 +699,37 @@ var ControllerManager = class extends GenericController {
       controllerHost.requestUpdate = () => update(component);
     }
     super(component);
+    /** @internal */
     this.internals = new ComponentInternals(this.component);
     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 component = this.component;
-      const isProp = getPropType(component, property) === "prop";
-      if (isProp) {
-        if (this.isLit) {
-          const details = getLitProperties(component).get(property);
-          if (details && details?.attribute !== false) {
-            component.el.setAttribute(
-              typeof details.attribute === "string" ? details.attribute : camelToKebab(property),
-              // Not using converter.toAttribute to keep this unlikely case simpler
-              String(oldValue)
-            );
-          }
-        } else {
-          component.requestUpdate();
-        }
-      }
-      throw new Error(
-        `Cannot assign to read-only property "${property}" of ${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.isLit = isLit;
     this.component.manager = this;
     retrieveComponentMembers(component, isLit);
     this._controllers = controllers;
     this.exports = void 0;
-    this.hasDestroy = "autoDestroyDisabled" in this.component && typeof this.component.destroy === "function";
+    this.hasDestroy = autoDestroyDisabledPropName in this.component && typeof this.component.destroy === "function";
     if (this.hasDestroy) {
-      this.watch("autoDestroyDisabled", () => this._autoDestroyDisabledWatcher());
+      watch(component, autoDestroyDisabledPropName, () => this._setAutoDestroyTimeout());
     }
     this._bindLifecycleMethods();
+    const internals = this.internals;
+    Object.keys(internals.members).forEach((name2) => {
+      internals.accessorGetter[name2] = defaultGetterSetter;
+      internals.accessorSetter[name2] = defaultGetterSetter;
+      internals.getSetProxy(name2);
+    });
     if (!isLit) {
       Object.defineProperty(component, "updateComplete", {
         get: async () => await this._updatePromise.promise
       });
     }
-    const members = getPropLikeMembers(component);
-    const internals = component.manager.internals;
-    members.forEach((name) => {
-      internals.accessorGetter[name] = defaultGetterSetter;
-      internals.accessorSetter[name] = defaultGetterSetter;
-      internals.getSetProxy(name, true, true);
-    });
-    Controller.internals.setParentController(void 0);
-    Controller.internals.setAmbientComponent(component);
-    Controller.internals.elementToInstance.set(component.el, component);
-    Controller.internals.elementToInstance.set(component, component);
+    queueMicrotask(internals.enableReadonly);
+    setParentController(void 0);
+    setAmbientComponent(component);
+    elementToInstance.set(component.el, component);
+    elementToInstance.set(component, component);
   }
   _bindLifecycleMethods() {
     const component = this.component;
@@ -1057,50 +769,43 @@ var ControllerManager = class extends GenericController {
       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.
+   *
+   * @internal
    */
   _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 autoDestroyDisabled prop.`
+        `The ${tagName} component has already been destroyed. It can not be used again. If you meant to disconnect and reconnect a component without automatic destroy, set the ${autoDestroyDisabledPropName} prop.`
       );
     }
     if (this._autoDestroyTimeout !== void 0) {
       clearTimeout(this._autoDestroyTimeout);
     }
-    this.internals.enabledWatchers = this.internals.allWatchers;
+    const internals = this.internals;
+    internals.enabledWatchers = internals.allWatchers;
     keyTrackResolve();
-    this._controllers.forEach(
-      (controller) => "triggerConnected" in controller ? controller.triggerConnected() : safeCall(controller.hostConnected, controller)
-    );
+    internals.enableReadonly?.();
+    this._controllers.forEach(callConnected);
     this._originalLifecycles.connectedCallback?.call(this.component);
   }
+  /** @internal */
   _disconnectedCallback() {
     if (this.destroyed) {
       return;
     }
-    this._controllers.forEach(
-      (controller) => "triggerDisconnected" in controller ? controller.triggerDisconnected() : safeCall(controller.hostDisconnected, controller)
-    );
+    this._controllers.forEach(callDisconnected);
     this._originalLifecycles.disconnectedCallback?.call(this.component);
     if (this.hasDestroy) {
-      this._autoDestroyDisabledWatcher();
+      this._setAutoDestroyTimeout();
     }
   }
+  /** @internal */
   async _load() {
     const integrations = this.internals.reactiveUtilsIntegrations;
     if (integrations.size > 0) {
@@ -1112,39 +817,32 @@ var ControllerManager = class extends GenericController {
         }
       }
     }
-    await Promise.allSettled(
-      Array.from(
-        this._controllers,
-        async (controller) => integrations.has(controller) ? void 0 : "triggerLoad" in controller ? await controller.triggerLoad() : await safeAsyncCall(controller.hostLoad, controller)
-      )
-    );
+    await Promise.allSettled(Array.from(this._controllers, callLoad, integrations));
     await this._originalLifecycles.componentWillLoad?.call(this.component);
   }
+  /** @internal */
   _loaded() {
-    this._controllers.forEach(
-      (controller) => "triggerLoaded" in controller ? controller.triggerLoaded() : safeCall(controller.hostLoaded, controller)
-    );
+    this._controllers.forEach(callLoaded);
     this._originalLifecycles.componentDidLoad?.call(this.component);
   }
   _update() {
-    this._controllers.forEach(
-      (controller) => "triggerUpdate" in controller ? controller.triggerUpdate() : safeCall(controller.hostUpdate, controller)
-    );
+    const changedProperties = this.component.changedProperties;
+    this._controllers.forEach(callUpdate2, changedProperties);
     void this._originalLifecycles.componentWillUpdate?.call(this.component);
   }
   _updated() {
-    this._controllers.forEach(
-      (controller) => "triggerUpdated" in controller ? controller.triggerUpdated() : safeCall(controller.hostUpdated, controller)
-    );
+    const maybeLitComponent = this.component;
+    this._controllers.forEach(callUpdated, maybeLitComponent.changedProperties);
     this._originalLifecycles.componentDidUpdate?.call(this.component);
-    if (!this.isLit) {
+    if (this.isLit) {
+      maybeLitComponent.changedProperties = /* @__PURE__ */ new Map();
+    } else {
       const updatePromise = this._updatePromise;
       this._updatePromise = new Deferred();
       updatePromise.resolve(true);
     }
   }
   async destroy() {
-    this.ensureHasDestroy();
     if (this.destroyed) {
       return;
     }
@@ -1158,13 +856,11 @@ var ControllerManager = class extends GenericController {
     }
     this._autoDestroyTimeout = void 0;
     this.destroyed = true;
-    this._controllers.forEach(
-      (controller) => "triggerDestroy" in controller ? controller.triggerDestroy() : safeCall(controller.hostDestroy, controller)
-    );
+    this._controllers.forEach(callDestroy);
     this._controllers.clear();
     await this._originalLifecycles.destroy?.call(this.component);
   }
-  _autoDestroyDisabledWatcher() {
+  _setAutoDestroyTimeout() {
     if (!this.component.el.isConnected && !this.component.autoDestroyDisabled) {
       if (this._autoDestroyTimeout !== void 0) {
         clearTimeout(this._autoDestroyTimeout);
@@ -1175,117 +871,222 @@ var ControllerManager = class extends GenericController {
       }
     }
   }
-  // REFACTOR: replace this with a readonly:true option in @property()
-  /**
-   * 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 });
+};
+var autoDestroyDisabledPropName = "autoDestroyDisabled";
+var autoDestroyOnDisconnectTimeout = 1e3;
+var defaultGetterSetter = (value) => value;
+function callConnected(controller) {
+  if ("triggerConnected" in controller) {
+    controller.triggerConnected();
+  } else {
+    safeCall(controller.hostConnected, controller);
   }
-  // REFACTOR: remove this in Lit in favor of native get/set
-  /**
-   * Listen for any component's @State()/@Prop() change, and mutate it's
-   * value before it is set.
-   * 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];
+}
+function callDisconnected(controller) {
+  if ("triggerDisconnected" in controller) {
+    controller.triggerDisconnected();
+  } else {
+    safeCall(controller.hostDisconnected, controller);
+  }
+}
+async function callLoad(controller) {
+  if (!this.has(controller)) {
+    if ("triggerLoad" in controller) {
+      await controller.triggerLoad();
+    } else {
+      await safeAsyncCall(controller.hostLoad, controller);
+    }
+  }
+}
+function callLoaded(controller) {
+  if ("triggerLoaded" in controller) {
+    controller.triggerLoaded();
+  } else {
+    safeCall(controller.hostLoaded, controller);
+  }
+}
+function callUpdate2(controller) {
+  if ("triggerUpdate" in controller) {
+    controller.triggerUpdate(this);
+  } else {
+    safeCall(controller.hostUpdate, controller, this);
+  }
+}
+function callUpdated(controller) {
+  if ("triggerUpdated" in controller) {
+    controller.triggerUpdated(this);
+  } else {
+    safeCall(controller.hostUpdated, controller, this);
+  }
+}
+function callDestroy(controller) {
+  if ("triggerDestroy" in controller) {
+    controller.triggerDestroy();
+  } else {
+    safeCall(controller.hostDestroy, controller);
+  }
+}
+function trackPropKey(component, onResolved, defaultValue) {
+  const internals = component.manager.internals;
+  if (internals.trackedValue !== nothing && internals.trackedValue !== defaultValue) {
+    internals.firePropTrackers(void 0, void 0);
+  }
+  if (internals.keyTrackers.length === 0) {
+    queueMicrotask(() => internals.firePropTrackers(void 0, void 0));
+  }
+  internals.trackedValue = defaultValue;
+  internals.keyTrackers.push((key, value) => safeCall(onResolved, void 0, defaultValue === value ? key : void 0));
+  return defaultValue;
+}
+
+// src/trackKey.ts
+function 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) => trackPropertyKey(
+      host,
+      (key) => resolved(
+        key === void 0 ? void 0 : {
+          key,
+          host,
+          isReactive: false
+        }
+      ),
+      defaultValue
+    )
+  );
+  const component = candidateHosts.find(
+    (host) => "manager" in host && typeof host.manager === "object" && host.manager.component === host
+  );
+  if (component) {
+    trackPropKey(
+      component,
+      (key) => resolved(
+        key === void 0 ? void 0 : {
+          key,
+          host: component,
+          isReactive: getMemberType(component, key) !== void 0
+        }
+      ),
+      defaultValue
+    );
+  }
+  return defaultValue;
+}
+
+// src/getSet.ts
+function getSet(defaultValue, getSet2) {
+  const component = retrieveComponent();
+  return trackPropKey(
+    component,
+    (rawName) => {
+      const name2 = rawName;
+      const manager = component.manager;
+      const genericComponent = component;
+      const value = genericComponent[name2];
       const isStencilHotReload = "production" !== "production"  ;
-      const initialSet = getSet.initialSet ?? true;
-      if (value != null && value !== defaultValue && typeof getSet.set === "function" && initialSet && !isStencilHotReload) {
-        const newValue = getSet.set(value, defaultValue, name);
+      const initialSet = getSet2.initialSet ?? true;
+      if (value != null && value !== defaultValue && typeof getSet2.set === "function" && initialSet && !isStencilHotReload) {
+        const newValue = getSet2.set(value, defaultValue, name2);
         if (newValue !== value) {
-          if (this.isLit) {
-            genericComponent[name] = newValue;
+          if (manager.isLit) {
+            genericComponent[name2] = newValue;
           } else {
             let firstConnected = true;
-            this.onConnected(() => {
+            manager.onConnected(() => {
               if (!firstConnected) {
                 return;
               }
               firstConnected = true;
-              this.bypassSetter(() => {
-                genericComponent[name] = newValue;
+              bypassSetter(() => {
+                genericComponent[name2] = newValue;
               });
             });
           }
         }
       }
-      this.genericGetSet(name, getSet);
-    }, defaultValue);
+      genericGetSet(component, name2, getSet2);
+    },
+    defaultValue
+  );
+}
+function bypassSetter(callback) {
+  shouldBypass.setter = true;
+  try {
+    return callback();
+  } finally {
+    shouldBypass.setter = false;
   }
-};
-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:
-`autoDestroyDisabled and destroy` }
-`.trim();
-var autoDestroyOnDisconnectTimeout = 1e3;
-var defaultGetterSetter = (value) => value;
+}
+function bypassGetter(callback) {
+  shouldBypass.getter = true;
+  try {
+    return callback();
+  } finally {
+    shouldBypass.getter = false;
+  }
+}
+function genericGetSet(component, property, getSet2) {
+  var _a2, _b;
+  const genericGetSet2 = getSet2;
+  const internals = component.manager.internals;
+  const get = typeof genericGetSet2.get === "function" ? genericGetSet2.get : void 0;
+  if (get) {
+    (_a2 = internals.getters)[property] ?? (_a2[property] = []);
+    internals.getters[property].unshift(get);
+  }
+  const set = genericGetSet2.set === "ignore" ? ignoreSet : genericGetSet2.set;
+  if (set) {
+    (_b = internals.setters)[property] ?? (_b[property] = []);
+    internals.setters[property].unshift(
+      set
+    );
+  }
+}
+var ignoreSet = (_, value) => value;
+
+// src/readonly.ts
+function readonly(value) {
+  const component = retrieveComponent();
+  return getSet(value, { set: component.manager.internals.readonlySetter });
+}
+function bypassReadOnly(callback) {
+  shouldBypass.readOnly = true;
+  try {
+    return callback();
+  } finally {
+    shouldBypass.readOnly = false;
+  }
+}
 
 // src/proxyExports.ts
 var proxyExports = (Class) => (...args) => {
-  const ambientControllers = Controller.internals.retrieveParentControllers();
+  const ambientControllers2 = retrieveParentControllers();
   const instance = new Class(...args);
   const initialExports = instance.exports;
-  Controller.internals.setParentController(ambientControllers.at(-1));
+  setParentController(ambientControllers2.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(
+  setAmbientChildController(instance);
+  const hostCandidates = [instance.component, ...ambientControllers2].reverse();
+  return trackKey(
     hostCandidates,
     (resolution) => resolution === void 0 ? void 0 : setProxy(instance, resolution, initialExports),
     initialExports
   );
 };
-function setProxy(controller, { host, key, type }, initialExports) {
+function setProxy(controller, { host, key, isReactive: assignedToProp }, initialExports) {
   const genericHost = host;
   const controllerValueChanged = genericHost[key] !== controller.exports;
   const hostValueChanged = genericHost[key] !== initialExports;
@@ -1294,25 +1095,28 @@ function setProxy(controller, { host, key, type }, initialExports) {
     genericHost[key] = controller.exports;
   }
   const isProxyExportsOnComponent = host === controller.component;
-  if (isProxyExportsOnComponent && type === "prop") {
-    const internals = controller.component.manager.internals;
-    if (hostValueChanged) {
-      internals.markExports(controller, genericHost[key]);
-    }
-    controller.component.manager.watch(key, (value) => {
-      if (value !== controller.exports) {
-        internals.markExports(controller, value);
+  if (isProxyExportsOnComponent) {
+    if (assignedToProp) {
+      const internals = controller.component.manager.internals;
+      if (hostValueChanged) {
+        internals.markExports(controller, genericHost[key]);
       }
-    });
+      watch(controller.component, key, (value) => {
+        if (value !== controller.exports) {
+          internals.markExports(controller, value);
+        }
+      });
+    }
+    controller.assignedProperty = assignedToProp ? void 0 : key;
   }
   controller.watchExports(() => {
     if (genericHost[key] === controller.exports) {
       return;
     }
     const manager = controller.component.manager;
-    const isReadOnly = manager.internals.readonlyProps?.has(key) === true;
+    const isReadOnly = manager.internals.setters[key]?.includes(manager.internals.readonlySetter);
     if (isReadOnly) {
-      manager.bypassReadonly(() => {
+      bypassReadOnly(() => {
         genericHost[key] = controller.exports;
       });
     } else {
@@ -1328,7 +1132,7 @@ var FunctionalController = class extends Controller {
     super(component);
     const originalExports = this.exports;
     try {
-      Controller.internals.setAmbientComponent(this.component);
+      setAmbientComponent(this.component);
       const value = constructor(this.component, this);
       const constructorChangedExports = this.exports !== originalExports;
       if (value instanceof Promise) {
@@ -1361,13 +1165,17 @@ var FunctionalController = class extends Controller {
 };
 var proxy$1 = proxyExports(FunctionalController);
 
+var reactiveUtils;
+async function loadReactiveUtils() {
+  reactiveUtils ?? (reactiveUtils = importCoreReactiveUtils());
+  return await reactiveUtils;
+}
 var makeAccessorController = (loadAccessor, _options) => (component, options) => proxy(component, loadAccessor, options);
 var AccessorController = class extends GenericController {
   constructor(component, _loadAccessor, _options) {
     super(component);
     this._loadAccessor = _loadAccessor;
     this._options = _options;
-    this.reactiveUtils = this.component.reactiveUtils;
     // A mapping from bound component's "prop" name to Accessor instance's "property"
     this._watchedProperties = /* @__PURE__ */ new Map();
     this._isBinding = { value: true };
@@ -1388,23 +1196,23 @@ var AccessorController = class extends GenericController {
       integrations.delete(reactiveUtilsIntegration);
     }
     integrations.add(reactiveUtilsIntegration ?? new ReactiveUtilsIntegration(this.component));
-    component.manager.trackPropKey((resolved) => {
-      if (resolved) {
-        this._instancePropName = resolved;
-      }
-    }, this.exports);
+    trackPropKey(
+      component,
+      (resolved) => {
+        if (resolved) {
+          this._instancePropName = resolved;
+        }
+      },
+      this.exports
+    );
   }
   hostConnected() {
     this._isBinding.value = false;
   }
   async hostLoad() {
+    this.reactiveUtils = await loadReactiveUtils();
     const component = this.component;
-    if (component.reactiveUtils === void 0) {
-      this.reactiveUtils = await importCoreReactiveUtils();
-    } else {
-      this.reactiveUtils = await this.use(component.reactiveUtils);
-    }
-    const parameters = accessorSupport.gatherParameters(this, this._watchedProperties);
+    const parameters = this._gatherParameters();
     const finalParameters = this._options?.editConstructorProperties?.call(component, parameters) ?? parameters;
     const awaitedParameters = finalParameters instanceof Promise ? await finalParameters : finalParameters;
     const genericComponent = component;
@@ -1423,6 +1231,16 @@ var AccessorController = class extends GenericController {
     accessorSupport.watchAccessorUpdates(this, this._instance, this._watchedProperties);
     this.exports = this._instance;
   }
+  _gatherParameters() {
+    const data = Object.fromEntries(
+      Array.from(
+        this._watchedProperties,
+        ([prop, property]) => [property, this.component[prop]]
+      ).filter(([, value]) => value !== void 0)
+    );
+    const props = data ;
+    return props;
+  }
   async _createInstance(parameters) {
     if (this._isAccessorConstructor(this._loadAccessor)) {
       return new this._loadAccessor(parameters);
@@ -1463,7 +1281,7 @@ var accessorSupport = {
         if (hasProp || !doBinding) {
           return value;
         }
-        return component.manager.trackKey(
+        return trackKey(
           component,
           (resolved) => {
             if (resolved !== void 0) {
@@ -1508,7 +1326,7 @@ var accessorSupport = {
     const genericComponent = component;
     const genericInstance = instance;
     const readonlyProps = findReadOnlyAccessorProps(instance);
-    component.manager.bypassGetter(
+    bypassGetter(
       () => (
         // Careful: Map's forEach callback arguments are (value, key), not (key, value)
         watchedProperties.forEach((propertyName, propName) => {
@@ -1537,7 +1355,7 @@ var accessorSupport = {
             const newValue = genericInstance[propertyName];
             const flipBoolean = typeof newValue === "boolean" && propertyName !== propName && propName.toLowerCase().includes("disable");
             const resolvedNewValue = flipBoolean ? !newValue : newValue;
-            component.manager.bypassSetter(() => {
+            bypassSetter(() => {
               genericComponent[propName] = resolvedNewValue;
             });
           },
@@ -1546,16 +1364,8 @@ var accessorSupport = {
       );
     });
   },
-  gatherParameters(controller, watchedProperties) {
-    const { component } = controller;
-    const data = Object.fromEntries(
-      Array.from(watchedProperties, ([prop, property]) => [property, component[prop]]).filter(
-        ([, value]) => value !== void 0
-      )
-    );
-    return data ;
-  },
-  reEmitAccessorEvents(controller, instance, reactiveUtils, prefix) {
+  // REFACTOR: remove this once Stencil is no longer supported
+  reEmitAccessorEvents(controller, instance, reactiveUtils2, prefix) {
     const isEvented = "on" in instance && typeof instance.on === "function";
     if (!isEvented) {
       return;
@@ -1580,7 +1390,7 @@ var accessorSupport = {
       if (instance.destroyed) {
         return;
       }
-      return toListen.map(([eventName, emit]) => reactiveUtils.on(getEventTarget, eventName, emit));
+      return toListen.map(([eventName, emit]) => reactiveUtils2.on(getEventTarget, eventName, emit));
     });
   },
   async reCreate(instance, component) {
@@ -1614,9 +1424,8 @@ var ReactiveUtilsIntegration = class extends GenericController {
     const component = this.component;
     const internals = component.manager.internals;
     const enabledMembers = [];
-    const allMembers = getPropLikeMembers(this.component);
-    component.manager.bypassGetter(
-      () => allMembers.forEach((name) => {
+    bypassGetter(
+      () => Object.keys(internals.members).forEach((name) => {
         const alreadyIntegrated = internals.accessorSetter[name] !== defaultGetterSetter;
         if (alreadyIntegrated) {
           return;
@@ -1648,4 +1457,4 @@ var ReactiveUtilsIntegration = class extends GenericController {
   }
 };
 
-export { AccessorController as A, accessorSupport as a, makeController as b, makeAccessorController as m, proxyExports as p, useControllerManager as u };
+export { AccessorController as A, accessorSupport as a, makeController as b, getSet as g, makeAccessorController as m, proxyExports as p, readonly as r, trackPropKey as t, useControllerManager as u, watch as w };