@akonwi/mica 0.1.0

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@akonwi/mica",
+  "version": "0.1.0",
+  "description": "Custom elements. Native behavior. Nearly no JavaScript.",
+  "keywords": ["css", "custom-elements", "web-components", "layout", "no-build", "html-first"],
+  "homepage": "https://github.com/akonwi/mica",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/akonwi/mica.git"
+  },
+  "license": "MIT",
+  "author": "Akonwi Ngoh",
+  "type": "module",
+  "exports": {
+    ".": "./mica.css",
+    "./mica.css": "./mica.css",
+    "./field.js": "./field.js",
+    "./select.js": "./select.js",
+    "./tabs.js": "./tabs.js",
+    "./toast.js": "./toast.js",
+    "./combobox.js": "./combobox.js"
+  },
+  "files": [
+    "mica.css",
+    "field.js",
+    "select.js",
+    "tabs.js",
+    "toast.js",
+    "combobox.js"
+  ],
+  "sideEffects": true
+}

package/select.js

@@ -0,0 +1,30 @@
+/* mica/select.js — align the open select picker so the selected option
+ * overlays the trigger (macOS-native / Base UI `alignItemWithTrigger`
+ * behavior). Tier 2, and about as small as a module can be:
+ *
+ * JS supplies exactly one datum — the selected index, as a custom
+ * property. All geometry lives in mica.css (anchor positioning).
+ * Without this module, selects keep the anchored-below picker. Only
+ * meaningful where `appearance: base-select` is supported.
+ */
+
+const ALIGNED = "picker-aligned";
+const SELECTOR = "select:not([multiple]):not([size])";
+
+function sync(select) {
+  select.style.setProperty("--m-sel-index", select.selectedIndex);
+  select.classList.add(ALIGNED);
+}
+
+if (CSS.supports("appearance", "base-select")) {
+  for (const s of document.querySelectorAll(SELECTOR)) sync(s);
+  document.addEventListener("change", (e) => {
+    if (!e.target.matches?.(SELECTOR)) return;
+    const select = e.target;
+    // Defer re-alignment until the picker's exit transition (120ms in
+    // mica.css) has finished — updating the index while the closing
+    // picker is still rendered makes it visibly jump to the new value's
+    // position before fading. Fade out in place; re-align invisibly.
+    setTimeout(() => sync(select), 200);
+  });
+}

package/tabs.js

@@ -0,0 +1,82 @@
+/* mica/tabs.js — <m-tabs>: accessible tabs. Tier 2.
+ *
+ * Enhances working light-DOM markup; never renders it. Without this
+ * module, the nav buttons are inert and every panel is visible in
+ * order — complete, readable content. With it: real tablist semantics,
+ * roving tabindex, arrow-key navigation, automatic activation.
+ *
+ *   <m-tabs>
+ *     <nav>
+ *       <button>Account</button>
+ *       <button selected>Password</button>   <!-- optional initial -->
+ *     </nav>
+ *     <section>…account panel…</section>
+ *     <section>…password panel…</section>
+ *   </m-tabs>
+ *
+ * Buttons pair with panels positionally, or explicitly via
+ * aria-controls="panel-id".
+ */
+
+let uid = 0;
+
+class MTabs extends HTMLElement {
+  #tabs = [];
+  #panels = [];
+
+  connectedCallback() {
+    const nav = this.querySelector(":scope > nav");
+    if (!nav) return;
+    this.#tabs = [...nav.querySelectorAll("button")];
+    const sections = [...this.querySelectorAll(":scope > section")];
+    this.#panels = this.#tabs.map((b, i) => {
+      const id = b.getAttribute("aria-controls");
+      return id ? this.querySelector(`#${CSS.escape(id)}`) : sections[i];
+    });
+
+    nav.setAttribute("role", "tablist");
+    this.#tabs.forEach((tab, i) => {
+      tab.setAttribute("role", "tab");
+      tab.id ||= `m-tab-${++uid}`;
+      const panel = this.#panels[i];
+      if (panel) {
+        panel.setAttribute("role", "tabpanel");
+        panel.setAttribute("aria-labelledby", tab.id);
+        panel.tabIndex = 0;
+      }
+      tab.addEventListener("click", () => this.select(i));
+    });
+
+    nav.addEventListener("keydown", (e) => {
+      const n = this.#tabs.length;
+      const current = this.#tabs.findIndex(
+        (t) => t.getAttribute("aria-selected") === "true",
+      );
+      let next = null;
+      if (e.key === "ArrowRight") next = (current + 1) % n;
+      else if (e.key === "ArrowLeft") next = (current - 1 + n) % n;
+      else if (e.key === "Home") next = 0;
+      else if (e.key === "End") next = n - 1;
+      if (next === null) return;
+      e.preventDefault();
+      this.select(next); // automatic activation, radix-style
+      this.#tabs[next].focus();
+    });
+
+    const initial = this.#tabs.findIndex(
+      (t) => t.hasAttribute("selected") || t.getAttribute("aria-selected") === "true",
+    );
+    this.select(initial === -1 ? 0 : initial);
+  }
+
+  select(index) {
+    this.#tabs.forEach((tab, i) => {
+      const on = i === index;
+      tab.setAttribute("aria-selected", String(on));
+      tab.tabIndex = on ? 0 : -1;
+      this.#panels[i]?.toggleAttribute("hidden", !on);
+    });
+  }
+}
+
+if (!customElements.get("m-tabs")) customElements.define("m-tabs", MTabs);

package/toast.js

@@ -0,0 +1,100 @@
+/* mica/toast.js — toast stacking, auto-dismiss, and a spawn helper.
+ * Tier 2.
+ *
+ * Enhances the Tier-1 toast recipe (corner-pinned manual popovers).
+ * Declared toasts keep working without this module — it adds:
+ *
+ * - stacking: open toasts stack upward; JS ships one number per toast
+ *   (--m-toast-offset), CSS owns the geometry and the reflow motion
+ * - auto-dismiss: `duration` attribute in ms (default 5000, "0" = sticky),
+ *   paused while hovered
+ * - toast(title, { description, variant, duration }): spawns the same
+ *   recipe markup, shows it, and removes it after dismissal
+ */
+
+const GAP = 8;
+const DEFAULT_DURATION = 5000;
+
+const open = [];
+const timers = new WeakMap();
+
+const isToast = (el) =>
+  el instanceof HTMLElement && el.matches("[popover].toast");
+
+function restack() {
+  let offset = 0;
+  for (let i = open.length - 1; i >= 0; i--) {
+    open[i].style.setProperty("--m-toast-offset", `${offset}px`);
+    offset += open[i].getBoundingClientRect().height + GAP;
+  }
+}
+
+function startTimer(el) {
+  const ms = el.hasAttribute("duration")
+    ? Number(el.getAttribute("duration"))
+    : DEFAULT_DURATION;
+  if (!ms) return;
+  timers.set(el, setTimeout(() => el.hidePopover(), ms));
+}
+
+function stopTimer(el) {
+  clearTimeout(timers.get(el));
+}
+
+function attachHoverPause(el) {
+  if (el.__mToastHover) return;
+  el.__mToastHover = true;
+  el.addEventListener("pointerenter", () => stopTimer(el));
+  el.addEventListener("pointerleave", () => {
+    if (el.matches(":popover-open")) startTimer(el);
+  });
+}
+
+// toggle doesn't bubble; capture reaches the target anyway
+document.addEventListener(
+  "toggle",
+  (e) => {
+    const el = e.target;
+    if (!isToast(el)) return;
+    if (e.newState === "open") {
+      open.push(el);
+      attachHoverPause(el);
+      startTimer(el);
+    } else {
+      const i = open.indexOf(el);
+      if (i > -1) open.splice(i, 1);
+      stopTimer(el);
+      if (el.dataset.ephemeral !== undefined) el.remove();
+    }
+    restack();
+  },
+  true,
+);
+
+export function toast(title, { description = "", variant = "", duration } = {}) {
+  const el = document.createElement("div");
+  el.popover = "manual";
+  el.className = `toast${variant ? ` ${variant}` : ""}`;
+  el.setAttribute("role", "status");
+  el.dataset.ephemeral = "";
+  if (duration !== undefined) el.setAttribute("duration", String(duration));
+
+  const x = document.createElement("button");
+  x.className = "close";
+  x.setAttribute("aria-label", "Dismiss");
+  x.textContent = "\u2715";
+  x.addEventListener("click", () => el.hidePopover());
+
+  const b = document.createElement("b");
+  b.textContent = title;
+
+  el.append(x, b);
+  if (description) {
+    const s = document.createElement("span");
+    s.textContent = description;
+    el.append(s);
+  }
+  document.body.append(el);
+  el.showPopover();
+  return el;
+}