@editora/ui-core 0.1.9 → 0.1.10

package/dist/tooltip.esm.js

@@ -0,0 +1,376 @@
+import { E as x } from "./ElementBase-909688f3.mjs";
+import { s as E } from "./portal-1cf392ca.mjs";
+const d = 140, w = 120, m = `
+  .tooltip {
+    color-scheme: light dark;
+    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-text, #0f172a) 92%, #0b1220 8%);
+    --ui-tooltip-color: var(--ui-color-surface, #f8fafc);
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-border, #475569) 62%, transparent);
+    --ui-tooltip-shadow: none;
+    --ui-tooltip-radius: 10px;
+    --ui-tooltip-padding-y: 7px;
+    --ui-tooltip-padding-x: 10px;
+    --ui-tooltip-font-size: 12px;
+
+    position: absolute;
+    pointer-events: auto;
+    max-inline-size: min(340px, calc(100vw - 16px));
+    border: 1px solid var(--ui-tooltip-border);
+    border-radius: var(--ui-tooltip-radius);
+    background: var(--ui-tooltip-bg);
+    color: var(--ui-tooltip-color);
+    box-shadow: var(--ui-tooltip-shadow);
+    padding: var(--ui-tooltip-padding-y) var(--ui-tooltip-padding-x);
+    font: 550 var(--ui-tooltip-font-size)/1.4 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+    opacity: 0;
+    transform: translate3d(0, 4px, 0) scale(0.98);
+    transition: opacity ${d}ms ease, transform ${d}ms ease;
+    z-index: 3000;
+    will-change: transform, opacity;
+  }
+
+  .tooltip[data-interactive="false"] {
+    pointer-events: none;
+  }
+
+  .tooltip.show {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+
+  .tooltip.closing {
+    opacity: 0;
+    transform: translate3d(0, 3px, 0) scale(0.98);
+  }
+
+  .tooltip[data-size="sm"] {
+    --ui-tooltip-font-size: 11px;
+    --ui-tooltip-padding-y: 5px;
+    --ui-tooltip-padding-x: 8px;
+    --ui-tooltip-radius: 8px;
+  }
+
+  .tooltip[data-size="lg"] {
+    --ui-tooltip-font-size: 13px;
+    --ui-tooltip-padding-y: 8px;
+    --ui-tooltip-padding-x: 12px;
+    --ui-tooltip-radius: 12px;
+  }
+
+  .tooltip[data-variant="soft"] {
+    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 18%, var(--ui-color-text, #0f172a));
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-primary, #2563eb) 42%, transparent);
+  }
+
+  .tooltip[data-variant="contrast"] {
+    --ui-tooltip-bg: var(--ui-color-surface, #f8fafc);
+    --ui-tooltip-color: var(--ui-color-text, #0f172a);
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-border, #94a3b8) 72%, transparent);
+    --ui-tooltip-shadow:
+      0 1px 2px rgba(2, 6, 23, 0.08),
+      0 10px 24px rgba(15, 23, 42, 0.18);
+  }
+
+  .tooltip[data-variant="minimal"] {
+    --ui-tooltip-shadow: none;
+    --ui-tooltip-border: transparent;
+    --ui-tooltip-radius: 8px;
+  }
+
+  .tooltip[data-tone="success"] {
+    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-success, #16a34a) 84%, #052e16 16%);
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-success, #16a34a) 42%, transparent);
+  }
+
+  .tooltip[data-tone="warning"] {
+    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-warning, #d97706) 84%, #451a03 16%);
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-warning, #d97706) 42%, transparent);
+  }
+
+  .tooltip[data-tone="danger"] {
+    --ui-tooltip-bg: color-mix(in srgb, var(--ui-color-danger, #dc2626) 84%, #450a0a 16%);
+    --ui-tooltip-border: color-mix(in srgb, var(--ui-color-danger, #dc2626) 42%, transparent);
+  }
+
+  .tooltip-content {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .arrow {
+    position: absolute;
+    inline-size: 9px;
+    block-size: 9px;
+    background: var(--ui-tooltip-bg);
+    border-left: 1px solid var(--ui-tooltip-border);
+    border-top: 1px solid var(--ui-tooltip-border);
+    transform: rotate(45deg);
+    left: 50%;
+    top: -5px;
+    margin-left: -4px;
+    pointer-events: none;
+  }
+
+  .tooltip[data-placement="top"] .arrow {
+    top: auto;
+    bottom: -5px;
+    transform: rotate(225deg);
+  }
+
+  .tooltip[data-placement="left"] .arrow {
+    left: auto;
+    right: -5px;
+    top: 50%;
+    margin-left: 0;
+    margin-top: -4px;
+    transform: rotate(135deg);
+  }
+
+  .tooltip[data-placement="right"] .arrow {
+    left: -5px;
+    top: 50%;
+    margin-left: 0;
+    margin-top: -4px;
+    transform: rotate(-45deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tooltip {
+      transition: none !important;
+      transform: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .tooltip {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .tooltip {
+      --ui-tooltip-bg: Canvas;
+      --ui-tooltip-color: CanvasText;
+      --ui-tooltip-border: CanvasText;
+      --ui-tooltip-shadow: none;
+      forced-color-adjust: none;
+    }
+  }
+`;
+function b(o) {
+  if (o == null)
+    return !1;
+  const t = String(o).toLowerCase();
+  return t !== "false" && t !== "0" && t !== "off";
+}
+function a(o, t) {
+  const e = Number(o);
+  return Number.isFinite(e) ? e : t;
+}
+function _(o) {
+  return o === "top" || o === "right" || o === "bottom" || o === "left" ? o : "top";
+}
+function A(o) {
+  const t = (o || "hover focus").trim().toLowerCase();
+  return t ? new Set(t.split(/[\s,]+/).filter(Boolean)) : /* @__PURE__ */ new Set(["hover", "focus"]);
+}
+function l(o) {
+  return b(o);
+}
+class y extends x {
+  constructor() {
+    super(), this._portalEl = null, this._cleanup = null, this._id = `ui-tooltip-${Math.random().toString(36).slice(2, 9)}`, this._isOpen = !1, this._syncingOpenAttr = !1, this._openTimer = null, this._closeTimer = null, this._exitTimer = null, this._pointerInsidePortal = !1, this._onMouseEnter = this._onMouseEnter.bind(this), this._onMouseLeave = this._onMouseLeave.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this), this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onPortalMouseEnter = this._handlePortalMouseEnter.bind(this), this._onPortalMouseLeave = this._handlePortalMouseLeave.bind(this), this._onDocumentPointerDown = this._handleDocumentPointerDown.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "text",
+      "placement",
+      "open",
+      "disabled",
+      "headless",
+      "variant",
+      "size",
+      "tone",
+      "delay",
+      "close-delay",
+      "trigger",
+      "offset",
+      "interactive",
+      "arrow",
+      "aria-label"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("mouseenter", this._onMouseEnter), this.addEventListener("mouseleave", this._onMouseLeave), this.addEventListener("focusin", this._onFocusIn), this.addEventListener("focusout", this._onFocusOut), this.addEventListener("click", this._onClick), this.addEventListener("keydown", this._onKeyDown), this.hasAttribute("open") && this._scheduleShow(0);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("mouseenter", this._onMouseEnter), this.removeEventListener("mouseleave", this._onMouseLeave), this.removeEventListener("focusin", this._onFocusIn), this.removeEventListener("focusout", this._onFocusOut), this.removeEventListener("click", this._onClick), this.removeEventListener("keydown", this._onKeyDown), this._clearTimers(), this.hide(!0), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i) {
+      if (t === "open" && !this._syncingOpenAttr) {
+        this.hasAttribute("open") ? this._scheduleShow(0) : this._scheduleHide(0);
+        return;
+      }
+      if (t === "disabled" && this.hasAttribute("disabled")) {
+        this.hide();
+        return;
+      }
+      if ((t === "text" || t === "aria-label") && this._isOpen && !(this.getAttribute("text") || this.getAttribute("aria-label") || "").trim()) {
+        this.hide();
+        return;
+      }
+      if (this._isOpen && ["text", "placement", "variant", "size", "tone", "headless", "offset", "arrow", "aria-label", "interactive"].includes(t)) {
+        this._renderPortalContent(), this._reposition();
+        return;
+      }
+    }
+  }
+  _clearTimers() {
+    this._openTimer && (clearTimeout(this._openTimer), this._openTimer = null), this._closeTimer && (clearTimeout(this._closeTimer), this._closeTimer = null), this._exitTimer && (clearTimeout(this._exitTimer), this._exitTimer = null);
+  }
+  _triggerEnabled(t) {
+    const e = A(this.getAttribute("trigger"));
+    return e.has("manual") ? t === "manual" : e.has(t);
+  }
+  _scheduleShow(t) {
+    if (this.hasAttribute("disabled"))
+      return;
+    this._clearTimers();
+    const e = typeof t == "number" ? t : a(this.getAttribute("delay"), 250);
+    this._openTimer = setTimeout(() => {
+      this.show(), this._openTimer = null;
+    }, Math.max(0, e));
+  }
+  _scheduleHide(t) {
+    this._clearTimers();
+    const e = typeof t == "number" ? t : a(this.getAttribute("close-delay"), 120);
+    this._closeTimer = setTimeout(() => {
+      if (l(this.getAttribute("interactive")) && this._pointerInsidePortal) {
+        this._closeTimer = null;
+        return;
+      }
+      this.hide(), this._closeTimer = null;
+    }, Math.max(0, e));
+  }
+  _ensurePortalEl() {
+    if (this._portalEl)
+      return this._portalEl;
+    const t = document.createElement("div");
+    if (t.className = "tooltip", t.id = this._id, t.setAttribute("role", "tooltip"), !this.hasAttribute("headless")) {
+      const i = document.createElement("style");
+      i.setAttribute("data-ui-tooltip-style", ""), i.textContent = m, t.appendChild(i);
+    }
+    const e = document.createElement("div");
+    return e.className = "tooltip-content", t.appendChild(e), t.addEventListener("mouseenter", this._onPortalMouseEnter), t.addEventListener("mouseleave", this._onPortalMouseLeave), this._portalEl = t, t;
+  }
+  _handlePortalMouseEnter() {
+    this._pointerInsidePortal = !0, this._closeTimer && (clearTimeout(this._closeTimer), this._closeTimer = null);
+  }
+  _handlePortalMouseLeave() {
+    this._pointerInsidePortal = !1, l(this.getAttribute("interactive")) && this._scheduleHide();
+  }
+  _renderPortalContent() {
+    const t = this._ensurePortalEl(), e = this.getAttribute("text") || this.getAttribute("aria-label") || "", i = _(this.getAttribute("placement")), u = this.getAttribute("variant") || "default", f = this.getAttribute("size") || "md", v = this.getAttribute("tone") || "default", h = !this.hasAttribute("arrow") || b(this.getAttribute("arrow")), g = l(this.getAttribute("interactive")), c = this.hasAttribute("headless"), r = t.querySelector("style[data-ui-tooltip-style]");
+    if (!c && !r) {
+      const s = document.createElement("style");
+      s.setAttribute("data-ui-tooltip-style", ""), s.textContent = m, t.prepend(s);
+    } else
+      c && r && r.remove();
+    t.setAttribute("data-variant", u), t.setAttribute("data-size", f), t.setAttribute("data-tone", v), t.setAttribute("data-placement", i), t.setAttribute("data-interactive", g ? "true" : "false");
+    const p = t.querySelector(".tooltip-content");
+    p && (p.textContent = e);
+    const n = t.querySelector(".arrow");
+    if (h && !n) {
+      const s = document.createElement("div");
+      s.className = "arrow", t.appendChild(s);
+    }
+    !h && n && n.remove();
+  }
+  _reposition() {
+    if (!this._portalEl)
+      return;
+    this._cleanup && (this._cleanup(), this._cleanup = null);
+    const t = _(this.getAttribute("placement")), e = a(this.getAttribute("offset"), 8);
+    this._cleanup = E(this, this._portalEl, {
+      placement: t,
+      offset: e,
+      shift: !0,
+      flip: !0
+    });
+  }
+  _syncOpenAttr(t) {
+    this._syncingOpenAttr = !0;
+    try {
+      t ? this.hasAttribute("open") || this.setAttribute("open", "") : this.hasAttribute("open") && this.removeAttribute("open");
+    } finally {
+      this._syncingOpenAttr = !1;
+    }
+  }
+  show() {
+    if (this.hasAttribute("disabled") || !(this.getAttribute("text") || this.getAttribute("aria-label") || "").trim())
+      return;
+    this._clearTimers(), this._renderPortalContent(), this._reposition(), this._portalEl && (this._portalEl.classList.remove("closing"), this._portalEl.classList.add("show"), this.setAttribute("aria-describedby", this._id)), this._bindDocumentDismiss();
+    const e = this._isOpen;
+    this._isOpen = !0, this._syncOpenAttr(!0), e || (this.dispatchEvent(new CustomEvent("open", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: { open: !0 }, bubbles: !0, composed: !0 })));
+  }
+  hide(t = !1) {
+    this._clearTimers(), this._unbindDocumentDismiss(), this._cleanup && (this._cleanup(), this._cleanup = null);
+    const e = this._portalEl;
+    e && (e.classList.remove("show"), e.classList.add("closing"), t ? this._removePortal() : this._exitTimer = setTimeout(() => {
+      this._removePortal(), this._exitTimer = null;
+    }, w)), this._pointerInsidePortal = !1, this.removeAttribute("aria-describedby");
+    const i = this._isOpen;
+    this._isOpen = !1, this._syncOpenAttr(!1), i && (this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("change", { detail: { open: !1 }, bubbles: !0, composed: !0 })));
+  }
+  _removePortal() {
+    this._portalEl && (this._portalEl.removeEventListener("mouseenter", this._onPortalMouseEnter), this._portalEl.removeEventListener("mouseleave", this._onPortalMouseLeave), this._portalEl.parentElement && this._portalEl.parentElement.removeChild(this._portalEl), this._portalEl = null);
+  }
+  _bindDocumentDismiss() {
+    this._triggerEnabled("click") && document.addEventListener("pointerdown", this._onDocumentPointerDown);
+  }
+  _unbindDocumentDismiss() {
+    document.removeEventListener("pointerdown", this._onDocumentPointerDown);
+  }
+  _handleDocumentPointerDown(t) {
+    var i;
+    if (!this._isOpen)
+      return;
+    const e = t.target;
+    e && (this.contains(e) || (i = this._portalEl) != null && i.contains(e) || this.hide());
+  }
+  shouldRenderOnAttributeChange(t, e, i) {
+    return !1;
+  }
+  _onMouseEnter() {
+    this._triggerEnabled("hover") && this._scheduleShow();
+  }
+  _onMouseLeave() {
+    this._triggerEnabled("hover") && this._scheduleHide();
+  }
+  _onFocusIn() {
+    this._triggerEnabled("focus") && this._scheduleShow(0);
+  }
+  _onFocusOut(t) {
+    var i;
+    if (!this._triggerEnabled("focus"))
+      return;
+    const e = t.relatedTarget;
+    e && this.contains(e) || e && ((i = this._portalEl) != null && i.contains(e)) || this._scheduleHide(0);
+  }
+  _onClick() {
+    this._triggerEnabled("click") && (this._isOpen ? this.hide() : this._scheduleShow(0));
+  }
+  _onKeyDown(t) {
+    t.key === "Escape" && this._isOpen && (t.preventDefault(), this.hide());
+  }
+  render() {
+    this.setContent("<slot></slot>");
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-tooltip") && customElements.define("ui-tooltip", y);
+export {
+  y as UITooltip
+};