diff --git a/docs/app/views/docs/hover_card.rb b/docs/app/views/docs/hover_card.rb
index 75c1cb7d..9eb43e20 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/dropdown_menu/dropdown_menu.rb b/gem/lib/ruby_ui/dropdown_menu/dropdown_menu.rb
index 56d92ed6..2f7554fc 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 f7c9caab..86f55ca9 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 == "fixed") ? "is-fixed" : "is-absolute"
+        ],
         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 11576072..0e7b4da4 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 3aa49a83..32609943 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 1aa18ed5..10866b52 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/dropdown_menu_test.rb b/gem/test/ruby_ui/dropdown_menu_test.rb
index 69d8d027..170da48c 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 5f45cfe6..6c3708e6 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,44 @@ 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
+
+  # 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 ed4cd153..6ac624ee 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,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 == \"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",
-          "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"
         }
       ]
     },