From a1e390468f67759fdc0634ecc3c17cb52cbda5c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Djalma=20Ara=C3=BAjo?= <djalma@nossomos.cc>
Date: Tue, 23 Jun 2026 15:07:38 -0300
Subject: [PATCH 1/4] =?UTF-8?q?[Feature]=20Remove=20Popper.js=20=E2=80=94?=
 =?UTF-8?q?=20port=20hover=5Fcard=20&=20context=5Fmenu=20to=20Floating=20U?=
 =?UTF-8?q?I=20(#158)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

tippy.js (which bundles @popperjs/core) was the last dependency pulling
Popper into RubyUI and breaking importmap installs. The other nine
components already use @floating-ui/dom; this ports the final two.

Gem:
- Rewrite hover_card & context_menu Stimulus controllers on @floating-ui/dom
  (computePosition + autoUpdate, flip/shift/offset), dropping tippy.
- Content components now render a real hidden, absolutely-positioned div
  instead of a cloned <template> (Floating UI positions a live element).
- dependencies.yml: hover_card/context_menu -> @floating-ui/dom.
- javascript_utils.rb: drop pin_tippy_js (tippy + @popperjs/core CDN pins).
- package.json: drop tippy.js.

Docs:
- Sync both controllers, drop tippy.js from package.json + lockfile,
  remove the tippy/popper importmap install snippet.

Tests:
- Assert content renders a hidden positioned div, not a <template>.
---
 .../component_setup/manual_steps.rb           |   8 +-
 .../ruby_ui/context_menu_controller.js        | 156 +++++++--------
 .../ruby_ui/hover_card_controller.js          | 180 ++++++++++--------
 docs/package.json                             |   1 -
 docs/pnpm-lock.yaml                           |  15 --
 gem/lib/generators/ruby_ui/dependencies.yml   |   4 +-
 .../generators/ruby_ui/javascript_utils.rb    |  13 --
 .../context_menu/context_menu_content.rb      |   9 +-
 .../context_menu/context_menu_controller.js   | 156 +++++++--------
 .../ruby_ui/hover_card/hover_card_content.rb  |   9 +-
 .../hover_card/hover_card_controller.js       | 180 ++++++++++--------
 gem/package.json                              |   3 +-
 gem/test/ruby_ui/context_menu_test.rb         |  15 ++
 gem/test/ruby_ui/hover_card_test.rb           |  13 ++
 14 files changed, 410 insertions(+), 352 deletions(-)

diff --git a/docs/app/components/component_setup/manual_steps.rb b/docs/app/components/component_setup/manual_steps.rb
index 0019100de..80835718f 100644
--- a/docs/app/components/component_setup/manual_steps.rb
+++ b/docs/app/components/component_setup/manual_steps.rb
@@ -174,7 +174,7 @@ def component_dependencies_steps(steps)
       end
 
       # Temporary solution while we don't remove
-      # motion adn tippy.js dependencies
+      # the motion dependency
       def pin_importmap_instructions(js_package)
         case js_package
         when "motion"
@@ -182,12 +182,6 @@ def pin_importmap_instructions(js_package)
             // Add to your config/importmap.rb
             pin "motion", to: "https://cdn.jsdelivr.net/npm/motion@10.18.0/+esm"
           CODE
-        when "tippy.js"
-          <<~CODE
-            // Add to your config/importmap.rb
-            pin "tippy.js", to: "https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/+esm"
-            pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/+esm"\n
-          CODE
         else
           "bin/importmap pin #{js_package}"
         end
diff --git a/docs/app/javascript/controllers/ruby_ui/context_menu_controller.js b/docs/app/javascript/controllers/ruby_ui/context_menu_controller.js
index 235105709..9b978cfcd 100644
--- a/docs/app/javascript/controllers/ruby_ui/context_menu_controller.js
+++ b/docs/app/javascript/controllers/ruby_ui/context_menu_controller.js
@@ -1,106 +1,119 @@
 import { Controller } from "@hotwired/stimulus";
-import tippy from "tippy.js";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from "@floating-ui/dom";
 
 export default class extends Controller {
   static targets = ["trigger", "content", "menuItem"];
   static values = {
-    options: {
-      type: Object,
-      default: {},
-    },
-    // make content width of the trigger element (true/false)
-    matchWidth: {
-      type: Boolean,
-      default: false,
-    }
-  }
+    open: { type: Boolean, default: false },
+    options: { type: Object, default: {} },
+    // make content width match the trigger element (true/false)
+    matchWidth: { type: Boolean, default: false },
+  };
 
   connect() {
-    this.boundHandleKeydown = this.handleKeydown.bind(this); // Bind the function so we can remove it later
-    this.initializeTippy();
+    this.cleanup = null;
     this.selectedIndex = -1;
+    this.boundHandleKeydown = this.handleKeydown.bind(this);
   }
 
   disconnect() {
-    this.destroyTippy();
+    this.hide();
   }
 
-  initializeTippy() {
-    const defaultOptions = {
-      content: this.contentTarget.innerHTML,
-      allowHTML: true,
-      interactive: true,
-      onShow: (instance) => {
-        this.matchWidthValue && this.setContentWidth(instance); // ensure content width matches trigger width
-        this.addEventListeners();
-      },
-      onHide: () => {
-        this.removeEventListeners();
-        this.deselectAll();
-      },
-      popperOptions: {
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, 4]
-            },
-          },
-        ],
-      }
-    };
-
-    const mergedOptions = { ...this.optionsValue, ...defaultOptions };
-    this.tippy = tippy(this.triggerTarget, mergedOptions);
+  handleContextMenu(event) {
+    event.preventDefault();
+    this.open();
   }
 
-  destroyTippy() {
-    if (this.tippy) {
-      this.tippy.destroy();
+  open() {
+    this.openValue = true;
+    this.contentTarget.classList.remove("hidden");
+    if (this.matchWidthValue) {
+      this.contentTarget.style.width = `${this.triggerTarget.offsetWidth}px`;
     }
+    this.addEventListeners();
+    this.updatePosition();
   }
 
-  setContentWidth(instance) {
-    // box-sizing: border-box
-    const content = instance.popper.querySelector('.tippy-content');
-    if (content) {
-      content.style.width = `${instance.reference.offsetWidth}px`;
+  close() {
+    this.hide();
+  }
+
+  hide() {
+    if (!this.openValue) return;
+    this.openValue = false;
+    this.contentTarget.classList.add("hidden");
+    this.removeEventListeners();
+    this.deselectAll();
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = null;
     }
   }
 
-  handleContextMenu(event) {
-    event.preventDefault();
-    this.open();
+  updatePosition() {
+    if (this.cleanup) this.cleanup();
+
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
+      computePosition(this.triggerTarget, this.contentTarget, {
+        placement: this.optionsValue.placement || "bottom-start",
+        middleware: [offset(4), flip(), shift({ padding: 8 })],
+      }).then(({ x, y, placement }) => {
+        Object.assign(this.contentTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+        this.contentTarget.dataset.side = placement.split("-")[0];
+      });
+    });
   }
 
-  open() {
-    this.tippy.show();
+  addEventListeners() {
+    document.addEventListener("keydown", this.boundHandleKeydown);
+    document.addEventListener("click", this.handleOutsideClick);
   }
 
-  close() {
-    this.tippy.hide();
+  removeEventListeners() {
+    document.removeEventListener("keydown", this.boundHandleKeydown);
+    document.removeEventListener("click", this.handleOutsideClick);
   }
 
+  handleOutsideClick = (event) => {
+    if (!this.element.contains(event.target)) {
+      this.hide();
+    }
+  };
+
   handleKeydown(e) {
-    // return if no menu items (one line fix for)
-    if (this.menuItemTargets.length === 0) { return; }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.hide();
+      return;
+    }
 
-    if (e.key === 'ArrowDown') {
+    if (this.menuItemTargets.length === 0) return;
+
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       this.updateSelectedItem(1);
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
       this.updateSelectedItem(-1);
-    } else if (e.key === 'Enter' && this.selectedIndex !== -1) {
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
       e.preventDefault();
       this.menuItemTargets[this.selectedIndex].click();
     }
   }
 
   updateSelectedItem(direction) {
-    // Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
     this.menuItemTargets.forEach((item, index) => {
-      if (item.getAttribute('aria-selected') === 'true') {
+      if (item.getAttribute("aria-selected") === "true") {
         this.selectedIndex = index;
       }
     });
@@ -121,24 +134,17 @@ export default class extends Controller {
   }
 
   toggleAriaSelected(element, isSelected) {
-    // Add or remove attribute
     if (isSelected) {
-      element.setAttribute('aria-selected', 'true');
+      element.setAttribute("aria-selected", "true");
     } else {
-      element.removeAttribute('aria-selected');
+      element.removeAttribute("aria-selected");
     }
   }
 
   deselectAll() {
-    this.menuItemTargets.forEach(item => this.toggleAriaSelected(item, false));
+    this.menuItemTargets.forEach((item) =>
+      this.toggleAriaSelected(item, false)
+    );
     this.selectedIndex = -1;
   }
-
-  addEventListeners() {
-    document.addEventListener('keydown', this.boundHandleKeydown);
-  }
-
-  removeEventListeners() {
-    document.removeEventListener('keydown', this.boundHandleKeydown);
-  }
 }
diff --git a/docs/app/javascript/controllers/ruby_ui/hover_card_controller.js b/docs/app/javascript/controllers/ruby_ui/hover_card_controller.js
index 235105709..1d00ee8ef 100644
--- a/docs/app/javascript/controllers/ruby_ui/hover_card_controller.js
+++ b/docs/app/javascript/controllers/ruby_ui/hover_card_controller.js
@@ -1,106 +1,141 @@
 import { Controller } from "@hotwired/stimulus";
-import tippy from "tippy.js";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from "@floating-ui/dom";
 
 export default class extends Controller {
   static targets = ["trigger", "content", "menuItem"];
   static values = {
-    options: {
-      type: Object,
-      default: {},
-    },
-    // make content width of the trigger element (true/false)
-    matchWidth: {
-      type: Boolean,
-      default: false,
-    }
-  }
+    open: { type: Boolean, default: false },
+    options: { type: Object, default: {} },
+    // make content width match the trigger element (true/false)
+    matchWidth: { type: Boolean, default: false },
+  };
 
   connect() {
-    this.boundHandleKeydown = this.handleKeydown.bind(this); // Bind the function so we can remove it later
-    this.initializeTippy();
+    this.openDelay = this.delayAt(0, 500);
+    this.closeDelay = this.delayAt(1, 250);
+    this.openTimeout = null;
+    this.closeTimeout = null;
+    this.cleanup = null;
     this.selectedIndex = -1;
+    this.boundHandleKeydown = this.handleKeydown.bind(this);
+    this.addEventListeners();
   }
 
   disconnect() {
-    this.destroyTippy();
+    this.removeEventListeners();
+    this.clearTimers();
+    document.removeEventListener("keydown", this.boundHandleKeydown);
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = null;
+    }
   }
 
-  initializeTippy() {
-    const defaultOptions = {
-      content: this.contentTarget.innerHTML,
-      allowHTML: true,
-      interactive: true,
-      onShow: (instance) => {
-        this.matchWidthValue && this.setContentWidth(instance); // ensure content width matches trigger width
-        this.addEventListeners();
-      },
-      onHide: () => {
-        this.removeEventListeners();
-        this.deselectAll();
-      },
-      popperOptions: {
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, 4]
-            },
-          },
-        ],
-      }
-    };
+  // Supports the tippy-style `delay` option: a number or a [open, close] tuple.
+  delayAt(index, fallback) {
+    const delay = this.optionsValue.delay;
+    if (Array.isArray(delay)) return delay[index] ?? fallback;
+    if (typeof delay === "number") return delay;
+    return fallback;
+  }
 
-    const mergedOptions = { ...this.optionsValue, ...defaultOptions };
-    this.tippy = tippy(this.triggerTarget, mergedOptions);
+  addEventListeners() {
+    this.triggerTarget.addEventListener("mouseenter", this.handleMouseEnter);
+    this.triggerTarget.addEventListener("mouseleave", this.handleMouseLeave);
+    this.triggerTarget.addEventListener("focusin", this.handleMouseEnter);
+    this.triggerTarget.addEventListener("focusout", this.handleMouseLeave);
+    this.contentTarget.addEventListener("mouseenter", this.handleMouseEnter);
+    this.contentTarget.addEventListener("mouseleave", this.handleMouseLeave);
   }
 
-  destroyTippy() {
-    if (this.tippy) {
-      this.tippy.destroy();
-    }
+  removeEventListeners() {
+    this.triggerTarget.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.triggerTarget.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.triggerTarget.removeEventListener("focusin", this.handleMouseEnter);
+    this.triggerTarget.removeEventListener("focusout", this.handleMouseLeave);
+    this.contentTarget.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.contentTarget.removeEventListener("mouseleave", this.handleMouseLeave);
   }
 
-  setContentWidth(instance) {
-    // box-sizing: border-box
-    const content = instance.popper.querySelector('.tippy-content');
-    if (content) {
-      content.style.width = `${instance.reference.offsetWidth}px`;
-    }
+  handleMouseEnter = () => {
+    this.clearTimers();
+    this.openTimeout = setTimeout(() => this.show(), this.openDelay);
+  };
+
+  handleMouseLeave = () => {
+    this.clearTimers();
+    this.closeTimeout = setTimeout(() => this.hide(), this.closeDelay);
+  };
+
+  clearTimers() {
+    clearTimeout(this.openTimeout);
+    clearTimeout(this.closeTimeout);
   }
 
-  handleContextMenu(event) {
-    event.preventDefault();
-    this.open();
+  show() {
+    this.openValue = true;
+    this.contentTarget.classList.remove("hidden");
+    if (this.matchWidthValue) {
+      this.contentTarget.style.width = `${this.triggerTarget.offsetWidth}px`;
+    }
+    document.addEventListener("keydown", this.boundHandleKeydown);
+    this.updatePosition();
   }
 
-  open() {
-    this.tippy.show();
+  hide() {
+    this.openValue = false;
+    this.contentTarget.classList.add("hidden");
+    document.removeEventListener("keydown", this.boundHandleKeydown);
+    this.deselectAll();
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = null;
+    }
   }
 
-  close() {
-    this.tippy.hide();
+  updatePosition() {
+    if (this.cleanup) this.cleanup();
+
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
+      computePosition(this.triggerTarget, this.contentTarget, {
+        placement: this.optionsValue.placement || "bottom",
+        middleware: [offset(4), flip(), shift({ padding: 8 })],
+      }).then(({ x, y, placement }) => {
+        Object.assign(this.contentTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+        this.contentTarget.dataset.side = placement.split("-")[0];
+      });
+    });
   }
 
   handleKeydown(e) {
-    // return if no menu items (one line fix for)
-    if (this.menuItemTargets.length === 0) { return; }
+    if (this.menuItemTargets.length === 0) return;
 
-    if (e.key === 'ArrowDown') {
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       this.updateSelectedItem(1);
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
       this.updateSelectedItem(-1);
-    } else if (e.key === 'Enter' && this.selectedIndex !== -1) {
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
       e.preventDefault();
       this.menuItemTargets[this.selectedIndex].click();
+    } else if (e.key === "Escape") {
+      this.hide();
     }
   }
 
   updateSelectedItem(direction) {
-    // Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
     this.menuItemTargets.forEach((item, index) => {
-      if (item.getAttribute('aria-selected') === 'true') {
+      if (item.getAttribute("aria-selected") === "true") {
         this.selectedIndex = index;
       }
     });
@@ -121,24 +156,17 @@ export default class extends Controller {
   }
 
   toggleAriaSelected(element, isSelected) {
-    // Add or remove attribute
     if (isSelected) {
-      element.setAttribute('aria-selected', 'true');
+      element.setAttribute("aria-selected", "true");
     } else {
-      element.removeAttribute('aria-selected');
+      element.removeAttribute("aria-selected");
     }
   }
 
   deselectAll() {
-    this.menuItemTargets.forEach(item => this.toggleAriaSelected(item, false));
+    this.menuItemTargets.forEach((item) =>
+      this.toggleAriaSelected(item, false)
+    );
     this.selectedIndex = -1;
   }
-
-  addEventListeners() {
-    document.addEventListener('keydown', this.boundHandleKeydown);
-  }
-
-  removeEventListeners() {
-    document.removeEventListener('keydown', this.boundHandleKeydown);
-  }
 }
diff --git a/docs/package.json b/docs/package.json
index 94f9cb969..572c8b565 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -18,7 +18,6 @@
     "motion": "12.40.0",
     "mustache": "4.2.0",
     "tailwindcss": "4.3.1",
-    "tippy.js": "6.3.7",
     "tw-animate-css": "1.4.0"
   },
   "scripts": {
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index aece364e1..401cadad5 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -56,9 +56,6 @@ importers:
       tailwindcss:
         specifier: 4.3.1
         version: 4.3.1
-      tippy.js:
-        specifier: 6.3.7
-        version: 6.3.7
       tw-animate-css:
         specifier: 1.4.0
         version: 1.4.0
@@ -243,9 +240,6 @@ packages:
   '@kurkle/color@0.3.4':
     resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==}
 
-  '@popperjs/core@2.11.8':
-    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
-
   '@rails/actioncable@8.1.200':
     resolution: {integrity: sha512-on0DSb7AFUkq1ocxivDNQhhGW/RQpY91zvRVyyaEWP4gOOZWy33P/UyxjQk74IENWNrTqs8+zOGHwTjiiFruRw==}
 
@@ -391,9 +385,6 @@ packages:
   tailwindcss@4.3.1:
     resolution: {integrity: sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==}
 
-  tippy.js@6.3.7:
-    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
-
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -511,8 +502,6 @@ snapshots:
 
   '@kurkle/color@0.3.4': {}
 
-  '@popperjs/core@2.11.8': {}
-
   '@rails/actioncable@8.1.200': {}
 
   '@tailwindcss/forms@0.5.11(tailwindcss@4.3.1)':
@@ -643,10 +632,6 @@ snapshots:
 
   tailwindcss@4.3.1: {}
 
-  tippy.js@6.3.7:
-    dependencies:
-      '@popperjs/core': 2.11.8
-
   tslib@2.8.1: {}
 
   tw-animate-css@1.4.0: {}
diff --git a/gem/lib/generators/ruby_ui/dependencies.yml b/gem/lib/generators/ruby_ui/dependencies.yml
index 710b34b2b..3d774b009 100644
--- a/gem/lib/generators/ruby_ui/dependencies.yml
+++ b/gem/lib/generators/ruby_ui/dependencies.yml
@@ -40,7 +40,7 @@ command:
 
 context_menu:
   js_packages:
-    - "tippy.js"
+    - "@floating-ui/dom"
 
 date_picker:
   components:
@@ -64,7 +64,7 @@ dropdown_menu:
 
 hover_card:
   js_packages:
-    - "tippy.js"
+    - "@floating-ui/dom"
 
 masked_input:
   components:
diff --git a/gem/lib/generators/ruby_ui/javascript_utils.rb b/gem/lib/generators/ruby_ui/javascript_utils.rb
index 62a08b5d6..0e1e6b998 100644
--- a/gem/lib/generators/ruby_ui/javascript_utils.rb
+++ b/gem/lib/generators/ruby_ui/javascript_utils.rb
@@ -25,8 +25,6 @@ def pin_with_importmap(package)
           pin_motion
         when "tw-animate-css"
           pin_tw_animate_css
-        when "tippy.js"
-          pin_tippy_js
         else
           run "bin/importmap pin #{package}"
         end
@@ -65,17 +63,6 @@ def pin_motion
         RUBY
       end
 
-      def pin_tippy_js
-        say <<~TEXT
-          WARNING: Installing tippy.js from CDN because `bin/importmap pin tippy.js` doesn't download the correct file.
-        TEXT
-
-        inject_into_file rails_root.join("config/importmap.rb"), <<~RUBY
-          pin "tippy.js", to: "https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/+esm"
-          pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/+esm"\n
-        RUBY
-      end
-
       def rails_root = Rails.root
     end
   end
diff --git a/gem/lib/ruby_ui/context_menu/context_menu_content.rb b/gem/lib/ruby_ui/context_menu/context_menu_content.rb
index 4e5a948f6..94f457f98 100644
--- a/gem/lib/ruby_ui/context_menu/context_menu_content.rb
+++ b/gem/lib/ruby_ui/context_menu/context_menu_content.rb
@@ -2,10 +2,8 @@
 
 module RubyUI
   class ContextMenuContent < Base
-    def view_template(&block)
-      template(data: {ruby_ui__context_menu_target: "content"}) do
-        div(**attrs, &block)
-      end
+    def view_template(&)
+      div(**attrs, &)
     end
 
     private
@@ -15,8 +13,9 @@ def default_attrs
         role: "menu",
         aria_orientation: "vertical",
         data_state: "open",
+        data: {ruby_ui__context_menu_target: "content"},
         class:
-              "z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+              "hidden absolute z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         tabindex: "-1",
         data_orientation: "vertical"
       }
diff --git a/gem/lib/ruby_ui/context_menu/context_menu_controller.js b/gem/lib/ruby_ui/context_menu/context_menu_controller.js
index 235105709..9b978cfcd 100644
--- a/gem/lib/ruby_ui/context_menu/context_menu_controller.js
+++ b/gem/lib/ruby_ui/context_menu/context_menu_controller.js
@@ -1,106 +1,119 @@
 import { Controller } from "@hotwired/stimulus";
-import tippy from "tippy.js";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from "@floating-ui/dom";
 
 export default class extends Controller {
   static targets = ["trigger", "content", "menuItem"];
   static values = {
-    options: {
-      type: Object,
-      default: {},
-    },
-    // make content width of the trigger element (true/false)
-    matchWidth: {
-      type: Boolean,
-      default: false,
-    }
-  }
+    open: { type: Boolean, default: false },
+    options: { type: Object, default: {} },
+    // make content width match the trigger element (true/false)
+    matchWidth: { type: Boolean, default: false },
+  };
 
   connect() {
-    this.boundHandleKeydown = this.handleKeydown.bind(this); // Bind the function so we can remove it later
-    this.initializeTippy();
+    this.cleanup = null;
     this.selectedIndex = -1;
+    this.boundHandleKeydown = this.handleKeydown.bind(this);
   }
 
   disconnect() {
-    this.destroyTippy();
+    this.hide();
   }
 
-  initializeTippy() {
-    const defaultOptions = {
-      content: this.contentTarget.innerHTML,
-      allowHTML: true,
-      interactive: true,
-      onShow: (instance) => {
-        this.matchWidthValue && this.setContentWidth(instance); // ensure content width matches trigger width
-        this.addEventListeners();
-      },
-      onHide: () => {
-        this.removeEventListeners();
-        this.deselectAll();
-      },
-      popperOptions: {
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, 4]
-            },
-          },
-        ],
-      }
-    };
-
-    const mergedOptions = { ...this.optionsValue, ...defaultOptions };
-    this.tippy = tippy(this.triggerTarget, mergedOptions);
+  handleContextMenu(event) {
+    event.preventDefault();
+    this.open();
   }
 
-  destroyTippy() {
-    if (this.tippy) {
-      this.tippy.destroy();
+  open() {
+    this.openValue = true;
+    this.contentTarget.classList.remove("hidden");
+    if (this.matchWidthValue) {
+      this.contentTarget.style.width = `${this.triggerTarget.offsetWidth}px`;
     }
+    this.addEventListeners();
+    this.updatePosition();
   }
 
-  setContentWidth(instance) {
-    // box-sizing: border-box
-    const content = instance.popper.querySelector('.tippy-content');
-    if (content) {
-      content.style.width = `${instance.reference.offsetWidth}px`;
+  close() {
+    this.hide();
+  }
+
+  hide() {
+    if (!this.openValue) return;
+    this.openValue = false;
+    this.contentTarget.classList.add("hidden");
+    this.removeEventListeners();
+    this.deselectAll();
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = null;
     }
   }
 
-  handleContextMenu(event) {
-    event.preventDefault();
-    this.open();
+  updatePosition() {
+    if (this.cleanup) this.cleanup();
+
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
+      computePosition(this.triggerTarget, this.contentTarget, {
+        placement: this.optionsValue.placement || "bottom-start",
+        middleware: [offset(4), flip(), shift({ padding: 8 })],
+      }).then(({ x, y, placement }) => {
+        Object.assign(this.contentTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+        this.contentTarget.dataset.side = placement.split("-")[0];
+      });
+    });
   }
 
-  open() {
-    this.tippy.show();
+  addEventListeners() {
+    document.addEventListener("keydown", this.boundHandleKeydown);
+    document.addEventListener("click", this.handleOutsideClick);
   }
 
-  close() {
-    this.tippy.hide();
+  removeEventListeners() {
+    document.removeEventListener("keydown", this.boundHandleKeydown);
+    document.removeEventListener("click", this.handleOutsideClick);
   }
 
+  handleOutsideClick = (event) => {
+    if (!this.element.contains(event.target)) {
+      this.hide();
+    }
+  };
+
   handleKeydown(e) {
-    // return if no menu items (one line fix for)
-    if (this.menuItemTargets.length === 0) { return; }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.hide();
+      return;
+    }
 
-    if (e.key === 'ArrowDown') {
+    if (this.menuItemTargets.length === 0) return;
+
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       this.updateSelectedItem(1);
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
       this.updateSelectedItem(-1);
-    } else if (e.key === 'Enter' && this.selectedIndex !== -1) {
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
       e.preventDefault();
       this.menuItemTargets[this.selectedIndex].click();
     }
   }
 
   updateSelectedItem(direction) {
-    // Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
     this.menuItemTargets.forEach((item, index) => {
-      if (item.getAttribute('aria-selected') === 'true') {
+      if (item.getAttribute("aria-selected") === "true") {
         this.selectedIndex = index;
       }
     });
@@ -121,24 +134,17 @@ export default class extends Controller {
   }
 
   toggleAriaSelected(element, isSelected) {
-    // Add or remove attribute
     if (isSelected) {
-      element.setAttribute('aria-selected', 'true');
+      element.setAttribute("aria-selected", "true");
     } else {
-      element.removeAttribute('aria-selected');
+      element.removeAttribute("aria-selected");
     }
   }
 
   deselectAll() {
-    this.menuItemTargets.forEach(item => this.toggleAriaSelected(item, false));
+    this.menuItemTargets.forEach((item) =>
+      this.toggleAriaSelected(item, false)
+    );
     this.selectedIndex = -1;
   }
-
-  addEventListeners() {
-    document.addEventListener('keydown', this.boundHandleKeydown);
-  }
-
-  removeEventListeners() {
-    document.removeEventListener('keydown', this.boundHandleKeydown);
-  }
 }
diff --git a/gem/lib/ruby_ui/hover_card/hover_card_content.rb b/gem/lib/ruby_ui/hover_card/hover_card_content.rb
index 5358d2b4c..d22e1a787 100644
--- a/gem/lib/ruby_ui/hover_card/hover_card_content.rb
+++ b/gem/lib/ruby_ui/hover_card/hover_card_content.rb
@@ -2,10 +2,8 @@
 
 module RubyUI
   class HoverCardContent < Base
-    def view_template(&block)
-      template(data: {ruby_ui__hover_card_target: "content"}) do
-        div(**attrs, &block)
-      end
+    def view_template(&)
+      div(**attrs, &)
     end
 
     private
@@ -13,9 +11,10 @@ def view_template(&block)
     def default_attrs
       {
         data: {
+          ruby_ui__hover_card_target: "content",
           state: :open
         },
-        class: "z-50 rounded-md border bg-background p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        class: "hidden absolute z-50 rounded-md border bg-background p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
       }
     end
   end
diff --git a/gem/lib/ruby_ui/hover_card/hover_card_controller.js b/gem/lib/ruby_ui/hover_card/hover_card_controller.js
index 235105709..1d00ee8ef 100644
--- a/gem/lib/ruby_ui/hover_card/hover_card_controller.js
+++ b/gem/lib/ruby_ui/hover_card/hover_card_controller.js
@@ -1,106 +1,141 @@
 import { Controller } from "@hotwired/stimulus";
-import tippy from "tippy.js";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from "@floating-ui/dom";
 
 export default class extends Controller {
   static targets = ["trigger", "content", "menuItem"];
   static values = {
-    options: {
-      type: Object,
-      default: {},
-    },
-    // make content width of the trigger element (true/false)
-    matchWidth: {
-      type: Boolean,
-      default: false,
-    }
-  }
+    open: { type: Boolean, default: false },
+    options: { type: Object, default: {} },
+    // make content width match the trigger element (true/false)
+    matchWidth: { type: Boolean, default: false },
+  };
 
   connect() {
-    this.boundHandleKeydown = this.handleKeydown.bind(this); // Bind the function so we can remove it later
-    this.initializeTippy();
+    this.openDelay = this.delayAt(0, 500);
+    this.closeDelay = this.delayAt(1, 250);
+    this.openTimeout = null;
+    this.closeTimeout = null;
+    this.cleanup = null;
     this.selectedIndex = -1;
+    this.boundHandleKeydown = this.handleKeydown.bind(this);
+    this.addEventListeners();
   }
 
   disconnect() {
-    this.destroyTippy();
+    this.removeEventListeners();
+    this.clearTimers();
+    document.removeEventListener("keydown", this.boundHandleKeydown);
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = null;
+    }
   }
 
-  initializeTippy() {
-    const defaultOptions = {
-      content: this.contentTarget.innerHTML,
-      allowHTML: true,
-      interactive: true,
-      onShow: (instance) => {
-        this.matchWidthValue && this.setContentWidth(instance); // ensure content width matches trigger width
-        this.addEventListeners();
-      },
-      onHide: () => {
-        this.removeEventListeners();
-        this.deselectAll();
-      },
-      popperOptions: {
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, 4]
-            },
-          },
-        ],
-      }
-    };
+  // Supports the tippy-style `delay` option: a number or a [open, close] tuple.
+  delayAt(index, fallback) {
+    const delay = this.optionsValue.delay;
+    if (Array.isArray(delay)) return delay[index] ?? fallback;
+    if (typeof delay === "number") return delay;
+    return fallback;
+  }
 
-    const mergedOptions = { ...this.optionsValue, ...defaultOptions };
-    this.tippy = tippy(this.triggerTarget, mergedOptions);
+  addEventListeners() {
+    this.triggerTarget.addEventListener("mouseenter", this.handleMouseEnter);
+    this.triggerTarget.addEventListener("mouseleave", this.handleMouseLeave);
+    this.triggerTarget.addEventListener("focusin", this.handleMouseEnter);
+    this.triggerTarget.addEventListener("focusout", this.handleMouseLeave);
+    this.contentTarget.addEventListener("mouseenter", this.handleMouseEnter);
+    this.contentTarget.addEventListener("mouseleave", this.handleMouseLeave);
   }
 
-  destroyTippy() {
-    if (this.tippy) {
-      this.tippy.destroy();
-    }
+  removeEventListeners() {
+    this.triggerTarget.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.triggerTarget.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.triggerTarget.removeEventListener("focusin", this.handleMouseEnter);
+    this.triggerTarget.removeEventListener("focusout", this.handleMouseLeave);
+    this.contentTarget.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.contentTarget.removeEventListener("mouseleave", this.handleMouseLeave);
   }
 
-  setContentWidth(instance) {
-    // box-sizing: border-box
-    const content = instance.popper.querySelector('.tippy-content');
-    if (content) {
-      content.style.width = `${instance.reference.offsetWidth}px`;
-    }
+  handleMouseEnter = () => {
+    this.clearTimers();
+    this.openTimeout = setTimeout(() => this.show(), this.openDelay);
+  };
+
+  handleMouseLeave = () => {
+    this.clearTimers();
+    this.closeTimeout = setTimeout(() => this.hide(), this.closeDelay);
+  };
+
+  clearTimers() {
+    clearTimeout(this.openTimeout);
+    clearTimeout(this.closeTimeout);
   }
 
-  handleContextMenu(event) {
-    event.preventDefault();
-    this.open();
+  show() {
+    this.openValue = true;
+    this.contentTarget.classList.remove("hidden");
+    if (this.matchWidthValue) {
+      this.contentTarget.style.width = `${this.triggerTarget.offsetWidth}px`;
+    }
+    document.addEventListener("keydown", this.boundHandleKeydown);
+    this.updatePosition();
   }
 
-  open() {
-    this.tippy.show();
+  hide() {
+    this.openValue = false;
+    this.contentTarget.classList.add("hidden");
+    document.removeEventListener("keydown", this.boundHandleKeydown);
+    this.deselectAll();
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = null;
+    }
   }
 
-  close() {
-    this.tippy.hide();
+  updatePosition() {
+    if (this.cleanup) this.cleanup();
+
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
+      computePosition(this.triggerTarget, this.contentTarget, {
+        placement: this.optionsValue.placement || "bottom",
+        middleware: [offset(4), flip(), shift({ padding: 8 })],
+      }).then(({ x, y, placement }) => {
+        Object.assign(this.contentTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+        this.contentTarget.dataset.side = placement.split("-")[0];
+      });
+    });
   }
 
   handleKeydown(e) {
-    // return if no menu items (one line fix for)
-    if (this.menuItemTargets.length === 0) { return; }
+    if (this.menuItemTargets.length === 0) return;
 
-    if (e.key === 'ArrowDown') {
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       this.updateSelectedItem(1);
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
       this.updateSelectedItem(-1);
-    } else if (e.key === 'Enter' && this.selectedIndex !== -1) {
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
       e.preventDefault();
       this.menuItemTargets[this.selectedIndex].click();
+    } else if (e.key === "Escape") {
+      this.hide();
     }
   }
 
   updateSelectedItem(direction) {
-    // Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
     this.menuItemTargets.forEach((item, index) => {
-      if (item.getAttribute('aria-selected') === 'true') {
+      if (item.getAttribute("aria-selected") === "true") {
         this.selectedIndex = index;
       }
     });
@@ -121,24 +156,17 @@ export default class extends Controller {
   }
 
   toggleAriaSelected(element, isSelected) {
-    // Add or remove attribute
     if (isSelected) {
-      element.setAttribute('aria-selected', 'true');
+      element.setAttribute("aria-selected", "true");
     } else {
-      element.removeAttribute('aria-selected');
+      element.removeAttribute("aria-selected");
     }
   }
 
   deselectAll() {
-    this.menuItemTargets.forEach(item => this.toggleAriaSelected(item, false));
+    this.menuItemTargets.forEach((item) =>
+      this.toggleAriaSelected(item, false)
+    );
     this.selectedIndex = -1;
   }
-
-  addEventListeners() {
-    document.addEventListener('keydown', this.boundHandleKeydown);
-  }
-
-  removeEventListeners() {
-    document.removeEventListener('keydown', this.boundHandleKeydown);
-  }
 }
diff --git a/gem/package.json b/gem/package.json
index 1421464fa..b3a99e9cd 100644
--- a/gem/package.json
+++ b/gem/package.json
@@ -31,8 +31,7 @@
     "fuse.js": "^7.0.0",
     "maska": "^3.0.3",
     "motion": "^10.16.4",
-    "mustache": "^4.2.0",
-    "tippy.js": "^6.3.7"
+    "mustache": "^4.2.0"
   },
   "devDependencies": {
     "globals": "^15.8.0"
diff --git a/gem/test/ruby_ui/context_menu_test.rb b/gem/test/ruby_ui/context_menu_test.rb
index 1dc50dabc..6cdefa3aa 100644
--- a/gem/test/ruby_ui/context_menu_test.rb
+++ b/gem/test/ruby_ui/context_menu_test.rb
@@ -26,4 +26,19 @@ def test_render_with_all_items
 
     assert_match(/Right click here/, output)
   end
+
+  # Floating UI positions a real element in the DOM (tippy used to clone a
+  # <template>). Content must render as a hidden, absolutely-positioned div.
+  def test_content_renders_hidden_positioned_div_not_template
+    output = phlex do
+      RubyUI.ContextMenuContent do
+        RubyUI.ContextMenuItem(href: "#") { "Back" }
+      end
+    end
+
+    refute_match(/<template/, output)
+    assert_match(/hidden/, output)
+    assert_match(/absolute/, output)
+    assert_match(/Back/, output)
+  end
 end
diff --git a/gem/test/ruby_ui/hover_card_test.rb b/gem/test/ruby_ui/hover_card_test.rb
index 4a5788201..0d0ebd2c3 100644
--- a/gem/test/ruby_ui/hover_card_test.rb
+++ b/gem/test/ruby_ui/hover_card_test.rb
@@ -22,4 +22,17 @@ def test_render_with_all_items
 
     assert_match(/joeldrapper/, output)
   end
+
+  # Floating UI positions a real element in the DOM (tippy used to clone a
+  # <template>). Content must render as a hidden, absolutely-positioned div.
+  def test_content_renders_hidden_positioned_div_not_template
+    output = phlex do
+      RubyUI.HoverCardContent { "card body" }
+    end
+
+    refute_match(/<template/, output)
+    assert_match(/hidden/, output)
+    assert_match(/absolute/, output)
+    assert_match(/card body/, output)
+  end
 end

From b45398fc62c44b01dcafab5b604dda320ef36f07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Djalma=20Ara=C3=BAjo?= <djalma@nossomos.cc>
Date: Tue, 23 Jun 2026 16:13:40 -0300
Subject: [PATCH 2/4] [Bug Fix] Address review: hover_card/context_menu
 interaction fixes

Fixes from PR review (cubic):
- hover_card: Escape now closes the card. Was gated behind an early
  return for the no-menu-items case, making it unreachable for the
  common hover-card usage.
- hover_card: add focusin/focusout listeners to the content element so
  moving keyboard focus into the card no longer auto-closes it.
- context_menu: dismiss on outside right-click (contextmenu), not just
  left-click, so the native menu can take over instead of leaving a
  stale menu open.
- both: controllers now toggle data-state open/closed in sync with the
  hidden class, keeping semantic state and state-based animation classes
  accurate instead of permanently "open".
---
 .../controllers/ruby_ui/context_menu_controller.js  | 12 +++++++++---
 .../controllers/ruby_ui/hover_card_controller.js    | 13 +++++++++++--
 .../ruby_ui/context_menu/context_menu_controller.js | 12 +++++++++---
 gem/lib/ruby_ui/hover_card/hover_card_controller.js | 13 +++++++++++--
 4 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/docs/app/javascript/controllers/ruby_ui/context_menu_controller.js b/docs/app/javascript/controllers/ruby_ui/context_menu_controller.js
index 9b978cfcd..ebc1f20a4 100644
--- a/docs/app/javascript/controllers/ruby_ui/context_menu_controller.js
+++ b/docs/app/javascript/controllers/ruby_ui/context_menu_controller.js
@@ -34,6 +34,7 @@ export default class extends Controller {
   open() {
     this.openValue = true;
     this.contentTarget.classList.remove("hidden");
+    this.contentTarget.dataset.state = "open";
     if (this.matchWidthValue) {
       this.contentTarget.style.width = `${this.triggerTarget.offsetWidth}px`;
     }
@@ -49,6 +50,7 @@ export default class extends Controller {
     if (!this.openValue) return;
     this.openValue = false;
     this.contentTarget.classList.add("hidden");
+    this.contentTarget.dataset.state = "closed";
     this.removeEventListeners();
     this.deselectAll();
     if (this.cleanup) {
@@ -76,15 +78,19 @@ export default class extends Controller {
 
   addEventListeners() {
     document.addEventListener("keydown", this.boundHandleKeydown);
-    document.addEventListener("click", this.handleOutsideClick);
+    document.addEventListener("click", this.handleOutsidePointer);
+    // A right-click outside should dismiss this menu and let the native
+    // context menu (or another trigger's menu) take over.
+    document.addEventListener("contextmenu", this.handleOutsidePointer);
   }
 
   removeEventListeners() {
     document.removeEventListener("keydown", this.boundHandleKeydown);
-    document.removeEventListener("click", this.handleOutsideClick);
+    document.removeEventListener("click", this.handleOutsidePointer);
+    document.removeEventListener("contextmenu", this.handleOutsidePointer);
   }
 
-  handleOutsideClick = (event) => {
+  handleOutsidePointer = (event) => {
     if (!this.element.contains(event.target)) {
       this.hide();
     }
diff --git a/docs/app/javascript/controllers/ruby_ui/hover_card_controller.js b/docs/app/javascript/controllers/ruby_ui/hover_card_controller.js
index 1d00ee8ef..955117f08 100644
--- a/docs/app/javascript/controllers/ruby_ui/hover_card_controller.js
+++ b/docs/app/javascript/controllers/ruby_ui/hover_card_controller.js
@@ -52,6 +52,8 @@ export default class extends Controller {
     this.triggerTarget.addEventListener("focusout", this.handleMouseLeave);
     this.contentTarget.addEventListener("mouseenter", this.handleMouseEnter);
     this.contentTarget.addEventListener("mouseleave", this.handleMouseLeave);
+    this.contentTarget.addEventListener("focusin", this.handleMouseEnter);
+    this.contentTarget.addEventListener("focusout", this.handleMouseLeave);
   }
 
   removeEventListeners() {
@@ -61,6 +63,8 @@ export default class extends Controller {
     this.triggerTarget.removeEventListener("focusout", this.handleMouseLeave);
     this.contentTarget.removeEventListener("mouseenter", this.handleMouseEnter);
     this.contentTarget.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.contentTarget.removeEventListener("focusin", this.handleMouseEnter);
+    this.contentTarget.removeEventListener("focusout", this.handleMouseLeave);
   }
 
   handleMouseEnter = () => {
@@ -81,6 +85,7 @@ export default class extends Controller {
   show() {
     this.openValue = true;
     this.contentTarget.classList.remove("hidden");
+    this.contentTarget.dataset.state = "open";
     if (this.matchWidthValue) {
       this.contentTarget.style.width = `${this.triggerTarget.offsetWidth}px`;
     }
@@ -91,6 +96,7 @@ export default class extends Controller {
   hide() {
     this.openValue = false;
     this.contentTarget.classList.add("hidden");
+    this.contentTarget.dataset.state = "closed";
     document.removeEventListener("keydown", this.boundHandleKeydown);
     this.deselectAll();
     if (this.cleanup) {
@@ -117,6 +123,11 @@ export default class extends Controller {
   }
 
   handleKeydown(e) {
+    if (e.key === "Escape") {
+      this.hide();
+      return;
+    }
+
     if (this.menuItemTargets.length === 0) return;
 
     if (e.key === "ArrowDown") {
@@ -128,8 +139,6 @@ export default class extends Controller {
     } else if (e.key === "Enter" && this.selectedIndex !== -1) {
       e.preventDefault();
       this.menuItemTargets[this.selectedIndex].click();
-    } else if (e.key === "Escape") {
-      this.hide();
     }
   }
 
diff --git a/gem/lib/ruby_ui/context_menu/context_menu_controller.js b/gem/lib/ruby_ui/context_menu/context_menu_controller.js
index 9b978cfcd..ebc1f20a4 100644
--- a/gem/lib/ruby_ui/context_menu/context_menu_controller.js
+++ b/gem/lib/ruby_ui/context_menu/context_menu_controller.js
@@ -34,6 +34,7 @@ export default class extends Controller {
   open() {
     this.openValue = true;
     this.contentTarget.classList.remove("hidden");
+    this.contentTarget.dataset.state = "open";
     if (this.matchWidthValue) {
       this.contentTarget.style.width = `${this.triggerTarget.offsetWidth}px`;
     }
@@ -49,6 +50,7 @@ export default class extends Controller {
     if (!this.openValue) return;
     this.openValue = false;
     this.contentTarget.classList.add("hidden");
+    this.contentTarget.dataset.state = "closed";
     this.removeEventListeners();
     this.deselectAll();
     if (this.cleanup) {
@@ -76,15 +78,19 @@ export default class extends Controller {
 
   addEventListeners() {
     document.addEventListener("keydown", this.boundHandleKeydown);
-    document.addEventListener("click", this.handleOutsideClick);
+    document.addEventListener("click", this.handleOutsidePointer);
+    // A right-click outside should dismiss this menu and let the native
+    // context menu (or another trigger's menu) take over.
+    document.addEventListener("contextmenu", this.handleOutsidePointer);
   }
 
   removeEventListeners() {
     document.removeEventListener("keydown", this.boundHandleKeydown);
-    document.removeEventListener("click", this.handleOutsideClick);
+    document.removeEventListener("click", this.handleOutsidePointer);
+    document.removeEventListener("contextmenu", this.handleOutsidePointer);
   }
 
-  handleOutsideClick = (event) => {
+  handleOutsidePointer = (event) => {
     if (!this.element.contains(event.target)) {
       this.hide();
     }
diff --git a/gem/lib/ruby_ui/hover_card/hover_card_controller.js b/gem/lib/ruby_ui/hover_card/hover_card_controller.js
index 1d00ee8ef..955117f08 100644
--- a/gem/lib/ruby_ui/hover_card/hover_card_controller.js
+++ b/gem/lib/ruby_ui/hover_card/hover_card_controller.js
@@ -52,6 +52,8 @@ export default class extends Controller {
     this.triggerTarget.addEventListener("focusout", this.handleMouseLeave);
     this.contentTarget.addEventListener("mouseenter", this.handleMouseEnter);
     this.contentTarget.addEventListener("mouseleave", this.handleMouseLeave);
+    this.contentTarget.addEventListener("focusin", this.handleMouseEnter);
+    this.contentTarget.addEventListener("focusout", this.handleMouseLeave);
   }
 
   removeEventListeners() {
@@ -61,6 +63,8 @@ export default class extends Controller {
     this.triggerTarget.removeEventListener("focusout", this.handleMouseLeave);
     this.contentTarget.removeEventListener("mouseenter", this.handleMouseEnter);
     this.contentTarget.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.contentTarget.removeEventListener("focusin", this.handleMouseEnter);
+    this.contentTarget.removeEventListener("focusout", this.handleMouseLeave);
   }
 
   handleMouseEnter = () => {
@@ -81,6 +85,7 @@ export default class extends Controller {
   show() {
     this.openValue = true;
     this.contentTarget.classList.remove("hidden");
+    this.contentTarget.dataset.state = "open";
     if (this.matchWidthValue) {
       this.contentTarget.style.width = `${this.triggerTarget.offsetWidth}px`;
     }
@@ -91,6 +96,7 @@ export default class extends Controller {
   hide() {
     this.openValue = false;
     this.contentTarget.classList.add("hidden");
+    this.contentTarget.dataset.state = "closed";
     document.removeEventListener("keydown", this.boundHandleKeydown);
     this.deselectAll();
     if (this.cleanup) {
@@ -117,6 +123,11 @@ export default class extends Controller {
   }
 
   handleKeydown(e) {
+    if (e.key === "Escape") {
+      this.hide();
+      return;
+    }
+
     if (this.menuItemTargets.length === 0) return;
 
     if (e.key === "ArrowDown") {
@@ -128,8 +139,6 @@ export default class extends Controller {
     } else if (e.key === "Enter" && this.selectedIndex !== -1) {
       e.preventDefault();
       this.menuItemTargets[this.selectedIndex].click();
-    } else if (e.key === "Escape") {
-      this.hide();
     }
   }
 

From 8b5339a4e3f9b0f760a25fe0676d3d65495a468d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Djalma=20Ara=C3=BAjo?= <djalma@nossomos.cc>
Date: Tue, 23 Jun 2026 16:18:26 -0300
Subject: [PATCH 3/4] [Bug Fix] Rebuild MCP registry.json for Floating UI
 migration

CI 'MCP registry up to date' check rebuilds registry.json from ../gem and
fails on diff. Regenerated so hover_card/context_menu reflect
@floating-ui/dom (not tippy.js) and the updated component sources.
---
 mcp/data/registry.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/mcp/data/registry.json b/mcp/data/registry.json
index 91af6b2be..7def6d0fa 100644
--- a/mcp/data/registry.json
+++ b/mcp/data/registry.json
@@ -1047,11 +1047,11 @@
         },
         {
           "path": "context_menu_content.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class ContextMenuContent < Base\n    def view_template(&block)\n      template(data: {ruby_ui__context_menu_target: \"content\"}) do\n        div(**attrs, &block)\n      end\n    end\n\n    private\n\n    def default_attrs\n      {\n        role: \"menu\",\n        aria_orientation: \"vertical\",\n        data_state: \"open\",\n        class:\n              \"z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        tabindex: \"-1\",\n        data_orientation: \"vertical\"\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class ContextMenuContent < Base\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        role: \"menu\",\n        aria_orientation: \"vertical\",\n        data_state: \"open\",\n        data: {ruby_ui__context_menu_target: \"content\"},\n        class:\n              \"hidden absolute z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        tabindex: \"-1\",\n        data_orientation: \"vertical\"\n      }\n    end\n  end\nend\n"
         },
         {
           "path": "context_menu_controller.js",
-          "content": "import { Controller } from \"@hotwired/stimulus\";\nimport tippy from \"tippy.js\";\n\nexport default class extends Controller {\n  static targets = [\"trigger\", \"content\", \"menuItem\"];\n  static values = {\n    options: {\n      type: Object,\n      default: {},\n    },\n    // make content width of the trigger element (true/false)\n    matchWidth: {\n      type: Boolean,\n      default: false,\n    }\n  }\n\n  connect() {\n    this.boundHandleKeydown = this.handleKeydown.bind(this); // Bind the function so we can remove it later\n    this.initializeTippy();\n    this.selectedIndex = -1;\n  }\n\n  disconnect() {\n    this.destroyTippy();\n  }\n\n  initializeTippy() {\n    const defaultOptions = {\n      content: this.contentTarget.innerHTML,\n      allowHTML: true,\n      interactive: true,\n      onShow: (instance) => {\n        this.matchWidthValue && this.setContentWidth(instance); // ensure content width matches trigger width\n        this.addEventListeners();\n      },\n      onHide: () => {\n        this.removeEventListeners();\n        this.deselectAll();\n      },\n      popperOptions: {\n        modifiers: [\n          {\n            name: \"offset\",\n            options: {\n              offset: [0, 4]\n            },\n          },\n        ],\n      }\n    };\n\n    const mergedOptions = { ...this.optionsValue, ...defaultOptions };\n    this.tippy = tippy(this.triggerTarget, mergedOptions);\n  }\n\n  destroyTippy() {\n    if (this.tippy) {\n      this.tippy.destroy();\n    }\n  }\n\n  setContentWidth(instance) {\n    // box-sizing: border-box\n    const content = instance.popper.querySelector('.tippy-content');\n    if (content) {\n      content.style.width = `${instance.reference.offsetWidth}px`;\n    }\n  }\n\n  handleContextMenu(event) {\n    event.preventDefault();\n    this.open();\n  }\n\n  open() {\n    this.tippy.show();\n  }\n\n  close() {\n    this.tippy.hide();\n  }\n\n  handleKeydown(e) {\n    // return if no menu items (one line fix for)\n    if (this.menuItemTargets.length === 0) { return; }\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.updateSelectedItem(1);\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      this.updateSelectedItem(-1);\n    } else if (e.key === 'Enter' && this.selectedIndex !== -1) {\n      e.preventDefault();\n      this.menuItemTargets[this.selectedIndex].click();\n    }\n  }\n\n  updateSelectedItem(direction) {\n    // Check if any of the menuItemTargets have aria-selected=\"true\" and set the selectedIndex to that index\n    this.menuItemTargets.forEach((item, index) => {\n      if (item.getAttribute('aria-selected') === 'true') {\n        this.selectedIndex = index;\n      }\n    });\n\n    if (this.selectedIndex >= 0) {\n      this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);\n    }\n\n    this.selectedIndex += direction;\n\n    if (this.selectedIndex < 0) {\n      this.selectedIndex = this.menuItemTargets.length - 1;\n    } else if (this.selectedIndex >= this.menuItemTargets.length) {\n      this.selectedIndex = 0;\n    }\n\n    this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);\n  }\n\n  toggleAriaSelected(element, isSelected) {\n    // Add or remove attribute\n    if (isSelected) {\n      element.setAttribute('aria-selected', 'true');\n    } else {\n      element.removeAttribute('aria-selected');\n    }\n  }\n\n  deselectAll() {\n    this.menuItemTargets.forEach(item => this.toggleAriaSelected(item, false));\n    this.selectedIndex = -1;\n  }\n\n  addEventListeners() {\n    document.addEventListener('keydown', this.boundHandleKeydown);\n  }\n\n  removeEventListeners() {\n    document.removeEventListener('keydown', this.boundHandleKeydown);\n  }\n}\n"
+          "content": "import { Controller } from \"@hotwired/stimulus\";\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  autoUpdate,\n} from \"@floating-ui/dom\";\n\nexport default class extends Controller {\n  static targets = [\"trigger\", \"content\", \"menuItem\"];\n  static values = {\n    open: { type: Boolean, default: false },\n    options: { type: Object, default: {} },\n    // make content width match the trigger element (true/false)\n    matchWidth: { type: Boolean, default: false },\n  };\n\n  connect() {\n    this.cleanup = null;\n    this.selectedIndex = -1;\n    this.boundHandleKeydown = this.handleKeydown.bind(this);\n  }\n\n  disconnect() {\n    this.hide();\n  }\n\n  handleContextMenu(event) {\n    event.preventDefault();\n    this.open();\n  }\n\n  open() {\n    this.openValue = true;\n    this.contentTarget.classList.remove(\"hidden\");\n    this.contentTarget.dataset.state = \"open\";\n    if (this.matchWidthValue) {\n      this.contentTarget.style.width = `${this.triggerTarget.offsetWidth}px`;\n    }\n    this.addEventListeners();\n    this.updatePosition();\n  }\n\n  close() {\n    this.hide();\n  }\n\n  hide() {\n    if (!this.openValue) return;\n    this.openValue = false;\n    this.contentTarget.classList.add(\"hidden\");\n    this.contentTarget.dataset.state = \"closed\";\n    this.removeEventListeners();\n    this.deselectAll();\n    if (this.cleanup) {\n      this.cleanup();\n      this.cleanup = null;\n    }\n  }\n\n  updatePosition() {\n    if (this.cleanup) this.cleanup();\n\n    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {\n      computePosition(this.triggerTarget, this.contentTarget, {\n        placement: this.optionsValue.placement || \"bottom-start\",\n        middleware: [offset(4), flip(), shift({ padding: 8 })],\n      }).then(({ x, y, placement }) => {\n        Object.assign(this.contentTarget.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        });\n        this.contentTarget.dataset.side = placement.split(\"-\")[0];\n      });\n    });\n  }\n\n  addEventListeners() {\n    document.addEventListener(\"keydown\", this.boundHandleKeydown);\n    document.addEventListener(\"click\", this.handleOutsidePointer);\n    // A right-click outside should dismiss this menu and let the native\n    // context menu (or another trigger's menu) take over.\n    document.addEventListener(\"contextmenu\", this.handleOutsidePointer);\n  }\n\n  removeEventListeners() {\n    document.removeEventListener(\"keydown\", this.boundHandleKeydown);\n    document.removeEventListener(\"click\", this.handleOutsidePointer);\n    document.removeEventListener(\"contextmenu\", this.handleOutsidePointer);\n  }\n\n  handleOutsidePointer = (event) => {\n    if (!this.element.contains(event.target)) {\n      this.hide();\n    }\n  };\n\n  handleKeydown(e) {\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      this.hide();\n      return;\n    }\n\n    if (this.menuItemTargets.length === 0) return;\n\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      this.updateSelectedItem(1);\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      this.updateSelectedItem(-1);\n    } else if (e.key === \"Enter\" && this.selectedIndex !== -1) {\n      e.preventDefault();\n      this.menuItemTargets[this.selectedIndex].click();\n    }\n  }\n\n  updateSelectedItem(direction) {\n    this.menuItemTargets.forEach((item, index) => {\n      if (item.getAttribute(\"aria-selected\") === \"true\") {\n        this.selectedIndex = index;\n      }\n    });\n\n    if (this.selectedIndex >= 0) {\n      this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);\n    }\n\n    this.selectedIndex += direction;\n\n    if (this.selectedIndex < 0) {\n      this.selectedIndex = this.menuItemTargets.length - 1;\n    } else if (this.selectedIndex >= this.menuItemTargets.length) {\n      this.selectedIndex = 0;\n    }\n\n    this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);\n  }\n\n  toggleAriaSelected(element, isSelected) {\n    if (isSelected) {\n      element.setAttribute(\"aria-selected\", \"true\");\n    } else {\n      element.removeAttribute(\"aria-selected\");\n    }\n  }\n\n  deselectAll() {\n    this.menuItemTargets.forEach((item) =>\n      this.toggleAriaSelected(item, false)\n    );\n    this.selectedIndex = -1;\n  }\n}\n"
         },
         {
           "path": "context_menu_item.rb",
@@ -1073,7 +1073,7 @@
       "dependencies": {
         "components": [],
         "js_packages": [
-          "tippy.js"
+          "@floating-ui/dom"
         ],
         "gems": []
       },
@@ -1448,11 +1448,11 @@
         },
         {
           "path": "hover_card_content.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class HoverCardContent < Base\n    def view_template(&block)\n      template(data: {ruby_ui__hover_card_target: \"content\"}) do\n        div(**attrs, &block)\n      end\n    end\n\n    private\n\n    def default_attrs\n      {\n        data: {\n          state: :open\n        },\n        class: \"z-50 rounded-md border bg-background p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class HoverCardContent < Base\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        data: {\n          ruby_ui__hover_card_target: \"content\",\n          state: :open\n        },\n        class: \"hidden absolute z-50 rounded-md border bg-background p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n      }\n    end\n  end\nend\n"
         },
         {
           "path": "hover_card_controller.js",
-          "content": "import { Controller } from \"@hotwired/stimulus\";\nimport tippy from \"tippy.js\";\n\nexport default class extends Controller {\n  static targets = [\"trigger\", \"content\", \"menuItem\"];\n  static values = {\n    options: {\n      type: Object,\n      default: {},\n    },\n    // make content width of the trigger element (true/false)\n    matchWidth: {\n      type: Boolean,\n      default: false,\n    }\n  }\n\n  connect() {\n    this.boundHandleKeydown = this.handleKeydown.bind(this); // Bind the function so we can remove it later\n    this.initializeTippy();\n    this.selectedIndex = -1;\n  }\n\n  disconnect() {\n    this.destroyTippy();\n  }\n\n  initializeTippy() {\n    const defaultOptions = {\n      content: this.contentTarget.innerHTML,\n      allowHTML: true,\n      interactive: true,\n      onShow: (instance) => {\n        this.matchWidthValue && this.setContentWidth(instance); // ensure content width matches trigger width\n        this.addEventListeners();\n      },\n      onHide: () => {\n        this.removeEventListeners();\n        this.deselectAll();\n      },\n      popperOptions: {\n        modifiers: [\n          {\n            name: \"offset\",\n            options: {\n              offset: [0, 4]\n            },\n          },\n        ],\n      }\n    };\n\n    const mergedOptions = { ...this.optionsValue, ...defaultOptions };\n    this.tippy = tippy(this.triggerTarget, mergedOptions);\n  }\n\n  destroyTippy() {\n    if (this.tippy) {\n      this.tippy.destroy();\n    }\n  }\n\n  setContentWidth(instance) {\n    // box-sizing: border-box\n    const content = instance.popper.querySelector('.tippy-content');\n    if (content) {\n      content.style.width = `${instance.reference.offsetWidth}px`;\n    }\n  }\n\n  handleContextMenu(event) {\n    event.preventDefault();\n    this.open();\n  }\n\n  open() {\n    this.tippy.show();\n  }\n\n  close() {\n    this.tippy.hide();\n  }\n\n  handleKeydown(e) {\n    // return if no menu items (one line fix for)\n    if (this.menuItemTargets.length === 0) { return; }\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.updateSelectedItem(1);\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      this.updateSelectedItem(-1);\n    } else if (e.key === 'Enter' && this.selectedIndex !== -1) {\n      e.preventDefault();\n      this.menuItemTargets[this.selectedIndex].click();\n    }\n  }\n\n  updateSelectedItem(direction) {\n    // Check if any of the menuItemTargets have aria-selected=\"true\" and set the selectedIndex to that index\n    this.menuItemTargets.forEach((item, index) => {\n      if (item.getAttribute('aria-selected') === 'true') {\n        this.selectedIndex = index;\n      }\n    });\n\n    if (this.selectedIndex >= 0) {\n      this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);\n    }\n\n    this.selectedIndex += direction;\n\n    if (this.selectedIndex < 0) {\n      this.selectedIndex = this.menuItemTargets.length - 1;\n    } else if (this.selectedIndex >= this.menuItemTargets.length) {\n      this.selectedIndex = 0;\n    }\n\n    this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);\n  }\n\n  toggleAriaSelected(element, isSelected) {\n    // Add or remove attribute\n    if (isSelected) {\n      element.setAttribute('aria-selected', 'true');\n    } else {\n      element.removeAttribute('aria-selected');\n    }\n  }\n\n  deselectAll() {\n    this.menuItemTargets.forEach(item => this.toggleAriaSelected(item, false));\n    this.selectedIndex = -1;\n  }\n\n  addEventListeners() {\n    document.addEventListener('keydown', this.boundHandleKeydown);\n  }\n\n  removeEventListeners() {\n    document.removeEventListener('keydown', this.boundHandleKeydown);\n  }\n}\n"
+          "content": "import { Controller } from \"@hotwired/stimulus\";\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  autoUpdate,\n} from \"@floating-ui/dom\";\n\nexport default class extends Controller {\n  static targets = [\"trigger\", \"content\", \"menuItem\"];\n  static values = {\n    open: { type: Boolean, default: false },\n    options: { type: Object, default: {} },\n    // make content width match the trigger element (true/false)\n    matchWidth: { type: Boolean, default: false },\n  };\n\n  connect() {\n    this.openDelay = this.delayAt(0, 500);\n    this.closeDelay = this.delayAt(1, 250);\n    this.openTimeout = null;\n    this.closeTimeout = null;\n    this.cleanup = null;\n    this.selectedIndex = -1;\n    this.boundHandleKeydown = this.handleKeydown.bind(this);\n    this.addEventListeners();\n  }\n\n  disconnect() {\n    this.removeEventListeners();\n    this.clearTimers();\n    document.removeEventListener(\"keydown\", this.boundHandleKeydown);\n    if (this.cleanup) {\n      this.cleanup();\n      this.cleanup = null;\n    }\n  }\n\n  // Supports the tippy-style `delay` option: a number or a [open, close] tuple.\n  delayAt(index, fallback) {\n    const delay = this.optionsValue.delay;\n    if (Array.isArray(delay)) return delay[index] ?? fallback;\n    if (typeof delay === \"number\") return delay;\n    return fallback;\n  }\n\n  addEventListeners() {\n    this.triggerTarget.addEventListener(\"mouseenter\", this.handleMouseEnter);\n    this.triggerTarget.addEventListener(\"mouseleave\", this.handleMouseLeave);\n    this.triggerTarget.addEventListener(\"focusin\", this.handleMouseEnter);\n    this.triggerTarget.addEventListener(\"focusout\", this.handleMouseLeave);\n    this.contentTarget.addEventListener(\"mouseenter\", this.handleMouseEnter);\n    this.contentTarget.addEventListener(\"mouseleave\", this.handleMouseLeave);\n    this.contentTarget.addEventListener(\"focusin\", this.handleMouseEnter);\n    this.contentTarget.addEventListener(\"focusout\", this.handleMouseLeave);\n  }\n\n  removeEventListeners() {\n    this.triggerTarget.removeEventListener(\"mouseenter\", this.handleMouseEnter);\n    this.triggerTarget.removeEventListener(\"mouseleave\", this.handleMouseLeave);\n    this.triggerTarget.removeEventListener(\"focusin\", this.handleMouseEnter);\n    this.triggerTarget.removeEventListener(\"focusout\", this.handleMouseLeave);\n    this.contentTarget.removeEventListener(\"mouseenter\", this.handleMouseEnter);\n    this.contentTarget.removeEventListener(\"mouseleave\", this.handleMouseLeave);\n    this.contentTarget.removeEventListener(\"focusin\", this.handleMouseEnter);\n    this.contentTarget.removeEventListener(\"focusout\", this.handleMouseLeave);\n  }\n\n  handleMouseEnter = () => {\n    this.clearTimers();\n    this.openTimeout = setTimeout(() => this.show(), this.openDelay);\n  };\n\n  handleMouseLeave = () => {\n    this.clearTimers();\n    this.closeTimeout = setTimeout(() => this.hide(), this.closeDelay);\n  };\n\n  clearTimers() {\n    clearTimeout(this.openTimeout);\n    clearTimeout(this.closeTimeout);\n  }\n\n  show() {\n    this.openValue = true;\n    this.contentTarget.classList.remove(\"hidden\");\n    this.contentTarget.dataset.state = \"open\";\n    if (this.matchWidthValue) {\n      this.contentTarget.style.width = `${this.triggerTarget.offsetWidth}px`;\n    }\n    document.addEventListener(\"keydown\", this.boundHandleKeydown);\n    this.updatePosition();\n  }\n\n  hide() {\n    this.openValue = false;\n    this.contentTarget.classList.add(\"hidden\");\n    this.contentTarget.dataset.state = \"closed\";\n    document.removeEventListener(\"keydown\", this.boundHandleKeydown);\n    this.deselectAll();\n    if (this.cleanup) {\n      this.cleanup();\n      this.cleanup = null;\n    }\n  }\n\n  updatePosition() {\n    if (this.cleanup) this.cleanup();\n\n    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {\n      computePosition(this.triggerTarget, this.contentTarget, {\n        placement: this.optionsValue.placement || \"bottom\",\n        middleware: [offset(4), flip(), shift({ padding: 8 })],\n      }).then(({ x, y, placement }) => {\n        Object.assign(this.contentTarget.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        });\n        this.contentTarget.dataset.side = placement.split(\"-\")[0];\n      });\n    });\n  }\n\n  handleKeydown(e) {\n    if (e.key === \"Escape\") {\n      this.hide();\n      return;\n    }\n\n    if (this.menuItemTargets.length === 0) return;\n\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      this.updateSelectedItem(1);\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      this.updateSelectedItem(-1);\n    } else if (e.key === \"Enter\" && this.selectedIndex !== -1) {\n      e.preventDefault();\n      this.menuItemTargets[this.selectedIndex].click();\n    }\n  }\n\n  updateSelectedItem(direction) {\n    this.menuItemTargets.forEach((item, index) => {\n      if (item.getAttribute(\"aria-selected\") === \"true\") {\n        this.selectedIndex = index;\n      }\n    });\n\n    if (this.selectedIndex >= 0) {\n      this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);\n    }\n\n    this.selectedIndex += direction;\n\n    if (this.selectedIndex < 0) {\n      this.selectedIndex = this.menuItemTargets.length - 1;\n    } else if (this.selectedIndex >= this.menuItemTargets.length) {\n      this.selectedIndex = 0;\n    }\n\n    this.toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);\n  }\n\n  toggleAriaSelected(element, isSelected) {\n    if (isSelected) {\n      element.setAttribute(\"aria-selected\", \"true\");\n    } else {\n      element.removeAttribute(\"aria-selected\");\n    }\n  }\n\n  deselectAll() {\n    this.menuItemTargets.forEach((item) =>\n      this.toggleAriaSelected(item, false)\n    );\n    this.selectedIndex = -1;\n  }\n}\n"
         },
         {
           "path": "hover_card_trigger.rb",
@@ -1462,7 +1462,7 @@
       "dependencies": {
         "components": [],
         "js_packages": [
-          "tippy.js"
+          "@floating-ui/dom"
         ],
         "gems": []
       },

From 55f882af3d7bdeb5521fcd98ddd829c91f0bd5d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Djalma=20Ara=C3=BAjo?= <djalma@nossomos.cc>
Date: Tue, 23 Jun 2026 16:32:32 -0300
Subject: [PATCH 4/4] [Bug Fix] Content initial data-state closed (sync with
 hidden)

cubic flagged HoverCardContent rendering data-state=open while hidden,
which left the enter animation classes active before first show and made
semantic state inconsistent. Initial state is now 'closed' (matches the
hidden class); the controllers flip it to 'open' on show, so the
data-[state=open] enter animation actually plays on reveal. Applied to
both hover_card and context_menu content; registry.json regenerated.
---
 gem/lib/ruby_ui/context_menu/context_menu_content.rb | 2 +-
 gem/lib/ruby_ui/hover_card/hover_card_content.rb     | 2 +-
 mcp/data/registry.json                               | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/gem/lib/ruby_ui/context_menu/context_menu_content.rb b/gem/lib/ruby_ui/context_menu/context_menu_content.rb
index 94f457f98..596d0f387 100644
--- a/gem/lib/ruby_ui/context_menu/context_menu_content.rb
+++ b/gem/lib/ruby_ui/context_menu/context_menu_content.rb
@@ -12,7 +12,7 @@ def default_attrs
       {
         role: "menu",
         aria_orientation: "vertical",
-        data_state: "open",
+        data_state: "closed",
         data: {ruby_ui__context_menu_target: "content"},
         class:
               "hidden absolute z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
diff --git a/gem/lib/ruby_ui/hover_card/hover_card_content.rb b/gem/lib/ruby_ui/hover_card/hover_card_content.rb
index d22e1a787..1a5f2b3e0 100644
--- a/gem/lib/ruby_ui/hover_card/hover_card_content.rb
+++ b/gem/lib/ruby_ui/hover_card/hover_card_content.rb
@@ -12,7 +12,7 @@ def default_attrs
       {
         data: {
           ruby_ui__hover_card_target: "content",
-          state: :open
+          state: :closed
         },
         class: "hidden absolute z-50 rounded-md border bg-background p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
       }
diff --git a/mcp/data/registry.json b/mcp/data/registry.json
index 7def6d0fa..e35d6dccd 100644
--- a/mcp/data/registry.json
+++ b/mcp/data/registry.json
@@ -1047,7 +1047,7 @@
         },
         {
           "path": "context_menu_content.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class ContextMenuContent < Base\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        role: \"menu\",\n        aria_orientation: \"vertical\",\n        data_state: \"open\",\n        data: {ruby_ui__context_menu_target: \"content\"},\n        class:\n              \"hidden absolute z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        tabindex: \"-1\",\n        data_orientation: \"vertical\"\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class ContextMenuContent < Base\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        role: \"menu\",\n        aria_orientation: \"vertical\",\n        data_state: \"closed\",\n        data: {ruby_ui__context_menu_target: \"content\"},\n        class:\n              \"hidden absolute z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        tabindex: \"-1\",\n        data_orientation: \"vertical\"\n      }\n    end\n  end\nend\n"
         },
         {
           "path": "context_menu_controller.js",
@@ -1448,7 +1448,7 @@
         },
         {
           "path": "hover_card_content.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class HoverCardContent < Base\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        data: {\n          ruby_ui__hover_card_target: \"content\",\n          state: :open\n        },\n        class: \"hidden absolute z-50 rounded-md border bg-background p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class HoverCardContent < Base\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        data: {\n          ruby_ui__hover_card_target: \"content\",\n          state: :closed\n        },\n        class: \"hidden absolute z-50 rounded-md border bg-background p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n      }\n    end\n  end\nend\n"
         },
         {
           "path": "hover_card_controller.js",