@dogsbay/elements 0.2.0-beta.13 → 0.2.0-beta.130

package/dist/chunk-HMV62CBN.js

@@ -0,0 +1,139 @@
+import {
+  hideFloating,
+  ownOne,
+  resolveAsChild,
+  showFloating,
+  uid
+} from "./chunk-KXCPLIQD.js";
+import {
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-MZDGSTI4.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
+};

package/dist/{chunk-7BIVQSGP.js → chunk-JRAYNKQ6.js}

@@ -1,6 +1,7 @@
 import {
-  DogsbayElement
-} from "./chunk-XBMLE4N3.js";
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-MZDGSTI4.js";
 
 // src/db-card.ts
 var DbCard = class extends DogsbayElement {
@@ -42,6 +43,7 @@ var DbCard = class extends DogsbayElement {
     );
   }
 };
+ensureDefaultDisplay();
 if (!customElements.get("db-card")) {
   customElements.define("db-card", DbCard);
 }
@@ -49,4 +51,3 @@ if (!customElements.get("db-card")) {
 export {
   DbCard
 };
-//# sourceMappingURL=chunk-7BIVQSGP.js.map

package/dist/chunk-KFY2MTR3.js

@@ -0,0 +1,190 @@
+import {
+  safeDecode,
+  uid
+} from "./chunk-KXCPLIQD.js";
+import {
+  DogsbayElement,
+  ensureDefaultDisplay
+} from "./chunk-MZDGSTI4.js";
+
+// src/db-details-sheet.ts
+var DbDetailsSheet = class extends DogsbayElement {
+  details = null;
+  summary = null;
+  dialog = null;
+  body = null;
+  /** Where the moved nodes came from, and the nodes, while the sheet is open. */
+  source = null;
+  moved = [];
+  /** The fragment already acted on: moving a nested sheet in and out of a
+   *  dialog reconnects it, and reopening on every connect made it undismissable. */
+  handledHash = null;
+  get open() {
+    return !!this.dialog?.open;
+  }
+  onSummaryClick = (e) => {
+    const t = e.target;
+    if (t && t !== this.summary && t.closest?.("a[href], button, input, select, textarea, label")?.closest("summary") === this.summary) return;
+    e.preventDefault();
+    this.show();
+  };
+  // A click on the ::backdrop targets the dialog itself, outside its box.
+  onDialogClick = (e) => {
+    const d = this.dialog;
+    if (!d || e.target !== d) return;
+    const r = d.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)) d.close();
+  };
+  // Every way the dialog closes (Escape, backdrop, button, api) ends here.
+  onDialogClose = () => this.restore();
+  // A link to the fragment the URL already has fires no hashchange: after the
+  // sheet was closed, a second click on the same link did nothing (#100)
+  onDocClick = (e) => {
+    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    const a = e.target?.closest?.("a[href]");
+    if (!a || !this.details || this.open || a.hasAttribute("download") || a.target && a.target !== "_self") return;
+    const url = new URL(a.href, location.href);
+    if (!url.hash || url.hash !== location.hash || url.pathname !== location.pathname || url.search !== location.search) return;
+    const target = document.getElementById(safeDecode(url.hash.slice(1)));
+    if (!target || !this.details.contains(target)) return;
+    for (const inner of this.details.querySelectorAll("db-details-sheet")) inner.handledHash = null;
+    this.show(target);
+  };
+  onHash = () => {
+    this.handledHash = null;
+    this.openForHash();
+  };
+  setup() {
+    const details = Array.from(this.children).find((c) => c.tagName === "DETAILS") ?? null;
+    const summary = details ? Array.from(details.children).find((c) => c.tagName === "SUMMARY") ?? null : null;
+    const dialogOk = typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
+    if (!details || !summary || !dialogOk) return;
+    for (const c of Array.from(details.children)) if (c.getAttribute("role") === "status") c.setAttribute("aria-live", "off");
+    this.details = details;
+    this.summary = summary;
+    details.open = false;
+    ensureSheetStyles();
+    const title = (summary.querySelector("[data-part='title']")?.textContent ?? summary.textContent ?? "").trim();
+    const dialog = document.createElement("dialog");
+    dialog.className = "db-sheet";
+    dialog.id = uid("db-sheet");
+    const heading = document.createElement("h2");
+    heading.className = "db-sheet-title";
+    heading.id = uid("db-sheet-title");
+    heading.textContent = title;
+    dialog.setAttribute("aria-labelledby", heading.id);
+    const close = document.createElement("button");
+    close.type = "button";
+    close.className = "db-sheet-close";
+    close.setAttribute("aria-label", this.getAttribute("close-label") || "Close");
+    close.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
+    close.addEventListener("click", () => dialog.close());
+    const header = document.createElement("div");
+    header.className = "db-sheet-header";
+    header.append(heading, close);
+    const body = document.createElement("div");
+    body.className = "db-sheet-body";
+    dialog.append(header, body);
+    this.append(dialog);
+    this.dialog = dialog;
+    this.body = body;
+    summary.setAttribute("aria-haspopup", "dialog");
+    summary.setAttribute("aria-controls", dialog.id);
+    summary.setAttribute("aria-expanded", "false");
+    this.setAttribute("data-state", "closed");
+  }
+  connect() {
+    if (!this.dialog) return;
+    this.summary.addEventListener("click", this.onSummaryClick);
+    this.dialog.addEventListener("click", this.onDialogClick);
+    this.dialog.addEventListener("close", this.onDialogClose);
+    window.addEventListener("hashchange", this.onHash);
+    document.addEventListener("click", this.onDocClick);
+    queueMicrotask(() => this.isConnected && this.openForHash());
+  }
+  disconnect() {
+    if (!this.dialog) return;
+    if (this.dialog.open) this.dialog.close();
+    this.restore(false);
+    this.summary.removeEventListener("click", this.onSummaryClick);
+    this.dialog.removeEventListener("click", this.onDialogClick);
+    this.dialog.removeEventListener("close", this.onDialogClose);
+    window.removeEventListener("hashchange", this.onHash);
+    document.removeEventListener("click", this.onDocClick);
+  }
+  show(focusTarget) {
+    const { dialog, details, body } = this;
+    if (!dialog || !details || !body || dialog.open) return;
+    const rest = Array.from(details.childNodes).filter((n) => n !== this.summary);
+    const elements = rest.filter((n) => n.nodeType === Node.ELEMENT_NODE);
+    const wrapper = elements.length === 1 && rest.every((n) => n === elements[0] || !n.textContent?.trim()) ? elements[0] : null;
+    this.source = wrapper ?? details;
+    this.moved = wrapper ? Array.from(wrapper.childNodes) : rest;
+    body.append(...this.moved);
+    dialog.showModal();
+    this.summary.setAttribute("aria-expanded", "true");
+    this.setAttribute("data-state", "open");
+    if (focusTarget && focusTarget !== details) focusTarget.scrollIntoView?.({ block: "start" });
+    this.dispatchEvent(new CustomEvent("db-details-sheet:open", { bubbles: true }));
+  }
+  close() {
+    this.dialog?.close();
+  }
+  restore(focus = true) {
+    if (!this.source) return;
+    this.source.append(...this.moved);
+    this.source = null;
+    this.moved = [];
+    this.summary.setAttribute("aria-expanded", "false");
+    this.setAttribute("data-state", "closed");
+    if (focus && this.isConnected && this.summary.checkVisibility?.() !== false) this.summary.focus();
+    this.dispatchEvent(new CustomEvent("db-details-sheet:close", { bubbles: true }));
+  }
+  /** Open when the URL fragment names the details or something in its body. */
+  openForHash() {
+    const id = safeDecode(location.hash.slice(1));
+    if (!id || !this.details || this.handledHash === location.hash) return;
+    this.handledHash = location.hash;
+    if (this.open) return;
+    const target = document.getElementById(id);
+    if (target && this.details.contains(target)) this.show(target);
+  }
+};
+var STYLE_ID = "dogsbay-details-sheet";
+function ensureSheetStyles() {
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = [
+    "dialog.db-sheet{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:none;width:min(32rem,100vw);max-width:100vw;padding:0;border:0;border-left:1px solid var(--border);background:var(--background);color:var(--foreground);box-shadow:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);flex-direction:column}",
+    "dialog.db-sheet[open]{display:flex}",
+    "dialog.db-sheet::backdrop{background:rgb(0 0 0/.6)}",
+    ".db-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--border)}",
+    // The dialog sits inside the page's prose: its h2 rule (border, margins)
+    // would otherwise style the title. Element + class beats `.docs-prose h2`.
+    "dialog.db-sheet h2.db-sheet-title{margin:0;padding:0;border:0;font-size:1.125rem;line-height:1.75rem;font-weight:600;scroll-margin:0}",
+    ".db-sheet-close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:.375rem;background:transparent;color:var(--muted-foreground);cursor:pointer}",
+    ".db-sheet-close:hover{background:var(--accent,var(--muted));color:var(--foreground)}",
+    ".db-sheet-close:focus-visible{outline:2px solid var(--ring);outline-offset:2px}",
+    ".db-sheet-body{flex:1;overflow-y:auto;padding:1.5rem;font-size:.875rem;line-height:1.625}",
+    // Beats `.docs-prose p` (0,2,1): the first paragraph sat 12px down
+    "dialog.db-sheet .db-sheet-body>:first-child{margin-top:0}",
+    // A modal sheet: the page under it does not scroll
+    "html:has(dialog.db-sheet[open]){overflow:hidden}",
+    // The summary opens a panel, not a fold: its chevron points to the side.
+    "db-details-sheet>details>summary>span:last-child{transform:rotate(-90deg)}",
+    "@media (prefers-reduced-motion:no-preference){dialog.db-sheet[open]{animation:db-sheet-in .2s ease-out}dialog.db-sheet[open]::backdrop{animation:db-sheet-fade .2s ease-out}}",
+    "@keyframes db-sheet-in{from{transform:translateX(100%)}}",
+    "@keyframes db-sheet-fade{from{opacity:0}}"
+  ].join("");
+  document.head.append(style);
+}
+ensureDefaultDisplay();
+if (!customElements.get("db-details-sheet")) {
+  customElements.define("db-details-sheet", DbDetailsSheet);
+}
+
+export {
+  DbDetailsSheet
+};

package/dist/chunk-KXCPLIQD.js

@@ -0,0 +1,77 @@
+// src/utils.ts
+var counter = 0;
+function uid(prefix) {
+  return `${prefix}-${++counter}`;
+}
+function own(host, selector) {
+  const tag = host.localName;
+  return Array.from(host.querySelectorAll(selector)).filter((el) => el.closest(tag) === host);
+}
+function ownOne(host, selector) {
+  return own(host, selector)[0] ?? null;
+}
+function resolveAsChild(el) {
+  if (!el || !el.hasAttribute("data-as-child")) return el;
+  const child = el.firstElementChild;
+  if (!child) return el;
+  const part = el.getAttribute("data-part");
+  if (part) child.setAttribute("data-part", part);
+  return child;
+}
+function isDisabled(el) {
+  return el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true" || el.getAttribute("data-disabled") === "true";
+}
+function supportsPopover() {
+  return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype.showPopover === "function";
+}
+function showFloating(el) {
+  el.hidden = false;
+  if (!supportsPopover()) return "inline";
+  if (!el.hasAttribute("popover")) el.setAttribute("popover", "manual");
+  el.style.inset = "auto";
+  el.style.margin = "0";
+  try {
+    if (!el.matches(":popover-open")) el.showPopover();
+  } catch {
+    return "inline";
+  }
+  return "top-layer";
+}
+function hideFloating(el) {
+  if (supportsPopover()) {
+    try {
+      if (el.matches(":popover-open")) el.hidePopover();
+    } catch {
+    }
+  }
+  el.hidden = true;
+}
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+function focusables(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE)).filter((el) => !el.closest("[hidden]") && !isDisabled(el));
+}
+function afterAnimations(el, done) {
+  const anims = typeof el.getAnimations === "function" ? el.getAnimations() : [];
+  if (!anims.length) return done();
+  Promise.all(anims.map((a) => a.finished)).then(done, done);
+}
+function safeDecode(s) {
+  try {
+    return decodeURIComponent(s);
+  } catch {
+    return s;
+  }
+}
+
+export {
+  uid,
+  own,
+  ownOne,
+  resolveAsChild,
+  isDisabled,
+  showFloating,
+  hideFloating,
+  focusables,
+  afterAnimations,
+  safeDecode
+};

package/dist/chunk-MZDGSTI4.js

@@ -0,0 +1,72 @@
+// src/base.ts
+var DogsbayElement = class extends HTMLElement {
+  _initialized = false;
+  _deferred = false;
+  connectedCallback() {
+    if (!this._initialized && !this.firstElementChild && typeof document !== "undefined" && document.readyState === "loading") {
+      if (!this._deferred) {
+        this._deferred = true;
+        document.addEventListener(
+          "DOMContentLoaded",
+          () => {
+            this._deferred = false;
+            if (this.isConnected) this.connectedCallback();
+          },
+          { once: true }
+        );
+      }
+      return;
+    }
+    if (!this._initialized) {
+      this.setup();
+      this._initialized = true;
+    }
+    this.connect();
+  }
+  disconnectedCallback() {
+    this.disconnect();
+  }
+  /** One-time setup: query children, generate IDs, set ARIA. */
+  setup() {
+  }
+  /** Called on every connect: attach event listeners. */
+  connect() {
+  }
+  /** Called on every disconnect: remove event listeners. */
+  disconnect() {
+  }
+};
+var DEFAULT_DISPLAY = {
+  "db-tabs": "block",
+  "db-accordion": "block",
+  "db-collapsible": "block",
+  "db-details-sheet": "block",
+  "db-card": "block",
+  "db-steps": "block",
+  "db-code-block": "block",
+  // A link styled as a button — sits in a line of prose.
+  "db-link-button": "inline-block",
+  // A dialog host only groups its trigger and content; it takes no box of its own.
+  "db-dialog": "contents",
+  "db-popover": "inline-block",
+  "db-tooltip": "inline-block",
+  "db-select": "inline-block",
+  "db-combobox": "block",
+  "db-nav-tree": "block",
+  "db-toc": "block"
+};
+var STYLE_ID = "dogsbay-elements-display";
+function ensureDefaultDisplay() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const rules = Object.entries(DEFAULT_DISPLAY).map(([tag, display]) => `:where(${tag}){display:${display}}`).join("");
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = rules;
+  document.head.prepend(style);
+}
+
+export {
+  DogsbayElement,
+  ensureDefaultDisplay
+};