@relements/core 0.1.0

package/dist/base.css

@@ -0,0 +1 @@
+@layer re.base{:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}html{font-family:var(--re-font-sans);font-size:var(--re-size-text-md);line-height:var(--re-line-height-normal);color:var(--re-color-text);background-color:var(--re-color-bg)}::selection{background-color:var(--re-color-selection-bg);color:var(--re-color-selection-text)}h1,h2,h3,h4,h5,h6{line-height:var(--re-line-height-tight);font-weight:var(--re-font-weight-semibold);color:var(--re-color-text)}h1{font-size:var(--re-size-text-4xl)}h2{font-size:var(--re-size-text-3xl)}h3{font-size:var(--re-size-text-2xl)}h4{font-size:var(--re-size-text-xl)}h5{font-size:var(--re-size-text-lg)}h6{font-size:var(--re-size-text-md)}p{line-height:var(--re-line-height-normal);color:var(--re-color-text)}small{font-size:var(--re-size-text-sm);color:var(--re-color-text-muted)}code,kbd,samp,pre{font-family:var(--re-font-mono);font-size:.95em}pre{padding:var(--re-space-3) var(--re-space-4);background-color:var(--re-color-bg-muted);border-radius:var(--re-radius-md);overflow:auto}code{background-color:var(--re-color-bg-muted);border-radius:var(--re-radius-sm);padding:.1em .3em}pre code{background:0 0;border-radius:0;padding:0}hr{border:0;border-top:var(--re-border-default);margin-block:var(--re-space-6)}a{color:var(--re-color-link);text-underline-offset:.2em;text-decoration-thickness:.08em}a:hover{color:var(--re-color-link-hover)}a:visited{color:var(--re-color-link-visited)}:focus-visible{box-shadow:var(--re-shadow-focus);border-radius:var(--re-radius-sm);outline:none}input,textarea,select{color:var(--re-color-text);background-color:var(--re-color-bg)}}

package/dist/behaviors/dialog.d.ts

@@ -0,0 +1,39 @@
+/**
+ * enhanceDialog
+ * -------------
+ * Lightweight ergonomic helpers for native <dialog>.
+ *
+ * Wires:
+ *   - `[data-re-dialog-trigger]` → opens the <dialog> referenced by its
+ *     `data-re-dialog-target="dialog-id"` attribute (or aria-controls).
+ *   - `[data-re-dialog-close]` inside a <dialog> → closes the parent dialog,
+ *     setting the dialog's returnValue to the element's value attribute.
+ *   - Click on the dialog's backdrop closes the dialog when the dialog
+ *     element itself has `data-re-dialog-close-on-backdrop`.
+ *
+ * Usage:
+ *
+ *   <button type="button" data-re-dialog-trigger data-re-dialog-target="confirm">
+ *     Open
+ *   </button>
+ *   <dialog id="confirm" data-re-dialog-close-on-backdrop>
+ *     …
+ *     <button data-re-dialog-close value="cancel">Cancel</button>
+ *   </dialog>
+ *
+ *   import { enhanceDialog } from "@relements/core/behaviors/dialog";
+ *   const c = enhanceDialog(document);
+ *   c.destroy();
+ *
+ * Native semantics are preserved: showModal/close/Escape behavior all
+ * come from the browser.
+ */
+/**
+ * @param {Document | Element | ShadowRoot} [root=document]
+ * @returns {{ destroy: () => void }}
+ */
+declare function enhanceDialog(root?: Document | Element | ShadowRoot): {
+    destroy: () => void;
+};
+
+export { enhanceDialog };

package/dist/behaviors/dialog.js

@@ -0,0 +1 @@
+export { enhanceDialog } from '../chunk-J4EGUBPP.js';

package/dist/behaviors/dismissible.d.ts

@@ -0,0 +1,37 @@
+/**
+ * enhanceDismissible
+ * ------------------
+ * Wires up dismiss buttons inside any element marked `[data-re-dismissible]`.
+ *
+ * Usage in HTML:
+ *
+ *   <aside data-re-dismissible>
+ *     Banner copy…
+ *     <button type="button" data-re-dismiss aria-label="Dismiss">×</button>
+ *   </aside>
+ *
+ * Usage in JavaScript:
+ *
+ *   import { enhanceDismissible } from "@relements/core/behaviors/dismissible";
+ *   const controller = enhanceDismissible(document);
+ *   // …later
+ *   controller.destroy();
+ *
+ * Behavior:
+ *   - Click or Enter/Space on `[data-re-dismiss]` hides the closest
+ *     `[data-re-dismissible]` ancestor (sets `hidden`).
+ *   - Dispatches a `re-dismiss` `CustomEvent` (bubbles, cancelable) on the
+ *     dismissible element before hiding; calling `preventDefault()` cancels.
+ *   - `controller.destroy()` removes all listeners.
+ *
+ * Root can be a Document, Element, or ShadowRoot.
+ */
+/**
+ * @param {Document | Element | ShadowRoot} [root=document]
+ * @returns {{ destroy: () => void }}
+ */
+declare function enhanceDismissible(root?: Document | Element | ShadowRoot): {
+    destroy: () => void;
+};
+
+export { enhanceDismissible };

package/dist/behaviors/dismissible.js

@@ -0,0 +1 @@
+export { enhanceDismissible } from '../chunk-TC4TFP7Y.js';

package/dist/behaviors/menu-button.d.ts

@@ -0,0 +1,36 @@
+/**
+ * enhanceMenuButton
+ * -----------------
+ * ARIA menu-button pattern over markup like:
+ *
+ *   <div class="re-menu" data-re-menu>
+ *     <button aria-haspopup="menu" aria-expanded="false" aria-controls="m-1" id="b-1">…</button>
+ *     <div role="menu" id="m-1" aria-labelledby="b-1" hidden>
+ *       <button role="menuitem">Rename</button>
+ *       …
+ *     </div>
+ *   </div>
+ *
+ * Behavior:
+ *   - Click the button toggles the menu.
+ *   - ArrowDown opens the menu and focuses the first item.
+ *   - Up/Down on items moves focus within the menu (wraps).
+ *   - Home/End jump.
+ *   - Escape closes the menu and returns focus to the button.
+ *   - Tab outside the menu closes it.
+ *   - Clicking outside closes it.
+ *
+ * Dispatches `re-select` (bubbles, cancelable) when a menuitem is activated:
+ *   detail = { item: HTMLElement, value: string }
+ */
+/** @typedef {{ destroy: () => void }} Controller */
+/**
+ * @param {Document | Element | ShadowRoot} [root=document]
+ * @returns {Controller}
+ */
+declare function enhanceMenuButton(root?: Document | Element | ShadowRoot): Controller;
+type Controller = {
+    destroy: () => void;
+};
+
+export { type Controller, enhanceMenuButton };

package/dist/behaviors/menu-button.js

@@ -0,0 +1 @@
+export { enhanceMenuButton } from '../chunk-ZHRJNWMH.js';

package/dist/behaviors/popover.d.ts

@@ -0,0 +1,28 @@
+/**
+ * enhancePopover
+ * --------------
+ * Thin helper for native [popover]. Provides:
+ *   - Anchored positioning: places the popover below its `popovertarget`
+ *     button when the popover opens. (Native CSS Anchor Positioning isn't
+ *     universally supported yet; this is a tiny JS fallback.)
+ *   - `re-toggle` CustomEvent on the popover element when it opens/closes
+ *     (detail = { open: boolean }), mirroring the native `toggle` event so
+ *     consumers don't need feature-detect it.
+ *
+ *   <button class="re-button" popovertarget="tip">Toggle</button>
+ *   <div class="re-popover" id="tip" popover data-re-popover>Hello</div>
+ *
+ *   import { enhancePopover } from "@relements/core/behaviors/popover";
+ *   const c = enhancePopover(document);
+ */
+/** @typedef {{ destroy: () => void }} Controller */
+/**
+ * @param {Document | Element | ShadowRoot} [root=document]
+ * @returns {Controller}
+ */
+declare function enhancePopover(root?: Document | Element | ShadowRoot): Controller;
+type Controller = {
+    destroy: () => void;
+};
+
+export { type Controller, enhancePopover };

package/dist/behaviors/popover.js

@@ -0,0 +1 @@
+export { enhancePopover } from '../chunk-PSODVT3V.js';

package/dist/behaviors/tabs.d.ts

@@ -0,0 +1,37 @@
+/**
+ * enhanceTabs
+ * -----------
+ * Wires the ARIA tabs pattern over server-rendered markup.
+ *
+ *   <div class="re-tabs" data-re-tabs>
+ *     <div role="tablist" aria-label="Settings">
+ *       <button role="tab" id="t-1" aria-controls="p-1" aria-selected="true">…</button>
+ *       <button role="tab" id="t-2" aria-controls="p-2" aria-selected="false" tabindex="-1">…</button>
+ *     </div>
+ *     <section role="tabpanel" id="p-1" aria-labelledby="t-1">…</section>
+ *     <section role="tabpanel" id="p-2" aria-labelledby="t-2" hidden>…</section>
+ *   </div>
+ *
+ * Keyboard:
+ *   ArrowLeft / ArrowRight — move focus across tabs (roving tabindex)
+ *   Home / End             — jump to first / last
+ *   Enter / Space          — activate focused tab (manual activation)
+ *
+ * Dispatches `re-change` (bubbles, cancelable) on the host `[data-re-tabs]`
+ * with `detail = { tabId, panelId }` whenever the selected tab changes.
+ *
+ *   import { enhanceTabs } from "@relements/core/behaviors/tabs";
+ *   const c = enhanceTabs(document);
+ *   c.destroy();
+ */
+/** @typedef {{ destroy: () => void }} Controller */
+/**
+ * @param {Document | Element | ShadowRoot} [root=document]
+ * @returns {Controller}
+ */
+declare function enhanceTabs(root?: Document | Element | ShadowRoot): Controller;
+type Controller = {
+    destroy: () => void;
+};
+
+export { type Controller, enhanceTabs };

package/dist/behaviors/tabs.js

@@ -0,0 +1 @@
+export { enhanceTabs } from '../chunk-GMICGIQW.js';

package/dist/behaviors/toast.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Toast helpers.
+ *
+ *   <div class="re-toast-region" data-re-toast-region role="region" aria-label="Notifications">
+ *     <ul class="re-toast-list" aria-live="polite" aria-relevant="additions"></ul>
+ *   </div>
+ *
+ *   import { showToast } from "@relements/core/behaviors/toast";
+ *   showToast("Saved", { tone: "success" });
+ *   showToast("Network error", { tone: "danger", duration: 8000 });
+ *
+ * If no `[data-re-toast-region]` exists, one is created and appended to
+ * `document.body` on first call.
+ */
+/**
+ * @typedef {object} ToastOptions
+ * @property {"default"|"success"|"warning"|"danger"} [tone="default"]
+ * @property {number} [duration=4000]  Auto-dismiss in ms. Pass 0 to disable.
+ * @property {Document|Element} [root]  Override the host to search for a region in.
+ */
+/**
+ * @param {string} message
+ * @param {ToastOptions} [options]
+ * @returns {{ dismiss: () => void; element: HTMLDivElement }}
+ */
+declare function showToast(message: string, options?: ToastOptions): {
+    dismiss: () => void;
+    element: HTMLDivElement;
+};
+type ToastOptions = {
+    tone?: "default" | "success" | "warning" | "danger" | undefined;
+    /**
+     * Auto-dismiss in ms. Pass 0 to disable.
+     */
+    duration?: number | undefined;
+    /**
+     * Override the host to search for a region in.
+     */
+    root?: Document | Element | undefined;
+};
+
+export { type ToastOptions, showToast };

package/dist/behaviors/toast.js

@@ -0,0 +1 @@
+export { showToast } from '../chunk-PIDPGDBZ.js';

package/dist/chunk-GMICGIQW.js

@@ -0,0 +1,149 @@
+// src/behaviors/tabs.js
+function enhanceTabs(root = document) {
+  if (root == null) {
+    throw new TypeError("enhanceTabs: root must be a Document, Element, or ShadowRoot");
+  }
+  const hosts = [];
+  if (root instanceof Element && /** @type {Element} */
+  root.matches?.("[data-re-tabs]")) {
+    const cleanup = wireOne(
+      /** @type {HTMLElement} */
+      root
+    );
+    hosts.push({ host: root, cleanup });
+  }
+  const tabsList = root.querySelectorAll("[data-re-tabs]");
+  tabsList.forEach((host) => {
+    const cleanup = wireOne(
+      /** @type {HTMLElement} */
+      host
+    );
+    hosts.push({ host, cleanup });
+  });
+  return {
+    destroy() {
+      while (hosts.length) {
+        const entry = hosts.pop();
+        entry?.cleanup();
+      }
+    }
+  };
+}
+function wireOne(host) {
+  const tablist = host.querySelector('[role="tablist"]');
+  if (!tablist) return () => {
+  };
+  const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+  if (tabs.length === 0) return () => {
+  };
+  const syncRoving = () => {
+    for (const t of tabs) {
+      t.tabIndex = t.getAttribute("aria-selected") === "true" ? 0 : -1;
+    }
+  };
+  syncRoving();
+  const select = (tab, opts = {}) => {
+    if (tab.getAttribute("aria-selected") === "true") {
+      if (opts.focus) tab.focus();
+      return;
+    }
+    const panelId = tab.getAttribute("aria-controls");
+    const cancelled = !host.dispatchEvent(
+      new CustomEvent("re-change", {
+        bubbles: true,
+        cancelable: true,
+        detail: { tabId: tab.id, panelId }
+      })
+    );
+    if (cancelled) return;
+    for (const t of tabs) {
+      const isMe = t === tab;
+      t.setAttribute("aria-selected", isMe ? "true" : "false");
+      t.tabIndex = isMe ? 0 : -1;
+      const pid = t.getAttribute("aria-controls");
+      if (pid) {
+        const panel = host.querySelector(`#${cssEscape(pid)}`);
+        if (panel) panel.hidden = !isMe;
+      }
+    }
+    if (opts.focus) tab.focus();
+  };
+  const onClick = (event) => {
+    const t = (
+      /** @type {Element | null} */
+      event.target
+    );
+    const tab = t?.closest('[role="tab"]');
+    if (tab && tabs.includes(
+      /** @type {HTMLElement} */
+      tab
+    )) {
+      select(
+        /** @type {HTMLElement} */
+        tab,
+        { focus: true }
+      );
+    }
+  };
+  const onKey = (event) => {
+    const current = document.activeElement;
+    if (!current || !tabs.includes(
+      /** @type {HTMLElement} */
+      current
+    )) return;
+    const idx = tabs.indexOf(
+      /** @type {HTMLElement} */
+      current
+    );
+    if (idx === -1) return;
+    let nextIdx = idx;
+    switch (event.key) {
+      case "ArrowRight":
+        nextIdx = (idx + 1) % tabs.length;
+        break;
+      case "ArrowLeft":
+        nextIdx = (idx - 1 + tabs.length) % tabs.length;
+        break;
+      case "Home":
+        nextIdx = 0;
+        break;
+      case "End":
+        nextIdx = tabs.length - 1;
+        break;
+      case "Enter":
+      case " ":
+      case "Spacebar":
+        event.preventDefault();
+        select(
+          /** @type {HTMLElement} */
+          current,
+          { focus: true }
+        );
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    tabs[nextIdx].focus();
+    select(tabs[nextIdx]);
+  };
+  tablist.addEventListener("click", onClick);
+  tablist.addEventListener(
+    "keydown",
+    /** @type {EventListener} */
+    onKey
+  );
+  return () => {
+    tablist.removeEventListener("click", onClick);
+    tablist.removeEventListener(
+      "keydown",
+      /** @type {EventListener} */
+      onKey
+    );
+  };
+}
+function cssEscape(value) {
+  return typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value;
+}
+
+export { enhanceTabs };

package/dist/chunk-J4EGUBPP.js

@@ -0,0 +1,68 @@
+// src/behaviors/dialog.js
+function enhanceDialog(root = document) {
+  if (root == null) {
+    throw new TypeError("enhanceDialog: root must be a Document, Element, or ShadowRoot");
+  }
+  const onClick = (event) => {
+    const target = (
+      /** @type {Element | null} */
+      event.target
+    );
+    if (!target) return;
+    const trigger = target.closest("[data-re-dialog-trigger]");
+    if (trigger) {
+      const id = trigger.getAttribute("data-re-dialog-target") ?? trigger.getAttribute("aria-controls");
+      if (!id) return;
+      const ownerDoc = trigger.ownerDocument;
+      const dialog = (
+        /** @type {HTMLDialogElement | null} */
+        ownerDoc.getElementById(id)
+      );
+      if (dialog && typeof dialog.showModal === "function" && !dialog.open) {
+        dialog.showModal();
+      }
+      return;
+    }
+    const closeBtn = target.closest("[data-re-dialog-close]");
+    if (closeBtn) {
+      const dialog = (
+        /** @type {HTMLDialogElement | null} */
+        closeBtn.closest("dialog")
+      );
+      if (dialog && dialog.open) {
+        const value = (
+          /** @type {HTMLButtonElement} */
+          closeBtn.value || ""
+        );
+        dialog.close(value);
+      }
+      return;
+    }
+    if (target.tagName === "DIALOG") {
+      const dialog = (
+        /** @type {HTMLDialogElement} */
+        target
+      );
+      if (dialog.open && dialog.hasAttribute("data-re-dialog-close-on-backdrop") && isEventOnBackdrop(
+        /** @type {MouseEvent} */
+        event,
+        dialog
+      )) {
+        dialog.close("backdrop");
+      }
+    }
+  };
+  root.addEventListener("click", onClick);
+  return {
+    destroy() {
+      root.removeEventListener("click", onClick);
+    }
+  };
+}
+function isEventOnBackdrop(event, dialog) {
+  const rect = dialog.getBoundingClientRect();
+  const { clientX: x, clientY: y } = event;
+  return x < rect.left || x > rect.right || y < rect.top || y > rect.bottom;
+}
+
+export { enhanceDialog };

package/dist/chunk-PIDPGDBZ.js

@@ -0,0 +1,62 @@
+// src/behaviors/toast.js
+function showToast(message, options = {}) {
+  const { tone = "default", duration = 4e3, root = document } = options;
+  const list = ensureRegion(root).querySelector(".re-toast-list");
+  if (!list) {
+    throw new Error("showToast: toast region missing a `.re-toast-list`");
+  }
+  const item = document.createElement("div");
+  item.className = "re-toast";
+  if (tone !== "default") item.dataset.tone = tone;
+  item.setAttribute("role", tone === "danger" ? "alert" : "status");
+  const body = document.createElement("div");
+  body.className = "re-toast__body";
+  body.textContent = message;
+  item.appendChild(body);
+  const dismissBtn = document.createElement("button");
+  dismissBtn.type = "button";
+  dismissBtn.className = "re-toast__dismiss";
+  dismissBtn.setAttribute("aria-label", "Dismiss notification");
+  dismissBtn.textContent = "\xD7";
+  item.appendChild(dismissBtn);
+  list.appendChild(item);
+  let timer;
+  const dismiss = () => {
+    if (timer != null) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+    item.dispatchEvent(new CustomEvent("re-toast-dismiss", { bubbles: true }));
+    item.remove();
+  };
+  dismissBtn.addEventListener("click", dismiss);
+  if (duration > 0) {
+    timer = setTimeout(dismiss, duration);
+  }
+  return { dismiss, element: item };
+}
+function ensureRegion(root) {
+  const scope = root instanceof Document ? root : (
+    /** @type {Element} */
+    root.ownerDocument ?? document
+  );
+  let region = (
+    /** @type {HTMLElement | null} */
+    scope.querySelector("[data-re-toast-region]")
+  );
+  if (region) return region;
+  region = scope.createElement("div");
+  region.className = "re-toast-region";
+  region.setAttribute("role", "region");
+  region.setAttribute("aria-label", "Notifications");
+  region.dataset.reToastRegion = "";
+  const list = scope.createElement("div");
+  list.className = "re-toast-list";
+  list.setAttribute("aria-live", "polite");
+  list.setAttribute("aria-relevant", "additions");
+  region.appendChild(list);
+  scope.body.appendChild(region);
+  return region;
+}
+
+export { showToast };

package/dist/chunk-PSODVT3V.js

@@ -0,0 +1,67 @@
+// src/behaviors/popover.js
+function enhancePopover(root = document) {
+  if (root == null) {
+    throw new TypeError("enhancePopover: root must be a Document, Element, or ShadowRoot");
+  }
+  const cleanups = [];
+  if (root instanceof Element && /** @type {Element} */
+  root.matches?.("[data-re-popover]")) {
+    cleanups.push(wireOne(
+      /** @type {HTMLElement} */
+      root
+    ));
+  }
+  const popovers = root.querySelectorAll("[data-re-popover]");
+  popovers.forEach((pop) => {
+    cleanups.push(wireOne(pop));
+  });
+  return {
+    destroy() {
+      while (cleanups.length) cleanups.pop()?.();
+    }
+  };
+}
+function wireOne(popover) {
+  if (!("popover" in popover) || typeof popover.showPopover !== "function") {
+    return () => {
+    };
+  }
+  const onToggle = (event) => {
+    const e = (
+      /** @type {ToggleEvent} */
+      event
+    );
+    const open = e.newState === "open";
+    if (open) {
+      positionUnderTrigger(popover);
+    }
+    popover.dispatchEvent(
+      new CustomEvent("re-toggle", {
+        bubbles: true,
+        detail: { open }
+      })
+    );
+  };
+  popover.addEventListener("toggle", onToggle);
+  return () => {
+    popover.removeEventListener("toggle", onToggle);
+  };
+}
+function positionUnderTrigger(popover) {
+  const id = popover.id;
+  if (!id) return;
+  const trigger = document.querySelector(`[popovertarget="${cssEscape(id)}"]`);
+  if (!trigger) return;
+  const tRect = trigger.getBoundingClientRect();
+  popover.style.position = "fixed";
+  popover.style.top = `${tRect.bottom + 4}px`;
+  popover.style.left = `${tRect.left}px`;
+  popover.style.right = "auto";
+  popover.style.bottom = "auto";
+  popover.style.margin = "0";
+}
+function cssEscape(value) {
+  return typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value;
+}
+
+export { enhancePopover };

package/dist/chunk-TC4TFP7Y.js

@@ -0,0 +1,40 @@
+// src/behaviors/dismissible.js
+function enhanceDismissible(root = document) {
+  if (root == null) {
+    throw new TypeError("enhanceDismissible: root must be a Document, Element, or ShadowRoot");
+  }
+  const handle = (event) => {
+    const target = (
+      /** @type {Element | null} */
+      event.target
+    );
+    if (!target) return;
+    const trigger = target.closest("[data-re-dismiss]");
+    if (!trigger) return;
+    if (event.type === "keydown") {
+      const ke = (
+        /** @type {KeyboardEvent} */
+        event
+      );
+      if (ke.key !== "Enter" && ke.key !== " " && ke.key !== "Spacebar") return;
+      ke.preventDefault();
+    }
+    const host = trigger.closest("[data-re-dismissible]");
+    if (!host) return;
+    const cancelable = host.dispatchEvent(
+      new CustomEvent("re-dismiss", { bubbles: true, cancelable: true })
+    );
+    if (!cancelable) return;
+    host.hidden = true;
+  };
+  root.addEventListener("click", handle);
+  root.addEventListener("keydown", handle);
+  return {
+    destroy() {
+      root.removeEventListener("click", handle);
+      root.removeEventListener("keydown", handle);
+    }
+  };
+}
+
+export { enhanceDismissible };