@universityofmaryland/web-model-library 1.0.7 → 1.1.0

package/dist/model/registration.js

@@ -0,0 +1,83 @@
+import { isDev, createLogger } from "../utilities/debug.js";
+import { ComponentRegistrationError, BatchRegistrationError } from "./errors.js";
+const TAG_NAME_RE = /^[a-z][a-z0-9]*(-[a-z0-9]+)+$/;
+function registerComponent(tagName, element, options) {
+  const registry = options?.registry ?? window.customElements;
+  const eager = options?.eager ?? true;
+  if (!element || typeof element !== "function") {
+    throw new ComponentRegistrationError(
+      tagName,
+      "missing-constructor",
+      "Constructor is required and must be a function."
+    );
+  }
+  if (!TAG_NAME_RE.test(tagName)) {
+    throw new ComponentRegistrationError(
+      tagName,
+      "invalid-name",
+      `"${tagName}" is not a valid custom element name. Must match ${TAG_NAME_RE}.`
+    );
+  }
+  const existing = registry.get(tagName);
+  if (existing) {
+    if (existing === element) {
+      return false;
+    }
+    throw new ComponentRegistrationError(
+      tagName,
+      "conflict",
+      `Already registered with a different constructor.`,
+      existing
+    );
+  }
+  if (!eager) {
+    const hasElement = document.getElementsByTagName(tagName).length > 0;
+    if (!hasElement) {
+      if (isDev()) {
+        const logger = createLogger(tagName);
+        logger.debug("Lazy registration skipped — no DOM elements found.");
+      }
+      return false;
+    }
+  }
+  registry.define(tagName, element);
+  return true;
+}
+function isComponentRegistered(tagName, registry) {
+  return (registry ?? window.customElements).get(tagName) !== void 0;
+}
+function whenComponentDefined(tagName, registry) {
+  return (registry ?? window.customElements).whenDefined(tagName);
+}
+function getComponentConstructor(tagName, registry) {
+  return (registry ?? window.customElements).get(tagName);
+}
+function registerComponents(components, options) {
+  const errors = [];
+  const succeeded = [];
+  for (const { tagName, element } of components) {
+    try {
+      const result = registerComponent(tagName, element, options);
+      if (result) {
+        succeeded.push(tagName);
+      }
+    } catch (error) {
+      if (error instanceof ComponentRegistrationError) {
+        errors.push(error);
+      } else {
+        throw error;
+      }
+    }
+  }
+  if (errors.length > 0) {
+    throw new BatchRegistrationError(errors, succeeded);
+  }
+}
+export {
+  getComponentConstructor,
+  isComponentRegistered,
+  registerComponent,
+  registerComponents,
+  whenComponentDefined
+};
+//# sourceMappingURL=registration.js.map

package/dist/model/registration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registration.js","sources":["../../source/model/registration.ts"],"sourcesContent":["/**\n * Component registration utilities.\n *\n * Provides validated registration, idempotent same-constructor handling,\n * conflict detection, batch registration, and query helpers.\n */\n\nimport { isDev, createLogger } from '../utilities/debug';\nimport {\n  ComponentRegistrationError,\n  BatchRegistrationError,\n} from './errors';\n\nconst TAG_NAME_RE = /^[a-z][a-z0-9]*(-[a-z0-9]+)+$/;\n\nexport interface RegisterOptions {\n  /** Register immediately (true, default) or only when DOM elements exist (false). */\n  eager?: boolean;\n  /** Custom element registry. Defaults to `window.customElements`. */\n  registry?: CustomElementRegistry;\n}\n\n/**\n * Validate and register a custom element.\n *\n * - Returns `true` on successful registration.\n * - Returns `false` if the same constructor is already registered (idempotent).\n * - Throws `ComponentRegistrationError` on conflict, invalid name, or missing constructor.\n */\nexport function registerComponent(\n  tagName: string,\n  element: CustomElementConstructor,\n  options?: RegisterOptions,\n): boolean {\n  const registry = options?.registry ?? window.customElements;\n  const eager = options?.eager ?? true;\n\n  if (!element || typeof element !== 'function') {\n    throw new ComponentRegistrationError(\n      tagName,\n      'missing-constructor',\n      'Constructor is required and must be a function.',\n    );\n  }\n\n  if (!TAG_NAME_RE.test(tagName)) {\n    throw new ComponentRegistrationError(\n      tagName,\n      'invalid-name',\n      `\"${tagName}\" is not a valid custom element name. Must match ${TAG_NAME_RE}.`,\n    );\n  }\n\n  const existing = registry.get(tagName);\n  if (existing) {\n    if (existing === element) {\n      return false;\n    }\n    throw new ComponentRegistrationError(\n      tagName,\n      'conflict',\n      `Already registered with a different constructor.`,\n      existing,\n    );\n  }\n\n  if (!eager) {\n    const hasElement = document.getElementsByTagName(tagName).length > 0;\n    if (!hasElement) {\n      if (isDev()) {\n        const logger = createLogger(tagName);\n        logger.debug('Lazy registration skipped — no DOM elements found.');\n      }\n      return false;\n    }\n  }\n\n  registry.define(tagName, element);\n  return true;\n}\n\n/**\n * Check whether a tag name is already registered.\n */\nexport function isComponentRegistered(\n  tagName: string,\n  registry?: CustomElementRegistry,\n): boolean {\n  return (registry ?? window.customElements).get(tagName) !== undefined;\n}\n\n/**\n * Promise that resolves when a tag name is defined.\n */\nexport function whenComponentDefined(\n  tagName: string,\n  registry?: CustomElementRegistry,\n): Promise<CustomElementConstructor> {\n  return (registry ?? window.customElements).whenDefined(tagName);\n}\n\n/**\n * Return the constructor for a registered tag, or `undefined`.\n */\nexport function getComponentConstructor(\n  tagName: string,\n  registry?: CustomElementRegistry,\n): CustomElementConstructor | undefined {\n  return (registry ?? window.customElements).get(tagName);\n}\n\n/**\n * Register multiple components. Attempts all registrations; throws\n * `BatchRegistrationError` if any fail (with per-component errors attached).\n */\nexport function registerComponents(\n  components: Array<{ tagName: string; element: CustomElementConstructor }>,\n  options?: RegisterOptions,\n): void {\n  const errors: ComponentRegistrationError[] = [];\n  const succeeded: string[] = [];\n\n  for (const { tagName, element } of components) {\n    try {\n      const result = registerComponent(tagName, element, options);\n      if (result) {\n        succeeded.push(tagName);\n      }\n    } catch (error) {\n      if (error instanceof ComponentRegistrationError) {\n        errors.push(error);\n      } else {\n        throw error;\n      }\n    }\n  }\n\n  if (errors.length > 0) {\n    throw new BatchRegistrationError(errors, succeeded);\n  }\n}\n"],"names":[],"mappings":";;AAaA,MAAM,cAAc;AAgBb,SAAS,kBACd,SACA,SACA,SACS;AACT,QAAM,WAAW,SAAS,YAAY,OAAO;AAC7C,QAAM,QAAQ,SAAS,SAAS;AAEhC,MAAI,CAAC,WAAW,OAAO,YAAY,YAAY;AAC7C,UAAM,IAAI;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEA,MAAI,CAAC,YAAY,KAAK,OAAO,GAAG;AAC9B,UAAM,IAAI;AAAA,MACR;AAAA,MACA;AAAA,MACA,IAAI,OAAO,oDAAoD,WAAW;AAAA,IAAA;AAAA,EAE9E;AAEA,QAAM,WAAW,SAAS,IAAI,OAAO;AACrC,MAAI,UAAU;AACZ,QAAI,aAAa,SAAS;AACxB,aAAO;AAAA,IACT;AACA,UAAM,IAAI;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEA,MAAI,CAAC,OAAO;AACV,UAAM,aAAa,SAAS,qBAAqB,OAAO,EAAE,SAAS;AACnE,QAAI,CAAC,YAAY;AACf,UAAI,SAAS;AACX,cAAM,SAAS,aAAa,OAAO;AACnC,eAAO,MAAM,oDAAoD;AAAA,MACnE;AACA,aAAO;AAAA,IACT;AAAA,EACF;AAEA,WAAS,OAAO,SAAS,OAAO;AAChC,SAAO;AACT;AAKO,SAAS,sBACd,SACA,UACS;AACT,UAAQ,YAAY,OAAO,gBAAgB,IAAI,OAAO,MAAM;AAC9D;AAKO,SAAS,qBACd,SACA,UACmC;AACnC,UAAQ,YAAY,OAAO,gBAAgB,YAAY,OAAO;AAChE;AAKO,SAAS,wBACd,SACA,UACsC;AACtC,UAAQ,YAAY,OAAO,gBAAgB,IAAI,OAAO;AACxD;AAMO,SAAS,mBACd,YACA,SACM;AACN,QAAM,SAAuC,CAAA;AAC7C,QAAM,YAAsB,CAAA;AAE5B,aAAW,EAAE,SAAS,QAAA,KAAa,YAAY;AAC7C,QAAI;AACF,YAAM,SAAS,kBAAkB,SAAS,SAAS,OAAO;AAC1D,UAAI,QAAQ;AACV,kBAAU,KAAK,OAAO;AAAA,MACxB;AAAA,IACF,SAAS,OAAO;AACd,UAAI,iBAAiB,4BAA4B;AAC/C,eAAO,KAAK,KAAK;AAAA,MACnB,OAAO;AACL,cAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,MAAI,OAAO,SAAS,GAAG;AACrB,UAAM,IAAI,uBAAuB,QAAQ,SAAS;AAAA,EACpD;AACF;"}

package/dist/model/update-cycle.d.ts

@@ -0,0 +1,12 @@
+export declare class UpdateScheduler {
+    private _pending;
+    private _resolve;
+    private _promise;
+    private _performUpdate;
+    private _recursionCount;
+    constructor(performUpdate: () => boolean);
+    schedule(): void;
+    private _flush;
+    get updateComplete(): Promise<boolean>;
+}
+//# sourceMappingURL=update-cycle.d.ts.map

package/dist/model/update-cycle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-cycle.d.ts","sourceRoot":"","sources":["../../source/model/update-cycle.ts"],"names":[],"mappings":"AAaA,qBAAa,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAA2C;IAC3D,OAAO,CAAC,QAAQ,CAAmB;IACnC,OAAO,CAAC,cAAc,CAAgB;IACtC,OAAO,CAAC,eAAe,CAAK;gBAEhB,aAAa,EAAE,MAAM,OAAO;IAKxC,QAAQ,IAAI,IAAI;IAUhB,OAAO,CAAC,MAAM;IAsBd,IAAI,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC,CAErC;CACF"}

package/dist/model/update-cycle.js

@@ -0,0 +1,41 @@
+const MAX_RECURSION = 100;
+class UpdateScheduler {
+  constructor(performUpdate) {
+    this._pending = false;
+    this._resolve = null;
+    this._recursionCount = 0;
+    this._performUpdate = performUpdate;
+    this._promise = Promise.resolve(true);
+  }
+  schedule() {
+    if (this._pending) return;
+    this._pending = true;
+    this._promise = new Promise((resolve) => {
+      this._resolve = resolve;
+      queueMicrotask(() => this._flush(resolve));
+    });
+  }
+  _flush(resolve) {
+    this._pending = false;
+    this._recursionCount++;
+    if (this._recursionCount > MAX_RECURSION) {
+      this._recursionCount = 0;
+      resolve(false);
+      return;
+    }
+    const success = this._performUpdate();
+    if (this._pending) {
+      this._promise.then(resolve);
+    } else {
+      this._recursionCount = 0;
+      resolve(success);
+    }
+  }
+  get updateComplete() {
+    return this._promise;
+  }
+}
+export {
+  UpdateScheduler
+};
+//# sourceMappingURL=update-cycle.js.map

package/dist/model/update-cycle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-cycle.js","sources":["../../source/model/update-cycle.ts"],"sourcesContent":["/**\n * Update Scheduler\n *\n * Batches multiple `schedule()` calls into a single microtask-based update.\n * Inspired by Lit's reactive update cycle.\n *\n * - Deduplicates: multiple `schedule()` calls before the microtask produce one update\n * - Re-entrant safe: if `performUpdate` triggers another `schedule()`, a new microtask is queued\n * - Max recursion guard (100 iterations) to prevent infinite loops\n */\n\nconst MAX_RECURSION = 100;\n\nexport class UpdateScheduler {\n  private _pending = false;\n  private _resolve: ((value: boolean) => void) | null = null;\n  private _promise: Promise<boolean>;\n  private _performUpdate: () => boolean;\n  private _recursionCount = 0;\n\n  constructor(performUpdate: () => boolean) {\n    this._performUpdate = performUpdate;\n    this._promise = Promise.resolve(true);\n  }\n\n  schedule(): void {\n    if (this._pending) return;\n    this._pending = true;\n\n    this._promise = new Promise<boolean>((resolve) => {\n      this._resolve = resolve;\n      queueMicrotask(() => this._flush(resolve));\n    });\n  }\n\n  private _flush(resolve: (value: boolean) => void): void {\n    this._pending = false;\n    this._recursionCount++;\n\n    if (this._recursionCount > MAX_RECURSION) {\n      this._recursionCount = 0;\n      resolve(false);\n      return;\n    }\n\n    const success = this._performUpdate();\n\n    // If performUpdate triggered another schedule(), the new microtask\n    // will handle it. Chain this resolve to the new promise.\n    if (this._pending) {\n      this._promise.then(resolve);\n    } else {\n      this._recursionCount = 0;\n      resolve(success);\n    }\n  }\n\n  get updateComplete(): Promise<boolean> {\n    return this._promise;\n  }\n}\n"],"names":[],"mappings":"AAWA,MAAM,gBAAgB;AAEf,MAAM,gBAAgB;AAAA,EAO3B,YAAY,eAA8B;AAN1C,SAAQ,WAAW;AACnB,SAAQ,WAA8C;AAGtD,SAAQ,kBAAkB;AAGxB,SAAK,iBAAiB;AACtB,SAAK,WAAW,QAAQ,QAAQ,IAAI;AAAA,EACtC;AAAA,EAEA,WAAiB;AACf,QAAI,KAAK,SAAU;AACnB,SAAK,WAAW;AAEhB,SAAK,WAAW,IAAI,QAAiB,CAAC,YAAY;AAChD,WAAK,WAAW;AAChB,qBAAe,MAAM,KAAK,OAAO,OAAO,CAAC;AAAA,IAC3C,CAAC;AAAA,EACH;AAAA,EAEQ,OAAO,SAAyC;AACtD,SAAK,WAAW;AAChB,SAAK;AAEL,QAAI,KAAK,kBAAkB,eAAe;AACxC,WAAK,kBAAkB;AACvB,cAAQ,KAAK;AACb;AAAA,IACF;AAEA,UAAM,UAAU,KAAK,eAAA;AAIrB,QAAI,KAAK,UAAU;AACjB,WAAK,SAAS,KAAK,OAAO;AAAA,IAC5B,OAAO;AACL,WAAK,kBAAkB;AACvB,cAAQ,OAAO;AAAA,IACjB;AAAA,EACF;AAAA,EAEA,IAAI,iBAAmC;AACrC,WAAO,KAAK;AAAA,EACd;AACF;"}

package/dist/model.js

@@ -1,4 +1,16 @@
 import { stylesTemplate } from "./utilities/styles.js";
+import { createLogger } from "./utilities/debug.js";
+import { defineObservedAttributes, resolveAttributeConfigs } from "./attributes/config.js";
+import { ChangeDetector } from "./attributes/change-detection.js";
+import { AttributeTypeError, AttributeValidationError } from "./attributes/errors.js";
+import { UpdateScheduler } from "./model/update-cycle.js";
+import { registerComponent } from "./model/registration.js";
+import { getComponentConstructor, isComponentRegistered, registerComponents, whenComponentDefined } from "./model/registration.js";
+import { validateAllSlots, validateSlotElements } from "./slots/slot-validation.js";
+import { createSlotchangeHandler } from "./slots/slot-events.js";
+import { querySlottedElements, querySlottedElement, hasSlottedContent } from "./slots/slot-query.js";
+import { IntersectionController, MediaQueryController } from "./model/controllers.js";
+import { BatchRegistrationError, ComponentRegistrationError } from "./model/errors.js";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -40,6 +52,17 @@ class BaseComponent extends HTMLElement {
   constructor() {
     super();
     this.elementRef = null;
+    this._resolvedReactiveAttrs = [];
+    this._changeDetector = new ChangeDetector();
+    this._reactiveValues = /* @__PURE__ */ new Map();
+    this._isReflecting = false;
+    this._hasConnected = false;
+    this._hasFirstUpdated = false;
+    this._changedProperties = /* @__PURE__ */ new Map();
+    this._isUpdating = false;
+    this._pendingPreUpgrade = null;
+    this._slotCleanups = [];
+    this._controllers = /* @__PURE__ */ new Set();
     const constructor = this.constructor;
     this.config = constructor.componentConfig;
     if (!this.config) {
@@ -47,14 +70,24 @@ class BaseComponent extends HTMLElement {
         "Component config not found. Did you forget to use the @Component decorator?"
       );
     }
+    this._logger = createLogger(this.config.tagName);
+    this._updateScheduler = new UpdateScheduler(() => this._performUpdate());
     this.shadow = this.attachShadow({ mode: "open" });
     this.validateConfig();
+    this.setupReactiveAttributes();
   }
   static get observedAttributes() {
-    return this.componentConfig?.attributes?.map((attr) => attr.name) || [];
+    const handlerNames = this.componentConfig?.attributes?.map((attr) => attr.name) || [];
+    const reactiveNames = this.componentConfig?.reactiveAttributes ? defineObservedAttributes(this.componentConfig.reactiveAttributes) : [];
+    return [.../* @__PURE__ */ new Set([...handlerNames, ...reactiveNames])];
   }
   connectedCallback() {
     try {
+      this.applyPreUpgradeProperties();
+      if (!this._hasConnected) {
+        this._hasConnected = true;
+        this.executeFirstConnected();
+      }
       this.initializeComponent();
     } catch (error) {
       this.handleError("Failed to initialize component", error);
@@ -74,6 +107,10 @@ class BaseComponent extends HTMLElement {
   initializeComponent() {
     try {
       this.validateSlots();
+      if (!this._hasFirstUpdated) {
+        this._hasFirstUpdated = true;
+        this.executeWillFirstUpdate();
+      }
       const componentRef = this.config.createComponent(this);
       if (!componentRef || !componentRef.element) {
         throw new Error(
@@ -82,6 +119,11 @@ class BaseComponent extends HTMLElement {
       }
       this.elementRef = componentRef;
       this.setupShadowDom(componentRef);
+      this.setupSlotObservers();
+      this.notifyControllers("hostConnected");
+      if (this._changedProperties.size > 0) {
+        this._updateScheduler.schedule();
+      }
       this.afterInit();
     } catch (error) {
       this.handleError("Failed to initialize component", error);
@@ -125,15 +167,218 @@ class BaseComponent extends HTMLElement {
     });
   }
   handleAttributeChange(name, oldValue, newValue) {
-    if (!this.elementRef) return;
-    const handler = this.config.attributes?.find(
-      (attr) => attr.name === name
-    )?.handler;
-    if (handler) {
-      handler(this.elementRef, oldValue, newValue);
+    if (this.elementRef) {
+      const handler = this.config.attributes?.find(
+        (attr) => attr.name === name
+      )?.handler;
+      if (handler) {
+        handler(this.elementRef, oldValue, newValue);
+      }
+    }
+    if (!this._isReflecting) {
+      const resolved = this._resolvedReactiveAttrs.find(
+        (r) => r.attributeName === name
+      );
+      if (resolved) {
+        let converted;
+        try {
+          converted = resolved.converter.fromAttribute(newValue, name);
+        } catch (err) {
+          throw new AttributeTypeError(
+            name,
+            resolved.type ?? "unknown",
+            newValue,
+            this.config.tagName
+          );
+        }
+        const value = converted !== void 0 ? converted : resolved.defaultValue;
+        if (value !== void 0 && resolved.validate) {
+          const error = resolved.validate(value);
+          if (error) {
+            throw new AttributeValidationError(name, error, this.config.tagName);
+          }
+        }
+        const oldValue2 = this._reactiveValues.get(resolved.propertyName);
+        const equalityOverride = resolved.hasChanged ? (prev, next) => !resolved.hasChanged(next, prev) : void 0;
+        const changed = this._changeDetector.set(resolved.propertyName, value, equalityOverride);
+        this._reactiveValues.set(resolved.propertyName, value);
+        if (changed) {
+          if (resolved.onChange) {
+            resolved.onChange(this, value, oldValue2);
+          }
+          this.requestUpdate(resolved.propertyName, oldValue2);
+        }
+      }
+    }
+  }
+  /**
+   * Capture a property value set on the instance before upgrade.
+   * Deletes the instance property so the class accessor takes precedence,
+   * then returns the captured value for re-application.
+   */
+  capturePreUpgradeProperty(propertyName) {
+    if (this.hasOwnProperty(propertyName)) {
+      const value = this[propertyName];
+      delete this[propertyName];
+      return { value, captured: true };
+    }
+    return { value: void 0, captured: false };
+  }
+  /**
+   * Apply pre-upgrade property values through reactive setters.
+   * Called in connectedCallback after all attributeChangedCallback
+   * calls have completed during upgrade.
+   */
+  applyPreUpgradeProperties() {
+    if (!this._pendingPreUpgrade) return;
+    const pending = this._pendingPreUpgrade;
+    this._pendingPreUpgrade = null;
+    for (const [propertyName, value] of pending) {
+      this[propertyName] = value;
+    }
+  }
+  setupReactiveAttributes() {
+    if (!this.config.reactiveAttributes) return;
+    this._resolvedReactiveAttrs = resolveAttributeConfigs(
+      this.config.reactiveAttributes
+    );
+    for (const resolved of this._resolvedReactiveAttrs) {
+      const { propertyName, defaultValue } = resolved;
+      const preUpgrade = this.capturePreUpgradeProperty(propertyName);
+      if (resolved.attributeName !== false) {
+        const raw = this.getAttribute(resolved.attributeName);
+        if (raw !== null) {
+          const converted = resolved.converter.fromAttribute(
+            raw,
+            resolved.attributeName
+          );
+          this._reactiveValues.set(
+            propertyName,
+            converted !== void 0 ? converted : defaultValue
+          );
+        } else if (defaultValue !== void 0) {
+          this._reactiveValues.set(propertyName, defaultValue);
+        }
+      } else if (defaultValue !== void 0) {
+        this._reactiveValues.set(propertyName, defaultValue);
+      }
+      Object.defineProperty(this, propertyName, {
+        get: () => this._reactiveValues.get(propertyName),
+        set: (value) => {
+          if (value !== void 0 && resolved.validate) {
+            const error = resolved.validate(value);
+            if (error) {
+              const attrName = resolved.attributeName !== false ? resolved.attributeName : propertyName;
+              throw new AttributeValidationError(attrName, error, this.config.tagName);
+            }
+          }
+          const oldValue = this._reactiveValues.get(propertyName);
+          const equalityOverride = resolved.hasChanged ? (prev, next) => !resolved.hasChanged(next, prev) : void 0;
+          const changed = this._changeDetector.set(propertyName, value, equalityOverride);
+          if (!changed) return;
+          this._reactiveValues.set(propertyName, value);
+          if (resolved.reflect && resolved.attributeName !== false) {
+            this._isReflecting = true;
+            try {
+              const attrValue = resolved.converter.toAttribute(value);
+              if (attrValue === null) {
+                this.removeAttribute(resolved.attributeName);
+              } else {
+                this.setAttribute(resolved.attributeName, attrValue);
+              }
+            } finally {
+              this._isReflecting = false;
+            }
+          }
+          if (resolved.onChange) {
+            resolved.onChange(this, value, oldValue);
+          }
+          this.requestUpdate(propertyName, oldValue);
+        },
+        configurable: true,
+        enumerable: true
+      });
+      if (preUpgrade.captured) {
+        if (!this._pendingPreUpgrade) {
+          this._pendingPreUpgrade = /* @__PURE__ */ new Map();
+        }
+        this._pendingPreUpgrade.set(propertyName, preUpgrade.value);
+      }
+    }
+  }
+  addController(controller) {
+    this._controllers.add(controller);
+    if (this.isConnected && this.elementRef) {
+      controller.hostConnected?.();
+    }
+  }
+  removeController(controller) {
+    this._controllers.delete(controller);
+  }
+  requestUpdate(name, oldValue) {
+    if (name !== void 0 && !this._changedProperties.has(name)) {
+      this._changedProperties.set(name, oldValue);
+    }
+    if (!this._hasConnected) return;
+    this._updateScheduler.schedule();
+  }
+  get updateComplete() {
+    return this._updateScheduler.updateComplete;
+  }
+  willUpdate(_changedProperties) {
+    this.config.willUpdate?.(this, _changedProperties);
+  }
+  update(_changedProperties) {
+    this.config.update?.(this, _changedProperties);
+  }
+  updated(_changedProperties) {
+    this.config.updated?.(this, _changedProperties);
+  }
+  _performUpdate() {
+    if (this._isUpdating) return true;
+    this._isUpdating = true;
+    const changedProperties = this._changedProperties;
+    this._changedProperties = /* @__PURE__ */ new Map();
+    try {
+      for (const controller of this._controllers) {
+        controller.hostUpdate?.();
+      }
+      this.willUpdate(changedProperties);
+      this.update(changedProperties);
+      this.updated(changedProperties);
+      for (const controller of this._controllers) {
+        controller.hostUpdated?.();
+      }
+      return true;
+    } catch (error) {
+      this.handleError("Error during update cycle", error);
+      return false;
+    } finally {
+      this._isUpdating = false;
+    }
+  }
+  notifyControllers(method) {
+    for (const controller of this._controllers) {
+      try {
+        controller[method]?.();
+      } catch (error) {
+        this.handleError(`Controller ${method} failed`, error);
+      }
     }
   }
+  querySlot(slotName, selector) {
+    return querySlottedElements(this, slotName, { selector, flatten: true });
+  }
+  querySlotElement(slotName, selector) {
+    return querySlottedElement(this, slotName, selector);
+  }
+  hasSlotContent(slotName) {
+    return hasSlottedContent(this, slotName);
+  }
   cleanup() {
+    this.notifyControllers("hostDisconnected");
+    for (const fn of this._slotCleanups) fn();
+    this._slotCleanups = [];
     this.elementRef = null;
   }
   /**
@@ -155,7 +400,7 @@ class BaseComponent extends HTMLElement {
     );
   }
   handleError(message, error) {
-    console.error(`[${this.config.tagName}]`, message, error);
+    this._logger.error(message, error);
     const errorType = this.elementRef ? "runtime" : message.toLowerCase().includes("validation") ? "validation" : "initialization";
     this.dispatchComponentEvent("umdComponent:error", {
       type: errorType,
@@ -165,55 +410,44 @@ class BaseComponent extends HTMLElement {
   }
   validateSlots() {
     if (!this.config.slots) return;
-    const errors = [];
-    Object.entries(this.config.slots).forEach(([name, config]) => {
-      const type = name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`).replace(/^-/, "");
-      if (config.required) {
-        const slotElement = this.querySelector(`[slot="${type}"]`);
-        if (!slotElement) {
-          errors.push({
-            slot: name,
-            error: "missing",
-            message: `Required slot "${type}" is missing`
-          });
-        }
-      }
-      if (config.deprecated) {
-        const slotElement = this.querySelector(`[slot="${type}"]`);
-        if (slotElement) {
-          errors.push({
-            slot: name,
-            error: "deprecated",
-            message: `Slot "${type}" is deprecated. ${config.deprecated}`
-          });
-        }
-      }
-      if (config.allowedElements) {
-        const slotElements = Array.from(
-          this.querySelectorAll(`[slot="${type}"]`)
-        );
-        const invalidElements = slotElements.filter(
-          (element) => !config.allowedElements.includes(element.tagName.toLowerCase())
-        );
-        if (invalidElements.length > 0) {
-          errors.push({
-            slot: name,
-            error: "invalid-elements",
-            message: `Slot "${type}" contains invalid elements. Allowed: ${config.allowedElements.join(
-              ", "
-            )}`,
-            invalidElements
-          });
-        }
+    const result = validateAllSlots(this, this.config.slots);
+    this.reportSlotErrors(result);
+  }
+  reportSlotErrors(result) {
+    if (result.isValid) return;
+    this.handleError("Slot validation failed", result.errors);
+    if (result.errors.length === 1) {
+      this._logger.warn(result.errors[0].message);
+    } else {
+      this._logger.group(`${result.errors.length} slot validation warnings`);
+      for (const error of result.errors) {
+        this._logger.warn(error.message);
       }
-    });
-    if (errors.length > 0) {
-      this.handleError("Slot validation failed", errors);
-      errors.forEach((error) => {
-        console.warn(`[${this.config.tagName}]`, error.message, error);
-      });
+      this._logger.groupEnd();
     }
   }
+  setupSlotObservers() {
+    if (!this.config.slots) return;
+    const configKeys = Object.keys(this.config.slots);
+    const kebabToConfig = /* @__PURE__ */ new Map();
+    for (const key of configKeys) {
+      const kebab = key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`).replace(/^-/, "");
+      kebabToConfig.set(kebab, { key, config: this.config.slots[key] });
+    }
+    const handler = createSlotchangeHandler(
+      this,
+      (event) => {
+        const slotName = event.slotName ?? "";
+        const entry = kebabToConfig.get(slotName);
+        if (!entry) return;
+        const result = validateSlotElements(entry.key, event.elements, entry.config);
+        this.reportSlotErrors(result);
+      },
+      { flatten: true }
+    );
+    handler.connect();
+    this._slotCleanups.push(() => handler.disconnect());
+  }
   async executeLifecycleCallbacks() {
     const lifecycleMethods = [
       "beforeConnect",
@@ -238,6 +472,33 @@ class BaseComponent extends HTMLElement {
   getRef() {
     return this.elementRef;
   }
+  getShadowRoot() {
+    return this.shadow;
+  }
+  executeFirstConnected() {
+    try {
+      if (this.config.firstConnected) {
+        this.config.firstConnected(this, this.shadow);
+      }
+      this.firstConnected();
+    } catch (error) {
+      this.handleError("Failed to execute firstConnected hook", error);
+    }
+  }
+  firstConnected() {
+  }
+  executeWillFirstUpdate() {
+    try {
+      if (this.config.willFirstUpdate) {
+        this.config.willFirstUpdate(this, this.shadow);
+      }
+      this.willFirstUpdate();
+    } catch (error) {
+      this.handleError("Failed to execute willFirstUpdate hook", error);
+    }
+  }
+  willFirstUpdate() {
+  }
 }
 const createCustomElement = (config) => {
   var _Component_decorators, _init, _a;
@@ -252,8 +513,27 @@ const createCustomElement = (config) => {
   __runInitializers(_init, 1, Component);
   return Component;
 };
+const defineComponent = (config, options) => {
+  let element = null;
+  return () => {
+    if (!element) {
+      element = createCustomElement(config);
+    }
+    registerComponent(config.tagName, element, options);
+  };
+};
 export {
   BaseComponent,
-  createCustomElement
+  BatchRegistrationError,
+  ComponentRegistrationError,
+  IntersectionController,
+  MediaQueryController,
+  createCustomElement,
+  defineComponent,
+  getComponentConstructor,
+  isComponentRegistered,
+  registerComponent,
+  registerComponents,
+  whenComponentDefined
 };
 //# sourceMappingURL=model.js.map