From d98aebebac0de19d85a09d48ef345a1a180f62a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jean=20Mendon=C3=A7a?= <pierrybm@gmail.com>
Date: Thu, 5 Nov 2026 13:37:04 -0300
Subject: [PATCH 1/3] Register DataTable look differences that render the same
 as divergences

---
 audit/divergences/data_table.yml | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/audit/divergences/data_table.yml b/audit/divergences/data_table.yml
index 3f9e63136..0c2bfb089 100644
--- a/audit/divergences/data_table.yml
+++ b/audit/divergences/data_table.yml
@@ -4,3 +4,24 @@
   shadcn: "dashboard-01 block: div with four <button>s calling TanStack Table's page setters; disabled ends use the disabled attribute"
   reason: "RubyUI's DataTable is server-driven: paging is a GET answered with HTML and swapped by a Turbo Frame, so links work without JS and can be opened in a new tab. Look and accessible names match the block."
   since: "2026-11-02"
+- component: data_table
+  dimension: Look
+  match: {part: DataTableColumnToggle, property: display, rubyui: inline-flex, shadcn: flex}
+  rubyui: "Columns trigger (RubyUI::Button, inline-flex) sits inside the DropdownMenu and DropdownMenuTrigger wrappers, so it stays inline-flex"
+  shadcn: "dashboard-01 block: the trigger Button (also inline-flex) is a direct child of div.flex, so the browser blockifies it to flex"
+  reason: "Same classes on both sides; only the parent differs. RubyUI's DropdownMenu needs its wrapper elements for the Stimulus controller and the popover. The trigger's box is identical (1142.9, 24, 113.1x32 at 1280x800)."
+  since: "2026-11-05"
+- component: data_table
+  dimension: Look
+  match: {part: DataTableRowCheckbox, property: display, rubyui: block, shadcn: flex}
+  rubyui: "Row checkbox is RubyUI::Checkbox, a native <input type=checkbox> (blockified to block inside div.flex)"
+  shadcn: "Base UI Checkbox root is a <span class=\"flex …\"> that centers its indicator"
+  reason: "The native input draws its check itself and has no children to lay out, so display flex would change nothing; same 16x16 box and x position on both sides."
+  since: "2026-11-05"
+- component: data_table
+  dimension: Look
+  match: {part: DataTableRowCheckbox, property: text-align, rubyui: start, shadcn: left}
+  rubyui: "Native checkbox input: text-align start (the UA default for inputs)"
+  shadcn: "Base UI span: text-align left, inherited from the table cell"
+  reason: "start and left are the same in LTR, and a checkbox input has no text to align."
+  since: "2026-11-05"

From f2b5147408864a008fdebbe97e200f4069f42e67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jean=20Mendon=C3=A7a?= <pierrybm@gmail.com>
Date: Thu, 5 Nov 2026 13:38:56 -0300
Subject: [PATCH 2/3] Leave shadcn's 24px between the DataTable toolbar and the
 table

---
 gem/lib/ruby_ui/data_table/data_table_toolbar.rb | 4 +++-
 gem/test/ruby_ui/data_table_toolbar_test.rb      | 5 +++++
 mcp/data/registry/components/data_table.json     | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/gem/lib/ruby_ui/data_table/data_table_toolbar.rb b/gem/lib/ruby_ui/data_table/data_table_toolbar.rb
index e94867a2a..3452c888c 100644
--- a/gem/lib/ruby_ui/data_table/data_table_toolbar.rb
+++ b/gem/lib/ruby_ui/data_table/data_table_toolbar.rb
@@ -9,7 +9,9 @@ def view_template(&)
     private
 
     def default_attrs
-      {class: "flex items-center justify-between gap-2"}
+      # pb-2 on top of DataTable's space-y-4 leaves 24px above the table, as the
+      # gap-6 between the toolbar and the table in shadcn's dashboard-01 block.
+      {class: "flex items-center justify-between gap-2 pb-2"}
     end
   end
 end
diff --git a/gem/test/ruby_ui/data_table_toolbar_test.rb b/gem/test/ruby_ui/data_table_toolbar_test.rb
index e78b9f9d9..2096d9cb8 100644
--- a/gem/test/ruby_ui/data_table_toolbar_test.rb
+++ b/gem/test/ruby_ui/data_table_toolbar_test.rb
@@ -8,4 +8,9 @@ def test_renders_div_with_flex_layout_and_children
     assert_match(/<div[^>]*class="[^"]*flex[^"]*"/, output)
     assert_match(/INNER/, output)
   end
+
+  def test_leaves_the_block_gap_above_the_table
+    output = phlex { RubyUI.DataTableToolbar { "INNER" } }
+    assert_match(/<div[^>]*class="[^"]*\bpb-2\b/, output)
+  end
 end
diff --git a/mcp/data/registry/components/data_table.json b/mcp/data/registry/components/data_table.json
index c982838c4..6283db28c 100644
--- a/mcp/data/registry/components/data_table.json
+++ b/mcp/data/registry/components/data_table.json
@@ -80,7 +80,7 @@
     },
     {
       "path": "data_table_toolbar.rb",
-      "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class DataTableToolbar < Base\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {class: \"flex items-center justify-between gap-2\"}\n    end\n  end\nend\n"
+      "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class DataTableToolbar < Base\n    def view_template(&)\n      div(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      # pb-2 on top of DataTable's space-y-4 leaves 24px above the table, as the\n      # gap-6 between the toolbar and the table in shadcn's dashboard-01 block.\n      {class: \"flex items-center justify-between gap-2 pb-2\"}\n    end\n  end\nend\n"
     }
   ],
   "dependencies": {

From ceffe44d6634f786468ed653fd2e06b6a6c6a259 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jean=20Mendon=C3=A7a?= <pierrybm@gmail.com>
Date: Thu, 5 Nov 2026 13:40:25 -0300
Subject: [PATCH 3/3] Give the DataTable audit fixture the same badges as
 shadcn's block

---
 audit/fixtures/data_table/rubyui.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/audit/fixtures/data_table/rubyui.rb b/audit/fixtures/data_table/rubyui.rb
index 40a07c810..f1d267179 100644
--- a/audit/fixtures/data_table/rubyui.rb
+++ b/audit/fixtures/data_table/rubyui.rb
@@ -44,8 +44,8 @@ def view_template
                     TableRow do
                       TableCell(class: "w-8") { div(class: "flex items-center justify-center") { DataTableRowCheckbox(value: id, label: "Select row") } }
                       TableCell { header }
-                      TableCell(data: {column: "type"}) { Badge(variant: :outline, size: :sm) { type } }
-                      TableCell(data: {column: "status"}) { Badge(variant: :outline, size: :sm) { status } }
+                      TableCell(data: {column: "type"}) { Badge(variant: :outline, class: "px-1.5 text-muted-foreground") { type } }
+                      TableCell(data: {column: "status"}) { Badge(variant: :outline, class: "px-1.5 text-muted-foreground") { status } }
                       TableCell(data: {column: "reviewer"}) { reviewer }
                     end
                   end