@dogsbay/elements 0.2.0-beta.14 → 0.2.0-beta.140

package/dist/{base-BtvRtAsC.d.ts → base-D1Rz70fn.d.ts}

@@ -7,6 +7,7 @@
  */
 declare abstract class DogsbayElement extends HTMLElement {
     private _initialized;
+    private _deferred;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** One-time setup: query children, generate IDs, set ARIA. */

package/dist/chunk-2ZMWJ74J.js

@@ -0,0 +1,233 @@
+import {
+  own,
+  uid
+} from "./chunk-KXCPLIQD.js";
+import {
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-MZDGSTI4.js";
+
+// src/db-nav-tree.ts
+var DbNavTree = class extends DogsbayElement {
+  /** Nav data for lazy sections. Falls back to `window[data-source]`. */
+  navData = null;
+  onClick = (e) => {
+    const toggle = e.target.closest("[data-part='toggle']");
+    if (!toggle || toggle.closest("db-nav-tree") !== this) return;
+    const item = toggle.closest("[data-part='item']");
+    if (item) this.toggle(item);
+  };
+  onKey = (e) => {
+    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+    const active = document.activeElement;
+    if (!active || !this.contains(active)) return;
+    const rows = this.visibleRows();
+    const row = active.closest("[data-part='row']");
+    const i = row ? rows.indexOf(row) : -1;
+    if (i < 0) return;
+    const item = row.closest("[data-part='item']");
+    const hasGroup = !!this.groupOf(item);
+    const focusRow = (r) => {
+      if (!r) return;
+      e.preventDefault();
+      this.primary(r)?.focus();
+    };
+    switch (e.key) {
+      case "ArrowDown":
+        return focusRow(rows[i + 1]);
+      case "ArrowUp":
+        return focusRow(rows[i - 1]);
+      case "Home":
+        return focusRow(rows[0]);
+      case "End":
+        return focusRow(rows[rows.length - 1]);
+      case "ArrowRight":
+        if (!hasGroup) return;
+        e.preventDefault();
+        if (!this.isOpen(item)) this.setOpen(item, true);
+        else focusRow(this.visibleRows()[i + 1]);
+        return;
+      case "ArrowLeft": {
+        e.preventDefault();
+        if (hasGroup && this.isOpen(item)) return this.setOpen(item, false);
+        const parent = item.parentElement?.closest("[data-part='item']");
+        if (parent && this.contains(parent)) {
+          const pr = parent.querySelector(":scope > [data-part='row']");
+          if (pr) this.primary(pr)?.focus();
+        }
+        return;
+      }
+    }
+  };
+  setup() {
+    for (const item of own(this, "[data-part='item']")) this.prepareItem(item);
+  }
+  connect() {
+    this.addEventListener("click", this.onClick);
+    this.addEventListener("keydown", this.onKey);
+    for (const g of own(this, "[data-part='group'][data-lazy]")) {
+      const item = g.closest("[data-part='item']");
+      if (item && this.isOpen(item)) this.fill(g);
+    }
+    if (this.hasAttribute("scroll-current")) requestAnimationFrame(() => this.revealCurrent());
+  }
+  disconnect() {
+    this.removeEventListener("click", this.onClick);
+    this.removeEventListener("keydown", this.onKey);
+  }
+  prepareItem(item) {
+    const group = this.groupOf(item);
+    const toggle = item.querySelector(":scope > [data-part='row'] > [data-part='toggle']");
+    if (!group || !toggle) return;
+    group.id ||= uid("db-nav-group");
+    toggle.setAttribute("aria-controls", group.id);
+    if (toggle instanceof HTMLButtonElement && !toggle.hasAttribute("type")) toggle.type = "button";
+    const open = toggle.getAttribute("aria-expanded") === "true" || item.getAttribute("data-state") === "open";
+    this.apply(item, open);
+  }
+  groupOf(item) {
+    return item.querySelector(":scope > [data-part='group']");
+  }
+  toggleOf(item) {
+    return item.querySelector(":scope > [data-part='row'] > [data-part='toggle']");
+  }
+  /** The row's main focus target: its link, or its toggle for a label-only section. */
+  primary(row) {
+    return row.querySelector(":scope > [data-part='link']") ?? row.querySelector(":scope > [data-part='toggle']");
+  }
+  visibleRows() {
+    return own(this, "[data-part='row']").filter((r) => !r.closest("[hidden]"));
+  }
+  isOpen(item) {
+    return item.getAttribute("data-state") === "open";
+  }
+  toggle(item) {
+    this.setOpen(item, !this.isOpen(item));
+  }
+  setOpen(item, open) {
+    const group = this.groupOf(item);
+    if (!group || this.isOpen(item) === open) return;
+    if (open && group.hasAttribute("data-lazy")) this.fill(group);
+    this.apply(item, open);
+    this.dispatchEvent(new CustomEvent("db-nav-tree:toggle", { detail: { item, open }, bubbles: true }));
+  }
+  apply(item, open) {
+    const group = this.groupOf(item);
+    const toggle = this.toggleOf(item);
+    if (group) group.hidden = !open;
+    toggle?.setAttribute("aria-expanded", String(open));
+    item.setAttribute("data-state", open ? "open" : "closed");
+  }
+  /** Expand every section on the path to the current page. */
+  revealCurrent() {
+    const cur = this.querySelector("[aria-current='page']");
+    if (!cur) return;
+    for (let item = cur.closest("[data-part='item']"); item && this.contains(item); item = item.parentElement?.closest("[data-part='item']") ?? null) {
+      if (this.groupOf(item) && !this.groupOf(item).contains(cur)) continue;
+      if (this.groupOf(item)) this.setOpen(item, true);
+    }
+    const scroller = scrollParent(this);
+    if (!scroller) return;
+    const r = cur.getBoundingClientRect();
+    const s = scroller.getBoundingClientRect();
+    if (r.top < s.top || r.bottom > s.bottom) scroller.scrollTop += r.top - s.top - s.height / 2 + r.height / 2;
+  }
+  data() {
+    if (this.navData) return this.navData;
+    const name = this.getAttribute("data-source");
+    const g = name ? globalThis[name] : void 0;
+    return Array.isArray(g) ? g : null;
+  }
+  /** Fill a lazy group from nav data. */
+  fill(group) {
+    const data = this.data();
+    const path = group.dataset.path;
+    if (!data || path == null) return;
+    let list = data;
+    let node;
+    for (const i of path.split(".").map(Number)) {
+      node = list?.[i];
+      list = node?.[2];
+    }
+    if (!node?.[2]) return;
+    group.replaceChildren(...this.build(node[2], path));
+    group.removeAttribute("data-lazy");
+  }
+  build(items, path) {
+    const base = this.getAttribute("base") ?? "";
+    const tmpl = this.getAttribute("toggle-label") ?? "Toggle {label}";
+    const current = location.href.split("#")[0];
+    return items.map(([label, url, kids, noCurrent], i) => {
+      const here = `${path}.${i}`;
+      const li = document.createElement("li");
+      li.setAttribute("data-part", "item");
+      li.style.setProperty("--db-level", String(here.split(".").length - 1));
+      const row = document.createElement("div");
+      row.setAttribute("data-part", "row");
+      li.appendChild(row);
+      const probe = url?.replace(/[\u0000-\u0020]/g, "") ?? "";
+      if (url != null && /^[a-z][a-z0-9+.-]*:/i.test(probe) && !/^(?:https?|mailto):/i.test(probe)) url = null;
+      const external = url != null && /^[a-z][a-z0-9+.-]*:|^\/\//i.test(probe);
+      let toggle = null;
+      if (kids?.length) {
+        toggle = document.createElement("button");
+        toggle.type = "button";
+        toggle.setAttribute("data-part", "toggle");
+        toggle.setAttribute("aria-expanded", "false");
+        if (url != null) toggle.setAttribute("aria-label", tmpl.replace("{label}", () => label));
+        else {
+          const span = document.createElement("span");
+          span.setAttribute("data-part", "label");
+          span.textContent = label;
+          toggle.appendChild(span);
+        }
+        toggle.insertAdjacentHTML("beforeend", CHEVRON);
+      }
+      const atEnd = this.getAttribute("toggle-position") === "end";
+      if (toggle && !atEnd) row.appendChild(toggle);
+      if (url != null) {
+        const a = document.createElement("a");
+        a.setAttribute("data-part", "link");
+        a.textContent = label;
+        a.href = external ? url : base + url;
+        if (external) a.rel = "noopener";
+        if (!noCurrent && a.href.split("#")[0] === current) a.setAttribute("aria-current", "page");
+        row.appendChild(a);
+      }
+      if (url == null && !kids?.length) {
+        const span = document.createElement("span");
+        span.setAttribute("data-part", "label");
+        span.textContent = label;
+        row.appendChild(span);
+      }
+      if (toggle && atEnd) row.appendChild(toggle);
+      if (kids?.length) {
+        const ul = document.createElement("ul");
+        ul.setAttribute("data-part", "group");
+        ul.dataset.lazy = "";
+        ul.dataset.path = here;
+        ul.hidden = true;
+        li.setAttribute("data-state", "closed");
+        li.appendChild(ul);
+        this.prepareItem(li);
+      }
+      return li;
+    });
+  }
+};
+var CHEVRON = '<svg data-part="chevron" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false"><path d="m9 18 6-6-6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+function scrollParent(el) {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const o = getComputedStyle(p).overflowY;
+    if ((o === "auto" || o === "scroll") && p.scrollHeight > p.clientHeight) return p;
+  }
+  return null;
+}
+ensureDefaultDisplay();
+if (!customElements.get("db-nav-tree")) {
+  customElements.define("db-nav-tree", DbNavTree);
+}
+
+export {
+  DbNavTree
+};

package/dist/{chunk-7M7SFLKN.js → chunk-5KHESKQR.js}

@@ -1,6 +1,7 @@
 import {
-  DogsbayElement
-} from "./chunk-XBMLE4N3.js";
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-MZDGSTI4.js";
 
 // src/db-accordion.ts
 import { CompositeNavigation } from "@dogsbay/primitives/composite";
@@ -85,6 +86,7 @@ var DbAccordion = class extends DogsbayElement {
     );
   }
 };
+ensureDefaultDisplay();
 if (!customElements.get("db-accordion")) {
   customElements.define("db-accordion", DbAccordion);
 }
@@ -92,4 +94,3 @@ if (!customElements.get("db-accordion")) {
 export {
   DbAccordion
 };
-//# sourceMappingURL=chunk-7M7SFLKN.js.map

package/dist/{chunk-TTNTPXBA.js → chunk-5WY3DHVB.js}

@@ -1,6 +1,7 @@
 import {
-  DogsbayElement
-} from "./chunk-XBMLE4N3.js";
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-MZDGSTI4.js";
 
 // src/db-collapsible.ts
 import { Collapsible } from "@dogsbay/primitives/collapsible";
@@ -36,6 +37,7 @@ var DbCollapsible = class extends DogsbayElement {
     }
   }
 };
+ensureDefaultDisplay();
 if (!customElements.get("db-collapsible")) {
   customElements.define("db-collapsible", DbCollapsible);
 }
@@ -43,4 +45,3 @@ if (!customElements.get("db-collapsible")) {
 export {
   DbCollapsible
 };
-//# sourceMappingURL=chunk-TTNTPXBA.js.map

package/dist/chunk-6QAYHFIQ.js

@@ -0,0 +1,115 @@
+import {
+  focusables,
+  hideFloating,
+  ownOne,
+  resolveAsChild,
+  showFloating,
+  uid
+} from "./chunk-KXCPLIQD.js";
+import {
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-MZDGSTI4.js";
+
+// src/db-popover.ts
+import { DismissController } from "@dogsbay/primitives/dismiss";
+import { setupFloating } from "@dogsbay/primitives/floating";
+var DbPopover = class extends DogsbayElement {
+  trigger = null;
+  content = null;
+  dismiss = null;
+  cleanupFloating = null;
+  _open = false;
+  get open() {
+    return this._open;
+  }
+  onTriggerClick = () => this.toggle();
+  onContentClick = (e) => {
+    const close = e.target.closest("[data-part='close']");
+    if (close && close.closest("db-popover") === this) this.close("close-press");
+  };
+  setup() {
+    this.trigger = resolveAsChild(ownOne(this, "[data-part='trigger']"));
+    this.content = ownOne(this, "[data-part='content']");
+    if (!this.trigger || !this.content) return;
+    const content = this.content;
+    content.id ||= uid("db-popover");
+    if (!content.hasAttribute("role")) content.setAttribute("role", "dialog");
+    if (!content.hasAttribute("aria-labelledby") && !content.hasAttribute("aria-label")) {
+      this.trigger.id ||= uid("db-popover-trigger");
+      content.setAttribute("aria-labelledby", this.trigger.id);
+    }
+    content.hidden = true;
+    this.trigger.setAttribute("aria-haspopup", "dialog");
+    this.trigger.setAttribute("aria-controls", content.id);
+    this.trigger.setAttribute("aria-expanded", "false");
+    this.setState("closed");
+    this.dismiss = new DismissController(content, { onDismiss: (reason) => this.close(reason) });
+  }
+  connect() {
+    this.trigger?.addEventListener("click", this.onTriggerClick);
+    this.content?.addEventListener("click", this.onContentClick);
+  }
+  disconnect() {
+    this.trigger?.removeEventListener("click", this.onTriggerClick);
+    this.content?.removeEventListener("click", this.onContentClick);
+    if (this._open) this.close("api");
+  }
+  setState(state) {
+    this.setAttribute("data-state", state);
+    this.content?.setAttribute("data-state", state);
+  }
+  placement() {
+    const attr = this.getAttribute("placement");
+    if (attr) return attr;
+    const side = this.content?.dataset.side || "bottom";
+    const align = this.content?.dataset.align || "center";
+    return `${side}${align !== "center" ? `-${align}` : ""}`;
+  }
+  toggle() {
+    if (this._open) this.close("trigger-press");
+    else this.show();
+  }
+  show() {
+    const { trigger, content } = this;
+    if (!trigger || !content || this._open) return;
+    this._open = true;
+    const layer = showFloating(content);
+    this.setState("open");
+    trigger.setAttribute("aria-expanded", "true");
+    this.cleanupFloating = setupFloating(trigger, content, {
+      placement: this.placement(),
+      offset: Number(this.getAttribute("offset") ?? 8),
+      strategy: layer === "top-layer" ? "fixed" : "absolute"
+    });
+    this.dismiss?.activate();
+    if (!this.hasAttribute("no-autofocus")) {
+      requestAnimationFrame(() => {
+        if (this._open) (focusables(content)[0] ?? content).focus({ preventScroll: true });
+      });
+    }
+    this.dispatchEvent(new CustomEvent("db-popover:open", { bubbles: true }));
+  }
+  close(reason = "api") {
+    const { trigger, content } = this;
+    if (!trigger || !content || !this._open) return;
+    this._open = false;
+    this.dismiss?.deactivate();
+    this.cleanupFloating?.();
+    this.cleanupFloating = null;
+    const hadFocus = content.contains(document.activeElement);
+    hideFloating(content);
+    this.setState("closed");
+    trigger.setAttribute("aria-expanded", "false");
+    if (reason !== "outside-press" && (hadFocus || reason === "escape-key" || reason === "close-press")) trigger.focus();
+    this.dispatchEvent(new CustomEvent("db-popover:close", { detail: { reason }, bubbles: true }));
+  }
+};
+ensureDefaultDisplay();
+if (!customElements.get("db-popover")) {
+  customElements.define("db-popover", DbPopover);
+}
+
+export {
+  DbPopover
+};

package/dist/{chunk-LVXR7KTB.js → chunk-6ZKFQBCF.js}

@@ -1,6 +1,7 @@
 import {
-  DogsbayElement
-} from "./chunk-XBMLE4N3.js";
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-MZDGSTI4.js";
 
 // src/db-tabs.ts
 import { CompositeNavigation } from "@dogsbay/primitives/composite";
@@ -24,29 +25,56 @@ var DbTabs = class extends DogsbayElement {
     const value = trigger.dataset.value;
     if (value) this.select(value);
   };
+  /**
+   * A synced group follows only a value it HAS. Groups sharing a key need
+   * not share a tab set (a web-only snippet group beside an all-SDK one), and
+   * selecting a value with no trigger here left the group with every panel
+   * hidden and no tab selected.
+   */
+  has(value) {
+    return this.triggers.some((t) => t.dataset.value === value);
+  }
   handleStorage = (e) => {
     if (!this.syncKey || e.key !== `db-tabs-sync:${this.syncKey}`) return;
     const newValue = e.newValue;
-    if (newValue && this.value !== newValue) {
+    if (newValue && this.value !== newValue && this.has(newValue)) {
       this.select(newValue);
     }
   };
   handleSyncEvent = ((e) => {
     const newValue = e.detail.value;
-    if (newValue && this.value !== newValue) {
+    if (newValue && this.value !== newValue && this.has(newValue)) {
       this.select(newValue);
     }
   });
+  /**
+   * Descendants belonging to THIS tab group.
+   *
+   * Not `:scope >`, and not a bare descendant query — both were wrong
+   * here, in opposite directions:
+   *
+   * - Panels used `:scope > [data-part='content']`, so any wrapper
+   *   between the element and its panels hid them. The vertical example
+   *   wraps its list and panels in a flex row to sit them side by side,
+   *   so `panels` was EMPTY: triggers moved `aria-selected`, and the
+   *   content never changed. Nothing threw, and the server-rendered
+   *   initial state looked right, so it read as working.
+   * - Triggers used a bare descendant query, which would reach into a
+   *   NESTED tab group and drive the wrong panels.
+   *
+   * `closest("db-tabs") === this` allows arbitrary wrappers while
+   * stopping at a nested group, which is a real case — Obsidian
+   * alternates fence characters by depth precisely so tabs can nest.
+   */
+  own(selector) {
+    return Array.from(this.querySelectorAll(selector)).filter((el) => el.closest("db-tabs") === this);
+  }
   setup() {
-    const list = this.querySelector("[data-part='list']");
+    const list = this.own("[data-part='list']")[0] ?? null;
     if (!list) return;
     this.list = list;
-    this.triggers = Array.from(
-      list.querySelectorAll("[data-part='trigger']")
-    );
-    this.panels = Array.from(
-      this.querySelectorAll(":scope > [data-part='content']")
-    );
+    this.triggers = this.own("[data-part='trigger']");
+    this.panels = this.own("[data-part='content']");
     this.orientation = this.getAttribute("orientation") || "horizontal";
     this.syncKey = this.getAttribute("sync-key") || null;
     list.setAttribute("role", "tablist");
@@ -151,6 +179,7 @@ var DbTabs = class extends DogsbayElement {
     );
   }
 };
+ensureDefaultDisplay();
 if (!customElements.get("db-tabs")) {
   customElements.define("db-tabs", DbTabs);
 }
@@ -158,4 +187,3 @@ if (!customElements.get("db-tabs")) {
 export {
   DbTabs
 };
-//# sourceMappingURL=chunk-LVXR7KTB.js.map

package/dist/{chunk-5T4OXQA2.js → chunk-AVQ7KRRE.js}

@@ -1,19 +1,19 @@
 import {
-  DogsbayElement
-} from "./chunk-XBMLE4N3.js";
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-MZDGSTI4.js";
 
 // src/db-steps.ts
 var DbSteps = class extends DogsbayElement {
   setup() {
     this.setAttribute("role", "list");
-    const items = this.querySelectorAll(
-      ":scope > [data-part='item']"
-    );
+    const items = Array.from(this.querySelectorAll("[data-part='item']")).filter((el) => el.closest("db-steps") === this);
     for (const item of items) {
       item.setAttribute("role", "listitem");
     }
   }
 };
+ensureDefaultDisplay();
 if (!customElements.get("db-steps")) {
   customElements.define("db-steps", DbSteps);
 }
@@ -21,4 +21,3 @@ if (!customElements.get("db-steps")) {
 export {
   DbSteps
 };
-//# sourceMappingURL=chunk-5T4OXQA2.js.map

package/dist/{chunk-FWAAU5UY.js → chunk-CD3G6HKT.js}

@@ -1,6 +1,7 @@
 import {
-  DogsbayElement
-} from "./chunk-XBMLE4N3.js";
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-MZDGSTI4.js";
 
 // src/db-code-block.ts
 var DbCodeBlock = class extends DogsbayElement {
@@ -79,6 +80,7 @@ var DbCodeBlock = class extends DogsbayElement {
     }
   }
 };
+ensureDefaultDisplay();
 if (!customElements.get("db-code-block")) {
   customElements.define("db-code-block", DbCodeBlock);
 }
@@ -86,4 +88,3 @@ if (!customElements.get("db-code-block")) {
 export {
   DbCodeBlock
 };
-//# sourceMappingURL=chunk-FWAAU5UY.js.map

package/dist/chunk-EPHDSTM7.js

@@ -0,0 +1,85 @@
+import {
+  safeDecode
+} from "./chunk-KXCPLIQD.js";
+import {
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-MZDGSTI4.js";
+
+// src/db-toc.ts
+var DbToc = class extends DogsbayElement {
+  links = [];
+  headings = [];
+  observer = null;
+  active = null;
+  slugOf(a) {
+    return a.getAttribute("data-toc-slug") ?? safeDecode(a.getAttribute("href").slice(1));
+  }
+  // Headings in a short tail never reach the observed band; at the bottom of the
+  // page the last one is current.
+  onScroll = () => {
+    const doc = document.documentElement;
+    if (window.innerHeight + window.scrollY >= doc.scrollHeight - 2 && this.headings.length) {
+      this.setActive(this.headings[this.headings.length - 1].id);
+    }
+  };
+  setup() {
+    this.links = Array.from(this.querySelectorAll("a[href^='#'], a[data-toc-link]"));
+  }
+  onHash = () => {
+    const id = safeDecode(location.hash.slice(1));
+    if (id && this.headings.some((h) => h.id === id)) this.setActive(id);
+  };
+  connect() {
+    this.headings = this.links.map((a) => document.getElementById(this.slugOf(a))).filter((h) => !!h);
+    if (!this.headings.length) return;
+    const offset = Number(this.getAttribute("offset") ?? 80);
+    if (typeof IntersectionObserver !== "undefined") {
+      this.observer = new IntersectionObserver(
+        (entries) => {
+          const hit = entries.find((e) => e.isIntersecting);
+          if (hit) return this.setActive(hit.target.id);
+          this.setActive(this.lastAbove(offset)?.id ?? null);
+        },
+        { rootMargin: `-${offset}px 0px -70% 0px`, threshold: 0 }
+      );
+      this.headings.forEach((h) => this.observer.observe(h));
+    }
+    window.addEventListener("hashchange", this.onHash);
+    window.addEventListener("scroll", this.onScroll, { passive: true });
+    this.setActive(this.lastAbove(offset)?.id ?? this.headings[0].id);
+  }
+  disconnect() {
+    this.observer?.disconnect();
+    this.observer = null;
+    window.removeEventListener("hashchange", this.onHash);
+    window.removeEventListener("scroll", this.onScroll);
+  }
+  lastAbove(offset) {
+    let last = null;
+    for (const h of this.headings) if (h.getBoundingClientRect().top <= offset + 20) last = h;
+    return last;
+  }
+  setActive(id) {
+    if (!id || id === this.active) return;
+    this.active = id;
+    for (const a of this.links) {
+      if (this.slugOf(a) === id) {
+        a.setAttribute("aria-current", "location");
+        a.setAttribute("data-active", "");
+      } else {
+        a.removeAttribute("aria-current");
+        a.removeAttribute("data-active");
+      }
+    }
+    this.dispatchEvent(new CustomEvent("db-toc:change", { detail: { id }, bubbles: true }));
+  }
+};
+ensureDefaultDisplay();
+if (!customElements.get("db-toc")) {
+  customElements.define("db-toc", DbToc);
+}
+
+export {
+  DbToc
+};