@antadesign/anta 0.2.1 → 0.3.0

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

@@ -1,9 +1,42 @@
 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`. 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;
     private shown;
@@ -27,31 +60,48 @@ 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). Interactive implies this —
-     *  you can't move into a bubble that's chasing the cursor. */
-    private get isStatic();
-    /** Pinned to the anchor for any reason: the `static`/`interactive` attrs, or
-     *  a touch long-press (a finger can't track a following bubble). */
+    /** 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();
+    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;
+    /** Opacity for the inner bubble from the cursor's distance to the anchor rect
+     *  (0 inside the rect): 1 within PROX_NEAR, a linear ramp to 0 at PROX_FAR.
+     *  Cursor-follow only — drives the "fade as you move away" behaviour. */
+    private proximityOpacity;
     show: (e?: MouseEvent) => void;
     hide: () => void;
+    /** Remove every document / window listener this element binds and stop the
+     *  fade timer. Used by hide() (after the exit fade) and by cleanup()
+     *  (immediately). Idempotent. */
+    private detachGlobals;
+    /** Full, immediate teardown: close the popover now (no fade), detach every
+     *  listener, clear all timers, release the coordinator slot, reset state.
+     *  Idempotent. Called from disconnectedCallback, and from the orphan safety
+     *  net (claimOpen / onDocMove) when the element is gone but
+     *  disconnectedCallback didn't fire. Not `private` — the module coordinator
+     *  calls it. */
+    cleanup(): void;
     /** While shown, track the cursor even after it has left the anchor (during
-     *  the close delay). Cursor-following only — static/interactive bubbles
-     *  stay pinned. */
+     *  the close delay). Only runs for `follow` tooltips — pinned bubbles
+     *  (the default, `interactive`, touch) stay put. */
     private onDocMove;
     /** 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

package/dist/elements/a-tooltip.js

@@ -8,6 +8,9 @@ const DEFAULT_DELAY = 250;
 const FADE_MS = 150;
 const GRACE_MS = 300;
 const CLOSE_DELAY = 120;
+const PROX_NEAR = 10;
+const PROX_FAR = 100;
+const PROX_FADE_MS = 60;
 const ENTER_TOUCH_DELAY = 500;
 const LEAVE_TOUCH_DELAY = 1500;
 const TOUCH_SLOP = 10;
@@ -26,7 +29,10 @@ function clearGrace() {
   }
 }
 function claimOpen(el) {
-  if (currentOpen && currentOpen !== el) currentOpen.hide();
+  if (currentOpen && currentOpen !== el) {
+    if (currentOpen.isConnected) currentOpen.hide();
+    else currentOpen.cleanup();
+  }
   currentOpen = el;
   clearGrace();
 }
@@ -58,6 +64,12 @@ class ATooltipElement extends HTMLElementBase {
   static observedAttributes = ["delay"];
   /** Shadow-internal popover surface — the only thing we ever mutate. */
   container;
+  /** 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;
   shown = false;
@@ -81,38 +93,48 @@ class ATooltipElement extends HTMLElementBase {
 
       .container {
         --_dur: ${FADE_MS}ms;
-
         position: fixed;
         left: 0;
         top: 0;
         margin: 0;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        overflow: visible;
+        box-sizing: border-box;
+        width: fit-content;
+        pointer-events: none;
+        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; }
+      }
+
+      .bubble {
+        display: block;
         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;
+        padding: var(--tooltip-padding, 4px 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;
@@ -126,34 +148,20 @@ class ATooltipElement extends HTMLElementBase {
         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; }
+        opacity: 1;
+        transition: opacity ${PROX_FADE_MS}ms linear;
       }
 
-      /* 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.bubble = document.createElement("slot");
+    this.bubble.className = "bubble";
+    this.bubble.setAttribute("part", "bubble");
+    this.container.append(this.bubble);
     this.container.addEventListener("mouseenter", () => {
       if (this.isInteractive) this.cancelHide();
     });
@@ -170,17 +178,7 @@ class ATooltipElement extends HTMLElementBase {
     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();
+    this.cleanup();
     if (this.anchor) {
       if (anchorToTooltip.get(this.anchor) === this) {
         anchorToTooltip.delete(this.anchor);
@@ -200,30 +198,16 @@ 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");
   }
-  /** 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). */
+  /** 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() {
-    return this.isStatic || this.touchOpen;
+    if (this.isInteractive || this.touchOpen) return true;
+    return !this.hasAttribute("follow");
   }
   get prefersTop() {
     return this.getAttribute("placement") === "top";
@@ -235,55 +219,73 @@ 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) {
     if (!this.isPinned && e) this.positionToMouse(e);
     else this.positionToTarget();
   }
+  /** Opacity for the inner bubble from the cursor's distance to the anchor rect
+   *  (0 inside the rect): 1 within PROX_NEAR, a linear ramp to 0 at PROX_FAR.
+   *  Cursor-follow only — drives the "fade as you move away" behaviour. */
+  proximityOpacity(e) {
+    if (!this.anchor) return 1;
+    const r = this.anchor.getBoundingClientRect();
+    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);
+    if (dist <= PROX_NEAR) return 1;
+    if (dist >= PROX_FAR) return 0;
+    return 1 - (dist - PROX_NEAR) / (PROX_FAR - PROX_NEAR);
+  }
   // --- show / hide ---
   show = (e) => {
     if (!this.anchor) return;
@@ -295,6 +297,7 @@ class ATooltipElement extends HTMLElementBase {
     if (!this.shown) {
       this.shown = true;
       this.fading = false;
+      this.bubble.style.opacity = "1";
       if (this.fadeTimer !== void 0) {
         clearTimeout(this.fadeTimer);
         this.fadeTimer = void 0;
@@ -315,28 +318,65 @@ class ATooltipElement extends HTMLElementBase {
     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);
+    this.fadeTimer = setTimeout(() => this.detachGlobals(), FADE_MS);
     releaseOpen(this);
   };
+  /** Remove every document / window listener this element binds and stop the
+   *  fade timer. Used by hide() (after the exit fade) and by cleanup()
+   *  (immediately). Idempotent. */
+  detachGlobals() {
+    if (this.fadeTimer !== void 0) {
+      clearTimeout(this.fadeTimer);
+      this.fadeTimer = void 0;
+    }
+    this.fading = false;
+    this.view.removeEventListener("scroll", this.hide, { capture: true });
+    this.doc.removeEventListener("keydown", this.onKeyDown, true);
+    if (this.docMoveBound) {
+      this.doc.removeEventListener("mousemove", this.onDocMove);
+      this.docMoveBound = false;
+    }
+  }
+  /** Full, immediate teardown: close the popover now (no fade), detach every
+   *  listener, clear all timers, release the coordinator slot, reset state.
+   *  Idempotent. Called from disconnectedCallback, and from the orphan safety
+   *  net (claimOpen / onDocMove) when the element is gone but
+   *  disconnectedCallback didn't fire. Not `private` — the module coordinator
+   *  calls it. */
+  cleanup() {
+    this.cancelHide();
+    if (this.shown) {
+      this.shown = false;
+      this.touchOpen = false;
+      if (this.container.matches(":popover-open")) this.container.hidePopover();
+    }
+    this.detachGlobals();
+    this.teardownListeners();
+    releaseOpen(this);
+    this.bubble.style.opacity = "";
+  }
   /** While shown, track the cursor even after it has left the anchor (during
-   *  the close delay). Cursor-following only — static/interactive bubbles
-   *  stay pinned. */
+   *  the close delay). Only runs for `follow` tooltips — pinned bubbles
+   *  (the default, `interactive`, touch) stay put. */
   onDocMove = (e) => {
-    if ((this.shown || this.fading) && !this.isPinned) {
-      this.lastMouse = e;
-      this.positionToMouse(e);
+    if (!this.isConnected) {
+      this.cleanup();
+      return;
+    }
+    if (!(this.shown || this.fading) || this.isPinned) return;
+    this.lastMouse = e;
+    const o = this.proximityOpacity(e);
+    if (o === 0) {
+      this.bubble.style.transition = "none";
+      this.bubble.style.opacity = "0";
+      if (this.shown) this.hide();
+      return;
     }
+    this.positionToMouse(e);
+    this.bubble.style.transition = "";
+    this.bubble.style.opacity = String(o);
   };
   /** 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

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
 };