From 3c429f606fdea5ec707d4b00cfb3e6b6b755d74c Mon Sep 17 00:00:00 2001
From: Jackson Pires <jackson.pires@gmail.com>
Date: Mon, 15 Jun 2026 13:41:08 -0300
Subject: [PATCH 1/3] [Feature] Allow TabsTrigger to render as an anchor via
 as:

Add an `as:` option to `RubyUI::TabsTrigger` (default `:button`) so a
trigger can render as `<a href>` for tabs that are navigation links.
This avoids nesting a `<button>` inside an `<a>` (invalid HTML and a
keyboard/accessibility issue) when tabs are server-rendered links.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/app/views/docs/tabs.rb           | 14 ++++++++++++
 gem/lib/ruby_ui/tabs/tabs_trigger.rb  | 14 ++++++++----
 gem/test/ruby_ui/tabs_trigger_test.rb | 31 +++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 gem/test/ruby_ui/tabs_trigger_test.rb

diff --git a/docs/app/views/docs/tabs.rb b/docs/app/views/docs/tabs.rb
index 33b6ff349..51700b46d 100644
--- a/docs/app/views/docs/tabs.rb
+++ b/docs/app/views/docs/tabs.rb
@@ -102,6 +102,20 @@ def view_template
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "As navigation links", context: self) do
+        <<~RUBY
+          # Render triggers as `<a>` instead of `<button>` for tabs that navigate
+          # (e.g. server-rendered tabs driven by a query param). This avoids
+          # nesting interactive elements and keeps the markup valid and accessible.
+          Tabs(default_value: "account", class: 'w-96') do
+            TabsList do
+              TabsTrigger(value: "account", as: :a, href: "?tab=account") { "Account" }
+              TabsTrigger(value: "password", as: :a, href: "?tab=password") { "Password" }
+            end
+          end
+        RUBY
+      end
+
       render Docs::VisualCodeExample.new(title: "Change default value", context: self) do
         <<~RUBY
           Tabs(default: "password", class: 'w-96') do
diff --git a/gem/lib/ruby_ui/tabs/tabs_trigger.rb b/gem/lib/ruby_ui/tabs/tabs_trigger.rb
index c2764f4f4..668461389 100644
--- a/gem/lib/ruby_ui/tabs/tabs_trigger.rb
+++ b/gem/lib/ruby_ui/tabs/tabs_trigger.rb
@@ -2,20 +2,24 @@
 
 module RubyUI
   class TabsTrigger < Base
-    def initialize(value:, **attrs)
+    def initialize(value:, as: :button, **attrs)
       @value = value
+      @as = as
       super(**attrs)
     end
 
     def view_template(&)
-      button(**attrs, &)
+      if @as == :a
+        a(**attrs, &)
+      else
+        button(**attrs, &)
+      end
     end
 
     private
 
     def default_attrs
-      {
-        type: :button,
+      base = {
         data: {
           ruby_ui__tabs_target: "trigger",
           action: "click->ruby-ui--tabs#show",
@@ -29,6 +33,8 @@ def default_attrs
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         ]
       }
+      base[:type] = :button if @as == :button
+      base
     end
   end
 end
diff --git a/gem/test/ruby_ui/tabs_trigger_test.rb b/gem/test/ruby_ui/tabs_trigger_test.rb
new file mode 100644
index 000000000..ce138a6cc
--- /dev/null
+++ b/gem/test/ruby_ui/tabs_trigger_test.rb
@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class RubyUI::TabsTriggerTest < ComponentTest
+  def test_renders_as_button_by_default
+    output = phlex { RubyUI.TabsTrigger(value: "account") { "Account" } }
+
+    assert_match(/\A<button/, output)
+    assert_match(/type="button"/, output)
+    assert_match(/Account/, output)
+    refute_match(/<a[\s>]/, output)
+  end
+
+  def test_renders_as_anchor_with_href_when_as_a
+    output = phlex { RubyUI.TabsTrigger(value: "account", as: :a, href: "/account") { "Account" } }
+
+    assert_match(/\A<a/, output)
+    assert_match(/href="\/account"/, output)
+    assert_match(/Account/, output)
+    refute_match(/<button/, output)
+    refute_match(/type="button"/, output)
+  end
+
+  def test_keeps_trigger_data_attributes_when_rendered_as_anchor
+    output = phlex { RubyUI.TabsTrigger(value: "account", as: :a, href: "/account") { "Account" } }
+
+    assert_match(/data-ruby-ui--tabs-target="trigger"/, output)
+    assert_match(/data-value="account"/, output)
+  end
+end

From 958c1c91cf49ec1a5ae90fe59f25533778c7d7de Mon Sep 17 00:00:00 2001
From: Jackson Pires <jackson.pires@gmail.com>
Date: Mon, 15 Jun 2026 13:55:25 -0300
Subject: [PATCH 2/3] [Bug Fix] Emit type="button" for any non-anchor
 TabsTrigger

Tie the `type="button"` attribute to the element actually rendered
(`unless @as == :a`) instead of an exact `@as == :button` check. An
unexpected/mistyped `as:` value fell through to the `<button>` branch
without a type, which defaults to `type="submit"` and could trigger
accidental form submission. Issue identified by cubic.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 gem/lib/ruby_ui/tabs/tabs_trigger.rb  | 2 +-
 gem/test/ruby_ui/tabs_trigger_test.rb | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/gem/lib/ruby_ui/tabs/tabs_trigger.rb b/gem/lib/ruby_ui/tabs/tabs_trigger.rb
index 668461389..d68ab72e5 100644
--- a/gem/lib/ruby_ui/tabs/tabs_trigger.rb
+++ b/gem/lib/ruby_ui/tabs/tabs_trigger.rb
@@ -33,7 +33,7 @@ def default_attrs
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         ]
       }
-      base[:type] = :button if @as == :button
+      base[:type] = :button unless @as == :a
       base
     end
   end
diff --git a/gem/test/ruby_ui/tabs_trigger_test.rb b/gem/test/ruby_ui/tabs_trigger_test.rb
index ce138a6cc..1ef3ef8d9 100644
--- a/gem/test/ruby_ui/tabs_trigger_test.rb
+++ b/gem/test/ruby_ui/tabs_trigger_test.rb
@@ -22,6 +22,13 @@ def test_renders_as_anchor_with_href_when_as_a
     refute_match(/type="button"/, output)
   end
 
+  def test_unexpected_as_value_still_renders_a_typed_button
+    output = phlex { RubyUI.TabsTrigger(value: "account", as: :buton) { "Account" } }
+
+    assert_match(/\A<button/, output)
+    assert_match(/type="button"/, output)
+  end
+
   def test_keeps_trigger_data_attributes_when_rendered_as_anchor
     output = phlex { RubyUI.TabsTrigger(value: "account", as: :a, href: "/account") { "Account" } }
 

From f753dd833557d01fbc393ccfe069ed15695ab0db Mon Sep 17 00:00:00 2001
From: Jackson Pires <jackson.pires@gmail.com>
Date: Mon, 15 Jun 2026 14:00:17 -0300
Subject: [PATCH 3/3] [Chore] Rebuild MCP registry for TabsTrigger as: option

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 mcp/data/registry.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mcp/data/registry.json b/mcp/data/registry.json
index 6441d6cf5..3dd872d45 100644
--- a/mcp/data/registry.json
+++ b/mcp/data/registry.json
@@ -2301,7 +2301,7 @@
         },
         {
           "path": "tabs_trigger.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class TabsTrigger < Base\n    def initialize(value:, **attrs)\n      @value = value\n      super(**attrs)\n    end\n\n    def view_template(&)\n      button(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        type: :button,\n        data: {\n          ruby_ui__tabs_target: \"trigger\",\n          action: \"click->ruby-ui--tabs#show\",\n          value: @value\n        },\n        class: [\n          \"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all\",\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          \"aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed\",\n          \"data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        ]\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class TabsTrigger < Base\n    def initialize(value:, as: :button, **attrs)\n      @value = value\n      @as = as\n      super(**attrs)\n    end\n\n    def view_template(&)\n      if @as == :a\n        a(**attrs, &)\n      else\n        button(**attrs, &)\n      end\n    end\n\n    private\n\n    def default_attrs\n      base = {\n        data: {\n          ruby_ui__tabs_target: \"trigger\",\n          action: \"click->ruby-ui--tabs#show\",\n          value: @value\n        },\n        class: [\n          \"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all\",\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          \"aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed\",\n          \"data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        ]\n      }\n      base[:type] = :button unless @as == :a\n      base\n    end\n  end\nend\n"
         }
       ],
       "dependencies": {