From 0a85b4990d0c40744af153cebbc301c2f7911ac7 Mon Sep 17 00:00:00 2001
From: Leonardo Ventura <venturaleo95@gmail.com>
Date: Wed, 9 Sep 2026 09:43:32 -0300
Subject: [PATCH 1/2] [Bug Fix] HoverCard: let the card escape a clipping
 ancestor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

HoverCardContent is `position: absolute`, so an ancestor with
`overflow: hidden` — a scroll area, a table cell, a truncating
container — clips the card instead of letting it overflow.

Give HoverCard the same escape hatch DropdownMenu already has:
`option: {strategy: "fixed"}` switches the root to `is-fixed`, the
content picks up `fixed` through the group variant, and the controller
passes the strategy on to computePosition. The default stays
`absolute`, so existing usage is untouched.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 docs/app/views/docs/hover_card.rb             | 15 ++++++++++
 gem/lib/ruby_ui/hover_card/hover_card.rb      | 10 +++++++
 .../ruby_ui/hover_card/hover_card_content.rb  |  2 +-
 .../hover_card/hover_card_controller.js       |  3 ++
 gem/lib/ruby_ui/hover_card/hover_card_docs.rb | 15 ++++++++++
 gem/test/ruby_ui/hover_card_test.rb           | 29 +++++++++++++++++--
 mcp/data/registry.json                        | 13 ++++++---
 7 files changed, 80 insertions(+), 7 deletions(-)

diff --git a/docs/app/views/docs/hover_card.rb b/docs/app/views/docs/hover_card.rb
index 75c1cb7de..9eb43e209 100644
--- a/docs/app/views/docs/hover_card.rb
+++ b/docs/app/views/docs/hover_card.rb
@@ -52,6 +52,21 @@ def view_template
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "Escaping a clipping ancestor", description: "The card is positioned absolutely by default, so a positioned ancestor that hides its overflow — a scroll area, a table cell, a truncating container — clips it. The fixed strategy positions the card against the viewport instead, so it escapes.", context: self) do
+        <<~RUBY
+          div(class: "relative h-24 w-64 overflow-hidden rounded-md border p-4") do
+            HoverCard(option: {strategy: "fixed"}) do
+              HoverCardTrigger do
+                Button(variant: :link) { "@joeldrapper" }
+              end
+              HoverCardContent do
+                p(class: "text-sm") { "Not clipped by the container above." }
+              end
+            end
+          end
+        RUBY
+      end
+
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))
diff --git a/gem/lib/ruby_ui/hover_card/hover_card.rb b/gem/lib/ruby_ui/hover_card/hover_card.rb
index f7c9caabc..aa2281db1 100644
--- a/gem/lib/ruby_ui/hover_card/hover_card.rb
+++ b/gem/lib/ruby_ui/hover_card/hover_card.rb
@@ -17,11 +17,21 @@ def view_template(&)
 
     def default_attrs
       {
+        class: [
+          "group/hover-card",
+          (strategy == "absolute") ? "is-absolute" : "is-fixed"
+        ],
         data: {
           controller: "ruby-ui--hover-card",
           ruby_ui__hover_card_options_value: @options.to_json
         }
       }
     end
+
+    # An ancestor with `overflow: hidden` clips an absolutely positioned card;
+    # `strategy: "fixed"` positions it against the viewport instead.
+    def strategy
+      @_strategy ||= @options[:strategy] || "absolute"
+    end
   end
 end
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 11576072b..0e7b4da44 100644
--- a/gem/lib/ruby_ui/hover_card/hover_card_content.rb
+++ b/gem/lib/ruby_ui/hover_card/hover_card_content.rb
@@ -14,7 +14,7 @@ def default_attrs
           ruby_ui__hover_card_target: "content",
           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-[state=closed]:fill-mode-forwards 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 group-[.is-absolute]/hover-card:absolute group-[.is-fixed]/hover-card:fixed 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-[state=closed]:fill-mode-forwards 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 3aa49a83a..326099438 100644
--- a/gem/lib/ruby_ui/hover_card/hover_card_controller.js
+++ b/gem/lib/ruby_ui/hover_card/hover_card_controller.js
@@ -164,6 +164,9 @@ export default class extends Controller {
       computePosition(this.triggerTarget, this.contentTarget, {
         placement: this.optionsValue.placement || "bottom",
         middleware: [offset(4), flip(), shift({ padding: 8 })],
+        // `fixed` positions against the viewport, so an ancestor with
+        // `overflow: hidden` no longer clips the card.
+        strategy: this.optionsValue.strategy || "absolute",
       }).then(({ x, y, placement }) => {
         Object.assign(this.contentTarget.style, {
           left: `${x}px`,
diff --git a/gem/lib/ruby_ui/hover_card/hover_card_docs.rb b/gem/lib/ruby_ui/hover_card/hover_card_docs.rb
index 1aa18ed55..10866b52f 100644
--- a/gem/lib/ruby_ui/hover_card/hover_card_docs.rb
+++ b/gem/lib/ruby_ui/hover_card/hover_card_docs.rb
@@ -52,6 +52,21 @@ def view_template
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "Escaping a clipping ancestor", description: "The card is positioned absolutely by default, so a positioned ancestor that hides its overflow — a scroll area, a table cell, a truncating container — clips it. The fixed strategy positions the card against the viewport instead, so it escapes.", context: self) do
+        <<~RUBY
+          div(class: "relative h-24 w-64 overflow-hidden rounded-md border p-4") do
+            HoverCard(option: {strategy: "fixed"}) do
+              HoverCardTrigger do
+                Button(variant: :link) { "@joeldrapper" }
+              end
+              HoverCardContent do
+                p(class: "text-sm") { "Not clipped by the container above." }
+              end
+            end
+          end
+        RUBY
+      end
+
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))
diff --git a/gem/test/ruby_ui/hover_card_test.rb b/gem/test/ruby_ui/hover_card_test.rb
index 5f45cfe6f..2ff22e314 100644
--- a/gem/test/ruby_ui/hover_card_test.rb
+++ b/gem/test/ruby_ui/hover_card_test.rb
@@ -24,7 +24,7 @@ def test_render_with_all_items
   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.
+  # <template>). Content must render as a hidden, positioned div.
   def test_content_renders_hidden_positioned_div_not_template
     output = phlex do
       RubyUI.HoverCardContent { "card body" }
@@ -32,10 +32,35 @@ def test_content_renders_hidden_positioned_div_not_template
 
     refute_match(/<template/, output)
     assert_match(/hidden/, output)
-    assert_match(/absolute/, output)
     assert_match(/card body/, output)
   end
 
+  # The strategy lives on the root, so the content takes its `position` from
+  # the group variant the root switches on.
+  def test_content_takes_its_position_from_the_root_strategy
+    output = phlex do
+      RubyUI.HoverCardContent { "card body" }
+    end
+
+    assert_match(%r{group-\[\.is-absolute\]/hover-card:absolute}, output)
+    assert_match(%r{group-\[\.is-fixed\]/hover-card:fixed}, output)
+  end
+
+  def test_root_is_absolute_by_default
+    output = phlex { RubyUI.HoverCard { "card" } }
+
+    assert_match(%r{class="group/hover-card is-absolute"}, output)
+  end
+
+  # An ancestor with `overflow: hidden` clips an absolutely positioned card;
+  # `strategy: "fixed"` is what lets the card escape it.
+  def test_root_opts_into_the_fixed_strategy
+    output = phlex { RubyUI.HoverCard(option: {strategy: "fixed"}) { "card" } }
+
+    assert_match(%r{class="group/hover-card is-fixed"}, output)
+    assert_match(/&quot;strategy&quot;:&quot;fixed&quot;/, output)
+  end
+
   # `hidden` lands a frame after the animation ends; without a forwards fill mode that frame flashes.
   def test_content_holds_the_last_frame_of_the_exit_animation
     output = phlex do
diff --git a/mcp/data/registry.json b/mcp/data/registry.json
index ed4cd153a..1c92ed7d0 100644
--- a/mcp/data/registry.json
+++ b/mcp/data/registry.json
@@ -1574,15 +1574,15 @@
       "files": [
         {
           "path": "hover_card.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class HoverCard < Base\n    def initialize(option: {}, **attrs)\n      @options = option\n      @options[:delay] ||= [500, 250]\n      @options[:trigger] ||= \"mouseenter focus click\"\n      super(**attrs)\n    end\n\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        data: {\n          controller: \"ruby-ui--hover-card\",\n          ruby_ui__hover_card_options_value: @options.to_json\n        }\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class HoverCard < Base\n    def initialize(option: {}, **attrs)\n      @options = option\n      @options[:delay] ||= [500, 250]\n      @options[:trigger] ||= \"mouseenter focus click\"\n      super(**attrs)\n    end\n\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        class: [\n          \"group/hover-card\",\n          (strategy == \"absolute\") ? \"is-absolute\" : \"is-fixed\"\n        ],\n        data: {\n          controller: \"ruby-ui--hover-card\",\n          ruby_ui__hover_card_options_value: @options.to_json\n        }\n      }\n    end\n\n    # An ancestor with `overflow: hidden` clips an absolutely positioned card;\n    # `strategy: \"fixed\"` positions it against the viewport instead.\n    def strategy\n      @_strategy ||= @options[:strategy] || \"absolute\"\n    end\n  end\nend\n"
         },
         {
           "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: :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-[state=closed]:fill-mode-forwards 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 group-[.is-absolute]/hover-card:absolute group-[.is-fixed]/hover-card:fixed 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-[state=closed]:fill-mode-forwards 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 {\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  // Teardown that cannot fail comes first: a missing target throws, and Stimulus skips the rest.\n  disconnect() {\n    this.clearTimers();\n    document.removeEventListener(\"keydown\", this.boundHandleKeydown);\n    if (this.cleanup) {\n      this.cleanup();\n      this.cleanup = null;\n    }\n    this.removeEventListeners();\n    // Nothing is left to wait for the exit animation, so apply the pending hide now.\n    if (this.hasContentTarget) this.settleExit(this.contentTarget);\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    if (this.hasTriggerTarget) {\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    }\n\n    if (this.hasContentTarget) {\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\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    document.removeEventListener(\"keydown\", this.boundHandleKeydown);\n    this.deselectAll();\n    if (this.cleanup) {\n      this.cleanup();\n      this.cleanup = null;\n    }\n\n    if (!this.hasContentTarget) return;\n\n    this.contentTarget.dataset.state = \"closed\";\n    this.hideAfterExitAnimation(this.contentTarget);\n  }\n\n  afterExit(content) {\n    content.classList.add(\"hidden\");\n  }\n\n  // Overlay exit — the same block in every overlay controller, so keep them in sync.\n  exitAnimationNames = new WeakMap();\n\n  hideAfterExitAnimation(animated) {\n    const exitAnimations = animated\n      .getAnimations()\n      .filter((animation) => animation instanceof CSSAnimation);\n\n    // No exit animation, or no box to run it in: animationend would never fire.\n    if (exitAnimations.length === 0) {\n      this.settleExit(animated);\n      return;\n    }\n\n    this.exitAnimationNames.set(animated, exitAnimations.map((animation) => animation.animationName));\n    animated.addEventListener(\"animationend\", this.handleExitAnimationEnd);\n    animated.addEventListener(\"animationcancel\", this.handleExitAnimationEnd);\n  }\n\n  handleExitAnimationEnd = (event) => {\n    // animationend bubbles — an animated child must not hide its container.\n    if (event.target !== event.currentTarget) return;\n    // Closing mid-open cancels the enter animation; only the exit run settles this.\n    if (!this.exitAnimationNames.get(event.currentTarget)?.includes(event.animationName)) return;\n\n    this.settleExit(event.currentTarget);\n  };\n\n  settleExit(animated) {\n    animated.removeEventListener(\"animationend\", this.handleExitAnimationEnd);\n    animated.removeEventListener(\"animationcancel\", this.handleExitAnimationEnd);\n    // Reopened mid-exit: it is on its way back in, leave it visible.\n    if (animated.dataset.state !== \"closed\") return;\n\n    this.afterExit(animated);\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"
+          "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  // Teardown that cannot fail comes first: a missing target throws, and Stimulus skips the rest.\n  disconnect() {\n    this.clearTimers();\n    document.removeEventListener(\"keydown\", this.boundHandleKeydown);\n    if (this.cleanup) {\n      this.cleanup();\n      this.cleanup = null;\n    }\n    this.removeEventListeners();\n    // Nothing is left to wait for the exit animation, so apply the pending hide now.\n    if (this.hasContentTarget) this.settleExit(this.contentTarget);\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    if (this.hasTriggerTarget) {\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    }\n\n    if (this.hasContentTarget) {\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\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    document.removeEventListener(\"keydown\", this.boundHandleKeydown);\n    this.deselectAll();\n    if (this.cleanup) {\n      this.cleanup();\n      this.cleanup = null;\n    }\n\n    if (!this.hasContentTarget) return;\n\n    this.contentTarget.dataset.state = \"closed\";\n    this.hideAfterExitAnimation(this.contentTarget);\n  }\n\n  afterExit(content) {\n    content.classList.add(\"hidden\");\n  }\n\n  // Overlay exit — the same block in every overlay controller, so keep them in sync.\n  exitAnimationNames = new WeakMap();\n\n  hideAfterExitAnimation(animated) {\n    const exitAnimations = animated\n      .getAnimations()\n      .filter((animation) => animation instanceof CSSAnimation);\n\n    // No exit animation, or no box to run it in: animationend would never fire.\n    if (exitAnimations.length === 0) {\n      this.settleExit(animated);\n      return;\n    }\n\n    this.exitAnimationNames.set(animated, exitAnimations.map((animation) => animation.animationName));\n    animated.addEventListener(\"animationend\", this.handleExitAnimationEnd);\n    animated.addEventListener(\"animationcancel\", this.handleExitAnimationEnd);\n  }\n\n  handleExitAnimationEnd = (event) => {\n    // animationend bubbles — an animated child must not hide its container.\n    if (event.target !== event.currentTarget) return;\n    // Closing mid-open cancels the enter animation; only the exit run settles this.\n    if (!this.exitAnimationNames.get(event.currentTarget)?.includes(event.animationName)) return;\n\n    this.settleExit(event.currentTarget);\n  };\n\n  settleExit(animated) {\n    animated.removeEventListener(\"animationend\", this.handleExitAnimationEnd);\n    animated.removeEventListener(\"animationcancel\", this.handleExitAnimationEnd);\n    // Reopened mid-exit: it is on its way back in, leave it visible.\n    if (animated.dataset.state !== \"closed\") return;\n\n    this.afterExit(animated);\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        // `fixed` positions against the viewport, so an ancestor with\n        // `overflow: hidden` no longer clips the card.\n        strategy: this.optionsValue.strategy || \"absolute\",\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",
@@ -1597,12 +1597,17 @@
         "gems": []
       },
       "install_command": "rails g ruby_ui:component HoverCard",
-      "docs_markdown": "# Hover Card\n\nFor sighted users to preview content available behind a link.\n\n## Usage\n\n### Example\n\n```ruby\nHoverCard do\n  HoverCardTrigger do\n    Button(variant: :link) { \"@joeldrapper\" } # Make this a link in order to navigate somewhere\n  end\n  HoverCardContent do\n    div(class: \"flex justify-between space-x-4\") do\n      Avatar do\n        AvatarImage(src: \"https://avatars.githubusercontent.com/u/246692?v=4\", alt: \"joeldrapper\")\n        AvatarFallback { \"JD\" }\n      end\n      div(class: \"space-y-1\") do\n        h4(class: \"text-sm font-medium\") { \"@joeldrapper\" }\n        p(class: \"text-sm\") do\n          \"Creator of Phlex Components. Ruby on Rails developer.\"\n        end\n        div(class: \"flex items-center pt-2\") do\n          svg(\n            width: \"15\",\n            height: \"15\",\n            viewbox: \"0 0 15 15\",\n            fill: \"none\",\n            xmlns: \"http://www.w3.org/2000/svg\",\n            class: \"mr-2 h-4 w-4 opacity-70\"\n          ) do |s|\n            s.path(\n              d:\n                \"M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z\",\n              fill: \"currentColor\",\n              fill_rule: \"evenodd\",\n              clip_rule: \"evenodd\"\n            )\n          end\n          span(class: \"text-xs text-muted-foreground\") { \"Joined December 2021\" }\n        end\n      end\n    end\n  end\nend\n```",
+      "docs_markdown": "# Hover Card\n\nFor sighted users to preview content available behind a link.\n\n## Usage\n\n### Example\n\n```ruby\nHoverCard do\n  HoverCardTrigger do\n    Button(variant: :link) { \"@joeldrapper\" } # Make this a link in order to navigate somewhere\n  end\n  HoverCardContent do\n    div(class: \"flex justify-between space-x-4\") do\n      Avatar do\n        AvatarImage(src: \"https://avatars.githubusercontent.com/u/246692?v=4\", alt: \"joeldrapper\")\n        AvatarFallback { \"JD\" }\n      end\n      div(class: \"space-y-1\") do\n        h4(class: \"text-sm font-medium\") { \"@joeldrapper\" }\n        p(class: \"text-sm\") do\n          \"Creator of Phlex Components. Ruby on Rails developer.\"\n        end\n        div(class: \"flex items-center pt-2\") do\n          svg(\n            width: \"15\",\n            height: \"15\",\n            viewbox: \"0 0 15 15\",\n            fill: \"none\",\n            xmlns: \"http://www.w3.org/2000/svg\",\n            class: \"mr-2 h-4 w-4 opacity-70\"\n          ) do |s|\n            s.path(\n              d:\n                \"M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z\",\n              fill: \"currentColor\",\n              fill_rule: \"evenodd\",\n              clip_rule: \"evenodd\"\n            )\n          end\n          span(class: \"text-xs text-muted-foreground\") { \"Joined December 2021\" }\n        end\n      end\n    end\n  end\nend\n```\n\n### Escaping a clipping ancestor\n\n```ruby\ndiv(class: \"relative h-24 w-64 overflow-hidden rounded-md border p-4\") do\n  HoverCard(option: {strategy: \"fixed\"}) do\n    HoverCardTrigger do\n      Button(variant: :link) { \"@joeldrapper\" }\n    end\n    HoverCardContent do\n      p(class: \"text-sm\") { \"Not clipped by the container above.\" }\n    end\n  end\nend\n```",
       "examples": [
         {
           "title": "Example",
           "code": "HoverCard do\n  HoverCardTrigger do\n    Button(variant: :link) { \"@joeldrapper\" } # Make this a link in order to navigate somewhere\n  end\n  HoverCardContent do\n    div(class: \"flex justify-between space-x-4\") do\n      Avatar do\n        AvatarImage(src: \"https://avatars.githubusercontent.com/u/246692?v=4\", alt: \"joeldrapper\")\n        AvatarFallback { \"JD\" }\n      end\n      div(class: \"space-y-1\") do\n        h4(class: \"text-sm font-medium\") { \"@joeldrapper\" }\n        p(class: \"text-sm\") do\n          \"Creator of Phlex Components. Ruby on Rails developer.\"\n        end\n        div(class: \"flex items-center pt-2\") do\n          svg(\n            width: \"15\",\n            height: \"15\",\n            viewbox: \"0 0 15 15\",\n            fill: \"none\",\n            xmlns: \"http://www.w3.org/2000/svg\",\n            class: \"mr-2 h-4 w-4 opacity-70\"\n          ) do |s|\n            s.path(\n              d:\n                \"M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z\",\n              fill: \"currentColor\",\n              fill_rule: \"evenodd\",\n              clip_rule: \"evenodd\"\n            )\n          end\n          span(class: \"text-xs text-muted-foreground\") { \"Joined December 2021\" }\n        end\n      end\n    end\n  end\nend\n",
           "language": "ruby"
+        },
+        {
+          "title": "Escaping a clipping ancestor",
+          "code": "div(class: \"relative h-24 w-64 overflow-hidden rounded-md border p-4\") do\n  HoverCard(option: {strategy: \"fixed\"}) do\n    HoverCardTrigger do\n      Button(variant: :link) { \"@joeldrapper\" }\n    end\n    HoverCardContent do\n      p(class: \"text-sm\") { \"Not clipped by the container above.\" }\n    end\n  end\nend\n",
+          "language": "ruby"
         }
       ]
     },

From 28ac6ec5ac7840654b274c9a7b794e3dfe731a36 Mon Sep 17 00:00:00 2001
From: Leonardo Ventura <venturaleo95@gmail.com>
Date: Thu, 10 Sep 2026 10:01:09 -0300
Subject: [PATCH 2/2] [Bug Fix] Overlays: fall back to the absolute strategy
 consistently
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The class ternary keyed off "absolute", so every other value — a typo
like "absolut" included — rendered `is-fixed`, while Floating UI keys
off "fixed" and computes anything else as absolute. The card then
painted `position: fixed` with coordinates resolved against its offset
parent, drifting from the trigger on scroll.

Key the class off "fixed" instead, so both sides fall back to absolute
on the same input. DropdownMenu carried the same ternary; fix both.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 gem/lib/ruby_ui/dropdown_menu/dropdown_menu.rb |  2 +-
 gem/lib/ruby_ui/hover_card/hover_card.rb       |  2 +-
 gem/test/ruby_ui/dropdown_menu_test.rb         | 18 ++++++++++++++++++
 gem/test/ruby_ui/hover_card_test.rb            |  9 +++++++++
 mcp/data/registry.json                         |  4 ++--
 5 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/gem/lib/ruby_ui/dropdown_menu/dropdown_menu.rb b/gem/lib/ruby_ui/dropdown_menu/dropdown_menu.rb
index 56d92ed6a..2f7554fcf 100644
--- a/gem/lib/ruby_ui/dropdown_menu/dropdown_menu.rb
+++ b/gem/lib/ruby_ui/dropdown_menu/dropdown_menu.rb
@@ -17,7 +17,7 @@ def default_attrs
       {
         class: [
           "group/dropdown-menu",
-          (strategy == "absolute") ? "is-absolute" : "is-fixed"
+          (strategy == "fixed") ? "is-fixed" : "is-absolute"
         ],
         data: {
           controller: "ruby-ui--dropdown-menu",
diff --git a/gem/lib/ruby_ui/hover_card/hover_card.rb b/gem/lib/ruby_ui/hover_card/hover_card.rb
index aa2281db1..86f55ca9c 100644
--- a/gem/lib/ruby_ui/hover_card/hover_card.rb
+++ b/gem/lib/ruby_ui/hover_card/hover_card.rb
@@ -19,7 +19,7 @@ def default_attrs
       {
         class: [
           "group/hover-card",
-          (strategy == "absolute") ? "is-absolute" : "is-fixed"
+          (strategy == "fixed") ? "is-fixed" : "is-absolute"
         ],
         data: {
           controller: "ruby-ui--hover-card",
diff --git a/gem/test/ruby_ui/dropdown_menu_test.rb b/gem/test/ruby_ui/dropdown_menu_test.rb
index 69d8d0270..170da48c5 100644
--- a/gem/test/ruby_ui/dropdown_menu_test.rb
+++ b/gem/test/ruby_ui/dropdown_menu_test.rb
@@ -63,6 +63,24 @@ def test_render_with_strategy_fixed
     assert_match(/is-fixed/, output)
   end
 
+  # Floating UI treats anything but "fixed" as absolute, so the class has to
+  # fall back the same way — otherwise a typo renders `fixed` while the
+  # positioning engine computes `absolute`.
+  def test_render_with_unsupported_strategy_falls_back_to_absolute
+    output = phlex do
+      RubyUI.DropdownMenu(options: {strategy: "absolut"}) do
+        RubyUI.DropdownMenuTrigger(class: "w-full") do
+          RubyUI.Button(variant: :outline) { "Open" }
+        end
+        RubyUI.DropdownMenuContent do
+          RubyUI.DropdownMenuItem(href: "#") { "Profile" }
+        end
+      end
+    end
+
+    assert_match(%r{class="group/dropdown-menu is-absolute"}, output)
+  end
+
   # `hidden` lands a frame after the animation ends; without a forwards fill mode that frame flashes.
   def test_content_holds_the_last_frame_of_the_exit_animation
     output = phlex do
diff --git a/gem/test/ruby_ui/hover_card_test.rb b/gem/test/ruby_ui/hover_card_test.rb
index 2ff22e314..6c3708e6e 100644
--- a/gem/test/ruby_ui/hover_card_test.rb
+++ b/gem/test/ruby_ui/hover_card_test.rb
@@ -61,6 +61,15 @@ def test_root_opts_into_the_fixed_strategy
     assert_match(/&quot;strategy&quot;:&quot;fixed&quot;/, output)
   end
 
+  # Floating UI treats anything but "fixed" as absolute, so the class has to
+  # fall back the same way — otherwise a typo renders `fixed` while the
+  # positioning engine computes `absolute`.
+  def test_root_falls_back_to_absolute_for_an_unsupported_strategy
+    output = phlex { RubyUI.HoverCard(option: {strategy: "absolut"}) { "card" } }
+
+    assert_match(%r{class="group/hover-card is-absolute"}, output)
+  end
+
   # `hidden` lands a frame after the animation ends; without a forwards fill mode that frame flashes.
   def test_content_holds_the_last_frame_of_the_exit_animation
     output = phlex do
diff --git a/mcp/data/registry.json b/mcp/data/registry.json
index 1c92ed7d0..6ac624ee8 100644
--- a/mcp/data/registry.json
+++ b/mcp/data/registry.json
@@ -1386,7 +1386,7 @@
       "files": [
         {
           "path": "dropdown_menu.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class DropdownMenu < Base\n    def initialize(options: {}, **attrs)\n      @options = options\n      super(**attrs)\n    end\n\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        class: [\n          \"group/dropdown-menu\",\n          (strategy == \"absolute\") ? \"is-absolute\" : \"is-fixed\"\n        ],\n        data: {\n          controller: \"ruby-ui--dropdown-menu\",\n          action: \"click@window->ruby-ui--dropdown-menu#onClickOutside\",\n          ruby_ui__dropdown_menu_options_value: @options.to_json\n        }\n      }\n    end\n\n    def strategy\n      @_strategy ||= @options[:strategy] || \"absolute\"\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class DropdownMenu < Base\n    def initialize(options: {}, **attrs)\n      @options = options\n      super(**attrs)\n    end\n\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        class: [\n          \"group/dropdown-menu\",\n          (strategy == \"fixed\") ? \"is-fixed\" : \"is-absolute\"\n        ],\n        data: {\n          controller: \"ruby-ui--dropdown-menu\",\n          action: \"click@window->ruby-ui--dropdown-menu#onClickOutside\",\n          ruby_ui__dropdown_menu_options_value: @options.to_json\n        }\n      }\n    end\n\n    def strategy\n      @_strategy ||= @options[:strategy] || \"absolute\"\n    end\n  end\nend\n"
         },
         {
           "path": "dropdown_menu_content.rb",
@@ -1574,7 +1574,7 @@
       "files": [
         {
           "path": "hover_card.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class HoverCard < Base\n    def initialize(option: {}, **attrs)\n      @options = option\n      @options[:delay] ||= [500, 250]\n      @options[:trigger] ||= \"mouseenter focus click\"\n      super(**attrs)\n    end\n\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        class: [\n          \"group/hover-card\",\n          (strategy == \"absolute\") ? \"is-absolute\" : \"is-fixed\"\n        ],\n        data: {\n          controller: \"ruby-ui--hover-card\",\n          ruby_ui__hover_card_options_value: @options.to_json\n        }\n      }\n    end\n\n    # An ancestor with `overflow: hidden` clips an absolutely positioned card;\n    # `strategy: \"fixed\"` positions it against the viewport instead.\n    def strategy\n      @_strategy ||= @options[:strategy] || \"absolute\"\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class HoverCard < Base\n    def initialize(option: {}, **attrs)\n      @options = option\n      @options[:delay] ||= [500, 250]\n      @options[:trigger] ||= \"mouseenter focus click\"\n      super(**attrs)\n    end\n\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        class: [\n          \"group/hover-card\",\n          (strategy == \"fixed\") ? \"is-fixed\" : \"is-absolute\"\n        ],\n        data: {\n          controller: \"ruby-ui--hover-card\",\n          ruby_ui__hover_card_options_value: @options.to_json\n        }\n      }\n    end\n\n    # An ancestor with `overflow: hidden` clips an absolutely positioned card;\n    # `strategy: \"fixed\"` positions it against the viewport instead.\n    def strategy\n      @_strategy ||= @options[:strategy] || \"absolute\"\n    end\n  end\nend\n"
         },
         {
           "path": "hover_card_content.rb",