@relements/core 0.1.1 → 0.1.3

package/README.md

@@ -48,26 +48,26 @@ import "@relements/core/elements/re-tabs";
 
 All styled with CSS classes and `data-*` attributes. No JavaScript needed for static use.
 
-| Class | Element | Variants / options |
-|---|---|---|
-| `.re-button` | `<button>`, `<a>`, submit input | `data-variant`: primary, secondary, ghost, danger |
-| `.re-link` | `<a>` | `data-variant`: muted, subtle, external |
-| `.re-input` | `<input>` | `data-size`: sm, md, lg |
-| `.re-textarea` | `<textarea>` | `data-size`: sm, md, lg |
-| `.re-select` | `<select>` | `data-size`: sm, md, lg |
-| `.re-checkbox` | `<input type="checkbox">` | — |
-| `.re-radio` | `<input type="radio">` | — |
-| `.re-field` | `<label>` | `re-field--inline` for checkbox/radio rows |
-| `.re-field-group` | `<fieldset>` | `data-orientation`: horizontal |
-| `.re-validation-message` | `<span>` | `data-tone`: success, hint, warning |
-| `.re-disclosure` | `<details>` | `data-variant`: plain |
-| `.re-dialog` | `<dialog>` | `showModal()` surface with header/body/footer slots |
-| `.re-tabs` | container | pairs with `[role="tablist"]`, `[role="tab"]`, `[role="tabpanel"]` |
-| `.re-menu` | container | pairs with `[role="menu"]`, `[role="menuitem"]` |
-| `.re-popover` | `[popover]` element | `data-tone`: info, warning, danger |
-| `.re-toast-region` | live region host | — |
-| `.re-progress` | `<progress>` | `data-size`: sm, md, lg |
-| `.re-meter` | `<meter>` | `data-size`: sm, md, lg |
+| Class                    | Element                         | Variants / options                                                 |
+| ------------------------ | ------------------------------- | ------------------------------------------------------------------ |
+| `.re-button`             | `<button>`, `<a>`, submit input | `data-variant`: primary, secondary, ghost, danger                  |
+| `.re-link`               | `<a>`                           | `data-variant`: muted, subtle, external                            |
+| `.re-input`              | `<input>`                       | `data-size`: sm, md, lg                                            |
+| `.re-textarea`           | `<textarea>`                    | `data-size`: sm, md, lg                                            |
+| `.re-select`             | `<select>`                      | `data-size`: sm, md, lg                                            |
+| `.re-checkbox`           | `<input type="checkbox">`       | —                                                                  |
+| `.re-radio`              | `<input type="radio">`          | —                                                                  |
+| `.re-field`              | `<label>`                       | `re-field--inline` for checkbox/radio rows                         |
+| `.re-field-group`        | `<fieldset>`                    | `data-orientation`: horizontal                                     |
+| `.re-validation-message` | `<span>`                        | `data-tone`: success, hint, warning                                |
+| `.re-disclosure`         | `<details>`                     | `data-variant`: plain                                              |
+| `.re-dialog`             | `<dialog>`                      | `showModal()` surface with header/body/footer slots                |
+| `.re-tabs`               | container                       | pairs with `[role="tablist"]`, `[role="tab"]`, `[role="tabpanel"]` |
+| `.re-menu`               | container                       | pairs with `[role="menu"]`, `[role="menuitem"]`                    |
+| `.re-popover`            | `[popover]` element             | `data-tone`: info, warning, danger                                 |
+| `.re-toast-region`       | live region host                | —                                                                  |
+| `.re-progress`           | `<progress>`                    | `data-size`: sm, md, lg                                            |
+| `.re-meter`              | `<meter>`                       | `data-size`: sm, md, lg                                            |
 
 ## JavaScript behaviors
 
@@ -81,14 +81,14 @@ const controller = enhanceTabs(document);
 controller.destroy();
 ```
 
-| Behavior | What it does | Key event |
-|---|---|---|
-| `enhanceTabs` | Arrow keys, Home/End, roving tabindex | `re-change` |
-| `enhanceMenuButton` | Keyboard nav, outside-click close | `re-select` |
-| `enhanceDialog` | Trigger binding, close buttons, backdrop dismiss | — |
-| `enhancePopover` | Anchored positioning, toggle event bridge | `re-toggle` |
-| `enhanceDismissible` | Dismiss buttons via `[data-re-dismiss]` | `re-dismiss` |
-| `showToast(msg, opts)` | `aria-live` toast notifications | — |
+| Behavior               | What it does                                     | Key event    |
+| ---------------------- | ------------------------------------------------ | ------------ |
+| `enhanceTabs`          | Arrow keys, Home/End, roving tabindex            | `re-change`  |
+| `enhanceMenuButton`    | Keyboard nav, outside-click close                | `re-select`  |
+| `enhanceDialog`        | Trigger binding, close buttons, backdrop dismiss | —            |
+| `enhancePopover`       | Anchored positioning, toggle event bridge        | `re-toggle`  |
+| `enhanceDismissible`   | Dismiss buttons via `[data-re-dismiss]`          | `re-dismiss` |
+| `showToast(msg, opts)` | `aria-live` toast notifications                  | —            |
 
 ## Custom elements
 
@@ -100,19 +100,21 @@ Light-DOM only (no Shadow DOM). Same HTML/CSS contract as the plain class API.
 <re-tabs>
   <div role="tablist" aria-label="Account">
     <button role="tab" id="t1" aria-controls="p1" aria-selected="true">Profile</button>
-    <button role="tab" id="t2" aria-controls="p2" aria-selected="false" tabindex="-1">Settings</button>
+    <button role="tab" id="t2" aria-controls="p2" aria-selected="false" tabindex="-1">
+      Settings
+    </button>
   </div>
   <section role="tabpanel" id="p1" aria-labelledby="t1">…</section>
   <section role="tabpanel" id="p2" aria-labelledby="t2" hidden>…</section>
 </re-tabs>
 ```
 
-| Tag | Wraps | Exposes |
-|---|---|---|
-| `<re-tabs>` | `enhanceTabs` | `.value` (selected tab id) |
-| `<re-toast>` | `showToast` | `.show(message, options)` |
-| `<re-menu>` | `enhanceMenuButton` | `.open` boolean |
-| `<re-popover>` | `enhancePopover` | `.show()` / `.hide()` / `.toggle()` |
+| Tag            | Wraps               | Exposes                             |
+| -------------- | ------------------- | ----------------------------------- |
+| `<re-tabs>`    | `enhanceTabs`       | `.value` (selected tab id)          |
+| `<re-toast>`   | `showToast`         | `.show(message, options)`           |
+| `<re-menu>`    | `enhanceMenuButton` | `.open` boolean                     |
+| `<re-popover>` | `enhancePopover`    | `.show()` / `.hide()` / `.toggle()` |
 
 ## Theming
 
@@ -124,7 +126,7 @@ All values are `--re-*` CSS custom properties. Override globally or on any subtr
 }
 
 .my-card {
-  --re-color-surface: #1e293b;   /* dark card, light page */
+  --re-color-surface: #1e293b; /* dark card, light page */
 }
 ```
 
@@ -145,16 +147,16 @@ The Renascent theme is the dark navy palette from [renascentelements.hu](https:/
 
 ## Key tokens
 
-| Token | Light default | Purpose |
-|---|---|---|
-| `--re-color-accent-600` | `#2563eb` | Buttons, links, focus ring |
-| `--re-color-bg` | `#ffffff` | Page background |
-| `--re-color-surface` | `#ffffff` | Card / panel background |
-| `--re-color-text` | `#0f172a` | Body text |
-| `--re-color-border` | `#e2e8f0` | Borders |
-| `--re-color-focus-ring` | `#3b82f6` | Keyboard focus indicator |
-| `--re-space-4` | `1rem` | Base spacing (4 px scale) |
-| `--re-radius-md` | `0.375rem` | Default radius |
+| Token                   | Light default | Purpose                    |
+| ----------------------- | ------------- | -------------------------- |
+| `--re-color-accent-600` | `#2563eb`     | Buttons, links, focus ring |
+| `--re-color-bg`         | `#ffffff`     | Page background            |
+| `--re-color-surface`    | `#ffffff`     | Card / panel background    |
+| `--re-color-text`       | `#0f172a`     | Body text                  |
+| `--re-color-border`     | `#e2e8f0`     | Borders                    |
+| `--re-color-focus-ring` | `#3b82f6`     | Keyboard focus indicator   |
+| `--re-space-4`          | `1rem`        | Base spacing (4 px scale)  |
+| `--re-radius-md`        | `0.375rem`    | Default radius             |
 
 Full list in [`src/tokens.css`](./src/tokens.css).
 

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,7 +1,14 @@
 {
   "name": "@relements/core",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "HTML-first design system core: tokens, styles, and progressive enhancement.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Renascent-Elements/relements.git",
+    "directory": "packages/core"
+  },
+  "homepage": "https://github.com/Renascent-Elements/relements#readme",
+  "bugs": "https://github.com/Renascent-Elements/relements/issues",
   "keywords": [
     "design-system",
     "css",
@@ -18,7 +25,9 @@
   "type": "module",
   "sideEffects": [
     "**/*.css",
-    "dist/**/*.css"
+    "dist/**/*.css",
+    "dist/elements/*.js",
+    "src/elements/*.js"
   ],
   "files": [
     "dist",
@@ -86,7 +95,8 @@
     }
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "scripts": {
     "build:css": "node build-css.mjs",

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