@dogsbay/elements 0.2.0-beta.114 → 0.2.0-beta.116

package/dist/chunk-MEOIAZDF.js

@@ -0,0 +1,140 @@
+import {
+  hideFloating,
+  ownOne,
+  resolveAsChild,
+  showFloating,
+  uid
+} from "./chunk-3AEQ6KHV.js";
+import {
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-K6DPDBAG.js";
+
+// src/db-tooltip.ts
+import { setupFloating } from "@dogsbay/primitives/floating";
+var DbTooltip = class extends DogsbayElement {
+  trigger = null;
+  content = null;
+  cleanupFloating = null;
+  showTimer = null;
+  hideTimer = null;
+  _open = false;
+  get open() {
+    return this._open;
+  }
+  num(name, fallback) {
+    const v = Number(this.getAttribute(name));
+    return Number.isFinite(v) && this.hasAttribute(name) ? v : fallback;
+  }
+  onEnter = (e) => {
+    if (e.pointerType === "touch") return;
+    this.clearTimers();
+    if (!this._open) this.showTimer = setTimeout(() => this.show(), this.num("delay", 200));
+  };
+  onLeave = (e) => {
+    if (e.pointerType === "touch") return;
+    this.clearTimers();
+    this.hideTimer = setTimeout(() => this.hide(), this.num("close-delay", 100));
+  };
+  onContentEnter = () => this.clearTimers();
+  // Keyboard focus only: a mouse press focuses the button too, and would reopen
+  // the tooltip the press just closed.
+  onFocus = () => {
+    let keyboard = true;
+    try {
+      keyboard = this.trigger.matches(":focus-visible");
+    } catch {
+    }
+    if (!keyboard) return;
+    this.clearTimers();
+    this.show();
+  };
+  onBlur = () => this.hide();
+  onPress = () => this.hide();
+  // Capture phase, consumed: Escape dismisses only the tooltip, not a popover or
+  // dialog around its trigger (WCAG 1.4.13, APG tooltip).
+  onKey = (e) => {
+    if (e.key === "Escape" && this._open) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      this.hide();
+    }
+  };
+  setup() {
+    this.trigger = resolveAsChild(ownOne(this, "[data-part='trigger']"));
+    this.content = ownOne(this, "[data-part='content']");
+    if (!this.trigger || !this.content) return;
+    this.content.id ||= uid("db-tooltip");
+    this.content.setAttribute("role", "tooltip");
+    this.content.hidden = true;
+    const described = (this.trigger.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
+    if (!described.includes(this.content.id)) this.trigger.setAttribute("aria-describedby", [...described, this.content.id].join(" "));
+    this.setState("closed");
+  }
+  connect() {
+    const { trigger, content } = this;
+    if (!trigger || !content) return;
+    trigger.addEventListener("pointerenter", this.onEnter);
+    trigger.addEventListener("pointerleave", this.onLeave);
+    trigger.addEventListener("focus", this.onFocus);
+    trigger.addEventListener("blur", this.onBlur);
+    trigger.addEventListener("pointerdown", this.onPress);
+    content.addEventListener("pointerenter", this.onContentEnter);
+    content.addEventListener("pointerleave", this.onLeave);
+  }
+  disconnect() {
+    const { trigger, content } = this;
+    trigger?.removeEventListener("pointerenter", this.onEnter);
+    trigger?.removeEventListener("pointerleave", this.onLeave);
+    trigger?.removeEventListener("focus", this.onFocus);
+    trigger?.removeEventListener("blur", this.onBlur);
+    trigger?.removeEventListener("pointerdown", this.onPress);
+    content?.removeEventListener("pointerenter", this.onContentEnter);
+    content?.removeEventListener("pointerleave", this.onLeave);
+    this.hide();
+  }
+  clearTimers() {
+    if (this.showTimer) clearTimeout(this.showTimer);
+    if (this.hideTimer) clearTimeout(this.hideTimer);
+    this.showTimer = this.hideTimer = null;
+  }
+  setState(state) {
+    this.setAttribute("data-state", state);
+    this.content?.setAttribute("data-state", state);
+  }
+  show() {
+    const { trigger, content } = this;
+    if (!trigger || !content || this._open) return;
+    this._open = true;
+    this.clearTimers();
+    const layer = showFloating(content);
+    this.setState("open");
+    this.cleanupFloating = setupFloating(trigger, content, {
+      placement: this.getAttribute("placement") || content.dataset.side || "top",
+      offset: 8,
+      strategy: layer === "top-layer" ? "fixed" : "absolute"
+    });
+    document.addEventListener("keydown", this.onKey, true);
+    this.dispatchEvent(new CustomEvent("db-tooltip:open", { bubbles: true }));
+  }
+  hide() {
+    this.clearTimers();
+    if (!this._open || !this.content) return;
+    this._open = false;
+    document.removeEventListener("keydown", this.onKey, true);
+    this.cleanupFloating?.();
+    this.cleanupFloating = null;
+    hideFloating(this.content);
+    this.setState("closed");
+    this.dispatchEvent(new CustomEvent("db-tooltip:close", { bubbles: true }));
+  }
+};
+ensureDefaultDisplay();
+if (!customElements.get("db-tooltip")) {
+  customElements.define("db-tooltip", DbTooltip);
+}
+
+export {
+  DbTooltip
+};
+//# sourceMappingURL=chunk-MEOIAZDF.js.map

package/dist/chunk-MEOIAZDF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/db-tooltip.ts"],"sourcesContent":["import { setupFloating, type FloatingOptions } from \"@dogsbay/primitives/floating\";\nimport { DogsbayElement, ensureDefaultDisplay } from \"./base.js\";\nimport { hideFloating, ownOne, resolveAsChild, showFloating, uid } from \"./utils.js\";\n\ntype Placement = NonNullable<FloatingOptions[\"placement\"]>;\n\n/**\n * `<db-tooltip>` — Short description shown on hover and keyboard focus\n * (APG \"Tooltip\"). The trigger is described by the content\n * (aria-describedby), so screen readers announce it without showing it.\n *\n * WCAG 1.4.13 (content on hover or focus):\n *   - hoverable: the pointer can move from the trigger onto the tooltip\n *     without it closing (`close-delay`, default 100 ms);\n *   - dismissible: Escape hides it, whether it opened from hover or focus;\n *   - persistent: it stays until the pointer leaves, focus moves or Escape.\n *\n * Attributes:\n *   delay        — ms before showing on hover (default 200)\n *   close-delay  — ms grace period on leave (default 100)\n *   placement    — \"top\" (default), or data-side on the content\n *\n * Parts: [data-part=\"trigger\"] (`data-as-child` supported), [data-part=\"content\"]\n *\n * Events: db-tooltip:open, db-tooltip:close\n */\nexport class DbTooltip extends DogsbayElement {\n  private trigger: HTMLElement | null = null;\n  private content: HTMLElement | null = null;\n  private cleanupFloating: (() => void) | null = null;\n  private showTimer: ReturnType<typeof setTimeout> | null = null;\n  private hideTimer: ReturnType<typeof setTimeout> | null = null;\n  private _open = false;\n\n  get open(): boolean {\n    return this._open;\n  }\n\n  private num(name: string, fallback: number): number {\n    const v = Number(this.getAttribute(name));\n    return Number.isFinite(v) && this.hasAttribute(name) ? v : fallback;\n  }\n\n  private onEnter = (e: PointerEvent) => {\n    if (e.pointerType === \"touch\") return;\n    this.clearTimers();\n    if (!this._open) this.showTimer = setTimeout(() => this.show(), this.num(\"delay\", 200));\n  };\n\n  private onLeave = (e: PointerEvent) => {\n    if (e.pointerType === \"touch\") return;\n    this.clearTimers();\n    this.hideTimer = setTimeout(() => this.hide(), this.num(\"close-delay\", 100));\n  };\n\n  private onContentEnter = () => this.clearTimers();\n\n  // Keyboard focus only: a mouse press focuses the button too, and would reopen\n  // the tooltip the press just closed.\n  private onFocus = () => {\n    let keyboard = true;\n    try {\n      keyboard = this.trigger!.matches(\":focus-visible\");\n    } catch {\n      /* :focus-visible unsupported: treat as keyboard */\n    }\n    if (!keyboard) return;\n    this.clearTimers();\n    this.show();\n  };\n\n  private onBlur = () => this.hide();\n\n  private onPress = () => this.hide();\n\n  // Capture phase, consumed: Escape dismisses only the tooltip, not a popover or\n  // dialog around its trigger (WCAG 1.4.13, APG tooltip).\n  private onKey = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\" && this._open) {\n      e.preventDefault();\n      e.stopImmediatePropagation();\n      this.hide();\n    }\n  };\n\n  protected setup() {\n    this.trigger = resolveAsChild(ownOne(this, \"[data-part='trigger']\"));\n    this.content = ownOne(this, \"[data-part='content']\");\n    if (!this.trigger || !this.content) return;\n    this.content.id ||= uid(\"db-tooltip\");\n    this.content.setAttribute(\"role\", \"tooltip\");\n    this.content.hidden = true;\n    const described = (this.trigger.getAttribute(\"aria-describedby\") ?? \"\").split(/\\s+/).filter(Boolean);\n    if (!described.includes(this.content.id)) this.trigger.setAttribute(\"aria-describedby\", [...described, this.content.id].join(\" \"));\n    this.setState(\"closed\");\n  }\n\n  protected connect() {\n    const { trigger, content } = this;\n    if (!trigger || !content) return;\n    trigger.addEventListener(\"pointerenter\", this.onEnter);\n    trigger.addEventListener(\"pointerleave\", this.onLeave);\n    trigger.addEventListener(\"focus\", this.onFocus);\n    trigger.addEventListener(\"blur\", this.onBlur);\n    trigger.addEventListener(\"pointerdown\", this.onPress);\n    content.addEventListener(\"pointerenter\", this.onContentEnter);\n    content.addEventListener(\"pointerleave\", this.onLeave);\n  }\n\n  protected disconnect() {\n    const { trigger, content } = this;\n    trigger?.removeEventListener(\"pointerenter\", this.onEnter);\n    trigger?.removeEventListener(\"pointerleave\", this.onLeave);\n    trigger?.removeEventListener(\"focus\", this.onFocus);\n    trigger?.removeEventListener(\"blur\", this.onBlur);\n    trigger?.removeEventListener(\"pointerdown\", this.onPress);\n    content?.removeEventListener(\"pointerenter\", this.onContentEnter);\n    content?.removeEventListener(\"pointerleave\", this.onLeave);\n    this.hide();\n  }\n\n  private clearTimers() {\n    if (this.showTimer) clearTimeout(this.showTimer);\n    if (this.hideTimer) clearTimeout(this.hideTimer);\n    this.showTimer = this.hideTimer = null;\n  }\n\n  private setState(state: \"open\" | \"closed\") {\n    this.setAttribute(\"data-state\", state);\n    this.content?.setAttribute(\"data-state\", state);\n  }\n\n  show() {\n    const { trigger, content } = this;\n    if (!trigger || !content || this._open) return;\n    this._open = true;\n    this.clearTimers();\n    const layer = showFloating(content);\n    this.setState(\"open\");\n    this.cleanupFloating = setupFloating(trigger, content, {\n      placement: (this.getAttribute(\"placement\") || content.dataset.side || \"top\") as Placement,\n      offset: 8,\n      strategy: layer === \"top-layer\" ? \"fixed\" : \"absolute\",\n    });\n    document.addEventListener(\"keydown\", this.onKey, true);\n    this.dispatchEvent(new CustomEvent(\"db-tooltip:open\", { bubbles: true }));\n  }\n\n  hide() {\n    this.clearTimers();\n    if (!this._open || !this.content) return;\n    this._open = false;\n    document.removeEventListener(\"keydown\", this.onKey, true);\n    this.cleanupFloating?.();\n    this.cleanupFloating = null;\n    hideFloating(this.content);\n    this.setState(\"closed\");\n    this.dispatchEvent(new CustomEvent(\"db-tooltip:close\", { bubbles: true }));\n  }\n}\n\nensureDefaultDisplay();\n\nif (!customElements.get(\"db-tooltip\")) {\n  customElements.define(\"db-tooltip\", DbTooltip);\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-WTARNLNI.js → chunk-QSRUT67Y.js}

@@ -1,7 +1,7 @@
 import {
   DogsbayElement,
   ensureDefaultDisplay
-} from "./chunk-ABP4WEKU.js";
+} from "./chunk-K6DPDBAG.js";
 
 // src/db-link-button.ts
 var DbLinkButton = class extends DogsbayElement {
@@ -36,4 +36,4 @@ if (!customElements.get("db-link-button")) {
 export {
   DbLinkButton
 };
-//# sourceMappingURL=chunk-WTARNLNI.js.map
+//# sourceMappingURL=chunk-QSRUT67Y.js.map

package/dist/chunk-S62ZVVO3.js

@@ -0,0 +1,234 @@
+import {
+  own,
+  uid
+} from "./chunk-3AEQ6KHV.js";
+import {
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-K6DPDBAG.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
+};
+//# sourceMappingURL=chunk-S62ZVVO3.js.map

package/dist/chunk-S62ZVVO3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/db-nav-tree.ts"],"sourcesContent":["import { DogsbayElement, ensureDefaultDisplay } from \"./base.js\";\nimport { own, uid } from \"./utils.js\";\n\n/**\n * [label, url, children?, noCurrent?]. `noCurrent` (1): never mark this link\n * as the current page even when its URL matches — an alias (a link to a page\n * that lives in another section) or a #section link. The server-rendered\n * tree already leaves those unmarked; lazily built groups must agree.\n */\nexport type NavData = [string, string | null, NavData[]?, 1?];\n\n/**\n * `<db-nav-tree>` — Site navigation tree (APG \"Disclosure Navigation\").\n *\n * A section that is also a page gets a real link AND a separate toggle\n * button as siblings — never a link inside `<summary>`, which is nested\n * interactive content (axe `nested-interactive`). A section with no page\n * is a single toggle button carrying the label. Every link stays in the\n * normal Tab order; arrow keys are an extra shortcut, not a replacement.\n *\n * Server-rendered markup works without JavaScript: links navigate, and the\n * branch to the current page is rendered open.\n *\n *   <db-nav-tree>\n *     <ul data-part=\"list\">\n *       <li data-part=\"item\" data-state=\"open\">\n *         <div data-part=\"row\">\n *           <button data-part=\"toggle\" type=\"button\" aria-expanded=\"true\" aria-controls=\"g1\" aria-label=\"Toggle Guides\"></button>\n *           <a data-part=\"link\" href=\"guides/index.html\">Guides</a>\n *         </div>\n *         <ul data-part=\"group\" id=\"g1\">…</ul>\n *       </li>\n *       <li data-part=\"item\"><div data-part=\"row\"><a data-part=\"link\" href=\"faq.html\" aria-current=\"page\">FAQ</a></div></li>\n *     </ul>\n *   </db-nav-tree>\n *\n * Lazy sections: a group with `data-lazy` and `data-path=\"0.3\"` is filled\n * from `navData` (or the global named by `data-source`) the first time it\n * opens. URLs in the data are prefixed with the `base` attribute.\n *\n * Attributes:\n *   base            — prefix for data URLs (e.g. \"../../\")\n *   data-source     — name of a window global holding NavData[]\n *   toggle-label    — accessible name template, default \"Toggle {label}\"\n *   scroll-current  — scroll the current page's link into view on connect\n * Built items carry `style=\"--db-level:N\"` (0 at the top) so CSS can indent\n * them; server markup should set the same.\n *\n *   toggle-position — \"start\" (default) or \"end\": where lazily built rows put\n *                     the toggle relative to the link. Match the server markup\n *                     so DOM (and Tab) order follows the visual order.\n *\n * Keyboard (in addition to Tab): ArrowDown/ArrowUp move between visible\n * rows, ArrowRight opens a section or moves into it, ArrowLeft closes it or\n * moves to its parent, Home/End go to the first/last row.\n *\n * Events: db-nav-tree:toggle (detail: { item, open })\n */\nexport class DbNavTree extends DogsbayElement {\n  /** Nav data for lazy sections. Falls back to `window[data-source]`. */\n  navData: NavData[] | null = null;\n\n  private onClick = (e: Event) => {\n    const toggle = (e.target as HTMLElement).closest<HTMLElement>(\"[data-part='toggle']\");\n    if (!toggle || toggle.closest(\"db-nav-tree\") !== this) return;\n    const item = toggle.closest<HTMLElement>(\"[data-part='item']\");\n    if (item) this.toggle(item);\n  };\n\n  private onKey = (e: KeyboardEvent) => {\n    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;\n    const active = document.activeElement as HTMLElement | null;\n    if (!active || !this.contains(active)) return;\n    const rows = this.visibleRows();\n    const row = active.closest<HTMLElement>(\"[data-part='row']\");\n    const i = row ? rows.indexOf(row) : -1;\n    if (i < 0) return;\n    const item = row!.closest<HTMLElement>(\"[data-part='item']\")!;\n    const hasGroup = !!this.groupOf(item);\n    const focusRow = (r: HTMLElement | undefined) => {\n      if (!r) return;\n      e.preventDefault();\n      this.primary(r)?.focus();\n    };\n    switch (e.key) {\n      case \"ArrowDown\":\n        return focusRow(rows[i + 1]);\n      case \"ArrowUp\":\n        return focusRow(rows[i - 1]);\n      case \"Home\":\n        return focusRow(rows[0]);\n      case \"End\":\n        return focusRow(rows[rows.length - 1]);\n      case \"ArrowRight\":\n        if (!hasGroup) return;\n        e.preventDefault();\n        if (!this.isOpen(item)) this.setOpen(item, true);\n        else focusRow(this.visibleRows()[i + 1]);\n        return;\n      case \"ArrowLeft\": {\n        e.preventDefault();\n        if (hasGroup && this.isOpen(item)) return this.setOpen(item, false);\n        const parent = item.parentElement?.closest<HTMLElement>(\"[data-part='item']\");\n        if (parent && this.contains(parent)) {\n          const pr = parent.querySelector<HTMLElement>(\":scope > [data-part='row']\");\n          if (pr) this.primary(pr)?.focus();\n        }\n        return;\n      }\n    }\n  };\n\n  protected setup() {\n    for (const item of own(this, \"[data-part='item']\")) this.prepareItem(item);\n  }\n\n  protected connect() {\n    this.addEventListener(\"click\", this.onClick);\n    this.addEventListener(\"keydown\", this.onKey);\n    // Sections rendered open with lazy content fill now.\n    for (const g of own(this, \"[data-part='group'][data-lazy]\")) {\n      const item = g.closest<HTMLElement>(\"[data-part='item']\");\n      if (item && this.isOpen(item)) this.fill(g);\n    }\n    if (this.hasAttribute(\"scroll-current\")) requestAnimationFrame(() => this.revealCurrent());\n  }\n\n  protected disconnect() {\n    this.removeEventListener(\"click\", this.onClick);\n    this.removeEventListener(\"keydown\", this.onKey);\n  }\n\n  private prepareItem(item: HTMLElement) {\n    const group = this.groupOf(item);\n    const toggle = item.querySelector<HTMLElement>(\":scope > [data-part='row'] > [data-part='toggle']\");\n    if (!group || !toggle) return;\n    group.id ||= uid(\"db-nav-group\");\n    toggle.setAttribute(\"aria-controls\", group.id);\n    if (toggle instanceof HTMLButtonElement && !toggle.hasAttribute(\"type\")) toggle.type = \"button\";\n    const open = toggle.getAttribute(\"aria-expanded\") === \"true\" || item.getAttribute(\"data-state\") === \"open\";\n    this.apply(item, open);\n  }\n\n  private groupOf(item: HTMLElement): HTMLElement | null {\n    return item.querySelector<HTMLElement>(\":scope > [data-part='group']\");\n  }\n\n  private toggleOf(item: HTMLElement): HTMLElement | null {\n    return item.querySelector<HTMLElement>(\":scope > [data-part='row'] > [data-part='toggle']\");\n  }\n\n  /** The row's main focus target: its link, or its toggle for a label-only section. */\n  private primary(row: HTMLElement): HTMLElement | null {\n    return row.querySelector<HTMLElement>(\":scope > [data-part='link']\") ?? row.querySelector<HTMLElement>(\":scope > [data-part='toggle']\");\n  }\n\n  private visibleRows(): HTMLElement[] {\n    return own(this, \"[data-part='row']\").filter((r) => !r.closest(\"[hidden]\"));\n  }\n\n  isOpen(item: HTMLElement): boolean {\n    return item.getAttribute(\"data-state\") === \"open\";\n  }\n\n  toggle(item: HTMLElement) {\n    this.setOpen(item, !this.isOpen(item));\n  }\n\n  setOpen(item: HTMLElement, open: boolean) {\n    const group = this.groupOf(item);\n    if (!group || this.isOpen(item) === open) return;\n    if (open && group.hasAttribute(\"data-lazy\")) this.fill(group);\n    this.apply(item, open);\n    this.dispatchEvent(new CustomEvent(\"db-nav-tree:toggle\", { detail: { item, open }, bubbles: true }));\n  }\n\n  private apply(item: HTMLElement, open: boolean) {\n    const group = this.groupOf(item);\n    const toggle = this.toggleOf(item);\n    if (group) group.hidden = !open;\n    toggle?.setAttribute(\"aria-expanded\", String(open));\n    item.setAttribute(\"data-state\", open ? \"open\" : \"closed\");\n  }\n\n  /** Expand every section on the path to the current page. */\n  revealCurrent() {\n    const cur = this.querySelector<HTMLElement>(\"[aria-current='page']\");\n    if (!cur) return;\n    for (let item = cur.closest<HTMLElement>(\"[data-part='item']\"); item && this.contains(item); item = item.parentElement?.closest<HTMLElement>(\"[data-part='item']\") ?? null) {\n      if (this.groupOf(item) && !this.groupOf(item)!.contains(cur)) continue;\n      if (this.groupOf(item)) this.setOpen(item, true);\n    }\n    // Scroll only the nearest scrolling ancestor, and only when the link is out of view.\n    const scroller = scrollParent(this);\n    if (!scroller) return;\n    const r = cur.getBoundingClientRect();\n    const s = scroller.getBoundingClientRect();\n    if (r.top < s.top || r.bottom > s.bottom) scroller.scrollTop += r.top - s.top - s.height / 2 + r.height / 2;\n  }\n\n  private data(): NavData[] | null {\n    if (this.navData) return this.navData;\n    const name = this.getAttribute(\"data-source\");\n    const g = name ? (globalThis as Record<string, unknown>)[name] : undefined;\n    return Array.isArray(g) ? (g as NavData[]) : null;\n  }\n\n  /** Fill a lazy group from nav data. */\n  private fill(group: HTMLElement) {\n    const data = this.data();\n    const path = group.dataset.path;\n    if (!data || path == null) return;\n    let list: NavData[] | undefined = data;\n    let node: NavData | undefined;\n    for (const i of path.split(\".\").map(Number)) {\n      node = list?.[i];\n      list = node?.[2];\n    }\n    if (!node?.[2]) return;\n    group.replaceChildren(...this.build(node[2], path));\n    group.removeAttribute(\"data-lazy\");\n  }\n\n  private build(items: NavData[], path: string): HTMLElement[] {\n    const base = this.getAttribute(\"base\") ?? \"\";\n    const tmpl = this.getAttribute(\"toggle-label\") ?? \"Toggle {label}\";\n    const current = location.href.split(\"#\")[0];\n    return items.map(([label, url, kids, noCurrent], i) => {\n      const here = `${path}.${i}`;\n      const li = document.createElement(\"li\");\n      li.setAttribute(\"data-part\", \"item\");\n      // Depth for styling (indentation), matching server-rendered items.\n      li.style.setProperty(\"--db-level\", String(here.split(\".\").length - 1));\n      const row = document.createElement(\"div\");\n      row.setAttribute(\"data-part\", \"row\");\n      li.appendChild(row);\n      // Nav data comes from a project's own TOC files; a `javascript:` (or any\n      // scheme but http(s)/mailto) entry renders as text, never as a link.\n      // Tested without tabs, newlines and other controls, which browsers\n      // strip from a URL (`java\\tscript:` is javascript:).\n      const probe = url?.replace(/[\\u0000-\\u0020]/g, \"\") ?? \"\";\n      if (url != null && /^[a-z][a-z0-9+.-]*:/i.test(probe) && !/^(?:https?|mailto):/i.test(probe)) url = null;\n      const external = url != null && /^[a-z][a-z0-9+.-]*:|^\\/\\//i.test(probe);\n      let toggle: HTMLButtonElement | null = null;\n      if (kids?.length) {\n        toggle = document.createElement(\"button\");\n        toggle.type = \"button\";\n        toggle.setAttribute(\"data-part\", \"toggle\");\n        toggle.setAttribute(\"aria-expanded\", \"false\");\n        if (url != null) toggle.setAttribute(\"aria-label\", tmpl.replace(\"{label}\", () => label));\n        else {\n          const span = document.createElement(\"span\");\n          span.setAttribute(\"data-part\", \"label\");\n          span.textContent = label;\n          toggle.appendChild(span);\n        }\n        toggle.insertAdjacentHTML(\"beforeend\", CHEVRON);\n      }\n      const atEnd = this.getAttribute(\"toggle-position\") === \"end\";\n      if (toggle && !atEnd) row.appendChild(toggle);\n      if (url != null) {\n        const a = document.createElement(\"a\");\n        a.setAttribute(\"data-part\", \"link\");\n        a.textContent = label;\n        a.href = external ? url : base + url;\n        if (external) a.rel = \"noopener\";\n        if (!noCurrent && a.href.split(\"#\")[0] === current) a.setAttribute(\"aria-current\", \"page\");\n        row.appendChild(a);\n      }\n      if (url == null && !kids?.length) {\n        // An entry with no usable link (dropped above) keeps its label.\n        const span = document.createElement(\"span\");\n        span.setAttribute(\"data-part\", \"label\");\n        span.textContent = label;\n        row.appendChild(span);\n      }\n      if (toggle && atEnd) row.appendChild(toggle);\n      if (kids?.length) {\n        const ul = document.createElement(\"ul\");\n        ul.setAttribute(\"data-part\", \"group\");\n        ul.dataset.lazy = \"\";\n        ul.dataset.path = here;\n        ul.hidden = true;\n        li.setAttribute(\"data-state\", \"closed\");\n        li.appendChild(ul);\n        this.prepareItem(li);\n      }\n      return li;\n    });\n  }\n}\n\nconst CHEVRON =\n  '<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>';\n\nfunction scrollParent(el: HTMLElement): HTMLElement | null {\n  for (let p = el.parentElement; p; p = p.parentElement) {\n    const o = getComputedStyle(p).overflowY;\n    if ((o === \"auto\" || o === \"scroll\") && p.scrollHeight > p.clientHeight) return p;\n  }\n  return null;\n}\n\nensureDefaultDisplay();\n\nif (!customElements.get(\"db-nav-tree\")) {\n  customElements.define(\"db-nav-tree\", DbNavTree);\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-SLJG53M7.js

@@ -0,0 +1,208 @@
+import {
+  afterAnimations,
+  ownOne,
+  resolveAsChild,
+  uid
+} from "./chunk-3AEQ6KHV.js";
+import {
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-K6DPDBAG.js";
+
+// src/db-dialog.ts
+import { FocusTrap } from "@dogsbay/primitives/focus-trap";
+import { ScrollLock } from "@dogsbay/primitives/scroll-lock";
+import { DismissController } from "@dogsbay/primitives/dismiss";
+import { markOthersInert } from "@dogsbay/primitives/inert";
+var DbDialog = class extends DogsbayElement {
+  content = null;
+  backdrop = null;
+  trigger = null;
+  native = false;
+  _open = false;
+  openedBy = null;
+  focusTrap = null;
+  dismiss = null;
+  cleanupInert = null;
+  get open() {
+    return this._open;
+  }
+  get dismissible() {
+    return this.getAttribute("dismissible") !== "false";
+  }
+  onTriggerClick = (e) => {
+    e.preventDefault();
+    this.toggle(e.currentTarget);
+  };
+  onHostClick = (e) => {
+    const close = e.target.closest("[data-part='close']");
+    if (close && close.closest("db-dialog") === this) this.close("close-press");
+  };
+  onDocumentClick = (e) => {
+    const ext = e.target.closest?.("[data-dialog-for]");
+    if (!ext || ext === this.trigger) return;
+    const target = ext.getAttribute("data-dialog-for");
+    if (target && (target === this.id || target === this.content?.id)) {
+      e.preventDefault();
+      this.toggle(ext);
+    }
+  };
+  // Native <dialog>: Escape fires "cancel".
+  onCancel = (e) => {
+    e.preventDefault();
+    if (this.dismissible) this.close("escape-key");
+  };
+  // Native <dialog>: a click on the ::backdrop targets the dialog itself.
+  onNativeClick = (e) => {
+    if (!this.dismissible || e.target !== this.content || !this.content) return;
+    const r = this.content.getBoundingClientRect();
+    const inside = e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
+    if (!inside && (e.clientX !== 0 || e.clientY !== 0)) this.close("outside-press");
+  };
+  // Native <dialog> closed by the platform (form method="dialog").
+  onNativeClose = () => {
+    if (this._open) this.finishClose("close-press");
+  };
+  setup() {
+    this.content = ownOne(this, "[data-part='content']");
+    if (!this.content) return;
+    this.native = typeof HTMLDialogElement !== "undefined" && this.content instanceof HTMLDialogElement && typeof this.content.showModal === "function";
+    this.backdrop = ownOne(this, "[data-part='backdrop']");
+    this.trigger = resolveAsChild(ownOne(this, "[data-part='trigger']"));
+    const content = this.content;
+    if (!content.id) content.id = uid("db-dialog");
+    if (!this.native) {
+      content.setAttribute("role", content.getAttribute("role") || "dialog");
+      content.setAttribute("aria-modal", "true");
+      content.hidden = !this.hasAttribute("open");
+      if (this.backdrop) this.backdrop.hidden = true;
+    }
+    const title = content.querySelector("[data-part='title']");
+    if (title && !content.hasAttribute("aria-labelledby") && !content.hasAttribute("aria-label")) {
+      title.id ||= uid("db-dialog-title");
+      content.setAttribute("aria-labelledby", title.id);
+    }
+    const desc = content.querySelector("[data-part='description']");
+    if (desc && !content.hasAttribute("aria-describedby")) {
+      desc.id ||= uid("db-dialog-desc");
+      content.setAttribute("aria-describedby", desc.id);
+    }
+    for (const t of this.triggers()) this.prepareTrigger(t);
+    this.setState("closed");
+    if (!this.native) {
+      this.focusTrap = new FocusTrap(content);
+      this.dismiss = new DismissController(content, {
+        onDismiss: (reason) => this.dismissible && this.close(reason)
+      });
+    }
+  }
+  connect() {
+    if (!this.content) return;
+    this.trigger?.addEventListener("click", this.onTriggerClick);
+    this.addEventListener("click", this.onHostClick);
+    document.addEventListener("click", this.onDocumentClick);
+    if (this.native) {
+      this.content.addEventListener("cancel", this.onCancel);
+      this.content.addEventListener("click", this.onNativeClick);
+      this.content.addEventListener("close", this.onNativeClose);
+    }
+    queueMicrotask(() => {
+      if (!this.isConnected) return;
+      for (const t of this.triggers()) if (!t.hasAttribute("aria-controls")) this.prepareTrigger(t);
+      if (this.hasAttribute("open") && !this._open) this.show();
+    });
+  }
+  disconnect() {
+    this.trigger?.removeEventListener("click", this.onTriggerClick);
+    this.removeEventListener("click", this.onHostClick);
+    document.removeEventListener("click", this.onDocumentClick);
+    if (this.content && this.native) {
+      this.content.removeEventListener("cancel", this.onCancel);
+      this.content.removeEventListener("click", this.onNativeClick);
+      this.content.removeEventListener("close", this.onNativeClose);
+    }
+    if (this._open) this.finishClose("api", false);
+  }
+  /** Internal trigger plus every `[data-dialog-for]` pointing here. */
+  triggers() {
+    const out = this.trigger ? [this.trigger] : [];
+    const ids = [this.id, this.content?.id].filter(Boolean);
+    for (const id of ids) document.querySelectorAll(`[data-dialog-for="${CSS.escape(id)}"]`).forEach((el) => out.push(el));
+    return out;
+  }
+  prepareTrigger(t) {
+    if (!t.hasAttribute("aria-haspopup")) t.setAttribute("aria-haspopup", "dialog");
+    t.setAttribute("aria-controls", this.content.id);
+    t.setAttribute("aria-expanded", "false");
+  }
+  setState(state) {
+    this.setAttribute("data-state", state);
+    this.content?.setAttribute("data-state", state);
+    this.backdrop?.setAttribute("data-state", state);
+  }
+  toggle(opener) {
+    if (this._open) this.close("trigger-press");
+    else this.show(opener);
+  }
+  show(opener) {
+    const content = this.content;
+    if (!content || this._open) return;
+    this._open = true;
+    this.openedBy = opener ?? document.activeElement ?? this.trigger;
+    for (const t of this.triggers()) {
+      this.prepareTrigger(t);
+      t.setAttribute("aria-expanded", "true");
+    }
+    ScrollLock.activate();
+    if (this.native) {
+      const d = content;
+      if (!d.open) d.showModal();
+    } else {
+      content.hidden = false;
+      if (this.backdrop) this.backdrop.hidden = false;
+      this.cleanupInert = markOthersInert(content);
+      this.focusTrap?.activate();
+      this.dismiss?.activate();
+    }
+    this.setState("open");
+    this.dispatchEvent(new CustomEvent("db-dialog:open", { bubbles: true }));
+  }
+  close(reason = "api") {
+    if (!this._open) return;
+    this.finishClose(reason);
+  }
+  finishClose(reason, restoreFocus = true) {
+    const content = this.content;
+    this._open = false;
+    this.setState("closed");
+    for (const t of this.triggers()) t.setAttribute("aria-expanded", "false");
+    ScrollLock.deactivate();
+    if (this.native) {
+      const d = content;
+      if (d.open) d.close();
+    } else {
+      this.dismiss?.deactivate();
+      this.focusTrap?.deactivate();
+      this.cleanupInert?.();
+      this.cleanupInert = null;
+      afterAnimations(content, () => {
+        if (this._open) return;
+        content.hidden = true;
+        if (this.backdrop) this.backdrop.hidden = true;
+      });
+    }
+    const back = this.openedBy;
+    this.openedBy = null;
+    if (restoreFocus && back && document.contains(back)) back.focus();
+    this.dispatchEvent(new CustomEvent("db-dialog:close", { detail: { reason }, bubbles: true }));
+  }
+};
+ensureDefaultDisplay();
+if (!customElements.get("db-dialog")) {
+  customElements.define("db-dialog", DbDialog);
+}
+
+export {
+  DbDialog
+};
+//# sourceMappingURL=chunk-SLJG53M7.js.map