@colletdev/core 0.1.3

package/src/elements/text_input.js

@@ -0,0 +1,121 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/text_input.rs
+
+export function defineCxTextInput(wasmFn, baseClass) {
+  class CxTextInput extends baseClass {
+    static observedAttributes = ['id', 'label', 'variant', 'shape', 'size', 'kind', 'placeholder', 'value', 'helper-text', 'error', 'disabled', 'readonly', 'required', 'clearable', 'prefix-icon', 'suffix-icon', 'password-toggle', 'password-visible', 'name', 'pattern', 'autocomplete', 'auto-grow'];
+    static _booleanAttrs = new Set(['disabled', 'readonly', 'required', 'clearable', 'password-toggle', 'password-visible', 'auto-grow']);
+
+  set min_length(v) { this._setProp('min_length', v); }
+  get min_length() { return this._props.min_length; }
+
+  set max_length(v) { this._setProp('max_length', v); }
+  get max_length() { return this._props.max_length; }
+
+  set rows(v) { this._setProp('rows', v); }
+  get rows() { return this._props.rows; }
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        // --- Click delegation: password toggle + clear button ---
+        shadow.addEventListener('click', (e) => {
+          // Password toggle button
+          const toggleBtn = e.target.closest('button[aria-label="Show password"], button[aria-label="Hide password"]');
+          if (toggleBtn) {
+            const input = shadow.querySelector('input');
+            if (!input) return;
+            const isPassword = input.type === 'password';
+            input.type = isPassword ? 'text' : 'password';
+            toggleBtn.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
+            const use = toggleBtn.querySelector('use');
+            if (use) {
+              use.setAttribute('href', isPassword ? '#icon-eye-off' : '#icon-eye');
+            }
+            this._props.password_visible = isPassword;
+            return;
+          }
+
+          // Clear button
+          const clearBtn = e.target.closest('button[aria-label="Clear"]');
+          if (clearBtn) {
+            const input = shadow.querySelector('input, textarea');
+            if (!input) return;
+            input.value = '';
+            input.focus();
+            this._setFormValue('');
+            this._props.value = '';
+            this._emit('cx-input', { value: '' });
+            this._emit('cx-change', { value: '' });
+            return;
+          }
+        });
+
+        // Delegated event listeners — attach once on shadow root
+        shadow.addEventListener('input', (e) => {
+          if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
+            // Sync props immediately so any re-render before React echoes
+            // the value back doesn't reset the input to a stale value.
+            this._props.value = e.target.value;
+            this._setFormValue(e.target.value);
+            this._emit('cx-input', { value: e.target.value });
+          }
+        });
+        shadow.addEventListener('change', (e) => {
+          if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') {
+            this._emit('cx-change', { value: e.target.value });
+          }
+        });
+
+        // Forward focus events from inner interactive elements
+        shadow.addEventListener('focusin', (e) => {
+          this._emit('cx-focus', { relatedTarget: e.relatedTarget });
+        });
+        shadow.addEventListener('focusout', (e) => {
+          this._emit('cx-blur', { relatedTarget: e.relatedTarget });
+        });
+
+        // Forward keyboard events from inner interactive elements
+        shadow.addEventListener('keydown', (e) => {
+          this._emit('cx-keydown', { key: e.key, code: e.code, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey });
+        });
+        shadow.addEventListener('keyup', (e) => {
+          this._emit('cx-keyup', { key: e.key, code: e.code, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey });
+        });
+      } // end _isInitialized guard
+      super.connectedCallback();
+    }
+
+    // ── Public imperative API ──
+    focus() { const el = this._shadow.querySelector('input, textarea'); if (el) el.focus(); else super.focus(); }
+    blur() { const el = this._shadow.querySelector('input, textarea'); if (el) el.blur(); }
+    select() { const el = this._shadow.querySelector('input, textarea'); if (el) el.select(); }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      // Sync form value after render. Event delegation on shadow root
+      // avoids duplicate listeners (innerHTML replaces old DOM nodes,
+      // but shadow root persists — delegation handles new inputs).
+      const input = this._shadow.querySelector('input, textarea, select');
+      if (input) {
+        // Sync controlled value prop → internal input property.
+        // _injectHtml's focus-preservation restores the OLD typed value
+        // to maintain cursor position during re-renders. But when the
+        // value prop explicitly changes (e.g., clearing after submit),
+        // the controlled value must win.
+        if ('value' in this._props) input.value = this._props.value;
+        this._setFormValue(input.value || '');
+      }
+      } catch (e) {
+        console.error('[cx-text-input]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-text-input', CxTextInput);
+  return CxTextInput;
+}

package/src/elements/thinking.d.ts

@@ -0,0 +1,17 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/thinking.rs
+
+export interface CxThinkingAttributes {
+    id?: string;
+    variant?: 'ghost' | 'filled';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    label?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    speed?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-thinking': HTMLElement & CxThinkingAttributes;
+  }
+}

package/src/elements/thinking.js

@@ -0,0 +1,28 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/thinking.rs
+
+export function defineCxThinking(wasmFn, baseClass) {
+  class CxThinking extends baseClass {
+    static observedAttributes = ['id', 'variant', 'shape', 'label', 'size', 'speed'];
+    static _booleanAttrs = new Set([]);
+    static _focusable = false;
+    static _hostDisplay = 'inline-flex';
+
+
+    connectedCallback() {
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-thinking]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-thinking', CxThinking);
+  return CxThinking;
+}

package/src/elements/toast.d.ts

@@ -0,0 +1,23 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/toast.rs
+
+export interface CxToastAttributes {
+    id?: string;
+    title?: string;
+    description?: string;
+    variant?: 'subtle' | 'filled' | 'outline';
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    showIcon?: boolean;
+    icon?: string;
+    dismissible?: boolean;
+    dismissLabel?: string;
+    action?: string;
+    duration?: number;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-toast': HTMLElement & CxToastAttributes;
+  }
+}

package/src/elements/toast.js

@@ -0,0 +1,209 @@
+// Custom behavior for <cx-toast> — entrance/exit animation, auto-dismiss timer,
+// hover-pause, dismiss button handling, and progress indicator.
+//
+// Animations use CSS @keyframes driven by data attributes:
+//   [data-open]    → entrance (350ms snappy slide + scale + fade)
+//   [data-closing] → exit (250ms ease-out slide + scale + fade)
+//
+// Auto-dismiss: configurable via `duration` property (default: 4250ms).
+// Timer pauses on hover and resumes on mouse leave. A progress bar
+// (`data-toast-progress`) shows remaining time visually.
+//
+// Source: crates/wasm-api/src/toast.rs
+
+// ─── Animation Timing ───
+
+const ENTER_DURATION = 350;
+const EXIT_DURATION = 250;
+
+export function defineCxToast(wasmFn, baseClass) {
+  class CxToast extends baseClass {
+    static observedAttributes = ['id', 'title', 'description', 'variant', 'intent', 'size', 'show-icon', 'icon', 'dismissible', 'dismiss-label'];
+    static _booleanAttrs = new Set(['show-icon', 'dismissible']);
+
+    // Duration property (ms). 0 = persistent (no auto-dismiss).
+    #duration = 4250;
+    #timer = null;
+    #remaining = 0;
+    #startedAt = 0;
+    #paused = false;
+    #dismissed = false;
+
+    set duration(v) {
+      const ms = typeof v === 'number' ? v : parseInt(v, 10);
+      if (!Number.isNaN(ms) && ms >= 0) {
+        this.#duration = ms;
+        this._setProp('duration', ms);
+      }
+    }
+    get duration() { return this.#duration; }
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        // Dismiss button click
+        shadow.addEventListener('click', (e) => {
+          const btn = e.target.closest('[data-handler*="dismiss"], [data-toast-dismiss]');
+          if (btn) this.#dismiss();
+        });
+
+        // Hover: pause auto-dismiss timer
+        this.addEventListener('mouseenter', () => this.#pauseTimer());
+        this.addEventListener('mouseleave', () => this.#resumeTimer());
+
+        // Focus within: also pause (keyboard users hovering dismiss button)
+        this.addEventListener('focusin', () => this.#pauseTimer());
+        this.addEventListener('focusout', (e) => {
+          if (!this.contains(e.relatedTarget) && !this._shadow.contains(e.relatedTarget)) this.#resumeTimer();
+        });
+      } // end _isInitialized guard
+
+      super.connectedCallback();
+    }
+
+    disconnectedCallback() {
+      this.#clearTimer();
+      super.disconnectedCallback();
+    }
+
+    // ── Public imperative API ──
+    dismiss() { this.#dismiss(); }
+
+    // ─── Render ───
+
+    _doRender() {
+      try {
+        this._props.slotted = true;
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        // Inject progress bar for timed toasts
+        if (this.#duration > 0) {
+          const toast = this._shadow.querySelector('[data-toast]');
+          if (toast && !toast.querySelector('[data-toast-progress]')) {
+            // Ensure relative positioning for the absolute progress bar
+            toast.style.position = 'relative';
+            toast.style.overflow = 'hidden';
+            const bar = document.createElement('div');
+            bar.setAttribute('data-toast-progress', '');
+            bar.style.animation = `toast-progress ${this.#duration}ms linear forwards`;
+            toast.appendChild(bar);
+          }
+        }
+
+        // Trigger entrance animation after first render
+        requestAnimationFrame(() => this.#enter());
+      } catch (e) {
+        console.error('[cx-toast]', e);
+      }
+    }
+
+    // ─── Entrance ───
+
+    #enter() {
+      if (this.#dismissed) return;
+      const toast = this._shadow.querySelector('[data-toast]');
+      if (!toast) return;
+
+      const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+      if (reducedMotion) {
+        toast.setAttribute('data-open', '');
+      } else {
+        toast.setAttribute('data-open', '');
+      }
+
+      // Start auto-dismiss timer after entrance animation completes
+      if (this.#duration > 0) {
+        this.#remaining = this.#duration;
+        this.#startedAt = Date.now();
+        this.#timer = setTimeout(() => this.#dismiss(), this.#duration);
+      }
+    }
+
+    // ─── Exit + Dismiss ───
+
+    #dismiss() {
+      if (this.#dismissed) return;
+      this.#dismissed = true;
+      this.#clearTimer();
+
+      const toast = this._shadow.querySelector('[data-toast]');
+      if (!toast) {
+        this.#cleanup();
+        return;
+      }
+
+      toast.removeAttribute('data-open');
+      toast.setAttribute('data-closing', '');
+
+      const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+      const dur = reducedMotion ? 0 : EXIT_DURATION;
+
+      // Wait for exit animation to finish, then emit event and remove
+      if (dur > 0) {
+        toast.addEventListener('animationend', () => this.#cleanup(), { once: true });
+        // Safety fallback in case animationend doesn't fire
+        setTimeout(() => this.#cleanup(), dur + 50);
+      } else {
+        this.#cleanup();
+      }
+    }
+
+    #cleanedUp = false;
+    #cleanup() {
+      // Guard: animationend + setTimeout safety fallback can both call this.
+      // Only emit cx-dismiss once — double events cause React state errors.
+      if (this.#cleanedUp) return;
+      this.#cleanedUp = true;
+      this._emit('cx-dismiss', {});
+      // Don't call this.remove() — let the consumer (React, vanilla JS)
+      // handle DOM removal via the cx-dismiss event. Self-removal breaks
+      // React's virtual DOM reconciliation.
+    }
+
+    // ─── Timer Management ───
+
+    #pauseTimer() {
+      if (this.#paused || this.#dismissed || this.#duration === 0) return;
+      this.#paused = true;
+
+      if (this.#timer) {
+        clearTimeout(this.#timer);
+        this.#timer = null;
+        this.#remaining -= (Date.now() - this.#startedAt);
+        if (this.#remaining < 0) this.#remaining = 0;
+      }
+
+      // Pause progress bar animation
+      const bar = this._shadow.querySelector('[data-toast-progress]');
+      if (bar) bar.style.animationPlayState = 'paused';
+    }
+
+    #resumeTimer() {
+      if (!this.#paused || this.#dismissed || this.#duration === 0) return;
+      this.#paused = false;
+
+      if (this.#remaining > 0) {
+        this.#startedAt = Date.now();
+        this.#timer = setTimeout(() => this.#dismiss(), this.#remaining);
+      }
+
+      // Resume progress bar animation
+      const bar = this._shadow.querySelector('[data-toast-progress]');
+      if (bar) bar.style.animationPlayState = 'running';
+    }
+
+    #clearTimer() {
+      if (this.#timer) {
+        clearTimeout(this.#timer);
+        this.#timer = null;
+      }
+    }
+  }
+
+  customElements.define('cx-toast', CxToast);
+  return CxToast;
+}

package/src/elements/toggle_group.d.ts

@@ -0,0 +1,22 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/toggle_group.rs
+
+export interface CxToggleGroupAttributes {
+    id?: string;
+    label?: string;
+    items?: string;
+    variant?: 'outline' | 'ghost' | 'filled';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    mode?: 'single' | 'multiple';
+    orientation?: 'horizontal' | 'vertical';
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    value?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-toggle-group': HTMLElement & CxToggleGroupAttributes;
+  }
+}

package/src/elements/toggle_group.js

@@ -0,0 +1,176 @@
+// Custom behavior for <cx-toggle-group> — button toggle state management.
+//
+// The Rust component renders:
+//   <div role="group" data-toggle-group data-toggle-mode="single|multiple">
+//     <span data-toggle-indicator> (single mode only — sliding highlight)
+//     <button data-toggle-item data-toggle-value="{id}" aria-pressed="true|false">
+//
+// This Custom Element wires up:
+//   - Click button to toggle pressed state
+//   - Single mode: only one can be pressed at a time
+//   - Multiple mode: each toggles independently
+//   - Sliding indicator positioning (single mode)
+//   - Keyboard navigation (ArrowLeft/Right, Home/End)
+//   - cx-change event with { pressed: string[] }
+//
+// Source: crates/wasm-api/src/toggle_group.rs
+
+export function defineCxToggleGroup(wasmFn, baseClass) {
+  class CxToggleGroup extends baseClass {
+    static observedAttributes = ['id', 'label', 'items', 'value', 'variant', 'shape', 'mode', 'orientation', 'intent', 'size', 'disabled'];
+    static _booleanAttrs = new Set(['disabled']);
+    static _hostDisplay = 'inline-flex';
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        // ── Click handler ──
+        shadow.addEventListener('click', (e) => {
+          const btn = e.target.closest('[data-toggle-item]');
+          if (!btn || btn.disabled || btn.hasAttribute('aria-disabled')) return;
+
+          this.#toggleItem(btn);
+        });
+
+        // ── Keyboard handler (arrow navigation) ──
+        shadow.addEventListener('keydown', (e) => {
+          const btn = e.target.closest('[data-toggle-item]');
+          if (!btn) return;
+
+          const isHorizontal = this.#getOrientation() !== 'vertical';
+          const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+          const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+
+          if (e.key === prevKey || e.key === nextKey) {
+            e.preventDefault();
+            const items = this.#getItems();
+            const idx = items.indexOf(btn);
+            if (idx === -1) return;
+
+            let next;
+            if (e.key === nextKey) {
+              next = items[(idx + 1) % items.length];
+            } else {
+              next = items[(idx - 1 + items.length) % items.length];
+            }
+            next.focus();
+          } else if (e.key === 'Home') {
+            e.preventDefault();
+            const items = this.#getItems();
+            if (items.length) items[0].focus();
+          } else if (e.key === 'End') {
+            e.preventDefault();
+            const items = this.#getItems();
+            if (items.length) items[items.length - 1].focus();
+          }
+        });
+      } // end _isInitialized guard
+      super.connectedCallback();
+    }
+
+    #getGroup() {
+      return this._shadow.querySelector('[data-toggle-group]');
+    }
+
+    #getItems() {
+      return Array.from(
+        this._shadow.querySelectorAll('[data-toggle-item]:not([disabled]):not([aria-disabled="true"])')
+      );
+    }
+
+    #getMode() {
+      const group = this.#getGroup();
+      return group?.getAttribute('data-toggle-mode') || 'single';
+    }
+
+    #getOrientation() {
+      const group = this.#getGroup();
+      return group?.getAttribute('aria-orientation') || 'horizontal';
+    }
+
+    #toggleItem(btn) {
+      const mode = this.#getMode();
+      const value = btn.getAttribute('data-toggle-value') || '';
+      const wasPressed = btn.getAttribute('aria-pressed') === 'true';
+
+      let pressed;
+      if (mode === 'single') {
+        // Single: press this one, depress all others
+        // (no deselection — matches radio button behavior)
+        pressed = [value];
+      } else {
+        // Multiple: toggle independently, collect all pressed values
+        pressed = this.#getPressedValues();
+        if (wasPressed) {
+          pressed = pressed.filter(v => v !== value);
+        } else {
+          pressed.push(value);
+        }
+      }
+
+      // Mutate shadow DOM directly for instant visual feedback + indicator animation
+      this._shadow.querySelectorAll('[data-toggle-item]').forEach(b => {
+        const isPressed = pressed.includes(b.getAttribute('data-toggle-value') || '');
+        b.setAttribute('aria-pressed', String(isPressed));
+        b.setAttribute('data-pressed', String(isPressed));
+      });
+
+      if (mode === 'single') {
+        this.#positionIndicator(btn);
+      }
+
+      // Sync host prop — single source of truth for WASM re-renders.
+      // Uses direct _props mutation (not _setProp) to avoid triggering a
+      // re-render that would destroy DOM state and kill indicator animation.
+      // External attribute changes still trigger WASM re-render via
+      // attributeChangedCallback, keeping the two in sync.
+      this._props.value = pressed.join(',');
+
+      this._emit('cx-change', { pressed });
+    }
+
+    #getPressedValues() {
+      return Array.from(
+        this._shadow.querySelectorAll('[data-toggle-item][aria-pressed="true"]')
+      ).map(b => b.getAttribute('data-toggle-value') || '');
+    }
+
+    #positionIndicator(activeBtn) {
+      const indicator = this._shadow.querySelector('[data-toggle-indicator]');
+      const group = this.#getGroup();
+      if (!indicator || !group || !activeBtn) return;
+
+      // Position indicator to match the active button's dimensions
+      const groupRect = group.getBoundingClientRect();
+      const btnRect = activeBtn.getBoundingClientRect();
+
+      indicator.style.setProperty('--ind-x', `${btnRect.left - groupRect.left}px`);
+      indicator.style.setProperty('--ind-y', `${btnRect.top - groupRect.top}px`);
+      indicator.style.setProperty('--ind-w', `${btnRect.width}px`);
+      indicator.style.setProperty('--ind-h', `${btnRect.height}px`);
+      indicator.style.opacity = '1';
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        // Position indicator on initial pressed item
+        requestAnimationFrame(() => {
+          const pressed = this._shadow.querySelector(
+            '[data-toggle-item][aria-pressed="true"]'
+          );
+          if (pressed) this.#positionIndicator(pressed);
+        });
+      } catch (e) {
+        console.error('[cx-toggle-group]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-toggle-group', CxToggleGroup);
+  return CxToggleGroup;
+}

package/src/elements/tooltip.d.ts

@@ -0,0 +1,18 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/tooltip.rs
+
+export interface CxTooltipAttributes {
+    id?: string;
+    content?: string;
+    triggerHtml?: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    arrow?: boolean;
+    openDelay?: number;
+    closeDelay?: number;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-tooltip': HTMLElement & CxTooltipAttributes;
+  }
+}

package/src/elements/tooltip.js

@@ -0,0 +1,64 @@
+// Custom behavior for <cx-tooltip> — connects shadow DOM tooltip wrapper
+// to the shared floating tooltip on document.body.
+//
+// The tooltip behavior module (static/_behaviors/tooltip.js) creates a single
+// shared tooltip element on document.body. This Custom Element wires up the
+// shadow DOM trigger to that system, ensuring the tooltip escapes scroll
+// container clipping (position: fixed on body, not absolute in shadow DOM).
+//
+// The Rust component renders:
+//   <div data-tooltip-wrapper> — positioning anchor
+//     <slot name="trigger"> — the trigger element
+//     <div role="tooltip"> — CSS-only fallback content (hidden when JS loads)
+//
+// Source: crates/wasm-api/src/tooltip.rs
+
+export function defineCxTooltip(wasmFn, baseClass) {
+  class CxTooltip extends baseClass {
+    static observedAttributes = ['id', 'content', 'trigger-html', 'position', 'arrow', 'open-delay', 'close-delay'];
+    static _booleanAttrs = new Set(['arrow']);
+    static _numericAttrs = new Set(['open-delay', 'close-delay']);
+    static _hostDisplay = 'inline-flex';
+
+  set open_delay(v) { this._setProp('open_delay', v); }
+  get open_delay() { return this._props.open_delay; }
+
+  set close_delay(v) { this._setProp('close_delay', v); }
+  get close_delay() { return this._props.close_delay; }
+
+    connectedCallback() {
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        this._props.slotted = true;
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        // Connect shadow DOM tooltip wrapper to the shared floating tooltip
+        // on document.body. The behavior module's init() attaches pointerenter/
+        // pointerleave listeners that show a single shared tooltip element,
+        // positioned via getBoundingClientRect (viewport coordinates, escapes
+        // all scroll containers).
+        //
+        // innerHTML replacement destroys the old wrapper — each render needs
+        // fresh listener attachment (old listeners are GC'd with old DOM).
+        const wrapper = this._shadow.querySelector('[data-tooltip-wrapper]');
+        if (wrapper && typeof __cx !== 'undefined' && __cx._behaviors?.tooltip?.init) {
+          __cx._behaviors.tooltip.init(wrapper);
+          // Hide the CSS-only inline tooltip — the floating one on body takes over.
+          // This prevents the clipped inline tooltip from appearing alongside the
+          // correctly-positioned floating one.
+          const inlineTip = wrapper.querySelector('[role="tooltip"]');
+          if (inlineTip) inlineTip.style.display = 'none';
+        }
+      } catch (e) {
+        console.error('[cx-tooltip]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-tooltip', CxTooltip);
+  return CxTooltip;
+}