@trycourier/courier-ui-inbox 1.0.6-beta → 1.0.8-beta

package/dist/index.mjs

@@ -1,10 +1,18 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { Courier } from "@trycourier/courier-js";
+import { Courier, InboxMessageEvent } from "@trycourier/courier-js";
 var __defProp2 = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _isInitialised;
 const CourierColors = {
   black: {
     500: "#171717",
@@ -73,7 +81,52 @@ const addSystemThemeModeListener = (callback) => {
     mediaQuery.removeEventListener("change", handler);
   };
 };
-class CourierSystemThemeElement extends HTMLElement {
+const HTMLElementBase = (() => {
+  try {
+    return typeof HTMLElement === "undefined" ? class {
+    } : HTMLElement;
+  } catch {
+    return class {
+    };
+  }
+})();
+class CourierBaseElement extends HTMLElementBase {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _isInitialised, false);
+  }
+  /** Tag-name you’ll use in `customElements.define()` */
+  static get id() {
+    return "courier-base-element";
+  }
+  /* ------------------------------------------------------------------ */
+  /*  Custom-elements lifecycle hooks                                   */
+  /* ------------------------------------------------------------------ */
+  connectedCallback() {
+    var _a;
+    if (__privateGet(this, _isInitialised)) return;
+    __privateSet(this, _isInitialised, true);
+    (_a = this.onComponentMounted) == null ? void 0 : _a.call(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    __privateSet(this, _isInitialised, false);
+    (_a = this.onComponentUnmounted) == null ? void 0 : _a.call(this);
+  }
+  /* ------------------------------------------------------------------ */
+  /*  Overridable hooks                                                 */
+  /* ------------------------------------------------------------------ */
+  /** Called **once** when the element first becomes part of the DOM. */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onComponentMounted() {
+  }
+  /** Called when the element is removed from the DOM. */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onComponentUnmounted() {
+  }
+}
+_isInitialised = /* @__PURE__ */ new WeakMap();
+class CourierSystemThemeElement extends CourierBaseElement {
   constructor() {
     super();
     __publicField2(this, "_currentSystemTheme");
@@ -84,13 +137,16 @@ class CourierSystemThemeElement extends HTMLElement {
       this.onSystemThemeChange(mode);
     });
   }
+  static get id() {
+    return "courier-system-theme-element";
+  }
   get currentSystemTheme() {
     return this._currentSystemTheme;
   }
-  disconnectedCallback() {
-    if (this._systemThemeCleanup) {
-      this._systemThemeCleanup();
-    }
+  onComponentUnmounted() {
+    var _a;
+    (_a = this._systemThemeCleanup) == null ? void 0 : _a.call(this);
+    super.onComponentUnmounted();
   }
   onSystemThemeChange(_) {
   }
@@ -145,6 +201,9 @@ class CourierButton extends CourierSystemThemeElement {
       }
     });
   }
+  static get id() {
+    return "courier-button";
+  }
   getStyles(props) {
     const defaultTextColor = () => {
       const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
@@ -217,9 +276,6 @@ class CourierButton extends CourierSystemThemeElement {
     this._style.textContent = this.getStyles(props);
   }
 }
-if (!customElements.get("courier-button")) {
-  customElements.define("courier-button", CourierButton);
-}
 const CourierIconSVGs = {
   inbox: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M5.5 14.5V17C5.5 17.2812 5.71875 17.5 6 17.5H18C18.25 17.5 18.5 17.2812 18.5 17V14.5H15.9375L15.2812 15.8125C15.0938 16.25 14.6562 16.5 14.1875 16.5H9.78125C9.3125 16.5 8.875 16.25 8.6875 15.8125L8.03125 14.5H5.5ZM18.1875 13L16.6562 6.90625C16.5938 6.65625 16.4062 6.5 16.1875 6.5H7.8125C7.5625 6.5 7.375 6.65625 7.3125 6.90625L5.78125 13H8.1875C8.65625 13 9.09375 13.2812 9.3125 13.7188L9.9375 15H14.0312L14.6875 13.7188C14.875 13.2812 15.3125 13 15.7812 13H18.1875ZM4 14.25C4 14.0938 4 13.9375 4.03125 13.7812L5.84375 6.53125C6.09375 5.625 6.875 5 7.8125 5H16.1875C17.0938 5 17.9062 5.625 18.125 6.53125L19.9375 13.7812C19.9688 13.9375 20 14.0938 20 14.25V17C20 18.125 19.0938 19 18 19H6C4.875 19 4 18.125 4 17V14.25Z" fill="currentColor"/>
@@ -249,7 +305,7 @@ const CourierIconSVGs = {
 <path d="M5.5 11C5.0625 11 4.75 10.6875 4.75 10.25V5.75C4.75 5.34375 5.0625 5 5.5 5C5.90625 5 6.25 5.34375 6.25 5.75V8.28125L6.875 7.53125C8.15625 6 10.0625 5 12.25 5C16.0938 5 19.25 8.15625 19.25 12C19.25 15.875 16.0938 19 12.25 19C10.6562 19 9.21875 18.5 8.03125 17.625C7.71875 17.375 7.625 16.9062 7.875 16.5625C8.125 16.2188 8.59375 16.1562 8.9375 16.4062C9.84375 17.0938 11 17.5 12.25 17.5C15.2812 17.5 17.75 15.0625 17.75 12C17.75 8.96875 15.2812 6.5 12.25 6.5C10.5312 6.5 9.03125 7.28125 8 8.5L7.15625 9.5H10C10.4062 9.5 10.75 9.84375 10.75 10.25C10.75 10.6875 10.4062 11 10 11H5.5Z" fill="currentColor"/>
 </svg>`
 };
-class CourierIcon extends HTMLElement {
+class CourierIcon extends CourierBaseElement {
   constructor(color, svg) {
     super();
     __publicField2(this, "_color");
@@ -266,6 +322,9 @@ class CourierIcon extends HTMLElement {
     shadow.appendChild(this._style);
     this.refresh();
   }
+  static get id() {
+    return "courier-icon";
+  }
   getStyles(color) {
     return `
       :host {
@@ -300,10 +359,7 @@ class CourierIcon extends HTMLElement {
     this.refresh();
   }
 }
-if (!customElements.get("courier-icon")) {
-  customElements.define("courier-icon", CourierIcon);
-}
-class CourierLink extends HTMLElement {
+class CourierLink extends CourierBaseElement {
   constructor() {
     super();
     __publicField2(this, "link");
@@ -367,6 +423,9 @@ class CourierLink extends HTMLElement {
     this.updateUnderline();
     this.updateMode();
   }
+  static get id() {
+    return "courier-link";
+  }
   connectedCallback() {
     const slot = document.createElement("slot");
     this.link.appendChild(slot);
@@ -465,23 +524,18 @@ __publicField2(CourierLink, "observedAttributes", [
   "font-family",
   "font-size"
 ]);
-if (!customElements.get("courier-link")) {
-  customElements.define("courier-link", CourierLink);
-}
-class CourierElement extends CourierSystemThemeElement {
+class CourierFactoryElement extends CourierSystemThemeElement {
   constructor() {
     super();
-    __publicField2(this, "shadow");
-    this.shadow = this.attachShadow({ mode: "open" });
   }
   // Build the element with a factory function
   build(newElement) {
     if (newElement === null) {
-      this.shadow.replaceChildren();
+      this.replaceChildren();
       return;
     }
     const element = newElement ?? this.defaultElement();
-    this.shadow.replaceChildren(element);
+    this.replaceChildren(element);
   }
   // Default element to be used if no factory is provided
   defaultElement() {
@@ -495,7 +549,7 @@ class CourierElement extends CourierSystemThemeElement {
     return element;
   }
 }
-class CourierInfoState extends CourierElement {
+class CourierInfoState extends CourierFactoryElement {
   constructor(props) {
     super();
     __publicField2(this, "_props");
@@ -505,6 +559,9 @@ class CourierInfoState extends CourierElement {
     __publicField2(this, "_buttonClickCallback", null);
     this._props = props;
   }
+  static get id() {
+    return "courier-info-state";
+  }
   defaultElement() {
     var _a, _b;
     const container = document.createElement("div");
@@ -519,7 +576,7 @@ class CourierInfoState extends CourierElement {
     container.appendChild(this._style);
     container.appendChild(this._title);
     container.appendChild(this._button);
-    this.shadow.appendChild(container);
+    this.appendChild(container);
     (_b = this._button) == null ? void 0 : _b.addEventListener("click", () => {
       if (this._buttonClickCallback) {
         this._buttonClickCallback();
@@ -549,6 +606,8 @@ class CourierInfoState extends CourierElement {
         gap: 16px;
         text-align: center;
         padding: 24px;
+        box-sizing: border-box;
+        height: 100%;
       }
 
       .container h2 {
@@ -573,10 +632,7 @@ class CourierInfoState extends CourierElement {
     this._buttonClickCallback = callback;
   }
 }
-if (!customElements.get("courier-info-state")) {
-  customElements.define("courier-info-state", CourierInfoState);
-}
-class CourierIconButton extends HTMLElement {
+class CourierIconButton extends CourierBaseElement {
   constructor(svg, color, backgroundColor, hoverBackgroundColor, activeBackgroundColor, borderRadius, height, width) {
     super();
     __publicField2(this, "_backgroundColor");
@@ -604,6 +660,9 @@ class CourierIconButton extends HTMLElement {
     this._button.appendChild(this._icon);
     shadow.appendChild(this._button);
   }
+  static get id() {
+    return "courier-icon-button";
+  }
   refresh() {
     this._style.textContent = this.getStyles();
   }
@@ -669,21 +728,29 @@ class CourierIconButton extends HTMLElement {
     this.refresh();
   }
 }
-if (!customElements.get("courier-icon-button")) {
-  customElements.define("courier-icon-button", CourierIconButton);
+function registerElement(element) {
+  if (typeof window !== "undefined" && !customElements.get(element.id)) {
+    customElements.define(element.id, element);
+  }
+}
+function injectGlobalStyle(styleId, styles) {
+  const selector = `style[data-${styleId}]`;
+  const existingStyle = document.querySelector(selector);
+  if (!existingStyle) {
+    const style = document.createElement("style");
+    style.setAttribute(`data-${styleId}`, "");
+    style.textContent = styles;
+    document.head.appendChild(style);
+    return style;
+  }
+  return existingStyle;
 }
-const components = [
-  { name: "courier-button", class: CourierButton },
-  { name: "courier-icon", class: CourierIcon },
-  { name: "courier-link", class: CourierLink },
-  { name: "courier-info-state", class: CourierInfoState },
-  { name: "courier-icon-button", class: CourierIconButton }
-];
-components.forEach(({ name, class: componentClass }) => {
-  if (!customElements.get(name)) {
-    customElements.define(name, componentClass);
-  }
-});
+registerElement(CourierButton);
+registerElement(CourierIcon);
+registerElement(CourierLink);
+registerElement(CourierInfoState);
+registerElement(CourierIconButton);
+registerElement(CourierSystemThemeElement);
 function copyMessage(message) {
   const copy = {
     ...message
@@ -712,6 +779,9 @@ function copyInboxAction(action) {
   return copy;
 }
 function copyInboxDataSet(dataSet) {
+  if (!dataSet) {
+    return void 0;
+  }
   return {
     ...dataSet,
     messages: dataSet.messages.map((message) => copyMessage(message))
@@ -722,6 +792,7 @@ function getMessageTime(message) {
   const now = /* @__PURE__ */ new Date();
   const messageDate = new Date(message.created);
   const diffInSeconds = Math.floor((now.getTime() - messageDate.getTime()) / 1e3);
+  if (diffInSeconds < 5) return "Now";
   if (diffInSeconds < 60) return `${diffInSeconds}s`;
   if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m`;
   if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h`;
@@ -729,29 +800,28 @@ function getMessageTime(message) {
   if (diffInSeconds < 31536e3) return `${Math.floor(diffInSeconds / 604800)}w`;
   return `${Math.floor(diffInSeconds / 31536e3)}y`;
 }
-class CourierListItemActionMenu extends HTMLElement {
+class CourierInboxListItemMenu extends CourierBaseElement {
   constructor(theme2) {
     super();
     // State
     __publicField(this, "_theme");
     __publicField(this, "_options", []);
-    // Components
-    __publicField(this, "_style");
     this._theme = theme2;
-    const shadow = this.attachShadow({ mode: "open" });
-    this._style = document.createElement("style");
-    this._style.textContent = this.getStyles();
-    shadow.appendChild(this._style);
+  }
+  static get id() {
+    return "courier-inbox-list-item-menu";
+  }
+  onComponentMounted() {
     const menu = document.createElement("ul");
     menu.className = "menu";
-    shadow.appendChild(menu);
+    this.appendChild(menu);
   }
-  getStyles() {
+  static getStyles(theme2) {
     var _a, _b, _c;
-    const menu = (_c = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item) == null ? void 0 : _c.menu;
+    const menu = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item) == null ? void 0 : _c.menu;
     return `
-      :host {
-        display: block;
+      ${CourierInboxListItemMenu.id} {
+        display: none;
         position: absolute;
         background: ${(menu == null ? void 0 : menu.backgroundColor) ?? "red"};
         border: ${(menu == null ? void 0 : menu.border) ?? "1px solid red"};
@@ -764,12 +834,13 @@ class CourierListItemActionMenu extends HTMLElement {
         overflow: hidden;
       }
 
-      :host(.visible) {
+      ${CourierInboxListItemMenu.id}.visible {
+        display: block;
         opacity: 1;
         pointer-events: auto;
       }
 
-      ul.menu {
+      ${CourierInboxListItemMenu.id} ul.menu {
         list-style: none;
         margin: 0;
         padding: 0;
@@ -777,7 +848,7 @@ class CourierListItemActionMenu extends HTMLElement {
         flex-direction: row;
       }
 
-      li.menu-item {
+      ${CourierInboxListItemMenu.id} li.menu-item {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -792,11 +863,11 @@ class CourierListItemActionMenu extends HTMLElement {
     this.renderMenu();
   }
   renderMenu() {
-    var _a, _b, _c, _d;
-    const menu = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("ul.menu");
+    var _a, _b, _c;
+    const menu = this.querySelector("ul.menu");
     if (!menu) return;
     menu.innerHTML = "";
-    const menuTheme = (_d = (_c = (_b = this._theme.inbox) == null ? void 0 : _b.list) == null ? void 0 : _c.item) == null ? void 0 : _d.menu;
+    const menuTheme = (_c = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item) == null ? void 0 : _c.menu;
     const cancelEvent = (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -818,15 +889,15 @@ class CourierListItemActionMenu extends HTMLElement {
     });
   }
   show() {
+    this.style.display = "block";
     this.classList.add("visible");
   }
   hide() {
+    this.style.display = "none";
     this.classList.remove("visible");
   }
 }
-if (!customElements.get("courier-list-item-menu")) {
-  customElements.define("courier-list-item-menu", CourierListItemActionMenu);
-}
+registerElement(CourierInboxListItemMenu);
 const _CourierInboxDatastore = class _CourierInboxDatastore {
   constructor() {
     __publicField(this, "_inboxDataSet");
@@ -857,28 +928,22 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
   removeDataStoreListener(listener) {
     this._dataStoreListeners = this._dataStoreListeners.filter((l) => l !== listener);
   }
-  async fetchDataSet(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  async fetchCachableDataSet(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (props.canUseCache) {
-      switch (props.feedType) {
-        case "inbox":
-          if (this._inboxDataSet) {
-            return this._inboxDataSet;
-          }
-          break;
-        case "archive":
-          if (this._archiveDataSet) {
-            return this._archiveDataSet;
-          }
-          break;
+      if (props.feedType === "inbox" && this._inboxDataSet) {
+        return this._inboxDataSet;
+      }
+      if (props.feedType === "archive" && this._archiveDataSet) {
+        return this._archiveDataSet;
       }
     }
-    const response = props.feedType === "inbox" ? await ((_a = Courier.shared.client) == null ? void 0 : _a.inbox.getMessages()) : await ((_b = Courier.shared.client) == null ? void 0 : _b.inbox.getArchivedMessages());
+    const response = await props.fetch;
     return {
       feedType: props.feedType,
-      messages: ((_d = (_c = response == null ? void 0 : response.data) == null ? void 0 : _c.messages) == null ? void 0 : _d.nodes) ?? [],
-      canPaginate: ((_g = (_f = (_e = response == null ? void 0 : response.data) == null ? void 0 : _e.messages) == null ? void 0 : _f.pageInfo) == null ? void 0 : _g.hasNextPage) ?? false,
-      paginationCursor: ((_j = (_i = (_h = response == null ? void 0 : response.data) == null ? void 0 : _h.messages) == null ? void 0 : _i.pageInfo) == null ? void 0 : _j.startCursor) ?? null
+      messages: ((_b = (_a = response.data) == null ? void 0 : _a.messages) == null ? void 0 : _b.nodes) ?? [],
+      canPaginate: ((_e = (_d = (_c = response.data) == null ? void 0 : _c.messages) == null ? void 0 : _d.pageInfo) == null ? void 0 : _e.hasNextPage) ?? false,
+      paginationCursor: ((_h = (_g = (_f = response.data) == null ? void 0 : _f.messages) == null ? void 0 : _g.pageInfo) == null ? void 0 : _h.startCursor) ?? null
     };
   }
   async fetchUnreadCount(props) {
@@ -890,43 +955,43 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
     return unreadCount ?? 0;
   }
   async load(props) {
-    var _a, _b, _c;
+    var _a, _b;
     try {
-      if (!((_a = Courier.shared.client) == null ? void 0 : _a.options.userId)) {
+      const client = Courier.shared.client;
+      if (!(client == null ? void 0 : client.options.userId)) {
         throw new Error("User is not signed in");
       }
-      const properties = props ?? { feedType: "inbox", canUseCache: true };
-      const [dataSet, unreadCount] = await Promise.all([
-        this.fetchDataSet(properties),
+      const properties = props ?? { canUseCache: true };
+      const [inboxDataSet, archiveDataSet, unreadCount] = await Promise.all([
+        this.fetchCachableDataSet({ fetch: client.inbox.getMessages(), feedType: "inbox", canUseCache: properties.canUseCache }),
+        this.fetchCachableDataSet({ fetch: client.inbox.getArchivedMessages(), feedType: "archive", canUseCache: properties.canUseCache }),
         this.fetchUnreadCount(properties)
       ]);
-      switch (properties.feedType) {
-        case "inbox":
-          this._inboxDataSet = dataSet;
-          break;
-        case "archive":
-          this._archiveDataSet = dataSet;
-          break;
-      }
+      this._inboxDataSet = inboxDataSet;
+      this._archiveDataSet = archiveDataSet;
       this._unreadCount = unreadCount;
       this._dataStoreListeners.forEach((listener) => {
-        var _a2, _b2, _c2, _d;
-        (_b2 = (_a2 = listener.events).onDataSetChange) == null ? void 0 : _b2.call(_a2, dataSet, properties.feedType);
-        (_d = (_c2 = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c2, this._unreadCount ?? 0);
+        var _a2, _b2, _c, _d, _e, _f;
+        if (this._inboxDataSet) {
+          (_b2 = (_a2 = listener.events).onDataSetChange) == null ? void 0 : _b2.call(_a2, this._inboxDataSet, "inbox");
+        }
+        if (this._archiveDataSet) {
+          (_d = (_c = listener.events).onDataSetChange) == null ? void 0 : _d.call(_c, this._archiveDataSet, "archive");
+        }
+        (_f = (_e = listener.events).onUnreadCountChange) == null ? void 0 : _f.call(_e, this._unreadCount ?? 0);
       });
     } catch (error) {
-      (_c = (_b = Courier.shared.client) == null ? void 0 : _b.options.logger) == null ? void 0 : _c.error("Error loading inbox:", error);
+      (_b = (_a = Courier.shared.client) == null ? void 0 : _a.options.logger) == null ? void 0 : _b.error("Error loading inbox:", error);
       this._dataStoreListeners.forEach((listener) => {
         var _a2, _b2;
         (_b2 = (_a2 = listener.events).onError) == null ? void 0 : _b2.call(_a2, error);
       });
     }
   }
-  /** Listen for inbox and archive dataset updates. */
+  // Connect the socket
   async listenForUpdates() {
     var _a, _b;
     try {
-      await this.ensureDataSetsLoaded();
       await this.connectSocket();
     } catch (error) {
       (_b = (_a = Courier.shared.client) == null ? void 0 : _a.options.logger) == null ? void 0 : _b.error("Error listening for updates:", error);
@@ -936,85 +1001,73 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
       });
     }
   }
-  /** Fetch either/both datasets if they aren't already loaded. */
-  async ensureDataSetsLoaded() {
-    let dataSetPromises = [];
-    if (!this._inboxDataSet) {
-      dataSetPromises.push(this.load({ feedType: "inbox", canUseCache: true }));
-    }
-    if (!this._archiveDataSet) {
-      dataSetPromises.push(this.load({ feedType: "archive", canUseCache: true }));
-    }
-    await Promise.all(dataSetPromises);
-  }
   async connectSocket() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     const socket = (_a = Courier.shared.client) == null ? void 0 : _a.inbox.socket;
     try {
       if (!socket) {
         (_c = (_b = Courier.shared.client) == null ? void 0 : _b.options.logger) == null ? void 0 : _c.info("CourierInbox socket not available");
         return;
       }
-      (_f = (_d = Courier.shared.client) == null ? void 0 : _d.options.logger) == null ? void 0 : _f.info("CourierInbox socket connectionId:", (_e = Courier.shared.client) == null ? void 0 : _e.options.connectionId);
-      if (socket.isConnected) {
-        (_h = (_g = Courier.shared.client) == null ? void 0 : _g.options.logger) == null ? void 0 : _h.info("CourierInbox socket already connected. Socket will not attempt reconnection.");
+      if (socket.isConnecting || socket.isOpen) {
+        (_f = (_d = Courier.shared.client) == null ? void 0 : _d.options.logger) == null ? void 0 : _f.info(`Inbox socket already connecting or open for client ID: [${(_e = Courier.shared.client) == null ? void 0 : _e.options.connectionId}]`);
         return;
       }
-      socket.receivedMessage = (message) => {
-        this.addMessage(message, 0, "inbox");
-      };
-      socket.receivedMessageEvent = (event) => {
-        let message;
-        if (event.messageId) {
-          message = this.getMessage({ messageId: event.messageId });
+      socket.addMessageEventListener((event) => {
+        if (event.event === InboxMessageEvent.NewMessage) {
+          const message2 = event.data;
+          this.addMessage(message2, 0, "inbox");
+          return;
         }
+        const message = this.getMessage({ messageId: event.messageId });
         switch (event.event) {
-          case "mark-all-read":
+          case InboxMessageEvent.MarkAllRead:
             this.readAllMessages({ canCallApi: false });
             break;
-          case "read":
+          case InboxMessageEvent.Read:
             if (message) {
               this.readMessage({ message, canCallApi: false });
             }
             break;
-          case "unread":
+          case InboxMessageEvent.Unread:
             if (message) {
               this.unreadMessage({ message, canCallApi: false });
             }
             break;
-          case "opened":
+          case InboxMessageEvent.Opened:
             if (message) {
               this.openMessage({ message, canCallApi: false });
             }
             break;
-          case "archive":
+          case InboxMessageEvent.Archive:
             if (message) {
               this.archiveMessage({ message, canCallApi: false });
             }
             break;
-          case "archive-read":
+          case InboxMessageEvent.ArchiveRead:
             this.archiveReadMessages({ canCallApi: false });
             break;
-          case "click":
+          case InboxMessageEvent.ArchiveAll:
+            this.archiveAllMessages({ canCallApi: false });
+            break;
+          case InboxMessageEvent.Clicked:
             if (message) {
               this.clickMessage({ message, canCallApi: false });
             }
             break;
-          case "unarchive":
+          case InboxMessageEvent.Unarchive:
             if (message) {
               this.unarchiveMessage({ message, canCallApi: false });
             }
             break;
-          case "unopened":
+          case InboxMessageEvent.Unopened:
             break;
         }
-      };
+      });
       await socket.connect();
-      await socket.sendSubscribe();
-      socket.keepAlive();
-      (_j = (_i = Courier.shared.client) == null ? void 0 : _i.options.logger) == null ? void 0 : _j.info("CourierInbox socket connected");
+      (_i = (_g = Courier.shared.client) == null ? void 0 : _g.options.logger) == null ? void 0 : _i.info(`Inbox socket connected for client ID: [${(_h = Courier.shared.client) == null ? void 0 : _h.options.connectionId}]`);
     } catch (error) {
-      (_l = (_k = Courier.shared.client) == null ? void 0 : _k.options.logger) == null ? void 0 : _l.error("Failed to connect socket:", error);
+      (_k = (_j = Courier.shared.client) == null ? void 0 : _j.options.logger) == null ? void 0 : _k.error("Failed to connect socket:", error);
     }
   }
   /**
@@ -1024,6 +1077,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
    */
   getMessage(props) {
     var _a, _b;
+    if (!props.messageId) {
+      return void 0;
+    }
     return ((_a = this._inboxDataSet) == null ? void 0 : _a.messages.find((m) => m.messageId === props.messageId)) ?? ((_b = this._archiveDataSet) == null ? void 0 : _b.messages.find((m) => m.messageId === props.messageId));
   }
   /**
@@ -1451,8 +1507,12 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
     this._archiveDataSet = archive;
     this._dataStoreListeners.forEach((listener) => {
       var _a, _b, _c, _d, _e, _f;
-      (_b = (_a = listener.events).onDataSetChange) == null ? void 0 : _b.call(_a, inbox, "inbox");
-      (_d = (_c = listener.events).onDataSetChange) == null ? void 0 : _d.call(_c, archive, "archive");
+      if (this._inboxDataSet) {
+        (_b = (_a = listener.events).onDataSetChange) == null ? void 0 : _b.call(_a, this._inboxDataSet, "inbox");
+      }
+      if (this._archiveDataSet) {
+        (_d = (_c = listener.events).onDataSetChange) == null ? void 0 : _d.call(_c, this._archiveDataSet, "archive");
+      }
       (_f = (_e = listener.events).onUnreadCountChange) == null ? void 0 : _f.call(_e, unreadCount);
     });
   }
@@ -1518,7 +1578,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
 };
 __publicField(_CourierInboxDatastore, "instance");
 let CourierInboxDatastore = _CourierInboxDatastore;
-class CourierListItem extends HTMLElement {
+class CourierInboxListItem extends CourierBaseElement {
   constructor(theme2) {
     super();
     // State
@@ -1530,7 +1590,6 @@ class CourierListItem extends HTMLElement {
     __publicField(this, "_titleElement");
     __publicField(this, "_subtitleElement");
     __publicField(this, "_timeElement");
-    __publicField(this, "_style");
     __publicField(this, "_menu");
     __publicField(this, "_unreadIndicator");
     __publicField(this, "_actionsContainer");
@@ -1543,27 +1602,30 @@ class CourierListItem extends HTMLElement {
     __publicField(this, "onItemActionClick", null);
     this._theme = theme2;
     this._isMobile = "ontouchstart" in window;
-    const shadow = this.attachShadow({ mode: "open" });
+    this.render();
+  }
+  static get id() {
+    return "courier-inbox-list-item";
+  }
+  render() {
     const contentContainer = document.createElement("div");
     contentContainer.className = "content-container";
     this._titleElement = document.createElement("p");
-    this._titleElement.setAttribute("part", "title");
+    this._titleElement.className = "title";
     this._subtitleElement = document.createElement("p");
-    this._subtitleElement.setAttribute("part", "subtitle");
+    this._subtitleElement.className = "subtitle";
     this._actionsContainer = document.createElement("div");
     this._actionsContainer.className = "actions-container";
     contentContainer.appendChild(this._titleElement);
     contentContainer.appendChild(this._subtitleElement);
     contentContainer.appendChild(this._actionsContainer);
     this._timeElement = document.createElement("p");
-    this._timeElement.setAttribute("part", "time");
+    this._timeElement.className = "time";
     this._unreadIndicator = document.createElement("div");
     this._unreadIndicator.className = "unread-indicator";
-    this._style = document.createElement("style");
-    this._refreshStyles();
-    this._menu = new CourierListItemActionMenu(this._theme);
+    this._menu = new CourierInboxListItemMenu(this._theme);
     this._menu.setOptions(this._getMenuOptions());
-    shadow.append(this._style, this._unreadIndicator, contentContainer, this._timeElement, this._menu);
+    this.append(this._unreadIndicator, contentContainer, this._timeElement, this._menu);
     const cancelPropagation = (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -1572,7 +1634,7 @@ class CourierListItem extends HTMLElement {
     this._menu.addEventListener("pointerdown", cancelPropagation);
     this._menu.addEventListener("click", cancelPropagation);
     this.addEventListener("click", (e) => {
-      if (this._menu.contains(e.target) || e.composedPath().includes(this._menu)) {
+      if (this._menu && (this._menu.contains(e.target) || e.composedPath().includes(this._menu))) {
         return;
       }
       if (this._message && this.onItemClick && !(e.target instanceof CourierIcon) && !this._isLongPress) {
@@ -1582,6 +1644,133 @@ class CourierListItem extends HTMLElement {
     this._setupHoverBehavior();
     this._setupLongPressBehavior();
   }
+  static getStyles(theme2) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+    const list = (_a = theme2.inbox) == null ? void 0 : _a.list;
+    return `
+      ${CourierInboxListItem.id} {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+        border-bottom: ${((_b = list == null ? void 0 : list.item) == null ? void 0 : _b.divider) ?? "1px solid red"};
+        font-family: inherit;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+        margin: 0;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 12px 20px;
+        position: relative;
+        background-color: ${((_c = list == null ? void 0 : list.item) == null ? void 0 : _c.backgroundColor) ?? "transparent"};
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        touch-action: manipulation;
+      }
+
+      /* Base hover / active */
+      @media (hover: hover) {
+        ${CourierInboxListItem.id}:hover {
+          background-color: ${((_d = list == null ? void 0 : list.item) == null ? void 0 : _d.hoverBackgroundColor) ?? "red"};
+        }
+      }
+
+      ${CourierInboxListItem.id}:active {
+        background-color: ${((_e = list == null ? void 0 : list.item) == null ? void 0 : _e.activeBackgroundColor) ?? "red"};
+      }
+
+      /* Menu hover / active */
+      @media (hover: hover) {
+        ${CourierInboxListItem.id}:hover:has(courier-inbox-list-item-menu:hover, courier-inbox-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {
+          background-color: ${((_f = list == null ? void 0 : list.item) == null ? void 0 : _f.backgroundColor) ?? "transparent"};
+        }
+      }
+
+      ${CourierInboxListItem.id}:active:has(courier-inbox-list-item-menu:active, courier-inbox-list-item-menu *:active, courier-button:active, courier-button *:active) {
+        background-color: ${((_g = list == null ? void 0 : list.item) == null ? void 0 : _g.backgroundColor) ?? "transparent"};
+      }
+
+      ${CourierInboxListItem.id}:last-child {
+        border-bottom: none;
+      }
+
+      ${CourierInboxListItem.id} .unread-indicator {
+        position: absolute;
+        top: 28px;
+        left: 6px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: ${((_h = list == null ? void 0 : list.item) == null ? void 0 : _h.unreadIndicatorColor) ?? "red"};
+        display: none;
+      }
+
+      ${CourierInboxListItem.id}.unread .unread-indicator {
+        display: block;
+      }
+
+      ${CourierInboxListItem.id} .content-container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        margin-right: 12px;
+      }
+
+      ${CourierInboxListItem.id} p {
+        margin: 0;
+        overflow-wrap: break-word;
+        word-break: break-word;
+        hyphens: auto;
+        line-height: 1.4;
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        text-align: left;
+      }
+
+      ${CourierInboxListItem.id} .title {
+        font-family: ${((_j = (_i = list == null ? void 0 : list.item) == null ? void 0 : _i.title) == null ? void 0 : _j.family) ?? "inherit"};
+        font-size: ${((_l = (_k = list == null ? void 0 : list.item) == null ? void 0 : _k.title) == null ? void 0 : _l.size) ?? "14px"};
+        color: ${((_n = (_m = list == null ? void 0 : list.item) == null ? void 0 : _m.title) == null ? void 0 : _n.color) ?? "red"};
+        margin-bottom: 4px;
+      }
+
+      ${CourierInboxListItem.id} .subtitle {
+        font-family: ${((_p = (_o = list == null ? void 0 : list.item) == null ? void 0 : _o.subtitle) == null ? void 0 : _p.family) ?? "inherit"};
+        font-size: ${((_r = (_q = list == null ? void 0 : list.item) == null ? void 0 : _q.subtitle) == null ? void 0 : _r.size) ?? "14px"};
+        color: ${((_t = (_s = list == null ? void 0 : list.item) == null ? void 0 : _s.subtitle) == null ? void 0 : _t.color) ?? "red"};
+      }
+
+      ${CourierInboxListItem.id} .time {
+        font-family: ${((_v = (_u = list == null ? void 0 : list.item) == null ? void 0 : _u.time) == null ? void 0 : _v.family) ?? "inherit"};
+        font-size: ${((_x = (_w = list == null ? void 0 : list.item) == null ? void 0 : _w.time) == null ? void 0 : _x.size) ?? "14px"};
+        color: ${((_z = (_y = list == null ? void 0 : list.item) == null ? void 0 : _y.time) == null ? void 0 : _z.color) ?? "red"};
+        text-align: right;
+        white-space: nowrap;
+      }
+
+      ${CourierInboxListItem.id} courier-inbox-list-item-menu {
+        z-index: 1;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        display: none;
+      }
+
+      ${CourierInboxListItem.id} .actions-container {
+        display: flex;
+        margin-top: 10px;
+        flex-wrap: wrap;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        display: none;
+      }
+    `;
+  }
   _setupHoverBehavior() {
     if (!this._isMobile) {
       this.addEventListener("mouseenter", () => {
@@ -1674,7 +1863,7 @@ class CourierListItem extends HTMLElement {
   _showMenu() {
     var _a, _b, _c;
     const menu = (_c = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item) == null ? void 0 : _c.menu;
-    if (menu && menu.enabled) {
+    if (menu && menu.enabled && this._menu && this._timeElement) {
       this._menu.setOptions(this._getMenuOptions());
       this._menu.style.display = "block";
       this._menu.show();
@@ -1684,158 +1873,12 @@ class CourierListItem extends HTMLElement {
   _hideMenu() {
     var _a, _b, _c;
     const menu = (_c = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item) == null ? void 0 : _c.menu;
-    if (menu && menu.enabled) {
+    if (menu && menu.enabled && this._menu && this._timeElement) {
       this._menu.hide();
       this._menu.style.display = "none";
       this._timeElement.style.opacity = "1";
     }
   }
-  _getStyles() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-    const listItem = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item;
-    return `
-      :host {
-        display: flex;
-        flex-direction: row;
-        align-items: flex-start;
-        justify-content: space-between;
-        border-bottom: ${(listItem == null ? void 0 : listItem.divider) ?? "1px solid red"};
-        font-family: inherit;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-        margin: 0;
-        width: 100%;
-        box-sizing: border-box;
-        padding: 12px 20px;
-        position: relative;
-        background-color: ${(listItem == null ? void 0 : listItem.backgroundColor) ?? "transparent"};
-        user-select: none;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        touch-action: manipulation;
-      }
-
-      /* ───────────────────────── Base hover / active ────────────────── */
-      @media (hover: hover) {
-        :host(:hover) {
-          background-color: ${(listItem == null ? void 0 : listItem.hoverBackgroundColor) ?? "red"};
-        }
-      }
-      :host(:active) {
-        background-color: ${(listItem == null ? void 0 : listItem.activeBackgroundColor) ?? "red"};
-      }
-
-      /* ───────────────────────── Menu hover / active ────────────────── */
-      @media (hover: hover) {
-        :host(:hover):has(courier-list-item-menu:hover, courier-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {
-          background-color: ${(listItem == null ? void 0 : listItem.backgroundColor) ?? "transparent"};
-        }
-      }
-      :host(:active):has(courier-list-item-menu:active, courier-list-item-menu *:active, courier-button:active, courier-button *:active) {
-        background-color: ${(listItem == null ? void 0 : listItem.backgroundColor) ?? "transparent"};
-      }
-
-      :host(:last-child) {
-        border-bottom: none;
-      }
-
-      .unread-indicator {
-        position: absolute;
-        top: 28px;
-        left: 6px;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background-color: ${(listItem == null ? void 0 : listItem.unreadIndicatorColor) ?? "red"};
-        display: none;
-      }
-
-      :host(.unread) .unread-indicator {
-        display: block;
-      }
-
-      .content-container {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        margin-right: 12px;
-      }
-
-      p {
-        margin: 0;
-        overflow-wrap: break-word;
-        word-break: break-word;
-        hyphens: auto;
-        line-height: 1.4;
-        user-select: none;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        text-align: left;
-      }
-
-      p[part='title'] {
-        font-family: ${((_c = listItem == null ? void 0 : listItem.title) == null ? void 0 : _c.family) ?? "inherit"};
-        font-size: ${((_d = listItem == null ? void 0 : listItem.title) == null ? void 0 : _d.size) ?? "14px"};
-        color: ${((_e = listItem == null ? void 0 : listItem.title) == null ? void 0 : _e.color) ?? "red"};
-        margin-bottom: 4px;
-      }
-
-      p[part='subtitle'] {
-        font-family: ${((_f = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _f.family) ?? "inherit"};
-        font-size: ${((_g = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _g.size) ?? "14px"};
-        color: ${((_h = listItem == null ? void 0 : listItem.subtitle) == null ? void 0 : _h.color) ?? "red"};
-      }
-
-      p[part='time'] {
-        font-family: ${((_i = listItem == null ? void 0 : listItem.time) == null ? void 0 : _i.family) ?? "inherit"};
-        font-size: ${((_j = listItem == null ? void 0 : listItem.time) == null ? void 0 : _j.size) ?? "14px"};
-        color: ${((_k = listItem == null ? void 0 : listItem.time) == null ? void 0 : _k.color) ?? "red"};
-        text-align: right;
-        white-space: nowrap;
-      }
-
-      courier-list-item-menu {
-        z-index: 1;
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        display: none; /* becomes block while visible */
-      }
-
-      .actions-container {
-        display: flex;
-        margin-top: 10px;
-        flex-wrap: wrap;
-        flex-direction: row;
-        align-items: center;
-        gap: 8px;
-        display: none;
-      }
-
-    `;
-  }
-  _refreshStyles() {
-    this._style.textContent = this._getStyles();
-  }
-  // Lifecycle hooks
-  connectedCallback() {
-    var _a, _b;
-    const messageAttr = this.getAttribute("message");
-    const feedTypeAttr = this.getAttribute("feed-type");
-    if (feedTypeAttr) {
-      this._feedType = feedTypeAttr;
-    }
-    if (messageAttr) {
-      try {
-        this._message = JSON.parse(messageAttr);
-        this._updateContent();
-      } catch (err) {
-        (_b = (_a = Courier.shared.client) == null ? void 0 : _a.options.logger) == null ? void 0 : _b.error("CourierListItem – failed to parse message:", err);
-      }
-    }
-  }
   // Public API
   setMessage(message, feedType) {
     this._message = message;
@@ -1853,94 +1896,134 @@ class CourierListItem extends HTMLElement {
   }
   // Content rendering
   _updateContent() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c;
     if (!this._message) {
-      this._titleElement.textContent = "";
-      this._subtitleElement.textContent = "";
+      if (this._titleElement) this._titleElement.textContent = "";
+      if (this._subtitleElement) this._subtitleElement.textContent = "";
       return;
     }
     this.classList.toggle("unread", !this._message.read && this._feedType !== "archive");
-    this._titleElement.textContent = this._message.title || "Untitled Message";
-    this._subtitleElement.textContent = this._message.preview || this._message.body || "";
-    this._timeElement.textContent = getMessageTime(this._message);
-    this._menu.setOptions(this._getMenuOptions());
-    const hasActions = ((_a = this._message) == null ? void 0 : _a.actions) && this._message.actions.length > 0;
-    this._actionsContainer.style.display = hasActions ? "flex" : "none";
-    const actionsTheme = (_d = (_c = (_b = this._theme.inbox) == null ? void 0 : _b.list) == null ? void 0 : _c.item) == null ? void 0 : _d.actions;
-    (_f = (_e = this._message) == null ? void 0 : _e.actions) == null ? void 0 : _f.forEach((action) => {
-      var _a2, _b2, _c2, _d2;
-      const actionButton = new CourierButton({
-        text: action.content,
-        variant: "secondary",
-        backgroundColor: actionsTheme == null ? void 0 : actionsTheme.backgroundColor,
-        hoverBackgroundColor: actionsTheme == null ? void 0 : actionsTheme.hoverBackgroundColor,
-        activeBackgroundColor: actionsTheme == null ? void 0 : actionsTheme.activeBackgroundColor,
-        border: actionsTheme == null ? void 0 : actionsTheme.border,
-        borderRadius: actionsTheme == null ? void 0 : actionsTheme.borderRadius,
-        shadow: actionsTheme == null ? void 0 : actionsTheme.shadow,
-        fontFamily: (_a2 = actionsTheme == null ? void 0 : actionsTheme.font) == null ? void 0 : _a2.family,
-        fontSize: (_b2 = actionsTheme == null ? void 0 : actionsTheme.font) == null ? void 0 : _b2.size,
-        fontWeight: (_c2 = actionsTheme == null ? void 0 : actionsTheme.font) == null ? void 0 : _c2.weight,
-        textColor: (_d2 = actionsTheme == null ? void 0 : actionsTheme.font) == null ? void 0 : _d2.color,
-        onClick: () => {
-          if (this._message && this.onItemActionClick) {
-            this.onItemActionClick(this._message, action);
+    if (this._titleElement) {
+      this._titleElement.textContent = this._message.title || "Untitled Message";
+    }
+    if (this._subtitleElement) {
+      this._subtitleElement.textContent = this._message.preview || this._message.body || "";
+    }
+    if (this._timeElement) {
+      this._timeElement.textContent = getMessageTime(this._message);
+    }
+    if (this._menu) {
+      this._menu.setOptions(this._getMenuOptions());
+    }
+    const hasActions = this._message.actions && this._message.actions.length > 0;
+    if (this._actionsContainer) {
+      this._actionsContainer.style.display = hasActions ? "flex" : "none";
+    }
+    const actionsTheme = (_c = (_b = (_a = this._theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item) == null ? void 0 : _c.actions;
+    if (this._actionsContainer && this._message.actions) {
+      this._message.actions.forEach((action) => {
+        var _a2, _b2, _c2, _d, _e;
+        const actionButton = new CourierButton({
+          text: action.content,
+          variant: "secondary",
+          backgroundColor: actionsTheme == null ? void 0 : actionsTheme.backgroundColor,
+          hoverBackgroundColor: actionsTheme == null ? void 0 : actionsTheme.hoverBackgroundColor,
+          activeBackgroundColor: actionsTheme == null ? void 0 : actionsTheme.activeBackgroundColor,
+          border: actionsTheme == null ? void 0 : actionsTheme.border,
+          borderRadius: actionsTheme == null ? void 0 : actionsTheme.borderRadius,
+          shadow: actionsTheme == null ? void 0 : actionsTheme.shadow,
+          fontFamily: (_a2 = actionsTheme == null ? void 0 : actionsTheme.font) == null ? void 0 : _a2.family,
+          fontSize: (_b2 = actionsTheme == null ? void 0 : actionsTheme.font) == null ? void 0 : _b2.size,
+          fontWeight: (_c2 = actionsTheme == null ? void 0 : actionsTheme.font) == null ? void 0 : _c2.weight,
+          textColor: (_d = actionsTheme == null ? void 0 : actionsTheme.font) == null ? void 0 : _d.color,
+          onClick: () => {
+            if (this._message && this.onItemActionClick) {
+              this.onItemActionClick(this._message, action);
+            }
           }
-        }
+        });
+        (_e = this._actionsContainer) == null ? void 0 : _e.appendChild(actionButton);
       });
-      this._actionsContainer.appendChild(actionButton);
-    });
+    }
   }
 }
-if (!customElements.get("courier-list-item")) {
-  customElements.define("courier-list-item", CourierListItem);
-}
-class CourierInboxSkeletonListItem extends HTMLElement {
-  constructor(theme2, opacity) {
+registerElement(CourierInboxListItem);
+class CourierInboxSkeletonListItem extends CourierBaseElement {
+  constructor(theme2) {
     super();
-    // Shadow root
-    __publicField(this, "_shadow");
-    this._shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = this.getStyles(opacity);
-    this._shadow.appendChild(style);
-    const firstRow = new CourierSkeletonAnimatedRow(theme2, 35);
-    const secondRow = new CourierSkeletonAnimatedRow(theme2, 100);
-    const thirdRow = new CourierSkeletonAnimatedRow(theme2, 82);
-    this._shadow.appendChild(firstRow);
-    this._shadow.appendChild(secondRow);
-    this._shadow.appendChild(thirdRow);
-  }
-  getStyles(opacity) {
+    __publicField(this, "_theme");
+    __publicField(this, "_style");
+    this._theme = theme2;
+  }
+  static get id() {
+    return "courier-inbox-skeleton-list-item";
+  }
+  onComponentMounted() {
+    this._style = injectGlobalStyle(CourierInboxSkeletonListItem.id, CourierInboxSkeletonListItem.getStyles(this._theme));
+    this.render();
+  }
+  onComponentUnmounted() {
+    var _a;
+    (_a = this._style) == null ? void 0 : _a.remove();
+  }
+  render() {
+    const firstRow = new CourierSkeletonAnimatedRow(this._theme);
+    const secondRow = new CourierSkeletonAnimatedRow(this._theme);
+    const thirdRow = new CourierSkeletonAnimatedRow(this._theme);
+    this.appendChild(firstRow);
+    this.appendChild(secondRow);
+    this.appendChild(thirdRow);
+  }
+  static getStyles(_theme) {
     return `
-      :host {
+      ${CourierInboxSkeletonListItem.id} {
         display: flex;
         flex-direction: column;
         gap: 12px;
         padding: 12px;
         width: 100%;
         box-sizing: border-box;
-        opacity: ${opacity};
+      }
+
+      ${CourierInboxSkeletonListItem.id} > *:first-child {
+        width: 35%;
+      }
+
+      ${CourierInboxSkeletonListItem.id} > *:nth-child(2) {
+        width: 100%;
+      }
+
+      ${CourierInboxSkeletonListItem.id} > *:nth-child(3) {
+        width: 82%;
       }
     `;
   }
 }
-if (!customElements.get("courier-inbox-skeleton-list-item")) {
-  customElements.define("courier-inbox-skeleton-list-item", CourierInboxSkeletonListItem);
-}
-class CourierSkeletonAnimatedRow extends HTMLElement {
-  constructor(theme2, widthPercent) {
+registerElement(CourierInboxSkeletonListItem);
+class CourierSkeletonAnimatedRow extends CourierBaseElement {
+  constructor(theme2) {
     super();
-    __publicField(this, "_shadow");
-    this._shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = this.getStyles(theme2, widthPercent);
-    this._shadow.appendChild(style);
+    __publicField(this, "_theme");
+    __publicField(this, "_style");
+    this._theme = theme2;
+  }
+  static get id() {
+    return "courier-skeleton-animated-row";
+  }
+  onComponentMounted() {
+    this._style = injectGlobalStyle(CourierSkeletonAnimatedRow.id, CourierSkeletonAnimatedRow.getStyles(this._theme));
+    this.render();
+  }
+  onComponentUnmounted() {
+    var _a;
+    (_a = this._style) == null ? void 0 : _a.remove();
+  }
+  render() {
     const skeletonItem = document.createElement("div");
     skeletonItem.className = "skeleton-item";
-    this._shadow.appendChild(skeletonItem);
+    this.appendChild(skeletonItem);
   }
-  getStyles(theme2, widthPercent) {
+  static getStyles(theme2) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
     const color = ((_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.animation) == null ? void 0 : _c.barColor) ?? "#000";
     const hexColor = color.length === 4 ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color;
@@ -1950,15 +2033,15 @@ class CourierSkeletonAnimatedRow extends HTMLElement {
     const colorWithAlpha80 = `rgba(${r}, ${g}, ${b}, 0.8)`;
     const colorWithAlpha40 = `rgba(${r}, ${g}, ${b}, 0.4)`;
     return `
-      :host {
+      ${CourierSkeletonAnimatedRow.id} {
         display: flex;
         height: 100%;
-        width: ${widthPercent}%;
+        width: 100%;
         align-items: flex-start;
         justify-content: flex-start;
       }
 
-      .skeleton-item {
+      ${CourierSkeletonAnimatedRow.id} .skeleton-item {
         height: ${((_f = (_e = (_d = theme2.inbox) == null ? void 0 : _d.loading) == null ? void 0 : _e.animation) == null ? void 0 : _f.barHeight) ?? "14px"};
         width: 100%;
         background: linear-gradient(
@@ -1968,11 +2051,11 @@ class CourierSkeletonAnimatedRow extends HTMLElement {
           ${colorWithAlpha80} 75%
         );
         background-size: 200% 100%;
-        animation: shimmer ${((_i = (_h = (_g = theme2.inbox) == null ? void 0 : _g.loading) == null ? void 0 : _h.animation) == null ? void 0 : _i.duration) ?? "2s"} ease-in-out infinite;
+        animation: ${CourierSkeletonAnimatedRow.id}-shimmer ${((_i = (_h = (_g = theme2.inbox) == null ? void 0 : _g.loading) == null ? void 0 : _h.animation) == null ? void 0 : _i.duration) ?? "2s"} ease-in-out infinite;
         border-radius: ${((_l = (_k = (_j = theme2.inbox) == null ? void 0 : _j.loading) == null ? void 0 : _k.animation) == null ? void 0 : _l.barBorderRadius) ?? "14px"};
       }
 
-      @keyframes shimmer {
+      @keyframes ${CourierSkeletonAnimatedRow.id}-shimmer {
         0% {
           background-position: 200% 0;
         }
@@ -1983,32 +2066,38 @@ class CourierSkeletonAnimatedRow extends HTMLElement {
     `;
   }
 }
-if (!customElements.get("courier-skeleton-animated-row")) {
-  customElements.define("courier-skeleton-animated-row", CourierSkeletonAnimatedRow);
-}
-class CourierInboxSkeletonList extends CourierElement {
+registerElement(CourierSkeletonAnimatedRow);
+class CourierInboxSkeletonList extends CourierFactoryElement {
   constructor(theme2) {
     super();
     __publicField(this, "_theme");
+    __publicField(this, "_style");
     this._theme = theme2;
   }
+  static get id() {
+    return "courier-inbox-skeleton-list";
+  }
+  onComponentMounted() {
+    this._style = injectGlobalStyle(CourierInboxSkeletonList.id, CourierInboxSkeletonList.getStyles(this._theme));
+  }
+  onComponentUnmounted() {
+    var _a;
+    (_a = this._style) == null ? void 0 : _a.remove();
+  }
   defaultElement() {
     const list = document.createElement("div");
     list.className = "list";
-    const style = document.createElement("style");
-    style.textContent = this.getStyles();
-    list.appendChild(style);
     for (let i = 0; i < 3; i++) {
-      const skeletonItem = new CourierInboxSkeletonListItem(this._theme, 1 / (i + 1));
+      const skeletonItem = new CourierInboxSkeletonListItem(this._theme);
       list.appendChild(skeletonItem);
     }
-    this.shadow.appendChild(list);
+    this.appendChild(list);
     return list;
   }
-  getStyles() {
-    var _a, _b;
+  static getStyles(theme2) {
+    var _a, _b, _c, _d;
     return `
-      :host {
+      ${CourierInboxSkeletonList.id} {
         display: flex;
         height: 100%;
         width: 100%;
@@ -2017,82 +2106,92 @@ class CourierInboxSkeletonList extends CourierElement {
         overflow: hidden;
       }
 
-      .list {
+      ${CourierInboxSkeletonList.id} .list {
         display: flex;
         flex-direction: column;
-        gap: 8px;
         width: 100%;
         overflow: hidden;
       }
 
-      .list > * {
-        border-bottom: ${((_b = (_a = this._theme.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.divider) ?? "1px solid red"};
+      ${CourierInboxSkeletonList.id} .list > * {
+        border-bottom: ${((_b = (_a = theme2.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.divider) ?? "1px solid red"};
+        opacity: 100%;
       }
 
-      .list > *:last-child {
+      ${CourierInboxSkeletonList.id} .list > *:nth-child(2) {
+        border-bottom: ${((_d = (_c = theme2.inbox) == null ? void 0 : _c.loading) == null ? void 0 : _d.divider) ?? "1px solid red"};
+        opacity: 88%;
+      }
+
+      ${CourierInboxSkeletonList.id} .list > *:nth-child(3) {
         border-bottom: none;
+        opacity: 50%;
       }
     `;
   }
 }
-if (!customElements.get("courier-inbox-skeleton-list")) {
-  customElements.define("courier-inbox-skeleton-list", CourierInboxSkeletonList);
-}
-class CourierInboxPaginationListItem extends HTMLElement {
+registerElement(CourierInboxSkeletonList);
+class CourierInboxPaginationListItem extends CourierBaseElement {
   constructor(props) {
     super();
+    // State
+    __publicField(this, "_theme");
     // Components
-    __publicField(this, "skeletonLoadingList");
-    __publicField(this, "observer");
-    __publicField(this, "customItem");
+    __publicField(this, "_style");
+    __publicField(this, "_skeletonLoadingList");
+    __publicField(this, "_observer");
+    __publicField(this, "_customItem");
     // Handlers
-    __publicField(this, "onPaginationTrigger");
-    this.onPaginationTrigger = props.onPaginationTrigger;
-    this.customItem = props.customItem;
-    const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = this.getStyles();
-    shadow.appendChild(style);
-    if (this.customItem) {
-      shadow.appendChild(this.customItem);
+    __publicField(this, "_onPaginationTrigger");
+    this._theme = props.theme;
+    this._customItem = props.customItem;
+    this._onPaginationTrigger = props.onPaginationTrigger;
+  }
+  static get id() {
+    return "courier-inbox-pagination-list-item";
+  }
+  onComponentMounted() {
+    this._style = injectGlobalStyle(CourierInboxPaginationListItem.id, CourierInboxPaginationListItem.getStyles(this._theme));
+    if (this._customItem) {
+      this.appendChild(this._customItem);
     } else {
       const container = document.createElement("div");
       container.className = "skeleton-container";
-      this.skeletonLoadingList = new CourierInboxSkeletonList(props.theme);
-      this.skeletonLoadingList.build(void 0);
-      container.appendChild(this.skeletonLoadingList);
-      shadow.appendChild(container);
+      this._skeletonLoadingList = new CourierInboxSkeletonList(this._theme);
+      this._skeletonLoadingList.build(void 0);
+      container.appendChild(this._skeletonLoadingList);
+      this.appendChild(container);
     }
-    this.observer = new IntersectionObserver((entries) => {
+    this._observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          this.onPaginationTrigger();
+          this._onPaginationTrigger();
         }
       });
     });
-    this.observer.observe(this);
+    this._observer.observe(this);
   }
-  getStyles() {
+  onComponentUnmounted() {
+    var _a, _b;
+    (_a = this._observer) == null ? void 0 : _a.disconnect();
+    (_b = this._style) == null ? void 0 : _b.remove();
+  }
+  static getStyles(_theme) {
     return `
-      :host {
+      ${CourierInboxPaginationListItem.id} {
         padding: 0;
         margin: 0;
         box-sizing: border-box;
       }
 
-      .skeleton-container {
+      ${CourierInboxPaginationListItem.id} .skeleton-container {
         height: 150%;
       }
     `;
   }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
-}
-if (!customElements.get("courier-inbox-pagination-list-item")) {
-  customElements.define("courier-inbox-pagination-list-item", CourierInboxPaginationListItem);
 }
-class CourierInboxList extends HTMLElement {
+registerElement(CourierInboxPaginationListItem);
+class CourierInboxList extends CourierBaseElement {
   constructor(props) {
     super();
     // Theme
@@ -2115,34 +2214,53 @@ class CourierInboxList extends HTMLElement {
     __publicField(this, "_loadingStateFactory");
     __publicField(this, "_emptyStateFactory");
     __publicField(this, "_errorStateFactory");
-    this._themeSubscription = props.themeManager.subscribe((_) => {
-      this.refreshTheme();
-    });
+    // Components
+    __publicField(this, "_listStyles");
+    __publicField(this, "_listItemStyles");
+    __publicField(this, "_listItemMenuStyles");
     this._onRefresh = props.onRefresh;
     this._onPaginationTrigger = props.onPaginationTrigger;
     this._onMessageClick = props.onMessageClick;
     this._onMessageActionClick = props.onMessageActionClick;
     this._onMessageLongPress = props.onMessageLongPress;
-    const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = this.getStyles();
-    shadow.appendChild(style);
+    this._themeSubscription = props.themeManager.subscribe((_) => {
+      this.render();
+    });
+  }
+  static get id() {
+    return "courier-inbox-list";
   }
   // Getters
   get messages() {
     return this._messages;
   }
-  getStyles() {
+  get theme() {
+    return this._themeSubscription.manager.getTheme();
+  }
+  onComponentMounted() {
+    this._listStyles = injectGlobalStyle(CourierInboxList.id, CourierInboxList.getStyles(this.theme));
+    this._listItemStyles = injectGlobalStyle(CourierInboxListItem.id, CourierInboxListItem.getStyles(this.theme));
+    this._listItemMenuStyles = injectGlobalStyle(CourierInboxListItemMenu.id, CourierInboxListItemMenu.getStyles(this.theme));
+    this.render();
+  }
+  onComponentUnmounted() {
+    var _a, _b, _c;
+    this._themeSubscription.unsubscribe();
+    (_a = this._listStyles) == null ? void 0 : _a.remove();
+    (_b = this._listItemStyles) == null ? void 0 : _b.remove();
+    (_c = this._listItemMenuStyles) == null ? void 0 : _c.remove();
+  }
+  static getStyles(theme2) {
     var _a;
-    const list = (_a = this._themeSubscription.manager.getTheme().inbox) == null ? void 0 : _a.list;
+    const list = (_a = theme2.inbox) == null ? void 0 : _a.list;
     return `
-      :host {
+      ${CourierInboxList.id} {
         flex: 1;
         width: 100%;
-        background-color: ${(list == null ? void 0 : list.backgroundColor) ?? CourierColors.white[500]};
+        background-color: ${(list == null ? void 0 : list.backgroundColor) ?? "red"};
       }
 
-      ul {
+      ${CourierInboxList.id} ul {
         list-style: none;
         padding: 0;
         margin: 0;
@@ -2150,15 +2268,6 @@ class CourierInboxList extends HTMLElement {
       }
     `;
   }
-  reset() {
-    var _a, _b;
-    while ((_a = this.shadowRoot) == null ? void 0 : _a.firstChild) {
-      this.shadowRoot.removeChild(this.shadowRoot.firstChild);
-    }
-    const style = document.createElement("style");
-    style.textContent = this.getStyles();
-    (_b = this.shadowRoot) == null ? void 0 : _b.appendChild(style);
-  }
   setDataSet(dataSet) {
     this._messages = [...dataSet.messages];
     this._canPaginate = Boolean(dataSet.canPaginate);
@@ -2212,11 +2321,21 @@ class CourierInboxList extends HTMLElement {
     this._onRefresh();
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da;
-    this.reset();
-    const theme2 = this._themeSubscription.manager.getTheme();
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$;
+    while (this.firstChild) {
+      this.removeChild(this.firstChild);
+    }
+    if (this._listStyles) {
+      this._listStyles.textContent = CourierInboxList.getStyles(this.theme);
+    }
+    if (this._listItemStyles) {
+      this._listItemStyles.textContent = CourierInboxListItem.getStyles(this.theme);
+    }
+    if (this._listItemMenuStyles) {
+      this._listItemMenuStyles.textContent = CourierInboxListItemMenu.getStyles(this.theme);
+    }
     if (this._error) {
-      const error = (_a = theme2.inbox) == null ? void 0 : _a.error;
+      const error = (_a = this.theme.inbox) == null ? void 0 : _a.error;
       const errorElement = new CourierInfoState({
         title: {
           text: ((_b = error == null ? void 0 : error.title) == null ? void 0 : _b.text) ?? this._error.message,
@@ -2241,52 +2360,52 @@ class CourierInboxList extends HTMLElement {
       });
       errorElement.build((_z = this._errorStateFactory) == null ? void 0 : _z.call(this, { feedType: this._feedType, error: this._error }));
       errorElement.setButtonClickCallback(() => this.handleRetry());
-      (_A = this.shadowRoot) == null ? void 0 : _A.appendChild(errorElement);
+      this.appendChild(errorElement);
       return;
     }
     if (this._isLoading) {
-      const loadingElement = new CourierInboxSkeletonList(theme2);
-      loadingElement.build((_B = this._loadingStateFactory) == null ? void 0 : _B.call(this, { feedType: this._feedType }));
-      (_C = this.shadowRoot) == null ? void 0 : _C.appendChild(loadingElement);
+      const loadingElement = new CourierInboxSkeletonList(this.theme);
+      loadingElement.build((_A = this._loadingStateFactory) == null ? void 0 : _A.call(this, { feedType: this._feedType }));
+      this.appendChild(loadingElement);
       return;
     }
     if (this._messages.length === 0) {
-      const empty = (_D = theme2.inbox) == null ? void 0 : _D.empty;
+      const empty = (_B = this.theme.inbox) == null ? void 0 : _B.empty;
       const emptyElement = new CourierInfoState({
         title: {
-          text: ((_E = empty == null ? void 0 : empty.title) == null ? void 0 : _E.text) ?? `No ${this._feedType} messages yet`,
-          textColor: (_G = (_F = empty == null ? void 0 : empty.title) == null ? void 0 : _F.font) == null ? void 0 : _G.color,
-          fontFamily: (_I = (_H = empty == null ? void 0 : empty.title) == null ? void 0 : _H.font) == null ? void 0 : _I.family,
-          fontSize: (_K = (_J = empty == null ? void 0 : empty.title) == null ? void 0 : _J.font) == null ? void 0 : _K.size,
-          fontWeight: (_M = (_L = empty == null ? void 0 : empty.title) == null ? void 0 : _L.font) == null ? void 0 : _M.weight
+          text: ((_C = empty == null ? void 0 : empty.title) == null ? void 0 : _C.text) ?? `No ${this._feedType} messages yet`,
+          textColor: (_E = (_D = empty == null ? void 0 : empty.title) == null ? void 0 : _D.font) == null ? void 0 : _E.color,
+          fontFamily: (_G = (_F = empty == null ? void 0 : empty.title) == null ? void 0 : _F.font) == null ? void 0 : _G.family,
+          fontSize: (_I = (_H = empty == null ? void 0 : empty.title) == null ? void 0 : _H.font) == null ? void 0 : _I.size,
+          fontWeight: (_K = (_J = empty == null ? void 0 : empty.title) == null ? void 0 : _J.font) == null ? void 0 : _K.weight
         },
         button: {
-          text: (_N = empty == null ? void 0 : empty.button) == null ? void 0 : _N.text,
-          backgroundColor: (_O = empty == null ? void 0 : empty.button) == null ? void 0 : _O.backgroundColor,
-          hoverBackgroundColor: (_P = empty == null ? void 0 : empty.button) == null ? void 0 : _P.hoverBackgroundColor,
-          activeBackgroundColor: (_Q = empty == null ? void 0 : empty.button) == null ? void 0 : _Q.activeBackgroundColor,
-          textColor: (_S = (_R = empty == null ? void 0 : empty.button) == null ? void 0 : _R.font) == null ? void 0 : _S.color,
-          fontFamily: (_U = (_T = empty == null ? void 0 : empty.button) == null ? void 0 : _T.font) == null ? void 0 : _U.family,
-          fontSize: (_W = (_V = empty == null ? void 0 : empty.button) == null ? void 0 : _V.font) == null ? void 0 : _W.size,
-          fontWeight: (_Y = (_X = empty == null ? void 0 : empty.button) == null ? void 0 : _X.font) == null ? void 0 : _Y.weight,
-          shadow: (_Z = empty == null ? void 0 : empty.button) == null ? void 0 : _Z.shadow,
-          border: (__ = empty == null ? void 0 : empty.button) == null ? void 0 : __.border,
-          borderRadius: (_$ = empty == null ? void 0 : empty.button) == null ? void 0 : _$.borderRadius
+          text: (_L = empty == null ? void 0 : empty.button) == null ? void 0 : _L.text,
+          backgroundColor: (_M = empty == null ? void 0 : empty.button) == null ? void 0 : _M.backgroundColor,
+          hoverBackgroundColor: (_N = empty == null ? void 0 : empty.button) == null ? void 0 : _N.hoverBackgroundColor,
+          activeBackgroundColor: (_O = empty == null ? void 0 : empty.button) == null ? void 0 : _O.activeBackgroundColor,
+          textColor: (_Q = (_P = empty == null ? void 0 : empty.button) == null ? void 0 : _P.font) == null ? void 0 : _Q.color,
+          fontFamily: (_S = (_R = empty == null ? void 0 : empty.button) == null ? void 0 : _R.font) == null ? void 0 : _S.family,
+          fontSize: (_U = (_T = empty == null ? void 0 : empty.button) == null ? void 0 : _T.font) == null ? void 0 : _U.size,
+          fontWeight: (_W = (_V = empty == null ? void 0 : empty.button) == null ? void 0 : _V.font) == null ? void 0 : _W.weight,
+          shadow: (_X = empty == null ? void 0 : empty.button) == null ? void 0 : _X.shadow,
+          border: (_Y = empty == null ? void 0 : empty.button) == null ? void 0 : _Y.border,
+          borderRadius: (_Z = empty == null ? void 0 : empty.button) == null ? void 0 : _Z.borderRadius
         }
       });
-      emptyElement.build((_aa = this._emptyStateFactory) == null ? void 0 : _aa.call(this, { feedType: this._feedType }));
+      emptyElement.build((__ = this._emptyStateFactory) == null ? void 0 : __.call(this, { feedType: this._feedType }));
       emptyElement.setButtonClickCallback(() => this.handleRefresh());
-      (_ba = this.shadowRoot) == null ? void 0 : _ba.appendChild(emptyElement);
+      this.appendChild(emptyElement);
       return;
     }
     const list = document.createElement("ul");
-    (_ca = this.shadowRoot) == null ? void 0 : _ca.appendChild(list);
+    this.appendChild(list);
     this._messages.forEach((message, index) => {
       if (this._listItemFactory) {
         list.appendChild(this._listItemFactory({ message, index }));
         return;
       }
-      const listItem = new CourierListItem(theme2);
+      const listItem = new CourierInboxListItem(this.theme);
       listItem.setMessage(message, this._feedType);
       listItem.setOnItemClick((message2) => {
         var _a2;
@@ -2304,8 +2423,8 @@ class CourierInboxList extends HTMLElement {
     });
     if (this._canPaginate) {
       const paginationItem = new CourierInboxPaginationListItem({
-        theme: theme2,
-        customItem: (_da = this._paginationItemFactory) == null ? void 0 : _da.call(this, { feedType: this._feedType }),
+        theme: this.theme,
+        customItem: (_$ = this._paginationItemFactory) == null ? void 0 : _$.call(this, { feedType: this._feedType }),
         onPaginationTrigger: () => {
           var _a2;
           return (_a2 = this._onPaginationTrigger) == null ? void 0 : _a2.call(this, this._feedType);
@@ -2335,36 +2454,28 @@ class CourierInboxList extends HTMLElement {
     this._paginationItemFactory = factory;
     this.render();
   }
-  refreshTheme() {
-    this.render();
-  }
-  // Disconnect the theme subscription
-  disconnectedCallback() {
-    this._themeSubscription.unsubscribe();
-  }
-}
-if (!customElements.get("courier-inbox-list")) {
-  customElements.define("courier-inbox-list", CourierInboxList);
 }
-class CourierInboxOptionMenuItem extends HTMLElement {
+registerElement(CourierInboxList);
+class CourierInboxOptionMenuItem extends CourierBaseElement {
   constructor(props) {
     super();
     // State
     __publicField(this, "_option");
+    __publicField(this, "_isSelectedable");
     __publicField(this, "_isSelected");
     // Components
     __publicField(this, "_content");
     __publicField(this, "_itemIcon");
     __publicField(this, "_title");
     __publicField(this, "_selectionIcon");
-    __publicField(this, "_style");
-    // Theme
-    __publicField(this, "_themeManager");
     this._option = props.option;
     this._isSelected = props.isSelected;
-    this._themeManager = props.themeManager;
-    const shadow = this.attachShadow({ mode: "open" });
-    this._style = document.createElement("style");
+    this._isSelectedable = props.selectable;
+  }
+  static get id() {
+    return "courier-inbox-option-menu-item";
+  }
+  onComponentMounted() {
     this._content = document.createElement("div");
     this._content.className = "menu-item";
     this._itemIcon = new CourierIcon(this._option.icon.svg ?? CourierIconSVGs.inbox);
@@ -2377,72 +2488,26 @@ class CourierInboxOptionMenuItem extends HTMLElement {
     this._content.appendChild(this._itemIcon);
     this._content.appendChild(this._title);
     this._content.appendChild(spacer);
-    if (props.selectable) {
+    if (this._isSelectedable) {
       this._content.appendChild(this._selectionIcon);
     }
-    shadow.appendChild(this._style);
-    shadow.appendChild(this._content);
+    this.appendChild(this._content);
     this._selectionIcon.style.display = this._isSelected ? "block" : "none";
     this.refreshTheme();
   }
-  getStyles() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H;
-    const theme2 = this._themeManager.getTheme();
-    return `
-      :host {
-        display: flex;
-        flex-direction: row;
-        padding: 6px 12px;
-        cursor: pointer;
-      }
-
-      :host(:hover) {
-        background-color: ${((_e = (_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.popup) == null ? void 0 : _d.list) == null ? void 0 : _e.hoverBackgroundColor) ?? "red"};
-      }
-
-      :host(:active) {
-        background-color: ${((_j = (_i = (_h = (_g = (_f = theme2.inbox) == null ? void 0 : _f.header) == null ? void 0 : _g.menus) == null ? void 0 : _h.popup) == null ? void 0 : _i.list) == null ? void 0 : _j.activeBackgroundColor) ?? "red"};
-      }
-
-      .menu-item {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        gap: 12px;
-      }
-
-      .spacer {
-        flex: 1;
-      }
-
-      p {
-        margin: 0;
-        font-family: ${((_p = (_o = (_n = (_m = (_l = (_k = theme2.inbox) == null ? void 0 : _k.header) == null ? void 0 : _l.menus) == null ? void 0 : _m.popup) == null ? void 0 : _n.list) == null ? void 0 : _o.font) == null ? void 0 : _p.family) ?? "inherit"};
-        font-weight: ${((_v = (_u = (_t = (_s = (_r = (_q = theme2.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.menus) == null ? void 0 : _s.popup) == null ? void 0 : _t.list) == null ? void 0 : _u.font) == null ? void 0 : _v.weight) ?? "inherit"};
-        font-size: ${((_B = (_A = (_z = (_y = (_x = (_w = theme2.inbox) == null ? void 0 : _w.header) == null ? void 0 : _x.menus) == null ? void 0 : _y.popup) == null ? void 0 : _z.list) == null ? void 0 : _A.font) == null ? void 0 : _B.size) ?? "14px"};
-        color: ${((_H = (_G = (_F = (_E = (_D = (_C = theme2.inbox) == null ? void 0 : _C.header) == null ? void 0 : _D.menus) == null ? void 0 : _E.popup) == null ? void 0 : _F.list) == null ? void 0 : _G.font) == null ? void 0 : _H.color) ?? "red"};
-        white-space: nowrap;
-      }
-
-      .check-icon {
-        display: none;
-      }
-    `;
-  }
   refreshTheme() {
-    var _a, _b, _c, _d;
-    this._style.textContent = this.getStyles();
-    this._selectionIcon.updateColor(((_a = this._option.selectionIcon) == null ? void 0 : _a.color) ?? "red");
-    this._selectionIcon.updateSVG(((_b = this._option.selectionIcon) == null ? void 0 : _b.svg) ?? CourierIconSVGs.check);
-    this._title.textContent = this._option.text ?? "Missing Text";
-    this._itemIcon.updateColor(((_c = this._option.icon) == null ? void 0 : _c.color) ?? "red");
-    this._itemIcon.updateSVG(((_d = this._option.icon) == null ? void 0 : _d.svg) ?? CourierIconSVGs.inbox);
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    (_b = this._selectionIcon) == null ? void 0 : _b.updateColor(((_a = this._option.selectionIcon) == null ? void 0 : _a.color) ?? "red");
+    (_d = this._selectionIcon) == null ? void 0 : _d.updateSVG(((_c = this._option.selectionIcon) == null ? void 0 : _c.svg) ?? CourierIconSVGs.check);
+    if (this._title) {
+      this._title.textContent = this._option.text ?? "Missing Text";
+    }
+    (_f = this._itemIcon) == null ? void 0 : _f.updateColor(((_e = this._option.icon) == null ? void 0 : _e.color) ?? "red");
+    (_h = this._itemIcon) == null ? void 0 : _h.updateSVG(((_g = this._option.icon) == null ? void 0 : _g.svg) ?? CourierIconSVGs.inbox);
   }
 }
-if (!customElements.get("courier-inbox-filter-menu-item")) {
-  customElements.define("courier-inbox-filter-menu-item", CourierInboxOptionMenuItem);
-}
-class CourierInboxOptionMenu extends HTMLElement {
+registerElement(CourierInboxOptionMenuItem);
+class CourierInboxOptionMenu extends CourierBaseElement {
   constructor(themeManager, type, selectable, options, onMenuOpen) {
     super();
     // Theme
@@ -2462,31 +2527,39 @@ class CourierInboxOptionMenu extends HTMLElement {
     this._options = options;
     this._selectedIndex = 0;
     this._onMenuOpen = onMenuOpen;
-    const shadow = this.attachShadow({ mode: "open" });
-    this._menuButton = new CourierIconButton(type === "filters" ? CourierIconSVGs.filter : CourierIconSVGs.overflow);
-    this._menu = document.createElement("div");
-    this._menu.className = `menu ${type}`;
-    this._style = document.createElement("style");
-    shadow.appendChild(this._style);
-    shadow.appendChild(this._menuButton);
-    shadow.appendChild(this._menu);
-    this._menuButton.addEventListener("click", this.toggleMenu.bind(this));
-    document.addEventListener("click", this.handleOutsideClick.bind(this));
     this._themeSubscription = themeManager.subscribe((_) => {
       this.refreshTheme();
     });
+  }
+  static get id() {
+    return "courier-inbox-option-menu";
+  }
+  onComponentMounted() {
+    this._style = injectGlobalStyle(CourierInboxOptionMenu.id, this.getStyles());
+    this._menuButton = new CourierIconButton(this._type === "filters" ? CourierIconSVGs.filter : CourierIconSVGs.overflow);
+    this._menu = document.createElement("div");
+    this._menu.className = `menu ${this._type}`;
+    this.appendChild(this._menuButton);
+    this.appendChild(this._menu);
+    this._menuButton.addEventListener("click", this.toggleMenu.bind(this));
+    document.addEventListener("click", this.handleOutsideClick.bind(this));
     this.refreshTheme();
   }
+  onComponentUnmounted() {
+    var _a;
+    this._themeSubscription.unsubscribe();
+    (_a = this._style) == null ? void 0 : _a.remove();
+  }
   getStyles() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa;
     const theme2 = this._themeSubscription.manager.getTheme();
     return `
-      :host {
+      ${CourierInboxOptionMenu.id} {
         position: relative;
         display: inline-block;
       }
 
-      .menu {
+      ${CourierInboxOptionMenu.id} .menu {
         display: none;
         position: absolute;
         top: 42px;
@@ -2501,28 +2574,69 @@ class CourierInboxOptionMenu extends HTMLElement {
         padding: 4px 0;
       }
 
-      courier-inbox-filter-menu-item {
+      ${CourierInboxOptionMenu.id} courier-inbox-filter-menu-item {
         border-bottom: ${((_u = (_t = (_s = (_r = (_q = theme2.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.menus) == null ? void 0 : _s.popup) == null ? void 0 : _t.list) == null ? void 0 : _u.divider) ?? "none"};
       }
 
-      courier-inbox-filter-menu-item:last-child {
+      ${CourierInboxOptionMenu.id} courier-inbox-filter-menu-item:last-child {
         border-bottom: none;
       }
+
+      ${CourierInboxOptionMenuItem.id} {
+        display: flex;
+        flex-direction: row;
+        padding: 6px 12px;
+        cursor: pointer;
+      }
+
+      ${CourierInboxOptionMenuItem.id}:hover {
+        background-color: ${((_z = (_y = (_x = (_w = (_v = theme2.inbox) == null ? void 0 : _v.header) == null ? void 0 : _w.menus) == null ? void 0 : _x.popup) == null ? void 0 : _y.list) == null ? void 0 : _z.hoverBackgroundColor) ?? "red"};
+      }
+
+      ${CourierInboxOptionMenuItem.id}:active {
+        background-color: ${((_E = (_D = (_C = (_B = (_A = theme2.inbox) == null ? void 0 : _A.header) == null ? void 0 : _B.menus) == null ? void 0 : _C.popup) == null ? void 0 : _D.list) == null ? void 0 : _E.activeBackgroundColor) ?? "red"};
+      }
+
+      ${CourierInboxOptionMenuItem.id} .menu-item {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        gap: 12px;
+      }
+
+      ${CourierInboxOptionMenuItem.id} .spacer {
+        flex: 1;
+      }
+
+      ${CourierInboxOptionMenuItem.id} p {
+        margin: 0;
+        font-family: ${((_K = (_J = (_I = (_H = (_G = (_F = theme2.inbox) == null ? void 0 : _F.header) == null ? void 0 : _G.menus) == null ? void 0 : _H.popup) == null ? void 0 : _I.list) == null ? void 0 : _J.font) == null ? void 0 : _K.family) ?? "inherit"};
+        font-weight: ${((_Q = (_P = (_O = (_N = (_M = (_L = theme2.inbox) == null ? void 0 : _L.header) == null ? void 0 : _M.menus) == null ? void 0 : _N.popup) == null ? void 0 : _O.list) == null ? void 0 : _P.font) == null ? void 0 : _Q.weight) ?? "inherit"};
+        font-size: ${((_W = (_V = (_U = (_T = (_S = (_R = theme2.inbox) == null ? void 0 : _R.header) == null ? void 0 : _S.menus) == null ? void 0 : _T.popup) == null ? void 0 : _U.list) == null ? void 0 : _V.font) == null ? void 0 : _W.size) ?? "14px"};
+        color: ${((_aa = (_$ = (__ = (_Z = (_Y = (_X = theme2.inbox) == null ? void 0 : _X.header) == null ? void 0 : _Y.menus) == null ? void 0 : _Z.popup) == null ? void 0 : __.list) == null ? void 0 : _$.font) == null ? void 0 : _aa.color) ?? "red"};
+        white-space: nowrap;
+      }
+
+      ${CourierInboxOptionMenuItem.id} .check-icon {
+        display: none;
+      }
     `;
   }
   refreshTheme() {
-    var _a, _b, _c, _d, _e, _f;
-    this._style.textContent = this.getStyles();
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    if (this._style) {
+      this._style.textContent = this.getStyles();
+    }
     const theme2 = this._themeSubscription.manager.getTheme();
     const menu = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus;
     const isFilter = this._type === "filters";
     const buttonConfig = isFilter ? (_c = menu == null ? void 0 : menu.filters) == null ? void 0 : _c.button : (_d = menu == null ? void 0 : menu.actions) == null ? void 0 : _d.button;
     const defaultIcon = isFilter ? CourierIconSVGs.filter : CourierIconSVGs.overflow;
-    this._menuButton.updateIconSVG(((_e = buttonConfig == null ? void 0 : buttonConfig.icon) == null ? void 0 : _e.svg) ?? defaultIcon);
-    this._menuButton.updateIconColor(((_f = buttonConfig == null ? void 0 : buttonConfig.icon) == null ? void 0 : _f.color) ?? "red");
-    this._menuButton.updateBackgroundColor((buttonConfig == null ? void 0 : buttonConfig.backgroundColor) ?? "transparent");
-    this._menuButton.updateHoverBackgroundColor((buttonConfig == null ? void 0 : buttonConfig.hoverBackgroundColor) ?? "red");
-    this._menuButton.updateActiveBackgroundColor((buttonConfig == null ? void 0 : buttonConfig.activeBackgroundColor) ?? "red");
+    (_f = this._menuButton) == null ? void 0 : _f.updateIconSVG(((_e = buttonConfig == null ? void 0 : buttonConfig.icon) == null ? void 0 : _e.svg) ?? defaultIcon);
+    (_h = this._menuButton) == null ? void 0 : _h.updateIconColor(((_g = buttonConfig == null ? void 0 : buttonConfig.icon) == null ? void 0 : _g.color) ?? "red");
+    (_i = this._menuButton) == null ? void 0 : _i.updateBackgroundColor((buttonConfig == null ? void 0 : buttonConfig.backgroundColor) ?? "transparent");
+    (_j = this._menuButton) == null ? void 0 : _j.updateHoverBackgroundColor((buttonConfig == null ? void 0 : buttonConfig.hoverBackgroundColor) ?? "red");
+    (_k = this._menuButton) == null ? void 0 : _k.updateActiveBackgroundColor((buttonConfig == null ? void 0 : buttonConfig.activeBackgroundColor) ?? "red");
     this.refreshMenuItems();
   }
   setOptions(options) {
@@ -2530,8 +2644,11 @@ class CourierInboxOptionMenu extends HTMLElement {
     this.refreshMenuItems();
   }
   refreshMenuItems() {
-    this._menu.innerHTML = "";
+    if (this._menu) {
+      this._menu.innerHTML = "";
+    }
     this._options.forEach((option, index) => {
+      var _a;
       const menuItem = new CourierInboxOptionMenuItem({
         option,
         selectable: this._selectable,
@@ -2544,13 +2661,16 @@ class CourierInboxOptionMenu extends HTMLElement {
         this.refreshMenuItems();
         this.closeMenu();
       });
-      this._menu.appendChild(menuItem);
+      (_a = this._menu) == null ? void 0 : _a.appendChild(menuItem);
     });
   }
   toggleMenu(event) {
+    var _a;
     event.stopPropagation();
-    const isOpening = this._menu.style.display !== "block";
-    this._menu.style.display = isOpening ? "block" : "none";
+    const isOpening = ((_a = this._menu) == null ? void 0 : _a.style.display) !== "block";
+    if (this._menu) {
+      this._menu.style.display = isOpening ? "block" : "none";
+    }
     if (isOpening) {
       this._onMenuOpen();
     }
@@ -2561,20 +2681,17 @@ class CourierInboxOptionMenu extends HTMLElement {
     }
   }
   closeMenu() {
-    this._menu.style.display = "none";
+    if (this._menu) {
+      this._menu.style.display = "none";
+    }
   }
   selectOption(option) {
     this._selectedIndex = this._options.findIndex((o) => o.id === option.id);
     this.refreshMenuItems();
   }
-  disconnectedCallback() {
-    this._themeSubscription.unsubscribe();
-  }
-}
-if (!customElements.get("courier-inbox-option-menu")) {
-  customElements.define("courier-inbox-option-menu", CourierInboxOptionMenu);
 }
-class CourierUnreadCountBadge extends HTMLElement {
+registerElement(CourierInboxOptionMenu);
+class CourierUnreadCountBadge extends CourierBaseElement {
   constructor(props) {
     super();
     // Theme
@@ -2589,37 +2706,51 @@ class CourierUnreadCountBadge extends HTMLElement {
     this._themeSubscription = props.themeBus.subscribe((_) => {
       this.refreshTheme(this._location);
     });
-    const shadow = this.attachShadow({ mode: "open" });
+  }
+  static get id() {
+    return "courier-unread-count-badge";
+  }
+  get theme() {
+    return this._themeSubscription.manager.getTheme();
+  }
+  onComponentMounted() {
     this._badge = document.createElement("span");
-    this._badge.className = "unread-badge";
-    this._style = document.createElement("style");
-    this._style.textContent = this.getStyles(this._location);
-    shadow.appendChild(this._style);
-    shadow.appendChild(this._badge);
+    this._badge.className = `unread-badge ${this._location}`;
+    this.appendChild(this._badge);
+    this.updateBadge();
+  }
+  onComponentUnmounted() {
+    var _a;
+    this._themeSubscription.unsubscribe();
+    (_a = this._style) == null ? void 0 : _a.remove();
   }
-  getStyles(location) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const theme2 = this._themeSubscription.manager.getTheme();
-    const indicator = location === "button" ? (_b = (_a = theme2.popup) == null ? void 0 : _a.button) == null ? void 0 : _b.unreadIndicator : (_e = (_d = (_c = theme2.inbox) == null ? void 0 : _c.header) == null ? void 0 : _d.filters) == null ? void 0 : _e.unreadIndicator;
-    const backgroundColor = indicator == null ? void 0 : indicator.backgroundColor;
-    const borderRadius = indicator == null ? void 0 : indicator.borderRadius;
-    const color = (_f = indicator == null ? void 0 : indicator.font) == null ? void 0 : _f.color;
-    const fontSize = (_g = indicator == null ? void 0 : indicator.font) == null ? void 0 : _g.size;
+  static getStyles(theme2) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
     return `
-      :host {
+      ${CourierUnreadCountBadge.id} {
         display: inline-block;
       }
 
-      .unread-badge {
-        background-color: ${backgroundColor};
-        color: ${color};
-        border-radius: ${borderRadius};
+      ${CourierUnreadCountBadge.id} .unread-badge {
         padding: 4px 8px;
-        font-size: ${fontSize};
         text-align: center;
         display: none;
         pointer-events: none;
       }
+
+      ${CourierUnreadCountBadge.id} .button {
+        background-color: ${(_c = (_b = (_a = theme2.popup) == null ? void 0 : _a.button) == null ? void 0 : _b.unreadIndicator) == null ? void 0 : _c.backgroundColor};
+        color: ${(_g = (_f = (_e = (_d = theme2.popup) == null ? void 0 : _d.button) == null ? void 0 : _e.unreadIndicator) == null ? void 0 : _f.font) == null ? void 0 : _g.color};
+        border-radius: ${(_j = (_i = (_h = theme2.popup) == null ? void 0 : _h.button) == null ? void 0 : _i.unreadIndicator) == null ? void 0 : _j.borderRadius};
+        font-size: ${(_n = (_m = (_l = (_k = theme2.popup) == null ? void 0 : _k.button) == null ? void 0 : _l.unreadIndicator) == null ? void 0 : _m.font) == null ? void 0 : _n.size};
+      }
+
+      ${CourierUnreadCountBadge.id} .header {
+        background-color: ${(_r = (_q = (_p = (_o = theme2.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.filters) == null ? void 0 : _q.unreadIndicator) == null ? void 0 : _r.backgroundColor};
+        color: ${(_w = (_v = (_u = (_t = (_s = theme2.inbox) == null ? void 0 : _s.header) == null ? void 0 : _t.filters) == null ? void 0 : _u.unreadIndicator) == null ? void 0 : _v.font) == null ? void 0 : _w.color};
+        border-radius: ${(_A = (_z = (_y = (_x = theme2.inbox) == null ? void 0 : _x.header) == null ? void 0 : _y.filters) == null ? void 0 : _z.unreadIndicator) == null ? void 0 : _A.borderRadius};
+        font-size: ${(_F = (_E = (_D = (_C = (_B = theme2.inbox) == null ? void 0 : _B.header) == null ? void 0 : _C.filters) == null ? void 0 : _D.unreadIndicator) == null ? void 0 : _E.font) == null ? void 0 : _F.size};
+      }
     `;
   }
   setCount(count) {
@@ -2631,22 +2762,18 @@ class CourierUnreadCountBadge extends HTMLElement {
     this.updateBadge();
   }
   updateBadge() {
-    this._style.textContent = this.getStyles(this._location);
-    if (this._count > 0) {
-      this._badge.textContent = this._count.toString();
-      this._badge.style.display = "block";
-    } else {
-      this._badge.style.display = "none";
+    if (this._badge) {
+      if (this._count > 0) {
+        this._badge.textContent = this._count.toString();
+        this._badge.style.display = "block";
+      } else {
+        this._badge.style.display = "none";
+      }
     }
   }
-  disconnectedCallback() {
-    this._themeSubscription.unsubscribe();
-  }
 }
-if (!customElements.get("courier-unread-count-badge")) {
-  customElements.define("courier-unread-count-badge", CourierUnreadCountBadge);
-}
-class CourierInboxHeaderTitle extends HTMLElement {
+registerElement(CourierUnreadCountBadge);
+class CourierInboxHeaderTitle extends CourierBaseElement {
   constructor(themeManager, option) {
     super();
     // Theme
@@ -2655,49 +2782,37 @@ class CourierInboxHeaderTitle extends HTMLElement {
     __publicField(this, "_option");
     __publicField(this, "_feedType");
     // Components
+    __publicField(this, "_style");
     __publicField(this, "_titleElement");
     __publicField(this, "_iconElement");
     __publicField(this, "_unreadBadge");
-    __publicField(this, "_container");
-    __publicField(this, "_style");
     this._option = option;
-    const shadow = this.attachShadow({ mode: "open" });
-    this._style = document.createElement("style");
-    this._container = document.createElement("div");
-    this._container.className = "title-section";
-    this._iconElement = new CourierIcon(void 0, this._option.icon.svg);
-    this._titleElement = document.createElement("h2");
-    this._unreadBadge = new CourierUnreadCountBadge({
-      themeBus: themeManager,
-      location: "header"
-    });
-    this._container.appendChild(this._iconElement);
-    this._container.appendChild(this._titleElement);
-    this._container.appendChild(this._unreadBadge);
-    shadow.appendChild(this._style);
-    shadow.appendChild(this._container);
     this._themeSubscription = themeManager.subscribe((_) => {
       this.refreshTheme(this._feedType ?? "inbox");
     });
-    this.refreshTheme(this._feedType ?? "inbox");
   }
-  getStyles() {
+  static get id() {
+    return "courier-inbox-header-title";
+  }
+  get theme() {
+    return this._themeSubscription.manager.getTheme();
+  }
+  static getStyles(theme2) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
-    const theme2 = this._themeSubscription.manager.getTheme();
     return `
-      .title-section {
+      ${CourierInboxHeaderTitle.id} {
         display: flex;
         align-items: center;
         gap: 8px;
         position: relative;
       }
 
-      courier-icon {
+      ${CourierInboxHeaderTitle.id} courier-icon {
         display: flex;
         align-items: center;
       }
 
-      h2 {
+      ${CourierInboxHeaderTitle.id} h2 {
         margin: 0;
         font-family: ${((_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.font) == null ? void 0 : _d.family) ?? "inherit"};
         font-size: ${((_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.font) == null ? void 0 : _h.size) ?? "18px"};
@@ -2705,48 +2820,68 @@ class CourierInboxHeaderTitle extends HTMLElement {
         color: ${((_p = (_o = (_n = (_m = theme2.inbox) == null ? void 0 : _m.header) == null ? void 0 : _n.filters) == null ? void 0 : _o.font) == null ? void 0 : _p.color) ?? "red"};
       }
 
-      courier-unread-count-badge {
+      ${CourierInboxHeaderTitle.id} courier-unread-count-badge {
         margin-left: 4px;
       }
     `;
   }
+  onComponentMounted() {
+    this._style = injectGlobalStyle(CourierInboxHeaderTitle.id, CourierInboxHeaderTitle.getStyles(this.theme));
+    this._iconElement = new CourierIcon(void 0, this._option.icon.svg);
+    this._titleElement = document.createElement("h2");
+    this._unreadBadge = new CourierUnreadCountBadge({
+      themeBus: this._themeSubscription.manager,
+      location: "header"
+    });
+    this.appendChild(this._iconElement);
+    this.appendChild(this._titleElement);
+    this.appendChild(this._unreadBadge);
+    this.refreshTheme(this._feedType ?? "inbox");
+  }
+  onComponentUnmounted() {
+    var _a;
+    this._themeSubscription.unsubscribe();
+    (_a = this._style) == null ? void 0 : _a.remove();
+  }
   refreshTheme(feedType) {
+    var _a;
     this._feedType = feedType;
-    this._style.textContent = this.getStyles();
-    this._unreadBadge.refreshTheme("header");
+    if (this._style) {
+      this._style.textContent = CourierInboxHeaderTitle.getStyles(this.theme);
+    }
+    (_a = this._unreadBadge) == null ? void 0 : _a.refreshTheme("header");
     this.updateFilter();
   }
   updateSelectedOption(option, feedType, unreadCount) {
+    var _a;
     this._option = option;
     this._feedType = feedType;
-    this._unreadBadge.setCount(unreadCount);
+    (_a = this._unreadBadge) == null ? void 0 : _a.setCount(unreadCount);
     this.updateFilter();
   }
   updateFilter() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
     const theme2 = this._themeSubscription.manager.getTheme();
     switch (this._feedType) {
       case "inbox":
-        this._titleElement.textContent = ((_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.inbox) == null ? void 0 : _d.text) ?? "Inbox";
-        this._iconElement.updateSVG(((_i = (_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.inbox) == null ? void 0 : _h.icon) == null ? void 0 : _i.svg) ?? CourierIconSVGs.inbox);
-        this._iconElement.updateColor(((_n = (_m = (_l = (_k = (_j = theme2.inbox) == null ? void 0 : _j.header) == null ? void 0 : _k.filters) == null ? void 0 : _l.inbox) == null ? void 0 : _m.icon) == null ? void 0 : _n.color) ?? "red");
+        if (this._titleElement) {
+          this._titleElement.textContent = ((_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.inbox) == null ? void 0 : _d.text) ?? "Inbox";
+        }
+        (_j = this._iconElement) == null ? void 0 : _j.updateSVG(((_i = (_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.inbox) == null ? void 0 : _h.icon) == null ? void 0 : _i.svg) ?? CourierIconSVGs.inbox);
+        (_p = this._iconElement) == null ? void 0 : _p.updateColor(((_o = (_n = (_m = (_l = (_k = theme2.inbox) == null ? void 0 : _k.header) == null ? void 0 : _l.filters) == null ? void 0 : _m.inbox) == null ? void 0 : _n.icon) == null ? void 0 : _o.color) ?? "red");
         break;
       case "archive":
-        this._titleElement.textContent = ((_r = (_q = (_p = (_o = theme2.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.filters) == null ? void 0 : _q.archive) == null ? void 0 : _r.text) ?? "Archive";
-        this._iconElement.updateSVG(((_w = (_v = (_u = (_t = (_s = theme2.inbox) == null ? void 0 : _s.header) == null ? void 0 : _t.filters) == null ? void 0 : _u.archive) == null ? void 0 : _v.icon) == null ? void 0 : _w.svg) ?? CourierIconSVGs.archive);
-        this._iconElement.updateColor(((_B = (_A = (_z = (_y = (_x = theme2.inbox) == null ? void 0 : _x.header) == null ? void 0 : _y.filters) == null ? void 0 : _z.archive) == null ? void 0 : _A.icon) == null ? void 0 : _B.color) ?? "red");
+        if (this._titleElement) {
+          this._titleElement.textContent = ((_t = (_s = (_r = (_q = theme2.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.filters) == null ? void 0 : _s.archive) == null ? void 0 : _t.text) ?? "Archive";
+        }
+        (_z = this._iconElement) == null ? void 0 : _z.updateSVG(((_y = (_x = (_w = (_v = (_u = theme2.inbox) == null ? void 0 : _u.header) == null ? void 0 : _v.filters) == null ? void 0 : _w.archive) == null ? void 0 : _x.icon) == null ? void 0 : _y.svg) ?? CourierIconSVGs.archive);
+        (_F = this._iconElement) == null ? void 0 : _F.updateColor(((_E = (_D = (_C = (_B = (_A = theme2.inbox) == null ? void 0 : _A.header) == null ? void 0 : _B.filters) == null ? void 0 : _C.archive) == null ? void 0 : _D.icon) == null ? void 0 : _E.color) ?? "red");
         break;
     }
   }
-  // Disconnect the theme subscription
-  disconnectedCallback() {
-    this._themeSubscription.unsubscribe();
-  }
 }
-if (!customElements.get("courier-inbox-header-title")) {
-  customElements.define("courier-inbox-header-title", CourierInboxHeaderTitle);
-}
-class CourierInboxHeader extends CourierElement {
+registerElement(CourierInboxHeaderTitle);
+class CourierInboxHeader extends CourierFactoryElement {
   constructor(props) {
     super();
     // Theme
@@ -2766,7 +2901,23 @@ class CourierInboxHeader extends CourierElement {
     });
     this._onFeedTypeChange = props.onFeedTypeChange;
   }
-  // Menu options
+  static get id() {
+    return "courier-inbox-header";
+  }
+  static get observedAttributes() {
+    return ["icon", "title", "feed-type"];
+  }
+  get theme() {
+    return this._themeSubscription.manager.getTheme();
+  }
+  onComponentMounted() {
+    this._style = injectGlobalStyle(CourierInboxHeader.id, CourierInboxHeader.getStyles(this.theme));
+  }
+  onComponentUmounted() {
+    var _a;
+    this._themeSubscription.unsubscribe();
+    (_a = this._style) == null ? void 0 : _a.remove();
+  }
   getFilterOptions() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K;
     const theme2 = this._themeSubscription.manager.getTheme();
@@ -2847,19 +2998,13 @@ class CourierInboxHeader extends CourierElement {
       }
     ];
   }
-  static get observedAttributes() {
-    return ["icon", "title", "feed-type"];
-  }
   refreshTheme() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const theme2 = this._themeSubscription.manager.getTheme();
-    const header = (_a = this.shadow) == null ? void 0 : _a.querySelector(".courier-inbox-header");
-    if (header) {
-      header.style.backgroundColor = ((_c = (_b = theme2.inbox) == null ? void 0 : _b.header) == null ? void 0 : _c.backgroundColor) ?? CourierColors.white[500];
-      header.style.boxShadow = ((_e = (_d = theme2.inbox) == null ? void 0 : _d.header) == null ? void 0 : _e.shadow) ?? `0px 1px 0px 0px ${CourierColors.gray[500]}`;
+    var _a, _b;
+    if (this._style) {
+      this._style.textContent = CourierInboxHeader.getStyles(this.theme);
     }
-    (_f = this._filterMenu) == null ? void 0 : _f.setOptions(this.getFilterOptions());
-    (_g = this._actionMenu) == null ? void 0 : _g.setOptions(this.getActionOptions());
+    (_a = this._filterMenu) == null ? void 0 : _a.setOptions(this.getFilterOptions());
+    (_b = this._actionMenu) == null ? void 0 : _b.setOptions(this.getActionOptions());
   }
   handleOptionMenuItemClick(feedType, option) {
     this._feedType = feedType;
@@ -2869,12 +3014,9 @@ class CourierInboxHeader extends CourierElement {
     this._onFeedTypeChange(feedType);
   }
   render(props) {
+    var _a, _b;
     this._feedType = props.feedType;
     this._unreadCount = props.unreadCount;
-    this.refreshTitleSection();
-  }
-  refreshTitleSection() {
-    var _a, _b;
     const option = this.getFilterOptions().find((opt) => ["inbox", "archive"].includes(opt.id) && opt.id === this._feedType);
     if (option) {
       (_a = this._titleSection) == null ? void 0 : _a.updateSelectedOption(option, this._feedType, this._feedType === "inbox" ? this._unreadCount : 0);
@@ -2882,11 +3024,7 @@ class CourierInboxHeader extends CourierElement {
     }
   }
   build(newElement) {
-    var _a;
     super.build(newElement);
-    this._style = document.createElement("style");
-    this._style.textContent = this.getStyles();
-    (_a = this.shadow) == null ? void 0 : _a.appendChild(this._style);
     this.refreshTheme();
   }
   defaultElement() {
@@ -2907,53 +3045,46 @@ class CourierInboxHeader extends CourierElement {
     actions.className = "actions";
     actions.appendChild(this._filterMenu);
     actions.appendChild(this._actionMenu);
-    const container = document.createElement("div");
-    container.className = "courier-inbox-header";
-    container.appendChild(this._titleSection);
-    container.appendChild(spacer);
-    container.appendChild(actions);
-    return container;
-  }
-  getStyles() {
+    const headerContent = document.createElement("div");
+    headerContent.className = "header-content";
+    headerContent.appendChild(this._titleSection);
+    headerContent.appendChild(spacer);
+    headerContent.appendChild(actions);
+    return headerContent;
+  }
+  static getStyles(theme2) {
+    var _a, _b, _c, _d;
     return `
-      :host {
-        z-index: 100;
-      }
-
-      .courier-inbox-header {
+      ${CourierInboxHeader.id} {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding: 10px 10px 10px 16px;
-        background-color: ${CourierColors.white[500]};
-        box-shadow: 0px 1px 0px 0px ${CourierColors.gray[500]};
+        flex-shrink: 0;
       }
 
-      .header-content {
+      ${CourierInboxHeader.id} .header-content {
+        padding: 10px 10px 10px 16px;
+        background-color: ${((_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.backgroundColor) ?? CourierColors.white[500]};
+        box-shadow: ${((_d = (_c = theme2.inbox) == null ? void 0 : _c.header) == null ? void 0 : _d.shadow) ?? `0px 1px 0px 0px red`};
         display: flex;
         align-items: center;
+        justify-content: space-between;
         flex: 1;
+        z-index: 100;
       }
 
-      .spacer {
+      ${CourierInboxHeader.id} .spacer {
         flex: 1;
       }
 
-      .actions {
+      ${CourierInboxHeader.id} .actions {
         display: flex;
         align-items: center;
         gap: 4px;
       }
     `;
   }
-  // Disconnect the theme subscription
-  disconnectedCallback() {
-    this._themeSubscription.unsubscribe();
-  }
-}
-if (!customElements.get("courier-inbox-header")) {
-  customElements.define("courier-inbox-header", CourierInboxHeader);
 }
+registerElement(CourierInboxHeader);
 class CourierInboxDataStoreListener {
   constructor(events) {
     __publicField(this, "events");
@@ -3424,7 +3555,7 @@ const defaultDarkTheme = {
     },
     loading: {
       animation: {
-        barColor: CourierColors.white[500],
+        barColor: CourierColors.gray[400],
         barHeight: "14px",
         barBorderRadius: "14px",
         duration: "2s"
@@ -3732,20 +3863,19 @@ class CourierInboxThemeManager {
     this._subscriptions = [];
   }
 }
-class CourierInbox extends HTMLElement {
+class CourierInbox extends CourierBaseElement {
   constructor(themeManager) {
-    var _a;
     super();
     // State
     __publicField(this, "_currentFeed", "inbox");
     // Theming
     __publicField(this, "_themeManager");
     // Components
-    __publicField(this, "_shadow");
+    __publicField(this, "_inboxStyle");
+    __publicField(this, "_unreadIndicatorStyle");
     __publicField(this, "_list");
     __publicField(this, "_datastoreListener");
     __publicField(this, "_authListener");
-    __publicField(this, "_style");
     // Header
     __publicField(this, "_header");
     __publicField(this, "_headerFactory");
@@ -3760,8 +3890,27 @@ class CourierInbox extends HTMLElement {
       feedType: this._currentFeed,
       height: "768px"
     });
-    this._shadow = this.attachShadow({ mode: "open" });
     this._themeManager = themeManager ?? new CourierInboxThemeManager(defaultLightTheme);
+  }
+  static get id() {
+    return "courier-inbox";
+  }
+  get theme() {
+    return this._themeManager.getTheme();
+  }
+  setLightTheme(theme2) {
+    this._themeManager.setLightTheme(theme2);
+  }
+  setDarkTheme(theme2) {
+    this._themeManager.setDarkTheme(theme2);
+  }
+  static get observedAttributes() {
+    return ["height", "light-theme", "dark-theme", "mode", "message-click", "message-action-click", "message-long-press"];
+  }
+  onComponentMounted() {
+    var _a, _b;
+    this._inboxStyle = injectGlobalStyle(CourierInbox.id, this.getStyles());
+    this._unreadIndicatorStyle = injectGlobalStyle(CourierUnreadCountBadge.id, CourierUnreadCountBadge.getStyles(this.theme));
     this._header = new CourierInboxHeader({
       themeManager: this._themeManager,
       onFeedTypeChange: (feedType) => {
@@ -3769,20 +3918,20 @@ class CourierInbox extends HTMLElement {
       }
     });
     this._header.build(void 0);
-    this._shadow.appendChild(this._header);
+    this.appendChild(this._header);
     this._list = new CourierInboxList({
       themeManager: this._themeManager,
       onRefresh: () => {
         this.refresh();
       },
       onPaginationTrigger: async (feedType) => {
-        var _a2, _b;
+        var _a2, _b2;
         try {
           await CourierInboxDatastore.shared.fetchNextPageOfMessages({
             feedType
           });
         } catch (error) {
-          (_b = (_a2 = Courier.shared.client) == null ? void 0 : _a2.options.logger) == null ? void 0 : _b.error("Failed to fetch next page of messages:", error);
+          (_b2 = (_a2 = Courier.shared.client) == null ? void 0 : _a2.options.logger) == null ? void 0 : _b2.error("Failed to fetch next page of messages:", error);
         }
       },
       onMessageClick: (message, index) => {
@@ -3814,41 +3963,45 @@ class CourierInbox extends HTMLElement {
         (_a2 = this._onMessageLongPress) == null ? void 0 : _a2.call(this, { message, index });
       }
     });
-    this._style = document.createElement("style");
     this.refreshTheme();
-    this._shadow.appendChild(this._style);
-    this._shadow.appendChild(this._list);
+    this.appendChild(this._list);
     this._datastoreListener = new CourierInboxDataStoreListener({
       onError: (error) => {
-        this._list.setError(error);
+        var _a2;
+        (_a2 = this._list) == null ? void 0 : _a2.setError(error);
       },
       onDataSetChange: (dataSet, feedType) => {
+        var _a2;
         if (this._currentFeed === feedType) {
-          this._list.setDataSet(dataSet);
+          (_a2 = this._list) == null ? void 0 : _a2.setDataSet(dataSet);
           this.updateHeader();
         }
       },
       onPageAdded: (dataSet, feedType) => {
+        var _a2;
         if (this._currentFeed === feedType) {
-          this._list.addPage(dataSet);
+          (_a2 = this._list) == null ? void 0 : _a2.addPage(dataSet);
           this.updateHeader();
         }
       },
       onMessageAdd: (message, index, feedType) => {
+        var _a2;
         if (this._currentFeed === feedType) {
-          this._list.addMessage(message, index);
+          (_a2 = this._list) == null ? void 0 : _a2.addMessage(message, index);
           this.updateHeader();
         }
       },
       onMessageRemove: (_, index, feedType) => {
+        var _a2;
         if (this._currentFeed === feedType) {
-          this._list.removeMessage(index);
+          (_a2 = this._list) == null ? void 0 : _a2.removeMessage(index);
           this.updateHeader();
         }
       },
       onMessageUpdate: (message, index, feedType) => {
+        var _a2;
         if (this._currentFeed === feedType) {
-          this._list.updateMessage(message, index);
+          (_a2 = this._list) == null ? void 0 : _a2.updateMessage(message, index);
           this.updateHeader();
         }
       },
@@ -3863,39 +4016,38 @@ class CourierInbox extends HTMLElement {
     this._authListener = Courier.shared.addAuthenticationListener((_) => {
       this.refresh();
     });
-    if ((_a = Courier.shared.client) == null ? void 0 : _a.options.userId) {
-      this.refresh();
+    if (!((_a = Courier.shared.client) == null ? void 0 : _a.options.userId)) {
+      (_b = Courier.shared.client) == null ? void 0 : _b.options.logger.error("No user signed in. Please call Courier.shared.signIn(...) to load the inbox.");
+      return;
     }
+    this.refresh();
   }
-  get theme() {
-    return this._themeManager.getTheme();
-  }
-  setLightTheme(theme2) {
-    this._themeManager.setLightTheme(theme2);
-  }
-  setDarkTheme(theme2) {
-    this._themeManager.setDarkTheme(theme2);
-  }
-  static get observedAttributes() {
-    return ["height", "light-theme", "dark-theme", "mode", "message-click", "message-action-click", "message-long-press"];
+  onComponentUnmounted() {
+    var _a, _b, _c, _d;
+    this._themeManager.cleanup();
+    (_a = this._datastoreListener) == null ? void 0 : _a.remove();
+    (_b = this._authListener) == null ? void 0 : _b.remove();
+    (_c = this._inboxStyle) == null ? void 0 : _c.remove();
+    (_d = this._unreadIndicatorStyle) == null ? void 0 : _d.remove();
   }
   refreshTheme() {
-    this._style.textContent = this.getStyles();
+    if (this._inboxStyle) {
+      this._inboxStyle.textContent = this.getStyles();
+    }
+    if (this._unreadIndicatorStyle) {
+      this._unreadIndicatorStyle.textContent = CourierUnreadCountBadge.getStyles(this.theme);
+    }
   }
   getStyles() {
     return `
-      :host {
+      ${CourierInbox.id} {
         display: flex;
         flex-direction: column;
         width: 100%;
         height: ${this._defaultProps.height};
       }
 
-      courier-inbox-header {
-        flex-shrink: 0;
-      }
-
-      courier-inbox-list {
+      ${CourierInbox.id} courier-inbox-list {
         flex: 1;
         overflow-y: auto;
         overflow-x: hidden;
@@ -3911,19 +4063,24 @@ class CourierInbox extends HTMLElement {
     this.updateHeader();
   }
   setLoadingState(factory) {
-    this._list.setLoadingStateFactory(factory);
+    var _a;
+    (_a = this._list) == null ? void 0 : _a.setLoadingStateFactory(factory);
   }
   setEmptyState(factory) {
-    this._list.setEmptyStateFactory(factory);
+    var _a;
+    (_a = this._list) == null ? void 0 : _a.setEmptyStateFactory(factory);
   }
   setErrorState(factory) {
-    this._list.setErrorStateFactory(factory);
+    var _a;
+    (_a = this._list) == null ? void 0 : _a.setErrorStateFactory(factory);
   }
   setListItem(factory) {
-    this._list.setListItemFactory(factory);
+    var _a;
+    (_a = this._list) == null ? void 0 : _a.setListItemFactory(factory);
   }
   setPaginationItem(factory) {
-    this._list.setPaginationItemFactory(factory);
+    var _a;
+    (_a = this._list) == null ? void 0 : _a.setPaginationItemFactory(factory);
   }
   onMessageClick(handler) {
     this._onMessageClick = handler;
@@ -3935,30 +4092,31 @@ class CourierInbox extends HTMLElement {
     this._onMessageLongPress = handler;
   }
   setFeedType(feedType) {
+    var _a;
     this._currentFeed = feedType;
-    this._list.setFeedType(feedType);
+    (_a = this._list) == null ? void 0 : _a.setFeedType(feedType);
     this.updateHeader();
     this.load({
-      feedType: this._currentFeed,
       canUseCache: true
     });
   }
   updateHeader() {
+    var _a, _b, _c, _d;
     const props = {
       feedType: this._currentFeed,
       unreadCount: CourierInboxDatastore.shared.unreadCount,
-      messageCount: this._list.messages.length
+      messageCount: ((_a = this._list) == null ? void 0 : _a.messages.length) ?? 0
     };
     switch (this._headerFactory) {
       case void 0:
-        this._header.render(props);
+        (_b = this._header) == null ? void 0 : _b.render(props);
         break;
       case null:
-        this._header.build(null);
+        (_c = this._header) == null ? void 0 : _c.build(null);
         break;
       default:
         const headerElement = this._headerFactory(props);
-        this._header.build(headerElement);
+        (_d = this._header) == null ? void 0 : _d.build(headerElement);
         break;
     }
   }
@@ -3968,19 +4126,9 @@ class CourierInbox extends HTMLElement {
   }
   refresh() {
     this.load({
-      feedType: this._currentFeed,
       canUseCache: false
     });
   }
-  connectedCallback() {
-    this.refresh();
-  }
-  disconnectedCallback() {
-    var _a, _b;
-    this._themeManager.cleanup();
-    (_a = this._datastoreListener) == null ? void 0 : _a.remove();
-    (_b = this._authListener) == null ? void 0 : _b.remove();
-  }
   attributeChangedCallback(name, oldValue, newValue) {
     var _a, _b, _c, _d, _e, _f;
     if (oldValue === newValue) return;
@@ -4038,22 +4186,35 @@ class CourierInbox extends HTMLElement {
     }
   }
 }
-if (!customElements.get("courier-inbox")) {
-  customElements.define("courier-inbox", CourierInbox);
-}
-class CourierInboxMenuButton extends CourierElement {
+registerElement(CourierInbox);
+class CourierInboxMenuButton extends CourierFactoryElement {
   constructor(themeBus) {
     super();
     // Theme
     __publicField(this, "_themeSubscription");
     // Components
+    __publicField(this, "_style");
     __publicField(this, "_container");
     __publicField(this, "_triggerButton");
     __publicField(this, "_unreadCountBadge");
     this._themeSubscription = themeBus.subscribe((_) => {
-      this.updateTheme();
+      this.refreshTheme();
     });
   }
+  static get id() {
+    return "courier-inbox-menu-button";
+  }
+  get theme() {
+    return this._themeSubscription.manager.getTheme();
+  }
+  onComponentMounted() {
+    this._style = injectGlobalStyle(CourierInboxMenuButton.id, CourierInboxMenuButton.getStyles(this.theme));
+  }
+  onComponentUnmounted() {
+    var _a;
+    this._themeSubscription.unsubscribe();
+    (_a = this._style) == null ? void 0 : _a.remove();
+  }
   defaultElement() {
     this._container = document.createElement("div");
     this._container.className = "menu-button-container";
@@ -4063,23 +4224,20 @@ class CourierInboxMenuButton extends CourierElement {
       location: "button"
     });
     this._unreadCountBadge.id = "unread-badge";
-    const style = document.createElement("style");
-    style.textContent = this.getStyles();
-    this._container.appendChild(style);
     this._container.appendChild(this._triggerButton);
     this._container.appendChild(this._unreadCountBadge);
-    this.shadow.appendChild(this._container);
-    this.updateTheme();
+    this.appendChild(this._container);
+    this.refreshTheme();
     return this._container;
   }
-  getStyles() {
+  static getStyles(_theme) {
     return `
-      .menu-button-container {
+      ${CourierInboxMenuButton.id} .menu-button-container {
         position: relative;
         display: inline-block;
       }
         
-      #unread-badge {
+      ${CourierInboxMenuButton.id} #unread-badge {
         position: absolute;
         top: -8px;
         left: 50%;
@@ -4090,26 +4248,20 @@ class CourierInboxMenuButton extends CourierElement {
   onUnreadCountChange(unreadCount) {
     var _a;
     (_a = this._unreadCountBadge) == null ? void 0 : _a.setCount(unreadCount);
-    this.updateTheme();
-  }
-  updateTheme() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
-    const theme2 = this._themeSubscription.manager.getTheme();
-    (_d = this._triggerButton) == null ? void 0 : _d.updateIconColor(((_c = (_b = (_a = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _a.button) == null ? void 0 : _b.icon) == null ? void 0 : _c.color) ?? CourierColors.black[500]);
-    (_h = this._triggerButton) == null ? void 0 : _h.updateIconSVG(((_g = (_f = (_e = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _e.button) == null ? void 0 : _f.icon) == null ? void 0 : _g.svg) ?? CourierIconSVGs.inbox);
-    (_k = this._triggerButton) == null ? void 0 : _k.updateBackgroundColor(((_j = (_i = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _i.button) == null ? void 0 : _j.backgroundColor) ?? "transparent");
-    (_n = this._triggerButton) == null ? void 0 : _n.updateHoverBackgroundColor(((_m = (_l = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _l.button) == null ? void 0 : _m.hoverBackgroundColor) ?? CourierColors.black[50010]);
-    (_q = this._triggerButton) == null ? void 0 : _q.updateActiveBackgroundColor(((_p = (_o = theme2 == null ? void 0 : theme2.popup) == null ? void 0 : _o.button) == null ? void 0 : _p.activeBackgroundColor) ?? CourierColors.black[50020]);
-    (_r = this._unreadCountBadge) == null ? void 0 : _r.refreshTheme("button");
+    this.refreshTheme();
   }
-  disconnectedCallback() {
-    this._themeSubscription.unsubscribe();
+  refreshTheme() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    (_e = this._triggerButton) == null ? void 0 : _e.updateIconColor(((_d = (_c = (_b = (_a = this.theme) == null ? void 0 : _a.popup) == null ? void 0 : _b.button) == null ? void 0 : _c.icon) == null ? void 0 : _d.color) ?? CourierColors.black[500]);
+    (_j = this._triggerButton) == null ? void 0 : _j.updateIconSVG(((_i = (_h = (_g = (_f = this.theme) == null ? void 0 : _f.popup) == null ? void 0 : _g.button) == null ? void 0 : _h.icon) == null ? void 0 : _i.svg) ?? CourierIconSVGs.inbox);
+    (_n = this._triggerButton) == null ? void 0 : _n.updateBackgroundColor(((_m = (_l = (_k = this.theme) == null ? void 0 : _k.popup) == null ? void 0 : _l.button) == null ? void 0 : _m.backgroundColor) ?? "transparent");
+    (_r = this._triggerButton) == null ? void 0 : _r.updateHoverBackgroundColor(((_q = (_p = (_o = this.theme) == null ? void 0 : _o.popup) == null ? void 0 : _p.button) == null ? void 0 : _q.hoverBackgroundColor) ?? CourierColors.black[50010]);
+    (_v = this._triggerButton) == null ? void 0 : _v.updateActiveBackgroundColor(((_u = (_t = (_s = this.theme) == null ? void 0 : _s.popup) == null ? void 0 : _t.button) == null ? void 0 : _u.activeBackgroundColor) ?? CourierColors.black[50020]);
+    (_w = this._unreadCountBadge) == null ? void 0 : _w.refreshTheme("button");
   }
 }
-if (!customElements.get("courier-inbox-menu-button")) {
-  customElements.define("courier-inbox-menu-button", CourierInboxMenuButton);
-}
-class CourierInboxMenu extends HTMLElement {
+registerElement(CourierInboxMenuButton);
+class CourierInboxPopupMenu extends CourierBaseElement {
   constructor() {
     super();
     // State
@@ -4131,28 +4283,26 @@ class CourierInboxMenu extends HTMLElement {
     __publicField(this, "_datastoreListener");
     // Factories
     __publicField(this, "_popupMenuButtonFactory");
-    const shadow = this.attachShadow({ mode: "open" });
-    this._triggerButton = new CourierInboxMenuButton(this._themeManager);
-    this._triggerButton.build(void 0);
-    this._popup = document.createElement("div");
-    this._popup.className = "popup";
-    this._inbox = new CourierInbox(this._themeManager);
-    this._inbox.setAttribute("height", "100%");
-    this._style = document.createElement("style");
-    this.refreshTheme();
-    shadow.appendChild(this._style);
-    shadow.appendChild(this._triggerButton);
-    shadow.appendChild(this._popup);
-    this._popup.appendChild(this._inbox);
-    this._triggerButton.addEventListener("click", this.togglePopup.bind(this));
-    document.addEventListener("click", this.handleOutsideClick.bind(this));
-    this.updatePopupPosition();
-    this._datastoreListener = new CourierInboxDataStoreListener(this);
-    CourierInboxDatastore.shared.addDataStoreListener(this._datastoreListener);
+    __publicField(this, "handleOutsideClick", (event) => {
+      if (!this._popup) return;
+      const SAFE_SELECTORS = [
+        "courier-inbox-option-menu"
+      ];
+      const clickIsInsideAllowedArea = event.composedPath().some((node) => {
+        if (!(node instanceof HTMLElement)) return false;
+        if (node === this._popup || this._popup.contains(node)) return true;
+        return SAFE_SELECTORS.some((sel) => node.matches(sel));
+      });
+      if (clickIsInsideAllowedArea) return;
+      this._popup.style.display = "none";
+    });
     this._themeManager.subscribe((_) => {
       this.refreshTheme();
     });
   }
+  static get id() {
+    return "courier-inbox-popup-menu";
+  }
   get theme() {
     return this._themeManager.getTheme();
   }
@@ -4165,45 +4315,71 @@ class CourierInboxMenu extends HTMLElement {
   static get observedAttributes() {
     return ["popup-alignment", "message-click", "message-action-click", "message-long-press", "popup-width", "popup-height", "top", "right", "bottom", "left", "light-theme", "dark-theme", "mode"];
   }
+  onComponentMounted() {
+    this._style = injectGlobalStyle(CourierInboxPopupMenu.id, CourierInboxPopupMenu.getStyles(this.theme, this._width, this._height));
+    this._triggerButton = new CourierInboxMenuButton(this._themeManager);
+    this._triggerButton.build(void 0);
+    this._popup = document.createElement("div");
+    this._popup.className = "popup";
+    this._inbox = new CourierInbox(this._themeManager);
+    this._inbox.setAttribute("height", "100%");
+    this.refreshTheme();
+    this.appendChild(this._triggerButton);
+    this.appendChild(this._popup);
+    this._popup.appendChild(this._inbox);
+    this._triggerButton.addEventListener("click", this.togglePopup.bind(this));
+    document.addEventListener("click", this.handleOutsideClick.bind(this));
+    this.updatePopupPosition();
+    this._datastoreListener = new CourierInboxDataStoreListener(this);
+    CourierInboxDatastore.shared.addDataStoreListener(this._datastoreListener);
+  }
+  onComponentUnmounted() {
+    var _a, _b;
+    (_a = this._style) == null ? void 0 : _a.remove();
+    (_b = this._datastoreListener) == null ? void 0 : _b.remove();
+    this._themeManager.cleanup();
+  }
   refreshTheme() {
-    this._style.textContent = this.getStyles();
+    if (this._style) {
+      this._style.textContent = CourierInboxPopupMenu.getStyles(this.theme, this._width, this._height);
+    }
   }
-  getStyles() {
+  static getStyles(theme2, width, height) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     return `
-      :host {
+      ${CourierInboxPopupMenu.id} {
         display: inline-block;
         position: relative;
       }
 
-      .menu-button-container {
+      ${CourierInboxPopupMenu.id} .menu-button-container {
         position: relative;
         display: inline-block;
       }
 
-      .popup {
+      ${CourierInboxPopupMenu.id} .popup {
         display: none;
         position: absolute;
-        background: ${((_b = (_a = this.theme.popup) == null ? void 0 : _a.window) == null ? void 0 : _b.backgroundColor) ?? "red"};
-        border-radius: ${((_d = (_c = this.theme.popup) == null ? void 0 : _c.window) == null ? void 0 : _d.borderRadius) ?? "8px"};
-        border: ${((_f = (_e = this.theme.popup) == null ? void 0 : _e.window) == null ? void 0 : _f.border) ?? `1px solid red`};
-        box-shadow: ${((_h = (_g = this.theme.popup) == null ? void 0 : _g.window) == null ? void 0 : _h.shadow) ?? `0px 8px 16px -4px red`};
+        background: ${((_b = (_a = theme2.popup) == null ? void 0 : _a.window) == null ? void 0 : _b.backgroundColor) ?? "red"};
+        border-radius: ${((_d = (_c = theme2.popup) == null ? void 0 : _c.window) == null ? void 0 : _d.borderRadius) ?? "8px"};
+        border: ${((_f = (_e = theme2.popup) == null ? void 0 : _e.window) == null ? void 0 : _f.border) ?? `1px solid red`};
+        box-shadow: ${((_h = (_g = theme2.popup) == null ? void 0 : _g.window) == null ? void 0 : _h.shadow) ?? `0px 8px 16px -4px red`};
         z-index: 1000;
-        width: ${this._width};
-        height: ${this._height};
+        width: ${width};
+        height: ${height};
         overflow: hidden;
         transform: translateZ(0);
         will-change: transform;
       }
         
-      #unread-badge {
+      ${CourierInboxPopupMenu.id} #unread-badge {
         position: absolute;
         top: -8px;
         left: 50%;
         pointer-events: none;
       }
 
-      courier-inbox {
+      ${CourierInboxPopupMenu.id} courier-inbox {
         height: 100%;
       }
     `;
@@ -4259,13 +4435,16 @@ class CourierInboxMenu extends HTMLElement {
     this.render();
   }
   onMessageClick(handler) {
-    this._inbox.onMessageClick(handler);
+    var _a;
+    (_a = this._inbox) == null ? void 0 : _a.onMessageClick(handler);
   }
   onMessageActionClick(handler) {
-    this._inbox.onMessageActionClick(handler);
+    var _a;
+    (_a = this._inbox) == null ? void 0 : _a.onMessageActionClick(handler);
   }
   onMessageLongPress(handler) {
-    this._inbox.onMessageLongPress(handler);
+    var _a;
+    (_a = this._inbox) == null ? void 0 : _a.onMessageLongPress(handler);
   }
   isValidPosition(value) {
     const validPositions = [
@@ -4282,6 +4461,7 @@ class CourierInboxMenu extends HTMLElement {
     return validPositions.includes(value);
   }
   updatePopupPosition() {
+    if (!this._popup) return;
     this._popup.style.top = "";
     this._popup.style.bottom = "";
     this._popup.style.left = "";
@@ -4334,25 +4514,19 @@ class CourierInboxMenu extends HTMLElement {
   }
   togglePopup(event) {
     event.stopPropagation();
+    if (!this._popup) return;
     const isVisible = this._popup.style.display === "block";
-    if (!isVisible) {
-      this._popup.style.display = "block";
-    } else {
-      this._popup.style.display = "none";
-    }
-  }
-  handleOutsideClick(event) {
-    if (!this.contains(event.target)) {
-      this._popup.style.display = "none";
-    }
+    this._popup.style.display = isVisible ? "none" : "block";
   }
   setContent(element) {
+    if (!this._inbox) return;
     this._inbox.innerHTML = "";
     this._inbox.appendChild(element);
   }
   setSize(width, height) {
     this._width = width;
     this._height = height;
+    if (!this._popup) return;
     this._popup.style.width = width;
     this._popup.style.height = height;
   }
@@ -4366,29 +4540,37 @@ class CourierInboxMenu extends HTMLElement {
     }
   }
   setFeedType(feedType) {
-    this._inbox.setFeedType(feedType);
+    var _a;
+    (_a = this._inbox) == null ? void 0 : _a.setFeedType(feedType);
   }
   // Factory methods
   setPopupHeader(factory) {
-    this._inbox.setHeader(factory);
+    var _a;
+    (_a = this._inbox) == null ? void 0 : _a.setHeader(factory);
   }
   removePopupHeader() {
-    this._inbox.removeHeader();
+    var _a;
+    (_a = this._inbox) == null ? void 0 : _a.removeHeader();
   }
   setPopupLoadingState(factory) {
-    this._inbox.setLoadingState(factory);
+    var _a;
+    (_a = this._inbox) == null ? void 0 : _a.setLoadingState(factory);
   }
   setPopupEmptyState(factory) {
-    this._inbox.setEmptyState(factory);
+    var _a;
+    (_a = this._inbox) == null ? void 0 : _a.setEmptyState(factory);
   }
   setPopupErrorState(factory) {
-    this._inbox.setErrorState(factory);
+    var _a;
+    (_a = this._inbox) == null ? void 0 : _a.setErrorState(factory);
   }
   setPopupListItem(factory) {
-    this._inbox.setListItem(factory);
+    var _a;
+    (_a = this._inbox) == null ? void 0 : _a.setListItem(factory);
   }
   setPopupPaginationItem(factory) {
-    this._inbox.setPaginationItem(factory);
+    var _a;
+    (_a = this._inbox) == null ? void 0 : _a.setPaginationItem(factory);
   }
   setPopupMenuButton(factory) {
     this._popupMenuButtonFactory = factory;
@@ -4396,6 +4578,7 @@ class CourierInboxMenu extends HTMLElement {
   }
   render() {
     const unreadCount = CourierInboxDatastore.shared.unreadCount;
+    if (!this._triggerButton) return;
     switch (this._popupMenuButtonFactory) {
       case void 0:
       case null:
@@ -4408,15 +4591,8 @@ class CourierInboxMenu extends HTMLElement {
         break;
     }
   }
-  disconnectedCallback() {
-    var _a;
-    (_a = this._datastoreListener) == null ? void 0 : _a.remove();
-    this._themeManager.cleanup();
-  }
-}
-if (!customElements.get("courier-inbox-menu")) {
-  customElements.define("courier-inbox-menu", CourierInboxMenu);
 }
+registerElement(CourierInboxPopupMenu);
 function markAsRead(message) {
   return CourierInboxDatastore.shared.readMessage({ message });
 }
@@ -4454,9 +4630,9 @@ export {
   CourierInboxDatastore,
   CourierInboxDatastoreEvents,
   CourierInboxHeader,
-  CourierInboxMenu,
+  CourierInboxListItem,
+  CourierInboxPopupMenu,
   CourierInboxThemeManager,
-  CourierListItem,
   archiveMessage,
   clickMessage,
   defaultDarkTheme,