@antadesign/anta 0.2.2 → 0.3.0

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

@@ -1,12 +1,41 @@
 import { HTMLElementBase } from '../anta_helpers';
 import './a-tooltip.css';
+/**
+ * `<a-tooltip>` — floating bubble placed as a child of the element it
+ * describes.
+ *
+ * Styling notes (`a-tooltip.css` ships comment-free):
+ * - `a-tooltip:not(:defined)` is hidden — before upgrade the host is an
+ *   unknown inline element and its content would flash *inside the anchor*.
+ *   Once defined, the shadow `:host { display: contents }` governs and
+ *   content renders only in the popover via the slot.
+ * - Only the bubble "chrome" is tokenized (`--tooltip-*`): it lives inside
+ *   the shadow popover, unreachable from plain consumer CSS; the custom
+ *   properties inherit across the shadow boundary. The content is slotted
+ *   light DOM — its font/color/size are already styleable from the page and
+ *   are intentionally NOT tokens.
+ * - The frost: `--tooltip-bg` is a mostly-opaque mix of `--bg-1` that, with
+ *   the container's backdrop blur, reads as a frosted bubble. `--bg-1` is
+ *   white in light / black in dark, so dark mode flips automatically (the
+ *   `.dark` override just lowers the alpha and adds an inset white ring so
+ *   the edge stays crisp on dark content). There's no real border by
+ *   default — the hairline edge comes from `--tooltip-shadow`; set
+ *   `--tooltip-border` for an actual one.
+ * - On coarse/no-hover pointers, an anchor that owns a tooltip
+ *   (`:where(:has(> a-tooltip))`, specificity 0 for easy override)
+ *   suppresses long-press text selection and the iOS callout so
+ *   press-and-hold cleanly reveals the bubble (see the long-press handling
+ *   below) instead of selecting text or popping the system menu.
+ */
 export declare class ATooltipElement extends HTMLElementBase {
     static observedAttributes: string[];
     /** Shadow-internal popover surface — the only thing we ever mutate. */
     private container;
-    /** Inner bubble inside `.container`. Holds the slot + all visual chrome and
-     *  carries the proximity (distance-from-anchor) opacity, kept separate from
-     *  the container's enter/exit/cross-fade opacity. */
+    /** Inner bubble inside `.container`. This IS the `<slot>` (styled
+     *  `display:block`), so it both projects the content and paints all visual
+     *  chrome — one element instead of a div-wrapping-a-slot. It carries the
+     *  proximity (distance-from-anchor) opacity, kept separate from the
+     *  container's enter/exit/cross-fade opacity. */
     private bubble;
     private anchor;
     listening: boolean;
@@ -31,14 +60,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;
-    /** 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. */
-    private get view();
-    private get doc();
     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
@@ -47,6 +68,17 @@ export declare class ATooltipElement extends HTMLElementBase {
     private get isPinned();
     private get prefersTop();
     private get delay();
+    private positionFrame?;
+    private pendingPosition?;
+    private schedulePosition;
+    /** Pick the vertical origin: prefer the `above` candidate when `preferAbove`
+     *  (auto-flipping to `below` if it'd clip the top), else `below` (flipping to
+     *  `above` if it'd clip the bottom). Shared by anchor- and cursor-anchored
+     *  placement — only the candidate origins differ. */
+    private flipVertical;
+    /** Clamp a candidate (left, top) into the viewport and write it as the
+     *  container's transform — the single place the transform is set. */
+    private place;
     private positionToTarget;
     private positionToMouse;
     private position;

package/dist/elements/a-tooltip.js

@@ -64,9 +64,11 @@ class ATooltipElement extends HTMLElementBase {
   static observedAttributes = ["delay"];
   /** Shadow-internal popover surface — the only thing we ever mutate. */
   container;
-  /** Inner bubble inside `.container`. Holds the slot + all visual chrome and
-   *  carries the proximity (distance-from-anchor) opacity, kept separate from
-   *  the container's enter/exit/cross-fade opacity. */
+  /** Inner bubble inside `.container`. This IS the `<slot>` (styled
+   *  `display:block`), so it both projects the content and paints all visual
+   *  chrome — one element instead of a div-wrapping-a-slot. It carries the
+   *  proximity (distance-from-anchor) opacity, kept separate from the
+   *  container's enter/exit/cross-fade opacity. */
   bubble;
   anchor = null;
   listening = false;
@@ -117,6 +119,7 @@ class ATooltipElement extends HTMLElementBase {
       }
 
       .bubble {
+        display: block;
         box-sizing: border-box;
         width: fit-content;
         max-width: var(--tooltip-max-width, min(calc(100vw - 20px), 80ch));
@@ -155,10 +158,9 @@ class ATooltipElement extends HTMLElementBase {
     this.container.className = "container";
     this.container.setAttribute("popover", "manual");
     this.container.setAttribute("role", "tooltip");
-    this.bubble = document.createElement("div");
+    this.bubble = document.createElement("slot");
     this.bubble.className = "bubble";
     this.bubble.setAttribute("part", "bubble");
-    this.bubble.append(document.createElement("slot"));
     this.container.append(this.bubble);
     this.container.addEventListener("mouseenter", () => {
       if (this.isInteractive) this.cancelHide();
@@ -196,18 +198,6 @@ class ATooltipElement extends HTMLElementBase {
     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");
   }
@@ -229,49 +219,54 @@ class ATooltipElement extends HTMLElementBase {
     return Number.isFinite(n) ? n : DEFAULT_DELAY;
   }
   // --- 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
+  // (earlier samples never matter — only where the cursor ends the frame).
+  positionFrame;
+  pendingPosition;
+  schedulePosition(compute) {
+    this.pendingPosition = compute;
+    if (this.positionFrame != null) return;
+    this.positionFrame = this.view.requestAnimationFrame(() => {
+      this.positionFrame = void 0;
+      const run = this.pendingPosition;
+      this.pendingPosition = void 0;
+      run?.();
+    });
+  }
+  /** Pick the vertical origin: prefer the `above` candidate when `preferAbove`
+   *  (auto-flipping to `below` if it'd clip the top), else `below` (flipping to
+   *  `above` if it'd clip the bottom). Shared by anchor- and cursor-anchored
+   *  placement — only the candidate origins differ. */
+  flipVertical(above, below, boxHeight, vh, preferAbove) {
+    if (preferAbove) return above < MARGIN ? below : above;
+    return below + boxHeight > vh ? above : below;
+  }
+  /** Clamp a candidate (left, top) into the viewport and write it as the
+   *  container's transform — the single place the transform is set. */
+  place(left, top, boxWidth, vw) {
+    if (left + boxWidth > vw) left = vw - boxWidth - MARGIN;
+    left = Math.max(MARGIN, left);
+    top = Math.max(MARGIN, top);
+    this.container.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+  }
   positionToTarget = () => {
-    requestAnimationFrame(() => {
+    this.schedulePosition(() => {
       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)`;
+      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);
+      this.place(a.left, top, box.width, vw);
     });
   };
   positionToMouse = (e) => {
-    requestAnimationFrame(() => {
+    this.schedulePosition(() => {
       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)`;
+      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);
+      this.place(e.clientX - PADDING_X, top, box.width, vw);
     });
   };
   position(e) {

package/dist/elements/index.d.ts

@@ -17,6 +17,15 @@ 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 { 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 { 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';
 import './a-title.css';
 import './a-tag.css';

package/dist/elements/index.js

@@ -2,18 +2,45 @@ 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 { 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 { 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 "./a-title.css";
 import "./a-tag.css";
 export {
   AButtonElement,
+  ACheckboxElement,
+  AExpanderElement,
   AIconElement,
+  AInputElement,
+  AMenuElement,
+  AMenuGroupElement,
+  AMenuItemElement,
+  AMenuSeparatorElement,
   AProgressElement,
+  ARadioElement,
+  ARadioGroupElement,
   ATextElement,
   ATooltipElement,
   register_a_button,
+  register_a_checkbox,
+  register_a_expander,
   register_a_icon,
+  register_a_input,
+  register_a_menu,
+  register_a_menu_group,
+  register_a_menu_item,
+  register_a_menu_separator,
   register_a_progress,
+  register_a_radio,
+  register_a_radio_group,
   register_a_text,
   register_a_tooltip
 };