@antadesign/anta 0.3.2 → 0.3.4

package/dist/elements/a-text.js

@@ -20,12 +20,12 @@ const SHADOW_STYLE = `
     overflow: hidden;
   }
 
-  :host([truncate][expandable]) slot:not(.expanded) {
+  :host([truncate][expandable]) slot.overflowing:not(.expanded) {
     -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 2em), transparent 97%);
             mask-image: linear-gradient(to bottom, black calc(100% - 2em), transparent 97%);
   }
 
-  :host([truncate="1"][expandable]) slot:not(.expanded) {
+  :host([truncate="1"][expandable]) slot.overflowing:not(.expanded) {
     -webkit-mask-image: linear-gradient(to right, black calc(100% - 7ch), transparent 97%);
             mask-image: linear-gradient(to right, black calc(100% - 7ch), transparent 97%);
   }
@@ -73,7 +73,7 @@ const SHADOW_STYLE = `
     transition: transform 150ms ease-out;
   }
 
-  :host([truncate][expandable]) .expand-btn {
+  :host([truncate][expandable]) slot.overflowing ~ .expand-btn {
     display: block;
     left: 0;
     right: 0;
@@ -81,15 +81,15 @@ const SHADOW_STYLE = `
     height: 1.5em;
   }
 
-  :host([truncate="1"][expandable]) .expand-btn {
+  :host([truncate="1"][expandable]) slot.overflowing ~ .expand-btn {
     left: auto;
     top: 0;
     bottom: 0;
     width: 3em;
   }
 
-  :host([truncate][expandable]:hover) .expand-btn,
-  :host([truncate][expandable]:focus-within) .expand-btn,
+  :host([truncate][expandable]:hover) slot.overflowing ~ .expand-btn,
+  :host([truncate][expandable]:focus-within) slot.overflowing ~ .expand-btn,
   .expand-btn.expanded {
     opacity: 1;
   }
@@ -101,13 +101,15 @@ const SHADOW_STYLE = `
 class ATextElement extends HTMLElementBase {
   static observedAttributes = ["expandable", "truncate", "collapsible"];
   slotEl;
-  /** The expand/collapse chevron — built lazily, only while the element is
-   *  expandable (a plain `<a-text>` never creates a button or a listener).
-   *  Removed when `expandable` is dropped, and when a one-way expand completes. */
+  /** The chevron — built only while expandable, removed on drop or one-way expand. */
   expandBtn;
-  /** Expanded state lives here, on the element — a stateless wrapper can't hold
-   *  it and the app DOM may be reconciled off the UI thread. */
+  /** Expanded state lives on the element — a stateless wrapper can't hold it. */
   expanded = false;
+  // Re-sync `slot.overflowing`: the resize observer watches the box (width),
+  // the mutation observer watches the slotted content — the clamped box never
+  // resizes as content grows, so resize alone misses added lines.
+  overflowObserver;
+  contentObserver;
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
@@ -118,29 +120,37 @@ class ATextElement extends HTMLElementBase {
   }
   connectedCallback() {
     this.syncExpandButton();
+    if (this.#isExpandable) this.startOverflowObserver();
+  }
+  disconnectedCallback() {
+    this.overflowObserver?.disconnect();
+    this.contentObserver?.disconnect();
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
     if (name === "truncate" || name === "expandable") this.setExpanded(false);
     this.syncExpandButton();
+    if (name === "truncate" || name === "expandable") {
+      if (this.#isExpandable) this.startOverflowObserver();
+      else this.stopOverflowObserver();
+    }
   }
-  get isExpandable() {
+  get #isExpandable() {
     return this.hasAttribute("truncate") && this.hasAttribute("expandable");
   }
-  get isCollapsible() {
+  get #isCollapsible() {
     return this.hasAttribute("collapsible");
   }
-  /** Create or remove the chevron button to match `expandable`, then refresh
-   *  its label/visibility — the single place the button's lifecycle lives. */
+  /** Create or remove the chevron to match `expandable`, then refresh it. */
   syncExpandButton() {
-    if (this.isExpandable && !this.expandBtn) {
+    if (this.#isExpandable && !this.expandBtn) {
       const btn = document.createElement("button");
       btn.className = "expand-btn";
       btn.type = "button";
       btn.addEventListener("click", this.handleToggle);
       this.shadowRoot.append(btn);
       this.expandBtn = btn;
-    } else if (!this.isExpandable && this.expandBtn) {
+    } else if (!this.#isExpandable && this.expandBtn) {
       this.expandBtn.remove();
       this.expandBtn = void 0;
     }
@@ -154,15 +164,35 @@ class ATextElement extends HTMLElementBase {
     this.expanded = next;
     this.slotEl.classList.toggle("expanded", next);
     this.refreshButton();
-  }
-  /** Reflect the current state onto the button: label + `aria-expanded` + the
-   *  `.expanded` class (CSS keeps it visible and rotates the chevron up). A
-   *  one-way expand (no `collapsible`) removes the button once expanded — there
-   *  is nothing to collapse back to. */
+    if (!next) this.measureOverflow();
+  }
+  startOverflowObserver() {
+    if (!this.#isExpandable) return;
+    this.overflowObserver ??= new ResizeObserver(() => this.measureOverflow());
+    this.contentObserver ??= new MutationObserver(() => this.measureOverflow());
+    this.overflowObserver.observe(this.slotEl);
+    this.contentObserver.observe(this, { childList: true, subtree: true, characterData: true });
+    this.measureOverflow();
+  }
+  stopOverflowObserver() {
+    this.overflowObserver?.disconnect();
+    this.contentObserver?.disconnect();
+    this.slotEl.classList.remove("overflowing");
+  }
+  /** Toggle `slot.overflowing` (gates the fade + chevron) to whether the clamp
+   *  clips. Frozen on while expanded; height catches wrapped text, width a long word. */
+  measureOverflow() {
+    if (!this.#isExpandable || this.expanded) return;
+    const s = this.slotEl;
+    const over = s.scrollHeight > s.clientHeight + 1 || s.scrollWidth > s.clientWidth + 1;
+    s.classList.toggle("overflowing", over);
+  }
+  /** Reflect state onto the button (label + `aria-expanded` + `.expanded`); a
+   *  one-way expand removes it once open. */
   refreshButton() {
     const btn = this.expandBtn;
     if (!btn) return;
-    if (this.expanded && !this.isCollapsible) {
+    if (this.expanded && !this.#isCollapsible) {
       btn.remove();
       this.expandBtn = void 0;
       return;

package/dist/elements/a-tooltip.css

@@ -1 +1 @@
-@layer anta{a-tooltip:not(:defined){display:none}@media(hover:none)and (pointer:coarse){:where(:has(>a-tooltip)){-webkit-touch-callout:none;user-select:none}}a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 80%, transparent);--tooltip-shadow: 0 1px 8px color-mix(in oklch, var(--text-1) 15%, transparent), 0 0 1px color-mix(in oklch, var(--text-1) 50%, transparent);--tooltip-radius: 3px;--tooltip-max-width: min( calc(100vw - 20px) , 80ch);--tooltip-border: none;--tooltip-backdrop-filter: blur(8px)}.dark a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 70%, transparent);--tooltip-shadow: 0 2px 16px color-mix(in oklch, black 70%, transparent), inset 0 0 0 1px color-mix(in oklch, white 15%, transparent)}}
+@layer anta{a-tooltip:not(:defined){display:none}@media(hover:none)and (pointer:coarse){:where(:has(>a-tooltip)){-webkit-touch-callout:none;user-select:none}}a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 80%, transparent);--tooltip-shadow: 0 1px 8px color-mix(in oklch, var(--text-1) 15%, transparent), 0 0 1px color-mix(in oklch, var(--text-1) 50%, transparent);--tooltip-radius: 3px;--tooltip-max-width: min( calc(100vw - 20px) , 80ch);--tooltip-border: none;--tooltip-backdrop-filter: blur(8px)}a-tooltip[round]{--tooltip-radius: attr(round type(<length>), 20px)}.dark a-tooltip{--tooltip-bg: color-mix(in oklch, var(--bg-1) 70%, transparent);--tooltip-shadow: 0 2px 16px color-mix(in oklch, black 70%, transparent), inset 0 0 0 1px color-mix(in oklch, white 15%, transparent)}}

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,17 +61,6 @@ 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();
-    /** When set, the tooltip only shows if its resolved target is actually
-     *  truncated/clipped; a fitting label gets no tooltip. */
-    private get truncatedOnly();
     /** 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

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;
@@ -164,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);
   }
@@ -197,23 +197,23 @@ 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);
@@ -222,7 +222,7 @@ class ATooltipElement extends HTMLElementBase {
   // --- 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() {
+  get #truncatedOnly() {
     return this.hasAttribute("truncated-only");
   }
   /** The element whose overflow decides whether the tooltip shows: a
@@ -294,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);
     });
   };
@@ -306,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
@@ -319,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);
@@ -330,8 +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;
+    if (this.#truncatedOnly && !this.isTargetTruncated()) return;
     this.cancelHide();
     if (currentOpen && currentOpen !== this && this.anchor.contains(currentOpen.anchor)) {
       return;
@@ -408,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) {
@@ -444,7 +445,7 @@ class ATooltipElement extends HTMLElementBase {
    *  show with the latest cursor event. */
   trigger(e) {
     if (this.isEmpty()) return;
-    if (this.truncatedOnly && !this.isTargetTruncated()) return;
+    if (this.#truncatedOnly && !this.isTargetTruncated()) return;
     if (isHot()) {
       this.debouncedShow?.cancel();
       this.show(e);
@@ -466,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,6 +21,7 @@ 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';
@@ -29,6 +30,6 @@ export { AMenuSeparatorElement, register_a_menu_separator } from './a-menu-separ
 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';
+export { ATabPanelElement, register_a_tabpanel } from './a-tabpanel';
 import './a-title.css';
 import './a-tag.css';
-import './a-tabpanel.css';

package/dist/elements/index.js

@@ -6,6 +6,7 @@ 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";
@@ -14,11 +15,12 @@ import { AMenuSeparatorElement, register_a_menu_separator } from "./a-menu-separ
 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 { ATabPanelElement, register_a_tabpanel } from "./a-tabpanel";
 import "./a-title.css";
 import "./a-tag.css";
-import "./a-tabpanel.css";
 export {
   AButtonElement,
+  ACalendarElement,
   ACheckboxElement,
   AExpanderElement,
   AIconElement,
@@ -31,10 +33,12 @@ export {
   ARadioElement,
   ARadioGroupElement,
   ATabElement,
+  ATabPanelElement,
   ATabsElement,
   ATextElement,
   ATooltipElement,
   register_a_button,
+  register_a_calendar,
   register_a_checkbox,
   register_a_expander,
   register_a_icon,
@@ -47,6 +51,7 @@ export {
   register_a_radio,
   register_a_radio_group,
   register_a_tab,
+  register_a_tabpanel,
   register_a_tabs,
   register_a_text,
   register_a_tooltip