@relements/core 0.1.2 → 0.1.3

package/dist/elements/re-tabs.js

@@ -4,19 +4,42 @@ import { enhanceTabs } from '../chunk-GMICGIQW.js';
 var ReTabsElement = class extends HTMLElement {
   /** @type {{ destroy: () => void } | null} */
   #controller = null;
+  /** @type {MutationObserver | null} */
+  #observer = null;
   static get observedAttributes() {
     return ["value"];
   }
   connectedCallback() {
     this.setAttribute("data-re-tabs", "");
-    this.#controller = enhanceTabs(this);
-    const initial = this.getAttribute("value");
-    if (initial) this.#selectById(initial);
+    if (this.#hasTabs()) {
+      this.#enhance();
+    } else {
+      this.#observer = new MutationObserver(() => {
+        if (this.#hasTabs()) {
+          this.#observer?.disconnect();
+          this.#observer = null;
+          this.#enhance();
+        }
+      });
+      this.#observer.observe(this, { childList: true, subtree: true });
+    }
   }
   disconnectedCallback() {
+    this.#observer?.disconnect();
+    this.#observer = null;
     this.#controller?.destroy();
     this.#controller = null;
   }
+  /** @returns {boolean} */
+  #hasTabs() {
+    return !!this.querySelector('[role="tablist"] [role="tab"]');
+  }
+  #enhance() {
+    this.#controller?.destroy();
+    this.#controller = enhanceTabs(this);
+    const initial = this.getAttribute("value");
+    if (initial) this.#selectById(initial);
+  }
   /**
    * @param {string} name
    * @param {string | null} _oldValue

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@relements/core",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "HTML-first design system core: tokens, styles, and progressive enhancement.",
   "repository": {
     "type": "git",
@@ -25,7 +25,9 @@
   "type": "module",
   "sideEffects": [
     "**/*.css",
-    "dist/**/*.css"
+    "dist/**/*.css",
+    "dist/elements/*.js",
+    "src/elements/*.js"
   ],
   "files": [
     "dist",

package/src/elements/re-tabs.js

@@ -25,6 +25,8 @@ import { enhanceTabs } from "../behaviors/tabs.js";
 export class ReTabsElement extends HTMLElement {
   /** @type {{ destroy: () => void } | null} */
   #controller = null;
+  /** @type {MutationObserver | null} */
+  #observer = null;
 
   static get observedAttributes() {
     return ["value"];
@@ -33,17 +35,44 @@ export class ReTabsElement extends HTMLElement {
   connectedCallback() {
     // Mark the host so enhanceTabs picks it up.
     this.setAttribute("data-re-tabs", "");
-    this.#controller = enhanceTabs(this);
-    // Honor a value attribute if present and different from initial state.
-    const initial = this.getAttribute("value");
-    if (initial) this.#selectById(initial);
+    if (this.#hasTabs()) {
+      this.#enhance();
+    } else {
+      // Some frameworks (e.g. Angular) connect the host before projecting its
+      // children. Enhance once the tabs appear, then stop observing.
+      this.#observer = new MutationObserver(() => {
+        if (this.#hasTabs()) {
+          this.#observer?.disconnect();
+          this.#observer = null;
+          this.#enhance();
+        }
+      });
+      this.#observer.observe(this, { childList: true, subtree: true });
+    }
   }
 
   disconnectedCallback() {
+    this.#observer?.disconnect();
+    this.#observer = null;
     this.#controller?.destroy();
     this.#controller = null;
   }
 
+  /** @returns {boolean} */
+  #hasTabs() {
+    return !!this.querySelector('[role="tablist"] [role="tab"]');
+  }
+
+  #enhance() {
+    // Idempotent: tear down any prior controller first so a reconnected or
+    // moved host (with children already present) does not double-wire listeners.
+    this.#controller?.destroy();
+    this.#controller = enhanceTabs(this);
+    // Honor a value attribute if present and different from initial state.
+    const initial = this.getAttribute("value");
+    if (initial) this.#selectById(initial);
+  }
+
   /**
    * @param {string} name
    * @param {string | null} _oldValue