@antadesign/anta 0.1.1-dev.7 → 0.2.0

package/dist/elements/a-tooltip.js

@@ -0,0 +1,488 @@
+import { HTMLElementBase } from "../anta_helpers";
+import { debounce } from "es-toolkit";
+import "./a-tooltip.css";
+const MARGIN = 4;
+const CURSOR_SIZE = 16;
+const PADDING_X = 8;
+const DEFAULT_DELAY = 250;
+const FADE_MS = 150;
+const GRACE_MS = 300;
+const CLOSE_DELAY = 120;
+const ENTER_TOUCH_DELAY = 500;
+const LEAVE_TOUCH_DELAY = 1500;
+const TOUCH_SLOP = 10;
+let currentOpen = null;
+let graceTimer;
+function graceActive() {
+  return graceTimer !== void 0;
+}
+function isHot() {
+  return currentOpen !== null || graceActive();
+}
+function clearGrace() {
+  if (graceTimer !== void 0) {
+    clearTimeout(graceTimer);
+    graceTimer = void 0;
+  }
+}
+function claimOpen(el) {
+  if (currentOpen && currentOpen !== el) currentOpen.hide();
+  currentOpen = el;
+  clearGrace();
+}
+function releaseOpen(el) {
+  if (currentOpen !== el) return;
+  currentOpen = null;
+  clearGrace();
+  graceTimer = setTimeout(() => {
+    graceTimer = void 0;
+  }, GRACE_MS);
+}
+const anchorToTooltip = /* @__PURE__ */ new WeakMap();
+function handleIntersection(entries) {
+  for (const entry of entries) {
+    const tooltip = anchorToTooltip.get(entry.target);
+    if (!tooltip) continue;
+    if (!tooltip.listening && entry.isIntersecting) {
+      requestAnimationFrame(() => tooltip.setupListeners());
+    } else if (tooltip.listening && !entry.isIntersecting) {
+      requestAnimationFrame(() => tooltip.teardownListeners());
+    }
+  }
+}
+const lazyObserver = typeof IntersectionObserver !== "undefined" ? new IntersectionObserver(handleIntersection, { root: null, rootMargin: "0px", threshold: 0 }) : null;
+class ATooltipElement extends HTMLElementBase {
+  // Observe `delay` so changing it at runtime — e.g. the docs playground
+  // patches the attribute on the live element — rebuilds the show debounce
+  // with the new value instead of keeping the one captured at setup.
+  static observedAttributes = ["delay"];
+  /** Shadow-internal popover surface — the only thing we ever mutate. */
+  container;
+  anchor = null;
+  listening = false;
+  shown = false;
+  /** True while the current open was triggered by a touch long-press. Such a
+   *  bubble is pinned (never cursor-follows) and biases above the anchor so the
+   *  fingertip doesn't cover it. */
+  touchOpen = false;
+  lastMouse;
+  debouncedShow;
+  teardown;
+  closeTimer;
+  fading = false;
+  fadeTimer;
+  docMoveBound = false;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = `
+      :host { display: contents; }
+
+      .container {
+        --_dur: ${FADE_MS}ms;
+
+        position: fixed;
+        left: 0;
+        top: 0;
+        margin: 0;
+        box-sizing: border-box;
+        width: fit-content;
+        max-width: var(--tooltip-max-width, min(calc(100vw - 20px), 80ch));
+        max-height: calc(100vh - 20px);
+        overflow: clip;
+        pointer-events: none;
+        text-align: left;
+
+        background: var(--tooltip-bg, Canvas);
+        color: var(--text-3, CanvasText);
+        box-shadow: var(--tooltip-shadow, 0 1px 8px rgba(0, 0, 0, 0.2));
+        -webkit-backdrop-filter: var(--tooltip-backdrop-filter, blur(8px));
+        backdrop-filter: var(--tooltip-backdrop-filter, blur(8px));
+        padding: 5px 8px;
+        border: var(--tooltip-border, none);
+        border-radius: var(--tooltip-radius, 3px);
+        outline: none;
+
+        /* The bubble establishes its own text baseline so inheritable text
+           properties from the anchor (e.g. a Button's condensed "wdth" 88
+           axis, its 0.05ch letter-spacing, an uppercase transform, a custom
+           font) don't bleed into the slotted content. The content is slotted
+           light DOM, so it inherits these *from this container* \u2014 making this
+           the single choke point. Values mirror Anta's body text. Consumers
+           still customise a single tooltip by styling their own content
+           element directly (a class on the content overrides what it inherits
+           \u2014 see the Tooltip docs). */
+        font-family: var(--sans-serif, system-ui, sans-serif);
+        font-size: 14px;
+        font-weight: 400;
+        font-style: normal;
+        font-stretch: normal;
+        font-variation-settings: "wdth" 100, "slnt" 0, "ital" 0;
+        line-height: 1.5;
+        letter-spacing: 0.02ch;
+        word-spacing: normal;
+        text-transform: none;
+        white-space: break-spaces;
+        word-break: break-word;
+        overflow-wrap: break-word;
+
+        /* Clean enter/exit fade. allow-discrete keeps the bubble rendered
+           through its fade-out after hidePopover(), and @starting-style
+           gives every open a from-opacity:0 \u2014 so the first paint at a
+           not-yet-computed transform is invisible (no flash at a stale
+           spot), and re-appearing is always clean. */
+        opacity: 0;
+        transition:
+          opacity var(--_dur) ease,
+          overlay var(--_dur) ease allow-discrete,
+          display var(--_dur) ease allow-discrete;
+      }
+
+      .container:popover-open { opacity: 1; }
+
+      @starting-style {
+        .container:popover-open { opacity: 0; }
+      }
+
+      /* Interactive tooltips accept pointer events so their content (links,
+         buttons) is clickable; the default click-through bubble does not. */
+      :host([interactive]) .container { pointer-events: auto; }
+    `;
+    this.container = document.createElement("div");
+    this.container.className = "container";
+    this.container.setAttribute("popover", "manual");
+    this.container.setAttribute("role", "tooltip");
+    this.container.append(document.createElement("slot"));
+    this.container.addEventListener("mouseenter", () => {
+      if (this.isInteractive) this.cancelHide();
+    });
+    this.container.addEventListener("mouseleave", () => {
+      if (this.isInteractive && this.shown) this.scheduleHide();
+    });
+    shadow.append(style, this.container);
+  }
+  connectedCallback() {
+    const parent = this.parentElement;
+    if (!parent) return;
+    this.anchor = parent;
+    anchorToTooltip.set(parent, this);
+    lazyObserver?.observe(parent);
+  }
+  disconnectedCallback() {
+    this.hide();
+    if (this.fadeTimer !== void 0) {
+      clearTimeout(this.fadeTimer);
+      this.fadeTimer = void 0;
+    }
+    this.fading = false;
+    if (this.docMoveBound) {
+      this.doc.removeEventListener("mousemove", this.onDocMove);
+      this.docMoveBound = false;
+    }
+    this.teardownListeners();
+    if (this.anchor) {
+      if (anchorToTooltip.get(this.anchor) === this) {
+        anchorToTooltip.delete(this.anchor);
+        lazyObserver?.unobserve(this.anchor);
+      }
+      this.anchor = null;
+    }
+  }
+  attributeChangedCallback(name) {
+    if (name === "delay" && this.listening) this.makeDebouncedShow();
+  }
+  /** (Re)build the show debounce with the CURRENT `delay` (rebuilt when the
+   *  `delay` attribute changes). Re-armed on each hover move (trailing), and
+   *  fed the latest cursor event, so it shows at the cursor and so moving back
+   *  onto an anchor after the tooltip was dismissed re-arms it. */
+  makeDebouncedShow() {
+    this.debouncedShow?.cancel();
+    this.debouncedShow = debounce((e) => this.show(e), this.delay);
+  }
+  /** The element's OWN window / document. The class may be defined in a
+   *  different realm than the element lives in (e.g. the docs playground
+   *  renders into an iframe but reuses the parent page's element class), so
+   *  the module-global `window`/`document` can point at the wrong frame.
+   *  Everything viewport- or document-scoped (clamping, scroll/key/move
+   *  listeners) must go through these so it's correct in any frame. */
+  get view() {
+    return this.ownerDocument?.defaultView ?? window;
+  }
+  get doc() {
+    return this.ownerDocument ?? document;
+  }
+  get isInteractive() {
+    return this.hasAttribute("interactive");
+  }
+  /** Pinned under the anchor (no cursor-following). Interactive implies this —
+   *  you can't move into a bubble that's chasing the cursor. */
+  get isStatic() {
+    return this.hasAttribute("static") || this.isInteractive;
+  }
+  /** Pinned to the anchor for any reason: the `static`/`interactive` attrs, or
+   *  a touch long-press (a finger can't track a following bubble). */
+  get isPinned() {
+    return this.isStatic || this.touchOpen;
+  }
+  get prefersTop() {
+    return this.getAttribute("placement") === "top";
+  }
+  get delay() {
+    const attr = this.getAttribute("delay");
+    if (attr == null) return DEFAULT_DELAY;
+    const n = parseInt(attr, 10);
+    return Number.isFinite(n) ? n : DEFAULT_DELAY;
+  }
+  // --- positioning (sets only the shadow container's own transform) ---
+  positionToTarget = () => {
+    requestAnimationFrame(() => {
+      if (!this.anchor || !this.shown) return;
+      const a = this.anchor.getBoundingClientRect();
+      const box = this.container.getBoundingClientRect();
+      const view = this.view;
+      const vw = view.innerWidth;
+      const vh = view.innerHeight;
+      let left = a.left;
+      if (left + box.width > vw) left = vw - box.width - MARGIN;
+      left = Math.max(MARGIN, left);
+      let top;
+      if (this.prefersTop || this.touchOpen) {
+        top = a.top - box.height - MARGIN;
+        if (top < MARGIN) top = a.bottom + MARGIN;
+      } else {
+        top = a.bottom + MARGIN;
+        if (top + box.height > vh) top = a.top - box.height - MARGIN;
+      }
+      top = Math.max(MARGIN, top);
+      this.container.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+    });
+  };
+  positionToMouse = (e) => {
+    requestAnimationFrame(() => {
+      if (!this.shown && !this.fading) return;
+      const box = this.container.getBoundingClientRect();
+      const view = this.view;
+      const vw = view.innerWidth;
+      const vh = view.innerHeight;
+      let left = e.clientX - PADDING_X;
+      if (left + box.width > vw) left = vw - box.width - MARGIN;
+      left = Math.max(MARGIN, left);
+      let top;
+      if (this.prefersTop) {
+        top = e.clientY - box.height - MARGIN * 2;
+        if (top < MARGIN) top = e.clientY + CURSOR_SIZE;
+      } else {
+        top = e.clientY + CURSOR_SIZE;
+        if (top + box.height > vh) top = e.clientY - box.height - MARGIN * 2;
+      }
+      top = Math.max(MARGIN, top);
+      this.container.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+    });
+  };
+  position(e) {
+    if (!this.isPinned && e) this.positionToMouse(e);
+    else this.positionToTarget();
+  }
+  // --- show / hide ---
+  show = (e) => {
+    if (!this.anchor) return;
+    this.cancelHide();
+    if (currentOpen && currentOpen !== this && this.anchor.contains(currentOpen.anchor)) {
+      return;
+    }
+    claimOpen(this);
+    if (!this.shown) {
+      this.shown = true;
+      this.fading = false;
+      if (this.fadeTimer !== void 0) {
+        clearTimeout(this.fadeTimer);
+        this.fadeTimer = void 0;
+      }
+      this.container.showPopover();
+      this.view.addEventListener("scroll", this.hide, { capture: true, passive: true });
+      this.doc.addEventListener("keydown", this.onKeyDown, true);
+      if (!this.docMoveBound) {
+        this.doc.addEventListener("mousemove", this.onDocMove);
+        this.docMoveBound = true;
+      }
+    }
+    this.position(e);
+  };
+  hide = () => {
+    this.cancelHide();
+    if (!this.shown) return;
+    this.shown = false;
+    this.touchOpen = false;
+    this.container.hidePopover();
+    this.view.removeEventListener("scroll", this.hide, { capture: true });
+    this.doc.removeEventListener("keydown", this.onKeyDown, true);
+    this.fading = true;
+    if (this.fadeTimer !== void 0) clearTimeout(this.fadeTimer);
+    this.fadeTimer = setTimeout(() => {
+      this.fading = false;
+      this.fadeTimer = void 0;
+      if (this.docMoveBound) {
+        this.doc.removeEventListener("mousemove", this.onDocMove);
+        this.docMoveBound = false;
+      }
+    }, FADE_MS);
+    releaseOpen(this);
+  };
+  /** While shown, track the cursor even after it has left the anchor (during
+   *  the close delay). Cursor-following only — static/interactive bubbles
+   *  stay pinned. */
+  onDocMove = (e) => {
+    if ((this.shown || this.fading) && !this.isPinned) {
+      this.lastMouse = e;
+      this.positionToMouse(e);
+    }
+  };
+  /** Hide after CLOSE_DELAY unless something cancels it first (re-enter, or
+   *  another tooltip claiming the slot). Lets the bubble bridge the gap to a
+   *  neighbouring anchor — and survive the trip into an interactive bubble. */
+  scheduleHide = (delay = CLOSE_DELAY) => {
+    this.cancelHide();
+    this.closeTimer = setTimeout(() => {
+      this.closeTimer = void 0;
+      this.hide();
+    }, delay);
+  };
+  cancelHide() {
+    if (this.closeTimer !== void 0) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = void 0;
+    }
+  }
+  onKeyDown = (e) => {
+    if (e.key === "Escape") this.hide();
+  };
+  /** Open now if another tooltip is hot (skip delay), else (re)arm the delayed
+   *  show with the latest cursor event. */
+  trigger(e) {
+    if (isHot()) {
+      this.debouncedShow?.cancel();
+      this.show(e);
+    } else {
+      this.debouncedShow?.(e);
+    }
+  }
+  // --- lazy listener wiring (called by the intersection observer) ---
+  setupListeners() {
+    if (this.listening || !this.anchor) {
+      this.listening = true;
+      return;
+    }
+    const anchor = this.anchor;
+    const view = this.view;
+    const doc = this.doc;
+    this.makeDebouncedShow();
+    const onPointerMove = (e) => {
+      if (e.pointerType !== "mouse") return;
+      this.lastMouse = e;
+      if (this.shown) {
+        if (!this.isPinned) this.positionToMouse(e);
+      } else {
+        this.trigger(e);
+      }
+    };
+    const onLeave = () => {
+      this.debouncedShow?.cancel();
+      anchor.removeEventListener("pointermove", onPointerMove);
+      anchor.removeEventListener("pointerleave", onLeave);
+      anchor.removeEventListener("blur", onLeave);
+      view.removeEventListener("pagehide", onLeave);
+      doc.removeEventListener("visibilitychange", onLeave);
+      this.scheduleHide();
+    };
+    const onEnter = (e) => {
+      if (e.pointerType !== "mouse") return;
+      this.lastMouse = e;
+      anchor.addEventListener("pointermove", onPointerMove);
+      anchor.addEventListener("pointerleave", onLeave);
+      view.addEventListener("pagehide", onLeave);
+      doc.addEventListener("visibilitychange", onLeave);
+      this.trigger(e);
+    };
+    const onFocus = () => {
+      if (!anchor.matches(":focus-visible")) return;
+      anchor.addEventListener("blur", onLeave);
+      view.addEventListener("pagehide", onLeave);
+      doc.addEventListener("visibilitychange", onLeave);
+      this.trigger();
+    };
+    let pressTimer;
+    let pressStart;
+    const preventContext = (e) => e.preventDefault();
+    const clearPressTimer = () => {
+      if (pressTimer !== void 0) {
+        clearTimeout(pressTimer);
+        pressTimer = void 0;
+      }
+      pressStart = void 0;
+    };
+    const onPressMove = (e) => {
+      if (pressStart && Math.hypot(e.clientX - pressStart.x, e.clientY - pressStart.y) > TOUCH_SLOP) {
+        clearPressTimer();
+      }
+    };
+    const onPressEnd = () => {
+      clearPressTimer();
+      detachPress();
+      if (this.shown && this.touchOpen) this.scheduleHide(LEAVE_TOUCH_DELAY);
+    };
+    const detachPress = () => {
+      anchor.removeEventListener("pointermove", onPressMove);
+      anchor.removeEventListener("pointerup", onPressEnd);
+      anchor.removeEventListener("pointercancel", onPressEnd);
+      anchor.removeEventListener("contextmenu", preventContext);
+    };
+    const onPointerDown = (e) => {
+      if (e.pointerType === "mouse") return;
+      clearPressTimer();
+      pressStart = { x: e.clientX, y: e.clientY };
+      anchor.addEventListener("pointermove", onPressMove);
+      anchor.addEventListener("pointerup", onPressEnd);
+      anchor.addEventListener("pointercancel", onPressEnd);
+      anchor.addEventListener("contextmenu", preventContext);
+      pressTimer = setTimeout(() => {
+        pressTimer = void 0;
+        this.touchOpen = true;
+        this.show();
+      }, ENTER_TOUCH_DELAY);
+    };
+    anchor.addEventListener("pointerenter", onEnter);
+    anchor.addEventListener("focus", onFocus);
+    anchor.addEventListener("pointerdown", onPointerDown);
+    this.teardown = () => {
+      this.debouncedShow?.cancel();
+      clearPressTimer();
+      detachPress();
+      anchor.removeEventListener("pointermove", onPointerMove);
+      anchor.removeEventListener("pointerenter", onEnter);
+      anchor.removeEventListener("pointerleave", onLeave);
+      anchor.removeEventListener("focus", onFocus);
+      anchor.removeEventListener("blur", onLeave);
+      anchor.removeEventListener("pointerdown", onPointerDown);
+      view.removeEventListener("pagehide", onLeave);
+      doc.removeEventListener("visibilitychange", onLeave);
+      this.listening = false;
+    };
+    this.listening = true;
+  }
+  teardownListeners() {
+    this.teardown?.();
+    this.teardown = void 0;
+  }
+}
+function register_a_tooltip() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-tooltip")) {
+    customElements.define("a-tooltip", ATooltipElement);
+  }
+}
+register_a_tooltip();
+export {
+  ATooltipElement,
+  register_a_tooltip
+};

package/dist/elements/index.d.ts

@@ -1,14 +1,22 @@
-import './a-progress.css';
-import './a-text.css';
-import './a-title.css';
-import './a-icon.css';
-import './a-icon.shapes.css';
-import './a-button.css';
-import './a-sticker.css';
-import './a-sticker-animated.css';
+/**
+ * Barrel: registers ALL Anta custom elements (the convenience path).
+ *
+ * Each `a-{name}` module self-registers and imports its own CSS when loaded,
+ * so re-exporting them here (which evaluates each module) registers the whole
+ * set + injects every element's CSS. Importing this barrel for side effects —
+ * `import '@antadesign/anta/elements'` — gives you everything.
+ *
+ * For a SMALLER footprint, import just the element(s) you use instead:
+ *   import '@antadesign/anta/elements/a-tooltip'   // registers a-tooltip + its CSS, nothing else
+ * That granular path pulls in only that element's code and CSS, nothing else.
+ *
+ * Must only be imported client-side — registration is guarded against missing
+ * `customElements` (SSR), but there's no reason to load it server-side.
+ */
 export { AProgressElement, register_a_progress } from './a-progress';
 export { ATextElement, register_a_text } from './a-text';
 export { AIconElement, register_a_icon } from './a-icon';
 export { AButtonElement, register_a_button } from './a-button';
-export { AStickerElement, register_a_sticker } from './a-sticker';
-export { AStickerAnimatedElement, register_a_sticker_animated } from './a-sticker-animated';
+export { ATooltipElement, register_a_tooltip } from './a-tooltip';
+import './a-title.css';
+import './a-tag.css';

package/dist/elements/index.js

@@ -1,42 +1,19 @@
-import { register_a_progress } from "./a-progress";
-import { register_a_text } from "./a-text";
-import { register_a_icon } from "./a-icon";
-import { register_a_button } from "./a-button";
-import { register_a_sticker } from "./a-sticker";
-import { register_a_sticker_animated } from "./a-sticker-animated";
-import "./a-progress.css";
-import "./a-text.css";
+import { AProgressElement, register_a_progress } from "./a-progress";
+import { ATextElement, register_a_text } from "./a-text";
+import { AIconElement, register_a_icon } from "./a-icon";
+import { AButtonElement, register_a_button } from "./a-button";
+import { ATooltipElement, register_a_tooltip } from "./a-tooltip";
 import "./a-title.css";
-import "./a-icon.css";
-import "./a-icon.shapes.css";
-import "./a-button.css";
-import "./a-sticker.css";
-import "./a-sticker-animated.css";
-import { AProgressElement, register_a_progress as register_a_progress2 } from "./a-progress";
-import { ATextElement, register_a_text as register_a_text2 } from "./a-text";
-import { AIconElement, register_a_icon as register_a_icon2 } from "./a-icon";
-import { AButtonElement, register_a_button as register_a_button2 } from "./a-button";
-import { AStickerElement, register_a_sticker as register_a_sticker2 } from "./a-sticker";
-import { AStickerAnimatedElement, register_a_sticker_animated as register_a_sticker_animated2 } from "./a-sticker-animated";
-if (typeof customElements !== "undefined") {
-  register_a_progress();
-  register_a_text();
-  register_a_icon();
-  register_a_button();
-  register_a_sticker();
-  register_a_sticker_animated();
-}
+import "./a-tag.css";
 export {
   AButtonElement,
   AIconElement,
   AProgressElement,
-  AStickerAnimatedElement,
-  AStickerElement,
   ATextElement,
-  register_a_button2 as register_a_button,
-  register_a_icon2 as register_a_icon,
-  register_a_progress2 as register_a_progress,
-  register_a_sticker2 as register_a_sticker,
-  register_a_sticker_animated2 as register_a_sticker_animated,
-  register_a_text2 as register_a_text
+  ATooltipElement,
+  register_a_button,
+  register_a_icon,
+  register_a_progress,
+  register_a_text,
+  register_a_tooltip
 };