@trycourier/courier-ui-inbox 1.0.7-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,15 +81,52 @@ const addSystemThemeModeListener = (callback) => {
     mediaQuery.removeEventListener("change", handler);
   };
 };
-const BaseElement = typeof window === "undefined" ? class {
-  constructor() {
+const HTMLElementBase = (() => {
+  try {
+    return typeof HTMLElement === "undefined" ? class {
+    } : HTMLElement;
+  } catch {
+    return class {
+    };
   }
-} : class extends HTMLElement {
+})();
+class CourierBaseElement extends HTMLElementBase {
   constructor() {
-    super();
+    super(...arguments);
+    __privateAdd(this, _isInitialised, false);
   }
-};
-class CourierSystemThemeElement extends BaseElement {
+  /** 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");
@@ -92,13 +137,16 @@ class CourierSystemThemeElement extends BaseElement {
       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(_) {
   }
@@ -153,6 +201,9 @@ class CourierButton extends CourierSystemThemeElement {
       }
     });
   }
+  static get id() {
+    return "courier-button";
+  }
   getStyles(props) {
     const defaultTextColor = () => {
       const secondary = CourierButtonVariants.secondary(this.currentSystemTheme);
@@ -254,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 BaseElement {
+class CourierIcon extends CourierBaseElement {
   constructor(color, svg) {
     super();
     __publicField2(this, "_color");
@@ -271,6 +322,9 @@ class CourierIcon extends BaseElement {
     shadow.appendChild(this._style);
     this.refresh();
   }
+  static get id() {
+    return "courier-icon";
+  }
   getStyles(color) {
     return `
       :host {
@@ -305,7 +359,7 @@ class CourierIcon extends BaseElement {
     this.refresh();
   }
 }
-class CourierLink extends BaseElement {
+class CourierLink extends CourierBaseElement {
   constructor() {
     super();
     __publicField2(this, "link");
@@ -369,6 +423,9 @@ class CourierLink extends BaseElement {
     this.updateUnderline();
     this.updateMode();
   }
+  static get id() {
+    return "courier-link";
+  }
   connectedCallback() {
     const slot = document.createElement("slot");
     this.link.appendChild(slot);
@@ -467,20 +524,18 @@ __publicField2(CourierLink, "observedAttributes", [
   "font-family",
   "font-size"
 ]);
-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() {
@@ -494,7 +549,7 @@ class CourierElement extends CourierSystemThemeElement {
     return element;
   }
 }
-class CourierInfoState extends CourierElement {
+class CourierInfoState extends CourierFactoryElement {
   constructor(props) {
     super();
     __publicField2(this, "_props");
@@ -504,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");
@@ -518,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();
@@ -548,6 +606,8 @@ class CourierInfoState extends CourierElement {
         gap: 16px;
         text-align: center;
         padding: 24px;
+        box-sizing: border-box;
+        height: 100%;
       }
 
       .container h2 {
@@ -572,7 +632,7 @@ class CourierInfoState extends CourierElement {
     this._buttonClickCallback = callback;
   }
 }
-class CourierIconButton extends BaseElement {
+class CourierIconButton extends CourierBaseElement {
   constructor(svg, color, backgroundColor, hoverBackgroundColor, activeBackgroundColor, borderRadius, height, width) {
     super();
     __publicField2(this, "_backgroundColor");
@@ -600,6 +660,9 @@ class CourierIconButton extends BaseElement {
     this._button.appendChild(this._icon);
     shadow.appendChild(this._button);
   }
+  static get id() {
+    return "courier-icon-button";
+  }
   refresh() {
     this._style.textContent = this.getStyles();
   }
@@ -665,20 +728,29 @@ class CourierIconButton extends BaseElement {
     this.refresh();
   }
 }
-function registerElement(name, element) {
-  if (typeof window !== "undefined" && !customElements.get(name)) {
-    customElements.define(name, element);
+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 },
-  { name: "courier-system-theme", class: CourierSystemThemeElement }
-];
-components.forEach(({ name, class: componentClass }) => registerElement(name, componentClass));
+registerElement(CourierButton);
+registerElement(CourierIcon);
+registerElement(CourierLink);
+registerElement(CourierInfoState);
+registerElement(CourierIconButton);
+registerElement(CourierSystemThemeElement);
 function copyMessage(message) {
   const copy = {
     ...message
@@ -707,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))
@@ -717,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`;
@@ -724,29 +800,28 @@ function getMessageTime(message) {
   if (diffInSeconds < 31536e3) return `${Math.floor(diffInSeconds / 604800)}w`;
   return `${Math.floor(diffInSeconds / 31536e3)}y`;
 }
-class CourierInboxListItemMenu extends BaseElement {
+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"};
@@ -759,12 +834,13 @@ class CourierInboxListItemMenu extends BaseElement {
         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;
@@ -772,7 +848,7 @@ class CourierInboxListItemMenu extends BaseElement {
         flex-direction: row;
       }
 
-      li.menu-item {
+      ${CourierInboxListItemMenu.id} li.menu-item {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -787,11 +863,11 @@ class CourierInboxListItemMenu extends BaseElement {
     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();
@@ -813,13 +889,15 @@ class CourierInboxListItemMenu extends BaseElement {
     });
   }
   show() {
+    this.style.display = "block";
     this.classList.add("visible");
   }
   hide() {
+    this.style.display = "none";
     this.classList.remove("visible");
   }
 }
-registerElement("courier-inbox-list-item-menu", CourierInboxListItemMenu);
+registerElement(CourierInboxListItemMenu);
 const _CourierInboxDatastore = class _CourierInboxDatastore {
   constructor() {
     __publicField(this, "_inboxDataSet");
@@ -850,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) {
@@ -883,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);
@@ -929,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);
     }
   }
   /**
@@ -1017,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));
   }
   /**
@@ -1444,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);
     });
   }
@@ -1511,7 +1578,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
 };
 __publicField(_CourierInboxDatastore, "instance");
 let CourierInboxDatastore = _CourierInboxDatastore;
-class CourierListItem extends BaseElement {
+class CourierInboxListItem extends CourierBaseElement {
   constructor(theme2) {
     super();
     // State
@@ -1523,7 +1590,6 @@ class CourierListItem extends BaseElement {
     __publicField(this, "_titleElement");
     __publicField(this, "_subtitleElement");
     __publicField(this, "_timeElement");
-    __publicField(this, "_style");
     __publicField(this, "_menu");
     __publicField(this, "_unreadIndicator");
     __publicField(this, "_actionsContainer");
@@ -1536,27 +1602,30 @@ class CourierListItem extends BaseElement {
     __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 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();
@@ -1565,7 +1634,7 @@ class CourierListItem extends BaseElement {
     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) {
@@ -1575,6 +1644,133 @@ class CourierListItem extends BaseElement {
     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", () => {
@@ -1667,7 +1863,7 @@ class CourierListItem extends BaseElement {
   _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();
@@ -1677,158 +1873,12 @@ class CourierListItem extends BaseElement {
   _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-inbox-list-item-menu:hover, courier-inbox-list-item-menu *:hover, courier-button:hover, courier-button *:hover) {
-          background-color: ${(listItem == null ? void 0 : listItem.backgroundColor) ?? "transparent"};
-        }
-      }
-      :host(:active):has(courier-inbox-list-item-menu:active, courier-inbox-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-inbox-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;
@@ -1846,90 +1896,134 @@ class CourierListItem extends BaseElement {
   }
   // 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);
-    });
+    }
   }
 }
-registerElement("courier-inbox-list-item", CourierListItem);
-class CourierInboxSkeletonListItem extends BaseElement {
-  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%;
       }
     `;
   }
 }
-registerElement("courier-inbox-skeleton-list-item", CourierInboxSkeletonListItem);
-class CourierSkeletonAnimatedRow extends BaseElement {
-  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;
@@ -1939,15 +2033,15 @@ class CourierSkeletonAnimatedRow extends BaseElement {
     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(
@@ -1957,11 +2051,11 @@ class CourierSkeletonAnimatedRow extends BaseElement {
           ${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;
         }
@@ -1972,30 +2066,38 @@ class CourierSkeletonAnimatedRow extends BaseElement {
     `;
   }
 }
-registerElement("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%;
@@ -2004,78 +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%;
       }
     `;
   }
 }
-registerElement("courier-inbox-skeleton-list", CourierInboxSkeletonList);
-class CourierInboxPaginationListItem extends BaseElement {
+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();
-  }
 }
-registerElement("courier-inbox-pagination-list-item", CourierInboxPaginationListItem);
-class CourierInboxList extends BaseElement {
+registerElement(CourierInboxPaginationListItem);
+class CourierInboxList extends CourierBaseElement {
   constructor(props) {
     super();
     // Theme
@@ -2098,34 +2214,53 @@ class CourierInboxList extends BaseElement {
     __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;
@@ -2133,15 +2268,6 @@ class CourierInboxList extends BaseElement {
       }
     `;
   }
-  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);
@@ -2195,11 +2321,21 @@ class CourierInboxList extends BaseElement {
     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,
@@ -2224,52 +2360,52 @@ class CourierInboxList extends BaseElement {
       });
       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;
@@ -2287,8 +2423,8 @@ class CourierInboxList extends BaseElement {
     });
     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);
@@ -2318,34 +2454,28 @@ class CourierInboxList extends BaseElement {
     this._paginationItemFactory = factory;
     this.render();
   }
-  refreshTheme() {
-    this.render();
-  }
-  // Disconnect the theme subscription
-  disconnectedCallback() {
-    this._themeSubscription.unsubscribe();
-  }
 }
-registerElement("courier-inbox-list", CourierInboxList);
-class CourierInboxOptionMenuItem extends BaseElement {
+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);
@@ -2358,70 +2488,26 @@ class CourierInboxOptionMenuItem extends BaseElement {
     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);
   }
 }
-registerElement("courier-inbox-filter-menu-item", CourierInboxOptionMenuItem);
-class CourierInboxOptionMenu extends BaseElement {
+registerElement(CourierInboxOptionMenuItem);
+class CourierInboxOptionMenu extends CourierBaseElement {
   constructor(themeManager, type, selectable, options, onMenuOpen) {
     super();
     // Theme
@@ -2441,31 +2527,39 @@ class CourierInboxOptionMenu extends BaseElement {
     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;
@@ -2480,28 +2574,69 @@ class CourierInboxOptionMenu extends BaseElement {
         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) {
@@ -2509,8 +2644,11 @@ class CourierInboxOptionMenu extends BaseElement {
     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,
@@ -2523,13 +2661,16 @@ class CourierInboxOptionMenu extends BaseElement {
         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();
     }
@@ -2540,18 +2681,17 @@ class CourierInboxOptionMenu extends BaseElement {
     }
   }
   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();
-  }
 }
-registerElement("courier-inbox-option-menu", CourierInboxOptionMenu);
-class CourierUnreadCountBadge extends BaseElement {
+registerElement(CourierInboxOptionMenu);
+class CourierUnreadCountBadge extends CourierBaseElement {
   constructor(props) {
     super();
     // Theme
@@ -2566,37 +2706,51 @@ class CourierUnreadCountBadge extends BaseElement {
     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();
   }
-  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;
+  onComponentUnmounted() {
+    var _a;
+    this._themeSubscription.unsubscribe();
+    (_a = this._style) == null ? void 0 : _a.remove();
+  }
+  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) {
@@ -2608,20 +2762,18 @@ class CourierUnreadCountBadge extends BaseElement {
     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();
-  }
 }
-registerElement("courier-unread-count-badge", CourierUnreadCountBadge);
-class CourierInboxHeaderTitle extends BaseElement {
+registerElement(CourierUnreadCountBadge);
+class CourierInboxHeaderTitle extends CourierBaseElement {
   constructor(themeManager, option) {
     super();
     // Theme
@@ -2630,49 +2782,37 @@ class CourierInboxHeaderTitle extends BaseElement {
     __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"};
@@ -2680,46 +2820,68 @@ class CourierInboxHeaderTitle extends BaseElement {
         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();
-  }
 }
-registerElement("courier-inbox-header-title", CourierInboxHeaderTitle);
-class CourierInboxHeader extends CourierElement {
+registerElement(CourierInboxHeaderTitle);
+class CourierInboxHeader extends CourierFactoryElement {
   constructor(props) {
     super();
     // Theme
@@ -2739,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();
@@ -2820,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;
@@ -2842,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);
@@ -2855,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() {
@@ -2880,51 +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();
-  }
 }
-registerElement("courier-inbox-header", CourierInboxHeader);
+registerElement(CourierInboxHeader);
 class CourierInboxDataStoreListener {
   constructor(events) {
     __publicField(this, "events");
@@ -3395,7 +3555,7 @@ const defaultDarkTheme = {
     },
     loading: {
       animation: {
-        barColor: CourierColors.white[500],
+        barColor: CourierColors.gray[400],
         barHeight: "14px",
         barBorderRadius: "14px",
         duration: "2s"
@@ -3703,20 +3863,19 @@ class CourierInboxThemeManager {
     this._subscriptions = [];
   }
 }
-class CourierInbox extends BaseElement {
+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");
@@ -3731,8 +3890,27 @@ class CourierInbox extends BaseElement {
       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) => {
@@ -3740,20 +3918,20 @@ class CourierInbox extends BaseElement {
       }
     });
     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) => {
@@ -3785,41 +3963,45 @@ class CourierInbox extends BaseElement {
         (_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();
         }
       },
@@ -3834,39 +4016,38 @@ class CourierInbox extends BaseElement {
     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;
@@ -3882,19 +4063,24 @@ class CourierInbox extends BaseElement {
     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;
@@ -3906,30 +4092,31 @@ class CourierInbox extends BaseElement {
     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;
     }
   }
@@ -3939,19 +4126,9 @@ class CourierInbox extends BaseElement {
   }
   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;
@@ -4009,20 +4186,35 @@ class CourierInbox extends BaseElement {
     }
   }
 }
-registerElement("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";
@@ -4032,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%;
@@ -4059,24 +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");
   }
 }
-registerElement("courier-inbox-menu-button", CourierInboxMenuButton);
-class CourierInboxPopupMenu extends BaseElement {
+registerElement(CourierInboxMenuButton);
+class CourierInboxPopupMenu extends CourierBaseElement {
   constructor() {
     super();
     // State
@@ -4098,28 +4283,26 @@ class CourierInboxPopupMenu extends BaseElement {
     __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();
   }
@@ -4132,45 +4315,71 @@ class CourierInboxPopupMenu extends BaseElement {
   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%;
       }
     `;
@@ -4226,13 +4435,16 @@ class CourierInboxPopupMenu extends BaseElement {
     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 = [
@@ -4249,6 +4461,7 @@ class CourierInboxPopupMenu extends BaseElement {
     return validPositions.includes(value);
   }
   updatePopupPosition() {
+    if (!this._popup) return;
     this._popup.style.top = "";
     this._popup.style.bottom = "";
     this._popup.style.left = "";
@@ -4301,25 +4514,19 @@ class CourierInboxPopupMenu extends BaseElement {
   }
   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;
   }
@@ -4333,29 +4540,37 @@ class CourierInboxPopupMenu extends BaseElement {
     }
   }
   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;
@@ -4363,6 +4578,7 @@ class CourierInboxPopupMenu extends BaseElement {
   }
   render() {
     const unreadCount = CourierInboxDatastore.shared.unreadCount;
+    if (!this._triggerButton) return;
     switch (this._popupMenuButtonFactory) {
       case void 0:
       case null:
@@ -4375,13 +4591,8 @@ class CourierInboxPopupMenu extends BaseElement {
         break;
     }
   }
-  disconnectedCallback() {
-    var _a;
-    (_a = this._datastoreListener) == null ? void 0 : _a.remove();
-    this._themeManager.cleanup();
-  }
 }
-registerElement("courier-inbox-popup-menu", CourierInboxPopupMenu);
+registerElement(CourierInboxPopupMenu);
 function markAsRead(message) {
   return CourierInboxDatastore.shared.readMessage({ message });
 }
@@ -4419,9 +4630,9 @@ export {
   CourierInboxDatastore,
   CourierInboxDatastoreEvents,
   CourierInboxHeader,
+  CourierInboxListItem,
   CourierInboxPopupMenu,
   CourierInboxThemeManager,
-  CourierListItem,
   archiveMessage,
   clickMessage,
   defaultDarkTheme,