@antadesign/anta 0.3.1 → 0.3.3

package/dist/elements/a-tooltip.d.ts

@@ -28,6 +28,7 @@ import './a-tooltip.css';
  *   below) instead of selecting text or popping the system menu.
  */
 export declare class ATooltipElement extends HTMLElementBase {
+    #private;
     static observedAttributes: string[];
     /** Shadow-internal popover surface — the only thing we ever mutate. */
     private container;
@@ -60,14 +61,21 @@ export declare class ATooltipElement extends HTMLElementBase {
      *  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. */
     private makeDebouncedShow;
-    private get isInteractive();
-    /** Pinned under the anchor (no cursor-following) — the DEFAULT. Following the
-     *  cursor is opt-in via the `follow` attribute. `interactive` (you can't move
-     *  into a bubble that chases the cursor) and a touch long-press (a finger
-     *  can't track one) force pinned regardless of `follow`. */
-    private get isPinned();
-    private get prefersTop();
-    private get delay();
+    /** The element whose overflow decides whether the tooltip shows: a
+     *  `truncated-selector` resolved within the anchor wins; else the first of
+     *  Anta's ellipsizing label parts inside the anchor; else the anchor itself
+     *  (which may be the clipping box for a hand-authored target). */
+    private resolveTruncationTarget;
+    /** True when the resolved target overflows its box (horizontal ellipsis or
+     *  vertical clamp). A 1px threshold absorbs sub-pixel rounding; a zero-size
+     *  (hidden / detached) target counts as not truncated. Measured fresh on each
+     *  show attempt, so late fonts / resizes self-correct with no observer. */
+    private isTargetTruncated;
+    /** True when there's nothing worth showing: no element children (so an
+     *  icon/image-only bubble still counts as content) and no non-whitespace text
+     *  (so formatting whitespace / an empty conditional doesn't open a blank bubble).
+     *  Re-checked on every show(), so a tooltip populated later self-corrects. */
+    private isEmpty;
     private positionFrame?;
     private pendingPosition?;
     private schedulePosition;

package/dist/elements/a-tooltip.js

@@ -1,4 +1,4 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { HTMLElementBase, anchorRect, isMenuOpen, isInsideOpenMenu } from "../anta_helpers";
 import { debounce } from "es-toolkit";
 import "./a-tooltip.css";
 const MARGIN = 4;
@@ -12,6 +12,7 @@ const PROX_NEAR = 10;
 const PROX_FAR = 100;
 const PROX_FADE_MS = 60;
 const ENTER_TOUCH_DELAY = 500;
+const TRUNCATING_PARTS = "a-tab-label, a-button-label";
 const LEAVE_TOUCH_DELAY = 1500;
 const TOUCH_SLOP = 10;
 let currentOpen = null;
@@ -163,10 +164,10 @@ class ATooltipElement extends HTMLElementBase {
     this.bubble.setAttribute("part", "bubble");
     this.container.append(this.bubble);
     this.container.addEventListener("mouseenter", () => {
-      if (this.isInteractive) this.cancelHide();
+      if (this.#isInteractive) this.cancelHide();
     });
     this.container.addEventListener("mouseleave", () => {
-      if (this.isInteractive && this.shown) this.scheduleHide();
+      if (this.#isInteractive && this.shown) this.scheduleHide();
     });
     shadow.append(style, this.container);
   }
@@ -196,28 +197,68 @@ class ATooltipElement extends HTMLElementBase {
    *  onto an anchor after the tooltip was dismissed re-arms it. */
   makeDebouncedShow() {
     this.debouncedShow?.cancel();
-    this.debouncedShow = debounce((e) => this.show(e), this.delay);
+    this.debouncedShow = debounce((e) => this.show(e), this.#delay);
   }
-  get isInteractive() {
+  get #isInteractive() {
     return this.hasAttribute("interactive");
   }
   /** Pinned under the anchor (no cursor-following) — the DEFAULT. Following the
    *  cursor is opt-in via the `follow` attribute. `interactive` (you can't move
    *  into a bubble that chases the cursor) and a touch long-press (a finger
    *  can't track one) force pinned regardless of `follow`. */
-  get isPinned() {
-    if (this.isInteractive || this.touchOpen) return true;
+  get #isPinned() {
+    if (this.#isInteractive || this.touchOpen) return true;
     return !this.hasAttribute("follow");
   }
-  get prefersTop() {
+  get #prefersTop() {
     return this.getAttribute("placement") === "top";
   }
-  get delay() {
+  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;
   }
+  // --- truncated-only gating (UI-thread layout READS — no mutation) ---
+  /** When set, the tooltip only shows if its resolved target is actually
+   *  truncated/clipped; a fitting label gets no tooltip. */
+  get #truncatedOnly() {
+    return this.hasAttribute("truncated-only");
+  }
+  /** The element whose overflow decides whether the tooltip shows: a
+   *  `truncated-selector` resolved within the anchor wins; else the first of
+   *  Anta's ellipsizing label parts inside the anchor; else the anchor itself
+   *  (which may be the clipping box for a hand-authored target). */
+  resolveTruncationTarget() {
+    const anchor = this.anchor;
+    if (!anchor) return null;
+    const sel = this.getAttribute("truncated-selector");
+    if (sel) {
+      try {
+        const found = anchor.querySelector(sel);
+        if (found) return found;
+      } catch {
+      }
+    }
+    return anchor.querySelector(TRUNCATING_PARTS) ?? anchor;
+  }
+  /** True when the resolved target overflows its box (horizontal ellipsis or
+   *  vertical clamp). A 1px threshold absorbs sub-pixel rounding; a zero-size
+   *  (hidden / detached) target counts as not truncated. Measured fresh on each
+   *  show attempt, so late fonts / resizes self-correct with no observer. */
+  isTargetTruncated() {
+    const t = this.resolveTruncationTarget();
+    if (!t) return false;
+    if (t.clientWidth === 0 && t.clientHeight === 0) return false;
+    return t.scrollWidth - t.clientWidth > 1 || t.scrollHeight - t.clientHeight > 1;
+  }
+  /** True when there's nothing worth showing: no element children (so an
+   *  icon/image-only bubble still counts as content) and no non-whitespace text
+   *  (so formatting whitespace / an empty conditional doesn't open a blank bubble).
+   *  Re-checked on every show(), so a tooltip populated later self-corrects. */
+  isEmpty() {
+    return this.children.length === 0 && (this.textContent ?? "").trim() === "";
+  }
   // --- positioning (sets only the shadow container's own transform) ---
   // Single pending position frame: a burst of mousemoves within one frame
   // coalesces to ONE layout read + transform write, using the LATEST geometry
@@ -253,10 +294,10 @@ class ATooltipElement extends HTMLElementBase {
   positionToTarget = () => {
     this.schedulePosition(() => {
       if (!this.anchor || !this.shown) return;
-      const a = this.anchor.getBoundingClientRect();
+      const a = anchorRect(this.anchor);
       const box = this.container.getBoundingClientRect();
       const { innerWidth: vw, innerHeight: vh } = this.view;
-      const top = this.flipVertical(a.top - box.height - MARGIN, a.bottom + MARGIN, box.height, vh, this.prefersTop || this.touchOpen);
+      const top = this.flipVertical(a.top - box.height - MARGIN, a.bottom + MARGIN, box.height, vh, this.#prefersTop || this.touchOpen);
       this.place(a.left, top, box.width, vw);
     });
   };
@@ -265,12 +306,12 @@ class ATooltipElement extends HTMLElementBase {
       if (!this.shown && !this.fading) return;
       const box = this.container.getBoundingClientRect();
       const { innerWidth: vw, innerHeight: vh } = this.view;
-      const top = this.flipVertical(e.clientY - box.height - MARGIN * 2, e.clientY + CURSOR_SIZE, box.height, vh, this.prefersTop);
+      const top = this.flipVertical(e.clientY - box.height - MARGIN * 2, e.clientY + CURSOR_SIZE, box.height, vh, this.#prefersTop);
       this.place(e.clientX - PADDING_X, top, box.width, vw);
     });
   };
   position(e) {
-    if (!this.isPinned && e) this.positionToMouse(e);
+    if (!this.#isPinned && e) this.positionToMouse(e);
     else this.positionToTarget();
   }
   /** Opacity for the inner bubble from the cursor's distance to the anchor rect
@@ -278,7 +319,7 @@ class ATooltipElement extends HTMLElementBase {
    *  Cursor-follow only — drives the "fade as you move away" behaviour. */
   proximityOpacity(e) {
     if (!this.anchor) return 1;
-    const r = this.anchor.getBoundingClientRect();
+    const r = anchorRect(this.anchor);
     const dx = Math.max(r.left - e.clientX, 0, e.clientX - r.right);
     const dy = Math.max(r.top - e.clientY, 0, e.clientY - r.bottom);
     const dist = Math.hypot(dx, dy);
@@ -289,6 +330,9 @@ class ATooltipElement extends HTMLElementBase {
   // --- show / hide ---
   show = (e) => {
     if (!this.anchor) return;
+    if (isMenuOpen() && !isInsideOpenMenu(this.anchor)) return;
+    if (this.isEmpty()) return;
+    if (this.#truncatedOnly && !this.isTargetTruncated()) return;
     this.cancelHide();
     if (currentOpen && currentOpen !== this && this.anchor.contains(currentOpen.anchor)) {
       return;
@@ -365,7 +409,7 @@ class ATooltipElement extends HTMLElementBase {
       this.cleanup();
       return;
     }
-    if (!(this.shown || this.fading) || this.isPinned) return;
+    if (!(this.shown || this.fading) || this.#isPinned) return;
     this.lastMouse = e;
     const o = this.proximityOpacity(e);
     if (o === 0) {
@@ -400,6 +444,8 @@ class ATooltipElement extends HTMLElementBase {
   /** Open now if another tooltip is hot (skip delay), else (re)arm the delayed
    *  show with the latest cursor event. */
   trigger(e) {
+    if (this.isEmpty()) return;
+    if (this.#truncatedOnly && !this.isTargetTruncated()) return;
     if (isHot()) {
       this.debouncedShow?.cancel();
       this.show(e);
@@ -421,7 +467,7 @@ class ATooltipElement extends HTMLElementBase {
       if (e.pointerType !== "mouse") return;
       this.lastMouse = e;
       if (this.shown) {
-        if (!this.isPinned) this.positionToMouse(e);
+        if (!this.#isPinned) this.positionToMouse(e);
       } else {
         this.trigger(e);
       }

package/dist/elements/index.d.ts

@@ -21,11 +21,15 @@ export { ACheckboxElement, register_a_checkbox } from './a-checkbox';
 export { AExpanderElement, register_a_expander } from './a-expander';
 export { ATooltipElement, register_a_tooltip } from './a-tooltip';
 export { AInputElement, register_a_input } from './a-input';
+export { ACalendarElement, register_a_calendar } from './a-calendar';
 export { ARadioElement, register_a_radio } from './a-radio';
 export { ARadioGroupElement, register_a_radio_group } from './a-radio-group';
 export { AMenuElement, register_a_menu } from './a-menu';
 export { AMenuItemElement, register_a_menu_item } from './a-menu-item';
 export { AMenuSeparatorElement, register_a_menu_separator } from './a-menu-separator';
 export { AMenuGroupElement, register_a_menu_group } from './a-menu-group';
+export { ATabElement, register_a_tab } from './a-tab';
+export { ATabsElement, register_a_tabs } from './a-tabs';
 import './a-title.css';
 import './a-tag.css';
+import './a-tabpanel.css';

package/dist/elements/index.js

@@ -6,16 +6,21 @@ import { ACheckboxElement, register_a_checkbox } from "./a-checkbox";
 import { AExpanderElement, register_a_expander } from "./a-expander";
 import { ATooltipElement, register_a_tooltip } from "./a-tooltip";
 import { AInputElement, register_a_input } from "./a-input";
+import { ACalendarElement, register_a_calendar } from "./a-calendar";
 import { ARadioElement, register_a_radio } from "./a-radio";
 import { ARadioGroupElement, register_a_radio_group } from "./a-radio-group";
 import { AMenuElement, register_a_menu } from "./a-menu";
 import { AMenuItemElement, register_a_menu_item } from "./a-menu-item";
 import { AMenuSeparatorElement, register_a_menu_separator } from "./a-menu-separator";
 import { AMenuGroupElement, register_a_menu_group } from "./a-menu-group";
+import { ATabElement, register_a_tab } from "./a-tab";
+import { ATabsElement, register_a_tabs } from "./a-tabs";
 import "./a-title.css";
 import "./a-tag.css";
+import "./a-tabpanel.css";
 export {
   AButtonElement,
+  ACalendarElement,
   ACheckboxElement,
   AExpanderElement,
   AIconElement,
@@ -27,9 +32,12 @@ export {
   AProgressElement,
   ARadioElement,
   ARadioGroupElement,
+  ATabElement,
+  ATabsElement,
   ATextElement,
   ATooltipElement,
   register_a_button,
+  register_a_calendar,
   register_a_checkbox,
   register_a_expander,
   register_a_icon,
@@ -41,6 +49,8 @@ export {
   register_a_progress,
   register_a_radio,
   register_a_radio_group,
+  register_a_tab,
+  register_a_tabs,
   register_a_text,
   register_a_tooltip
 };