From 8e735ccdc06c087238039790483339be3d4ce288 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 10:09:32 -0300
Subject: [PATCH 01/20] [Documentation] RubyUI 2.0: Phase 2.0a implementation
 plan

Eight tasks with bite-sized steps: the inline Rails harness, the
attribute layer with Phlex's guards, RubyUI::Component with a scoped
sidecar lookup, the enum helper, the golden suite's ERB lane proved on
Button's 15 fixtures, the strict lane with 36 recorded snapshots, the
decision log, and the PR.

Every mechanism was spiked before being planned: the scoped lookup
ignores a host template at the same virtual path, phlex-rails renders
a still-Phlex component from ERB with a captured block, Herb rejects a
malformed sidecar, DetailsKey.clear picks up an edit, and the existing
suite is unchanged under the new harness with RAILS_ENV=test.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 ...20-phase-2-0a-foundation-implementation.md | 2030 +++++++++++++++++
 1 file changed, 2030 insertions(+)
 create mode 100644 design/plans/2026-09-20-phase-2-0a-foundation-implementation.md

diff --git a/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md b/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
new file mode 100644
index 00000000..1f4604b0
--- /dev/null
+++ b/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
@@ -0,0 +1,2030 @@
+# Phase 2.0a — Foundation Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Put the 2.0 component layer, the test harness it needs, and the golden suite's ERB and strict lanes into the gem — with every component still Phlex — so that the fixtures plan (2.0b) and the migrations (2.1+) change only what they say they change.
+
+**Architecture:** A plain-Ruby `RubyUI::Component` (the 2.0 layer; it takes the name `Base` only when the last Phlex component is gone) renders an ERB sidecar found under the `RubyUI.component_roots` entry that contains its class file — never through the host's view paths. The gem's tests run inside a minimal inline `Rails::Application` so ReActionView's handler compiles every template through Herb exactly as a host app will. The golden suite gains an ERB lane (fixtures under `test/golden/views/`, rendered against the frozen snapshots — still-Phlex components render through `phlex-rails`) and a strict lane (the canonical form in preserve mode, for text-bearing components). Nothing under `gem/lib/ruby_ui/<component>/` changes.
+
+**Tech Stack:** Ruby 3.3 and 3.4, Minitest, ActionView / Railties 8.1, ReActionView 0.4, Herb 0.10, phlex-rails 2.4 (development only, for the transition), Nokogiri, tailwind_merge.
+
+**Spec:** `design/2026-09-19-rubyui-2-0-design.md` — this plan implements §6 "Phase 2.0 Foundation" with the mechanisms it left open now decided (Task 7 records them). Read §4, §6 "Phase 2", §9.1 and `design/v2/decisions.md` entries 1–4 before starting.
+
+## Global Constraints
+
+- Branch `v2/foundation`, created from `feat/golden-suite` (PR #536, unmerged); the PR for this plan targets `feat/golden-suite`. Never branch from or push to `main`.
+- Work in `gem/`. Run every command from `gem/`, never from the repo root. `ENV["RAILS_ENV"]` is `test` for every test run (the helper sets it).
+- Ruby 3.2+ syntax, 2-space indent, `snake_case` files, `CamelCase` classes. StandardRB is enforced and `bundle exec rake` runs it.
+- **No file under `gem/lib/ruby_ui/<component>/` changes.** No component migrates in this plan. The only new files under `gem/lib/ruby_ui/` are `component.rb` and `attributes.rb`, at the top level.
+- **No runtime dependency is added to `ruby_ui.gemspec`.** Every new dependency is `add_development_dependency`. The runtime dependencies arrive in Phase 2.4.
+- Never hand-edit a file under `gem/test/golden/snapshots/` or `gem/test/golden/strict/`. The 188 golden snapshots do not change in this plan (`git status --porcelain gem/test/golden/snapshots` is empty at the end of every task). Strict snapshots are created only by `bundle exec rake golden:update`, in Task 6.
+- `mcp/data/registry.json` embeds the source of every file under `gem/lib/ruby_ui/<component>/`. This plan adds no such file, so `cd mcp && bundle exec exe/ruby-ui-mcp-build && git diff --exit-code data/registry.json` must pass at the end of every task. Do not touch `docs/`.
+- Never commit with `bundle exec rake` failing or skipping.
+- Every commit message ends with a `Co-Authored-By:` line naming the model that wrote it.
+- Expected lint counts follow StandardRB's rule of one per Ruby file: 410 on the branch today, and each task states its new total.
+
+---
+
+## File Structure
+
+| File | Responsibility |
+| --- | --- |
+| `gem/ruby_ui.gemspec` | Gains four development dependencies. Runtime dependencies stay empty. |
+| `gem/test/test_helper.rb` | Boots the inline `RubyUI::TestApp`, configures ReActionView, sets `RubyUI.component_roots`, loads the probe components, exposes `RubyUI::TestApp.view(*paths)` and `ComponentTest#render_erb`. |
+| `gem/test/erb_harness_test.rb` | Proves the harness: ReActionView's handler is registered under `Rails.root`, and a malformed template is refused at compile time. |
+| `gem/lib/ruby_ui/attributes.rb` | The attribute layer: `mix`, `merge_classes`, `flat`, with Phlex 2.4.1's guards. Pure Ruby, no view context. |
+| `gem/lib/ruby_ui/component.rb` | `RubyUI::Component` (`initialize`, `render_in`, `helpers`, `enum`), `RubyUI.component_roots`, the scoped template lookup. |
+| `gem/test/ruby_ui/attributes_test.rb` | Unit tests for the guards. |
+| `gem/test/ruby_ui/attributes_differential_test.rb` | `Attributes` against Phlex 2.4.1, canonical form to canonical form. |
+| `gem/test/ruby_ui/component_test.rb` | The layer's behaviour, through probe components. |
+| `gem/test/ruby_ui/enum_test.rb` | The `enum` helper. |
+| `gem/test/probes/ruby_ui/probes/*.rb` + `.html.erb` | Test-only components under a second component root. Never shipped. |
+| `gem/test/probes/views/**` | Test-only ERB views: the differential probe, the layer probes, a host template that must **not** shadow a sidecar. |
+| `gem/test/golden/catalog.rb` | Scenarios gain a fixture path and a list of lanes; `component_classes` covers both bases. |
+| `gem/test/golden/harness.rb` | `render_erb`; the pins and the coverage hook on `RubyUI::Component`. |
+| `gem/test/golden_test.rb` | One test per scenario per lane; strict comparison where a strict snapshot exists; two more coverage tests. |
+| `gem/test/golden/views/<component>/<name>.html.erb` | The ERB lane's fixtures. This plan writes Button's 15; 2.0b writes the other 173. |
+| `gem/test/golden/canonical_html.rb` | `strict:` mode. |
+| `gem/test/golden/strict/<component>/<name>.html` | Strict snapshots, 36 files, recorded from the Phlex lane. |
+| `design/v2/decisions.md` | Entries 5–9. |
+| `design/2026-09-19-rubyui-2-0-design.md` | §4.4 and §6 Phase 2.0 amended to what this plan built. |
+
+---
+
+## Task 1: The harness — an inline Rails application
+
+ReActionView's handler reads `Rails.root` without a guard (`local_template?`, `project_path`), and a template outside `Rails.root` is "external": when Herb rejects it, `external_template_mode: :fallback` **silently recompiles it with Erubi**. So the gem's tests need a `Rails`, and its root must be the gem directory. The smallest honest thing is an inline `Rails::Application` — no `app/` directory, no routes, no database — booted from `test_helper.rb`. Measured on this branch: with it in place the existing suite stays at 500 runs, 0 failures, 0 snapshot changes, and `ActionView::Template.handler_for_extension(:erb)` is `ReActionView::Template::Handlers::ERB`.
+
+One trap, also measured: without `RAILS_ENV=test`, `Rails.env` is `development` and 1.6's `Base#before_template` emits `<!-- Before RubyUI::X -->`, which fails six unit tests. The helper sets the env first.
+
+**Files:**
+- Modify: `gem/ruby_ui.gemspec`
+- Modify: `gem/Gemfile.lock` (by `bundle install`)
+- Modify: `gem/test/test_helper.rb`
+- Create: `gem/test/erb_harness_test.rb`
+- Create: `gem/test/probes/views/probe/malformed.html.erb`
+
+**Interfaces:**
+- Consumes: nothing from earlier tasks.
+- Produces:
+  - `RubyUI::TestApp` — the inline application; `Rails.root` is the gem directory, `Rails.env` is `test`.
+  - `RubyUI::TestApp.view(*paths)` → an `ActionView::Base` instance whose view paths are `paths` (default: `gem/test/probes/views`), sharing one compiled-template cache per process. `view.render(template: "probe/x")` renders `test/probes/views/probe/x.html.erb`; `view.render(object)` goes through `object.render_in`.
+  - `ComponentTest#render_erb(template)` → `RubyUI::TestApp.view.render(template:)`, a String.
+  - `ReActionView.config` set to `intercept_erb = true`, `validation_mode = :raise`, `debug_mode = false`.
+
+- [ ] **Step 1: Add the development dependencies**
+
+In `gem/ruby_ui.gemspec`, after the `nokogiri` line, add:
+
+```ruby
+  # 2.0 harness: the inline Rails application the tests boot, ReActionView's
+  # handler (so ERB compiles through Herb as it will in a host app), and
+  # phlex-rails so ERB fixtures can render components that are still Phlex
+  # during the migration. phlex-rails leaves with the last Phlex component.
+  s.add_development_dependency "railties", "~> 8.1"
+  s.add_development_dependency "actionview", "~> 8.1"
+  s.add_development_dependency "reactionview", "~> 0.4"
+  s.add_development_dependency "phlex-rails", "~> 2.4"
+```
+
+```bash
+cd gem
+bundle install
+grep -E "^    (railties|actionview|reactionview|phlex-rails|herb) \(" Gemfile.lock
+```
+
+Expected: `railties (8.1.3.1)`, `actionview (8.1.3.1)`, `reactionview (0.4.1)`, `phlex-rails (2.4.0)`, `herb (0.10.4)` (plus herb's platform lines). If `reactionview` resolves to anything other than 0.4.x or `herb` to anything other than 0.10.x, STOP — the plan was measured against those.
+
+- [ ] **Step 2: Write the failing harness test**
+
+Create `gem/test/probes/views/probe/malformed.html.erb` with exactly:
+
+```erb
+<div><span></div>
+```
+
+Create `gem/test/erb_harness_test.rb`:
+
+```ruby
+# frozen_string_literal: true
+
+require "test_helper"
+
+# The gem's tests compile ERB the way a host application will: through
+# ReActionView's handler, with Herb validating, under Rails.root. Everything
+# the ERB lane and the component layer do later stands on these two facts.
+class ErbHarnessTest < Minitest::Test
+  def test_erb_is_compiled_by_reactionview_under_rails_root
+    ActionView::Base # the handler is swapped when ActionView::Base loads
+
+    assert_equal ReActionView::Template::Handlers::ERB, ActionView::Template.handler_for_extension(:erb)
+    assert_equal File.expand_path("..", __dir__), Rails.root.to_s
+    assert_equal "test", Rails.env
+  end
+
+  def test_a_malformed_template_is_refused_at_compile_time
+    error = assert_raises(ActionView::SyntaxErrorInTemplate) do
+      RubyUI::TestApp.view.render(template: "probe/malformed")
+    end
+
+    assert_match(/closing tag/i, error.cause.message)
+  end
+end
+```
+
+- [ ] **Step 3: Run it and confirm it fails**
+
+```bash
+cd gem
+bundle exec rake test N=/ErbHarnessTest/
+```
+
+Expected: 2 runs, 2 errors — `RubyUI::TestApp` is undefined (NameError) and `Rails` is not loaded.
+
+- [ ] **Step 4: Rewrite `test_helper.rb`**
+
+Replace `gem/test/test_helper.rb` with exactly:
+
+```ruby
+# frozen_string_literal: true
+
+ENV["RAILS_ENV"] ||= "test"
+
+$LOAD_PATH.unshift File.expand_path("../lib", __dir__)
+require "ruby_ui"
+require "phlex"
+require "json"
+require "securerandom"
+require "rails"
+require "action_controller/railtie"
+require "reactionview"
+require "phlex-rails"
+require "minitest/autorun"
+
+module RubyUI
+  extend Phlex::Kit
+
+  Dir.glob("lib/ruby_ui/**/*.rb").reject { |f| f.include?("/docs/") || f.end_with?("_docs.rb") }.map do |path|
+    class_name = path.split("/").last.delete_suffix(".rb").split("_").map(&:capitalize).join.to_sym
+
+    autoload class_name, path
+  end
+
+  # The smallest Rails application that gives ReActionView what it reads:
+  # `Rails.root` (a template under it is "local", so a Herb rejection raises
+  # instead of falling back to Erubi), `Rails.env` and `Rails.logger`. No app/
+  # directory, no routes, no database — an object, so the gem's tests compile
+  # ERB exactly as a host application will.
+  class TestApp < Rails::Application
+    ROOT = File.expand_path("..", __dir__)
+    PROBE_VIEWS = File.join(ROOT, "test/probes/views")
+
+    config.root = ROOT
+    config.eager_load = false
+    config.secret_key_base = "ruby_ui-test"
+    config.logger = Logger.new(IO::NULL)
+    config.hosts.clear
+
+    class << self
+      # One compiled-template cache per process, as in an app; a fresh view
+      # context per call, with the given view paths.
+      def view(*paths)
+        view_class.with_view_paths(paths.empty? ? [PROBE_VIEWS] : paths)
+      end
+
+      private
+
+      def view_class
+        @view_class ||= ActionView::Base.with_empty_template_cache
+      end
+    end
+  end
+end
+
+ReActionView.config.intercept_erb = true
+ReActionView.config.validation_mode = :raise
+ReActionView.config.debug_mode = false
+Rails.application.initialize!
+
+class ComponentTest < Minitest::Test
+  def render(component, &)
+    component.call(&)
+  end
+
+  def phlex(&)
+    render Phlex::HTML.new, &
+  end
+
+  def render_erb(template)
+    RubyUI::TestApp.view.render(template: template)
+  end
+end
+```
+
+- [ ] **Step 5: Run the harness test and confirm it passes**
+
+```bash
+cd gem
+bundle exec rake test N=/ErbHarnessTest/
+```
+
+Expected: `2 runs, 4 assertions, 0 failures, 0 errors`.
+
+- [ ] **Step 6: Run everything and confirm nothing else moved**
+
+```bash
+cd gem
+bundle exec rake
+```
+
+Expected: `502 runs, ... 0 failures, 0 errors, 0 skips` and `411 files inspected, no offenses detected`. Then:
+
+```bash
+cd /Users/cirdes/Workspaces/ruby_ui
+git status --porcelain gem/test/golden/snapshots
+cd mcp && bundle exec exe/ruby-ui-mcp-build >/dev/null && git diff --exit-code data/registry.json && echo "registry current"
+```
+
+Expected: no snapshot lines; `registry current`. If any golden test fails or a snapshot changed, STOP — phlex-rails or the Rails boot has altered what the Phlex lane renders, and that is a finding, not something to re-record.
+
+- [ ] **Step 7: Commit**
+
+```bash
+cd /Users/cirdes/Workspaces/ruby_ui
+git add gem/ruby_ui.gemspec gem/Gemfile.lock gem/test/test_helper.rb gem/test/erb_harness_test.rb gem/test/probes/views/probe/malformed.html.erb
+git commit -m "$(cat <<'MSG'
+[Feature] Test harness: boot an inline Rails application so ERB compiles through Herb
+
+ReActionView's handler reads Rails.root, and a template outside it is
+recompiled with Erubi when Herb rejects it. The gem's tests now boot the
+smallest Rails::Application — no app directory, no routes — with the gem
+as its root, so every ERB template compiles exactly as it will in a host
+app, and a malformed one is refused at compile time.
+
+RAILS_ENV is pinned to test: in development, 1.6's Base emits a
+comment before every component and six unit tests fail on it.
+
+phlex-rails is a development dependency for the migration only, so the
+ERB fixtures can render components that are still Phlex.
+
+Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
+MSG
+)"
+```
+
+---
+
+## Task 2: `RubyUI::Attributes`, with Phlex's guards
+
+The attribute layer was written and proved in the gate (`experiments/v2-gate` on `v2-herb`): `mix` with `Phlex::Helpers#mix` semantics, `merge_classes` with tailwind_merge, `flat` with Phlex 2.4.1's serialization — 15 hash shapes and 8 mix shapes checked against Phlex, canonical form to canonical form. It comes over as is, plus the one thing the gate left out and the review made mandatory (spec §4.3): Phlex's attribute guards. Phlex raises on an unsafe attribute name and drops a `javascript:` URL; the gate's layer passed `href="javascript:alert(1)" onclick="alert(1)"` straight to the page.
+
+**Files:**
+- Create: `gem/lib/ruby_ui/attributes.rb` (from `v2-herb`, then patched)
+- Create: `gem/test/ruby_ui/attributes_test.rb`
+- Create: `gem/test/ruby_ui/attributes_differential_test.rb` (from `v2-herb`, then patched)
+- Create: `gem/test/probes/views/probe/attributes.html.erb`
+
+**Interfaces:**
+- Consumes: `RubyUI::TestApp.view`, `Golden::CanonicalHtml.call` (Phase 1).
+- Produces:
+  - `RubyUI::Attributes.mix(*hashes)` → Hash (Phlex `mix` semantics; `key!` replaces).
+  - `RubyUI::Attributes.merge_classes(value)` → String.
+  - `RubyUI::Attributes.flat(hash)` → `Hash[String, String]`, the shape `tag.attributes` takes; raises `ArgumentError` on an unsafe name or an invalid URL-attribute value; omits a URL attribute whose value is a `javascript:` URL.
+  - Constants `UNSAFE_ATTRIBUTES`, `REF_ATTRIBUTES`, `UNSAFE_ATTRIBUTE_NAME_CHARS`.
+
+- [ ] **Step 1: Bring the layer over**
+
+```bash
+cd /Users/cirdes/Workspaces/ruby_ui
+git show v2-herb:experiments/v2-gate/app/components/ruby_ui/attributes.rb > gem/lib/ruby_ui/attributes.rb
+git show v2-herb:experiments/v2-gate/test/attributes_differential_test.rb > gem/test/ruby_ui/attributes_differential_test.rb
+```
+
+- [ ] **Step 2: Write the failing guard tests**
+
+Create `gem/test/ruby_ui/attributes_test.rb`:
+
+```ruby
+# frozen_string_literal: true
+
+require "test_helper"
+
+# Phlex 2.4.1's attribute guards, ported into the 2.0 layer so a component
+# given untrusted values keeps the protection it has today. Each case mirrors
+# phlex/sgml/attributes.rb; the differential test covers the happy path.
+class AttributesTest < Minitest::Test
+  def flat(**attributes)
+    RubyUI::Attributes.flat(attributes)
+  end
+
+  def test_an_event_handler_attribute_name_raises
+    assert_raises(ArgumentError) { flat(onclick: "x") }
+    assert_raises(ArgumentError) { flat("onClick" => "x") }
+    assert_raises(ArgumentError) { flat(onerror: "x") }
+  end
+
+  def test_srcdoc_sandbox_and_http_equiv_raise
+    assert_raises(ArgumentError) { flat(srcdoc: "<p>") }
+    assert_raises(ArgumentError) { flat(sandbox: "") }
+    assert_raises(ArgumentError) { flat("http-equiv" => "refresh") }
+  end
+
+  def test_a_name_with_forbidden_characters_raises_at_any_level
+    assert_raises(ArgumentError) { flat("bad name" => "1") }
+    assert_raises(ArgumentError) { flat("a=b" => "1") }
+    assert_raises(ArgumentError) { flat(data: {"x y" => "1"}) }
+  end
+
+  def test_a_javascript_url_is_dropped_from_a_url_attribute
+    assert_equal({}, flat(href: "javascript:alert(1)"))
+    assert_equal({}, flat(src: "JavaScript:alert(1)"))
+    assert_equal({}, flat(href: " java\nscript:alert(1)"))
+    assert_equal({}, flat(href: "&#106;avascript:alert(1)"))
+    assert_equal({}, flat(href: "&#x6A;avascript:alert(1)"))
+    assert_equal({}, flat(href: "javascript&colon;alert(1)"))
+    assert_equal({}, flat(formaction: "javascript:alert(1)"))
+  end
+
+  def test_an_ordinary_url_is_kept
+    assert_equal({"href" => "/edit"}, flat(href: "/edit"))
+    assert_equal({"href" => "https://example.com/?q=javascript"}, flat(href: "https://example.com/?q=javascript"))
+    assert_equal({"src" => "javascript-guide.png"}, flat(src: "javascript-guide.png"))
+  end
+
+  def test_a_non_string_value_for_a_url_attribute_raises
+    assert_raises(ArgumentError) { flat(href: 1) }
+    assert_raises(ArgumentError) { flat(href: :edit) }
+    assert_raises(ArgumentError) { flat(href: {}) }
+  end
+
+  def test_true_is_allowed_on_a_url_attribute
+    assert_equal({"href" => ""}, flat(href: true))
+  end
+
+  def test_a_nested_on_key_is_not_an_event_handler
+    # Phlex checks `on*` only on top-level names; `data-onclick` is a plain
+    # data attribute and stays one here.
+    assert_equal({"data-onclick" => "x"}, flat(data: {onclick: "x"}))
+  end
+
+  def test_the_guard_does_not_touch_ordinary_attributes
+    assert_equal({"class" => "a b", "data-open" => "", "aria-label" => "L"},
+      flat(class: ["a", "b"], data: {open: true}, aria: {label: "L"}))
+  end
+end
+```
+
+- [ ] **Step 3: Run them and confirm the guard tests fail**
+
+```bash
+cd gem
+bundle exec rake test N=/AttributesTest/
+```
+
+Expected: 9 runs; `test_an_ordinary_url_is_kept`, `test_true_is_allowed_on_a_url_attribute`, `test_a_nested_on_key_is_not_an_event_handler` and `test_the_guard_does_not_touch_ordinary_attributes` pass (the ported layer already does that); the other 5 FAIL — nothing raises, nothing is dropped.
+
+- [ ] **Step 4: Patch `attributes.rb` with the guards**
+
+In `gem/lib/ruby_ui/attributes.rb`:
+
+**(a)** Replace the comment paragraph that begins `# Not reproduced: Phlex's guards` (three lines, ending `depend on either.`) with:
+
+```ruby
+  # Phlex's guards (phlex/sgml/attributes.rb) are ported, so a component given
+  # untrusted values keeps the protection it has today: a name with `<>&"'/=`,
+  # whitespace or NUL raises; `srcdoc`, `sandbox`, `http-equiv` and any `on*`
+  # handler name raise; a URL-bearing attribute (`href`, `src`, `action`, …)
+  # whose decoded value starts with `javascript:` is dropped, and a non-String
+  # value for one of them raises. Not ported: Phlex's `:id`-must-be-a-lowercase-
+  # Symbol check (a Phlex convention) and the leading space it leaves when the
+  # first `style:` value is nil (no snapshot depends on it).
+```
+
+**(b)** After `TAILWIND_MERGER = TailwindMerge::Merger.new.freeze`, add:
+
+```ruby
+    UNSAFE_ATTRIBUTES = Set.new(%w[srcdoc sandbox http-equiv]).freeze
+    REF_ATTRIBUTES = Set.new(%w[href src action formaction lowsrc dynsrc background ping xlinkhref]).freeze
+    UNSAFE_ATTRIBUTE_NAME_CHARS = %r([<>&"'/=\s\x00])
+
+    # The character references decoded before the `javascript:` check. Phlex
+    # decodes every named reference; these are the numeric forms plus the
+    # named ones that can hide a scheme separator.
+    NAMED_REFERENCES = {
+      "colon" => ":", "tab" => "\t", "newline" => "\n",
+      "amp" => "&", "lt" => "<", "gt" => ">", "quot" => '"', "apos" => "'"
+    }.freeze
+```
+
+**(c)** In `flat`, replace the two lines
+
+```ruby
+          name = key_name(key)
+          case value
+```
+
+with
+
+```ruby
+          name = key_name(key)
+          next if guard(name, value) == :drop
+
+          case value
+```
+
+**(d)** In `nested`, replace the line that computes `name` — it begins `name = (key == :_) ?` — so that it is followed by the name-character check:
+
+```ruby
+          name = (key == :_) ? prefix.delete_suffix("-") : "#{prefix}#{key_name(key)}"
+          raise ArgumentError, "unsafe attribute name #{name.inspect}" if name.match?(UNSAFE_ATTRIBUTE_NAME_CHARS)
+
+```
+
+**(e)** Add two private methods after `key_name`:
+
+```ruby
+      # :keep or :drop. Raises for the names Phlex refuses.
+      def guard(name, value)
+        raise ArgumentError, "unsafe attribute name #{name.inspect}" if name.match?(UNSAFE_ATTRIBUTE_NAME_CHARS)
+
+        normalized = name.downcase.delete("^a-z-")
+        if UNSAFE_ATTRIBUTES.include?(normalized) ||
+            (normalized.bytesize > 2 && normalized.start_with?("on") && !normalized.include?("-"))
+          raise ArgumentError, "unsafe attribute name #{name.inspect}"
+        end
+
+        return :keep unless value != true && REF_ATTRIBUTES.include?(normalized)
+        raise ArgumentError, "invalid value for #{name}: #{value.inspect}" unless value.is_a?(String)
+
+        decode_references(value).downcase.delete("^a-z:").start_with?("javascript:") ? :drop : :keep
+      end
+
+      def decode_references(value)
+        value
+          .gsub(/&#x([0-9a-f]+);?/i) { [$1.to_i(16)].pack("U*") }
+          .gsub(/&#(\d+);?/) { [$1.to_i].pack("U*") }
+          .gsub(/&([a-z][a-z0-9]+);?/i) { NAMED_REFERENCES[$1.downcase] || "" }
+      end
+```
+
+- [ ] **Step 5: Run the guard tests and confirm all nine pass**
+
+```bash
+cd gem
+bundle exec rake test N=/AttributesTest/
+```
+
+Expected: `9 runs, ... 0 failures, 0 errors`.
+
+- [ ] **Step 6: Adapt the differential test to the harness**
+
+Create `gem/test/probes/views/probe/attributes.html.erb` with exactly:
+
+```erb
+<div <%= tag.attributes(RubyUI::Attributes.flat(h)) %>></div>
+```
+
+In `gem/test/ruby_ui/attributes_differential_test.rb`:
+
+- Replace the `require "test_helper"` / `require "phlex"` lines at the top with:
+
+  ```ruby
+  require "test_helper"
+  require "golden/canonical_html"
+  ```
+
+- Replace `class AttributesDifferentialTest < ActiveSupport::TestCase` with `class AttributesDifferentialTest < Minitest::Test`.
+- Every `test "…" do` block becomes `define_method(:"test_…") do`. Concretely: `test "flat: #{label}" do` → `define_method(:"test_flat_#{label.tr(" ", "_")}") do`; `test "mix ##{index + 1}: …" do` → `define_method(:"test_mix_#{index + 1}") do`; the last one, `test "merge_classes accepts …" do` → `def test_merge_classes_applies_tailwind_merge_like_1_6_base`.
+- Replace the `canonical_erb` method body so it renders through the harness:
+
+  ```ruby
+  def canonical_erb(attributes)
+    Golden::CanonicalHtml.call(RubyUI::TestApp.view.render(template: "probe/attributes", locals: {h: attributes}))
+  end
+  ```
+
+- [ ] **Step 7: Run the differential test and confirm it passes**
+
+```bash
+cd gem
+bundle exec rake test N=/AttributesDifferentialTest/
+```
+
+Expected: `24 runs, ... 0 failures, 0 errors` — 15 flat cases, 8 mix cases, 1 merge case. If any flat or mix case fails, STOP: the layer disagrees with Phlex 2.4.1 for that shape and the disagreement is the finding.
+
+- [ ] **Step 8: Run everything**
+
+```bash
+cd gem
+bundle exec rake
+```
+
+Expected: `535 runs, ... 0 failures, 0 errors, 0 skips`, `414 files inspected, no offenses detected`. Snapshots unchanged; registry current (`attributes.rb` is a top-level file, not under a component directory, so the builder does not embed it):
+
+```bash
+cd /Users/cirdes/Workspaces/ruby_ui
+git status --porcelain gem/test/golden/snapshots
+cd mcp && bundle exec exe/ruby-ui-mcp-build >/dev/null && git diff --exit-code data/registry.json && echo "registry current"
+```
+
+- [ ] **Step 9: Commit**
+
+```bash
+cd /Users/cirdes/Workspaces/ruby_ui
+git add gem/lib/ruby_ui/attributes.rb gem/test/ruby_ui/attributes_test.rb gem/test/ruby_ui/attributes_differential_test.rb gem/test/probes/views/probe/attributes.html.erb
+git commit -m "$(cat <<'MSG'
+[Feature] RubyUI::Attributes: the 2.0 attribute layer, with Phlex's guards
+
+mix, merge_classes and flat come from the v2 gate, where they were
+checked against Phlex 2.4.1 for 15 hash shapes and 8 mix shapes; that
+differential test comes with them. Added on top: Phlex's attribute
+guards — an unsafe name raises, a javascript: URL in a URL attribute is
+dropped — so a component given untrusted values keeps the protection
+it has in 1.6.
+
+Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
+MSG
+)"
+```
+
+---
+
+## Task 3: `RubyUI::Component` and the scoped sidecar lookup
+
+The 2.0 layer is a plain Ruby class that ActionView renders through `render_in`. Its sidecar is looked up under the entry of `RubyUI.component_roots` that contains the class file — `lib` in the gem, `app/components` in a host app — through a `LookupContext` of its own, never through the application's view paths. Measured in a spike on this branch: a host template at the same virtual path is not picked; an ERB block with a parameter is captured; a second render without a block has `content == nil`; an edit to the sidecar is picked up after `ActionView::LookupContext::DetailsKey.clear` (the resolver is registered with `ActionView::PathRegistry`, so Rails' reloader clears it).
+
+The class is named `Component` for the duration of Phase 2. `RubyUI::Base` is the Phlex base that 256 components still inherit; two classes cannot share the name. `Component` becomes `Base` in one commit in Phase 2.4, when no Phlex component is left (decision 6, Task 7).
+
+**Files:**
+- Create: `gem/lib/ruby_ui/component.rb`
+- Create: `gem/test/probes/ruby_ui/probes/div.rb`, `div.html.erb`, `rootless.rb`, `rootless.html.erb`, `with_id.rb`, `with_id.html.erb`, `frame.rb`, `frame.html.erb`, `fallback.rb`, `fallback.html.erb`, `bare.rb` (no sidecar, on purpose)
+- Create: `gem/test/probes/views/probe/div_default.html.erb`, `div_block_arg.html.erb`, `div_nested.html.erb`, `fallback_empty.html.erb`, `fallback_blank.html.erb`, `fallback_text.html.erb`
+- Create: `gem/test/probes/views/ruby_ui/probes/div.html.erb` (the host decoy)
+- Create: `gem/test/ruby_ui/component_test.rb`
+- Modify: `gem/test/test_helper.rb` (component roots, probe loading)
+
+**Interfaces:**
+- Consumes: `RubyUI::Attributes` (Task 2), `RubyUI::TestApp.view`, `ComponentTest#render_erb` (Task 1).
+- Produces:
+  - `RubyUI.component_roots` → `Array<String>`; `RubyUI.component_roots = [...]`.
+  - `RubyUI.lookup_for(root)` → memoized `ActionView::LookupContext` scoped to `root`.
+  - `RubyUI::Component#initialize(**attrs)`, `#attrs` (`Hash[String, String]`), `#render_in(view_context, **, &block)`, `#content` (`ActiveSupport::SafeBuffer` or `nil`), `#helpers` (the view context; raises outside `render_in`), private `#default_attrs` (`{}`).
+  - `RubyUI::Component.template` → `ActionView::Template` for the sidecar; raises `ArgumentError` naming the missing path or the roots.
+  - The `component` local inside every sidecar.
+  - Probe components `RubyUI::Probes::{Div, Rootless, WithId, Frame, Fallback, Bare}` under the root `gem/test/probes`.
+
+- [ ] **Step 1: Write the layer**
+
+Create `gem/lib/ruby_ui/component.rb`:
+
+```ruby
+# frozen_string_literal: true
+
+require "action_view"
+require_relative "attributes"
+
+module RubyUI
+  class << self
+    # The directories that hold `ruby_ui/`: `app/components` in a host
+    # application, `lib` in this gem. A component's sidecar template is looked
+    # up under the root that contains its class file, and nowhere else — the
+    # application's view paths are never consulted, so a host template at the
+    # same virtual path cannot shadow it and it cannot shadow the host.
+    def component_roots
+      @component_roots ||= []
+    end
+
+    attr_writer :component_roots
+
+    def lookup_for(root)
+      (@lookups ||= {})[root] ||= ActionView::LookupContext.new(
+        ActionView::PathRegistry.cast_file_system_resolvers([root]), {formats: [:html]}
+      )
+    end
+  end
+
+  # The 2.0 component layer: a plain Ruby object that ActionView renders
+  # through `render_in`, with an ERB sidecar template next to the class file.
+  #
+  #   # app/components/ruby_ui/dialog/dialog.rb
+  #   class RubyUI::Dialog < RubyUI::Component
+  #     def initialize(open: false, **attrs)
+  #       @open = open
+  #       super(**attrs)
+  #     end
+  #
+  #     private def default_attrs
+  #       {data: {controller: "ruby-ui--dialog", ruby_ui__dialog_open_value: @open}}
+  #     end
+  #   end
+  #
+  #   # app/components/ruby_ui/dialog/dialog.html.erb
+  #   <div <%= tag.attributes(component.attrs) %>><%= component.content %></div>
+  #
+  #   # a view
+  #   <%= render RubyUI::Dialog.new(open: true) do %> ... <% end %>
+  #
+  # `attrs` is computed in `initialize` with no view context — mix, Tailwind
+  # merge, then Phlex-semantics serialization (see Attributes) — so a component
+  # can read a neighbour's computed attributes (`Button.new(...).attrs["class"]`).
+  # `render_in` captures the caller's block with the component as the block
+  # argument (for `do |group|` components), then renders the sidecar with
+  # `component` as its only local. Nothing else: no named slots, no DSL.
+  #
+  # Named `Component` while the Phlex `RubyUI::Base` still exists; it takes
+  # the name `Base` when the last Phlex component is gone.
+  class Component
+    attr_reader :attrs, :content
+
+    def initialize(**user_attrs)
+      mixed = Attributes.mix(default_attrs, user_attrs)
+      mixed[:class] = Attributes.merge_classes(mixed[:class]) if mixed[:class]
+      @attrs = Attributes.flat(mixed)
+    end
+
+    # ActionView's renderable protocol. Rails passes `locals:`; the caller's
+    # locals are not the component's, so they are accepted and ignored.
+    # `content` is set on every call — nil without a block — so an instance
+    # rendered twice never repeats its first content.
+    def render_in(view_context, **, &block)
+      @view_context = view_context
+      @content = block ? view_context.capture(self, &block) : nil
+      self.class.template.render(view_context, {component: self})
+    end
+
+    # The view context, for a component that needs a Rails helper from Ruby
+    # (`helpers.form_authenticity_token`) or renders a neighbour from a method.
+    # Only available during render_in.
+    def helpers
+      @view_context or raise ArgumentError, "#{self.class.name} has no view context outside render_in"
+    end
+
+    class << self
+      # Looked up on every render, not cached here: the resolver behind the
+      # lookup context caches compiled templates and Rails' reloader clears it,
+      # so a Template cached on the class would outlive an edit in development.
+      def template
+        root = component_root
+        relative = source_file.delete_prefix("#{root}/").delete_suffix(".rb")
+        prefix, base = File.split(relative)
+        RubyUI.lookup_for(root).find(base, [prefix], false, [:component])
+      rescue ActionView::MissingTemplate
+        raise ArgumentError, "#{name} has no sidecar template at #{relative}.html.erb under #{root}"
+      end
+
+      def source_file
+        @source_file ||= Object.const_source_location(name)&.first or
+          raise ArgumentError, "#{name}: no source location to derive a sidecar template from"
+      end
+
+      def component_root
+        @component_root ||= RubyUI.component_roots.map(&:to_s).find { |root| source_file.start_with?("#{root}/") } or
+          raise ArgumentError, "#{name}: #{source_file} is under none of RubyUI.component_roots #{RubyUI.component_roots.inspect}"
+      end
+    end
+
+    private
+
+    def default_attrs
+      {}
+    end
+  end
+end
+```
+
+- [ ] **Step 2: Write the probe components**
+
+Every file below is under `gem/test/probes/ruby_ui/probes/`.
+
+`div.rb`:
+
+```ruby
+# frozen_string_literal: true
+
+module RubyUI
+  module Probes
+    # One element with attributes and content: the shape of most components.
+    class Div < Component
+      private
+
+      def default_attrs
+        {class: "probe", data: {probe: true}}
+      end
+    end
+  end
+end
+```
+
+`div.html.erb`:
+
+```erb
+<div <%= tag.attributes(component.attrs) %>><%= component.content %></div>
+```
+
+`rootless.rb`:
+
+```ruby
+# frozen_string_literal: true
+
+module RubyUI
+  module Probes
+    # Renders no root element at all when hidden — DataTablePagination's shape.
+    class Rootless < Component
+      def initialize(shown: true, **attrs)
+        @shown = shown
+        super(**attrs)
+      end
+
+      def shown? = @shown
+    end
+  end
+end
+```
+
+`rootless.html.erb`:
+
+```erb
+<% if component.shown? %><span <%= tag.attributes(component.attrs) %>>shown</span><% end %>
+```
+
+`with_id.rb`:
+
+```ruby
+# frozen_string_literal: true
+
+module RubyUI
+  module Probes
+    # Mints an id and cross-references it — SelectContent's shape.
+    class WithId < Component
+      attr_reader :id
+
+      def initialize(**attrs)
+        @id = "content#{SecureRandom.hex(4)}"
+        super(**attrs)
+      end
+    end
+  end
+end
+```
+
+`with_id.html.erb`:
+
+```erb
+<button aria-controls="<%= component.id %>">open</button><div id="<%= component.id %>"><%= component.content %></div>
+```
+
+`frame.rb`:
+
+```ruby
+# frozen_string_literal: true
+
+module RubyUI
+  module Probes
+    # A custom-element root — DataTableFrame's shape.
+    class Frame < Component
+      private
+
+      def default_attrs
+        {id: "frame"}
+      end
+    end
+  end
+end
+```
+
+`frame.html.erb`:
+
+```erb
+<turbo-frame <%= tag.attributes(component.attrs) %>><%= component.content %></turbo-frame>
+```
+
+`fallback.rb`:
+
+```ruby
+# frozen_string_literal: true
+
+module RubyUI
+  module Probes
+    # Content or a placeholder — SelectValue's shape.
+    class Fallback < Component
+      attr_reader :placeholder
+
+      def initialize(placeholder:, **attrs)
+        @placeholder = placeholder
+        super(**attrs)
+      end
+    end
+  end
+end
+```
+
+`fallback.html.erb`:
+
+```erb
+<span><%= component.content.presence || component.placeholder %></span>
+```
+
+`bare.rb` — deliberately without a sidecar:
+
+```ruby
+# frozen_string_literal: true
+
+module RubyUI
+  module Probes
+    # Has no sidecar on purpose: the lookup must say so, by name and path.
+    class Bare < Component
+    end
+  end
+end
+```
+
+- [ ] **Step 3: Write the probe views**
+
+Under `gem/test/probes/views/probe/`:
+
+`div_default.html.erb`:
+
+```erb
+<%= render RubyUI::Probes::Div.new do %>Hello<% end %>
+```
+
+`div_block_arg.html.erb`:
+
+```erb
+<%= render RubyUI::Probes::Div.new(id: "outer") do |div| %>id=<%= div.attrs["id"] %><% end %>
+```
+
+`div_nested.html.erb`:
+
+```erb
+<%= render RubyUI::Probes::Div.new(id: "outer") do |outer| %><%= render RubyUI::Probes::Div.new(id: "inner") do %>in <%= outer.attrs["id"] %><% end %><% end %>
+```
+
+`fallback_empty.html.erb`:
+
+```erb
+<%= render RubyUI::Probes::Fallback.new(placeholder: "Pick one") do %><% end %>
+```
+
+`fallback_blank.html.erb`:
+
+```erb
+<%= render RubyUI::Probes::Fallback.new(placeholder: "Pick one") do %>
+<% end %>
+```
+
+`fallback_text.html.erb`:
+
+```erb
+<%= render RubyUI::Probes::Fallback.new(placeholder: "Pick one") do %>Apple<% end %>
+```
+
+And the host decoy, `gem/test/probes/views/ruby_ui/probes/div.html.erb` — a template at exactly the virtual path of `Div`'s sidecar, on the harness's view path, which a view-path lookup would pick and the scoped lookup must not:
+
+```erb
+HOST SHADOW
+```
+
+- [ ] **Step 4: Wire the roots and the probes into the helper**
+
+In `gem/test/test_helper.rb`, after `Rails.application.initialize!`, add:
+
+```ruby
+# Two component roots: the gem's own components, and the test-only probes.
+# A class's sidecar is looked up under the root that contains the class file.
+RubyUI.component_roots = [File.join(RubyUI::TestApp::ROOT, "lib"), File.join(RubyUI::TestApp::ROOT, "test/probes")]
+Dir.glob(File.join(RubyUI::TestApp::ROOT, "test/probes/ruby_ui/**/*.rb")).sort.each { |probe| require probe }
+```
+
+- [ ] **Step 5: Write the failing layer tests**
+
+Create `gem/test/ruby_ui/component_test.rb`:
+
+```ruby
+# frozen_string_literal: true
+
+require "test_helper"
+require "golden/canonical_html"
+
+# The 2.0 component layer, through the probe components under test/probes.
+# Output is compared in canonical form where whitespace is irrelevant and raw
+# where it is the point. Inherits the helper base for render_erb.
+class LayerTest < ComponentTest
+  def canonical(html)
+    Golden::CanonicalHtml.call(html)
+  end
+
+  def view
+    RubyUI::TestApp.view
+  end
+
+  def test_attrs_are_computed_with_no_view_context
+    assert_equal({"class" => "probe", "data-probe" => ""}, RubyUI::Probes::Div.new.attrs)
+  end
+
+  def test_caller_classes_merge_over_defaults_and_nil_keeps_the_default
+    assert_equal "probe p-4", RubyUI::Probes::Div.new(class: "p-4").attrs["class"]
+    assert_equal "probe", RubyUI::Probes::Div.new(class: nil).attrs["class"]
+    assert_equal "p-4", RubyUI::Probes::Div.new(class!: "p-4").attrs["class"]
+  end
+
+  def test_renders_the_sidecar_with_attributes_and_content
+    assert_equal canonical(%(<div class="probe" data-probe="">Hello</div>)), canonical(render_erb("probe/div_default"))
+  end
+
+  def test_content_is_nil_when_rendered_without_a_block_even_after_a_render_with_one
+    component = RubyUI::Probes::Div.new
+    view.render(component) { "first" }
+
+    assert_equal canonical(%(<div class="probe" data-probe=""></div>)), canonical(view.render(component))
+  end
+
+  def test_the_block_receives_the_component
+    assert_includes render_erb("probe/div_block_arg"), "id=outer"
+  end
+
+  def test_a_component_renders_inside_another_components_block
+    html = render_erb("probe/div_nested")
+
+    assert_includes html, %(id="inner")
+    assert_includes html, "in outer"
+  end
+
+  def test_a_component_can_render_nothing
+    assert_equal "", view.render(RubyUI::Probes::Rootless.new(shown: false)).strip
+    assert_includes view.render(RubyUI::Probes::Rootless.new), "shown"
+  end
+
+  def test_a_minted_id_and_its_reference_line_up
+    html = view.render(RubyUI::Probes::WithId.new) { "body" }
+    id = html[/id="(content[0-9a-f]{8})"/, 1]
+
+    refute_nil id
+    assert_includes html, %(aria-controls="#{id}")
+  end
+
+  def test_a_custom_element_root
+    assert_equal canonical(%(<turbo-frame id="frame">x</turbo-frame>)), canonical(view.render(RubyUI::Probes::Frame.new) { "x" })
+  end
+
+  def test_content_presence_falls_back_to_the_placeholder
+    assert_equal canonical("<span>Pick one</span>"), canonical(render_erb("probe/fallback_empty"))
+    assert_equal canonical("<span>Pick one</span>"), canonical(render_erb("probe/fallback_blank"))
+    assert_equal canonical("<span>Apple</span>"), canonical(render_erb("probe/fallback_text"))
+  end
+
+  def test_helpers_raises_outside_render_in
+    error = assert_raises(ArgumentError) { RubyUI::Probes::Div.new.helpers }
+
+    assert_match(/no view context/, error.message)
+  end
+
+  def test_a_missing_sidecar_is_named
+    error = assert_raises(ArgumentError) { view.render(RubyUI::Probes::Bare.new) }
+
+    assert_match(%r{ruby_ui/probes/bare\.html\.erb}, error.message)
+  end
+
+  def test_a_host_template_at_the_same_virtual_path_is_not_picked
+    refute_includes render_erb("probe/div_default"), "HOST SHADOW"
+  end
+
+  def test_overlapping_roots_resolve_the_same_sidecar
+    # With the gem directory itself as a root ahead of test/probes, Div's file
+    # matches the wider root first; the relative path grows, the sidecar found
+    # is the same one.
+    original = RubyUI.component_roots
+    RubyUI.component_roots = [RubyUI::TestApp::ROOT, *original]
+    RubyUI::Probes::Div.instance_variable_set(:@component_root, nil)
+
+    assert_equal canonical(%(<div class="probe" data-probe="">Hello</div>)), canonical(render_erb("probe/div_default"))
+  ensure
+    RubyUI.component_roots = original
+    RubyUI::Probes::Div.instance_variable_set(:@component_root, nil)
+  end
+
+  class Homeless < RubyUI::Component
+  end
+
+  def test_a_class_outside_every_component_root_is_refused
+    error = assert_raises(ArgumentError) { Homeless.template }
+
+    assert_match(/component_roots/, error.message)
+  end
+end
+```
+
+- [ ] **Step 6: Run them and confirm they fail**
+
+```bash
+cd gem
+bundle exec rake test N=/LayerTest/
+```
+
+Expected: errors — `RubyUI::Component` does not exist yet if Step 1 was skipped; with Step 1 in place and Step 4 not yet applied, `RubyUI::Probes` is undefined. Every test must be red before Step 4 is applied. (Apply Steps 1–3 first, run, observe the `NameError`s, then apply Step 4.)
+
+- [ ] **Step 7: Run them and confirm they pass**
+
+```bash
+cd gem
+bundle exec rake test N=/LayerTest/
+```
+
+Expected: `15 runs, ... 0 failures, 0 errors`.
+
+- [ ] **Step 8: Run everything**
+
+```bash
+cd gem
+bundle exec rake
+```
+
+Expected: `550 runs, ... 0 failures, 0 errors, 0 skips`, `422 files inspected, no offenses detected` (414 + `component.rb` + `component_test.rb` + six probe `.rb` files). Snapshots unchanged; registry current.
+
+- [ ] **Step 9: Commit**
+
+```bash
+cd /Users/cirdes/Workspaces/ruby_ui
+git add gem/lib/ruby_ui/component.rb gem/test/test_helper.rb gem/test/probes gem/test/ruby_ui/component_test.rb
+git commit -m "$(cat <<'MSG'
+[Feature] RubyUI::Component: the 2.0 layer with a scoped sidecar lookup
+
+A plain Ruby class ActionView renders through render_in. Its sidecar is
+found under the RubyUI.component_roots entry that holds the class file,
+through a LookupContext of its own — the application's view paths are
+never consulted, so a host template at the same virtual path cannot
+shadow the sidecar and the sidecar cannot shadow the host. content is
+set on every render, nil without a block.
+
+Named Component while the Phlex RubyUI::Base still exists; it takes the
+name Base when the last Phlex component is gone.
+
+Probe components under test/probes exercise the layer without touching
+a shipped component.
+
+Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
+MSG
+)"
+```
+
+---
+
+## Task 4: The `enum` helper
+
+Decision B: components coerce and validate their enumerated attributes. `size: "lg"` arrives as a String from a tag or from `params`, `size: :lg` as a Symbol from Ruby; both must select `SIZES[:lg]`, `nil` takes the default, and anything else names the allowed values instead of dropping the class silently (the 1.6 bug in `DialogContent` and `Badge`).
+
+**Files:**
+- Modify: `gem/lib/ruby_ui/component.rb`
+- Create: `gem/test/ruby_ui/enum_test.rb`
+
+**Interfaces:**
+- Consumes: `RubyUI::Component` (Task 3).
+- Produces: `RubyUI::Component#enum(value, table, default:)` → the Symbol key; raises `ArgumentError` listing `table.keys` for an unknown value. Private, for use in a subclass's `initialize`.
+
+- [ ] **Step 1: Write the failing tests**
+
+Create `gem/test/ruby_ui/enum_test.rb`:
+
+```ruby
+# frozen_string_literal: true
+
+require "test_helper"
+
+class EnumTest < Minitest::Test
+  class Sized < RubyUI::Component
+    SIZES = {sm: "h-8", md: "h-9", lg: "h-10"}.freeze
+
+    attr_reader :size
+
+    def initialize(size: nil, **attrs)
+      @size = enum(size, SIZES, default: :md)
+      super(**attrs)
+    end
+  end
+
+  def test_a_symbol_selects_its_entry
+    assert_equal :lg, Sized.new(size: :lg).size
+  end
+
+  def test_a_string_is_coerced_to_the_symbol
+    assert_equal :lg, Sized.new(size: "lg").size
+  end
+
+  def test_nil_takes_the_default
+    assert_equal :md, Sized.new.size
+    assert_equal :md, Sized.new(size: nil).size
+  end
+
+  def test_an_unknown_value_raises_naming_the_allowed_ones
+    error = assert_raises(ArgumentError) { Sized.new(size: "xlg") }
+
+    assert_match(/"xlg"/, error.message)
+    assert_match(/:sm, :md, :lg/, error.message)
+  end
+
+  def test_a_value_that_cannot_be_a_symbol_raises_the_same_way
+    error = assert_raises(ArgumentError) { Sized.new(size: 42) }
+
+    assert_match(/42/, error.message)
+  end
+end
+```
+
+- [ ] **Step 2: Run them and confirm they fail**
+
+```bash
+cd gem
+bundle exec rake test N=/EnumTest/
+```
+
+Expected: 5 runs, 5 errors — `NoMethodError: undefined method 'enum'`.
+
+- [ ] **Step 3: Add the helper**
+
+In `gem/lib/ruby_ui/component.rb`, inside `class Component`, in the `private` section after `default_attrs`, add:
+
+```ruby
+    # Coerces and validates an enumerated attribute. `size: "lg"` from a tag or
+    # from params arrives as a String, `size: :lg` from Ruby as a Symbol, and
+    # both must select `table[:lg]`; nil takes the default. Anything else names
+    # the allowed values instead of silently dropping the class.
+    def enum(value, table, default:)
+      key = value.nil? ? default : (value.respond_to?(:to_sym) ? value.to_sym : value)
+      return key if table.key?(key)
+
+      raise ArgumentError,
+        "#{self.class.name}: #{value.inspect} is not one of #{table.keys.map(&:inspect).join(", ")}"
+    end
+```
+
+- [ ] **Step 4: Run them and confirm they pass**
+
+```bash
+cd gem
+bundle exec rake test N=/EnumTest/
+```
+
+Expected: `5 runs, ... 0 failures, 0 errors`.
+
+- [ ] **Step 5: Run everything and commit**
+
+```bash
+cd gem
+bundle exec rake
+```
+
+Expected: `555 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`. Snapshots unchanged; registry current.
+
+```bash
+cd /Users/cirdes/Workspaces/ruby_ui
+git add gem/lib/ruby_ui/component.rb gem/test/ruby_ui/enum_test.rb
+git commit -m "$(cat <<'MSG'
+[Feature] RubyUI::Component#enum: coerce and validate enumerated attributes
+
+size: "lg" from a tag or params and size: :lg from Ruby both select
+SIZES[:lg]; nil takes the default; anything else raises naming the
+allowed values, instead of indexing a Symbol-keyed hash with a String
+and silently dropping the class, as DialogContent and Badge do in 1.6.
+
+Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
+MSG
+)"
+```
+
+---
+
+## Task 5: The golden suite's ERB lane, proved on Button
+
+Every scenario keeps its Phlex block. A scenario may also have an ERB fixture at `test/golden/views/<component>/<name>.html.erb`; when it does, the suite renders the fixture through the harness and compares it against the **same frozen snapshot**. The two lanes are independent tests. Because `phlex-rails` is loaded, a fixture can render a component that is still Phlex — so the fixtures for all 188 scenarios can be written and made green before a single component migrates (decision 7). This task builds the lane and writes Button's 15 fixtures as the proof; plan 2.0b writes the other 173.
+
+During the transition the Phlex lane records (`golden:update` writes from it when a scenario has a block); the ERB lane only compares. When the last block goes, the ERB lane records.
+
+**Files:**
+- Modify: `gem/test/golden/catalog.rb`
+- Modify: `gem/test/golden/harness.rb`
+- Modify: `gem/test/golden_test.rb`
+- Create: `gem/test/golden/views/button/*.html.erb` (15 files)
+
+**Interfaces:**
+- Consumes: `RubyUI::TestApp.view(*paths)` (Task 1); `RubyUI::Component` (Task 3) for the pins and the coverage hook.
+- Produces:
+  - `Golden::Catalog::VIEWS_ROOT`; `Scenario#fixture_path`, `#fixture?`, `#lanes` (`[:phlex, :erb]` subset), `#test_name(lane)`.
+  - `Golden::Catalog.scenario(name, pending: nil, &block)` — the block is now optional (a scenario may exist only as a fixture, from 2.0b on).
+  - `Golden::Catalog.fixture_files` → every `.html.erb` under `VIEWS_ROOT`.
+  - `Golden::Harness.render_erb(scenario)` → raw HTML, with the pins active.
+  - `Golden::Catalog.component_classes` covers `RubyUI::Base` and `RubyUI::Component` subclasses.
+
+- [ ] **Step 1: Extend the catalog**
+
+In `gem/test/golden/catalog.rb`:
+
+**(a)** After `LIB_ROOT = …`, add:
+
+```ruby
+    VIEWS_ROOT = File.expand_path("views", __dir__)
+```
+
+**(b)** Inside the `Scenario` struct, after `test_name`, add:
+
+```ruby
+      def fixture_path
+        File.join(VIEWS_ROOT, component, "#{name}.html.erb")
+      end
+
+      def fixture?
+        File.exist?(fixture_path)
+      end
+
+      # The renderers this scenario runs through: its Phlex block while it has
+      # one, its ERB fixture once it has one. Both compare against one snapshot.
+      def lanes
+        [(:phlex if block), (:erb if fixture?)].compact
+      end
+
+      def test_name(lane = nil)
+        lane ? :"test_#{component}__#{name}__#{lane}" : :"test_#{component}__#{name}"
+      end
+```
+
+and delete the original `test_name` method (the one with no parameter).
+
+**(c)** In `scenario`, the block is now optional; replace the method with:
+
+```ruby
+      def scenario(name, pending: nil, &block)
+        raise "scenario #{name.inspect} declared outside a component block" unless @component
+
+        slug = "#{@component}/#{name}"
+        raise "duplicate scenario #{slug}" if scenarios.any? { |existing| existing.slug == slug }
+
+        scenarios << Scenario.new(@component, name.to_s, block, pending)
+      end
+```
+
+(identical to the current body — the change is that `&block` may be nil, which `Scenario#lanes` handles.)
+
+**(d)** Add a coverage query next to `component_directories`:
+
+```ruby
+      def fixture_files
+        Dir.glob(File.join(VIEWS_ROOT, "**", "*.html.erb")).sort
+      end
+```
+
+**(e)** In `component_classes`, replace
+
+```ruby
+          .select { |constant| constant.is_a?(Class) && constant < RubyUI::Base }
+```
+
+with
+
+```ruby
+          .select { |constant| constant.is_a?(Class) && (constant < RubyUI::Base || constant < RubyUI::Component) }
+```
+
+- [ ] **Step 2: Extend the harness**
+
+In `gem/test/golden/harness.rb`:
+
+**(a)** After the `render` method, add:
+
+```ruby
+      # The ERB lane: renders a scenario's fixture through the same harness a
+      # host application's templates go through, with the same pins active.
+      def render_erb(scenario)
+        @active = true
+        @hex_calls = 0
+        @rand_calls = 0
+        RubyUI::TestApp.view(Golden::Catalog::VIEWS_ROOT).render(template: "#{scenario.component}/#{scenario.name}")
+      ensure
+        @active = false
+      end
+```
+
+**(b)** After the `RecordsRenderedClass` module, add:
+
+```ruby
+  # The 2.0 layer has no before_template; render_in is the hook that fires on
+  # every render and nothing overrides.
+  module RecordsRenderedComponent
+    def render_in(...)
+      Golden::Harness.record(self.class)
+      super
+    end
+  end
+```
+
+**(c)** After the two `RubyUI::Base.prepend` lines at the bottom, add:
+
+```ruby
+RubyUI::Component.prepend(Golden::DeterministicRandom)
+RubyUI::Component.prepend(Golden::RecordsRenderedComponent)
+```
+
+- [ ] **Step 3: Extend the runner**
+
+In `gem/test/golden_test.rb`:
+
+**(a)** Replace the scenario loop
+
+```ruby
+  Golden::Catalog.scenarios.each do |scenario|
+    define_method(scenario.test_name) { assert_golden(scenario) }
+  end
+```
+
+with
+
+```ruby
+  Golden::Catalog.scenarios.each do |scenario|
+    scenario.lanes.each do |lane|
+      define_method(scenario.test_name(lane)) { assert_golden(scenario, lane) }
+    end
+  end
+```
+
+**(b)** Change `def assert_golden(scenario)` to `def assert_golden(scenario, lane)`, and inside it replace every `canonicalize(scenario)` with `canonicalize(scenario, lane)`. Replace the `if UPDATE` line with
+
+```ruby
+    if UPDATE && recording_lane?(scenario, lane)
+```
+
+**(c)** Replace `canonicalize` and add the two helpers:
+
+```ruby
+  def canonicalize(scenario, lane)
+    Golden::CanonicalHtml.call(render(scenario, lane))
+  end
+
+  def render(scenario, lane)
+    (lane == :erb) ? Golden::Harness.render_erb(scenario) : Golden::Harness.render(&scenario.block)
+  end
+
+  # While a scenario still has a Phlex block, that lane is the one that
+  # records; the ERB lane only compares. Once the block is gone, the ERB lane
+  # records.
+  def recording_lane?(scenario, lane)
+    (lane == :phlex) || scenario.block.nil?
+  end
+```
+
+**(d)** In `GoldenCoverageTest.rendered_classes`, replace
+
+```ruby
+      Golden::Catalog.scenarios.each { |scenario| Golden::Harness.render(&scenario.block) }
+```
+
+with
+
+```ruby
+      Golden::Catalog.scenarios.each do |scenario|
+        Golden::Harness.render(&scenario.block) if scenario.block
+        Golden::Harness.render_erb(scenario) if scenario.fixture?
+      end
+```
+
+**(e)** Add a coverage test to `GoldenCoverageTest`:
+
+```ruby
+  def test_no_orphan_fixture_files
+    expected = Golden::Catalog.scenarios.map(&:fixture_path).sort
+    orphans = Golden::Catalog.fixture_files - expected
+
+    assert_empty orphans,
+      "fixture files with no scenario (delete them): #{orphans.map { |path| path.delete_prefix("#{Golden::Catalog::VIEWS_ROOT}/") }.join(", ")}"
+  end
+```
+
+- [ ] **Step 4: Run the suite and confirm it is unchanged**
+
+No fixture exists yet, so every scenario has exactly one lane:
+
+```bash
+cd gem
+bundle exec rake golden
+```
+
+Expected: `200 runs, ... 0 failures, 0 errors, 0 skips` — 188 Phlex-lane scenarios, 4 coverage tests, 7 canonicalizer tests, 1 harness test.
+
+- [ ] **Step 5: Write Button's fixtures**
+
+The catalog's Button block (`gem/test/golden/scenarios.rb`) is:
+
+```ruby
+Golden::Catalog.component "button" do
+  %i[primary secondary destructive outline ghost link].each do |variant|
+    scenario "variant_#{variant}" do
+      RubyUI.Button(variant: variant) { variant.to_s }
+    end
+  end
+
+  %i[sm md lg xl].each do |size|
+    scenario "size_#{size}" do
+      RubyUI.Button(size: size) { size.to_s }
+    end
+
+    scenario "icon_size_#{size}" do
+      RubyUI.Button(size: size, icon: true) { "X" }
+    end
+  end
+
+  scenario "submit_disabled" do
+    RubyUI.Button(type: :submit, disabled: true) { "Save" }
+  end
+end
+```
+
+The translation rule, which 2.0b applies to every other component: `RubyUI.X(args) { "text" }` becomes `<%= render RubyUI::X.new(args) do %>text<% end %>`, on one line, block text verbatim. Create these 15 files under `gem/test/golden/views/button/`, each containing exactly the one line shown (plus a trailing newline):
+
+| File | Content |
+| --- | --- |
+| `variant_primary.html.erb` | `<%= render RubyUI::Button.new(variant: :primary) do %>primary<% end %>` |
+| `variant_secondary.html.erb` | `<%= render RubyUI::Button.new(variant: :secondary) do %>secondary<% end %>` |
+| `variant_destructive.html.erb` | `<%= render RubyUI::Button.new(variant: :destructive) do %>destructive<% end %>` |
+| `variant_outline.html.erb` | `<%= render RubyUI::Button.new(variant: :outline) do %>outline<% end %>` |
+| `variant_ghost.html.erb` | `<%= render RubyUI::Button.new(variant: :ghost) do %>ghost<% end %>` |
+| `variant_link.html.erb` | `<%= render RubyUI::Button.new(variant: :link) do %>link<% end %>` |
+| `size_sm.html.erb` | `<%= render RubyUI::Button.new(size: :sm) do %>sm<% end %>` |
+| `size_md.html.erb` | `<%= render RubyUI::Button.new(size: :md) do %>md<% end %>` |
+| `size_lg.html.erb` | `<%= render RubyUI::Button.new(size: :lg) do %>lg<% end %>` |
+| `size_xl.html.erb` | `<%= render RubyUI::Button.new(size: :xl) do %>xl<% end %>` |
+| `icon_size_sm.html.erb` | `<%= render RubyUI::Button.new(size: :sm, icon: true) do %>X<% end %>` |
+| `icon_size_md.html.erb` | `<%= render RubyUI::Button.new(size: :md, icon: true) do %>X<% end %>` |
+| `icon_size_lg.html.erb` | `<%= render RubyUI::Button.new(size: :lg, icon: true) do %>X<% end %>` |
+| `icon_size_xl.html.erb` | `<%= render RubyUI::Button.new(size: :xl, icon: true) do %>X<% end %>` |
+| `submit_disabled.html.erb` | `<%= render RubyUI::Button.new(type: :submit, disabled: true) do %>Save<% end %>` |
+
+- [ ] **Step 6: Run the suite and confirm the ERB lane is at parity**
+
+```bash
+cd gem
+bundle exec rake golden
+```
+
+Expected: `215 runs, ... 0 failures, 0 errors, 0 skips` — the 15 `test_button__*__erb` tests are new and green against the frozen snapshots, rendering the still-Phlex `RubyUI::Button` through phlex-rails. Then:
+
+```bash
+cd /Users/cirdes/Workspaces/ruby_ui
+git status --porcelain gem/test/golden/snapshots
+```
+
+Expected: no output. **If any `__erb` test fails, STOP** and report which and its diff — either the fixture is mistranslated or phlex-rails renders differently from a direct Phlex call, and the difference is the finding.
+
+- [ ] **Step 7: Run everything and commit**
+
+```bash
+cd gem
+bundle exec rake
+```
+
+Expected: `571 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`. Registry current.
+
+```bash
+cd /Users/cirdes/Workspaces/ruby_ui
+git add gem/test/golden/catalog.rb gem/test/golden/harness.rb gem/test/golden_test.rb gem/test/golden/views
+git commit -m "$(cat <<'MSG'
+[Feature] Golden suite: an ERB lane, proved on Button
+
+A scenario may now have an ERB fixture under test/golden/views next to
+its Phlex block; the suite renders the fixture through the harness and
+compares it against the same frozen snapshot, as its own test. With
+phlex-rails loaded a fixture can render a component that is still
+Phlex, so every fixture can be written and made green before a single
+component migrates — after which a migration changes only the
+implementation, never the ruler.
+
+Button's 15 fixtures are the proof: byte-identical in canonical form
+to the snapshots the Phlex lane recorded.
+
+Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
+MSG
+)"
+```
+
+---
+
+## Task 6: The strict lane
+
+The canonical form is blind, by design, to whitespace between element siblings and at text–element boundaries (§9.1). For the components whose output is text — Typography, InlineCode and InlineLink (`typography`), Badge, FormFieldError (`form`), ComboboxItem (`combobox`), ShortcutKey — the suite keeps a second snapshot: the canonical form in **preserve mode** over the whole fragment (text verbatim, whitespace kept, attributes still sorted, comments still dropped, the fragment's own leading and trailing whitespace trimmed). Recorded from the Phlex lane now, while Phlex still renders; a fixture or a migrated component that adds a newline where Phlex emitted none fails it.
+
+**Files:**
+- Modify: `gem/test/golden/canonical_html.rb`
+- Modify: `gem/test/golden/canonical_html_test.rb`
+- Modify: `gem/test/golden/catalog.rb`
+- Modify: `gem/test/golden_test.rb`
+- Create (by re-recording): 36 files under `gem/test/golden/strict/`
+
+**Interfaces:**
+- Consumes: Task 5's lanes.
+- Produces:
+  - `Golden::CanonicalHtml.call(html, strict: false)`; `strict: true` is the preserve-mode form.
+  - `Golden::Catalog::STRICT_ROOT`, `STRICT_COMPONENTS`; `Scenario#strict?`, `#strict_snapshot_path`; `Golden::Catalog.strict_files`.
+
+- [ ] **Step 1: Write the failing canonicalizer tests**
+
+Add to `gem/test/golden/canonical_html_test.rb`, inside the class:
+
+```ruby
+  def strict(html)
+    Golden::CanonicalHtml.call(html, strict: true)
+  end
+
+  def test_strict_sees_whitespace_between_inline_siblings
+    refute_equal strict("<span>a</span><span>b</span>"), strict("<span>a</span> <span>b</span>")
+  end
+
+  def test_strict_sees_whitespace_at_a_text_element_boundary
+    refute_equal strict("<p>Hello <em>w</em></p>"), strict("<p>Hello<em>w</em></p>")
+  end
+
+  def test_strict_keeps_text_verbatim_and_still_sorts_attributes
+    assert_equal %(<div class="a" id="x">\n  two  words\n</div>), strict(%(<div id="x" class="a">\n  two  words\n</div>))
+  end
+
+  def test_strict_trims_the_fragments_own_edges
+    assert_equal "<b>x</b>", strict("\n  <b>x</b>\n")
+  end
+
+  def test_strict_is_a_fixed_point
+    once = strict(%(<p>Hello <em>w</em>\n<code>a &lt; b</code></p>\n))
+
+    assert_equal once, strict(once)
+  end
+
+  def test_strict_keeps_raw_text_elements_raw
+    once = strict("<div><script>if (a < b) {}</script></div>")
+
+    assert_equal once, strict(once)
+    assert_includes once, "a < b"
+  end
+```
+
+- [ ] **Step 2: Run them and confirm they fail**
+
+```bash
+cd gem
+bundle exec rake test N=/GoldenCanonicalHtmlTest#test_strict/
+```
+
+Expected: 6 runs, 6 errors — `ArgumentError: unknown keyword: :strict`.
+
+- [ ] **Step 3: Add strict mode**
+
+In `gem/test/golden/canonical_html.rb`:
+
+**(a)** Replace `def call(html)` and its body with:
+
+```ruby
+      # `strict: true` is the preserve-mode form: text verbatim, whitespace
+      # kept, only the fragment's own edges trimmed. The normal form is blind to
+      # whitespace between siblings and at text boundaries by design; the
+      # strict form is for the components whose output is text.
+      def call(html, strict: false)
+        out = +""
+        parse(html).each { |node| emit(node, 0, out, strict ? :preserve : :normal) }
+        strict ? out.strip : out
+      end
+```
+
+**(b)** In `child_mode`, move the raw-text check ahead of the mode check, so a `<script>` or `<style>` inside a strict fragment is still emitted raw (escaping it would break the fixed point):
+
+```ruby
+      def child_mode(node, mode)
+        return :raw if RAW_TEXT.include?(node.name)
+        return mode unless mode == :normal
+        return :preserve if PRESERVE_WHITESPACE.include?(node.name)
+        :normal
+      end
+```
+
+- [ ] **Step 4: Run the canonicalizer tests and confirm they pass**
+
+```bash
+cd gem
+bundle exec rake test N=/GoldenCanonicalHtmlTest/
+```
+
+Expected: `13 runs, ... 0 failures, 0 errors` (the 7 existing and the 6 new). Then confirm nothing moved in normal mode:
+
+```bash
+bundle exec rake golden
+```
+
+Expected: `221 runs, 0 failures` (the six strict tests join the ruler's own), no snapshot change.
+
+- [ ] **Step 5: Wire strict snapshots into the catalog and the runner**
+
+In `gem/test/golden/catalog.rb`:
+
+**(a)** After `VIEWS_ROOT`, add:
+
+```ruby
+    STRICT_ROOT = File.expand_path("strict", __dir__)
+
+    # The components whose output is text, and so whose whitespace is part of
+    # what they render: spec §9.1. Their scenarios keep a strict snapshot too.
+    STRICT_COMPONENTS = %w[badge combobox form shortcut_key typography].freeze
+```
+
+**(b)** Inside `Scenario`, after `lanes`, add:
+
+```ruby
+      def strict?
+        STRICT_COMPONENTS.include?(component)
+      end
+
+      def strict_snapshot_path
+        File.join(STRICT_ROOT, component, "#{name}.html")
+      end
+```
+
+**(c)** Next to `fixture_files`, add:
+
+```ruby
+      def strict_files
+        Dir.glob(File.join(STRICT_ROOT, "**", "*.html")).sort
+      end
+```
+
+In `gem/test/golden_test.rb`:
+
+**(d)** At the end of `assert_golden`, after the final `assert_equal recorded, canonical, …`, add:
+
+```ruby
+    assert_strict(scenario, lane) if scenario.strict?
+```
+
+**(e)** Add the method after `assert_golden`:
+
+```ruby
+  # The strict form: text and whitespace verbatim. Same discipline as the
+  # canonical snapshot — determinism, fixed point, then equality.
+  def assert_strict(scenario, lane)
+    strict = Golden::CanonicalHtml.call(render(scenario, lane), strict: true)
+
+    assert_equal strict, Golden::CanonicalHtml.call(render(scenario, lane), strict: true),
+      "#{scenario.slug} does not render deterministically in strict form"
+
+    if UPDATE && recording_lane?(scenario, lane)
+      FileUtils.mkdir_p(File.dirname(scenario.strict_snapshot_path))
+      File.write(scenario.strict_snapshot_path, strict)
+    end
+
+    assert_path_exists scenario.strict_snapshot_path,
+      "no strict snapshot for #{scenario.slug} — run `bundle exec rake golden:update` and review the diff"
+
+    recorded = File.read(scenario.strict_snapshot_path)
+
+    assert_equal recorded, Golden::CanonicalHtml.call(recorded, strict: true),
+      "the recorded strict form of #{scenario.slug} is not a fixed point of the normalizer"
+
+    assert_equal recorded, strict,
+      "strict HTML for #{scenario.slug} no longer matches the recorded 1.6 snapshot"
+  end
+```
+
+**(f)** Add a coverage test to `GoldenCoverageTest`:
+
+```ruby
+  def test_no_orphan_strict_snapshot_files
+    expected = Golden::Catalog.scenarios.select { |scenario| scenario.strict? && scenario.pinned? }.map(&:strict_snapshot_path).sort
+    orphans = Golden::Catalog.strict_files - expected
+
+    assert_empty orphans,
+      "strict snapshot files with no scenario (delete them): #{orphans.map { |path| path.delete_prefix("#{Golden::Catalog::STRICT_ROOT}/") }.join(", ")}"
+  end
+```
+
+- [ ] **Step 6: Run the suite and confirm the strict scenarios fail for want of a snapshot**
+
+```bash
+cd gem
+bundle exec rake golden 2>&1 | grep -c "no strict snapshot"
+```
+
+Expected: `36` — 4 badge + 5 combobox + 1 form + 1 shortcut_key + 25 typography scenarios, all failing on the missing file and nothing else. If the number differs, STOP and list the scenarios.
+
+- [ ] **Step 7: Record the strict snapshots**
+
+```bash
+cd gem
+bundle exec rake golden:update
+cd /Users/cirdes/Workspaces/ruby_ui
+git status --porcelain gem/test/golden/snapshots | wc -l
+git status --porcelain gem/test/golden/strict | wc -l
+find gem/test/golden/strict -name '*.html' | wc -l
+```
+
+Expected: `0` (no canonical snapshot changed), `36`, `36`. Read three of them — `badge/all_variants.html`, `typography/inline_link.html`, `form/default.html` — and confirm they are the raw Phlex output with attributes sorted: no indentation, no added newlines, text verbatim.
+
+- [ ] **Step 8: Run everything and commit**
+
+```bash
+cd gem
+bundle exec rake
+```
+
+Expected: `578 runs, ... 0 failures, 0 errors, 0 skips` (571 + 6 strict canonicalizer tests + 1 coverage test), `423 files inspected, no offenses detected`. Registry current.
+
+```bash
+cd /Users/cirdes/Workspaces/ruby_ui
+git add gem/test/golden/canonical_html.rb gem/test/golden/canonical_html_test.rb gem/test/golden/catalog.rb gem/test/golden_test.rb gem/test/golden/strict
+git commit -m "$(cat <<'MSG'
+[Feature] Golden suite: a strict lane for the components whose output is text
+
+The canonical form is blind to whitespace between siblings and at text
+boundaries by design. For badge, combobox, form, shortcut_key and
+typography — the components whose whitespace is part of what they
+render — the suite now also keeps the preserve-mode form: text verbatim,
+attributes sorted, the fragment's own edges trimmed. 36 strict snapshots
+recorded from the Phlex lane while Phlex still renders; a fixture or a
+migrated component that adds a newline where Phlex emitted none fails
+here even though the canonical form cannot see it.
+
+Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
+MSG
+)"
+```
+
+---
+
+## Task 7: Record the decisions and amend the spec
+
+The spec deferred five mechanisms to "Phase 2.0"; this plan decided them. They go into the decision log, and the spec's §4.4 and §6 Phase 2.0 are rewritten to say what was built.
+
+**Files:**
+- Modify: `design/v2/decisions.md`
+- Modify: `design/2026-09-19-rubyui-2-0-design.md`
+
+**Interfaces:** none.
+
+- [ ] **Step 1: Append the decisions**
+
+Append to `design/v2/decisions.md`:
+
+```markdown
+
+## 5. The gem's test harness is an inline Rails application — 2026-09-20
+
+Decision A said `actionview` + `reactionview`, no controller, no dummy app.
+ReActionView's handler reads `Rails.root` without a guard, and a template
+outside `Rails.root` is "external": when Herb rejects it, `external_template_mode`
+falls back to Erubi silently. So the tests need a `Rails`, and its root must be
+the gem. `test_helper.rb` boots the smallest `Rails::Application` — no `app/`
+directory, no routes, no database — with `config.root` at the gem and
+`RAILS_ENV=test`. Measured: the existing suite is unchanged under it and
+`ActionView::Template.handler_for_extension(:erb)` is ReActionView's.
+**Cost if wrong:** `railties` as a development dependency and ~1 s of boot per
+test run. **What would reverse it:** ReActionView dropping its `Rails.root`
+reads, at which point the app object goes.
+
+## 6. The 2.0 layer is `RubyUI::Component` until the last Phlex component is gone — 2026-09-20
+
+`RubyUI::Base` is the Phlex base that 256 components inherit; the 2.0 layer
+cannot take the name while they exist. It lands as `RubyUI::Component`, every
+migrated component inherits `Component`, and one mechanical commit in Phase
+2.4 — after the last migration, before the installer is rewritten — renames
+`Component` to `Base`. Users never see `Component`. The alternative, renaming
+the Phlex base first, touches all 256 files for no user benefit.
+**Cost if wrong:** one sed across the migrated files at the end.
+
+## 7. Every ERB fixture is written before any component migrates — 2026-09-20
+
+With `phlex-rails` loaded (development only), an ERB fixture renders a
+component that is still Phlex, so the ERB lane can be green for all 188
+scenarios while nothing has migrated. Plan 2.0a proves it on Button's 15;
+plan 2.0b writes the other 173. After that a migration changes only an
+implementation, never the ruler — "did I write the fixture right" and "did I
+port the component right" stop being one failure. While a scenario keeps its
+Phlex block, that lane records and the ERB lane compares.
+**Cost if wrong:** ~2,000 lines of ERB written ahead of the first migration.
+`phlex-rails` leaves the gemspec with the last Phlex component.
+
+## 8. The strict lane is the canonical form in preserve mode — 2026-09-20
+
+For badge, combobox, form, shortcut_key and typography — the components whose
+output is text — a second snapshot holds `CanonicalHtml.call(html, strict: true)`:
+the whole fragment in the normalizer's preserve mode (text and whitespace
+verbatim, attributes sorted, comments dropped, the fragment's own edges
+trimmed). Same fixed-point discipline, same recording rule, same runner. The 36
+strict snapshots were recorded from Phlex. Fixtures for those components are
+written whitespace-tight — one line, or `<%-`/`-%>` — because the strict form
+sees every newline the fixture adds.
+**Cost if wrong:** 36 more files to keep, and strictness where a browser would
+not have cared (inside a flex parent, say).
+
+## 9. Sidecar lookup takes a list of roots; the fresh-app script moves to 2.4 — 2026-09-20
+
+`RubyUI.component_roots` is an Array — `lib` and `test/probes` in the gem, one
+entry in a host app — and a class's sidecar is found under the root that
+contains its file, through a `LookupContext` scoped to that root. Collision
+with a host template is impossible by construction, and "two sidecars for one
+class" cannot happen (one class file, one directory). The fresh-app install
+script the spec put in Phase 2.0 moves to Phase 2.4: until the installer writes
+the 2.0 initializer, the script would only exercise the 1.6 installer, which
+proves nothing about 2.0.
+**Cost if wrong:** installation is first exercised end to end in 2.4 rather
+than now.
+```
+
+- [ ] **Step 2: Amend the spec**
+
+In `design/2026-09-19-rubyui-2-0-design.md`:
+
+**(a)** In §4.4's initializer block, replace `RubyUI.component_root = Rails.root.join("app/components")` with `RubyUI.component_roots = [Rails.root.join("app/components")]`, and in the paragraph after it replace `` `component_root` is the one
+directory the sidecar lookup searches (§4.3) `` with `` `component_roots` lists the directories the sidecar lookup searches — one, in a host app (§4.3) ``.
+
+**(b)** In §4.3, after the table of the two layer files, add a sentence to the paragraph that begins `226 lines at the end of the gate`: `During Phase 2 the class is named `RubyUI::Component`, because `RubyUI::Base` is still the Phlex base the unmigrated components inherit; it takes the name `Base` in Phase 2.4 (decision 6).`
+
+**(c)** In §6 Phase 2.0, replace the bullet that begins `- Replace the test harness:` (four lines, through `is replaced by rendering an ERB fixture.`) with:
+
+```markdown
+- Replace the test harness: `railties`, `actionview`, `reactionview` and
+  `phlex-rails` as development dependencies, and an inline `Rails::Application`
+  in `test_helper.rb` with the gem as `Rails.root` — ReActionView's handler
+  reads `Rails.root`, and a template outside it falls back to Erubi silently
+  when Herb rejects it (decision 5). `ComponentTest#phlex { }` stays for the
+  Phlex-lane tests until the last Phlex component goes; `render_erb` renders a
+  test view through the harness.
+```
+
+**(d)** Replace the bullet that begins `- Add the **ERB lane**` (three lines) with:
+
+```markdown
+- Add the **ERB lane** to the golden suite: a scenario may have an ERB fixture
+  under `gem/test/golden/views/`, rendered through the harness and compared
+  against the same frozen snapshot as its own test. With `phlex-rails` loaded a
+  fixture renders a component that is still Phlex, so all 188 fixtures are
+  written before any migration — Button's 15 in plan 2.0a, the rest in 2.0b
+  (decision 7).
+```
+
+**(e)** Replace the bullet that begins `- Implement the scoped sidecar lookup` (four lines) with:
+
+```markdown
+- Implement the scoped sidecar lookup: `RubyUI.component_roots`, a
+  `LookupContext` per root, the sidecar found under the root that holds the
+  class file and nowhere else; the `Template` is not cached on the class, so
+  Rails' reloader reaches it (decision 9). Tested against a host template at
+  the same virtual path, a class under no root, and a class with no sidecar.
+```
+
+**(f)** Replace the bullet that begins `- Define the **strict lane**.` (eight lines, through `difference, not noise.`) with:
+
+```markdown
+- Define the **strict lane**: `CanonicalHtml.call(html, strict: true)`, the
+  preserve-mode form, with its own snapshots under `gem/test/golden/strict/`
+  for badge, combobox, form, shortcut_key and typography, recorded from Phlex
+  (decision 8). Sidecars and fixtures for those components are written
+  whitespace-tight. A strict-lane failure is a real difference, not noise.
+```
+
+**(g)** Replace the bullet that begins `- **Fresh-app install test.**` (five lines) with:
+
+```markdown
+- **Fresh-app install test** — moved to Phase 2.4 (decision 9): it only means
+  something once the installer writes the 2.0 initializer.
+```
+
+**(h)** Replace the acceptance paragraph that begins `**Acceptance.** The layer is in the gem with its own tests, guards included.` with:
+
+```markdown
+**Acceptance.** The layer is in the gem with its own tests, guards included.
+The ERB lane is green for Button's 15 scenarios against the frozen snapshots
+with Button still Phlex, and the strict lane holds 36 recorded snapshots. All
+three CI jobs are green with the registry unchanged.
+```
+
+- [ ] **Step 3: Check nothing dangles**
+
+```bash
+cd /Users/cirdes/Workspaces/ruby_ui
+grep -n "component_root\b" design/2026-09-19-rubyui-2-0-design.md
+grep -n "Fresh-app install test" design/2026-09-19-rubyui-2-0-design.md
+```
+
+Expected: the first prints nothing (every mention is now `component_roots`); the second prints exactly the one amended bullet and the Phase 2.4 mention, if any.
+
+- [ ] **Step 4: Commit**
+
+```bash
+cd /Users/cirdes/Workspaces/ruby_ui
+git add design/v2/decisions.md design/2026-09-19-rubyui-2-0-design.md
+git commit -m "$(cat <<'MSG'
+[Documentation] RubyUI 2.0: record what Phase 2.0a decided
+
+The spec deferred five mechanisms to Phase 2.0. Decisions 5-9 record
+them: the inline Rails application the tests boot, Component as the
+layer's name until the last Phlex component is gone, every ERB fixture
+written before any migration, the strict lane as the canonical form in
+preserve mode, and a list of component roots. The spec's §4.4 and §6
+Phase 2.0 now say what was built.
+
+Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
+MSG
+)"
+```
+
+---
+
+## Task 8: Open the pull request
+
+**Files:** none.
+
+- [ ] **Step 1: Confirm the branch is clean and complete**
+
+```bash
+cd /Users/cirdes/Workspaces/ruby_ui
+git status --porcelain
+git log --oneline feat/golden-suite..HEAD
+```
+
+Expected: no output from the first; eight commits from the second (this plan's file, then Tasks 1–7).
+
+- [ ] **Step 2: Run everything from a clean state**
+
+```bash
+cd gem
+bundle exec rake
+cd ../mcp && bundle exec exe/ruby-ui-mcp-build >/dev/null && git diff --exit-code data/registry.json && echo "registry current"
+```
+
+Expected: `578 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`, `registry current`.
+
+- [ ] **Step 3: Ask the user before pushing**
+
+Pushing and opening a PR are outward-facing. Do not run Step 4 until the user has said to go ahead.
+
+- [ ] **Step 4: Push and open the PR against `feat/golden-suite`**
+
+```bash
+cd /Users/cirdes/Workspaces/ruby_ui
+git push -u origin v2/foundation
+gh pr create --base feat/golden-suite --title "[Feature] RubyUI 2.0 — Phase 2.0a: the component layer, the harness and the suite's new lanes" --body "$(cat <<'MSG'
+## What
+
+Stacked on #536. Puts the 2.0 foundation into the gem with every component
+still Phlex:
+
+- **`RubyUI::Component` and `RubyUI::Attributes`** — the 2.0 layer from the v2
+  gate, promoted: plain Ruby, ERB sidecar found under `RubyUI.component_roots`
+  through a lookup scoped to the root that holds the class file (a host
+  template at the same virtual path is not picked — tested), `content` reset
+  on every render, Phlex 2.4.1's attribute guards ported (an unsafe name
+  raises, a `javascript:` URL is dropped — tested), and an `enum` helper that
+  coerces `"lg"`/`:lg` and names the allowed values on anything else.
+- **The harness** — the gem's tests boot an inline `Rails::Application` so
+  ReActionView compiles every template through Herb exactly as a host app
+  will; a malformed template is refused at compile time.
+- **The golden suite's ERB lane** — a scenario may have an ERB fixture,
+  rendered and compared against the same frozen snapshot. With `phlex-rails`
+  loaded a fixture renders a still-Phlex component, so all 188 fixtures can be
+  green before any migration. Button's 15 are here as the proof.
+- **The strict lane** — the canonical form in preserve mode, with 36 snapshots
+  for the components whose output is text, recorded from Phlex.
+
+No component migrates. Nothing under `gem/lib/ruby_ui/<component>/` changes;
+the 188 golden snapshots are byte-identical to #536. No runtime dependency is
+added — every new gem is development-only, and `phlex-rails` leaves with the
+last Phlex component.
+
+## Why
+
+Phase 2.0 of `design/2026-09-19-rubyui-2-0-design.md`. The five mechanisms the
+spec deferred to this phase are decided in `design/v2/decisions.md` entries 5–9.
+
+## Test steps
+
+```bash
+cd gem
+bundle exec rake            # 578 runs, 0 skips; 423 files, no offenses
+bundle exec rake golden     # 222 runs: 188 Phlex-lane + 15 ERB-lane + 5 coverage + 14 of the ruler's own
+```
+
+To see the ERB lane work, edit `test/golden/views/button/size_md.html.erb` to
+render `size: :lg` and re-run `rake golden`.
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)
+MSG
+)"
+```
+
+---
+
+## Definition of done for Phase 2.0a
+
+- `bundle exec rake` green on Ruby 3.3 and 3.4 (CI), zero skips; `mcp/data/registry.json` unchanged.
+- `RubyUI::Component` and `RubyUI::Attributes` in `gem/lib/ruby_ui/`, with the differential test against Phlex 2.4.1 green (24 cases) and the guard tests green (9).
+- The 188 golden snapshots byte-identical to `feat/golden-suite`.
+- The ERB lane green for Button's 15 scenarios with `RubyUI::Button` still Phlex.
+- 36 strict snapshots recorded; the strict form a fixed point over every one.
+- No file under `gem/lib/ruby_ui/<component>/` changed; no runtime dependency added.
+- `design/v2/decisions.md` entries 5–9; spec §4.4 and §6 Phase 2.0 amended.
+
+## Not in this plan
+
+- **Plan 2.0b** — the other 173 ERB fixtures, component by component, each batch green against the frozen snapshots (and the strict snapshots for the five strict components) before the next. Its first task adds the coverage test `every scenario has a fixture`, which cannot pass until it is done.
+- **`docs/Gemfile` pinned to the published 1.6 gem** — nothing in `docs/` breaks until the first component migrates, so the pin is the first task of the 2.1 plan.
+- **The fresh-app install script** — Phase 2.4, with the installer.
+- **Runtime dependencies in the gemspec, the installer, `Component` → `Base`** — Phase 2.4.

From 9af5939f6a70892495dcbd7e2f25792cffc3ab66 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 11:50:33 -0300
Subject: [PATCH 02/20] [Documentation] Phase 2.0a plan: fold the adversarial
 review in

Nine findings, all reproduced or read against the code before being
accepted. Blocking: test_helper called component_roots= before the
file that defines it was loaded; the attribute guards checked the raw
value where Phlex checks the serialized one (href: 1 renders in Phlex,
raised here) and lacked Phlex's rescue around an out-of-range
character reference; snapshot recording depended on Minitest's test
order; strict mode lost the newline the parser drops after <pre> and
<textarea>; a scenario with neither block nor fixture defined no test;
the hand-picked strict list missed Breadcrumb. Fix-level: four
StandardRB offenses in supplied code, golden-only run counts that
ignored the tests the PR review added, two dangling spec references.

The strict lane now covers every scenario (maintainer decision): an
audit found text inside inline elements in 38 of 54 components, so no
list survives review. Recording happens once per scenario before either
lane compares. Guards serialize first, as Phlex does, with the three
shapes added to the differential suite.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 ...20-phase-2-0a-foundation-implementation.md | 384 ++++++++++++------
 1 file changed, 268 insertions(+), 116 deletions(-)

diff --git a/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md b/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
index 1f4604b0..5568bea4 100644
--- a/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
+++ b/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
@@ -4,7 +4,7 @@
 
 **Goal:** Put the 2.0 component layer, the test harness it needs, and the golden suite's ERB and strict lanes into the gem — with every component still Phlex — so that the fixtures plan (2.0b) and the migrations (2.1+) change only what they say they change.
 
-**Architecture:** A plain-Ruby `RubyUI::Component` (the 2.0 layer; it takes the name `Base` only when the last Phlex component is gone) renders an ERB sidecar found under the `RubyUI.component_roots` entry that contains its class file — never through the host's view paths. The gem's tests run inside a minimal inline `Rails::Application` so ReActionView's handler compiles every template through Herb exactly as a host app will. The golden suite gains an ERB lane (fixtures under `test/golden/views/`, rendered against the frozen snapshots — still-Phlex components render through `phlex-rails`) and a strict lane (the canonical form in preserve mode, for text-bearing components). Nothing under `gem/lib/ruby_ui/<component>/` changes.
+**Architecture:** A plain-Ruby `RubyUI::Component` (the 2.0 layer; it takes the name `Base` only when the last Phlex component is gone) renders an ERB sidecar found under the `RubyUI.component_roots` entry that contains its class file — never through the host's view paths. The gem's tests run inside a minimal inline `Rails::Application` so ReActionView's handler compiles every template through Herb exactly as a host app will. The golden suite gains an ERB lane (fixtures under `test/golden/views/`, rendered against the frozen snapshots — still-Phlex components render through `phlex-rails`) and a strict lane (the canonical form in preserve mode, for every scenario). Nothing under `gem/lib/ruby_ui/<component>/` changes.
 
 **Tech Stack:** Ruby 3.3 and 3.4, Minitest, ActionView / Railties 8.1, ReActionView 0.4, Herb 0.10, phlex-rails 2.4 (development only, for the transition), Nokogiri, tailwind_merge.
 
@@ -45,7 +45,7 @@
 | `gem/test/golden_test.rb` | One test per scenario per lane; strict comparison where a strict snapshot exists; two more coverage tests. |
 | `gem/test/golden/views/<component>/<name>.html.erb` | The ERB lane's fixtures. This plan writes Button's 15; 2.0b writes the other 173. |
 | `gem/test/golden/canonical_html.rb` | `strict:` mode. |
-| `gem/test/golden/strict/<component>/<name>.html` | Strict snapshots, 36 files, recorded from the Phlex lane. |
+| `gem/test/golden/strict/<component>/<name>.html` | Strict snapshots, one per scenario (188), recorded from the Phlex lane. |
 | `design/v2/decisions.md` | Entries 5–9. |
 | `design/2026-09-19-rubyui-2-0-design.md` | §4.4 and §6 Phase 2.0 amended to what this plan built. |
 
@@ -115,8 +115,7 @@ require "test_helper"
 # the ERB lane and the component layer do later stands on these two facts.
 class ErbHarnessTest < Minitest::Test
   def test_erb_is_compiled_by_reactionview_under_rails_root
-    ActionView::Base # the handler is swapped when ActionView::Base loads
-
+    assert_kind_of Class, ActionView::Base # loading it is what swaps the handler in
     assert_equal ReActionView::Template::Handlers::ERB, ActionView::Template.handler_for_extension(:erb)
     assert_equal File.expand_path("..", __dir__), Rails.root.to_s
     assert_equal "test", Rails.env
@@ -228,7 +227,7 @@ cd gem
 bundle exec rake test N=/ErbHarnessTest/
 ```
 
-Expected: `2 runs, 4 assertions, 0 failures, 0 errors`.
+Expected: `2 runs, ... 0 failures, 0 errors`.
 
 - [ ] **Step 6: Run everything and confirm nothing else moved**
 
@@ -351,10 +350,19 @@ class AttributesTest < Minitest::Test
     assert_equal({"src" => "javascript-guide.png"}, flat(src: "javascript-guide.png"))
   end
 
-  def test_a_non_string_value_for_a_url_attribute_raises
-    assert_raises(ArgumentError) { flat(href: 1) }
-    assert_raises(ArgumentError) { flat(href: :edit) }
-    assert_raises(ArgumentError) { flat(href: {}) }
+  def test_a_non_string_value_is_serialized_then_checked
+    # Phlex serializes first and checks the result: 1 and :edit are ordinary
+    # values, a Symbol that spells a javascript: URL is not.
+    assert_equal({"href" => "1"}, flat(href: 1))
+    assert_equal({"href" => "edit"}, flat(href: :edit))
+    assert_equal({"href" => "/ edit"}, flat(href: ["/", "edit"]))
+    assert_equal({}, flat(href: :"javascript:x"))
+  end
+
+  def test_an_out_of_range_character_reference_decodes_to_nothing
+    # Phlex rescues the failed pack and treats the reference as empty, which
+    # leaves `javascript:` in front.
+    assert_equal({}, flat(href: "java&#999999999999999999;script:alert(1)"))
   end
 
   def test_true_is_allowed_on_a_url_attribute
@@ -381,7 +389,7 @@ cd gem
 bundle exec rake test N=/AttributesTest/
 ```
 
-Expected: 9 runs; `test_an_ordinary_url_is_kept`, `test_true_is_allowed_on_a_url_attribute`, `test_a_nested_on_key_is_not_an_event_handler` and `test_the_guard_does_not_touch_ordinary_attributes` pass (the ported layer already does that); the other 5 FAIL — nothing raises, nothing is dropped.
+Expected: 10 runs; `test_an_ordinary_url_is_kept`, `test_true_is_allowed_on_a_url_attribute`, `test_a_nested_on_key_is_not_an_event_handler` and `test_the_guard_does_not_touch_ordinary_attributes` pass (the ported layer already does that); the other 6 FAIL — nothing raises, nothing is dropped, and the javascript-spelling Symbol and the out-of-range reference come through as ordinary strings.
 
 - [ ] **Step 4: Patch `attributes.rb` with the guards**
 
@@ -394,10 +402,12 @@ In `gem/lib/ruby_ui/attributes.rb`:
   # untrusted values keeps the protection it has today: a name with `<>&"'/=`,
   # whitespace or NUL raises; `srcdoc`, `sandbox`, `http-equiv` and any `on*`
   # handler name raise; a URL-bearing attribute (`href`, `src`, `action`, …)
-  # whose decoded value starts with `javascript:` is dropped, and a non-String
-  # value for one of them raises. Not ported: Phlex's `:id`-must-be-a-lowercase-
-  # Symbol check (a Phlex convention) and the leading space it leaves when the
-  # first `style:` value is nil (no snapshot depends on it).
+  # whose serialized value, character references decoded, starts with
+  # `javascript:` is dropped — serialized first, as Phlex does, so `href: 1`
+  # renders and `href: :"javascript:x"` does not. Not ported: Phlex's
+  # `:id`-must-be-a-lowercase-Symbol check (a Phlex convention) and the leading
+  # space it leaves when the first `style:` value is nil (no snapshot depends
+  # on it).
 ```
 
 **(b)** After `TAILWIND_MERGER = TailwindMerge::Merger.new.freeze`, add:
@@ -405,31 +415,32 @@ In `gem/lib/ruby_ui/attributes.rb`:
 ```ruby
     UNSAFE_ATTRIBUTES = Set.new(%w[srcdoc sandbox http-equiv]).freeze
     REF_ATTRIBUTES = Set.new(%w[href src action formaction lowsrc dynsrc background ping xlinkhref]).freeze
-    UNSAFE_ATTRIBUTE_NAME_CHARS = %r([<>&"'/=\s\x00])
+    UNSAFE_ATTRIBUTE_NAME_CHARS = %r{[<>&"'/=\s\x00]}
 
-    # The character references decoded before the `javascript:` check. Phlex
-    # decodes every named reference; these are the numeric forms plus the
-    # named ones that can hide a scheme separator.
-    NAMED_REFERENCES = {
-      "colon" => ":", "tab" => "\t", "newline" => "\n",
-      "amp" => "&", "lt" => "<", "gt" => ">", "quot" => '"', "apos" => "'"
-    }.freeze
+    # The named character references Phlex decodes before the `javascript:`
+    # check — exactly these three; every other named reference decodes to
+    # nothing, as in Phlex. Numeric references are decoded in full.
+    NAMED_REFERENCES = {"colon" => ":", "tab" => "\t", "newline" => "\n"}.freeze
 ```
 
-**(c)** In `flat`, replace the two lines
+**(c)** Replace the whole `flat` method with:
 
 ```ruby
-          name = key_name(key)
-          case value
-```
-
-with
+      def flat(attributes)
+        attributes.each_with_object({}) do |(key, value), out|
+          next unless value
 
-```ruby
           name = key_name(key)
-          next if guard(name, value) == :drop
-
           case value
+          when Hash
+            (name == "style") ? emit(out, name, styles(value)) : nested(value, "#{name}-", out)
+          when Array, Set
+            emit(out, name, (name == "style") ? styles(value) : tokens(value))
+          else
+            emit(out, name, scalar(value))
+          end
+        end
+      end
 ```
 
 **(d)** In `nested`, replace the line that computes `name` — it begins `name = (key == :_) ?` — so that it is followed by the name-character check:
@@ -440,11 +451,20 @@ with
 
 ```
 
-**(e)** Add two private methods after `key_name`:
+**(e)** Add four private methods after `key_name`:
 
 ```ruby
+      # Phlex serializes first and guards the serialized value, so `href: 1`
+      # renders `href="1"` and `href: :"javascript:x"` is dropped. A nil here
+      # is an empty token list, which omits the attribute.
+      def emit(out, name, serialized)
+        return if serialized.nil?
+
+        out[name] = serialized unless guard(name, serialized) == :drop
+      end
+
       # :keep or :drop. Raises for the names Phlex refuses.
-      def guard(name, value)
+      def guard(name, serialized)
         raise ArgumentError, "unsafe attribute name #{name.inspect}" if name.match?(UNSAFE_ATTRIBUTE_NAME_CHARS)
 
         normalized = name.downcase.delete("^a-z-")
@@ -453,18 +473,24 @@ with
           raise ArgumentError, "unsafe attribute name #{name.inspect}"
         end
 
-        return :keep unless value != true && REF_ATTRIBUTES.include?(normalized)
-        raise ArgumentError, "invalid value for #{name}: #{value.inspect}" unless value.is_a?(String)
+        return :keep unless REF_ATTRIBUTES.include?(normalized)
 
-        decode_references(value).downcase.delete("^a-z:").start_with?("javascript:") ? :drop : :keep
+        decode_references(serialized).downcase.delete("^a-z:").start_with?("javascript:") ? :drop : :keep
       end
 
       def decode_references(value)
         value
-          .gsub(/&#x([0-9a-f]+);?/i) { [$1.to_i(16)].pack("U*") }
-          .gsub(/&#(\d+);?/) { [$1.to_i].pack("U*") }
+          .gsub(/&#x([0-9a-f]+);?/i) { codepoint($1.to_i(16)) }
+          .gsub(/&#(\d+);?/) { codepoint($1.to_i) }
           .gsub(/&([a-z][a-z0-9]+);?/i) { NAMED_REFERENCES[$1.downcase] || "" }
       end
+
+      # Phlex swallows a reference it cannot pack; so does this.
+      def codepoint(number)
+        [number].pack("U*")
+      rescue RangeError
+        ""
+      end
 ```
 
 - [ ] **Step 5: Run the guard tests and confirm all nine pass**
@@ -474,7 +500,7 @@ cd gem
 bundle exec rake test N=/AttributesTest/
 ```
 
-Expected: `9 runs, ... 0 failures, 0 errors`.
+Expected: `10 runs, ... 0 failures, 0 errors`.
 
 - [ ] **Step 6: Adapt the differential test to the harness**
 
@@ -503,6 +529,14 @@ In `gem/test/ruby_ui/attributes_differential_test.rb`:
   end
   ```
 
+- Add three cases to `FLAT_CASES`, after the `"empty token list omits the attribute"` entry — the URL-value shapes the guards must serialize before checking, compared against Phlex like every other case:
+
+  ```ruby
+    "url attribute from a non-string" => {href: 1, src: ["/", "a.png"]},
+    "javascript url is dropped, a data attribute is not" => {href: :"javascript:x", "data-href" => "javascript:kept"},
+    "out-of-range character reference" => {href: "java&#999999999999999999;script:alert(1)"}
+  ```
+
 - [ ] **Step 7: Run the differential test and confirm it passes**
 
 ```bash
@@ -510,7 +544,7 @@ cd gem
 bundle exec rake test N=/AttributesDifferentialTest/
 ```
 
-Expected: `24 runs, ... 0 failures, 0 errors` — 15 flat cases, 8 mix cases, 1 merge case. If any flat or mix case fails, STOP: the layer disagrees with Phlex 2.4.1 for that shape and the disagreement is the finding.
+Expected: `27 runs, ... 0 failures, 0 errors` — 18 flat cases, 8 mix cases, 1 merge case. If any flat or mix case fails, STOP: the layer disagrees with Phlex 2.4.1 for that shape and the disagreement is the finding.
 
 - [ ] **Step 8: Run everything**
 
@@ -519,7 +553,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `535 runs, ... 0 failures, 0 errors, 0 skips`, `414 files inspected, no offenses detected`. Snapshots unchanged; registry current (`attributes.rb` is a top-level file, not under a component directory, so the builder does not embed it):
+Expected: `539 runs, ... 0 failures, 0 errors, 0 skips`, `414 files inspected, no offenses detected`. Snapshots unchanged; registry current (`attributes.rb` is a top-level file, not under a component directory, so the builder does not embed it):
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -760,7 +794,7 @@ module RubyUI
 
       def initialize(**attrs)
         @id = "content#{SecureRandom.hex(4)}"
-        super(**attrs)
+        super
       end
     end
   end
@@ -890,6 +924,10 @@ HOST SHADOW
 In `gem/test/test_helper.rb`, after `Rails.application.initialize!`, add:
 
 ```ruby
+# component_roots= is a module method, not a constant: the autoload above does
+# not reach it, so the file is required outright.
+require "ruby_ui/component"
+
 # Two component roots: the gem's own components, and the test-only probes.
 # A class's sidecar is looked up under the root that contains the class file.
 RubyUI.component_roots = [File.join(RubyUI::TestApp::ROOT, "lib"), File.join(RubyUI::TestApp::ROOT, "test/probes")]
@@ -1039,7 +1077,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `550 runs, ... 0 failures, 0 errors, 0 skips`, `422 files inspected, no offenses detected` (414 + `component.rb` + `component_test.rb` + six probe `.rb` files). Snapshots unchanged; registry current.
+Expected: `554 runs, ... 0 failures, 0 errors, 0 skips`, `422 files inspected, no offenses detected` (414 + `component.rb` + `component_test.rb` + six probe `.rb` files). Snapshots unchanged; registry current.
 
 - [ ] **Step 9: Commit**
 
@@ -1149,7 +1187,8 @@ In `gem/lib/ruby_ui/component.rb`, inside `class Component`, in the `private` se
     # both must select `table[:lg]`; nil takes the default. Anything else names
     # the allowed values instead of silently dropping the class.
     def enum(value, table, default:)
-      key = value.nil? ? default : (value.respond_to?(:to_sym) ? value.to_sym : value)
+      key = value.nil? ? default : value
+      key = key.to_sym if key.respond_to?(:to_sym)
       return key if table.key?(key)
 
       raise ArgumentError,
@@ -1173,7 +1212,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `555 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`. Snapshots unchanged; registry current.
+Expected: `559 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`. Snapshots unchanged; registry current.
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -1197,7 +1236,7 @@ MSG
 
 Every scenario keeps its Phlex block. A scenario may also have an ERB fixture at `test/golden/views/<component>/<name>.html.erb`; when it does, the suite renders the fixture through the harness and compares it against the **same frozen snapshot**. The two lanes are independent tests. Because `phlex-rails` is loaded, a fixture can render a component that is still Phlex — so the fixtures for all 188 scenarios can be written and made green before a single component migrates (decision 7). This task builds the lane and writes Button's 15 fixtures as the proof; plan 2.0b writes the other 173.
 
-During the transition the Phlex lane records (`golden:update` writes from it when a scenario has a block); the ERB lane only compares. When the last block goes, the ERB lane records.
+During the transition the Phlex lane records; the ERB lane only compares. When the last block goes, the ERB lane records. Because Minitest runs a scenario's two lane tests in random order, the recording is done once per scenario **before either lane compares**, not inside the recording lane's own test — otherwise `golden:update` could read a stale or absent file in the lane that happened to run first.
 
 **Files:**
 - Modify: `gem/test/golden/catalog.rb`
@@ -1241,6 +1280,12 @@ In `gem/test/golden/catalog.rb`:
         [(:phlex if block), (:erb if fixture?)].compact
       end
 
+      # The lane whose render is written to disk on `golden:update`: the Phlex
+      # block while the scenario has one, the ERB fixture after.
+      def recording_lane
+        block ? :phlex : :erb
+      end
+
       def test_name(lane = nil)
         lane ? :"test_#{component}__#{name}__#{lane}" : :"test_#{component}__#{name}"
       end
@@ -1344,10 +1389,10 @@ with
   end
 ```
 
-**(b)** Change `def assert_golden(scenario)` to `def assert_golden(scenario, lane)`, and inside it replace every `canonicalize(scenario)` with `canonicalize(scenario, lane)`. Replace the `if UPDATE` line with
+**(b)** Change `def assert_golden(scenario)` to `def assert_golden(scenario, lane)`, and inside it replace every `canonicalize(scenario)` with `canonicalize(scenario, lane)`. Replace the whole `if UPDATE … end` block (three lines) with
 
 ```ruby
-    if UPDATE && recording_lane?(scenario, lane)
+    record!(scenario) if UPDATE
 ```
 
 **(c)** Replace `canonicalize` and add the two helpers:
@@ -1361,11 +1406,20 @@ with
     (lane == :erb) ? Golden::Harness.render_erb(scenario) : Golden::Harness.render(&scenario.block)
   end
 
-  # While a scenario still has a Phlex block, that lane is the one that
-  # records; the ERB lane only compares. Once the block is gone, the ERB lane
-  # records.
-  def recording_lane?(scenario, lane)
-    (lane == :phlex) || scenario.block.nil?
+  # In update mode the authoritative lane writes the snapshot before either
+  # lane compares, once per scenario per process, so the order Minitest picks
+  # for a scenario's lane tests cannot make one of them read a stale or absent
+  # file.
+  def record!(scenario)
+    self.class.recorded[scenario.slug] ||= begin
+      FileUtils.mkdir_p(File.dirname(scenario.snapshot_path))
+      File.write(scenario.snapshot_path, Golden::CanonicalHtml.call(render(scenario, scenario.recording_lane)))
+      true
+    end
+  end
+
+  def self.recorded
+    @recorded ||= {}
   end
 ```
 
@@ -1384,9 +1438,16 @@ with
       end
 ```
 
-**(e)** Add a coverage test to `GoldenCoverageTest`:
+**(e)** Add two coverage tests to `GoldenCoverageTest`. A scenario with neither a block nor a fixture would define no test at all and pass by absence; the first test makes that a failure:
 
 ```ruby
+  def test_every_scenario_has_at_least_one_lane
+    laneless = Golden::Catalog.scenarios.reject { |scenario| scenario.lanes.any? }.map(&:slug)
+
+    assert_empty laneless,
+      "scenarios with neither a Phlex block nor an ERB fixture (they would define no test): #{laneless.join(", ")}"
+  end
+
   def test_no_orphan_fixture_files
     expected = Golden::Catalog.scenarios.map(&:fixture_path).sort
     orphans = Golden::Catalog.fixture_files - expected
@@ -1405,7 +1466,7 @@ cd gem
 bundle exec rake golden
 ```
 
-Expected: `200 runs, ... 0 failures, 0 errors, 0 skips` — 188 Phlex-lane scenarios, 4 coverage tests, 7 canonicalizer tests, 1 harness test.
+Expected: `206 runs, ... 0 failures, 0 errors, 0 skips` — 188 Phlex-lane scenarios, 5 coverage tests, 9 canonicalizer tests, 4 harness tests.
 
 - [ ] **Step 5: Write Button's fixtures**
 
@@ -1462,7 +1523,7 @@ cd gem
 bundle exec rake golden
 ```
 
-Expected: `215 runs, ... 0 failures, 0 errors, 0 skips` — the 15 `test_button__*__erb` tests are new and green against the frozen snapshots, rendering the still-Phlex `RubyUI::Button` through phlex-rails. Then:
+Expected: `221 runs, ... 0 failures, 0 errors, 0 skips` — the 15 `test_button__*__erb` tests are new and green against the frozen snapshots, rendering the still-Phlex `RubyUI::Button` through phlex-rails. Then:
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -1478,7 +1539,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `571 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`. Registry current.
+Expected: `576 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`. Registry current.
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -1506,20 +1567,20 @@ MSG
 
 ## Task 6: The strict lane
 
-The canonical form is blind, by design, to whitespace between element siblings and at text–element boundaries (§9.1). For the components whose output is text — Typography, InlineCode and InlineLink (`typography`), Badge, FormFieldError (`form`), ComboboxItem (`combobox`), ShortcutKey — the suite keeps a second snapshot: the canonical form in **preserve mode** over the whole fragment (text verbatim, whitespace kept, attributes still sorted, comments still dropped, the fragment's own leading and trailing whitespace trimmed). Recorded from the Phlex lane now, while Phlex still renders; a fixture or a migrated component that adds a newline where Phlex emitted none fails it.
+The canonical form is blind, by design, to whitespace between element siblings and at text–element boundaries (§9.1). Every scenario now keeps a second snapshot: the canonical form in **preserve mode** over the whole fragment (text verbatim, whitespace kept, attributes still sorted, comments still dropped, the fragment's own leading and trailing whitespace trimmed). Recorded from the Phlex lane now, while Phlex still renders; a fixture or a migrated component that adds a newline where Phlex emitted none fails it — for every component, not a chosen list (decision 8: an audit of the catalog found text inside inline elements in 38 of 54 components, and any list is one review away from missing one).
 
 **Files:**
 - Modify: `gem/test/golden/canonical_html.rb`
 - Modify: `gem/test/golden/canonical_html_test.rb`
 - Modify: `gem/test/golden/catalog.rb`
 - Modify: `gem/test/golden_test.rb`
-- Create (by re-recording): 36 files under `gem/test/golden/strict/`
+- Create (by re-recording): 188 files under `gem/test/golden/strict/`
 
 **Interfaces:**
 - Consumes: Task 5's lanes.
 - Produces:
   - `Golden::CanonicalHtml.call(html, strict: false)`; `strict: true` is the preserve-mode form.
-  - `Golden::Catalog::STRICT_ROOT`, `STRICT_COMPONENTS`; `Scenario#strict?`, `#strict_snapshot_path`; `Golden::Catalog.strict_files`.
+  - `Golden::Catalog::STRICT_ROOT`; `Scenario#strict_snapshot_path`; `Golden::Catalog.strict_files`; `record!` writes both forms.
 
 - [ ] **Step 1: Write the failing canonicalizer tests**
 
@@ -1558,6 +1619,22 @@ Add to `gem/test/golden/canonical_html_test.rb`, inside the class:
     assert_equal once, strict(once)
     assert_includes once, "a < b"
   end
+
+  def test_strict_restores_the_newline_the_parser_drops_after_pre_and_textarea
+    %w[pre textarea].each do |tag|
+      once = strict("<#{tag}>\n\nx</#{tag}>")
+
+      assert_equal "<#{tag}>\n\nx</#{tag}>", once
+      assert_equal once, strict(once)
+    end
+  end
+
+  def test_strict_restores_it_for_a_nested_pre_too
+    once = strict("<div><pre>\n\nx</pre></div>")
+
+    assert_equal "<div><pre>\n\nx</pre></div>", once
+    assert_equal once, strict(once)
+  end
 ```
 
 - [ ] **Step 2: Run them and confirm they fail**
@@ -1567,7 +1644,7 @@ cd gem
 bundle exec rake test N=/GoldenCanonicalHtmlTest#test_strict/
 ```
 
-Expected: 6 runs, 6 errors — `ArgumentError: unknown keyword: :strict`.
+Expected: 8 runs, 8 errors — `ArgumentError: unknown keyword: :strict`.
 
 - [ ] **Step 3: Add strict mode**
 
@@ -1587,7 +1664,50 @@ In `gem/test/golden/canonical_html.rb`:
       end
 ```
 
-**(b)** In `child_mode`, move the raw-text check ahead of the mode check, so a `<script>` or `<style>` inside a strict fragment is still emitted raw (escaping it would break the fixed point):
+**(b)** Replace the whole `emit_element` method. The newline the HTML parser drops after a `<pre>` or `<textarea>` start tag was only restored when the outer mode was `:normal`; in strict mode the whole fragment starts in `:preserve`, so `<pre>\n\nx</pre>` lost its blank line on the second pass. The restoration now depends on the element, not on the outer mode:
+
+```ruby
+      def emit_element(node, depth, out, mode)
+        open = open_tag(node)
+        close = VOID.include?(node.name) ? "" : "</#{node.name}>"
+        inner_mode = child_mode(node, mode)
+        children = significant_children(node, inner_mode)
+        # The parser drops exactly one LF immediately after a <pre> or
+        # <textarea> start tag. Put it back whatever the outer mode, or a second
+        # pass over content that starts with a blank line eats it and the form
+        # stops being a fixed point.
+        restored = restored_newline(node, children)
+
+        if mode != :normal
+          # Inside a preserved region we may not add a single character of our
+          # own, or the round trip would change the content.
+          out << open << restored
+          children.each { |child| emit(child, depth, out, inner_mode) }
+          out << close
+        elsif inner_mode != :normal
+          out << (INDENT * depth) << open << restored
+          children.each { |child| emit(child, depth, out, inner_mode) }
+          out << close << "\n"
+        elsif children.empty?
+          # `<div></div>` and `<div>\n</div>` are not the same element to a
+          # browser: `:empty` matches only the first, and `textContent` is
+          # truthy only on the second. Keep a single space to tell them apart.
+          filler = whitespace_only_content?(node) ? " " : ""
+          out << (INDENT * depth) << open << filler << close << "\n"
+        else
+          out << (INDENT * depth) << open << "\n"
+          children.each { |child| emit(child, depth + 1, out, :normal) }
+          out << (INDENT * depth) << close << "\n"
+        end
+      end
+
+      def restored_newline(node, children)
+        first = children.first
+        (PRESERVE_WHITESPACE.include?(node.name) && first.is_a?(Nokogiri::XML::Text) && first.text.start_with?("\n")) ? "\n" : ""
+      end
+```
+
+**(c)** In `child_mode`, move the raw-text check ahead of the mode check, so a `<script>` or `<style>` inside a strict fragment is still emitted raw (escaping it would break the fixed point):
 
 ```ruby
       def child_mode(node, mode)
@@ -1605,13 +1725,13 @@ cd gem
 bundle exec rake test N=/GoldenCanonicalHtmlTest/
 ```
 
-Expected: `13 runs, ... 0 failures, 0 errors` (the 7 existing and the 6 new). Then confirm nothing moved in normal mode:
+Expected: `17 runs, ... 0 failures, 0 errors` (the 9 existing and the 8 new). Then confirm nothing moved in normal mode:
 
 ```bash
 bundle exec rake golden
 ```
 
-Expected: `221 runs, 0 failures` (the six strict tests join the ruler's own), no snapshot change.
+Expected: `229 runs, 0 failures` (the eight strict tests join the ruler's own), no snapshot change.
 
 - [ ] **Step 5: Wire strict snapshots into the catalog and the runner**
 
@@ -1620,20 +1740,15 @@ In `gem/test/golden/catalog.rb`:
 **(a)** After `VIEWS_ROOT`, add:
 
 ```ruby
+    # Every scenario also keeps its strict form — the same fragment in
+    # preserve mode — so whitespace between siblings and at text boundaries is
+    # part of the contract for every component (spec §9.1, decision 8).
     STRICT_ROOT = File.expand_path("strict", __dir__)
-
-    # The components whose output is text, and so whose whitespace is part of
-    # what they render: spec §9.1. Their scenarios keep a strict snapshot too.
-    STRICT_COMPONENTS = %w[badge combobox form shortcut_key typography].freeze
 ```
 
-**(b)** Inside `Scenario`, after `lanes`, add:
+**(b)** Inside `Scenario`, after `recording_lane`, add:
 
 ```ruby
-      def strict?
-        STRICT_COMPONENTS.include?(component)
-      end
-
       def strict_snapshot_path
         File.join(STRICT_ROOT, component, "#{name}.html")
       end
@@ -1652,7 +1767,7 @@ In `gem/test/golden_test.rb`:
 **(d)** At the end of `assert_golden`, after the final `assert_equal recorded, canonical, …`, add:
 
 ```ruby
-    assert_strict(scenario, lane) if scenario.strict?
+    assert_strict(scenario, lane)
 ```
 
 **(e)** Add the method after `assert_golden`:
@@ -1666,11 +1781,6 @@ In `gem/test/golden_test.rb`:
     assert_equal strict, Golden::CanonicalHtml.call(render(scenario, lane), strict: true),
       "#{scenario.slug} does not render deterministically in strict form"
 
-    if UPDATE && recording_lane?(scenario, lane)
-      FileUtils.mkdir_p(File.dirname(scenario.strict_snapshot_path))
-      File.write(scenario.strict_snapshot_path, strict)
-    end
-
     assert_path_exists scenario.strict_snapshot_path,
       "no strict snapshot for #{scenario.slug} — run `bundle exec rake golden:update` and review the diff"
 
@@ -1684,11 +1794,26 @@ In `gem/test/golden_test.rb`:
   end
 ```
 
-**(f)** Add a coverage test to `GoldenCoverageTest`:
+**(f)** Replace `record!` so one render writes both forms:
+
+```ruby
+  def record!(scenario)
+    self.class.recorded[scenario.slug] ||= begin
+      rendered = render(scenario, scenario.recording_lane)
+      FileUtils.mkdir_p(File.dirname(scenario.snapshot_path))
+      File.write(scenario.snapshot_path, Golden::CanonicalHtml.call(rendered))
+      FileUtils.mkdir_p(File.dirname(scenario.strict_snapshot_path))
+      File.write(scenario.strict_snapshot_path, Golden::CanonicalHtml.call(rendered, strict: true))
+      true
+    end
+  end
+```
+
+**(g)** Add a coverage test to `GoldenCoverageTest`:
 
 ```ruby
   def test_no_orphan_strict_snapshot_files
-    expected = Golden::Catalog.scenarios.select { |scenario| scenario.strict? && scenario.pinned? }.map(&:strict_snapshot_path).sort
+    expected = Golden::Catalog.scenarios.select(&:pinned?).map(&:strict_snapshot_path).sort
     orphans = Golden::Catalog.strict_files - expected
 
     assert_empty orphans,
@@ -1703,7 +1828,7 @@ cd gem
 bundle exec rake golden 2>&1 | grep -c "no strict snapshot"
 ```
 
-Expected: `36` — 4 badge + 5 combobox + 1 form + 1 shortcut_key + 25 typography scenarios, all failing on the missing file and nothing else. If the number differs, STOP and list the scenarios.
+Expected: `203` — every one of the 188 Phlex-lane tests and the 15 Button ERB-lane tests failing on the missing file and nothing else. If the number differs, STOP and list the scenarios.
 
 - [ ] **Step 7: Record the strict snapshots**
 
@@ -1712,11 +1837,11 @@ cd gem
 bundle exec rake golden:update
 cd /Users/cirdes/Workspaces/ruby_ui
 git status --porcelain gem/test/golden/snapshots | wc -l
-git status --porcelain gem/test/golden/strict | wc -l
+git status --porcelain --untracked-files=all gem/test/golden/strict | wc -l
 find gem/test/golden/strict -name '*.html' | wc -l
 ```
 
-Expected: `0` (no canonical snapshot changed), `36`, `36`. Read three of them — `badge/all_variants.html`, `typography/inline_link.html`, `form/default.html` — and confirm they are the raw Phlex output with attributes sorted: no indentation, no added newlines, text verbatim.
+Expected: `0` (no canonical snapshot changed), `188`, `188`. Read three of them — `badge/all_variants.html`, `dialog/default.html`, `codeblock/ruby_with_clipboard.html` — and confirm they are the raw Phlex output with attributes sorted: no indentation, no added newlines, text verbatim, the `<pre>` content intact.
 
 - [ ] **Step 8: Run everything and commit**
 
@@ -1725,22 +1850,22 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `578 runs, ... 0 failures, 0 errors, 0 skips` (571 + 6 strict canonicalizer tests + 1 coverage test), `423 files inspected, no offenses detected`. Registry current.
+Expected: `585 runs, ... 0 failures, 0 errors, 0 skips` (576 + 8 strict canonicalizer tests + 1 coverage test), `423 files inspected, no offenses detected`. Registry current.
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
 git add gem/test/golden/canonical_html.rb gem/test/golden/canonical_html_test.rb gem/test/golden/catalog.rb gem/test/golden_test.rb gem/test/golden/strict
 git commit -m "$(cat <<'MSG'
-[Feature] Golden suite: a strict lane for the components whose output is text
+[Feature] Golden suite: a strict lane for every scenario
 
 The canonical form is blind to whitespace between siblings and at text
-boundaries by design. For badge, combobox, form, shortcut_key and
-typography — the components whose whitespace is part of what they
-render — the suite now also keeps the preserve-mode form: text verbatim,
-attributes sorted, the fragment's own edges trimmed. 36 strict snapshots
-recorded from the Phlex lane while Phlex still renders; a fixture or a
-migrated component that adds a newline where Phlex emitted none fails
-here even though the canonical form cannot see it.
+boundaries by design. Every scenario now also keeps the preserve-mode
+form: text verbatim, attributes sorted, the fragment's own edges
+trimmed. 188 strict snapshots recorded from the Phlex lane while Phlex
+still renders; a fixture or a migrated component that adds a newline
+where Phlex emitted none fails here even though the canonical form
+cannot see it. The newline the parser drops after <pre> and <textarea>
+is now restored in every mode, so the strict form is a fixed point too.
 
 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
 MSG
@@ -1801,18 +1926,29 @@ Phlex block, that lane records and the ERB lane compares.
 **Cost if wrong:** ~2,000 lines of ERB written ahead of the first migration.
 `phlex-rails` leaves the gemspec with the last Phlex component.
 
-## 8. The strict lane is the canonical form in preserve mode — 2026-09-20
+## 8. The strict lane is the canonical form in preserve mode, for every scenario — 2026-09-20
 
-For badge, combobox, form, shortcut_key and typography — the components whose
-output is text — a second snapshot holds `CanonicalHtml.call(html, strict: true)`:
+Every scenario keeps a second snapshot, `CanonicalHtml.call(html, strict: true)`:
 the whole fragment in the normalizer's preserve mode (text and whitespace
 verbatim, attributes sorted, comments dropped, the fragment's own edges
-trimmed). Same fixed-point discipline, same recording rule, same runner. The 36
-strict snapshots were recorded from Phlex. Fixtures for those components are
-written whitespace-tight — one line, or `<%-`/`-%>` — because the strict form
-sees every newline the fixture adds.
-**Cost if wrong:** 36 more files to keep, and strictness where a browser would
-not have cared (inside a flex parent, say).
+trimmed). Same fixed-point discipline, same recording rule, same runner. The 188
+strict snapshots were recorded from Phlex.
+
+The spec named seven text-bearing components; the plan first mapped that to
+five directories. Review found a sixth (Breadcrumb), and an audit of the raw
+Phlex output found text inside an inline element in 38 of 54 components — any
+list is one review away from missing one. So there is no list: the contract is
+the literal one, *the 2.0 sidecar emits what Phlex emitted*, and Phlex never
+emitted whitespace between elements. Fixtures and sidecars are written
+whitespace-tight — one line, or `<%-`/`-%>` — because the strict form sees
+every newline they add; the canonical form stays as the diagnostic (canonical
+passes, strict fails: whitespace only).
+**Cost if wrong:** 188 more files to keep, sidecars without newlines between
+static elements, and strictness where a browser would not have cared (inside a
+flex parent, say). **What would reverse it:** sidecars for the large composites
+proving unreadable under the rule, at which point the strict lane narrows to a
+criterion computed from the output (text adjacent to an element sibling) rather
+than a hand-picked list.
 
 ## 9. Sidecar lookup takes a list of roots; the fresh-app script moves to 2.4 — 2026-09-20
 
@@ -1874,10 +2010,24 @@ directory the sidecar lookup searches (§4.3) `` with `` `component_roots` lists
 
 ```markdown
 - Define the **strict lane**: `CanonicalHtml.call(html, strict: true)`, the
-  preserve-mode form, with its own snapshots under `gem/test/golden/strict/`
-  for badge, combobox, form, shortcut_key and typography, recorded from Phlex
-  (decision 8). Sidecars and fixtures for those components are written
-  whitespace-tight. A strict-lane failure is a real difference, not noise.
+  preserve-mode form, with its own snapshot for every scenario under
+  `gem/test/golden/strict/`, recorded from Phlex (decision 8). Sidecars and
+  fixtures are written whitespace-tight. A strict-lane failure is a real
+  difference, not noise.
+```
+
+**(i)** In §10's risk table, in the row that begins `| \`app/components\` is also ViewComponent's directory |`, replace `scoped to \`component_root\` (§4.4)` with `scoped to \`component_roots\` (§4.4)`.
+
+**(j)** In §6 Phase 2.3's acceptance paragraph, replace `In the fresh-app install script (Phase 2.0),` with `In the fresh-app install script (Phase 2.4),`.
+
+**(k)** In §9.1, replace the closing paragraph that begins `What the canonical form still does not see, stated as the contract's` (four lines, through `not as a criterion.`) with:
+
+```markdown
+As of Phase 2.0a the strict lane closes this for every scenario: each also
+keeps its preserve-mode form, so whitespace between element siblings and at
+text–element boundaries is part of the contract, not an exclusion (decision 8).
+The inventory script stays in the tree as a way to read the catalog, not as a
+criterion.
 ```
 
 **(g)** Replace the bullet that begins `- **Fresh-app install test.**` (five lines) with:
@@ -1892,7 +2042,8 @@ directory the sidecar lookup searches (§4.3) `` with `` `component_roots` lists
 ```markdown
 **Acceptance.** The layer is in the gem with its own tests, guards included.
 The ERB lane is green for Button's 15 scenarios against the frozen snapshots
-with Button still Phlex, and the strict lane holds 36 recorded snapshots. All
+with Button still Phlex, and the strict lane holds one recorded snapshot per
+scenario (188). All
 three CI jobs are green with the registry unchanged.
 ```
 
@@ -1901,10 +2052,11 @@ three CI jobs are green with the registry unchanged.
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
 grep -n "component_root\b" design/2026-09-19-rubyui-2-0-design.md
-grep -n "Fresh-app install test" design/2026-09-19-rubyui-2-0-design.md
+grep -n "install script (Phase 2.0)" design/2026-09-19-rubyui-2-0-design.md
+grep -n "stated as the contract's" design/2026-09-19-rubyui-2-0-design.md
 ```
 
-Expected: the first prints nothing (every mention is now `component_roots`); the second prints exactly the one amended bullet and the Phase 2.4 mention, if any.
+Expected: all three print nothing — every `component_root` is now `component_roots`, the fresh-app script is attributed to Phase 2.4 everywhere, and §9.1 no longer states an exclusion.
 
 - [ ] **Step 4: Commit**
 
@@ -1950,7 +2102,7 @@ bundle exec rake
 cd ../mcp && bundle exec exe/ruby-ui-mcp-build >/dev/null && git diff --exit-code data/registry.json && echo "registry current"
 ```
 
-Expected: `578 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`, `registry current`.
+Expected: `585 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`, `registry current`.
 
 - [ ] **Step 3: Ask the user before pushing**
 
@@ -1981,8 +2133,8 @@ still Phlex:
   rendered and compared against the same frozen snapshot. With `phlex-rails`
   loaded a fixture renders a still-Phlex component, so all 188 fixtures can be
   green before any migration. Button's 15 are here as the proof.
-- **The strict lane** — the canonical form in preserve mode, with 36 snapshots
-  for the components whose output is text, recorded from Phlex.
+- **The strict lane** — the canonical form in preserve mode, with one snapshot
+  per scenario (188), recorded from Phlex.
 
 No component migrates. Nothing under `gem/lib/ruby_ui/<component>/` changes;
 the 188 golden snapshots are byte-identical to #536. No runtime dependency is
@@ -1998,8 +2150,8 @@ spec deferred to this phase are decided in `design/v2/decisions.md` entries 5–
 
 ```bash
 cd gem
-bundle exec rake            # 578 runs, 0 skips; 423 files, no offenses
-bundle exec rake golden     # 222 runs: 188 Phlex-lane + 15 ERB-lane + 5 coverage + 14 of the ruler's own
+bundle exec rake            # 585 runs, 0 skips; 423 files, no offenses
+bundle exec rake golden     # 230 runs: 188 Phlex-lane + 15 ERB-lane + 6 coverage + 21 of the ruler's own
 ```
 
 To see the ERB lane work, edit `test/golden/views/button/size_md.html.erb` to
@@ -2018,13 +2170,13 @@ MSG
 - `RubyUI::Component` and `RubyUI::Attributes` in `gem/lib/ruby_ui/`, with the differential test against Phlex 2.4.1 green (24 cases) and the guard tests green (9).
 - The 188 golden snapshots byte-identical to `feat/golden-suite`.
 - The ERB lane green for Button's 15 scenarios with `RubyUI::Button` still Phlex.
-- 36 strict snapshots recorded; the strict form a fixed point over every one.
+- 188 strict snapshots recorded; the strict form a fixed point over every one; every scenario has at least one lane.
 - No file under `gem/lib/ruby_ui/<component>/` changed; no runtime dependency added.
 - `design/v2/decisions.md` entries 5–9; spec §4.4 and §6 Phase 2.0 amended.
 
 ## Not in this plan
 
-- **Plan 2.0b** — the other 173 ERB fixtures, component by component, each batch green against the frozen snapshots (and the strict snapshots for the five strict components) before the next. Its first task adds the coverage test `every scenario has a fixture`, which cannot pass until it is done.
+- **Plan 2.0b** — the other 173 ERB fixtures, component by component, each batch green against the frozen canonical and strict snapshots before the next — so every fixture is written whitespace-tight. Its first task adds the coverage test `every scenario has a fixture`, which cannot pass until it is done.
 - **`docs/Gemfile` pinned to the published 1.6 gem** — nothing in `docs/` breaks until the first component migrates, so the pin is the first task of the 2.1 plan.
 - **The fresh-app install script** — Phase 2.4, with the installer.
 - **Runtime dependencies in the gemspec, the installer, `Component` → `Base`** — Phase 2.4.

From f9a30c77304e1b24ad1f75a71e8b6a21edb470ad Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 12:24:52 -0300
Subject: [PATCH 03/20] [Documentation] Phase 2.0a plan: the fixed-point fixes
 moved to the ruler's PR

The restoration of the newline after <pre>/<textarea> in every mode and
raw-text precedence in child_mode closed three normal-mode fixed-point
holes, so they now ship on feat/golden-suite (64cf273). Task 6 adds
only strict mode; every run count shifts by the three tests that came
with the fix.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 ...20-phase-2-0a-foundation-implementation.md | 86 ++++---------------
 1 file changed, 17 insertions(+), 69 deletions(-)

diff --git a/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md b/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
index 5568bea4..78a5b018 100644
--- a/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
+++ b/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
@@ -53,7 +53,7 @@
 
 ## Task 1: The harness — an inline Rails application
 
-ReActionView's handler reads `Rails.root` without a guard (`local_template?`, `project_path`), and a template outside `Rails.root` is "external": when Herb rejects it, `external_template_mode: :fallback` **silently recompiles it with Erubi**. So the gem's tests need a `Rails`, and its root must be the gem directory. The smallest honest thing is an inline `Rails::Application` — no `app/` directory, no routes, no database — booted from `test_helper.rb`. Measured on this branch: with it in place the existing suite stays at 500 runs, 0 failures, 0 snapshot changes, and `ActionView::Template.handler_for_extension(:erb)` is `ReActionView::Template::Handlers::ERB`.
+ReActionView's handler reads `Rails.root` without a guard (`local_template?`, `project_path`), and a template outside `Rails.root` is "external": when Herb rejects it, `external_template_mode: :fallback` **silently recompiles it with Erubi**. So the gem's tests need a `Rails`, and its root must be the gem directory. The smallest honest thing is an inline `Rails::Application` — no `app/` directory, no routes, no database — booted from `test_helper.rb`. Measured on this branch: with it in place the existing suite stays at 503 runs, 0 failures, 0 snapshot changes, and `ActionView::Template.handler_for_extension(:erb)` is `ReActionView::Template::Handlers::ERB`.
 
 One trap, also measured: without `RAILS_ENV=test`, `Rails.env` is `development` and 1.6's `Base#before_template` emits `<!-- Before RubyUI::X -->`, which fails six unit tests. The helper sets the env first.
 
@@ -236,7 +236,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `502 runs, ... 0 failures, 0 errors, 0 skips` and `411 files inspected, no offenses detected`. Then:
+Expected: `505 runs, ... 0 failures, 0 errors, 0 skips` and `411 files inspected, no offenses detected`. Then:
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -553,7 +553,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `539 runs, ... 0 failures, 0 errors, 0 skips`, `414 files inspected, no offenses detected`. Snapshots unchanged; registry current (`attributes.rb` is a top-level file, not under a component directory, so the builder does not embed it):
+Expected: `542 runs, ... 0 failures, 0 errors, 0 skips`, `414 files inspected, no offenses detected`. Snapshots unchanged; registry current (`attributes.rb` is a top-level file, not under a component directory, so the builder does not embed it):
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -1077,7 +1077,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `554 runs, ... 0 failures, 0 errors, 0 skips`, `422 files inspected, no offenses detected` (414 + `component.rb` + `component_test.rb` + six probe `.rb` files). Snapshots unchanged; registry current.
+Expected: `557 runs, ... 0 failures, 0 errors, 0 skips`, `422 files inspected, no offenses detected` (414 + `component.rb` + `component_test.rb` + six probe `.rb` files). Snapshots unchanged; registry current.
 
 - [ ] **Step 9: Commit**
 
@@ -1212,7 +1212,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `559 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`. Snapshots unchanged; registry current.
+Expected: `562 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`. Snapshots unchanged; registry current.
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -1466,7 +1466,7 @@ cd gem
 bundle exec rake golden
 ```
 
-Expected: `206 runs, ... 0 failures, 0 errors, 0 skips` — 188 Phlex-lane scenarios, 5 coverage tests, 9 canonicalizer tests, 4 harness tests.
+Expected: `209 runs, ... 0 failures, 0 errors, 0 skips` — 188 Phlex-lane scenarios, 5 coverage tests, 12 canonicalizer tests, 4 harness tests.
 
 - [ ] **Step 5: Write Button's fixtures**
 
@@ -1523,7 +1523,7 @@ cd gem
 bundle exec rake golden
 ```
 
-Expected: `221 runs, ... 0 failures, 0 errors, 0 skips` — the 15 `test_button__*__erb` tests are new and green against the frozen snapshots, rendering the still-Phlex `RubyUI::Button` through phlex-rails. Then:
+Expected: `224 runs, ... 0 failures, 0 errors, 0 skips` — the 15 `test_button__*__erb` tests are new and green against the frozen snapshots, rendering the still-Phlex `RubyUI::Button` through phlex-rails. Then:
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -1539,7 +1539,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `576 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`. Registry current.
+Expected: `579 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`. Registry current.
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -1664,59 +1664,7 @@ In `gem/test/golden/canonical_html.rb`:
       end
 ```
 
-**(b)** Replace the whole `emit_element` method. The newline the HTML parser drops after a `<pre>` or `<textarea>` start tag was only restored when the outer mode was `:normal`; in strict mode the whole fragment starts in `:preserve`, so `<pre>\n\nx</pre>` lost its blank line on the second pass. The restoration now depends on the element, not on the outer mode:
-
-```ruby
-      def emit_element(node, depth, out, mode)
-        open = open_tag(node)
-        close = VOID.include?(node.name) ? "" : "</#{node.name}>"
-        inner_mode = child_mode(node, mode)
-        children = significant_children(node, inner_mode)
-        # The parser drops exactly one LF immediately after a <pre> or
-        # <textarea> start tag. Put it back whatever the outer mode, or a second
-        # pass over content that starts with a blank line eats it and the form
-        # stops being a fixed point.
-        restored = restored_newline(node, children)
-
-        if mode != :normal
-          # Inside a preserved region we may not add a single character of our
-          # own, or the round trip would change the content.
-          out << open << restored
-          children.each { |child| emit(child, depth, out, inner_mode) }
-          out << close
-        elsif inner_mode != :normal
-          out << (INDENT * depth) << open << restored
-          children.each { |child| emit(child, depth, out, inner_mode) }
-          out << close << "\n"
-        elsif children.empty?
-          # `<div></div>` and `<div>\n</div>` are not the same element to a
-          # browser: `:empty` matches only the first, and `textContent` is
-          # truthy only on the second. Keep a single space to tell them apart.
-          filler = whitespace_only_content?(node) ? " " : ""
-          out << (INDENT * depth) << open << filler << close << "\n"
-        else
-          out << (INDENT * depth) << open << "\n"
-          children.each { |child| emit(child, depth + 1, out, :normal) }
-          out << (INDENT * depth) << close << "\n"
-        end
-      end
-
-      def restored_newline(node, children)
-        first = children.first
-        (PRESERVE_WHITESPACE.include?(node.name) && first.is_a?(Nokogiri::XML::Text) && first.text.start_with?("\n")) ? "\n" : ""
-      end
-```
-
-**(c)** In `child_mode`, move the raw-text check ahead of the mode check, so a `<script>` or `<style>` inside a strict fragment is still emitted raw (escaping it would break the fixed point):
-
-```ruby
-      def child_mode(node, mode)
-        return :raw if RAW_TEXT.include?(node.name)
-        return mode unless mode == :normal
-        return :preserve if PRESERVE_WHITESPACE.include?(node.name)
-        :normal
-      end
-```
+The two things strict mode needs from `emit_element` and `child_mode` — the newline the parser drops after `<pre>`/`<textarea>` restored whatever the outer mode, and raw-text elements emitted raw wherever they sit — are already on the branch (`64cf273` on `feat/golden-suite`, which fixed them as normal-mode fixed-point holes). `(a)` is the only code change here; the eight tests exercise both in strict mode.
 
 - [ ] **Step 4: Run the canonicalizer tests and confirm they pass**
 
@@ -1725,13 +1673,13 @@ cd gem
 bundle exec rake test N=/GoldenCanonicalHtmlTest/
 ```
 
-Expected: `17 runs, ... 0 failures, 0 errors` (the 9 existing and the 8 new). Then confirm nothing moved in normal mode:
+Expected: `20 runs, ... 0 failures, 0 errors` (the 12 existing and the 8 new). Then confirm nothing moved in normal mode:
 
 ```bash
 bundle exec rake golden
 ```
 
-Expected: `229 runs, 0 failures` (the eight strict tests join the ruler's own), no snapshot change.
+Expected: `232 runs, 0 failures` (the eight strict tests join the ruler's own), no snapshot change.
 
 - [ ] **Step 5: Wire strict snapshots into the catalog and the runner**
 
@@ -1850,7 +1798,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `585 runs, ... 0 failures, 0 errors, 0 skips` (576 + 8 strict canonicalizer tests + 1 coverage test), `423 files inspected, no offenses detected`. Registry current.
+Expected: `588 runs, ... 0 failures, 0 errors, 0 skips` (579 + 8 strict canonicalizer tests + 1 coverage test), `423 files inspected, no offenses detected`. Registry current.
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -1864,8 +1812,8 @@ form: text verbatim, attributes sorted, the fragment's own edges
 trimmed. 188 strict snapshots recorded from the Phlex lane while Phlex
 still renders; a fixture or a migrated component that adds a newline
 where Phlex emitted none fails here even though the canonical form
-cannot see it. The newline the parser drops after <pre> and <textarea>
-is now restored in every mode, so the strict form is a fixed point too.
+cannot see it. The fixed-point fix already on the branch (64cf273) is what
+makes the strict form a fixed point too.
 
 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
 MSG
@@ -2102,7 +2050,7 @@ bundle exec rake
 cd ../mcp && bundle exec exe/ruby-ui-mcp-build >/dev/null && git diff --exit-code data/registry.json && echo "registry current"
 ```
 
-Expected: `585 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`, `registry current`.
+Expected: `588 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`, `registry current`.
 
 - [ ] **Step 3: Ask the user before pushing**
 
@@ -2150,8 +2098,8 @@ spec deferred to this phase are decided in `design/v2/decisions.md` entries 5–
 
 ```bash
 cd gem
-bundle exec rake            # 585 runs, 0 skips; 423 files, no offenses
-bundle exec rake golden     # 230 runs: 188 Phlex-lane + 15 ERB-lane + 6 coverage + 21 of the ruler's own
+bundle exec rake            # 588 runs, 0 skips; 423 files, no offenses
+bundle exec rake golden     # 233 runs: 188 Phlex-lane + 15 ERB-lane + 6 coverage + 24 of the ruler's own
 ```
 
 To see the ERB lane work, edit `test/golden/views/button/size_md.html.erb` to

From 76f2df3fbb0773295debac9303157db477b8e9f9 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 12:36:58 -0300
Subject: [PATCH 04/20] [Documentation] Phase 2.0a plan: counts follow the
 strengthened harness tests

fccef75 on feat/golden-suite turned two harness tests into three, so
every run count shifts by one.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 ...20-phase-2-0a-foundation-implementation.md | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md b/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
index 78a5b018..6d722fbb 100644
--- a/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
+++ b/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
@@ -53,7 +53,7 @@
 
 ## Task 1: The harness — an inline Rails application
 
-ReActionView's handler reads `Rails.root` without a guard (`local_template?`, `project_path`), and a template outside `Rails.root` is "external": when Herb rejects it, `external_template_mode: :fallback` **silently recompiles it with Erubi**. So the gem's tests need a `Rails`, and its root must be the gem directory. The smallest honest thing is an inline `Rails::Application` — no `app/` directory, no routes, no database — booted from `test_helper.rb`. Measured on this branch: with it in place the existing suite stays at 503 runs, 0 failures, 0 snapshot changes, and `ActionView::Template.handler_for_extension(:erb)` is `ReActionView::Template::Handlers::ERB`.
+ReActionView's handler reads `Rails.root` without a guard (`local_template?`, `project_path`), and a template outside `Rails.root` is "external": when Herb rejects it, `external_template_mode: :fallback` **silently recompiles it with Erubi**. So the gem's tests need a `Rails`, and its root must be the gem directory. The smallest honest thing is an inline `Rails::Application` — no `app/` directory, no routes, no database — booted from `test_helper.rb`. Measured on this branch: with it in place the existing suite stays at 504 runs, 0 failures, 0 snapshot changes, and `ActionView::Template.handler_for_extension(:erb)` is `ReActionView::Template::Handlers::ERB`.
 
 One trap, also measured: without `RAILS_ENV=test`, `Rails.env` is `development` and 1.6's `Base#before_template` emits `<!-- Before RubyUI::X -->`, which fails six unit tests. The helper sets the env first.
 
@@ -236,7 +236,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `505 runs, ... 0 failures, 0 errors, 0 skips` and `411 files inspected, no offenses detected`. Then:
+Expected: `506 runs, ... 0 failures, 0 errors, 0 skips` and `411 files inspected, no offenses detected`. Then:
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -553,7 +553,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `542 runs, ... 0 failures, 0 errors, 0 skips`, `414 files inspected, no offenses detected`. Snapshots unchanged; registry current (`attributes.rb` is a top-level file, not under a component directory, so the builder does not embed it):
+Expected: `543 runs, ... 0 failures, 0 errors, 0 skips`, `414 files inspected, no offenses detected`. Snapshots unchanged; registry current (`attributes.rb` is a top-level file, not under a component directory, so the builder does not embed it):
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -1077,7 +1077,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `557 runs, ... 0 failures, 0 errors, 0 skips`, `422 files inspected, no offenses detected` (414 + `component.rb` + `component_test.rb` + six probe `.rb` files). Snapshots unchanged; registry current.
+Expected: `558 runs, ... 0 failures, 0 errors, 0 skips`, `422 files inspected, no offenses detected` (414 + `component.rb` + `component_test.rb` + six probe `.rb` files). Snapshots unchanged; registry current.
 
 - [ ] **Step 9: Commit**
 
@@ -1212,7 +1212,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `562 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`. Snapshots unchanged; registry current.
+Expected: `563 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`. Snapshots unchanged; registry current.
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -1466,7 +1466,7 @@ cd gem
 bundle exec rake golden
 ```
 
-Expected: `209 runs, ... 0 failures, 0 errors, 0 skips` — 188 Phlex-lane scenarios, 5 coverage tests, 12 canonicalizer tests, 4 harness tests.
+Expected: `210 runs, ... 0 failures, 0 errors, 0 skips` — 188 Phlex-lane scenarios, 5 coverage tests, 12 canonicalizer tests, 5 harness tests.
 
 - [ ] **Step 5: Write Button's fixtures**
 
@@ -1523,7 +1523,7 @@ cd gem
 bundle exec rake golden
 ```
 
-Expected: `224 runs, ... 0 failures, 0 errors, 0 skips` — the 15 `test_button__*__erb` tests are new and green against the frozen snapshots, rendering the still-Phlex `RubyUI::Button` through phlex-rails. Then:
+Expected: `225 runs, ... 0 failures, 0 errors, 0 skips` — the 15 `test_button__*__erb` tests are new and green against the frozen snapshots, rendering the still-Phlex `RubyUI::Button` through phlex-rails. Then:
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -1539,7 +1539,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `579 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`. Registry current.
+Expected: `580 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`. Registry current.
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -1679,7 +1679,7 @@ Expected: `20 runs, ... 0 failures, 0 errors` (the 12 existing and the 8 new). T
 bundle exec rake golden
 ```
 
-Expected: `232 runs, 0 failures` (the eight strict tests join the ruler's own), no snapshot change.
+Expected: `233 runs, 0 failures` (the eight strict tests join the ruler's own), no snapshot change.
 
 - [ ] **Step 5: Wire strict snapshots into the catalog and the runner**
 
@@ -1798,7 +1798,7 @@ cd gem
 bundle exec rake
 ```
 
-Expected: `588 runs, ... 0 failures, 0 errors, 0 skips` (579 + 8 strict canonicalizer tests + 1 coverage test), `423 files inspected, no offenses detected`. Registry current.
+Expected: `589 runs, ... 0 failures, 0 errors, 0 skips` (580 + 8 strict canonicalizer tests + 1 coverage test), `423 files inspected, no offenses detected`. Registry current.
 
 ```bash
 cd /Users/cirdes/Workspaces/ruby_ui
@@ -2050,7 +2050,7 @@ bundle exec rake
 cd ../mcp && bundle exec exe/ruby-ui-mcp-build >/dev/null && git diff --exit-code data/registry.json && echo "registry current"
 ```
 
-Expected: `588 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`, `registry current`.
+Expected: `589 runs, ... 0 failures, 0 errors, 0 skips`, `423 files inspected, no offenses detected`, `registry current`.
 
 - [ ] **Step 3: Ask the user before pushing**
 
@@ -2098,8 +2098,8 @@ spec deferred to this phase are decided in `design/v2/decisions.md` entries 5–
 
 ```bash
 cd gem
-bundle exec rake            # 588 runs, 0 skips; 423 files, no offenses
-bundle exec rake golden     # 233 runs: 188 Phlex-lane + 15 ERB-lane + 6 coverage + 24 of the ruler's own
+bundle exec rake            # 589 runs, 0 skips; 423 files, no offenses
+bundle exec rake golden     # 234 runs: 188 Phlex-lane + 15 ERB-lane + 6 coverage + 25 of the ruler's own
 ```
 
 To see the ERB lane work, edit `test/golden/views/button/size_md.html.erb` to

From d8ce4e97fd0f0d7ff313a23eecdf5d81d66906b0 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 12:47:35 -0300
Subject: [PATCH 05/20] [Feature] Test harness: boot an inline Rails
 application so ERB compiles through Herb
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ReActionView's handler reads Rails.root, and a template outside it is
recompiled with Erubi when Herb rejects it. The gem's tests now boot the
smallest Rails::Application — no app directory, no routes — with the gem
as its root, so every ERB template compiles exactly as it will in a host
app, and a malformed one is refused at compile time.

RAILS_ENV is pinned to test: in development, 1.6's Base emits a
comment before every component and six unit tests fail on it.

phlex-rails is a development dependency for the migration only, so the
ERB fixtures can render components that are still Phlex.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 gem/Gemfile.lock                              | 112 ++++++++++++++++++
 gem/ruby_ui.gemspec                           |   8 ++
 gem/test/erb_harness_test.rb                  |  23 ++++
 .../probes/views/probe/malformed.html.erb     |   1 +
 gem/test/test_helper.rb                       |  51 +++++++-
 5 files changed, 189 insertions(+), 6 deletions(-)
 create mode 100644 gem/test/erb_harness_test.rb
 create mode 100644 gem/test/probes/views/probe/malformed.html.erb

diff --git a/gem/Gemfile.lock b/gem/Gemfile.lock
index 8c8dec14..7e392ad9 100644
--- a/gem/Gemfile.lock
+++ b/gem/Gemfile.lock
@@ -6,11 +6,66 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
+    actionpack (8.1.3.1)
+      actionview (= 8.1.3.1)
+      activesupport (= 8.1.3.1)
+      nokogiri (>= 1.8.5)
+      rack (>= 2.2.4)
+      rack-session (>= 1.0.1)
+      rack-test (>= 0.6.3)
+      rails-dom-testing (~> 2.2)
+      rails-html-sanitizer (~> 1.6)
+      useragent (~> 0.16)
+    actionview (8.1.3.1)
+      activesupport (= 8.1.3.1)
+      builder (~> 3.1)
+      erubi (~> 1.11)
+      rails-dom-testing (~> 2.2)
+      rails-html-sanitizer (~> 1.6)
+    activesupport (8.1.3.1)
+      base64
+      bigdecimal
+      concurrent-ruby (~> 1.0, >= 1.3.1)
+      connection_pool (>= 2.2.5)
+      drb
+      i18n (>= 1.6, < 2)
+      json
+      logger (>= 1.4.2)
+      minitest (>= 5.1)
+      securerandom (>= 0.3)
+      tzinfo (~> 2.0, >= 2.0.5)
+      uri (>= 0.13.1)
     ast (2.4.3)
+    base64 (0.3.0)
+    bigdecimal (4.1.3)
+    builder (3.3.0)
+    concurrent-ruby (1.3.8)
+    connection_pool (3.0.2)
+    crass (1.0.7)
+    cruise (0.3.0)
+    cruise (0.3.0-arm64-darwin)
+    cruise (0.3.0-x86_64-linux-gnu)
     drb (2.2.3)
+    erb (6.0.7)
+    erubi (1.13.1)
+    herb (0.10.4)
+    herb (0.10.4-arm64-darwin)
+    herb (0.10.4-x86_64-linux-gnu)
+    i18n (1.15.2)
+      concurrent-ruby (~> 1.0)
+    io-console (0.9.4)
+    irb (1.18.0)
+      pp (>= 0.6.0)
+      prism (>= 1.3.0)
+      rdoc (>= 4.0.0)
+      reline (>= 0.4.2)
     json (2.21.1)
     language_server-protocol (3.17.0.6)
     lint_roller (1.1.0)
+    logger (1.7.0)
+    loofah (2.25.2)
+      crass (~> 1.0.2)
+      nokogiri (>= 1.12.0)
     mini_portile2 (2.8.9)
     minitest (6.0.6)
       drb (~> 2.0)
@@ -29,14 +84,60 @@ GEM
     phlex (2.4.1)
       refract (~> 1.0)
       zeitwerk (~> 2.7)
+    phlex-rails (2.4.0)
+      phlex (~> 2.4.0)
+      railties (>= 7.1, < 9)
+      zeitwerk (~> 2.7)
+    pp (0.6.4)
+      prettyprint
+    prettyprint (0.2.0)
     prism (1.9.0)
     racc (1.8.1)
+    rack (3.2.7)
+    rack-session (2.1.2)
+      base64 (>= 0.1.0)
+      rack (>= 3.0.0)
+    rack-test (2.2.0)
+      rack (>= 1.3)
+    rackup (2.3.1)
+      rack (>= 3)
+    rails-dom-testing (2.3.0)
+      activesupport (>= 5.0.0)
+      minitest
+      nokogiri (>= 1.6)
+    rails-html-sanitizer (1.7.1)
+      loofah (~> 2.25, >= 2.25.2)
+      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
+    railties (8.1.3.1)
+      actionpack (= 8.1.3.1)
+      activesupport (= 8.1.3.1)
+      irb (~> 1.13)
+      rackup (>= 1.0.0)
+      rake (>= 12.2)
+      thor (~> 1.0, >= 1.2.2)
+      tsort (>= 0.2)
+      zeitwerk (~> 2.6)
     rainbow (3.1.1)
     rake (13.4.2)
+    rbs (4.2.0)
+      logger
+      prism (>= 1.6.0)
+      tsort
+    rdoc (8.0.0)
+      erb
+      prism (>= 1.6.0)
+      rbs (>= 4.0.0)
+      tsort
+    reactionview (0.4.1)
+      actionview (>= 7.0)
+      cruise
+      herb (>= 0.10.4, < 0.11.0)
     refract (1.1.0)
       prism
       zeitwerk
     regexp_parser (2.12.0)
+    reline (0.7.0)
+      io-console (~> 0.5)
     rouge (5.1.0)
       strscan (~> 3.1)
     rubocop (1.88.2)
@@ -58,6 +159,7 @@ GEM
       rubocop (>= 1.75.0, < 2.0)
       rubocop-ast (>= 1.47.1, < 2.0)
     ruby-progressbar (1.13.0)
+    securerandom (0.4.1)
     sin_lru_redux (2.5.3)
     standard (1.56.0)
       language_server-protocol (~> 3.17.0.2)
@@ -74,9 +176,15 @@ GEM
     strscan (3.1.8)
     tailwind_merge (1.5.5)
       sin_lru_redux (~> 2.5)
+    thor (1.5.0)
+    tsort (0.2.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
     unicode-display_width (3.2.0)
       unicode-emoji (~> 4.1)
     unicode-emoji (4.2.0)
+    uri (1.1.1)
+    useragent (0.16.11)
     zeitwerk (2.7.5)
 
 PLATFORMS
@@ -85,10 +193,14 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
+  actionview (~> 8.1)
   minitest (~> 6.0)
   nokogiri (~> 1.18)
   phlex (~> 2.1, >= 2.1.2)
+  phlex-rails (~> 2.4)
+  railties (~> 8.1)
   rake (~> 13.0)
+  reactionview (~> 0.4)
   rouge (~> 5.1.0)
   ruby_ui!
   standard (~> 1.0)
diff --git a/gem/ruby_ui.gemspec b/gem/ruby_ui.gemspec
index 0215510c..622e1a26 100644
--- a/gem/ruby_ui.gemspec
+++ b/gem/ruby_ui.gemspec
@@ -23,4 +23,12 @@ Gem::Specification.new do |s|
   s.add_development_dependency "minitest", "~> 6.0"
   # Golden suite only: the HTML5-spec parser the snapshot comparison is built on.
   s.add_development_dependency "nokogiri", "~> 1.18"
+  # 2.0 harness: the inline Rails application the tests boot, ReActionView's
+  # handler (so ERB compiles through Herb as it will in a host app), and
+  # phlex-rails so ERB fixtures can render components that are still Phlex
+  # during the migration. phlex-rails leaves with the last Phlex component.
+  s.add_development_dependency "railties", "~> 8.1"
+  s.add_development_dependency "actionview", "~> 8.1"
+  s.add_development_dependency "reactionview", "~> 0.4"
+  s.add_development_dependency "phlex-rails", "~> 2.4"
 end
diff --git a/gem/test/erb_harness_test.rb b/gem/test/erb_harness_test.rb
new file mode 100644
index 00000000..c0031d58
--- /dev/null
+++ b/gem/test/erb_harness_test.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+# The gem's tests compile ERB the way a host application will: through
+# ReActionView's handler, with Herb validating, under Rails.root. Everything
+# the ERB lane and the component layer do later stands on these two facts.
+class ErbHarnessTest < Minitest::Test
+  def test_erb_is_compiled_by_reactionview_under_rails_root
+    assert_kind_of Class, ActionView::Base # loading it is what swaps the handler in
+    assert_equal ReActionView::Template::Handlers::ERB, ActionView::Template.handler_for_extension(:erb)
+    assert_equal File.expand_path("..", __dir__), Rails.root.to_s
+    assert_equal "test", Rails.env
+  end
+
+  def test_a_malformed_template_is_refused_at_compile_time
+    error = assert_raises(ActionView::SyntaxErrorInTemplate) do
+      RubyUI::TestApp.view.render(template: "probe/malformed")
+    end
+
+    assert_match(/closing tag/i, error.cause.message)
+  end
+end
diff --git a/gem/test/probes/views/probe/malformed.html.erb b/gem/test/probes/views/probe/malformed.html.erb
new file mode 100644
index 00000000..cc19d304
--- /dev/null
+++ b/gem/test/probes/views/probe/malformed.html.erb
@@ -0,0 +1 @@
+<div><span></div>
diff --git a/gem/test/test_helper.rb b/gem/test/test_helper.rb
index d31728d7..dd7af988 100644
--- a/gem/test/test_helper.rb
+++ b/gem/test/test_helper.rb
@@ -1,10 +1,16 @@
 # frozen_string_literal: true
 
+ENV["RAILS_ENV"] ||= "test"
+
 $LOAD_PATH.unshift File.expand_path("../lib", __dir__)
 require "ruby_ui"
 require "phlex"
 require "json"
 require "securerandom"
+require "rails"
+require "action_controller/railtie"
+require "reactionview"
+require "phlex-rails"
 require "minitest/autorun"
 
 module RubyUI
@@ -15,8 +21,43 @@ module RubyUI
 
     autoload class_name, path
   end
+
+  # The smallest Rails application that gives ReActionView what it reads:
+  # `Rails.root` (a template under it is "local", so a Herb rejection raises
+  # instead of falling back to Erubi), `Rails.env` and `Rails.logger`. No app/
+  # directory, no routes, no database — an object, so the gem's tests compile
+  # ERB exactly as a host application will.
+  class TestApp < Rails::Application
+    ROOT = File.expand_path("..", __dir__)
+    PROBE_VIEWS = File.join(ROOT, "test/probes/views")
+
+    config.root = ROOT
+    config.eager_load = false
+    config.secret_key_base = "ruby_ui-test"
+    config.logger = Logger.new(IO::NULL)
+    config.hosts.clear
+
+    class << self
+      # One compiled-template cache per process, as in an app; a fresh view
+      # context per call, with the given view paths.
+      def view(*paths)
+        view_class.with_view_paths(paths.empty? ? [PROBE_VIEWS] : paths)
+      end
+
+      private
+
+      def view_class
+        @view_class ||= ActionView::Base.with_empty_template_cache
+      end
+    end
+  end
 end
 
+ReActionView.config.intercept_erb = true
+ReActionView.config.validation_mode = :raise
+ReActionView.config.debug_mode = false
+Rails.application.initialize!
+
 class ComponentTest < Minitest::Test
   def render(component, &)
     component.call(&)
@@ -25,10 +66,8 @@ def render(component, &)
   def phlex(&)
     render Phlex::HTML.new, &
   end
-end
 
-# this is a tracepoint that will output the path of all files loaded that contain the string "phlex"
-# trace = TracePoint.new(:class) do |tp|
-#   puts "Loaded: #{tp.path}" if tp.path.include?("phlex")
-# end
-# trace.enable
+  def render_erb(template)
+    RubyUI::TestApp.view.render(template: template)
+  end
+end

From 637760a6576608fb762dc9a2ebf80045c2a2a232 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 12:57:16 -0300
Subject: [PATCH 06/20] [Feature] RubyUI::Attributes: the 2.0 attribute layer,
 with Phlex's guards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

mix, merge_classes and flat come from the v2 gate, where they were
checked against Phlex 2.4.1 for 15 hash shapes and 8 mix shapes; that
differential test comes with them. Added on top: Phlex's attribute
guards — an unsafe name raises, a javascript: URL in a URL attribute is
dropped — so a component given untrusted values keeps the protection
it has in 1.6.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 gem/lib/ruby_ui/attributes.rb                 | 199 ++++++++++++++++++
 .../probes/views/probe/attributes.html.erb    |   1 +
 .../ruby_ui/attributes_differential_test.rb   |  81 +++++++
 gem/test/ruby_ui/attributes_test.rb           |  76 +++++++
 4 files changed, 357 insertions(+)
 create mode 100644 gem/lib/ruby_ui/attributes.rb
 create mode 100644 gem/test/probes/views/probe/attributes.html.erb
 create mode 100644 gem/test/ruby_ui/attributes_differential_test.rb
 create mode 100644 gem/test/ruby_ui/attributes_test.rb

diff --git a/gem/lib/ruby_ui/attributes.rb b/gem/lib/ruby_ui/attributes.rb
new file mode 100644
index 00000000..b967e761
--- /dev/null
+++ b/gem/lib/ruby_ui/attributes.rb
@@ -0,0 +1,199 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+module RubyUI
+  # Attribute handling for the 2.0 layer, with Phlex 2.4.1 semantics. Pure Ruby,
+  # no view context, so `RubyUI::X.new(...).attrs` works anywhere.
+  #
+  #   mix(*hashes)         Phlex::Helpers#mix — caller attributes over defaults.
+  #   merge_classes(value) TailwindMerge over the mixed `class`, as 1.6 Base does.
+  #   flat(hash)           The nested hash serialized into the flat, string-keyed
+  #                        hash `tag.attributes` expects. Rails then only quotes
+  #                        and escapes.
+  #
+  # Rules reproduced from phlex-2.4.1/lib/phlex/sgml/attributes.rb: Symbol keys
+  # are dasherized at every level; nil and false omit the attribute; true is a
+  # bare attribute (here "" — Rails renders `disabled="disabled"` for boolean
+  # attributes and `aria-x=""` for the rest, which canonicalize like Phlex's
+  # bare form); Symbol values are dasherized; Integer/Float use to_s; Date and
+  # Time use iso8601; a Hash nests as `name-key`, with `_:` naming the parent
+  # itself; Array/Set values are space-joined tokens (nil skipped, nested arrays
+  # flattened, empty result omits the attribute); `style:` Hash becomes
+  # "prop: value; prop: value;" and `style:` Array "a; b;".
+  #
+  # Phlex's guards (phlex/sgml/attributes.rb) are ported, so a component given
+  # untrusted values keeps the protection it has today: a name with `<>&"'/=`,
+  # whitespace or NUL raises; `srcdoc`, `sandbox`, `http-equiv` and any `on*`
+  # handler name raise; a URL-bearing attribute (`href`, `src`, `action`, …)
+  # whose serialized value, character references decoded, starts with
+  # `javascript:` is dropped — serialized first, as Phlex does, so `href: 1`
+  # renders and `href: :"javascript:x"` does not. Not ported: Phlex's
+  # `:id`-must-be-a-lowercase-Symbol check (a Phlex convention) and the leading
+  # space it leaves when the first `style:` value is nil (no snapshot depends
+  # on it).
+  module Attributes
+    TAILWIND_MERGER = TailwindMerge::Merger.new.freeze
+
+    UNSAFE_ATTRIBUTES = Set.new(%w[srcdoc sandbox http-equiv]).freeze
+    REF_ATTRIBUTES = Set.new(%w[href src action formaction lowsrc dynsrc background ping xlinkhref]).freeze
+    UNSAFE_ATTRIBUTE_NAME_CHARS = %r{[<>&"'/=\s\x00]}
+
+    # The named character references Phlex decodes before the `javascript:`
+    # check — exactly these three; every other named reference decodes to
+    # nothing, as in Phlex. Numeric references are decoded in full.
+    NAMED_REFERENCES = {"colon" => ":", "tab" => "\t", "newline" => "\n"}.freeze
+
+    class << self
+      # Same semantics as Phlex::Helpers#mix (phlex-2.4.1/lib/phlex/helpers.rb).
+      def mix(*args)
+        args.each_with_object({}) do |object, result|
+          result.merge!(object) do |_key, old, new|
+            case [old, new].freeze
+            in [Array, Array] | [Set, Set] then old + new
+            in [Array, Set] then old + new.to_a
+            in [Array, String] then old + [new]
+            in [Hash, Hash] then mix(old, new)
+            in [Set, Array] then old.to_a + new
+            in [Set, String] then old.to_a + [new]
+            in [String, Array] then [old] + new
+            in [String, Set] then [old] + new.to_a
+            in [String, String] then "#{old} #{new}"
+            in [_, Hash] then {_: old, **new}
+            in [Hash, _] then {**old, _: new}
+            in [_, nil] then old
+            else new
+            end
+          end
+
+          result.transform_keys! do |key|
+            key.end_with?("!") ? key.name.chop.to_sym : key
+          end
+        end
+      end
+
+      # 1.6: `@attrs[:class] = TAILWIND_MERGER.merge(@attrs[:class])`. Accepts
+      # the String or (nested) Array that mix produces.
+      def merge_classes(value)
+        TAILWIND_MERGER.merge(value)
+      end
+
+      def flat(attributes)
+        attributes.each_with_object({}) do |(key, value), out|
+          next unless value
+
+          name = key_name(key)
+          case value
+          when Hash
+            (name == "style") ? emit(out, name, styles(value)) : nested(value, "#{name}-", out)
+          when Array, Set
+            emit(out, name, (name == "style") ? styles(value) : tokens(value))
+          else
+            emit(out, name, scalar(value))
+          end
+        end
+      end
+
+      private
+
+      def key_name(key)
+        case key
+        when String then key
+        when Symbol then key.name.tr("_", "-")
+        else raise ArgumentError, "attribute keys must be Strings or Symbols, got #{key.inspect}"
+        end
+      end
+
+      # Phlex serializes first and guards the serialized value, so `href: 1`
+      # renders `href="1"` and `href: :"javascript:x"` is dropped. A nil here
+      # is an empty token list, which omits the attribute.
+      def emit(out, name, serialized)
+        return if serialized.nil?
+
+        out[name] = serialized unless guard(name, serialized) == :drop
+      end
+
+      # :keep or :drop. Raises for the names Phlex refuses.
+      def guard(name, serialized)
+        raise ArgumentError, "unsafe attribute name #{name.inspect}" if name.match?(UNSAFE_ATTRIBUTE_NAME_CHARS)
+
+        normalized = name.downcase.delete("^a-z-")
+        if UNSAFE_ATTRIBUTES.include?(normalized) ||
+            (normalized.bytesize > 2 && normalized.start_with?("on") && !normalized.include?("-"))
+          raise ArgumentError, "unsafe attribute name #{name.inspect}"
+        end
+
+        return :keep unless REF_ATTRIBUTES.include?(normalized)
+
+        decode_references(serialized).downcase.delete("^a-z:").start_with?("javascript:") ? :drop : :keep
+      end
+
+      def decode_references(value)
+        value
+          .gsub(/&#x([0-9a-f]+);?/i) { codepoint($1.to_i(16)) }
+          .gsub(/&#(\d+);?/) { codepoint($1.to_i) }
+          .gsub(/&([a-z][a-z0-9]+);?/i) { NAMED_REFERENCES[$1.downcase] || "" }
+      end
+
+      # Phlex swallows a reference it cannot pack; so does this.
+      def codepoint(number)
+        [number].pack("U*")
+      rescue RangeError
+        ""
+      end
+
+      def nested(hash, prefix, out)
+        hash.each do |key, value|
+          next unless value
+
+          name = (key == :_) ? prefix.delete_suffix("-") : "#{prefix}#{key_name(key)}"
+          raise ArgumentError, "unsafe attribute name #{name.inspect}" if name.match?(UNSAFE_ATTRIBUTE_NAME_CHARS)
+
+          case value
+          when Hash then nested(value, "#{name}-", out)
+          when Array, Set then (joined = tokens(value)) && out[name] = joined
+          else out[name] = scalar(value)
+          end
+        end
+      end
+
+      def scalar(value)
+        case value
+        when true then ""
+        when String then value
+        when Symbol then value.name.tr("_", "-")
+        when Integer, Float then value.to_s
+        when Date, Time then value.iso8601
+        else raise ArgumentError, "invalid attribute value #{value.inspect}"
+        end
+      end
+
+      def tokens(values)
+        list = values.filter_map do |token|
+          case token
+          when nil then nil
+          when Array, Set then tokens(token)
+          else scalar(token)
+          end
+        end
+        list.join(" ") unless list.empty?
+      end
+
+      def styles(value)
+        case value
+        when Hash
+          value.filter_map { |property, v| "#{key_name(property)}: #{scalar(v)};" unless v.nil? }.join(" ")
+        else
+          value.filter_map do |style|
+            case style
+            when nil then nil
+            when Hash then styles(style)
+            when String then (style.empty? || style.end_with?(";")) ? style : "#{style};"
+            else raise ArgumentError, "invalid style #{style.inspect}"
+            end
+          end.join(" ")
+        end
+      end
+    end
+  end
+end
diff --git a/gem/test/probes/views/probe/attributes.html.erb b/gem/test/probes/views/probe/attributes.html.erb
new file mode 100644
index 00000000..0079ab0d
--- /dev/null
+++ b/gem/test/probes/views/probe/attributes.html.erb
@@ -0,0 +1 @@
+<div <%= tag.attributes(RubyUI::Attributes.flat(h)) %>></div>
diff --git a/gem/test/ruby_ui/attributes_differential_test.rb b/gem/test/ruby_ui/attributes_differential_test.rb
new file mode 100644
index 00000000..78b450b4
--- /dev/null
+++ b/gem/test/ruby_ui/attributes_differential_test.rb
@@ -0,0 +1,81 @@
+require "test_helper"
+require "golden/canonical_html"
+
+# RubyUI::Attributes against Phlex 2.4.1, the serializer the 1.6 snapshots were
+# recorded with. Each hash is rendered by Phlex::HTML#div(**h) and by
+# <div <%= tag.attributes(RubyUI::Attributes.flat(h)) %>>, both canonicalized.
+class AttributesDifferentialTest < Minitest::Test
+  class PhlexDiv < Phlex::HTML
+    def initialize(attributes)
+      @attributes = attributes
+    end
+
+    def view_template
+      div(**@attributes)
+    end
+  end
+
+  FLAT_CASES = {
+    "underscored keys at several levels" => {data_ruby_ui__dialog_target: "dialog", data: {ruby_ui__open_value: {deep_key: "v"}}},
+    "nil and false omit the attribute" => {hidden: nil, disabled: false, data: {a: nil, b: false, c: "c"}},
+    "true is a bare attribute" => {disabled: true, open: true, aria: {expanded: true}, data: {open: true}},
+    "integers and floats" => {tabindex: 0, colspan: 2, data: {count: 3, ratio: 1.5}},
+    "symbol values dasherize" => {dir: :ltr, data: {state: :on_hover}},
+    "style hash" => {style: {width: "max-content", top: 0, left: 0}},
+    "style array" => {style: ["width: 1px", "top: 0;", nil, {left: 0}]},
+    "class array with nil and nesting" => {class: ["a", nil, ["b", ["c"]], "d"]},
+    "nested data hash" => {data: {controller: "ruby-ui--dialog", action: "click->ruby-ui--dialog#open", ruby_ui__dialog_open_value: false}},
+    "escaping" => {title: "q\"<>&'", data: {x: "<script>alert(1)</script>"}},
+    "empty string is kept" => {value: "", data: {x: ""}},
+    "string keys pass through" => {"data-x" => "1", "aria-label" => "L"},
+    "root key from mix" => {data: {_: "root", x: "1"}},
+    "date" => {datetime: Date.new(2026, 9, 7)},
+    "empty token list omits the attribute" => {class: [], data: {tokens: [nil]}},
+    "url attribute from a non-string" => {href: 1, src: ["/", "a.png"]},
+    "javascript url is dropped, a data attribute is not" => {:href => :"javascript:x", "data-href" => "javascript:kept"},
+    "out-of-range character reference" => {href: "java&#999999999999999999;script:alert(1)"}
+  }.freeze
+
+  FLAT_CASES.each do |label, attributes|
+    define_method(:"test_flat_#{label.tr(" ", "_")}") do
+      assert_equal canonical_phlex(attributes), canonical_erb(attributes),
+        "Phlex 2.4.1 and RubyUI::Attributes.flat disagree for #{attributes.inspect}"
+    end
+  end
+
+  MIX_CASES = [
+    [{class: "a"}, {class: "b"}],
+    [{class: ["a", "b"]}, {class: "c"}],
+    [{data: {a: 1, nested: {x: 1}}}, {data: {b: 2, nested: {y: 2}}}],
+    [{class: "a", data: {x: 1}}, {class: nil, data: nil}],
+    [{class: "a", data: {x: 1}}, {class!: "b", data!: {y: 2}}],
+    [{data: {action: "click->a#b"}}, {data: {action: "click->c#d"}}],
+    [{data: "x"}, {data: {y: 1}}],
+    [{aria: {label: "l"}}, {aria: "flat"}]
+  ].freeze
+
+  MIX_CASES.each_with_index do |(defaults, user), index|
+    define_method(:"test_mix_#{index + 1}") do
+      oracle = PhlexDiv.new({}).send(:mix, defaults, user)
+      mixed = RubyUI::Attributes.mix(defaults, user)
+
+      assert_equal oracle, mixed
+      assert_equal canonical_phlex(oracle), canonical_erb(mixed)
+    end
+  end
+
+  def test_merge_classes_applies_tailwind_merge_like_1_6_base
+    assert_equal "p-2 px-4", RubyUI::Attributes.merge_classes(["p-2", nil, ["px-4"]])
+    assert_equal "py-2 px-8", RubyUI::Attributes.merge_classes("px-4 py-2 px-8")
+  end
+
+  private
+
+  def canonical_phlex(attributes)
+    Golden::CanonicalHtml.call(PhlexDiv.new(attributes).call)
+  end
+
+  def canonical_erb(attributes)
+    Golden::CanonicalHtml.call(RubyUI::TestApp.view.render(template: "probe/attributes", locals: {h: attributes}))
+  end
+end
diff --git a/gem/test/ruby_ui/attributes_test.rb b/gem/test/ruby_ui/attributes_test.rb
new file mode 100644
index 00000000..2694aafe
--- /dev/null
+++ b/gem/test/ruby_ui/attributes_test.rb
@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+# Phlex 2.4.1's attribute guards, ported into the 2.0 layer so a component
+# given untrusted values keeps the protection it has today. Each case mirrors
+# phlex/sgml/attributes.rb; the differential test covers the happy path.
+class AttributesTest < Minitest::Test
+  def flat(**attributes)
+    RubyUI::Attributes.flat(attributes)
+  end
+
+  def test_an_event_handler_attribute_name_raises
+    assert_raises(ArgumentError) { flat(onclick: "x") }
+    assert_raises(ArgumentError) { flat("onClick" => "x") }
+    assert_raises(ArgumentError) { flat(onerror: "x") }
+  end
+
+  def test_srcdoc_sandbox_and_http_equiv_raise
+    assert_raises(ArgumentError) { flat(srcdoc: "<p>") }
+    assert_raises(ArgumentError) { flat(sandbox: "") }
+    assert_raises(ArgumentError) { flat("http-equiv" => "refresh") }
+  end
+
+  def test_a_name_with_forbidden_characters_raises_at_any_level
+    assert_raises(ArgumentError) { flat("bad name" => "1") }
+    assert_raises(ArgumentError) { flat("a=b" => "1") }
+    assert_raises(ArgumentError) { flat(data: {"x y" => "1"}) }
+  end
+
+  def test_a_javascript_url_is_dropped_from_a_url_attribute
+    assert_equal({}, flat(href: "javascript:alert(1)"))
+    assert_equal({}, flat(src: "JavaScript:alert(1)"))
+    assert_equal({}, flat(href: " java\nscript:alert(1)"))
+    assert_equal({}, flat(href: "&#106;avascript:alert(1)"))
+    assert_equal({}, flat(href: "&#x6A;avascript:alert(1)"))
+    assert_equal({}, flat(href: "javascript&colon;alert(1)"))
+    assert_equal({}, flat(formaction: "javascript:alert(1)"))
+  end
+
+  def test_an_ordinary_url_is_kept
+    assert_equal({"href" => "/edit"}, flat(href: "/edit"))
+    assert_equal({"href" => "https://example.com/?q=javascript"}, flat(href: "https://example.com/?q=javascript"))
+    assert_equal({"src" => "javascript-guide.png"}, flat(src: "javascript-guide.png"))
+  end
+
+  def test_a_non_string_value_is_serialized_then_checked
+    # Phlex serializes first and checks the result: 1 and :edit are ordinary
+    # values, a Symbol that spells a javascript: URL is not.
+    assert_equal({"href" => "1"}, flat(href: 1))
+    assert_equal({"href" => "edit"}, flat(href: :edit))
+    assert_equal({"href" => "/ edit"}, flat(href: ["/", "edit"]))
+    assert_equal({}, flat(href: :"javascript:x"))
+  end
+
+  def test_an_out_of_range_character_reference_decodes_to_nothing
+    # Phlex rescues the failed pack and treats the reference as empty, which
+    # leaves `javascript:` in front.
+    assert_equal({}, flat(href: "java&#999999999999999999;script:alert(1)"))
+  end
+
+  def test_true_is_allowed_on_a_url_attribute
+    assert_equal({"href" => ""}, flat(href: true))
+  end
+
+  def test_a_nested_on_key_is_not_an_event_handler
+    # Phlex checks `on*` only on top-level names; `data-onclick` is a plain
+    # data attribute and stays one here.
+    assert_equal({"data-onclick" => "x"}, flat(data: {onclick: "x"}))
+  end
+
+  def test_the_guard_does_not_touch_ordinary_attributes
+    assert_equal({"class" => "a b", "data-open" => "", "aria-label" => "L"},
+      flat(class: ["a", "b"], data: {open: true}, aria: {label: "L"}))
+  end
+end

From 7df35df57ddb42c6992e6929dcc4707aacd07f91 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 13:08:10 -0300
Subject: [PATCH 07/20] [Bug Fix] RubyUI::Attributes: refuse a URL attribute
 with no String form, as Phlex does

flat silently omitted href: [] and src: {} instead of raising; Phlex
2.4.1 raises for both. Added refuse_url_value! so a URL attribute
without a String form fails loud, matching the Interfaces contract.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 gem/lib/ruby_ui/attributes.rb       | 19 +++++++++++++++++--
 gem/test/ruby_ui/attributes_test.rb |  7 +++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/gem/lib/ruby_ui/attributes.rb b/gem/lib/ruby_ui/attributes.rb
index b967e761..478aa1ac 100644
--- a/gem/lib/ruby_ui/attributes.rb
+++ b/gem/lib/ruby_ui/attributes.rb
@@ -85,9 +85,16 @@ def flat(attributes)
           name = key_name(key)
           case value
           when Hash
-            (name == "style") ? emit(out, name, styles(value)) : nested(value, "#{name}-", out)
+            if name == "style"
+              emit(out, name, styles(value))
+            else
+              refuse_url_value!(name, value)
+              nested(value, "#{name}-", out)
+            end
           when Array, Set
-            emit(out, name, (name == "style") ? styles(value) : tokens(value))
+            serialized = (name == "style") ? styles(value) : tokens(value)
+            refuse_url_value!(name, value) if serialized.nil?
+            emit(out, name, serialized)
           else
             emit(out, name, scalar(value))
           end
@@ -113,6 +120,14 @@ def emit(out, name, serialized)
         out[name] = serialized unless guard(name, serialized) == :drop
       end
 
+      # Phlex raises for a URL attribute whose value has no String form — an
+      # empty token list or a Hash — rather than omitting it.
+      def refuse_url_value!(name, value)
+        return unless REF_ATTRIBUTES.include?(name.downcase.delete("^a-z-"))
+
+        raise ArgumentError, "invalid value for #{name}: #{value.inspect}"
+      end
+
       # :keep or :drop. Raises for the names Phlex refuses.
       def guard(name, serialized)
         raise ArgumentError, "unsafe attribute name #{name.inspect}" if name.match?(UNSAFE_ATTRIBUTE_NAME_CHARS)
diff --git a/gem/test/ruby_ui/attributes_test.rb b/gem/test/ruby_ui/attributes_test.rb
index 2694aafe..a8bf12d9 100644
--- a/gem/test/ruby_ui/attributes_test.rb
+++ b/gem/test/ruby_ui/attributes_test.rb
@@ -73,4 +73,11 @@ def test_the_guard_does_not_touch_ordinary_attributes
     assert_equal({"class" => "a b", "data-open" => "", "aria-label" => "L"},
       flat(class: ["a", "b"], data: {open: true}, aria: {label: "L"}))
   end
+
+  def test_a_url_attribute_with_no_string_form_raises_as_in_phlex
+    # Phlex 2.4.1 raises "Invalid attribute value" for a URL attribute given an
+    # empty token list or a Hash, rather than omitting it.
+    assert_raises(ArgumentError) { flat(href: []) }
+    assert_raises(ArgumentError) { flat(src: {}) }
+  end
 end

From e5e7a3e8c8f81d2b38e82a79586e40ef5c82e2a0 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 13:13:19 -0300
Subject: [PATCH 08/20] [Feature] RubyUI::Component: the 2.0 layer with a
 scoped sidecar lookup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A plain Ruby class ActionView renders through render_in. Its sidecar is
found under the RubyUI.component_roots entry that holds the class file,
through a LookupContext of its own — the application's view paths are
never consulted, so a host template at the same virtual path cannot
shadow the sidecar and the sidecar cannot shadow the host. content is
set on every render, nil without a block.

Named Component while the Phlex RubyUI::Base still exists; it takes the
name Base when the last Phlex component is gone.

Probe components under test/probes exercise the layer without touching
a shipped component.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 gem/lib/ruby_ui/component.rb                  | 112 ++++++++++++++++++
 gem/test/probes/ruby_ui/probes/bare.rb        |   9 ++
 gem/test/probes/ruby_ui/probes/div.html.erb   |   1 +
 gem/test/probes/ruby_ui/probes/div.rb         |  14 +++
 .../probes/ruby_ui/probes/fallback.html.erb   |   1 +
 gem/test/probes/ruby_ui/probes/fallback.rb    |  15 +++
 gem/test/probes/ruby_ui/probes/frame.html.erb |   1 +
 gem/test/probes/ruby_ui/probes/frame.rb       |  14 +++
 .../probes/ruby_ui/probes/rootless.html.erb   |   1 +
 gem/test/probes/ruby_ui/probes/rootless.rb    |  15 +++
 .../probes/ruby_ui/probes/with_id.html.erb    |   1 +
 gem/test/probes/ruby_ui/probes/with_id.rb     |  15 +++
 .../probes/views/probe/div_block_arg.html.erb |   1 +
 .../probes/views/probe/div_default.html.erb   |   1 +
 .../probes/views/probe/div_nested.html.erb    |   1 +
 .../views/probe/fallback_blank.html.erb       |   2 +
 .../views/probe/fallback_empty.html.erb       |   1 +
 .../probes/views/probe/fallback_text.html.erb |   1 +
 .../probes/views/ruby_ui/probes/div.html.erb  |   1 +
 gem/test/ruby_ui/component_test.rb            | 111 +++++++++++++++++
 gem/test/test_helper.rb                       |   9 ++
 21 files changed, 327 insertions(+)
 create mode 100644 gem/lib/ruby_ui/component.rb
 create mode 100644 gem/test/probes/ruby_ui/probes/bare.rb
 create mode 100644 gem/test/probes/ruby_ui/probes/div.html.erb
 create mode 100644 gem/test/probes/ruby_ui/probes/div.rb
 create mode 100644 gem/test/probes/ruby_ui/probes/fallback.html.erb
 create mode 100644 gem/test/probes/ruby_ui/probes/fallback.rb
 create mode 100644 gem/test/probes/ruby_ui/probes/frame.html.erb
 create mode 100644 gem/test/probes/ruby_ui/probes/frame.rb
 create mode 100644 gem/test/probes/ruby_ui/probes/rootless.html.erb
 create mode 100644 gem/test/probes/ruby_ui/probes/rootless.rb
 create mode 100644 gem/test/probes/ruby_ui/probes/with_id.html.erb
 create mode 100644 gem/test/probes/ruby_ui/probes/with_id.rb
 create mode 100644 gem/test/probes/views/probe/div_block_arg.html.erb
 create mode 100644 gem/test/probes/views/probe/div_default.html.erb
 create mode 100644 gem/test/probes/views/probe/div_nested.html.erb
 create mode 100644 gem/test/probes/views/probe/fallback_blank.html.erb
 create mode 100644 gem/test/probes/views/probe/fallback_empty.html.erb
 create mode 100644 gem/test/probes/views/probe/fallback_text.html.erb
 create mode 100644 gem/test/probes/views/ruby_ui/probes/div.html.erb
 create mode 100644 gem/test/ruby_ui/component_test.rb

diff --git a/gem/lib/ruby_ui/component.rb b/gem/lib/ruby_ui/component.rb
new file mode 100644
index 00000000..5c970308
--- /dev/null
+++ b/gem/lib/ruby_ui/component.rb
@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+require "action_view"
+require_relative "attributes"
+
+module RubyUI
+  class << self
+    # The directories that hold `ruby_ui/`: `app/components` in a host
+    # application, `lib` in this gem. A component's sidecar template is looked
+    # up under the root that contains its class file, and nowhere else — the
+    # application's view paths are never consulted, so a host template at the
+    # same virtual path cannot shadow it and it cannot shadow the host.
+    def component_roots
+      @component_roots ||= []
+    end
+
+    attr_writer :component_roots
+
+    def lookup_for(root)
+      (@lookups ||= {})[root] ||= ActionView::LookupContext.new(
+        ActionView::PathRegistry.cast_file_system_resolvers([root]), {formats: [:html]}
+      )
+    end
+  end
+
+  # The 2.0 component layer: a plain Ruby object that ActionView renders
+  # through `render_in`, with an ERB sidecar template next to the class file.
+  #
+  #   # app/components/ruby_ui/dialog/dialog.rb
+  #   class RubyUI::Dialog < RubyUI::Component
+  #     def initialize(open: false, **attrs)
+  #       @open = open
+  #       super(**attrs)
+  #     end
+  #
+  #     private def default_attrs
+  #       {data: {controller: "ruby-ui--dialog", ruby_ui__dialog_open_value: @open}}
+  #     end
+  #   end
+  #
+  #   # app/components/ruby_ui/dialog/dialog.html.erb
+  #   <div <%= tag.attributes(component.attrs) %>><%= component.content %></div>
+  #
+  #   # a view
+  #   <%= render RubyUI::Dialog.new(open: true) do %> ... <% end %>
+  #
+  # `attrs` is computed in `initialize` with no view context — mix, Tailwind
+  # merge, then Phlex-semantics serialization (see Attributes) — so a component
+  # can read a neighbour's computed attributes (`Button.new(...).attrs["class"]`).
+  # `render_in` captures the caller's block with the component as the block
+  # argument (for `do |group|` components), then renders the sidecar with
+  # `component` as its only local. Nothing else: no named slots, no DSL.
+  #
+  # Named `Component` while the Phlex `RubyUI::Base` still exists; it takes
+  # the name `Base` when the last Phlex component is gone.
+  class Component
+    attr_reader :attrs, :content
+
+    def initialize(**user_attrs)
+      mixed = Attributes.mix(default_attrs, user_attrs)
+      mixed[:class] = Attributes.merge_classes(mixed[:class]) if mixed[:class]
+      @attrs = Attributes.flat(mixed)
+    end
+
+    # ActionView's renderable protocol. Rails passes `locals:`; the caller's
+    # locals are not the component's, so they are accepted and ignored.
+    # `content` is set on every call — nil without a block — so an instance
+    # rendered twice never repeats its first content.
+    def render_in(view_context, **, &block)
+      @view_context = view_context
+      @content = block ? view_context.capture(self, &block) : nil
+      self.class.template.render(view_context, {component: self})
+    end
+
+    # The view context, for a component that needs a Rails helper from Ruby
+    # (`helpers.form_authenticity_token`) or renders a neighbour from a method.
+    # Only available during render_in.
+    def helpers
+      @view_context or raise ArgumentError, "#{self.class.name} has no view context outside render_in"
+    end
+
+    class << self
+      # Looked up on every render, not cached here: the resolver behind the
+      # lookup context caches compiled templates and Rails' reloader clears it,
+      # so a Template cached on the class would outlive an edit in development.
+      def template
+        root = component_root
+        relative = source_file.delete_prefix("#{root}/").delete_suffix(".rb")
+        prefix, base = File.split(relative)
+        RubyUI.lookup_for(root).find(base, [prefix], false, [:component])
+      rescue ActionView::MissingTemplate
+        raise ArgumentError, "#{name} has no sidecar template at #{relative}.html.erb under #{root}"
+      end
+
+      def source_file
+        @source_file ||= Object.const_source_location(name)&.first or
+          raise ArgumentError, "#{name}: no source location to derive a sidecar template from"
+      end
+
+      def component_root
+        @component_root ||= RubyUI.component_roots.map(&:to_s).find { |root| source_file.start_with?("#{root}/") } or
+          raise ArgumentError, "#{name}: #{source_file} is under none of RubyUI.component_roots #{RubyUI.component_roots.inspect}"
+      end
+    end
+
+    private
+
+    def default_attrs
+      {}
+    end
+  end
+end
diff --git a/gem/test/probes/ruby_ui/probes/bare.rb b/gem/test/probes/ruby_ui/probes/bare.rb
new file mode 100644
index 00000000..2d3434c7
--- /dev/null
+++ b/gem/test/probes/ruby_ui/probes/bare.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module RubyUI
+  module Probes
+    # Has no sidecar on purpose: the lookup must say so, by name and path.
+    class Bare < Component
+    end
+  end
+end
diff --git a/gem/test/probes/ruby_ui/probes/div.html.erb b/gem/test/probes/ruby_ui/probes/div.html.erb
new file mode 100644
index 00000000..097a1dda
--- /dev/null
+++ b/gem/test/probes/ruby_ui/probes/div.html.erb
@@ -0,0 +1 @@
+<div <%= tag.attributes(component.attrs) %>><%= component.content %></div>
diff --git a/gem/test/probes/ruby_ui/probes/div.rb b/gem/test/probes/ruby_ui/probes/div.rb
new file mode 100644
index 00000000..336df2b0
--- /dev/null
+++ b/gem/test/probes/ruby_ui/probes/div.rb
@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module RubyUI
+  module Probes
+    # One element with attributes and content: the shape of most components.
+    class Div < Component
+      private
+
+      def default_attrs
+        {class: "probe", data: {probe: true}}
+      end
+    end
+  end
+end
diff --git a/gem/test/probes/ruby_ui/probes/fallback.html.erb b/gem/test/probes/ruby_ui/probes/fallback.html.erb
new file mode 100644
index 00000000..71b1b942
--- /dev/null
+++ b/gem/test/probes/ruby_ui/probes/fallback.html.erb
@@ -0,0 +1 @@
+<span><%= component.content.presence || component.placeholder %></span>
diff --git a/gem/test/probes/ruby_ui/probes/fallback.rb b/gem/test/probes/ruby_ui/probes/fallback.rb
new file mode 100644
index 00000000..f8be8c74
--- /dev/null
+++ b/gem/test/probes/ruby_ui/probes/fallback.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  module Probes
+    # Content or a placeholder — SelectValue's shape.
+    class Fallback < Component
+      attr_reader :placeholder
+
+      def initialize(placeholder:, **attrs)
+        @placeholder = placeholder
+        super(**attrs)
+      end
+    end
+  end
+end
diff --git a/gem/test/probes/ruby_ui/probes/frame.html.erb b/gem/test/probes/ruby_ui/probes/frame.html.erb
new file mode 100644
index 00000000..37f5c195
--- /dev/null
+++ b/gem/test/probes/ruby_ui/probes/frame.html.erb
@@ -0,0 +1 @@
+<turbo-frame <%= tag.attributes(component.attrs) %>><%= component.content %></turbo-frame>
diff --git a/gem/test/probes/ruby_ui/probes/frame.rb b/gem/test/probes/ruby_ui/probes/frame.rb
new file mode 100644
index 00000000..1266eb43
--- /dev/null
+++ b/gem/test/probes/ruby_ui/probes/frame.rb
@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module RubyUI
+  module Probes
+    # A custom-element root — DataTableFrame's shape.
+    class Frame < Component
+      private
+
+      def default_attrs
+        {id: "frame"}
+      end
+    end
+  end
+end
diff --git a/gem/test/probes/ruby_ui/probes/rootless.html.erb b/gem/test/probes/ruby_ui/probes/rootless.html.erb
new file mode 100644
index 00000000..ded78503
--- /dev/null
+++ b/gem/test/probes/ruby_ui/probes/rootless.html.erb
@@ -0,0 +1 @@
+<% if component.shown? %><span <%= tag.attributes(component.attrs) %>>shown</span><% end %>
diff --git a/gem/test/probes/ruby_ui/probes/rootless.rb b/gem/test/probes/ruby_ui/probes/rootless.rb
new file mode 100644
index 00000000..89d2b584
--- /dev/null
+++ b/gem/test/probes/ruby_ui/probes/rootless.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  module Probes
+    # Renders no root element at all when hidden — DataTablePagination's shape.
+    class Rootless < Component
+      def initialize(shown: true, **attrs)
+        @shown = shown
+        super(**attrs)
+      end
+
+      def shown? = @shown
+    end
+  end
+end
diff --git a/gem/test/probes/ruby_ui/probes/with_id.html.erb b/gem/test/probes/ruby_ui/probes/with_id.html.erb
new file mode 100644
index 00000000..73cf503d
--- /dev/null
+++ b/gem/test/probes/ruby_ui/probes/with_id.html.erb
@@ -0,0 +1 @@
+<button aria-controls="<%= component.id %>">open</button><div id="<%= component.id %>"><%= component.content %></div>
diff --git a/gem/test/probes/ruby_ui/probes/with_id.rb b/gem/test/probes/ruby_ui/probes/with_id.rb
new file mode 100644
index 00000000..a15d6cbe
--- /dev/null
+++ b/gem/test/probes/ruby_ui/probes/with_id.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  module Probes
+    # Mints an id and cross-references it — SelectContent's shape.
+    class WithId < Component
+      attr_reader :id
+
+      def initialize(**attrs)
+        @id = "content#{SecureRandom.hex(4)}"
+        super
+      end
+    end
+  end
+end
diff --git a/gem/test/probes/views/probe/div_block_arg.html.erb b/gem/test/probes/views/probe/div_block_arg.html.erb
new file mode 100644
index 00000000..4c137ac9
--- /dev/null
+++ b/gem/test/probes/views/probe/div_block_arg.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Probes::Div.new(id: "outer") do |div| %>id=<%= div.attrs["id"] %><% end %>
diff --git a/gem/test/probes/views/probe/div_default.html.erb b/gem/test/probes/views/probe/div_default.html.erb
new file mode 100644
index 00000000..9f013a63
--- /dev/null
+++ b/gem/test/probes/views/probe/div_default.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Probes::Div.new do %>Hello<% end %>
diff --git a/gem/test/probes/views/probe/div_nested.html.erb b/gem/test/probes/views/probe/div_nested.html.erb
new file mode 100644
index 00000000..9ed5bb6a
--- /dev/null
+++ b/gem/test/probes/views/probe/div_nested.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Probes::Div.new(id: "outer") do |outer| %><%= render RubyUI::Probes::Div.new(id: "inner") do %>in <%= outer.attrs["id"] %><% end %><% end %>
diff --git a/gem/test/probes/views/probe/fallback_blank.html.erb b/gem/test/probes/views/probe/fallback_blank.html.erb
new file mode 100644
index 00000000..a0173711
--- /dev/null
+++ b/gem/test/probes/views/probe/fallback_blank.html.erb
@@ -0,0 +1,2 @@
+<%= render RubyUI::Probes::Fallback.new(placeholder: "Pick one") do %>
+<% end %>
diff --git a/gem/test/probes/views/probe/fallback_empty.html.erb b/gem/test/probes/views/probe/fallback_empty.html.erb
new file mode 100644
index 00000000..55a7f348
--- /dev/null
+++ b/gem/test/probes/views/probe/fallback_empty.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Probes::Fallback.new(placeholder: "Pick one") do %><% end %>
diff --git a/gem/test/probes/views/probe/fallback_text.html.erb b/gem/test/probes/views/probe/fallback_text.html.erb
new file mode 100644
index 00000000..8847ae43
--- /dev/null
+++ b/gem/test/probes/views/probe/fallback_text.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Probes::Fallback.new(placeholder: "Pick one") do %>Apple<% end %>
diff --git a/gem/test/probes/views/ruby_ui/probes/div.html.erb b/gem/test/probes/views/ruby_ui/probes/div.html.erb
new file mode 100644
index 00000000..42b4776b
--- /dev/null
+++ b/gem/test/probes/views/ruby_ui/probes/div.html.erb
@@ -0,0 +1 @@
+HOST SHADOW
diff --git a/gem/test/ruby_ui/component_test.rb b/gem/test/ruby_ui/component_test.rb
new file mode 100644
index 00000000..d7ee6a6b
--- /dev/null
+++ b/gem/test/ruby_ui/component_test.rb
@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+require "test_helper"
+require "golden/canonical_html"
+
+# The 2.0 component layer, through the probe components under test/probes.
+# Output is compared in canonical form where whitespace is irrelevant and raw
+# where it is the point. Inherits the helper base for render_erb.
+class LayerTest < ComponentTest
+  def canonical(html)
+    Golden::CanonicalHtml.call(html)
+  end
+
+  def view
+    RubyUI::TestApp.view
+  end
+
+  def test_attrs_are_computed_with_no_view_context
+    assert_equal({"class" => "probe", "data-probe" => ""}, RubyUI::Probes::Div.new.attrs)
+  end
+
+  def test_caller_classes_merge_over_defaults_and_nil_keeps_the_default
+    assert_equal "probe p-4", RubyUI::Probes::Div.new(class: "p-4").attrs["class"]
+    assert_equal "probe", RubyUI::Probes::Div.new(class: nil).attrs["class"]
+    assert_equal "p-4", RubyUI::Probes::Div.new(class!: "p-4").attrs["class"]
+  end
+
+  def test_renders_the_sidecar_with_attributes_and_content
+    assert_equal canonical(%(<div class="probe" data-probe="">Hello</div>)), canonical(render_erb("probe/div_default"))
+  end
+
+  def test_content_is_nil_when_rendered_without_a_block_even_after_a_render_with_one
+    component = RubyUI::Probes::Div.new
+    view.render(component) { "first" }
+
+    assert_equal canonical(%(<div class="probe" data-probe=""></div>)), canonical(view.render(component))
+  end
+
+  def test_the_block_receives_the_component
+    assert_includes render_erb("probe/div_block_arg"), "id=outer"
+  end
+
+  def test_a_component_renders_inside_another_components_block
+    html = render_erb("probe/div_nested")
+
+    assert_includes html, %(id="inner")
+    assert_includes html, "in outer"
+  end
+
+  def test_a_component_can_render_nothing
+    assert_equal "", view.render(RubyUI::Probes::Rootless.new(shown: false)).strip
+    assert_includes view.render(RubyUI::Probes::Rootless.new), "shown"
+  end
+
+  def test_a_minted_id_and_its_reference_line_up
+    html = view.render(RubyUI::Probes::WithId.new) { "body" }
+    id = html[/id="(content[0-9a-f]{8})"/, 1]
+
+    refute_nil id
+    assert_includes html, %(aria-controls="#{id}")
+  end
+
+  def test_a_custom_element_root
+    assert_equal canonical(%(<turbo-frame id="frame">x</turbo-frame>)), canonical(view.render(RubyUI::Probes::Frame.new) { "x" })
+  end
+
+  def test_content_presence_falls_back_to_the_placeholder
+    assert_equal canonical("<span>Pick one</span>"), canonical(render_erb("probe/fallback_empty"))
+    assert_equal canonical("<span>Pick one</span>"), canonical(render_erb("probe/fallback_blank"))
+    assert_equal canonical("<span>Apple</span>"), canonical(render_erb("probe/fallback_text"))
+  end
+
+  def test_helpers_raises_outside_render_in
+    error = assert_raises(ArgumentError) { RubyUI::Probes::Div.new.helpers }
+
+    assert_match(/no view context/, error.message)
+  end
+
+  def test_a_missing_sidecar_is_named
+    error = assert_raises(ArgumentError) { view.render(RubyUI::Probes::Bare.new) }
+
+    assert_match(%r{ruby_ui/probes/bare\.html\.erb}, error.message)
+  end
+
+  def test_a_host_template_at_the_same_virtual_path_is_not_picked
+    refute_includes render_erb("probe/div_default"), "HOST SHADOW"
+  end
+
+  def test_overlapping_roots_resolve_the_same_sidecar
+    # With the gem directory itself as a root ahead of test/probes, Div's file
+    # matches the wider root first; the relative path grows, the sidecar found
+    # is the same one.
+    original = RubyUI.component_roots
+    RubyUI.component_roots = [RubyUI::TestApp::ROOT, *original]
+    RubyUI::Probes::Div.instance_variable_set(:@component_root, nil)
+
+    assert_equal canonical(%(<div class="probe" data-probe="">Hello</div>)), canonical(render_erb("probe/div_default"))
+  ensure
+    RubyUI.component_roots = original
+    RubyUI::Probes::Div.instance_variable_set(:@component_root, nil)
+  end
+
+  class Homeless < RubyUI::Component
+  end
+
+  def test_a_class_outside_every_component_root_is_refused
+    error = assert_raises(ArgumentError) { Homeless.template }
+
+    assert_match(/component_roots/, error.message)
+  end
+end
diff --git a/gem/test/test_helper.rb b/gem/test/test_helper.rb
index dd7af988..f278a31d 100644
--- a/gem/test/test_helper.rb
+++ b/gem/test/test_helper.rb
@@ -58,6 +58,15 @@ def view_class
 ReActionView.config.debug_mode = false
 Rails.application.initialize!
 
+# component_roots= is a module method, not a constant: the autoload above does
+# not reach it, so the file is required outright.
+require "ruby_ui/component"
+
+# Two component roots: the gem's own components, and the test-only probes.
+# A class's sidecar is looked up under the root that contains the class file.
+RubyUI.component_roots = [File.join(RubyUI::TestApp::ROOT, "lib"), File.join(RubyUI::TestApp::ROOT, "test/probes")]
+Dir.glob(File.join(RubyUI::TestApp::ROOT, "test/probes/ruby_ui/**/*.rb")).sort.each { |probe| require probe }
+
 class ComponentTest < Minitest::Test
   def render(component, &)
     component.call(&)

From 75d3dfe794ee71797d8eac105c23b0cb3976247c Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 13:20:57 -0300
Subject: [PATCH 09/20] [Feature] RubyUI::Component#enum: coerce and validate
 enumerated attributes

size: "lg" from a tag or params and size: :lg from Ruby both select
SIZES[:lg]; nil takes the default; anything else raises naming the
allowed values, instead of indexing a Symbol-keyed hash with a String
and silently dropping the class, as DialogContent and Badge do in 1.6.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 gem/lib/ruby_ui/component.rb  | 13 +++++++++++
 gem/test/ruby_ui/enum_test.rb | 42 +++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 gem/test/ruby_ui/enum_test.rb

diff --git a/gem/lib/ruby_ui/component.rb b/gem/lib/ruby_ui/component.rb
index 5c970308..13637d83 100644
--- a/gem/lib/ruby_ui/component.rb
+++ b/gem/lib/ruby_ui/component.rb
@@ -108,5 +108,18 @@ def component_root
     def default_attrs
       {}
     end
+
+    # Coerces and validates an enumerated attribute. `size: "lg"` from a tag or
+    # from params arrives as a String, `size: :lg` from Ruby as a Symbol, and
+    # both must select `table[:lg]`; nil takes the default. Anything else names
+    # the allowed values instead of silently dropping the class.
+    def enum(value, table, default:)
+      key = value.nil? ? default : value
+      key = key.to_sym if key.respond_to?(:to_sym)
+      return key if table.key?(key)
+
+      raise ArgumentError,
+        "#{self.class.name}: #{value.inspect} is not one of #{table.keys.map(&:inspect).join(", ")}"
+    end
   end
 end
diff --git a/gem/test/ruby_ui/enum_test.rb b/gem/test/ruby_ui/enum_test.rb
new file mode 100644
index 00000000..0e61864a
--- /dev/null
+++ b/gem/test/ruby_ui/enum_test.rb
@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class EnumTest < Minitest::Test
+  class Sized < RubyUI::Component
+    SIZES = {sm: "h-8", md: "h-9", lg: "h-10"}.freeze
+
+    attr_reader :size
+
+    def initialize(size: nil, **attrs)
+      @size = enum(size, SIZES, default: :md)
+      super(**attrs)
+    end
+  end
+
+  def test_a_symbol_selects_its_entry
+    assert_equal :lg, Sized.new(size: :lg).size
+  end
+
+  def test_a_string_is_coerced_to_the_symbol
+    assert_equal :lg, Sized.new(size: "lg").size
+  end
+
+  def test_nil_takes_the_default
+    assert_equal :md, Sized.new.size
+    assert_equal :md, Sized.new(size: nil).size
+  end
+
+  def test_an_unknown_value_raises_naming_the_allowed_ones
+    error = assert_raises(ArgumentError) { Sized.new(size: "xlg") }
+
+    assert_match(/"xlg"/, error.message)
+    assert_match(/:sm, :md, :lg/, error.message)
+  end
+
+  def test_a_value_that_cannot_be_a_symbol_raises_the_same_way
+    error = assert_raises(ArgumentError) { Sized.new(size: 42) }
+
+    assert_match(/42/, error.message)
+  end
+end

From 4eb08a6b2a285db7586deb0d220d8583b635096c Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 13:26:23 -0300
Subject: [PATCH 10/20] [Feature] Golden suite: an ERB lane, proved on Button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A scenario may now have an ERB fixture under test/golden/views next to
its Phlex block; the suite renders the fixture through the harness and
compares it against the same frozen snapshot, as its own test. With
phlex-rails loaded a fixture can render a component that is still
Phlex, so every fixture can be written and made green before a single
component migrates — after which a migration changes only the
implementation, never the ruler.

Button's 15 fixtures are the proof: byte-identical in canonical form
to the snapshots the Phlex lane recorded.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 gem/test/golden/catalog.rb                    | 33 ++++++++++-
 gem/test/golden/harness.rb                    | 23 ++++++++
 .../golden/views/button/icon_size_lg.html.erb |  1 +
 .../golden/views/button/icon_size_md.html.erb |  1 +
 .../golden/views/button/icon_size_sm.html.erb |  1 +
 .../golden/views/button/icon_size_xl.html.erb |  1 +
 gem/test/golden/views/button/size_lg.html.erb |  1 +
 gem/test/golden/views/button/size_md.html.erb |  1 +
 gem/test/golden/views/button/size_sm.html.erb |  1 +
 gem/test/golden/views/button/size_xl.html.erb |  1 +
 .../views/button/submit_disabled.html.erb     |  1 +
 .../views/button/variant_destructive.html.erb |  1 +
 .../views/button/variant_ghost.html.erb       |  1 +
 .../golden/views/button/variant_link.html.erb |  1 +
 .../views/button/variant_outline.html.erb     |  1 +
 .../views/button/variant_primary.html.erb     |  1 +
 .../views/button/variant_secondary.html.erb   |  1 +
 gem/test/golden_test.rb                       | 59 +++++++++++++++----
 18 files changed, 116 insertions(+), 14 deletions(-)
 create mode 100644 gem/test/golden/views/button/icon_size_lg.html.erb
 create mode 100644 gem/test/golden/views/button/icon_size_md.html.erb
 create mode 100644 gem/test/golden/views/button/icon_size_sm.html.erb
 create mode 100644 gem/test/golden/views/button/icon_size_xl.html.erb
 create mode 100644 gem/test/golden/views/button/size_lg.html.erb
 create mode 100644 gem/test/golden/views/button/size_md.html.erb
 create mode 100644 gem/test/golden/views/button/size_sm.html.erb
 create mode 100644 gem/test/golden/views/button/size_xl.html.erb
 create mode 100644 gem/test/golden/views/button/submit_disabled.html.erb
 create mode 100644 gem/test/golden/views/button/variant_destructive.html.erb
 create mode 100644 gem/test/golden/views/button/variant_ghost.html.erb
 create mode 100644 gem/test/golden/views/button/variant_link.html.erb
 create mode 100644 gem/test/golden/views/button/variant_outline.html.erb
 create mode 100644 gem/test/golden/views/button/variant_primary.html.erb
 create mode 100644 gem/test/golden/views/button/variant_secondary.html.erb

diff --git a/gem/test/golden/catalog.rb b/gem/test/golden/catalog.rb
index d4555fad..a6344607 100644
--- a/gem/test/golden/catalog.rb
+++ b/gem/test/golden/catalog.rb
@@ -6,6 +6,7 @@ module Golden
   module Catalog
     SNAPSHOT_ROOT = File.expand_path("snapshots", __dir__)
     LIB_ROOT = File.expand_path("../../lib/ruby_ui", __dir__)
+    VIEWS_ROOT = File.expand_path("views", __dir__)
 
     # `pending` holds a reason string when a scenario cannot be pinned by a
     # snapshot. A pending scenario is still declared, still rendered, and still
@@ -24,8 +25,28 @@ def snapshot_path
         File.join(SNAPSHOT_ROOT, component, "#{name}.html")
       end
 
-      def test_name
-        :"test_#{component}__#{name}"
+      def fixture_path
+        File.join(VIEWS_ROOT, component, "#{name}.html.erb")
+      end
+
+      def fixture?
+        File.exist?(fixture_path)
+      end
+
+      # The renderers this scenario runs through: its Phlex block while it has
+      # one, its ERB fixture once it has one. Both compare against one snapshot.
+      def lanes
+        [(:phlex if block), (:erb if fixture?)].compact
+      end
+
+      # The lane whose render is written to disk on `golden:update`: the Phlex
+      # block while the scenario has one, the ERB fixture after.
+      def recording_lane
+        block ? :phlex : :erb
+      end
+
+      def test_name(lane = nil)
+        lane ? :"test_#{component}__#{name}__#{lane}" : :"test_#{component}__#{name}"
       end
     end
 
@@ -51,6 +72,12 @@ def scenario(name, pending: nil, &block)
         scenarios << Scenario.new(@component, name.to_s, block, pending)
       end
 
+      # Every .html.erb fixture under VIEWS_ROOT — the ERB lane's coverage
+      # source, mirrored against the catalog by test_no_orphan_fixture_files.
+      def fixture_files
+        Dir.glob(File.join(VIEWS_ROOT, "**", "*.html.erb")).sort
+      end
+
       # Every directory under lib/ruby_ui/ is a component and must appear in the
       # catalog. `docs/` holds the documentation views that ship with the gem,
       # not components.
@@ -69,7 +96,7 @@ def component_classes
           .flat_map { |directory| Dir.glob(File.join(LIB_ROOT, directory, "*.rb")) }
           .reject { |path| path.end_with?("_docs.rb") }
           .map { |path| constant_for(path) }
-          .select { |constant| constant.is_a?(Class) && constant < RubyUI::Base }
+          .select { |constant| constant.is_a?(Class) && (constant < RubyUI::Base || constant < RubyUI::Component) }
           .map(&:name)
           .sort
       end
diff --git a/gem/test/golden/harness.rb b/gem/test/golden/harness.rb
index 5b39c69a..98dc07cf 100644
--- a/gem/test/golden/harness.rb
+++ b/gem/test/golden/harness.rb
@@ -29,6 +29,17 @@ def render(&block)
         @active = false
       end
 
+      # The ERB lane: renders a scenario's fixture through the same harness a
+      # host application's templates go through, with the same pins active.
+      def render_erb(scenario)
+        @active = true
+        @hex_calls = 0
+        @rand_calls = 0
+        RubyUI::TestApp.view(Golden::Catalog::VIEWS_ROOT).render(template: "#{scenario.component}/#{scenario.name}")
+      ensure
+        @active = false
+      end
+
       # `SecureRandom.hex` and `rand` are the only two sources of
       # non-determinism in the 1.6 surface: TooltipContent, SelectContent and
       # DatePicker mint DOM ids with `SecureRandom.hex(4)`, and
@@ -100,6 +111,15 @@ def before_template
       super
     end
   end
+
+  # The 2.0 layer has no before_template; render_in is the hook that fires on
+  # every render and nothing overrides.
+  module RecordsRenderedComponent
+    def render_in(...)
+      Golden::Harness.record(self.class)
+      super
+    end
+  end
 end
 
 SecureRandom.singleton_class.prepend(Golden::DeterministicSecureRandom)
@@ -109,3 +129,6 @@ def before_template
 # seeding.
 RubyUI::Base.prepend(Golden::DeterministicRandom)
 RubyUI::Base.prepend(Golden::RecordsRenderedClass)
+
+RubyUI::Component.prepend(Golden::DeterministicRandom)
+RubyUI::Component.prepend(Golden::RecordsRenderedComponent)
diff --git a/gem/test/golden/views/button/icon_size_lg.html.erb b/gem/test/golden/views/button/icon_size_lg.html.erb
new file mode 100644
index 00000000..3d85fc10
--- /dev/null
+++ b/gem/test/golden/views/button/icon_size_lg.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(size: :lg, icon: true) do %>X<% end %>
diff --git a/gem/test/golden/views/button/icon_size_md.html.erb b/gem/test/golden/views/button/icon_size_md.html.erb
new file mode 100644
index 00000000..18f3aff2
--- /dev/null
+++ b/gem/test/golden/views/button/icon_size_md.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(size: :md, icon: true) do %>X<% end %>
diff --git a/gem/test/golden/views/button/icon_size_sm.html.erb b/gem/test/golden/views/button/icon_size_sm.html.erb
new file mode 100644
index 00000000..cf6dce6e
--- /dev/null
+++ b/gem/test/golden/views/button/icon_size_sm.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(size: :sm, icon: true) do %>X<% end %>
diff --git a/gem/test/golden/views/button/icon_size_xl.html.erb b/gem/test/golden/views/button/icon_size_xl.html.erb
new file mode 100644
index 00000000..f31125f7
--- /dev/null
+++ b/gem/test/golden/views/button/icon_size_xl.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(size: :xl, icon: true) do %>X<% end %>
diff --git a/gem/test/golden/views/button/size_lg.html.erb b/gem/test/golden/views/button/size_lg.html.erb
new file mode 100644
index 00000000..5e5c586a
--- /dev/null
+++ b/gem/test/golden/views/button/size_lg.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(size: :lg) do %>lg<% end %>
diff --git a/gem/test/golden/views/button/size_md.html.erb b/gem/test/golden/views/button/size_md.html.erb
new file mode 100644
index 00000000..2b8d4f47
--- /dev/null
+++ b/gem/test/golden/views/button/size_md.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(size: :md) do %>md<% end %>
diff --git a/gem/test/golden/views/button/size_sm.html.erb b/gem/test/golden/views/button/size_sm.html.erb
new file mode 100644
index 00000000..32e5eb19
--- /dev/null
+++ b/gem/test/golden/views/button/size_sm.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(size: :sm) do %>sm<% end %>
diff --git a/gem/test/golden/views/button/size_xl.html.erb b/gem/test/golden/views/button/size_xl.html.erb
new file mode 100644
index 00000000..79145804
--- /dev/null
+++ b/gem/test/golden/views/button/size_xl.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(size: :xl) do %>xl<% end %>
diff --git a/gem/test/golden/views/button/submit_disabled.html.erb b/gem/test/golden/views/button/submit_disabled.html.erb
new file mode 100644
index 00000000..8d249b11
--- /dev/null
+++ b/gem/test/golden/views/button/submit_disabled.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(type: :submit, disabled: true) do %>Save<% end %>
diff --git a/gem/test/golden/views/button/variant_destructive.html.erb b/gem/test/golden/views/button/variant_destructive.html.erb
new file mode 100644
index 00000000..e5771ece
--- /dev/null
+++ b/gem/test/golden/views/button/variant_destructive.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(variant: :destructive) do %>destructive<% end %>
diff --git a/gem/test/golden/views/button/variant_ghost.html.erb b/gem/test/golden/views/button/variant_ghost.html.erb
new file mode 100644
index 00000000..a21934ff
--- /dev/null
+++ b/gem/test/golden/views/button/variant_ghost.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(variant: :ghost) do %>ghost<% end %>
diff --git a/gem/test/golden/views/button/variant_link.html.erb b/gem/test/golden/views/button/variant_link.html.erb
new file mode 100644
index 00000000..cdd65e18
--- /dev/null
+++ b/gem/test/golden/views/button/variant_link.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(variant: :link) do %>link<% end %>
diff --git a/gem/test/golden/views/button/variant_outline.html.erb b/gem/test/golden/views/button/variant_outline.html.erb
new file mode 100644
index 00000000..d6838a9f
--- /dev/null
+++ b/gem/test/golden/views/button/variant_outline.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(variant: :outline) do %>outline<% end %>
diff --git a/gem/test/golden/views/button/variant_primary.html.erb b/gem/test/golden/views/button/variant_primary.html.erb
new file mode 100644
index 00000000..b6bb1d2d
--- /dev/null
+++ b/gem/test/golden/views/button/variant_primary.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(variant: :primary) do %>primary<% end %>
diff --git a/gem/test/golden/views/button/variant_secondary.html.erb b/gem/test/golden/views/button/variant_secondary.html.erb
new file mode 100644
index 00000000..72890e12
--- /dev/null
+++ b/gem/test/golden/views/button/variant_secondary.html.erb
@@ -0,0 +1 @@
+<%= render RubyUI::Button.new(variant: :secondary) do %>secondary<% end %>
diff --git a/gem/test/golden_test.rb b/gem/test/golden_test.rb
index 44b87afd..e705eefb 100644
--- a/gem/test/golden_test.rb
+++ b/gem/test/golden_test.rb
@@ -21,27 +21,30 @@ class GoldenSuiteTest < Minitest::Test
   UPDATE = ENV["UPDATE_GOLDEN_SNAPSHOTS"] == "1"
 
   Golden::Catalog.scenarios.each do |scenario|
-    define_method(scenario.test_name) { assert_golden(scenario) }
+    scenario.lanes.each do |lane|
+      define_method(scenario.test_name(lane)) { assert_golden(scenario, lane) }
+    end
+  end
+
+  def self.recorded
+    @recorded ||= {}
   end
 
   private
 
-  def assert_golden(scenario)
-    canonical = canonicalize(scenario)
+  def assert_golden(scenario, lane)
+    canonical = canonicalize(scenario, lane)
 
     # Rendering twice catches any source of non-determinism the harness has not
     # pinned, wherever it lives, before it can be baked into a snapshot.
-    assert_equal canonical, canonicalize(scenario),
+    assert_equal canonical, canonicalize(scenario, lane),
       "#{scenario.slug} does not render deterministically; pin the new source in test/golden/harness.rb"
 
     # A pending scenario has been rendered — it must not raise, and must be
     # stable within one Ruby — but its markup is not pinned. See the reason.
     skip "#{scenario.slug} is not pinned: #{scenario.pending}" unless scenario.pinned?
 
-    if UPDATE
-      FileUtils.mkdir_p(File.dirname(scenario.snapshot_path))
-      File.write(scenario.snapshot_path, canonical)
-    end
+    record!(scenario) if UPDATE
 
     assert_path_exists scenario.snapshot_path,
       "no snapshot for #{scenario.slug} — run `bundle exec rake golden:update` and review the diff"
@@ -60,8 +63,24 @@ def assert_golden(scenario)
       "HTML for #{scenario.slug} no longer matches the recorded 1.6 snapshot"
   end
 
-  def canonicalize(scenario)
-    Golden::CanonicalHtml.call(Golden::Harness.render(&scenario.block))
+  def canonicalize(scenario, lane)
+    Golden::CanonicalHtml.call(render(scenario, lane))
+  end
+
+  def render(scenario, lane)
+    (lane == :erb) ? Golden::Harness.render_erb(scenario) : Golden::Harness.render(&scenario.block)
+  end
+
+  # In update mode the authoritative lane writes the snapshot before either
+  # lane compares, once per scenario per process, so the order Minitest picks
+  # for a scenario's lane tests cannot make one of them read a stale or absent
+  # file.
+  def record!(scenario)
+    self.class.recorded[scenario.slug] ||= begin
+      FileUtils.mkdir_p(File.dirname(scenario.snapshot_path))
+      File.write(scenario.snapshot_path, Golden::CanonicalHtml.call(render(scenario, scenario.recording_lane)))
+      true
+    end
   end
 end
 
@@ -92,12 +111,30 @@ def test_no_orphan_snapshot_files
       "snapshot files with no scenario (delete them): #{orphans.map { |path| path.delete_prefix("#{Golden::Catalog::SNAPSHOT_ROOT}/") }.join(", ")}"
   end
 
+  def test_every_scenario_has_at_least_one_lane
+    laneless = Golden::Catalog.scenarios.reject { |scenario| scenario.lanes.any? }.map(&:slug)
+
+    assert_empty laneless,
+      "scenarios with neither a Phlex block nor an ERB fixture (they would define no test): #{laneless.join(", ")}"
+  end
+
+  def test_no_orphan_fixture_files
+    expected = Golden::Catalog.scenarios.map(&:fixture_path).sort
+    orphans = Golden::Catalog.fixture_files - expected
+
+    assert_empty orphans,
+      "fixture files with no scenario (delete them): #{orphans.map { |path| path.delete_prefix("#{Golden::Catalog::VIEWS_ROOT}/") }.join(", ")}"
+  end
+
   # Rendering the whole catalog once, memoized, because Minitest runs tests in
   # a random order and the coverage check cannot rely on the scenario tests
   # having run first.
   def self.rendered_classes
     @rendered_classes ||= begin
-      Golden::Catalog.scenarios.each { |scenario| Golden::Harness.render(&scenario.block) }
+      Golden::Catalog.scenarios.each do |scenario|
+        Golden::Harness.render(&scenario.block) if scenario.block
+        Golden::Harness.render_erb(scenario) if scenario.fixture?
+      end
       Golden::Harness.classes_rendered.keys.sort
     end
   end

From 3cf6e9737c9e048fb59fcb9cb118c618f4eaa362 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 13:36:49 -0300
Subject: [PATCH 11/20] [Feature] Golden suite: a strict lane for every
 scenario

The canonical form is blind to whitespace between siblings and at text
boundaries by design. Every scenario now also keeps the preserve-mode
form: text verbatim, attributes sorted, the fragment's own edges
trimmed. 188 strict snapshots recorded from the Phlex lane while Phlex
still renders; a fixture or a migrated component that adds a newline
where Phlex emitted none fails here even though the canonical form
cannot see it. The fixed-point fix already on the branch (64cf273) is what
makes the strict form a fixed point too.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 gem/test/golden/canonical_html.rb             |  10 +-
 gem/test/golden/canonical_html_test.rb        |  49 ++++++++
 gem/test/golden/catalog.rb                    |  13 ++
 .../accordion/custom_trigger_with_icon.html   |   1 +
 .../default_trigger_and_content.html          |   1 +
 gem/test/golden/strict/alert/default.html     |   1 +
 gem/test/golden/strict/alert/destructive.html |   1 +
 gem/test/golden/strict/alert/success.html     |   1 +
 gem/test/golden/strict/alert/warning.html     |   1 +
 .../golden/strict/alert_dialog/default.html   |   1 +
 gem/test/golden/strict/alert_dialog/open.html |   1 +
 .../golden/strict/aspect_ratio/default.html   |   1 +
 .../golden/strict/aspect_ratio/square.html    |   1 +
 .../strict/avatar/image_with_fallback.html    |   1 +
 gem/test/golden/strict/avatar/size_lg.html    |   1 +
 gem/test/golden/strict/avatar/size_md.html    |   1 +
 gem/test/golden/strict/avatar/size_sm.html    |   1 +
 gem/test/golden/strict/avatar/size_xl.html    |   1 +
 .../golden/strict/badge/all_variants.html     |   1 +
 gem/test/golden/strict/badge/size_lg.html     |   1 +
 gem/test/golden/strict/badge/size_md.html     |   1 +
 gem/test/golden/strict/badge/size_sm.html     |   1 +
 .../golden/strict/breadcrumb/default.html     |   1 +
 .../strict/bubble/content_as_anchor.html      |   1 +
 gem/test/golden/strict/bubble/default.html    |   1 +
 .../muted_aligned_end_with_reactions.html     |   1 +
 .../strict/bubble/reactions_top_start.html    |   1 +
 .../golden/strict/button/icon_size_lg.html    |   1 +
 .../golden/strict/button/icon_size_md.html    |   1 +
 .../golden/strict/button/icon_size_sm.html    |   1 +
 .../golden/strict/button/icon_size_xl.html    |   1 +
 gem/test/golden/strict/button/size_lg.html    |   1 +
 gem/test/golden/strict/button/size_md.html    |   1 +
 gem/test/golden/strict/button/size_sm.html    |   1 +
 gem/test/golden/strict/button/size_xl.html    |   1 +
 .../golden/strict/button/submit_disabled.html |   1 +
 .../strict/button/variant_destructive.html    |   1 +
 .../golden/strict/button/variant_ghost.html   |   1 +
 .../golden/strict/button/variant_link.html    |   1 +
 .../golden/strict/button/variant_outline.html |   1 +
 .../golden/strict/button/variant_primary.html |   1 +
 .../strict/button/variant_secondary.html      |   1 +
 .../strict/calendar/bound_to_input.html       |   1 +
 gem/test/golden/strict/calendar/default.html  |   1 +
 .../golden/strict/calendar/header_parts.html  |   1 +
 gem/test/golden/strict/card/default.html      |   1 +
 .../golden/strict/carousel/horizontal.html    |   1 +
 gem/test/golden/strict/carousel/vertical.html |   1 +
 .../golden/strict/carousel/with_options.html  |   1 +
 gem/test/golden/strict/chart/bar.html         |   1 +
 .../strict/checkbox/checked_disabled.html     |   1 +
 gem/test/golden/strict/checkbox/default.html  |   1 +
 gem/test/golden/strict/checkbox/group.html    |   1 +
 .../clipboard/custom_source_and_trigger.html  |   1 +
 gem/test/golden/strict/clipboard/default.html |   1 +
 .../strict/clipboard/popover_error.html       |   1 +
 .../strict/clipboard/popover_success.html     |   1 +
 .../strict/codeblock/ruby_with_clipboard.html | 119 ++++++++++++++++++
 .../codeblock/ruby_without_clipboard.html     | 117 +++++++++++++++++
 .../golden/strict/collapsible/closed.html     |   1 +
 gem/test/golden/strict/collapsible/open.html  |   1 +
 gem/test/golden/strict/combobox/badge.html    |   1 +
 .../golden/strict/combobox/clear_button.html  |   1 +
 .../golden/strict/combobox/input_trigger.html |   1 +
 .../strict/combobox/multiple_with_badges.html |   1 +
 .../golden/strict/combobox/radio_items.html   |   1 +
 gem/test/golden/strict/command/dialog.html    |   1 +
 .../strict/command/dialog_content_lg.html     |   1 +
 .../strict/command/dialog_content_md.html     |   1 +
 .../strict/command/dialog_content_sm.html     |   1 +
 .../trigger_with_custom_keybindings.html      |   1 +
 .../golden/strict/context_menu/default.html   |   1 +
 .../strict/context_menu/label_flush.html      |   1 +
 .../strict/context_menu/label_inset.html      |   1 +
 .../strict/context_menu/with_options.html     |   1 +
 .../data_table/expand_toggle_expanded.html    |   1 +
 .../golden/strict/data_table/full_frame.html  |   1 +
 .../data_table/pagination_first_page.html     |   1 +
 .../data_table/pagination_manual_adapter.html |   1 +
 .../data_table/pagination_wide_window.html    |   1 +
 .../data_table/search_without_debounce.html   |   1 +
 .../strict/data_table/sort_head_unsorted.html |   1 +
 .../golden/strict/date_picker/default.html    |   1 +
 .../strict/date_picker/generated_id.html      |   1 +
 .../strict/date_picker/without_label.html     |   1 +
 gem/test/golden/strict/dialog/content_lg.html |   1 +
 gem/test/golden/strict/dialog/content_md.html |   1 +
 gem/test/golden/strict/dialog/content_sm.html |   1 +
 gem/test/golden/strict/dialog/content_xl.html |   1 +
 gem/test/golden/strict/dialog/default.html    |   1 +
 gem/test/golden/strict/dialog/open.html       |   1 +
 .../golden/strict/dropdown_menu/default.html  |   1 +
 .../strict/dropdown_menu/fixed_strategy.html  |   1 +
 gem/test/golden/strict/empty/default.html     |   1 +
 .../golden/strict/empty/media_default.html    |   1 +
 gem/test/golden/strict/form/default.html      |   1 +
 .../golden/strict/hover_card/default.html     |   1 +
 .../strict/hover_card/with_options.html       |   1 +
 gem/test/golden/strict/input/default.html     |   1 +
 .../strict/input/typed_and_disabled.html      |   1 +
 .../input_otp/alphanumeric_pattern.html       |   1 +
 gem/test/golden/strict/input_otp/default.html |   1 +
 gem/test/golden/strict/link/icon.html         |   1 +
 gem/test/golden/strict/link/size_lg.html      |   1 +
 gem/test/golden/strict/link/size_md.html      |   1 +
 gem/test/golden/strict/link/size_sm.html      |   1 +
 gem/test/golden/strict/link/size_xl.html      |   1 +
 .../strict/link/variant_destructive.html      |   1 +
 .../golden/strict/link/variant_ghost.html     |   1 +
 gem/test/golden/strict/link/variant_link.html |   1 +
 .../golden/strict/link/variant_outline.html   |   1 +
 .../golden/strict/link/variant_primary.html   |   1 +
 .../golden/strict/link/variant_secondary.html |   1 +
 .../golden/strict/masked_input/default.html   |   1 +
 .../group_with_avatar_header_footer.html      |   1 +
 .../strict/message_scroller/button_start.html |   1 +
 .../strict/message_scroller/default.html      |   1 +
 .../provider_custom_values.html               |   1 +
 .../golden/strict/native_select/default.html  |   1 +
 .../golden/strict/native_select/icon.html     |   1 +
 .../golden/strict/native_select/small.html    |   1 +
 .../golden/strict/pagination/default.html     |   1 +
 gem/test/golden/strict/popover/default.html   |   1 +
 .../golden/strict/popover/with_options.html   |   1 +
 gem/test/golden/strict/progress/value_0.html  |   1 +
 .../golden/strict/progress/value_100.html     |   1 +
 .../golden/strict/progress/value_33_5.html    |   1 +
 .../golden/strict/radio_button/checked.html   |   1 +
 .../golden/strict/radio_button/default.html   |   1 +
 gem/test/golden/strict/select/default.html    |   1 +
 .../value_falls_back_to_placeholder.html      |   1 +
 gem/test/golden/strict/separator/as_hr.html   |   1 +
 gem/test/golden/strict/separator/default.html |   1 +
 .../strict/separator/not_decorative.html      |   1 +
 .../golden/strict/separator/vertical.html     |   1 +
 .../golden/strict/sheet/content_bottom.html   |   1 +
 .../golden/strict/sheet/content_left.html     |   1 +
 .../golden/strict/sheet/content_right.html    |   1 +
 gem/test/golden/strict/sheet/content_top.html |   1 +
 gem/test/golden/strict/sheet/default.html     |   1 +
 gem/test/golden/strict/sheet/open.html        |   1 +
 .../golden/strict/shortcut_key/default.html   |   1 +
 .../collapsible_icon_right_floating.html      |   1 +
 .../strict/sidebar/collapsible_offcanvas.html |   1 +
 gem/test/golden/strict/sidebar/mobile.html    |   1 +
 .../strict/sidebar/non_collapsible.html       |   1 +
 gem/test/golden/strict/skeleton/default.html  |   1 +
 .../switch/checked_without_hidden_input.html  |   1 +
 gem/test/golden/strict/switch/default.html    |   1 +
 gem/test/golden/strict/table/default.html     |   1 +
 .../golden/strict/table/detached_row.html     |   1 +
 gem/test/golden/strict/tabs/default.html      |   1 +
 gem/test/golden/strict/textarea/default.html  |   1 +
 .../strict/textarea/rows_and_content.html     |   1 +
 .../golden/strict/theme_toggle/default.html   |   1 +
 .../strict/toast/item_with_all_slots.html     |   1 +
 .../region_top_center_with_close_button.html  |   1 +
 .../strict/toast/region_with_flash.html       |   1 +
 gem/test/golden/strict/toggle/default.html    |   1 +
 .../golden/strict/toggle/disabled_small.html  |   1 +
 .../toggle/pressed_outline_with_name.html     |   1 +
 .../golden/strict/toggle_group/disabled.html  |   1 +
 .../multiple_outline_spaced_vertical.html     |   1 +
 .../golden/strict/toggle_group/single.html    |   1 +
 gem/test/golden/strict/tooltip/default.html   |   1 +
 .../strict/tooltip/placement_right.html       |   1 +
 .../golden/strict/typography/blockquote.html  |   1 +
 .../typography/heading_custom_size.html       |   1 +
 .../strict/typography/heading_level_1.html    |   1 +
 .../strict/typography/heading_level_2.html    |   1 +
 .../strict/typography/heading_level_3.html    |   1 +
 .../strict/typography/heading_level_4.html    |   1 +
 .../golden/strict/typography/inline_code.html |   1 +
 .../golden/strict/typography/inline_link.html |   1 +
 .../golden/strict/typography/text_as_div.html |   1 +
 .../strict/typography/text_as_label.html      |   1 +
 .../golden/strict/typography/text_as_p.html   |   1 +
 .../strict/typography/text_as_span.html       |   1 +
 .../golden/strict/typography/text_size_1.html |   1 +
 .../golden/strict/typography/text_size_2.html |   1 +
 .../golden/strict/typography/text_size_3.html |   1 +
 .../golden/strict/typography/text_size_4.html |   1 +
 .../golden/strict/typography/text_size_5.html |   1 +
 .../golden/strict/typography/text_size_6.html |   1 +
 .../golden/strict/typography/text_size_7.html |   1 +
 .../golden/strict/typography/text_size_8.html |   1 +
 .../golden/strict/typography/text_size_9.html |   1 +
 .../strict/typography/text_weight_bold.html   |   1 +
 .../strict/typography/text_weight_light.html  |   1 +
 .../strict/typography/text_weight_medium.html |   1 +
 .../typography/text_weight_regular.html       |   1 +
 gem/test/golden_test.rb                       |  35 +++++-
 192 files changed, 525 insertions(+), 4 deletions(-)
 create mode 100644 gem/test/golden/strict/accordion/custom_trigger_with_icon.html
 create mode 100644 gem/test/golden/strict/accordion/default_trigger_and_content.html
 create mode 100644 gem/test/golden/strict/alert/default.html
 create mode 100644 gem/test/golden/strict/alert/destructive.html
 create mode 100644 gem/test/golden/strict/alert/success.html
 create mode 100644 gem/test/golden/strict/alert/warning.html
 create mode 100644 gem/test/golden/strict/alert_dialog/default.html
 create mode 100644 gem/test/golden/strict/alert_dialog/open.html
 create mode 100644 gem/test/golden/strict/aspect_ratio/default.html
 create mode 100644 gem/test/golden/strict/aspect_ratio/square.html
 create mode 100644 gem/test/golden/strict/avatar/image_with_fallback.html
 create mode 100644 gem/test/golden/strict/avatar/size_lg.html
 create mode 100644 gem/test/golden/strict/avatar/size_md.html
 create mode 100644 gem/test/golden/strict/avatar/size_sm.html
 create mode 100644 gem/test/golden/strict/avatar/size_xl.html
 create mode 100644 gem/test/golden/strict/badge/all_variants.html
 create mode 100644 gem/test/golden/strict/badge/size_lg.html
 create mode 100644 gem/test/golden/strict/badge/size_md.html
 create mode 100644 gem/test/golden/strict/badge/size_sm.html
 create mode 100644 gem/test/golden/strict/breadcrumb/default.html
 create mode 100644 gem/test/golden/strict/bubble/content_as_anchor.html
 create mode 100644 gem/test/golden/strict/bubble/default.html
 create mode 100644 gem/test/golden/strict/bubble/muted_aligned_end_with_reactions.html
 create mode 100644 gem/test/golden/strict/bubble/reactions_top_start.html
 create mode 100644 gem/test/golden/strict/button/icon_size_lg.html
 create mode 100644 gem/test/golden/strict/button/icon_size_md.html
 create mode 100644 gem/test/golden/strict/button/icon_size_sm.html
 create mode 100644 gem/test/golden/strict/button/icon_size_xl.html
 create mode 100644 gem/test/golden/strict/button/size_lg.html
 create mode 100644 gem/test/golden/strict/button/size_md.html
 create mode 100644 gem/test/golden/strict/button/size_sm.html
 create mode 100644 gem/test/golden/strict/button/size_xl.html
 create mode 100644 gem/test/golden/strict/button/submit_disabled.html
 create mode 100644 gem/test/golden/strict/button/variant_destructive.html
 create mode 100644 gem/test/golden/strict/button/variant_ghost.html
 create mode 100644 gem/test/golden/strict/button/variant_link.html
 create mode 100644 gem/test/golden/strict/button/variant_outline.html
 create mode 100644 gem/test/golden/strict/button/variant_primary.html
 create mode 100644 gem/test/golden/strict/button/variant_secondary.html
 create mode 100644 gem/test/golden/strict/calendar/bound_to_input.html
 create mode 100644 gem/test/golden/strict/calendar/default.html
 create mode 100644 gem/test/golden/strict/calendar/header_parts.html
 create mode 100644 gem/test/golden/strict/card/default.html
 create mode 100644 gem/test/golden/strict/carousel/horizontal.html
 create mode 100644 gem/test/golden/strict/carousel/vertical.html
 create mode 100644 gem/test/golden/strict/carousel/with_options.html
 create mode 100644 gem/test/golden/strict/chart/bar.html
 create mode 100644 gem/test/golden/strict/checkbox/checked_disabled.html
 create mode 100644 gem/test/golden/strict/checkbox/default.html
 create mode 100644 gem/test/golden/strict/checkbox/group.html
 create mode 100644 gem/test/golden/strict/clipboard/custom_source_and_trigger.html
 create mode 100644 gem/test/golden/strict/clipboard/default.html
 create mode 100644 gem/test/golden/strict/clipboard/popover_error.html
 create mode 100644 gem/test/golden/strict/clipboard/popover_success.html
 create mode 100644 gem/test/golden/strict/codeblock/ruby_with_clipboard.html
 create mode 100644 gem/test/golden/strict/codeblock/ruby_without_clipboard.html
 create mode 100644 gem/test/golden/strict/collapsible/closed.html
 create mode 100644 gem/test/golden/strict/collapsible/open.html
 create mode 100644 gem/test/golden/strict/combobox/badge.html
 create mode 100644 gem/test/golden/strict/combobox/clear_button.html
 create mode 100644 gem/test/golden/strict/combobox/input_trigger.html
 create mode 100644 gem/test/golden/strict/combobox/multiple_with_badges.html
 create mode 100644 gem/test/golden/strict/combobox/radio_items.html
 create mode 100644 gem/test/golden/strict/command/dialog.html
 create mode 100644 gem/test/golden/strict/command/dialog_content_lg.html
 create mode 100644 gem/test/golden/strict/command/dialog_content_md.html
 create mode 100644 gem/test/golden/strict/command/dialog_content_sm.html
 create mode 100644 gem/test/golden/strict/command/trigger_with_custom_keybindings.html
 create mode 100644 gem/test/golden/strict/context_menu/default.html
 create mode 100644 gem/test/golden/strict/context_menu/label_flush.html
 create mode 100644 gem/test/golden/strict/context_menu/label_inset.html
 create mode 100644 gem/test/golden/strict/context_menu/with_options.html
 create mode 100644 gem/test/golden/strict/data_table/expand_toggle_expanded.html
 create mode 100644 gem/test/golden/strict/data_table/full_frame.html
 create mode 100644 gem/test/golden/strict/data_table/pagination_first_page.html
 create mode 100644 gem/test/golden/strict/data_table/pagination_manual_adapter.html
 create mode 100644 gem/test/golden/strict/data_table/pagination_wide_window.html
 create mode 100644 gem/test/golden/strict/data_table/search_without_debounce.html
 create mode 100644 gem/test/golden/strict/data_table/sort_head_unsorted.html
 create mode 100644 gem/test/golden/strict/date_picker/default.html
 create mode 100644 gem/test/golden/strict/date_picker/generated_id.html
 create mode 100644 gem/test/golden/strict/date_picker/without_label.html
 create mode 100644 gem/test/golden/strict/dialog/content_lg.html
 create mode 100644 gem/test/golden/strict/dialog/content_md.html
 create mode 100644 gem/test/golden/strict/dialog/content_sm.html
 create mode 100644 gem/test/golden/strict/dialog/content_xl.html
 create mode 100644 gem/test/golden/strict/dialog/default.html
 create mode 100644 gem/test/golden/strict/dialog/open.html
 create mode 100644 gem/test/golden/strict/dropdown_menu/default.html
 create mode 100644 gem/test/golden/strict/dropdown_menu/fixed_strategy.html
 create mode 100644 gem/test/golden/strict/empty/default.html
 create mode 100644 gem/test/golden/strict/empty/media_default.html
 create mode 100644 gem/test/golden/strict/form/default.html
 create mode 100644 gem/test/golden/strict/hover_card/default.html
 create mode 100644 gem/test/golden/strict/hover_card/with_options.html
 create mode 100644 gem/test/golden/strict/input/default.html
 create mode 100644 gem/test/golden/strict/input/typed_and_disabled.html
 create mode 100644 gem/test/golden/strict/input_otp/alphanumeric_pattern.html
 create mode 100644 gem/test/golden/strict/input_otp/default.html
 create mode 100644 gem/test/golden/strict/link/icon.html
 create mode 100644 gem/test/golden/strict/link/size_lg.html
 create mode 100644 gem/test/golden/strict/link/size_md.html
 create mode 100644 gem/test/golden/strict/link/size_sm.html
 create mode 100644 gem/test/golden/strict/link/size_xl.html
 create mode 100644 gem/test/golden/strict/link/variant_destructive.html
 create mode 100644 gem/test/golden/strict/link/variant_ghost.html
 create mode 100644 gem/test/golden/strict/link/variant_link.html
 create mode 100644 gem/test/golden/strict/link/variant_outline.html
 create mode 100644 gem/test/golden/strict/link/variant_primary.html
 create mode 100644 gem/test/golden/strict/link/variant_secondary.html
 create mode 100644 gem/test/golden/strict/masked_input/default.html
 create mode 100644 gem/test/golden/strict/message/group_with_avatar_header_footer.html
 create mode 100644 gem/test/golden/strict/message_scroller/button_start.html
 create mode 100644 gem/test/golden/strict/message_scroller/default.html
 create mode 100644 gem/test/golden/strict/message_scroller/provider_custom_values.html
 create mode 100644 gem/test/golden/strict/native_select/default.html
 create mode 100644 gem/test/golden/strict/native_select/icon.html
 create mode 100644 gem/test/golden/strict/native_select/small.html
 create mode 100644 gem/test/golden/strict/pagination/default.html
 create mode 100644 gem/test/golden/strict/popover/default.html
 create mode 100644 gem/test/golden/strict/popover/with_options.html
 create mode 100644 gem/test/golden/strict/progress/value_0.html
 create mode 100644 gem/test/golden/strict/progress/value_100.html
 create mode 100644 gem/test/golden/strict/progress/value_33_5.html
 create mode 100644 gem/test/golden/strict/radio_button/checked.html
 create mode 100644 gem/test/golden/strict/radio_button/default.html
 create mode 100644 gem/test/golden/strict/select/default.html
 create mode 100644 gem/test/golden/strict/select/value_falls_back_to_placeholder.html
 create mode 100644 gem/test/golden/strict/separator/as_hr.html
 create mode 100644 gem/test/golden/strict/separator/default.html
 create mode 100644 gem/test/golden/strict/separator/not_decorative.html
 create mode 100644 gem/test/golden/strict/separator/vertical.html
 create mode 100644 gem/test/golden/strict/sheet/content_bottom.html
 create mode 100644 gem/test/golden/strict/sheet/content_left.html
 create mode 100644 gem/test/golden/strict/sheet/content_right.html
 create mode 100644 gem/test/golden/strict/sheet/content_top.html
 create mode 100644 gem/test/golden/strict/sheet/default.html
 create mode 100644 gem/test/golden/strict/sheet/open.html
 create mode 100644 gem/test/golden/strict/shortcut_key/default.html
 create mode 100644 gem/test/golden/strict/sidebar/collapsible_icon_right_floating.html
 create mode 100644 gem/test/golden/strict/sidebar/collapsible_offcanvas.html
 create mode 100644 gem/test/golden/strict/sidebar/mobile.html
 create mode 100644 gem/test/golden/strict/sidebar/non_collapsible.html
 create mode 100644 gem/test/golden/strict/skeleton/default.html
 create mode 100644 gem/test/golden/strict/switch/checked_without_hidden_input.html
 create mode 100644 gem/test/golden/strict/switch/default.html
 create mode 100644 gem/test/golden/strict/table/default.html
 create mode 100644 gem/test/golden/strict/table/detached_row.html
 create mode 100644 gem/test/golden/strict/tabs/default.html
 create mode 100644 gem/test/golden/strict/textarea/default.html
 create mode 100644 gem/test/golden/strict/textarea/rows_and_content.html
 create mode 100644 gem/test/golden/strict/theme_toggle/default.html
 create mode 100644 gem/test/golden/strict/toast/item_with_all_slots.html
 create mode 100644 gem/test/golden/strict/toast/region_top_center_with_close_button.html
 create mode 100644 gem/test/golden/strict/toast/region_with_flash.html
 create mode 100644 gem/test/golden/strict/toggle/default.html
 create mode 100644 gem/test/golden/strict/toggle/disabled_small.html
 create mode 100644 gem/test/golden/strict/toggle/pressed_outline_with_name.html
 create mode 100644 gem/test/golden/strict/toggle_group/disabled.html
 create mode 100644 gem/test/golden/strict/toggle_group/multiple_outline_spaced_vertical.html
 create mode 100644 gem/test/golden/strict/toggle_group/single.html
 create mode 100644 gem/test/golden/strict/tooltip/default.html
 create mode 100644 gem/test/golden/strict/tooltip/placement_right.html
 create mode 100644 gem/test/golden/strict/typography/blockquote.html
 create mode 100644 gem/test/golden/strict/typography/heading_custom_size.html
 create mode 100644 gem/test/golden/strict/typography/heading_level_1.html
 create mode 100644 gem/test/golden/strict/typography/heading_level_2.html
 create mode 100644 gem/test/golden/strict/typography/heading_level_3.html
 create mode 100644 gem/test/golden/strict/typography/heading_level_4.html
 create mode 100644 gem/test/golden/strict/typography/inline_code.html
 create mode 100644 gem/test/golden/strict/typography/inline_link.html
 create mode 100644 gem/test/golden/strict/typography/text_as_div.html
 create mode 100644 gem/test/golden/strict/typography/text_as_label.html
 create mode 100644 gem/test/golden/strict/typography/text_as_p.html
 create mode 100644 gem/test/golden/strict/typography/text_as_span.html
 create mode 100644 gem/test/golden/strict/typography/text_size_1.html
 create mode 100644 gem/test/golden/strict/typography/text_size_2.html
 create mode 100644 gem/test/golden/strict/typography/text_size_3.html
 create mode 100644 gem/test/golden/strict/typography/text_size_4.html
 create mode 100644 gem/test/golden/strict/typography/text_size_5.html
 create mode 100644 gem/test/golden/strict/typography/text_size_6.html
 create mode 100644 gem/test/golden/strict/typography/text_size_7.html
 create mode 100644 gem/test/golden/strict/typography/text_size_8.html
 create mode 100644 gem/test/golden/strict/typography/text_size_9.html
 create mode 100644 gem/test/golden/strict/typography/text_weight_bold.html
 create mode 100644 gem/test/golden/strict/typography/text_weight_light.html
 create mode 100644 gem/test/golden/strict/typography/text_weight_medium.html
 create mode 100644 gem/test/golden/strict/typography/text_weight_regular.html

diff --git a/gem/test/golden/canonical_html.rb b/gem/test/golden/canonical_html.rb
index 5cee60b7..f843db49 100644
--- a/gem/test/golden/canonical_html.rb
+++ b/gem/test/golden/canonical_html.rb
@@ -65,10 +65,14 @@ module CanonicalHtml
     HTML_WHITESPACE = /[\t\n\f\r ]+/
 
     class << self
-      def call(html)
+      # `strict: true` is the preserve-mode form: text verbatim, whitespace
+      # kept, only the fragment's own edges trimmed. The normal form is blind to
+      # whitespace between siblings and at text boundaries by design; the
+      # strict form is for the components whose output is text.
+      def call(html, strict: false)
         out = +""
-        parse(html).each { |node| emit(node, 0, out, :normal) }
-        out
+        parse(html).each { |node| emit(node, 0, out, strict ? :preserve : :normal) }
+        strict ? out.strip : out
       end
 
       # Every fragment is parsed inside a `<template>`, and that is not
diff --git a/gem/test/golden/canonical_html_test.rb b/gem/test/golden/canonical_html_test.rb
index 99ccbf48..85fcc712 100644
--- a/gem/test/golden/canonical_html_test.rb
+++ b/gem/test/golden/canonical_html_test.rb
@@ -88,4 +88,53 @@ def test_a_textarea_inside_a_pre_keeps_its_leading_newline
     assert_equal once, canonical(once)
     assert_includes once, "<textarea>\n\nx</textarea>"
   end
+
+  def strict(html)
+    Golden::CanonicalHtml.call(html, strict: true)
+  end
+
+  def test_strict_sees_whitespace_between_inline_siblings
+    refute_equal strict("<span>a</span><span>b</span>"), strict("<span>a</span> <span>b</span>")
+  end
+
+  def test_strict_sees_whitespace_at_a_text_element_boundary
+    refute_equal strict("<p>Hello <em>w</em></p>"), strict("<p>Hello<em>w</em></p>")
+  end
+
+  def test_strict_keeps_text_verbatim_and_still_sorts_attributes
+    assert_equal %(<div class="a" id="x">\n  two  words\n</div>), strict(%(<div id="x" class="a">\n  two  words\n</div>))
+  end
+
+  def test_strict_trims_the_fragments_own_edges
+    assert_equal "<b>x</b>", strict("\n  <b>x</b>\n")
+  end
+
+  def test_strict_is_a_fixed_point
+    once = strict(%(<p>Hello <em>w</em>\n<code>a &lt; b</code></p>\n))
+
+    assert_equal once, strict(once)
+  end
+
+  def test_strict_keeps_raw_text_elements_raw
+    once = strict("<div><script>if (a < b) {}</script></div>")
+
+    assert_equal once, strict(once)
+    assert_includes once, "a < b"
+  end
+
+  def test_strict_restores_the_newline_the_parser_drops_after_pre_and_textarea
+    %w[pre textarea].each do |tag|
+      once = strict("<#{tag}>\n\nx</#{tag}>")
+
+      assert_equal "<#{tag}>\n\nx</#{tag}>", once
+      assert_equal once, strict(once)
+    end
+  end
+
+  def test_strict_restores_it_for_a_nested_pre_too
+    once = strict("<div><pre>\n\nx</pre></div>")
+
+    assert_equal "<div><pre>\n\nx</pre></div>", once
+    assert_equal once, strict(once)
+  end
 end
diff --git a/gem/test/golden/catalog.rb b/gem/test/golden/catalog.rb
index a6344607..3759a404 100644
--- a/gem/test/golden/catalog.rb
+++ b/gem/test/golden/catalog.rb
@@ -8,6 +8,11 @@ module Catalog
     LIB_ROOT = File.expand_path("../../lib/ruby_ui", __dir__)
     VIEWS_ROOT = File.expand_path("views", __dir__)
 
+    # Every scenario also keeps its strict form — the same fragment in
+    # preserve mode — so whitespace between siblings and at text boundaries is
+    # part of the contract for every component (spec §9.1, decision 8).
+    STRICT_ROOT = File.expand_path("strict", __dir__)
+
     # `pending` holds a reason string when a scenario cannot be pinned by a
     # snapshot. A pending scenario is still declared, still rendered, and still
     # counts towards class coverage — it just has no recorded HTML. That keeps
@@ -45,6 +50,10 @@ def recording_lane
         block ? :phlex : :erb
       end
 
+      def strict_snapshot_path
+        File.join(STRICT_ROOT, component, "#{name}.html")
+      end
+
       def test_name(lane = nil)
         lane ? :"test_#{component}__#{name}__#{lane}" : :"test_#{component}__#{name}"
       end
@@ -78,6 +87,10 @@ def fixture_files
         Dir.glob(File.join(VIEWS_ROOT, "**", "*.html.erb")).sort
       end
 
+      def strict_files
+        Dir.glob(File.join(STRICT_ROOT, "**", "*.html")).sort
+      end
+
       # Every directory under lib/ruby_ui/ is a component and must appear in the
       # catalog. `docs/` holds the documentation views that ship with the gem,
       # not components.
diff --git a/gem/test/golden/strict/accordion/custom_trigger_with_icon.html b/gem/test/golden/strict/accordion/custom_trigger_with_icon.html
new file mode 100644
index 00000000..9629ef54
--- /dev/null
+++ b/gem/test/golden/strict/accordion/custom_trigger_with_icon.html
@@ -0,0 +1 @@
+<div class="w-full"><div class="border-b" data-controller="ruby-ui--accordion" data-ruby-ui--accordion-open-value="" data-ruby-ui--accordion-rotate-icon-value="90"><button class="w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline" data-action="click-&gt;ruby-ui--accordion#toggle" type="button"><p>What is RubyUI?</p><span class="opacity-50" data-ruby-ui--accordion-target="icon"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" fill-rule="evenodd"></path></svg></span></button><div class="overflow-y-hidden" data-ruby-ui--accordion-target="content" data-state="closed" hidden style="height: 0px;"><p>A UI component library for Ruby.</p></div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/accordion/default_trigger_and_content.html b/gem/test/golden/strict/accordion/default_trigger_and_content.html
new file mode 100644
index 00000000..bb00c873
--- /dev/null
+++ b/gem/test/golden/strict/accordion/default_trigger_and_content.html
@@ -0,0 +1 @@
+<div class="w-full"><div class="border-b" data-controller="ruby-ui--accordion" data-ruby-ui--accordion-rotate-icon-value="180"><div class="flex items-center justify-between w-full"><p>Title</p><span class="opacity-50" data-ruby-ui--accordion-target="icon"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" fill-rule="evenodd"></path></svg></span></div><div class="pb-4 pt-0 text-sm">Content</div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/alert/default.html b/gem/test/golden/strict/alert/default.html
new file mode 100644
index 00000000..21e571fc
--- /dev/null
+++ b/gem/test/golden/strict/alert/default.html
@@ -0,0 +1 @@
+<div class="backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&amp;&gt;svg+div]:translate-y-[-3px] [&amp;&gt;svg]:absolute [&amp;&gt;svg]:start-4 [&amp;&gt;svg]:top-4 [&amp;&gt;svg~*]:ps-8 ring-border bg-muted/20 text-foreground [&amp;&gt;svg]:opacity-80"><h5 class="mb-1 font-medium leading-none tracking-tight">Heads up!</h5><div class="text-sm [&amp;_p]:leading-relaxed">You can add components to your app.</div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/alert/destructive.html b/gem/test/golden/strict/alert/destructive.html
new file mode 100644
index 00000000..189e6541
--- /dev/null
+++ b/gem/test/golden/strict/alert/destructive.html
@@ -0,0 +1 @@
+<div class="backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&amp;&gt;svg+div]:translate-y-[-3px] [&amp;&gt;svg]:absolute [&amp;&gt;svg]:start-4 [&amp;&gt;svg]:top-4 [&amp;&gt;svg~*]:ps-8 ring-destructive/20 bg-destructive/5 text-destructive [&amp;&gt;svg]:text-destructive/80"><h5 class="mb-1 font-medium leading-none tracking-tight">Error</h5><div class="text-sm [&amp;_p]:leading-relaxed">Your session expired.</div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/alert/success.html b/gem/test/golden/strict/alert/success.html
new file mode 100644
index 00000000..f2823239
--- /dev/null
+++ b/gem/test/golden/strict/alert/success.html
@@ -0,0 +1 @@
+<div class="backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&amp;&gt;svg+div]:translate-y-[-3px] [&amp;&gt;svg]:absolute [&amp;&gt;svg]:start-4 [&amp;&gt;svg]:top-4 [&amp;&gt;svg~*]:ps-8 ring-success/20 bg-success/5 text-success [&amp;&gt;svg]:text-success/80"><h5 class="mb-1 font-medium leading-none tracking-tight">Done</h5></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/alert/warning.html b/gem/test/golden/strict/alert/warning.html
new file mode 100644
index 00000000..711df188
--- /dev/null
+++ b/gem/test/golden/strict/alert/warning.html
@@ -0,0 +1 @@
+<div class="backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&amp;&gt;svg+div]:translate-y-[-3px] [&amp;&gt;svg]:absolute [&amp;&gt;svg]:start-4 [&amp;&gt;svg]:top-4 [&amp;&gt;svg~*]:ps-8 ring-warning/20 bg-warning/5 text-warning [&amp;&gt;svg]:text-warning/80"><h5 class="mb-1 font-medium leading-none tracking-tight">Careful</h5></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/alert_dialog/default.html b/gem/test/golden/strict/alert_dialog/default.html
new file mode 100644
index 00000000..b631fb64
--- /dev/null
+++ b/gem/test/golden/strict/alert_dialog/default.html
@@ -0,0 +1 @@
+<div class="inline-block" data-controller="ruby-ui--alert-dialog" data-ruby-ui--alert-dialog-open-value="false"><div class="inline-block" data-action="click-&gt;ruby-ui--alert-dialog#open"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">Show dialog</button></div><template data-ruby-ui--alert-dialog-target="content"><div data-controller="ruby-ui--alert-dialog"><div aria-hidden="true" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in" data-aria-hidden="true" data-state="open" style="pointer-events:auto"></div><div class="flex flex-col fixed left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full" data-state="open" role="alertdialog" style="pointer-events:auto"><div class="flex flex-col space-y-2 text-center sm:text-left rtl:sm:text-right"><h2 class="text-lg font-semibold">Are you absolutely sure?</h2><p class="text-sm text-muted-foreground">This action cannot be undone.</p></div><div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 rtl:space-x-reverse"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground mt-2 sm:mt-0" data-action="click-&gt;ruby-ui--alert-dialog#dismiss" type="button">Cancel</button><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">Continue</button></div></div></div></template></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/alert_dialog/open.html b/gem/test/golden/strict/alert_dialog/open.html
new file mode 100644
index 00000000..d4bcabec
--- /dev/null
+++ b/gem/test/golden/strict/alert_dialog/open.html
@@ -0,0 +1 @@
+<div class="inline-block" data-controller="ruby-ui--alert-dialog" data-ruby-ui--alert-dialog-open-value="true"><template data-ruby-ui--alert-dialog-target="content"><div data-controller="ruby-ui--alert-dialog"><div aria-hidden="true" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in" data-aria-hidden="true" data-state="open" style="pointer-events:auto"></div><div class="flex flex-col fixed left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full" data-state="open" role="alertdialog" style="pointer-events:auto"><h2 class="text-lg font-semibold">Open</h2></div></div></template></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/aspect_ratio/default.html b/gem/test/golden/strict/aspect_ratio/default.html
new file mode 100644
index 00000000..17a16ae5
--- /dev/null
+++ b/gem/test/golden/strict/aspect_ratio/default.html
@@ -0,0 +1 @@
+<div class="relative w-full" style="padding-bottom: 56.25%;"><div class="bg-muted absolute inset-0 [&amp;&gt;img]:object-cover [&amp;&gt;img]:absolute [&amp;&gt;img]:h-full [&amp;&gt;img]:w-full [&amp;&gt;img]:inset-0 [&amp;&gt;img]:text-transparent"><img alt="Placeholder" loading="lazy" src="/placeholder.png"></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/aspect_ratio/square.html b/gem/test/golden/strict/aspect_ratio/square.html
new file mode 100644
index 00000000..108b2b4b
--- /dev/null
+++ b/gem/test/golden/strict/aspect_ratio/square.html
@@ -0,0 +1 @@
+<div class="relative w-full" style="padding-bottom: 100.0%;"><div class="bg-muted absolute inset-0 [&amp;&gt;img]:object-cover [&amp;&gt;img]:absolute [&amp;&gt;img]:h-full [&amp;&gt;img]:w-full [&amp;&gt;img]:inset-0 [&amp;&gt;img]:text-transparent rounded-md border"><img alt="Placeholder" src="/placeholder.png"></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/avatar/image_with_fallback.html b/gem/test/golden/strict/avatar/image_with_fallback.html
new file mode 100644
index 00000000..c6bc74e0
--- /dev/null
+++ b/gem/test/golden/strict/avatar/image_with_fallback.html
@@ -0,0 +1 @@
+<span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-base" data-controller="ruby-ui--avatar"><img alt="Jane Doe" class="aspect-square h-full w-full" data-action="load-&gt;ruby-ui--avatar#showImage error-&gt;ruby-ui--avatar#showFallback" data-ruby-ui--avatar-target="image" src="/avatar.png"><span class="flex h-full w-full items-center justify-center rounded-full bg-muted" data-ruby-ui--avatar-target="fallback">JD</span></span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/avatar/size_lg.html b/gem/test/golden/strict/avatar/size_lg.html
new file mode 100644
index 00000000..8e5272fe
--- /dev/null
+++ b/gem/test/golden/strict/avatar/size_lg.html
@@ -0,0 +1 @@
+<span class="relative flex shrink-0 overflow-hidden rounded-full h-14 w-14 text-xl" data-controller="ruby-ui--avatar"><span class="flex h-full w-full items-center justify-center rounded-full bg-muted" data-ruby-ui--avatar-target="fallback">JD</span></span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/avatar/size_md.html b/gem/test/golden/strict/avatar/size_md.html
new file mode 100644
index 00000000..043db484
--- /dev/null
+++ b/gem/test/golden/strict/avatar/size_md.html
@@ -0,0 +1 @@
+<span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-base" data-controller="ruby-ui--avatar"><span class="flex h-full w-full items-center justify-center rounded-full bg-muted" data-ruby-ui--avatar-target="fallback">JD</span></span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/avatar/size_sm.html b/gem/test/golden/strict/avatar/size_sm.html
new file mode 100644
index 00000000..7d17179f
--- /dev/null
+++ b/gem/test/golden/strict/avatar/size_sm.html
@@ -0,0 +1 @@
+<span class="relative flex shrink-0 overflow-hidden rounded-full h-6 w-6 text-xs" data-controller="ruby-ui--avatar"><span class="flex h-full w-full items-center justify-center rounded-full bg-muted" data-ruby-ui--avatar-target="fallback">JD</span></span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/avatar/size_xl.html b/gem/test/golden/strict/avatar/size_xl.html
new file mode 100644
index 00000000..7e10639a
--- /dev/null
+++ b/gem/test/golden/strict/avatar/size_xl.html
@@ -0,0 +1 @@
+<span class="relative flex shrink-0 overflow-hidden rounded-full h-20 w-20 text-3xl" data-controller="ruby-ui--avatar"><span class="flex h-full w-full items-center justify-center rounded-full bg-muted" data-ruby-ui--avatar-target="fallback">JD</span></span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/badge/all_variants.html b/gem/test/golden/strict/badge/all_variants.html
new file mode 100644
index 00000000..df40428a
--- /dev/null
+++ b/gem/test/golden/strict/badge/all_variants.html
@@ -0,0 +1 @@
+<span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-primary bg-primary/5 ring-primary/20">primary</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-secondary bg-secondary/10 ring-secondary/20">secondary</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-foreground bg-background ring-border">outline</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-destructive bg-destructive/10 ring-destructive/20">destructive</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-success bg-success/10 ring-success/20">success</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-warning bg-warning/10 ring-warning/20">warning</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-slate-500 bg-slate-500/10 ring-slate-500/20">slate</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-gray-500 bg-gray-500/10 ring-gray-500/20">gray</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-zinc-500 bg-zinc-500/10 ring-zinc-500/20">zinc</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-neutral-500 bg-neutral-500/10 ring-neutral-500/20">neutral</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-stone-500 bg-stone-500/10 ring-stone-500/20">stone</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-red-500 bg-red-500/10 ring-red-500/20">red</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-orange-500 bg-orange-500/10 ring-orange-500/20">orange</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-amber-500 bg-amber-500/10 ring-amber-500/20">amber</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-yellow-500 bg-yellow-500/10 ring-yellow-500/20">yellow</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-lime-500 bg-lime-500/10 ring-lime-500/20">lime</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-green-500 bg-green-500/10 ring-green-500/20">green</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-emerald-500 bg-emerald-500/10 ring-emerald-500/20">emerald</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-teal-500 bg-teal-500/10 ring-teal-500/20">teal</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-cyan-500 bg-cyan-500/10 ring-cyan-500/20">cyan</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-sky-500 bg-sky-500/10 ring-sky-500/20">sky</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-blue-500 bg-blue-500/10 ring-blue-500/20">blue</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-indigo-500 bg-indigo-500/10 ring-indigo-500/20">indigo</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-violet-500 bg-violet-500/10 ring-violet-500/20">violet</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-purple-500 bg-purple-500/10 ring-purple-500/20">purple</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-fuchsia-500 bg-fuchsia-500/10 ring-fuchsia-500/20">fuchsia</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-pink-500 bg-pink-500/10 ring-pink-500/20">pink</span><span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-rose-500 bg-rose-500/10 ring-rose-500/20">rose</span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/badge/size_lg.html b/gem/test/golden/strict/badge/size_lg.html
new file mode 100644
index 00000000..dbcafe81
--- /dev/null
+++ b/gem/test/golden/strict/badge/size_lg.html
@@ -0,0 +1 @@
+<span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-3 py-1 text-sm text-primary bg-primary/5 ring-primary/20">Badge</span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/badge/size_md.html b/gem/test/golden/strict/badge/size_md.html
new file mode 100644
index 00000000..501e45ac
--- /dev/null
+++ b/gem/test/golden/strict/badge/size_md.html
@@ -0,0 +1 @@
+<span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-2 py-1 text-xs text-primary bg-primary/5 ring-primary/20">Badge</span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/badge/size_sm.html b/gem/test/golden/strict/badge/size_sm.html
new file mode 100644
index 00000000..a50063f6
--- /dev/null
+++ b/gem/test/golden/strict/badge/size_sm.html
@@ -0,0 +1 @@
+<span class="inline-flex items-center rounded-md font-medium ring-1 ring-inset px-1.5 py-0.5 text-xs text-primary bg-primary/5 ring-primary/20">Badge</span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/breadcrumb/default.html b/gem/test/golden/strict/breadcrumb/default.html
new file mode 100644
index 00000000..4f9e4b8c
--- /dev/null
+++ b/gem/test/golden/strict/breadcrumb/default.html
@@ -0,0 +1 @@
+<nav aria-label="breadcrumb"><ol class="flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5"><li class="inline-flex items-center gap-1.5"><a class="transition-colors hover:text-foreground" href="/">Home</a></li><li aria-hidden="" class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5" role="presentation"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9 18 6-6-6-6"></path></svg></li><li class="inline-flex items-center gap-1.5"><span aria-hidden="" class="flex h-9 w-9 items-center justify-center" role="presentation"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg><span class="sr-only">More</span></span></li><li aria-hidden="" class="[&amp;&gt;svg]:w-3.5 [&amp;&gt;svg]:h-3.5" role="presentation"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9 18 6-6-6-6"></path></svg></li><li class="inline-flex items-center gap-1.5"><span aria-current="page" aria-disabled="" class="font-normal text-foreground" role="link">Current</span></li></ol></nav>
\ No newline at end of file
diff --git a/gem/test/golden/strict/bubble/content_as_anchor.html b/gem/test/golden/strict/bubble/content_as_anchor.html
new file mode 100644
index 00000000..dd14651a
--- /dev/null
+++ b/gem/test/golden/strict/bubble/content_as_anchor.html
@@ -0,0 +1 @@
+<div class="group/bubble relative flex w-fit min-w-0 flex-col gap-1 max-w-[80%] data-[align=end]:self-end data-[variant=ghost]:max-w-full *:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&amp;&gt;[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80" data-align="start" data-slot="bubble" data-variant="default"><a class="w-fit max-w-full min-w-0 overflow-hidden wrap-break-word rounded-3xl border border-transparent px-3 py-2.5 text-sm leading-relaxed group-data-[align=end]/bubble:self-end [&amp;:is(button,a)]:text-left [&amp;:is(button,a)]:outline-none [&amp;:is(button,a)]:transition-colors [&amp;:is(button,a):focus-visible]:border-ring [&amp;:is(button,a):focus-visible]:ring-3 [&amp;:is(button,a):focus-visible]:ring-ring/30" data-slot="bubble-content" href="#">Open</a></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/bubble/default.html b/gem/test/golden/strict/bubble/default.html
new file mode 100644
index 00000000..65b48928
--- /dev/null
+++ b/gem/test/golden/strict/bubble/default.html
@@ -0,0 +1 @@
+<div class="group/bubble relative flex w-fit min-w-0 flex-col gap-1 max-w-[80%] data-[align=end]:self-end data-[variant=ghost]:max-w-full *:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&amp;&gt;[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80" data-align="start" data-slot="bubble" data-variant="default"><div class="w-fit max-w-full min-w-0 overflow-hidden wrap-break-word rounded-3xl border border-transparent px-3 py-2.5 text-sm leading-relaxed group-data-[align=end]/bubble:self-end [&amp;:is(button,a)]:text-left [&amp;:is(button,a)]:outline-none [&amp;:is(button,a)]:transition-colors [&amp;:is(button,a):focus-visible]:border-ring [&amp;:is(button,a):focus-visible]:ring-3 [&amp;:is(button,a):focus-visible]:ring-ring/30" data-slot="bubble-content">Hi</div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/bubble/muted_aligned_end_with_reactions.html b/gem/test/golden/strict/bubble/muted_aligned_end_with_reactions.html
new file mode 100644
index 00000000..edbc4b3a
--- /dev/null
+++ b/gem/test/golden/strict/bubble/muted_aligned_end_with_reactions.html
@@ -0,0 +1 @@
+<div class="flex min-w-0 flex-col gap-2" data-slot="bubble-group"><div class="group/bubble relative flex w-fit min-w-0 flex-col gap-1 max-w-[80%] data-[align=end]:self-end data-[variant=ghost]:max-w-full *:data-[slot=bubble-content]:bg-muted [&amp;&gt;[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]" data-align="end" data-slot="bubble" data-variant="muted"><div class="w-fit max-w-full min-w-0 overflow-hidden wrap-break-word rounded-3xl border border-transparent px-3 py-2.5 text-sm leading-relaxed group-data-[align=end]/bubble:self-end [&amp;:is(button,a)]:text-left [&amp;:is(button,a)]:outline-none [&amp;:is(button,a)]:transition-colors [&amp;:is(button,a):focus-visible]:border-ring [&amp;:is(button,a):focus-visible]:ring-3 [&amp;:is(button,a):focus-visible]:ring-ring/30" data-slot="bubble-content">Hi</div><div class="absolute z-10 flex w-fit items-center justify-center rounded-full ring-3 ring-card bg-muted shrink-0 gap-1 px-1.5 py-0.5 has-[button]:p-0 text-sm bottom-0 translate-y-3/4 right-3" data-align="end" data-side="bottom" data-slot="bubble-reactions">OK</div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/bubble/reactions_top_start.html b/gem/test/golden/strict/bubble/reactions_top_start.html
new file mode 100644
index 00000000..87f0b743
--- /dev/null
+++ b/gem/test/golden/strict/bubble/reactions_top_start.html
@@ -0,0 +1 @@
+<div class="absolute z-10 flex w-fit items-center justify-center rounded-full ring-3 ring-card bg-muted shrink-0 gap-1 px-1.5 py-0.5 has-[button]:p-0 text-sm top-0 -translate-y-3/4 left-3" data-align="start" data-side="top" data-slot="bubble-reactions">OK</div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/icon_size_lg.html b/gem/test/golden/strict/button/icon_size_lg.html
new file mode 100644
index 00000000..faf57d0d
--- /dev/null
+++ b/gem/test/golden/strict/button/icon_size_lg.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed h-10 w-10 bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">X</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/icon_size_md.html b/gem/test/golden/strict/button/icon_size_md.html
new file mode 100644
index 00000000..c9e1ef6b
--- /dev/null
+++ b/gem/test/golden/strict/button/icon_size_md.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed h-9 w-9 bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">X</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/icon_size_sm.html b/gem/test/golden/strict/button/icon_size_sm.html
new file mode 100644
index 00000000..e3cf2737
--- /dev/null
+++ b/gem/test/golden/strict/button/icon_size_sm.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed h-6 w-6 bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">X</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/icon_size_xl.html b/gem/test/golden/strict/button/icon_size_xl.html
new file mode 100644
index 00000000..cf65daf7
--- /dev/null
+++ b/gem/test/golden/strict/button/icon_size_xl.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed h-12 w-12 bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">X</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/size_lg.html b/gem/test/golden/strict/button/size_lg.html
new file mode 100644
index 00000000..6bd70af0
--- /dev/null
+++ b/gem/test/golden/strict/button/size_lg.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-10 text-base bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">lg</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/size_md.html b/gem/test/golden/strict/button/size_md.html
new file mode 100644
index 00000000..c3051d85
--- /dev/null
+++ b/gem/test/golden/strict/button/size_md.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">md</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/size_sm.html b/gem/test/golden/strict/button/size_sm.html
new file mode 100644
index 00000000..740457ef
--- /dev/null
+++ b/gem/test/golden/strict/button/size_sm.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-3 py-1.5 h-8 text-xs bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">sm</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/size_xl.html b/gem/test/golden/strict/button/size_xl.html
new file mode 100644
index 00000000..be968d0e
--- /dev/null
+++ b/gem/test/golden/strict/button/size_xl.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-6 py-3 h-12 text-base bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">xl</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/submit_disabled.html b/gem/test/golden/strict/button/submit_disabled.html
new file mode 100644
index 00000000..940e2a3b
--- /dev/null
+++ b/gem/test/golden/strict/button/submit_disabled.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-primary text-primary-foreground shadow hover:bg-primary/90" disabled type="submit">Save</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/variant_destructive.html b/gem/test/golden/strict/button/variant_destructive.html
new file mode 100644
index 00000000..060c2eb4
--- /dev/null
+++ b/gem/test/golden/strict/button/variant_destructive.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-destructive text-white shadow-sm [a&amp;]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60" type="button">destructive</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/variant_ghost.html b/gem/test/golden/strict/button/variant_ghost.html
new file mode 100644
index 00000000..859aede4
--- /dev/null
+++ b/gem/test/golden/strict/button/variant_ghost.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" type="button">ghost</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/variant_link.html b/gem/test/golden/strict/button/variant_link.html
new file mode 100644
index 00000000..5f2d8961
--- /dev/null
+++ b/gem/test/golden/strict/button/variant_link.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm text-primary underline-offset-4 hover:underline" type="button">link</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/variant_outline.html b/gem/test/golden/strict/button/variant_outline.html
new file mode 100644
index 00000000..b3fdadd5
--- /dev/null
+++ b/gem/test/golden/strict/button/variant_outline.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" type="button">outline</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/variant_primary.html b/gem/test/golden/strict/button/variant_primary.html
new file mode 100644
index 00000000..3871cb83
--- /dev/null
+++ b/gem/test/golden/strict/button/variant_primary.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">primary</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/button/variant_secondary.html b/gem/test/golden/strict/button/variant_secondary.html
new file mode 100644
index 00000000..9973762a
--- /dev/null
+++ b/gem/test/golden/strict/button/variant_secondary.html
@@ -0,0 +1 @@
+<button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-secondary text-secondary-foreground hover:bg-opacity-80" type="button">secondary</button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/calendar/bound_to_input.html b/gem/test/golden/strict/calendar/bound_to_input.html
new file mode 100644
index 00000000..fa963cf4
--- /dev/null
+++ b/gem/test/golden/strict/calendar/bound_to_input.html
@@ -0,0 +1 @@
+<div class="p-3 space-y-4 rounded-md border shadow" data-controller="ruby-ui--calendar" data-ruby-ui--calendar-format-value="dd/MM/yyyy" data-ruby-ui--calendar-min-date-value="2026-05-07" data-ruby-ui--calendar-ruby-ui--calendar-input-outlet="#event-date" data-ruby-ui--calendar-selected-date-value="2026-05-15"><div class="flex justify-center pt-1 relative items-center"><div aria-live="polite" class="text-sm font-medium" data-ruby-ui--calendar-target="title" role="presentation">Month Year</div><button aria-label="Go to previous month" class="rdp-button_reset rdp-button inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1" data-action="click-&gt;ruby-ui--calendar#prevMonth" name="previous-month" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z" fill="currentColor" fill-rule="evenodd"></path></svg></button><button aria-label="Go to next month" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1" data-action="click-&gt;ruby-ui--calendar#nextMonth" name="next-month" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd"></path></svg></button></div><table data-ruby-ui--calendar-target="calendar"></table><template data-ruby-ui--calendar-target="weekdaysTemplate"><thead><tr class="flex"><th aria-label="Monday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Mo</th><th aria-label="Tuesday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Tu</th><th aria-label="Wednesday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">We</th><th aria-label="Thursday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Th</th><th aria-label="Friday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Fr</th><th aria-label="Saturday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Sa</th><th aria-label="Sunday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Su</th></tr></thead></template><template data-ruby-ui--calendar-target="disabledDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button aria-disabled="true" class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 cursor-not-allowed bg-background text-muted-foreground hover:bg-background hover:text-muted-foreground" data-day="{{day}}" disabled name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="selectedDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button aria-selected="true" class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="0" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="todayDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="currentMonthDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="otherMonthDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/calendar/default.html b/gem/test/golden/strict/calendar/default.html
new file mode 100644
index 00000000..cf201c9a
--- /dev/null
+++ b/gem/test/golden/strict/calendar/default.html
@@ -0,0 +1 @@
+<div class="p-3 space-y-4" data-controller="ruby-ui--calendar" data-ruby-ui--calendar-format-value="yyyy-MM-dd"><div class="flex justify-center pt-1 relative items-center"><div aria-live="polite" class="text-sm font-medium" data-ruby-ui--calendar-target="title" role="presentation">Month Year</div><button aria-label="Go to previous month" class="rdp-button_reset rdp-button inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1" data-action="click-&gt;ruby-ui--calendar#prevMonth" name="previous-month" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z" fill="currentColor" fill-rule="evenodd"></path></svg></button><button aria-label="Go to next month" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1" data-action="click-&gt;ruby-ui--calendar#nextMonth" name="next-month" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd"></path></svg></button></div><table data-ruby-ui--calendar-target="calendar"></table><template data-ruby-ui--calendar-target="weekdaysTemplate"><thead><tr class="flex"><th aria-label="Monday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Mo</th><th aria-label="Tuesday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Tu</th><th aria-label="Wednesday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">We</th><th aria-label="Thursday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Th</th><th aria-label="Friday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Fr</th><th aria-label="Saturday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Sa</th><th aria-label="Sunday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Su</th></tr></thead></template><template data-ruby-ui--calendar-target="disabledDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button aria-disabled="true" class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 cursor-not-allowed bg-background text-muted-foreground hover:bg-background hover:text-muted-foreground" data-day="{{day}}" disabled name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="selectedDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button aria-selected="true" class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="0" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="todayDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="currentMonthDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="otherMonthDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/calendar/header_parts.html b/gem/test/golden/strict/calendar/header_parts.html
new file mode 100644
index 00000000..4d4307b8
--- /dev/null
+++ b/gem/test/golden/strict/calendar/header_parts.html
@@ -0,0 +1 @@
+<div class="flex justify-center pt-1 relative items-center"><div aria-live="polite" class="text-sm font-medium" data-ruby-ui--calendar-target="title" role="presentation">May 2026</div><button aria-label="Go to previous month" class="rdp-button_reset rdp-button inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1" data-action="click-&gt;ruby-ui--calendar#prevMonth" name="previous-month" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z" fill="currentColor" fill-rule="evenodd"></path></svg></button><button aria-label="Go to next month" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1" data-action="click-&gt;ruby-ui--calendar#nextMonth" name="next-month" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd"></path></svg></button></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/card/default.html b/gem/test/golden/strict/card/default.html
new file mode 100644
index 00000000..60be025e
--- /dev/null
+++ b/gem/test/golden/strict/card/default.html
@@ -0,0 +1 @@
+<div class="rounded-xl border bg-background shadow"><div class="flex flex-col space-y-1.5 p-6"><h3 class="font-semibold leading-none tracking-tight">Create project</h3><p class="text-sm text-muted-foreground">Deploy your new project in one click.</p></div><div class="p-6 pt-0">Body</div><div class="items-center p-6 pt-0"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">Deploy</button></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/carousel/horizontal.html b/gem/test/golden/strict/carousel/horizontal.html
new file mode 100644
index 00000000..af15eb6d
--- /dev/null
+++ b/gem/test/golden/strict/carousel/horizontal.html
@@ -0,0 +1 @@
+<div aria-roledescription="carousel" class="relative group is-horizontal" data-action="keydown.right-&gt;ruby-ui--carousel#scrollNext:prevent keydown.left-&gt;ruby-ui--carousel#scrollPrev:prevent" data-controller="ruby-ui--carousel" data-ruby-ui--carousel-options-value="{&quot;axis&quot;:&quot;x&quot;}" role="region"><div class="overflow-hidden" data-ruby-ui--carousel-target="viewport"><div class="flex group-[.is-horizontal]:-ml-4 group-[.is-vertical]:-mt-4 group-[.is-vertical]:flex-col"><div aria-roledescription="slide" class="min-w-0 shrink-0 grow-0 basis-full group-[.is-horizontal]:pl-4 group-[.is-vertical]:pt-4" role="group">1</div><div aria-roledescription="slide" class="min-w-0 shrink-0 grow-0 basis-full group-[.is-horizontal]:pl-4 group-[.is-vertical]:pt-4" role="group">2</div></div></div><button class="whitespace-nowrap inline-flex items-center justify-center font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground absolute h-8 w-8 rounded-full group-[.is-horizontal]:-left-12 group-[.is-horizontal]:top-1/2 group-[.is-horizontal]:-translate-y-1/2 group-[.is-vertical]:-top-12 group-[.is-vertical]:left-1/2 group-[.is-vertical]:-translate-x-1/2 group-[.is-vertical]:rotate-90" data-action="click-&gt;ruby-ui--carousel#scrollPrev" data-ruby-ui--carousel-target="prevButton" disabled type="button"><svg class="w-4 h-4" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg><span class="sr-only">Next slide</span></button><button class="whitespace-nowrap inline-flex items-center justify-center font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground absolute h-8 w-8 rounded-full group-[.is-horizontal]:-right-12 group-[.is-horizontal]:top-1/2 group-[.is-horizontal]:-translate-y-1/2 group-[.is-vertical]:-bottom-12 group-[.is-vertical]:left-1/2 group-[.is-vertical]:-translate-x-1/2 group-[.is-vertical]:rotate-90" data-action="click-&gt;ruby-ui--carousel#scrollNext" data-ruby-ui--carousel-target="nextButton" disabled type="button"><svg class="w-4 h-4" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/carousel/vertical.html b/gem/test/golden/strict/carousel/vertical.html
new file mode 100644
index 00000000..84af8e33
--- /dev/null
+++ b/gem/test/golden/strict/carousel/vertical.html
@@ -0,0 +1 @@
+<div aria-roledescription="carousel" class="relative group is-vertical" data-action="keydown.right-&gt;ruby-ui--carousel#scrollNext:prevent keydown.left-&gt;ruby-ui--carousel#scrollPrev:prevent" data-controller="ruby-ui--carousel" data-ruby-ui--carousel-options-value="{&quot;axis&quot;:&quot;y&quot;}" role="region"><div class="overflow-hidden" data-ruby-ui--carousel-target="viewport"><div class="flex group-[.is-horizontal]:-ml-4 group-[.is-vertical]:-mt-4 group-[.is-vertical]:flex-col"><div aria-roledescription="slide" class="min-w-0 shrink-0 grow-0 basis-full group-[.is-horizontal]:pl-4 group-[.is-vertical]:pt-4" role="group">1</div><div aria-roledescription="slide" class="min-w-0 shrink-0 grow-0 basis-full group-[.is-horizontal]:pl-4 group-[.is-vertical]:pt-4" role="group">2</div></div></div><button class="whitespace-nowrap inline-flex items-center justify-center font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground absolute h-8 w-8 rounded-full group-[.is-horizontal]:-left-12 group-[.is-horizontal]:top-1/2 group-[.is-horizontal]:-translate-y-1/2 group-[.is-vertical]:-top-12 group-[.is-vertical]:left-1/2 group-[.is-vertical]:-translate-x-1/2 group-[.is-vertical]:rotate-90" data-action="click-&gt;ruby-ui--carousel#scrollPrev" data-ruby-ui--carousel-target="prevButton" disabled type="button"><svg class="w-4 h-4" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg><span class="sr-only">Next slide</span></button><button class="whitespace-nowrap inline-flex items-center justify-center font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground absolute h-8 w-8 rounded-full group-[.is-horizontal]:-right-12 group-[.is-horizontal]:top-1/2 group-[.is-horizontal]:-translate-y-1/2 group-[.is-vertical]:-bottom-12 group-[.is-vertical]:left-1/2 group-[.is-vertical]:-translate-x-1/2 group-[.is-vertical]:rotate-90" data-action="click-&gt;ruby-ui--carousel#scrollNext" data-ruby-ui--carousel-target="nextButton" disabled type="button"><svg class="w-4 h-4" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/carousel/with_options.html b/gem/test/golden/strict/carousel/with_options.html
new file mode 100644
index 00000000..e0c5d7d0
--- /dev/null
+++ b/gem/test/golden/strict/carousel/with_options.html
@@ -0,0 +1 @@
+<div aria-roledescription="carousel" class="relative group is-horizontal" data-action="keydown.right-&gt;ruby-ui--carousel#scrollNext:prevent keydown.left-&gt;ruby-ui--carousel#scrollPrev:prevent" data-controller="ruby-ui--carousel" data-ruby-ui--carousel-options-value="{&quot;axis&quot;:&quot;x&quot;,&quot;loop&quot;:true,&quot;align&quot;:&quot;start&quot;}" role="region"><div class="overflow-hidden" data-ruby-ui--carousel-target="viewport"><div class="flex group-[.is-horizontal]:-ml-4 group-[.is-vertical]:-mt-4 group-[.is-vertical]:flex-col"><div aria-roledescription="slide" class="min-w-0 shrink-0 grow-0 basis-full group-[.is-horizontal]:pl-4 group-[.is-vertical]:pt-4" role="group">1</div></div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/chart/bar.html b/gem/test/golden/strict/chart/bar.html
new file mode 100644
index 00000000..0256ed20
--- /dev/null
+++ b/gem/test/golden/strict/chart/bar.html
@@ -0,0 +1 @@
+<canvas data-controller="ruby-ui--chart" data-ruby-ui--chart-options-value="{&quot;type&quot;:&quot;bar&quot;,&quot;data&quot;:{&quot;labels&quot;:[&quot;Phlex&quot;,&quot;ERB&quot;],&quot;datasets&quot;:[{&quot;label&quot;:&quot;render time (ms)&quot;,&quot;data&quot;:[100,520]}]},&quot;options&quot;:{&quot;indexAxis&quot;:&quot;y&quot;,&quot;scales&quot;:{&quot;y&quot;:{&quot;beginAtZero&quot;:true}}}}"></canvas>
\ No newline at end of file
diff --git a/gem/test/golden/strict/checkbox/checked_disabled.html b/gem/test/golden/strict/checkbox/checked_disabled.html
new file mode 100644
index 00000000..d51e6ad4
--- /dev/null
+++ b/gem/test/golden/strict/checkbox/checked_disabled.html
@@ -0,0 +1 @@
+<input checked class="peer h-4 w-4 shrink-0 rounded-sm border-input ring-offset-background accent-primary disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary dark:checked:bg-secondary checked:text-primary checked:border-primary aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" data-action="change-&gt;ruby-ui--checkbox-group#onChange change-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--checkbox-group-target="checkbox" data-ruby-ui--form-field-target="input" disabled name="terms" type="checkbox">
\ No newline at end of file
diff --git a/gem/test/golden/strict/checkbox/default.html b/gem/test/golden/strict/checkbox/default.html
new file mode 100644
index 00000000..b4a22b5e
--- /dev/null
+++ b/gem/test/golden/strict/checkbox/default.html
@@ -0,0 +1 @@
+<input class="peer h-4 w-4 shrink-0 rounded-sm border-input ring-offset-background accent-primary disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary dark:checked:bg-secondary checked:text-primary checked:border-primary aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" data-action="change-&gt;ruby-ui--checkbox-group#onChange change-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--checkbox-group-target="checkbox" data-ruby-ui--form-field-target="input" name="terms" type="checkbox" value="1">
\ No newline at end of file
diff --git a/gem/test/golden/strict/checkbox/group.html b/gem/test/golden/strict/checkbox/group.html
new file mode 100644
index 00000000..e5977fd8
--- /dev/null
+++ b/gem/test/golden/strict/checkbox/group.html
@@ -0,0 +1 @@
+<div data-controller="ruby-ui--checkbox-group" role="group"><input class="peer h-4 w-4 shrink-0 rounded-sm border-input ring-offset-background accent-primary disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary dark:checked:bg-secondary checked:text-primary checked:border-primary aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" data-action="change-&gt;ruby-ui--checkbox-group#onChange change-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--checkbox-group-target="checkbox" data-ruby-ui--form-field-target="input" name="colors[]" type="checkbox" value="red"><input class="peer h-4 w-4 shrink-0 rounded-sm border-input ring-offset-background accent-primary disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary dark:checked:bg-secondary checked:text-primary checked:border-primary aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" data-action="change-&gt;ruby-ui--checkbox-group#onChange change-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--checkbox-group-target="checkbox" data-ruby-ui--form-field-target="input" name="colors[]" type="checkbox" value="blue"></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/clipboard/custom_source_and_trigger.html b/gem/test/golden/strict/clipboard/custom_source_and_trigger.html
new file mode 100644
index 00000000..b8d8432e
--- /dev/null
+++ b/gem/test/golden/strict/clipboard/custom_source_and_trigger.html
@@ -0,0 +1 @@
+<div data-action="click@window-&gt;ruby-ui--clipboard#onClickOutside" data-controller="ruby-ui--clipboard" data-ruby-ui--clipboard-error-value="Falhou!" data-ruby-ui--clipboard-options-value="{}" data-ruby-ui--clipboard-success-value="Copiado!"><div><div data-ruby-ui--clipboard-target="source">gem install ruby_ui</div><div data-action="click-&gt;ruby-ui--clipboard#copy" data-ruby-ui--clipboard-target="trigger"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed h-9 w-9 bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">C</button></div></div><div class="hidden" data-ruby-ui--clipboard-target="successPopover" style="width: max-content; position: absolute; top: 0; left: 0;"><div class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 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" data-ruby-ui--clipboard-target="successPanel" data-state="open">Copiado!</div></div><div class="hidden" data-ruby-ui--clipboard-target="errorPopover" style="width: max-content; position: absolute; top: 0; left: 0;"><div class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 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" data-ruby-ui--clipboard-target="errorPanel" data-state="open">Falhou!</div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/clipboard/default.html b/gem/test/golden/strict/clipboard/default.html
new file mode 100644
index 00000000..52bf67a2
--- /dev/null
+++ b/gem/test/golden/strict/clipboard/default.html
@@ -0,0 +1 @@
+<div data-action="click@window-&gt;ruby-ui--clipboard#onClickOutside" data-controller="ruby-ui--clipboard" data-ruby-ui--clipboard-error-value="Copy Failed!" data-ruby-ui--clipboard-options-value="{}" data-ruby-ui--clipboard-success-value="Copied!"><div></div><div class="hidden" data-ruby-ui--clipboard-target="successPopover" style="width: max-content; position: absolute; top: 0; left: 0;"><div class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 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" data-ruby-ui--clipboard-target="successPanel" data-state="open">Copied!</div></div><div class="hidden" data-ruby-ui--clipboard-target="errorPopover" style="width: max-content; position: absolute; top: 0; left: 0;"><div class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 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" data-ruby-ui--clipboard-target="errorPanel" data-state="open">Copy Failed!</div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/clipboard/popover_error.html b/gem/test/golden/strict/clipboard/popover_error.html
new file mode 100644
index 00000000..1df96ed3
--- /dev/null
+++ b/gem/test/golden/strict/clipboard/popover_error.html
@@ -0,0 +1 @@
+<div class="hidden" data-ruby-ui--clipboard-target="errorPopover" style="width: max-content; position: absolute; top: 0; left: 0;"><div class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 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" data-ruby-ui--clipboard-target="errorPanel" data-state="open">error</div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/clipboard/popover_success.html b/gem/test/golden/strict/clipboard/popover_success.html
new file mode 100644
index 00000000..0dcaecf6
--- /dev/null
+++ b/gem/test/golden/strict/clipboard/popover_success.html
@@ -0,0 +1 @@
+<div class="hidden" data-ruby-ui--clipboard-target="successPopover" style="width: max-content; position: absolute; top: 0; left: 0;"><div class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 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" data-ruby-ui--clipboard-target="successPanel" data-state="open">success</div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/codeblock/ruby_with_clipboard.html b/gem/test/golden/strict/codeblock/ruby_with_clipboard.html
new file mode 100644
index 00000000..6fe64683
--- /dev/null
+++ b/gem/test/golden/strict/codeblock/ruby_with_clipboard.html
@@ -0,0 +1,119 @@
+<style>.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w {
+  color: #c9d1d9;
+  background-color: #161b22;
+}
+.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
+  color: #ff7b72;
+}
+.highlight .gr {
+  color: #f0f6fc;
+}
+.highlight .gd {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+.highlight .nb {
+  color: #ffa657;
+}
+.highlight .nc {
+  color: #ffa657;
+}
+.highlight .no {
+  color: #ffa657;
+}
+.highlight .nn {
+  color: #ffa657;
+}
+.highlight .sr {
+  color: #7ee787;
+}
+.highlight .na {
+  color: #7ee787;
+}
+.highlight .nt {
+  color: #7ee787;
+}
+.highlight .gi {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+.highlight .ges {
+  font-weight: bold;
+  font-style: italic;
+}
+.highlight .kc {
+  color: #79c0ff;
+}
+.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
+  color: #79c0ff;
+}
+.highlight .sb {
+  color: #79c0ff;
+}
+.highlight .bp {
+  color: #79c0ff;
+}
+.highlight .ne {
+  color: #79c0ff;
+}
+.highlight .nl {
+  color: #79c0ff;
+}
+.highlight .py {
+  color: #79c0ff;
+}
+.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
+  color: #79c0ff;
+}
+.highlight .o, .highlight .ow {
+  color: #79c0ff;
+}
+.highlight .gh {
+  color: #1f6feb;
+  font-weight: bold;
+}
+.highlight .gu {
+  color: #1f6feb;
+  font-weight: bold;
+}
+.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
+  color: #a5d6ff;
+}
+.highlight .nd {
+  color: #d2a8ff;
+}
+.highlight .nf, .highlight .fm {
+  color: #d2a8ff;
+}
+.highlight .err {
+  color: #f0f6fc;
+  background-color: #8e1519;
+}
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
+  color: #8b949e;
+}
+.highlight .gl {
+  color: #8b949e;
+}
+.highlight .gt {
+  color: #8b949e;
+}
+.highlight .ni {
+  color: #c9d1d9;
+}
+.highlight .si {
+  color: #c9d1d9;
+}
+.highlight .ge {
+  color: #c9d1d9;
+  font-style: italic;
+}
+.highlight .gs {
+  color: #c9d1d9;
+  font-weight: bold;
+}</style><div class="relative" data-action="click@window-&gt;ruby-ui--clipboard#onClickOutside" data-controller="ruby-ui--clipboard" data-ruby-ui--clipboard-error-value="Copy failed!" data-ruby-ui--clipboard-options-value="{}" data-ruby-ui--clipboard-success-value="Copied!"><div><div data-ruby-ui--clipboard-target="source"><div class="highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&amp;_pre]:p-4" style="tab-size: 2;"><div class="after:content-none"><pre><span class="k">def</span> <span class="nf">hello_world</span>
+	<span class="nb">puts</span> <span class="s2">"Hello, world!"</span>
+<span class="k">end</span>
+</pre></div></div></div><div class="absolute top-2 right-2"><div data-action="click-&gt;ruby-ui--clipboard#copy" data-ruby-ui--clipboard-target="trigger"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed h-6 w-6 text-white hover:text-white hover:bg-white/20" type="button"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div></div></div><div class="hidden" data-ruby-ui--clipboard-target="successPopover" style="width: max-content; position: absolute; top: 0; left: 0;"><div class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 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" data-ruby-ui--clipboard-target="successPanel" data-state="open">Copied!</div></div><div class="hidden" data-ruby-ui--clipboard-target="errorPopover" style="width: max-content; position: absolute; top: 0; left: 0;"><div class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 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" data-ruby-ui--clipboard-target="errorPanel" data-state="open">Copy failed!</div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/codeblock/ruby_without_clipboard.html b/gem/test/golden/strict/codeblock/ruby_without_clipboard.html
new file mode 100644
index 00000000..be01b9bf
--- /dev/null
+++ b/gem/test/golden/strict/codeblock/ruby_without_clipboard.html
@@ -0,0 +1,117 @@
+<style>.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w {
+  color: #c9d1d9;
+  background-color: #161b22;
+}
+.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
+  color: #ff7b72;
+}
+.highlight .gr {
+  color: #f0f6fc;
+}
+.highlight .gd {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+.highlight .nb {
+  color: #ffa657;
+}
+.highlight .nc {
+  color: #ffa657;
+}
+.highlight .no {
+  color: #ffa657;
+}
+.highlight .nn {
+  color: #ffa657;
+}
+.highlight .sr {
+  color: #7ee787;
+}
+.highlight .na {
+  color: #7ee787;
+}
+.highlight .nt {
+  color: #7ee787;
+}
+.highlight .gi {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+.highlight .ges {
+  font-weight: bold;
+  font-style: italic;
+}
+.highlight .kc {
+  color: #79c0ff;
+}
+.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
+  color: #79c0ff;
+}
+.highlight .sb {
+  color: #79c0ff;
+}
+.highlight .bp {
+  color: #79c0ff;
+}
+.highlight .ne {
+  color: #79c0ff;
+}
+.highlight .nl {
+  color: #79c0ff;
+}
+.highlight .py {
+  color: #79c0ff;
+}
+.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
+  color: #79c0ff;
+}
+.highlight .o, .highlight .ow {
+  color: #79c0ff;
+}
+.highlight .gh {
+  color: #1f6feb;
+  font-weight: bold;
+}
+.highlight .gu {
+  color: #1f6feb;
+  font-weight: bold;
+}
+.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
+  color: #a5d6ff;
+}
+.highlight .nd {
+  color: #d2a8ff;
+}
+.highlight .nf, .highlight .fm {
+  color: #d2a8ff;
+}
+.highlight .err {
+  color: #f0f6fc;
+  background-color: #8e1519;
+}
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
+  color: #8b949e;
+}
+.highlight .gl {
+  color: #8b949e;
+}
+.highlight .gt {
+  color: #8b949e;
+}
+.highlight .ni {
+  color: #c9d1d9;
+}
+.highlight .si {
+  color: #c9d1d9;
+}
+.highlight .ge {
+  color: #c9d1d9;
+  font-style: italic;
+}
+.highlight .gs {
+  color: #c9d1d9;
+  font-weight: bold;
+}</style><div class="highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&amp;_pre]:p-4" style="tab-size: 2;"><div class="after:content-none"><pre><span class="nb">puts</span> <span class="ss">:ok</span>
+</pre></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/collapsible/closed.html b/gem/test/golden/strict/collapsible/closed.html
new file mode 100644
index 00000000..2bcf163f
--- /dev/null
+++ b/gem/test/golden/strict/collapsible/closed.html
@@ -0,0 +1 @@
+<div data-controller="ruby-ui--collapsible"><div data-action="click-&gt;ruby-ui--collapsible#toggle"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" type="button">Toggle</button></div><div class="overflow-y-hidden" data-ruby-ui--collapsible-target="content">Hidden body</div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/collapsible/open.html b/gem/test/golden/strict/collapsible/open.html
new file mode 100644
index 00000000..f76439c2
--- /dev/null
+++ b/gem/test/golden/strict/collapsible/open.html
@@ -0,0 +1 @@
+<div data-controller="ruby-ui--collapsible" data-ruby-ui--collapsible-open-value=""><div data-action="click-&gt;ruby-ui--collapsible#toggle"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" type="button">Toggle</button></div><div class="overflow-y-hidden" data-ruby-ui--collapsible-target="content">Visible body</div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/combobox/badge.html b/gem/test/golden/strict/combobox/badge.html
new file mode 100644
index 00000000..297f6d71
--- /dev/null
+++ b/gem/test/golden/strict/combobox/badge.html
@@ -0,0 +1 @@
+<span class="inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-xs font-medium text-secondary-foreground">Rails</span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/combobox/clear_button.html b/gem/test/golden/strict/combobox/clear_button.html
new file mode 100644
index 00000000..8b843d2f
--- /dev/null
+++ b/gem/test/golden/strict/combobox/clear_button.html
@@ -0,0 +1 @@
+<button aria-label="Clear selection" class="ml-auto shrink-0 rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring hidden" data-action="ruby-ui--combobox#clearAll" data-ruby-ui--combobox-target="clearButton" type="button"><svg class="size-3.5" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/combobox/input_trigger.html b/gem/test/golden/strict/combobox/input_trigger.html
new file mode 100644
index 00000000..b431f85d
--- /dev/null
+++ b/gem/test/golden/strict/combobox/input_trigger.html
@@ -0,0 +1 @@
+<div aria-expanded="false" aria-haspopup="listbox" class="flex h-9 w-full items-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 aria-invalid:border-destructive" data-action="click-&gt;ruby-ui--combobox#openPopover focusin-&gt;ruby-ui--combobox#openPopover" data-placeholder="Pick one" data-ruby-ui--combobox-target="trigger"><input autocomplete="off" autocorrect="off" class="flex-1 border-0 px-0 bg-transparent outline-none focus:ring-0 placeholder:text-muted-foreground text-sm disabled:cursor-not-allowed" data-action="keyup-&gt;ruby-ui--combobox#filterItems input-&gt;ruby-ui--combobox#filterItems" data-ruby-ui--combobox-target="inputTrigger" placeholder="Pick one" spellcheck="false" type="text"><span class="shrink-0 flex items-center justify-center size-6 rounded-sm hover:bg-muted hover:text-foreground"><svg class="pointer-events-none size-4 text-muted-foreground" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"></path></svg></span></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/combobox/multiple_with_badges.html b/gem/test/golden/strict/combobox/multiple_with_badges.html
new file mode 100644
index 00000000..f3243286
--- /dev/null
+++ b/gem/test/golden/strict/combobox/multiple_with_badges.html
@@ -0,0 +1 @@
+<div data-action="turbo:morph@window-&gt;ruby-ui--combobox#updateTriggerContent" data-controller="ruby-ui--combobox" data-ruby-ui--combobox-placement-value="top-start" data-ruby-ui--combobox-term-value="frameworks" multiple role="combobox"><div aria-expanded="false" aria-haspopup="listbox" class="flex h-9 w-full flex-wrap items-center gap-1 rounded-md border border-input bg-background px-3 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 cursor-text" data-action="click-&gt;ruby-ui--combobox#openPopover focusin-&gt;ruby-ui--combobox#openPopover" data-ruby-ui--combobox-target="trigger"><div class="hidden" data-ruby-ui--combobox-target="badgeContainer"></div><input autocomplete="off" autocorrect="off" class="flex-1 min-w-8 bg-transparent border-0 px-0 outline-none focus:ring-0 placeholder:text-muted-foreground text-sm" data-action="keyup-&gt;ruby-ui--combobox#filterItems input-&gt;ruby-ui--combobox#filterItems keydown.backspace-&gt;ruby-ui--combobox#handleBadgeInputBackspace" data-ruby-ui--combobox-target="badgeInput" placeholder="Select" spellcheck="false" type="text"><button aria-label="Clear selection" class="ml-auto shrink-0 rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring hidden" data-action="ruby-ui--combobox#clearAll" data-ruby-ui--combobox-target="clearButton" type="button"><svg class="size-3.5" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div><div autofocus class="inset-auto m-0 absolute border bg-background shadow-lg rounded-lg" data-action="toggle-&gt;ruby-ui--combobox#handlePopoverToggle keydown.down-&gt;ruby-ui--combobox#keyDownPressed keydown.up-&gt;ruby-ui--combobox#keyUpPressed keydown.enter-&gt;ruby-ui--combobox#keyEnterPressed keydown.esc-&gt;ruby-ui--combobox#closePopover:prevent resize@window-&gt;ruby-ui--combobox#updatePopoverWidth" data-ruby-ui--combobox-target="popover" popover="" role="popover"><div class="flex flex-col gap-1 p-1 max-h-72 overflow-y-auto text-foreground" role="listbox"><input class="peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary checked:text-primary-foreground aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" data-action="change-&gt;ruby-ui--combobox#toggleAllItems" data-ruby-ui--combobox-target="toggleAll" type="checkbox"><label class="flex flex-row w-full text-wrap [&amp;&gt;span,&amp;&gt;div]:truncate gap-2 items-center rounded-sm text-sm outline-none cursor-pointer select-none has-[:checked]:bg-accent hover:bg-accent p-2 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 aria-[current=true]:bg-accent aria-[current=true]:ring aria-[current=true]:ring-offset-2 has-disabled:opacity-50 has-disabled:cursor-not-allowed" data-ruby-ui--combobox-target="item" role="option"><input class="peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary checked:text-primary-foreground aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" data-action="ruby-ui--combobox#inputChanged change-&gt;ruby-ui--checkbox-group#onChange change-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--checkbox-group-target="checkbox" data-ruby-ui--combobox-target="input" data-ruby-ui--form-field-target="input" name="Rails" type="checkbox" value="rails"><svg class="ml-auto size-4 shrink-0 opacity-0 peer-checked:opacity-100" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6 9 17l-5-5"></path></svg></label></div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/combobox/radio_items.html b/gem/test/golden/strict/combobox/radio_items.html
new file mode 100644
index 00000000..68fb45f3
--- /dev/null
+++ b/gem/test/golden/strict/combobox/radio_items.html
@@ -0,0 +1 @@
+<div data-action="turbo:morph@window-&gt;ruby-ui--combobox#updateTriggerContent" data-controller="ruby-ui--combobox" data-ruby-ui--combobox-placement-value="bottom-start" data-ruby-ui--combobox-term-value="frameworks" role="combobox"><button aria-expanded="false" aria-haspopup="listbox" class="flex w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors border border-input bg-background h-9 px-4 py-2 justify-between hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" data-action="ruby-ui--combobox#togglePopover" data-placeholder="Select your framework" data-ruby-ui--combobox-target="trigger" type="button"><span class="truncate" data-ruby-ui--combobox-target="triggerContent">Select your framework</span><svg class="ml-2 h-4 w-4 shrink-0 opacity-50" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"></path></svg></button><div autofocus class="inset-auto m-0 absolute border bg-background shadow-lg rounded-lg" data-action="toggle-&gt;ruby-ui--combobox#handlePopoverToggle keydown.down-&gt;ruby-ui--combobox#keyDownPressed keydown.up-&gt;ruby-ui--combobox#keyUpPressed keydown.enter-&gt;ruby-ui--combobox#keyEnterPressed keydown.esc-&gt;ruby-ui--combobox#closePopover:prevent resize@window-&gt;ruby-ui--combobox#updatePopoverWidth" data-ruby-ui--combobox-target="popover" popover="" role="popover"><div class="flex text-muted-foreground items-center border-b px-3"><svg class="mr-2 h-4 w-4 shrink-0 opacity-50" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg><input autocomplete="off" autocorrect="off" class="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none focus:ring-0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" data-action="keyup-&gt;ruby-ui--combobox#filterItems search-&gt;ruby-ui--combobox#filterItems" data-ruby-ui--combobox-target="searchInput" placeholder="Type the framework name" role="searchbox" spellcheck="false" type="search"></div><div class="flex flex-col gap-1 p-1 max-h-72 overflow-y-auto text-foreground" role="listbox"><div class="hidden py-6 text-center text-sm" data-ruby-ui--combobox-target="emptyState" role="presentation">No results</div><div class="hidden has-[label:not(.hidden)]:flex flex-col py-1 gap-1 border-b before:content-[attr(label)] before:px-2 before:py-1.5 before:text-xs before:font-medium before:text-muted-foreground before:not-italic" label="Ruby" role="group"><label class="flex flex-row w-full text-wrap [&amp;&gt;span,&amp;&gt;div]:truncate gap-2 items-center rounded-sm text-sm outline-none cursor-pointer select-none has-[:checked]:bg-accent hover:bg-accent p-2 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 aria-[current=true]:bg-accent aria-[current=true]:ring aria-[current=true]:ring-offset-2 has-disabled:opacity-50 has-disabled:cursor-not-allowed" data-ruby-ui--combobox-target="item" role="option"><input class="aspect-square h-4 w-4 rounded-full border border-primary accent-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary checked:text-primary-foreground aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" data-action="ruby-ui--combobox#inputChanged input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--combobox-target="input" data-ruby-ui--form-field-target="input" name="Rails" type="radio" value="rails"></label><label class="flex flex-row w-full text-wrap [&amp;&gt;span,&amp;&gt;div]:truncate gap-2 items-center rounded-sm text-sm outline-none cursor-pointer select-none has-[:checked]:bg-accent hover:bg-accent p-2 [&amp;&gt;svg]:pointer-events-none [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 aria-[current=true]:bg-accent aria-[current=true]:ring aria-[current=true]:ring-offset-2 has-disabled:opacity-50 has-disabled:cursor-not-allowed" data-ruby-ui--combobox-target="item" role="option"><input class="aspect-square h-4 w-4 rounded-full border border-primary accent-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary checked:text-primary-foreground aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" data-action="ruby-ui--combobox#inputChanged input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--combobox-target="input" data-ruby-ui--form-field-target="input" name="Hanami" type="radio" value="hanami"></label></div></div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/command/dialog.html b/gem/test/golden/strict/command/dialog.html
new file mode 100644
index 00000000..913b43a9
--- /dev/null
+++ b/gem/test/golden/strict/command/dialog.html
@@ -0,0 +1 @@
+<div data-controller="ruby-ui--command-dialog" data-ruby-ui--command-dialog-ruby-ui--command-outlet="[data-ruby-ui--command-dialog-instance]"><div data-action="click-&gt;ruby-ui--command-dialog#open keydown.ctrl+k@window-&gt;ruby-ui--command-dialog#open keydown.meta+k@window-&gt;ruby-ui--command-dialog#open"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" type="button"><kbd class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">K</kbd></button></div><template data-ruby-ui--command-dialog-target="content"><div data-controller="ruby-ui--command" data-ruby-ui--command-dialog-instance=""><div class="fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm 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]:fill-mode-forwards" data-action="click-&gt;ruby-ui--command#dismiss esc-&gt;ruby-ui--command#dismiss" data-ruby-ui--command-target="backdrop" data-state="open"></div><div class="fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full max-w-lg" data-ruby-ui--command-target="panel" data-state="open"><div><div class="flex items-center border-b px-3"><svg class="w-4 h-4 mr-1.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" fill-rule="evenodd"></path></svg><input aria-autocomplete="list" aria-expanded="" autocomplete="off" autocorrect="off" autofocus class="flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" data-action="input-&gt;ruby-ui--command#filter keydown.down-&gt;ruby-ui--command#handleKeydown keydown.up-&gt;ruby-ui--command#handleKeydown keydown.enter-&gt;ruby-ui--command#handleKeydown keydown.esc-&gt;ruby-ui--command#dismiss" data-ruby-ui--command-target="input" placeholder="Type a command or search..." role="combobox" value=""></div><div class="py-6 text-center text-sm" data-ruby-ui--command-target="empty" role="presentation">No results found.</div><div class="divide-y divide-border"><div class="overflow-hidden p-1 text-foreground [&amp;_[group-heading]]:px-2 [&amp;_[group-heading]]:py-1.5 [&amp;_[group-heading]]:text-xs [&amp;_[group-heading]]:font-medium [&amp;_[group-heading]]:text-muted-foreground" data-ruby-ui--command-target="group" data-value="Components" role="presentation"><div group-heading="Components">Components</div><div group-items="" role="group"><a class="relative flex cursor-pointer select-none items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50" data-ruby-ui--command-target="item" data-text="" data-value="Accordion" href="/docs/accordion" role="option">Accordion</a><a class="relative flex cursor-pointer select-none items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50" data-ruby-ui--command-target="item" data-text="" data-value="Alert" href="/docs/alert" role="option">Alert</a></div></div></div></div></div></div></template></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/command/dialog_content_lg.html b/gem/test/golden/strict/command/dialog_content_lg.html
new file mode 100644
index 00000000..17cbd4ea
--- /dev/null
+++ b/gem/test/golden/strict/command/dialog_content_lg.html
@@ -0,0 +1 @@
+<template data-ruby-ui--command-dialog-target="content"><div data-controller="ruby-ui--command" data-ruby-ui--command-dialog-instance=""><div class="fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm 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]:fill-mode-forwards" data-action="click-&gt;ruby-ui--command#dismiss esc-&gt;ruby-ui--command#dismiss" data-ruby-ui--command-target="backdrop" data-state="open"></div><div class="fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full max-w-2xl" data-ruby-ui--command-target="panel" data-state="open">body</div></div></template>
\ No newline at end of file
diff --git a/gem/test/golden/strict/command/dialog_content_md.html b/gem/test/golden/strict/command/dialog_content_md.html
new file mode 100644
index 00000000..a6abdfad
--- /dev/null
+++ b/gem/test/golden/strict/command/dialog_content_md.html
@@ -0,0 +1 @@
+<template data-ruby-ui--command-dialog-target="content"><div data-controller="ruby-ui--command" data-ruby-ui--command-dialog-instance=""><div class="fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm 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]:fill-mode-forwards" data-action="click-&gt;ruby-ui--command#dismiss esc-&gt;ruby-ui--command#dismiss" data-ruby-ui--command-target="backdrop" data-state="open"></div><div class="fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full max-w-lg" data-ruby-ui--command-target="panel" data-state="open">body</div></div></template>
\ No newline at end of file
diff --git a/gem/test/golden/strict/command/dialog_content_sm.html b/gem/test/golden/strict/command/dialog_content_sm.html
new file mode 100644
index 00000000..ad601268
--- /dev/null
+++ b/gem/test/golden/strict/command/dialog_content_sm.html
@@ -0,0 +1 @@
+<template data-ruby-ui--command-dialog-target="content"><div data-controller="ruby-ui--command" data-ruby-ui--command-dialog-instance=""><div class="fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm 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]:fill-mode-forwards" data-action="click-&gt;ruby-ui--command#dismiss esc-&gt;ruby-ui--command#dismiss" data-ruby-ui--command-target="backdrop" data-state="open"></div><div class="fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full max-w-md" data-ruby-ui--command-target="panel" data-state="open">body</div></div></template>
\ No newline at end of file
diff --git a/gem/test/golden/strict/command/trigger_with_custom_keybindings.html b/gem/test/golden/strict/command/trigger_with_custom_keybindings.html
new file mode 100644
index 00000000..ec479fba
--- /dev/null
+++ b/gem/test/golden/strict/command/trigger_with_custom_keybindings.html
@@ -0,0 +1 @@
+<div data-action="click-&gt;ruby-ui--command-dialog#open ctrl+p-&gt;ruby-ui--command-dialog#open">Open</div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/context_menu/default.html b/gem/test/golden/strict/context_menu/default.html
new file mode 100644
index 00000000..ddd839eb
--- /dev/null
+++ b/gem/test/golden/strict/context_menu/default.html
@@ -0,0 +1 @@
+<div data-controller="ruby-ui--context-menu" data-ruby-ui--context-menu-options-value="{&quot;trigger&quot;:&quot;manual&quot;}"><div data-action="contextmenu-&gt;ruby-ui--context-menu#handleContextMenu" data-ruby-ui--context-menu-target="trigger">Right click here</div><div aria-orientation="vertical" class="hidden absolute z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[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 w-64" data-orientation="vertical" data-ruby-ui--context-menu-target="content" data-state="closed" role="menu" tabindex="-1"><a class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pl-8" data-action="click-&gt;ruby-ui--context-menu#close" data-orientation="vertical" data-ruby-ui--context-menu-target="menuItem" href="#" role="menuitem" tabindex="-1">Back<span class="ml-auto text-xs tracking-widest text-muted-foreground">[</span></a><a class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pl-8" data-action="click-&gt;ruby-ui--context-menu#close" data-disabled="" data-orientation="vertical" data-ruby-ui--context-menu-target="menuItem" disabled href="#" role="menuitem" tabindex="-1">Forward<span class="ml-auto text-xs tracking-widest text-muted-foreground">]</span></a><div aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border" role="separator"></div><a class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pl-8" data-action="click-&gt;ruby-ui--context-menu#close" data-orientation="vertical" data-ruby-ui--context-menu-target="menuItem" href="#" role="menuitem" tabindex="-1"><span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"><span data-state="checked"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z" fill="currentColor" fill-rule="evenodd"></path></svg></span></span>Show Bookmarks Bar</a></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/context_menu/label_flush.html b/gem/test/golden/strict/context_menu/label_flush.html
new file mode 100644
index 00000000..6b7d94f2
--- /dev/null
+++ b/gem/test/golden/strict/context_menu/label_flush.html
@@ -0,0 +1 @@
+<div class="px-2 py-1.5 text-sm font-semibold text-foreground">More Tools</div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/context_menu/label_inset.html b/gem/test/golden/strict/context_menu/label_inset.html
new file mode 100644
index 00000000..ec5c5766
--- /dev/null
+++ b/gem/test/golden/strict/context_menu/label_inset.html
@@ -0,0 +1 @@
+<div class="px-2 py-1.5 text-sm font-semibold text-foreground pl-8">More Tools</div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/context_menu/with_options.html b/gem/test/golden/strict/context_menu/with_options.html
new file mode 100644
index 00000000..b8215077
--- /dev/null
+++ b/gem/test/golden/strict/context_menu/with_options.html
@@ -0,0 +1 @@
+<div data-controller="ruby-ui--context-menu" data-ruby-ui--context-menu-options-value="{&quot;placement&quot;:&quot;right-start&quot;,&quot;trigger&quot;:&quot;manual&quot;}"><div data-action="contextmenu-&gt;ruby-ui--context-menu#handleContextMenu" data-ruby-ui--context-menu-target="trigger">Target</div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/data_table/expand_toggle_expanded.html b/gem/test/golden/strict/data_table/expand_toggle_expanded.html
new file mode 100644
index 00000000..bfcccc15
--- /dev/null
+++ b/gem/test/golden/strict/data_table/expand_toggle_expanded.html
@@ -0,0 +1 @@
+<button aria-controls="row-1" aria-expanded="true" aria-label="Toggle" class="group inline-flex items-center justify-center h-8 w-8 rounded-md hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" data-action="click-&gt;ruby-ui--data-table#toggleRowDetail" type="button"><svg class="h-4 w-4 transition-transform duration-150 group-aria-expanded:rotate-90" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><polyline points="9 18 15 12 9 6"></polyline></svg></button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/data_table/full_frame.html b/gem/test/golden/strict/data_table/full_frame.html
new file mode 100644
index 00000000..336fd5d3
--- /dev/null
+++ b/gem/test/golden/strict/data_table/full_frame.html
@@ -0,0 +1 @@
+<turbo-frame id="employees" target="_top"><div class="w-full space-y-4" data-controller="ruby-ui--data-table"><form action="/employees/bulk" id="employees_form" method="post"><input name="authenticity_token" type="hidden" value="csrf-token-placeholder"><div class="flex items-center justify-between gap-2"><form action="/employees" class="max-w-sm flex-1" data-action="input-&gt;ruby-ui--data-table-search#submit" data-controller="ruby-ui--data-table-search" data-ruby-ui--data-table-search-delay-value="300" data-turbo-frame="employees" method="get"><input autocomplete="off" class="flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] border-border ring-0 ring-ring/0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:border-ring focus-visible:shadow-sm" data-action="input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" name="search" placeholder="Search..." type="search" value="alice"></form><div class="relative" data-controller="ruby-ui--data-table-column-visibility"><div class="group/dropdown-menu is-absolute" data-action="click@window-&gt;ruby-ui--dropdown-menu#onClickOutside" data-controller="ruby-ui--dropdown-menu" data-ruby-ui--dropdown-menu-options-value="{}"><div class="inline-block" data-action="click-&gt;ruby-ui--dropdown-menu#toggle" data-ruby-ui--dropdown-menu-target="trigger"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-3 py-1.5 h-8 text-xs border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" type="button">Columns<svg class="w-4 h-4 ml-1" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><polyline points="6 9 12 15 18 9"></polyline></svg></button></div><div class="z-50 hidden group-[.is-absolute]/dropdown-menu:absolute group-[.is-fixed]/dropdown-menu:fixed" data-ruby-ui--dropdown-menu-target="content" style="width: max-content; top: 0; left: 0;"><div class="z-50 min-w-[8rem] rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[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 w-56" data-ruby-ui--dropdown-menu-target="panel" data-state="open"><label class="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer hover:bg-accent"><input checked class="h-4 w-4 rounded border border-input accent-primary cursor-pointer checked:bg-primary checked:text-primary-foreground dark:checked:bg-secondary checked:text-primary checked:border-primary" data-action="change-&gt;ruby-ui--data-table-column-visibility#toggle" data-column-key="email" type="checkbox"><span>Email</span></label><label class="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer hover:bg-accent"><input class="h-4 w-4 rounded border border-input accent-primary cursor-pointer checked:bg-primary checked:text-primary-foreground dark:checked:bg-secondary checked:text-primary checked:border-primary" data-action="change-&gt;ruby-ui--data-table-column-visibility#toggle" data-column-key="salary" type="checkbox"><span>Salary</span></label></div></div></div></div><div class="hidden items-center gap-2" data-ruby-ui--data-table-target="bulkActions"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-destructive text-white shadow-sm [a&amp;]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60" type="button">Delete</button></div></div><div class="relative w-full overflow-auto"><table class="w-full caption-bottom text-sm"><thead class="[&amp;_tr]:border-b"><tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"><th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px]"><input aria-label="Select all" class="peer h-4 w-4 shrink-0 rounded-sm border-input ring-offset-background accent-primary disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary dark:checked:bg-secondary checked:text-primary checked:border-primary aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" data-action="change-&gt;ruby-ui--checkbox-group#onChange change-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid change-&gt;ruby-ui--data-table#toggleAll" data-ruby-ui--checkbox-group-target="checkbox" data-ruby-ui--data-table-target="selectAll" data-ruby-ui--form-field-target="input" type="checkbox"></th><th class="h-10 px-2 text-left align-middle font-medium [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px] text-foreground whitespace-nowrap"><a class="inline-flex items-center gap-1 text-inherit no-underline hover:text-foreground transition-colors" href="/employees?search=alice&amp;sort=name&amp;direction=desc">Name<svg class="inline-block w-3 h-3" fill="none" height="12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><polyline points="18 15 12 9 6 15"></polyline></svg></a></th></tr></thead><tbody class="[&amp;_tr:last-child]:border-0"><tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"><td class="p-2 align-middle [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px]"><input aria-label="Select Alice" class="peer h-4 w-4 shrink-0 rounded-sm border-input ring-offset-background accent-primary disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary dark:checked:bg-secondary checked:text-primary checked:border-primary aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" data-action="change-&gt;ruby-ui--checkbox-group#onChange change-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid change-&gt;ruby-ui--data-table#toggleRow" data-ruby-ui--checkbox-group-target="checkbox" data-ruby-ui--data-table-target="rowCheckbox" data-ruby-ui--form-field-target="input" name="ids[]" type="checkbox" value="42"></td><td class="p-2 align-middle [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px]">Alice</td><td class="p-2 align-middle [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px]"><button aria-controls="employee-42-detail" aria-expanded="false" aria-label="Toggle row details" class="group inline-flex items-center justify-center h-8 w-8 rounded-md hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" data-action="click-&gt;ruby-ui--data-table#toggleRowDetail" type="button"><svg class="h-4 w-4 transition-transform duration-150 group-aria-expanded:rotate-90" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><polyline points="9 18 15 12 9 6"></polyline></svg></button></td></tr></tbody></table></div><div class="flex items-center justify-between gap-4 py-2"><div class="text-sm text-muted-foreground" data-ruby-ui--data-table-target="selectionSummary">0 of 10 row(s) selected.</div><form action="/employees" method="get"><div class="group/native-select relative w-fit has-[select:disabled]:opacity-50"><select class="border-border bg-transparent text-sm w-full min-w-0 appearance-none rounded-md border py-1 pr-8 pl-2.5 shadow-xs transition-[color,box-shadow] outline-none select-none ring-0 ring-ring/0 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive aria-invalid:ring-2 h-9" data-action="change-&gt;ruby-ui--form-field#onChange invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" name="per_page" onchange="this.form.requestSubmit()"><option value="5">5</option><option value="10">10</option><option selected value="25">25</option><option value="50">50</option></select><span class="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 select-none"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"></path></svg></span></div></form><nav aria-label="pagination" class="flex mx-0 w-auto justify-end" role="navigation"><ul class="flex flex-row items-center gap-1"><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/employees?search=alice&amp;page=2">&lt;</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/employees?search=alice&amp;page=1">1</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/employees?search=alice&amp;page=2">2</a></li><li><a aria-current="page" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" href="/employees?search=alice&amp;page=3">3</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/employees?search=alice&amp;page=4">4</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/employees?search=alice&amp;page=5">5</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/employees?search=alice&amp;page=6">6</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/employees?search=alice&amp;page=7">7</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/employees?search=alice&amp;page=4">&gt;</a></li></ul></nav></div></form></div></turbo-frame>
\ No newline at end of file
diff --git a/gem/test/golden/strict/data_table/pagination_first_page.html b/gem/test/golden/strict/data_table/pagination_first_page.html
new file mode 100644
index 00000000..ac2783c9
--- /dev/null
+++ b/gem/test/golden/strict/data_table/pagination_first_page.html
@@ -0,0 +1 @@
+<nav aria-label="pagination" class="flex mx-0 w-auto justify-end" role="navigation"><ul class="flex flex-row items-center gap-1"><li><span class="opacity-50 pointer-events-none px-3 h-9 inline-flex items-center text-sm">&lt;</span></li><li><a aria-current="page" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=1">1</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=2">2</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=3">3</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=2">&gt;</a></li></ul></nav>
\ No newline at end of file
diff --git a/gem/test/golden/strict/data_table/pagination_manual_adapter.html b/gem/test/golden/strict/data_table/pagination_manual_adapter.html
new file mode 100644
index 00000000..9039e5f2
--- /dev/null
+++ b/gem/test/golden/strict/data_table/pagination_manual_adapter.html
@@ -0,0 +1 @@
+<nav aria-label="pagination" class="flex mx-0 w-auto justify-end" role="navigation"><ul class="flex flex-row items-center gap-1"><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=1">&lt;</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=1">1</a></li><li><a aria-current="page" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=2">2</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=3">3</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=4">4</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=5">5</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=3">&gt;</a></li></ul></nav>
\ No newline at end of file
diff --git a/gem/test/golden/strict/data_table/pagination_wide_window.html b/gem/test/golden/strict/data_table/pagination_wide_window.html
new file mode 100644
index 00000000..1a00fa9b
--- /dev/null
+++ b/gem/test/golden/strict/data_table/pagination_wide_window.html
@@ -0,0 +1 @@
+<nav aria-label="pagination" class="flex mx-0 w-auto justify-end" role="navigation"><ul class="flex flex-row items-center gap-1"><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=9">&lt;</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=1">1</a></li><li><span aria-hidden="" class="flex h-9 w-9 items-center justify-center"><svg class="h-4 w-4" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg><span class="sr-only">More pages</span></span></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=8">8</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=9">9</a></li><li><a aria-current="page" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=10">10</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=11">11</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=12">12</a></li><li><span aria-hidden="" class="flex h-9 w-9 items-center justify-center"><svg class="h-4 w-4" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg><span class="sr-only">More pages</span></span></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=20">20</a></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/x?page=11">&gt;</a></li></ul></nav>
\ No newline at end of file
diff --git a/gem/test/golden/strict/data_table/search_without_debounce.html b/gem/test/golden/strict/data_table/search_without_debounce.html
new file mode 100644
index 00000000..42f1c874
--- /dev/null
+++ b/gem/test/golden/strict/data_table/search_without_debounce.html
@@ -0,0 +1 @@
+<form action="/x" class="max-w-sm flex-1" method="get"><input autocomplete="off" class="flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] border-border ring-0 ring-ring/0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:border-ring focus-visible:shadow-sm" data-action="input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" name="search" placeholder="Search..." type="search"><input name="sort" type="hidden" value="name"></form>
\ No newline at end of file
diff --git a/gem/test/golden/strict/data_table/sort_head_unsorted.html b/gem/test/golden/strict/data_table/sort_head_unsorted.html
new file mode 100644
index 00000000..6682f31b
--- /dev/null
+++ b/gem/test/golden/strict/data_table/sort_head_unsorted.html
@@ -0,0 +1 @@
+<th class="h-10 px-2 text-left align-middle font-medium [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px] text-foreground whitespace-nowrap"><a class="inline-flex items-center gap-1 text-inherit no-underline hover:text-foreground transition-colors" href="/x?sort=name&amp;direction=asc">Name<svg class="inline-block w-3 h-3 opacity-30" fill="none" height="12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><polyline points="8 15 12 19 16 15"></polyline><polyline points="8 9 12 5 16 9"></polyline></svg></a></th>
\ No newline at end of file
diff --git a/gem/test/golden/strict/date_picker/default.html b/gem/test/golden/strict/date_picker/default.html
new file mode 100644
index 00000000..abb5aa1a
--- /dev/null
+++ b/gem/test/golden/strict/date_picker/default.html
@@ -0,0 +1 @@
+<div class="space-y-4 w-[260px]"><div data-controller="ruby-ui--popover" data-ruby-ui--popover-options-value="{&quot;trigger&quot;:&quot;click&quot;}" data-ruby-ui--popover-trigger-value="click"><div class="inline-block w-full" data-ruby-ui--popover-target="trigger"><div class="grid w-full max-w-sm items-center gap-1.5"><label for="event-date">Select a date</label><input class="flex h-9 w-full bg-background px-3 py-1 text-sm transition-[color,box-shadow] border-border ring-0 ring-ring/0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:border-ring focus-visible:shadow-sm rounded-md border shadow" data-action="input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-controller="ruby-ui--calendar-input" data-ruby-ui--form-field-target="input" id="event-date" name="event[date]" placeholder="Select a date" type="string" value="2026-05-15"></div></div><div class="hidden z-50 rounded-md border bg-background p-1 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 absolute" data-ruby-ui--popover-target="content" data-state="closed"><div class="p-3 space-y-4" data-controller="ruby-ui--calendar" data-ruby-ui--calendar-format-value="yyyy-MM-dd" data-ruby-ui--calendar-ruby-ui--calendar-input-outlet="#event-date" data-ruby-ui--calendar-selected-date-value="2026-05-15"><div class="flex justify-center pt-1 relative items-center"><div aria-live="polite" class="text-sm font-medium" data-ruby-ui--calendar-target="title" role="presentation">Month Year</div><button aria-label="Go to previous month" class="rdp-button_reset rdp-button inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1" data-action="click-&gt;ruby-ui--calendar#prevMonth" name="previous-month" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z" fill="currentColor" fill-rule="evenodd"></path></svg></button><button aria-label="Go to next month" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1" data-action="click-&gt;ruby-ui--calendar#nextMonth" name="next-month" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd"></path></svg></button></div><table data-ruby-ui--calendar-target="calendar"></table><template data-ruby-ui--calendar-target="weekdaysTemplate"><thead><tr class="flex"><th aria-label="Monday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Mo</th><th aria-label="Tuesday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Tu</th><th aria-label="Wednesday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">We</th><th aria-label="Thursday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Th</th><th aria-label="Friday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Fr</th><th aria-label="Saturday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Sa</th><th aria-label="Sunday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Su</th></tr></thead></template><template data-ruby-ui--calendar-target="disabledDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button aria-disabled="true" class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 cursor-not-allowed bg-background text-muted-foreground hover:bg-background hover:text-muted-foreground" data-day="{{day}}" disabled name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="selectedDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button aria-selected="true" class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="0" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="todayDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="currentMonthDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="otherMonthDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template></div></div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/date_picker/generated_id.html b/gem/test/golden/strict/date_picker/generated_id.html
new file mode 100644
index 00000000..511b97c4
--- /dev/null
+++ b/gem/test/golden/strict/date_picker/generated_id.html
@@ -0,0 +1 @@
+<div class="space-y-4 w-[260px]"><div data-controller="ruby-ui--popover" data-ruby-ui--popover-options-value="{&quot;trigger&quot;:&quot;click&quot;}" data-ruby-ui--popover-trigger-value="click"><div class="inline-block w-full" data-ruby-ui--popover-target="trigger"><div class="grid w-full max-w-sm items-center gap-1.5"><label for="date-picker-00000001">Select a date</label><input class="flex h-9 w-full bg-background px-3 py-1 text-sm transition-[color,box-shadow] border-border ring-0 ring-ring/0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:border-ring focus-visible:shadow-sm rounded-md border shadow" data-action="input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-controller="ruby-ui--calendar-input" data-ruby-ui--form-field-target="input" id="date-picker-00000001" placeholder="Select a date" type="string"></div></div><div class="hidden z-50 rounded-md border bg-background p-1 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 absolute" data-ruby-ui--popover-target="content" data-state="closed"><div class="p-3 space-y-4" data-controller="ruby-ui--calendar" data-ruby-ui--calendar-format-value="yyyy-MM-dd" data-ruby-ui--calendar-ruby-ui--calendar-input-outlet="#date-picker-00000001"><div class="flex justify-center pt-1 relative items-center"><div aria-live="polite" class="text-sm font-medium" data-ruby-ui--calendar-target="title" role="presentation">Month Year</div><button aria-label="Go to previous month" class="rdp-button_reset rdp-button inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1" data-action="click-&gt;ruby-ui--calendar#prevMonth" name="previous-month" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z" fill="currentColor" fill-rule="evenodd"></path></svg></button><button aria-label="Go to next month" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1" data-action="click-&gt;ruby-ui--calendar#nextMonth" name="next-month" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd"></path></svg></button></div><table data-ruby-ui--calendar-target="calendar"></table><template data-ruby-ui--calendar-target="weekdaysTemplate"><thead><tr class="flex"><th aria-label="Monday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Mo</th><th aria-label="Tuesday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Tu</th><th aria-label="Wednesday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">We</th><th aria-label="Thursday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Th</th><th aria-label="Friday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Fr</th><th aria-label="Saturday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Sa</th><th aria-label="Sunday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Su</th></tr></thead></template><template data-ruby-ui--calendar-target="disabledDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button aria-disabled="true" class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 cursor-not-allowed bg-background text-muted-foreground hover:bg-background hover:text-muted-foreground" data-day="{{day}}" disabled name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="selectedDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button aria-selected="true" class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="0" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="todayDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="currentMonthDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="otherMonthDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template></div></div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/date_picker/without_label.html b/gem/test/golden/strict/date_picker/without_label.html
new file mode 100644
index 00000000..a9b6afb2
--- /dev/null
+++ b/gem/test/golden/strict/date_picker/without_label.html
@@ -0,0 +1 @@
+<div class="space-y-4 w-[260px]"><div data-controller="ruby-ui--popover" data-ruby-ui--popover-options-value="{&quot;trigger&quot;:&quot;click&quot;}" data-ruby-ui--popover-trigger-value="click"><div class="inline-block w-full" data-ruby-ui--popover-target="trigger"><div class="grid w-full max-w-sm items-center gap-1.5"><input class="flex h-9 w-full bg-background px-3 py-1 text-sm transition-[color,box-shadow] border-border ring-0 ring-ring/0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:border-ring focus-visible:shadow-sm rounded-md border shadow" data-action="input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-controller="ruby-ui--calendar-input" data-ruby-ui--form-field-target="input" id="event-date" placeholder="Select a date" type="string"></div></div><div class="hidden z-50 rounded-md border bg-background p-1 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 absolute" data-ruby-ui--popover-target="content" data-state="closed"><div class="p-3 space-y-4" data-controller="ruby-ui--calendar" data-ruby-ui--calendar-format-value="yyyy-MM-dd" data-ruby-ui--calendar-ruby-ui--calendar-input-outlet="#event-date"><div class="flex justify-center pt-1 relative items-center"><div aria-live="polite" class="text-sm font-medium" data-ruby-ui--calendar-target="title" role="presentation">Month Year</div><button aria-label="Go to previous month" class="rdp-button_reset rdp-button inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1" data-action="click-&gt;ruby-ui--calendar#prevMonth" name="previous-month" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z" fill="currentColor" fill-rule="evenodd"></path></svg></button><button aria-label="Go to next month" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1" data-action="click-&gt;ruby-ui--calendar#nextMonth" name="next-month" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd"></path></svg></button></div><table data-ruby-ui--calendar-target="calendar"></table><template data-ruby-ui--calendar-target="weekdaysTemplate"><thead><tr class="flex"><th aria-label="Monday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Mo</th><th aria-label="Tuesday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Tu</th><th aria-label="Wednesday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">We</th><th aria-label="Thursday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Th</th><th aria-label="Friday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Fr</th><th aria-label="Saturday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Sa</th><th aria-label="Sunday" class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]" scope="col">Su</th></tr></thead></template><template data-ruby-ui--calendar-target="disabledDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button aria-disabled="true" class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 cursor-not-allowed bg-background text-muted-foreground hover:bg-background hover:text-muted-foreground" data-day="{{day}}" disabled name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="selectedDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button aria-selected="true" class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="0" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="todayDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="currentMonthDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template><template data-ruby-ui--calendar-target="otherMonthDateTemplate"><td class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&amp;:has([aria-selected])]:bg-accent [&amp;:has([aria-selected])]:rounded-md" role="presentation"><button class="inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100 bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" data-action="click-&gt;ruby-ui--calendar#selectDay" data-day="{{day}}" name="day" role="gridcell" tabindex="-1" type="button">{{dayDate}}</button></td></template></div></div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/dialog/content_lg.html b/gem/test/golden/strict/dialog/content_lg.html
new file mode 100644
index 00000000..ffd0a856
--- /dev/null
+++ b/gem/test/golden/strict/dialog/content_lg.html
@@ -0,0 +1 @@
+<dialog class="fixed open:flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-background/80 backdrop:backdrop-blur-sm open:animate-in open:fade-in-0 open:zoom-in-95 sm:rounded-lg md:w-full max-w-2xl" data-action="click-&gt;ruby-ui--dialog#backdropClick" data-ruby-ui--dialog-target="dialog">body<button class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none" data-action="click-&gt;ruby-ui--dialog#dismiss" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></dialog>
\ No newline at end of file
diff --git a/gem/test/golden/strict/dialog/content_md.html b/gem/test/golden/strict/dialog/content_md.html
new file mode 100644
index 00000000..c77b7280
--- /dev/null
+++ b/gem/test/golden/strict/dialog/content_md.html
@@ -0,0 +1 @@
+<dialog class="fixed open:flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-background/80 backdrop:backdrop-blur-sm open:animate-in open:fade-in-0 open:zoom-in-95 sm:rounded-lg md:w-full max-w-lg" data-action="click-&gt;ruby-ui--dialog#backdropClick" data-ruby-ui--dialog-target="dialog">body<button class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none" data-action="click-&gt;ruby-ui--dialog#dismiss" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></dialog>
\ No newline at end of file
diff --git a/gem/test/golden/strict/dialog/content_sm.html b/gem/test/golden/strict/dialog/content_sm.html
new file mode 100644
index 00000000..2dce2cb2
--- /dev/null
+++ b/gem/test/golden/strict/dialog/content_sm.html
@@ -0,0 +1 @@
+<dialog class="fixed open:flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-background/80 backdrop:backdrop-blur-sm open:animate-in open:fade-in-0 open:zoom-in-95 sm:rounded-lg md:w-full max-w-md" data-action="click-&gt;ruby-ui--dialog#backdropClick" data-ruby-ui--dialog-target="dialog">body<button class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none" data-action="click-&gt;ruby-ui--dialog#dismiss" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></dialog>
\ No newline at end of file
diff --git a/gem/test/golden/strict/dialog/content_xl.html b/gem/test/golden/strict/dialog/content_xl.html
new file mode 100644
index 00000000..17ca2d59
--- /dev/null
+++ b/gem/test/golden/strict/dialog/content_xl.html
@@ -0,0 +1 @@
+<dialog class="fixed open:flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-background/80 backdrop:backdrop-blur-sm open:animate-in open:fade-in-0 open:zoom-in-95 sm:rounded-lg md:w-full max-w-4xl" data-action="click-&gt;ruby-ui--dialog#backdropClick" data-ruby-ui--dialog-target="dialog">body<button class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none" data-action="click-&gt;ruby-ui--dialog#dismiss" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></dialog>
\ No newline at end of file
diff --git a/gem/test/golden/strict/dialog/default.html b/gem/test/golden/strict/dialog/default.html
new file mode 100644
index 00000000..450f2d98
--- /dev/null
+++ b/gem/test/golden/strict/dialog/default.html
@@ -0,0 +1 @@
+<div data-controller="ruby-ui--dialog"><div class="inline-block" data-action="click-&gt;ruby-ui--dialog#open"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">Open Dialog</button></div><dialog class="fixed open:flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-background/80 backdrop:backdrop-blur-sm open:animate-in open:fade-in-0 open:zoom-in-95 sm:rounded-lg md:w-full max-w-lg" data-action="click-&gt;ruby-ui--dialog#backdropClick" data-ruby-ui--dialog-target="dialog"><div class="flex flex-col space-y-1.5 text-center sm:text-left rtl:sm:text-right"><h3 class="text-lg font-semibold leading-none tracking-tight">RubyUI to the rescue</h3><p class="text-sm text-muted-foreground">Build accessible apps with ease.</p></div><div class="py-4">Body</div><div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-y-2 sm:gap-y-0 rtl:space-x-reverse"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" type="button">Cancel</button><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">Save</button></div><button class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none" data-action="click-&gt;ruby-ui--dialog#dismiss" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></dialog></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/dialog/open.html b/gem/test/golden/strict/dialog/open.html
new file mode 100644
index 00000000..f282701d
--- /dev/null
+++ b/gem/test/golden/strict/dialog/open.html
@@ -0,0 +1 @@
+<div data-controller="ruby-ui--dialog" data-ruby-ui--dialog-open-value=""><dialog class="fixed open:flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-background/80 backdrop:backdrop-blur-sm open:animate-in open:fade-in-0 open:zoom-in-95 sm:rounded-lg md:w-full max-w-lg" data-action="click-&gt;ruby-ui--dialog#backdropClick" data-ruby-ui--dialog-target="dialog">body<button class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none" data-action="click-&gt;ruby-ui--dialog#dismiss" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></dialog></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/dropdown_menu/default.html b/gem/test/golden/strict/dropdown_menu/default.html
new file mode 100644
index 00000000..289c2caf
--- /dev/null
+++ b/gem/test/golden/strict/dropdown_menu/default.html
@@ -0,0 +1 @@
+<div class="group/dropdown-menu is-absolute" data-action="click@window-&gt;ruby-ui--dropdown-menu#onClickOutside" data-controller="ruby-ui--dropdown-menu" data-ruby-ui--dropdown-menu-options-value="{}"><div class="inline-block w-full" data-action="click-&gt;ruby-ui--dropdown-menu#toggle" data-ruby-ui--dropdown-menu-target="trigger"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" type="button">Open</button></div><div class="z-50 hidden group-[.is-absolute]/dropdown-menu:absolute group-[.is-fixed]/dropdown-menu:fixed" data-ruby-ui--dropdown-menu-target="content" style="width: max-content; top: 0; left: 0;"><div class="z-50 min-w-[8rem] rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[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 w-56" data-ruby-ui--dropdown-menu-target="panel" data-state="open"><h3 class="px-2 py-1.5 text-sm font-semibold">My Account</h3><div aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-muted" role="separator"></div><a class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50" data-action="click-&gt;ruby-ui--dropdown-menu#close" data-orientation="vertical" data-ruby-ui--dropdown-menu-target="menuItem" href="/profile" role="menuitem" tabindex="-1">Profile</a><div class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50" data-action="click-&gt;ruby-ui--dropdown-menu#close" data-orientation="vertical" data-ruby-ui--dropdown-menu-target="menuItem" role="menuitem" tabindex="-1">Billing</div></div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/dropdown_menu/fixed_strategy.html b/gem/test/golden/strict/dropdown_menu/fixed_strategy.html
new file mode 100644
index 00000000..ede82fb6
--- /dev/null
+++ b/gem/test/golden/strict/dropdown_menu/fixed_strategy.html
@@ -0,0 +1 @@
+<div class="group/dropdown-menu is-fixed" data-action="click@window-&gt;ruby-ui--dropdown-menu#onClickOutside" data-controller="ruby-ui--dropdown-menu" data-ruby-ui--dropdown-menu-options-value="{&quot;strategy&quot;:&quot;fixed&quot;}"><div class="z-50 hidden group-[.is-absolute]/dropdown-menu:absolute group-[.is-fixed]/dropdown-menu:fixed" data-ruby-ui--dropdown-menu-target="content" style="width: max-content; top: 0; left: 0;"><div class="z-50 min-w-[8rem] rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[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 w-56" data-ruby-ui--dropdown-menu-target="panel" data-state="open"><a class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50" data-action="click-&gt;ruby-ui--dropdown-menu#close" data-orientation="vertical" data-ruby-ui--dropdown-menu-target="menuItem" href="#" role="menuitem" tabindex="-1">Item</a></div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/empty/default.html b/gem/test/golden/strict/empty/default.html
new file mode 100644
index 00000000..dbcb6cf5
--- /dev/null
+++ b/gem/test/golden/strict/empty/default.html
@@ -0,0 +1 @@
+<div class="flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed p-12 text-center text-balance" data-slot="empty"><div class="flex max-w-sm flex-col items-center gap-2" data-slot="empty-header"><div class="mb-2 flex shrink-0 items-center justify-center [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 size-10 rounded-xl bg-muted text-foreground [&amp;_svg:not([class*='size-'])]:size-5" data-slot="empty-icon" data-variant="icon">I</div><div class="text-lg font-medium tracking-tight" data-slot="empty-title">Nothing here</div><div class="text-sm leading-relaxed text-muted-foreground [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 [&amp;&gt;a:hover]:text-primary" data-slot="empty-description">No content yet.</div></div><div class="flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance" data-slot="empty-content"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-primary text-primary-foreground shadow hover:bg-primary/90" type="button">Create</button></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/empty/media_default.html b/gem/test/golden/strict/empty/media_default.html
new file mode 100644
index 00000000..6a00c99c
--- /dev/null
+++ b/gem/test/golden/strict/empty/media_default.html
@@ -0,0 +1 @@
+<div class="mb-2 flex shrink-0 items-center justify-center [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 bg-transparent" data-slot="empty-icon" data-variant="default">M</div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/form/default.html b/gem/test/golden/strict/form/default.html
new file mode 100644
index 00000000..07125eed
--- /dev/null
+++ b/gem/test/golden/strict/form/default.html
@@ -0,0 +1 @@
+<form action="/users" method="post"><div class="flex flex-col gap-2" data-controller="ruby-ui--form-field"><label class="empty:hidden text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 peer-aria-disabled:cursor-not-allowed peer-aria-disabled:opacity-70 peer-aria-disabled:pointer-events-none" for="name">Name</label><input class="flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] border-border ring-0 ring-ring/0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:border-ring focus-visible:shadow-sm" data-action="input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" id="name" minlength="3" name="name" placeholder="Jane Doe" required type="string"><p class="empty:hidden text-sm text-muted-foreground">At least 3 characters.</p><p class="empty:hidden text-sm font-medium text-destructive" data-ruby-ui--form-field-target="error">Name is required.</p></div></form>
\ No newline at end of file
diff --git a/gem/test/golden/strict/hover_card/default.html b/gem/test/golden/strict/hover_card/default.html
new file mode 100644
index 00000000..e0ae8533
--- /dev/null
+++ b/gem/test/golden/strict/hover_card/default.html
@@ -0,0 +1 @@
+<div class="group/hover-card is-absolute" data-controller="ruby-ui--hover-card" data-ruby-ui--hover-card-options-value="{&quot;delay&quot;:[500,250],&quot;trigger&quot;:&quot;mouseenter focus click&quot;}"><div class="inline-block" data-ruby-ui--hover-card-target="trigger"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm text-primary underline-offset-4 hover:underline" type="button">@joeldrapper</button></div><div 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" data-ruby-ui--hover-card-target="content" data-state="closed"><span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-base" data-controller="ruby-ui--avatar"><span class="flex h-full w-full items-center justify-center rounded-full bg-muted" data-ruby-ui--avatar-target="fallback">JD</span></span></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/hover_card/with_options.html b/gem/test/golden/strict/hover_card/with_options.html
new file mode 100644
index 00000000..5bbd0924
--- /dev/null
+++ b/gem/test/golden/strict/hover_card/with_options.html
@@ -0,0 +1 @@
+<div class="group/hover-card is-absolute" data-controller="ruby-ui--hover-card" data-ruby-ui--hover-card-options-value="{&quot;placement&quot;:&quot;bottom&quot;,&quot;delay&quot;:[500,250],&quot;trigger&quot;:&quot;mouseenter focus click&quot;}"><div class="inline-block" data-ruby-ui--hover-card-target="trigger">T</div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/input/default.html b/gem/test/golden/strict/input/default.html
new file mode 100644
index 00000000..252451ed
--- /dev/null
+++ b/gem/test/golden/strict/input/default.html
@@ -0,0 +1 @@
+<input class="flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] border-border ring-0 ring-ring/0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:border-ring focus-visible:shadow-sm" data-action="input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" name="email" placeholder="jane@example.com" type="string">
\ No newline at end of file
diff --git a/gem/test/golden/strict/input/typed_and_disabled.html b/gem/test/golden/strict/input/typed_and_disabled.html
new file mode 100644
index 00000000..c34a7333
--- /dev/null
+++ b/gem/test/golden/strict/input/typed_and_disabled.html
@@ -0,0 +1 @@
+<input class="flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] border-border ring-0 ring-ring/0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:border-ring focus-visible:shadow-sm" data-action="input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" disabled name="email" type="email" value="jane@example.com">
\ No newline at end of file
diff --git a/gem/test/golden/strict/input_otp/alphanumeric_pattern.html b/gem/test/golden/strict/input_otp/alphanumeric_pattern.html
new file mode 100644
index 00000000..1bdb7f32
--- /dev/null
+++ b/gem/test/golden/strict/input_otp/alphanumeric_pattern.html
@@ -0,0 +1 @@
+<div class="relative flex items-center has-disabled:opacity-50" data-controller="ruby-ui--input-otp" data-ruby-ui--input-otp-char-class-value="[a-zA-Z0-9]" data-ruby-ui--input-otp-length-value="4"><div class="flex items-center gap-2"><div class="flex items-center"><div aria-hidden="true" class="relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring/50 data-[caret=true]:after:content-[''] data-[caret=true]:after:absolute data-[caret=true]:after:h-4 data-[caret=true]:after:w-px data-[caret=true]:after:animate-caret-blink data-[caret=true]:after:bg-foreground aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40" data-index="0" data-ruby-ui--input-otp-target="slot"></div></div></div><input autocomplete="one-time-code" class="absolute inset-0 h-full w-full cursor-text appearance-none border-0 bg-transparent p-0 text-transparent caret-transparent shadow-none outline-none selection:bg-transparent focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed" data-action="input-&gt;ruby-ui--input-otp#onInput keydown-&gt;ruby-ui--input-otp#onKeydown paste-&gt;ruby-ui--input-otp#onPaste focus-&gt;ruby-ui--input-otp#onFocus blur-&gt;ruby-ui--input-otp#onBlur" data-ruby-ui--input-otp-target="input" inputmode="text" maxlength="4" name="code" pattern="^(?:[a-zA-Z0-9]){4}$" type="text"></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/input_otp/default.html b/gem/test/golden/strict/input_otp/default.html
new file mode 100644
index 00000000..6c8a1cc5
--- /dev/null
+++ b/gem/test/golden/strict/input_otp/default.html
@@ -0,0 +1 @@
+<div class="relative flex items-center has-disabled:opacity-50" data-controller="ruby-ui--input-otp" data-ruby-ui--input-otp-char-class-value="[0-9]" data-ruby-ui--input-otp-length-value="6"><div class="flex items-center gap-2"><div class="flex items-center"><div aria-hidden="true" class="relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring/50 data-[caret=true]:after:content-[''] data-[caret=true]:after:absolute data-[caret=true]:after:h-4 data-[caret=true]:after:w-px data-[caret=true]:after:animate-caret-blink data-[caret=true]:after:bg-foreground aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40" data-index="0" data-ruby-ui--input-otp-target="slot"></div><div aria-hidden="true" class="relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring/50 data-[caret=true]:after:content-[''] data-[caret=true]:after:absolute data-[caret=true]:after:h-4 data-[caret=true]:after:w-px data-[caret=true]:after:animate-caret-blink data-[caret=true]:after:bg-foreground aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40" data-index="1" data-ruby-ui--input-otp-target="slot"></div><div aria-hidden="true" class="relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring/50 data-[caret=true]:after:content-[''] data-[caret=true]:after:absolute data-[caret=true]:after:h-4 data-[caret=true]:after:w-px data-[caret=true]:after:animate-caret-blink data-[caret=true]:after:bg-foreground aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40" data-index="2" data-ruby-ui--input-otp-target="slot"></div></div><div class="text-muted-foreground" role="separator"><svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 12h14"></path></svg></div><div class="flex items-center"><div aria-hidden="true" class="relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring/50 data-[caret=true]:after:content-[''] data-[caret=true]:after:absolute data-[caret=true]:after:h-4 data-[caret=true]:after:w-px data-[caret=true]:after:animate-caret-blink data-[caret=true]:after:bg-foreground aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40" data-index="3" data-ruby-ui--input-otp-target="slot"></div><div aria-hidden="true" class="relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring/50 data-[caret=true]:after:content-[''] data-[caret=true]:after:absolute data-[caret=true]:after:h-4 data-[caret=true]:after:w-px data-[caret=true]:after:animate-caret-blink data-[caret=true]:after:bg-foreground aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40" data-index="4" data-ruby-ui--input-otp-target="slot"></div><div aria-hidden="true" class="relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring/50 data-[caret=true]:after:content-[''] data-[caret=true]:after:absolute data-[caret=true]:after:h-4 data-[caret=true]:after:w-px data-[caret=true]:after:animate-caret-blink data-[caret=true]:after:bg-foreground aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40" data-index="5" data-ruby-ui--input-otp-target="slot"></div></div></div><input autocomplete="one-time-code" class="absolute inset-0 h-full w-full cursor-text appearance-none border-0 bg-transparent p-0 text-transparent caret-transparent shadow-none outline-none selection:bg-transparent focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed" data-action="input-&gt;ruby-ui--input-otp#onInput keydown-&gt;ruby-ui--input-otp#onKeydown paste-&gt;ruby-ui--input-otp#onPaste focus-&gt;ruby-ui--input-otp#onFocus blur-&gt;ruby-ui--input-otp#onBlur" data-ruby-ui--input-otp-target="input" inputmode="numeric" maxlength="6" name="code" pattern="^(?:[0-9]){6}$" type="text"></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/link/icon.html b/gem/test/golden/strict/link/icon.html
new file mode 100644
index 00000000..2d311b48
--- /dev/null
+++ b/gem/test/golden/strict/link/icon.html
@@ -0,0 +1 @@
+<a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed h-9 w-9 text-primary underline-offset-4 hover:underline" href="/docs" type="button">X</a>
\ No newline at end of file
diff --git a/gem/test/golden/strict/link/size_lg.html b/gem/test/golden/strict/link/size_lg.html
new file mode 100644
index 00000000..3317a4b7
--- /dev/null
+++ b/gem/test/golden/strict/link/size_lg.html
@@ -0,0 +1 @@
+<a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-10 text-base text-primary underline-offset-4 hover:underline" href="/docs" type="button">lg</a>
\ No newline at end of file
diff --git a/gem/test/golden/strict/link/size_md.html b/gem/test/golden/strict/link/size_md.html
new file mode 100644
index 00000000..d9d66096
--- /dev/null
+++ b/gem/test/golden/strict/link/size_md.html
@@ -0,0 +1 @@
+<a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm text-primary underline-offset-4 hover:underline" href="/docs" type="button">md</a>
\ No newline at end of file
diff --git a/gem/test/golden/strict/link/size_sm.html b/gem/test/golden/strict/link/size_sm.html
new file mode 100644
index 00000000..a59e8a6a
--- /dev/null
+++ b/gem/test/golden/strict/link/size_sm.html
@@ -0,0 +1 @@
+<a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-3 py-1.5 h-8 text-xs text-primary underline-offset-4 hover:underline" href="/docs" type="button">sm</a>
\ No newline at end of file
diff --git a/gem/test/golden/strict/link/size_xl.html b/gem/test/golden/strict/link/size_xl.html
new file mode 100644
index 00000000..656c1fd9
--- /dev/null
+++ b/gem/test/golden/strict/link/size_xl.html
@@ -0,0 +1 @@
+<a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-6 py-3 h-12 text-base text-primary underline-offset-4 hover:underline" href="/docs" type="button">xl</a>
\ No newline at end of file
diff --git a/gem/test/golden/strict/link/variant_destructive.html b/gem/test/golden/strict/link/variant_destructive.html
new file mode 100644
index 00000000..08b8136c
--- /dev/null
+++ b/gem/test/golden/strict/link/variant_destructive.html
@@ -0,0 +1 @@
+<a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-destructive text-white shadow-sm [a&amp;]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60" href="/docs" type="button">destructive</a>
\ No newline at end of file
diff --git a/gem/test/golden/strict/link/variant_ghost.html b/gem/test/golden/strict/link/variant_ghost.html
new file mode 100644
index 00000000..611fe4c0
--- /dev/null
+++ b/gem/test/golden/strict/link/variant_ghost.html
@@ -0,0 +1 @@
+<a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/docs" type="button">ghost</a>
\ No newline at end of file
diff --git a/gem/test/golden/strict/link/variant_link.html b/gem/test/golden/strict/link/variant_link.html
new file mode 100644
index 00000000..c10334c7
--- /dev/null
+++ b/gem/test/golden/strict/link/variant_link.html
@@ -0,0 +1 @@
+<a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm text-primary underline-offset-4 hover:underline" href="/docs" type="button">link</a>
\ No newline at end of file
diff --git a/gem/test/golden/strict/link/variant_outline.html b/gem/test/golden/strict/link/variant_outline.html
new file mode 100644
index 00000000..dc2da2c6
--- /dev/null
+++ b/gem/test/golden/strict/link/variant_outline.html
@@ -0,0 +1 @@
+<a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" href="/docs" type="button">outline</a>
\ No newline at end of file
diff --git a/gem/test/golden/strict/link/variant_primary.html b/gem/test/golden/strict/link/variant_primary.html
new file mode 100644
index 00000000..458ec68a
--- /dev/null
+++ b/gem/test/golden/strict/link/variant_primary.html
@@ -0,0 +1 @@
+<a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-primary text-primary-foreground shadow hover:bg-primary/90" href="/docs" type="button">primary</a>
\ No newline at end of file
diff --git a/gem/test/golden/strict/link/variant_secondary.html b/gem/test/golden/strict/link/variant_secondary.html
new file mode 100644
index 00000000..b18aa704
--- /dev/null
+++ b/gem/test/golden/strict/link/variant_secondary.html
@@ -0,0 +1 @@
+<a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-secondary text-secondary-foreground hover:bg-opacity-80" href="/docs" type="button">secondary</a>
\ No newline at end of file
diff --git a/gem/test/golden/strict/masked_input/default.html b/gem/test/golden/strict/masked_input/default.html
new file mode 100644
index 00000000..153e9344
--- /dev/null
+++ b/gem/test/golden/strict/masked_input/default.html
@@ -0,0 +1 @@
+<input class="flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] border-border ring-0 ring-ring/0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:border-ring focus-visible:shadow-sm" data-action="input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-controller="ruby-ui--masked-input" data-ruby-ui--form-field-target="input" data-ruby-ui--masked-input-mask-value="(00) 00000-0000" name="phone" type="text">
\ No newline at end of file
diff --git a/gem/test/golden/strict/message/group_with_avatar_header_footer.html b/gem/test/golden/strict/message/group_with_avatar_header_footer.html
new file mode 100644
index 00000000..90469ddd
--- /dev/null
+++ b/gem/test/golden/strict/message/group_with_avatar_header_footer.html
@@ -0,0 +1 @@
+<div class="flex min-w-0 flex-col gap-2" data-slot="message-group"><div class="group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse" data-align="start" data-slot="message"><div class="flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8" data-slot="message-avatar"><span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-base" data-controller="ruby-ui--avatar"><span class="flex h-full w-full items-center justify-center rounded-full bg-muted" data-ruby-ui--avatar-target="fallback">OL</span></span></div><div class="flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:[&amp;&gt;[data-slot]]:self-end" data-slot="message-content"><div class="flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0" data-slot="message-header">Oliver</div><div class="group/bubble relative flex w-fit min-w-0 flex-col gap-1 max-w-[80%] data-[align=end]:self-end data-[variant=ghost]:max-w-full *:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&amp;&gt;[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80" data-align="start" data-slot="bubble" data-variant="default"><div class="w-fit max-w-full min-w-0 overflow-hidden wrap-break-word rounded-3xl border border-transparent px-3 py-2.5 text-sm leading-relaxed group-data-[align=end]/bubble:self-end [&amp;:is(button,a)]:text-left [&amp;:is(button,a)]:outline-none [&amp;:is(button,a)]:transition-colors [&amp;:is(button,a):focus-visible]:border-ring [&amp;:is(button,a):focus-visible]:ring-3 [&amp;:is(button,a):focus-visible]:ring-ring/30" data-slot="bubble-content">Hi</div></div><div class="flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-data-[align=end]/message:justify-end group-has-data-[variant=ghost]/message:px-0" data-slot="message-footer">Delivered</div></div></div><div class="group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse" data-align="end" data-slot="message"><div class="flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:[&amp;&gt;[data-slot]]:self-end" data-slot="message-content"><div class="group/bubble relative flex w-fit min-w-0 flex-col gap-1 max-w-[80%] data-[align=end]:self-end data-[variant=ghost]:max-w-full *:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&amp;&gt;[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80" data-align="end" data-slot="bubble" data-variant="default"><div class="w-fit max-w-full min-w-0 overflow-hidden wrap-break-word rounded-3xl border border-transparent px-3 py-2.5 text-sm leading-relaxed group-data-[align=end]/bubble:self-end [&amp;:is(button,a)]:text-left [&amp;:is(button,a)]:outline-none [&amp;:is(button,a)]:transition-colors [&amp;:is(button,a):focus-visible]:border-ring [&amp;:is(button,a):focus-visible]:ring-3 [&amp;:is(button,a):focus-visible]:ring-ring/30" data-slot="bubble-content">Hey</div></div></div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/message_scroller/button_start.html b/gem/test/golden/strict/message_scroller/button_start.html
new file mode 100644
index 00000000..a362d9a4
--- /dev/null
+++ b/gem/test/golden/strict/message_scroller/button_start.html
@@ -0,0 +1 @@
+<button class="absolute left-1/2 z-10 -translate-x-1/2 inline-flex size-8 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full data-[direction=start]:[&amp;_svg]:rotate-180" data-action="click-&gt;ruby-ui--message-scroller#jump" data-active="false" data-direction="start" data-ruby-ui--message-scroller-target="button" data-slot="message-scroller-button" tabindex="-1" type="button"><svg class="size-4" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14"></path><path d="m19 12-7 7-7-7"></path></svg><span class="sr-only">Scroll to start</span></button>
\ No newline at end of file
diff --git a/gem/test/golden/strict/message_scroller/default.html b/gem/test/golden/strict/message_scroller/default.html
new file mode 100644
index 00000000..d2dc13a2
--- /dev/null
+++ b/gem/test/golden/strict/message_scroller/default.html
@@ -0,0 +1 @@
+<div class="contents" data-controller="ruby-ui--message-scroller" data-ruby-ui--message-scroller-auto-scroll-value="true" data-ruby-ui--message-scroller-default-position-value="end" data-ruby-ui--message-scroller-preserve-on-prepend-value="true" data-ruby-ui--message-scroller-previous-item-peek-value="64" data-slot="message-scroller-provider"><div class="group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden" data-slot="message-scroller"><div class="size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain contain-content" data-ruby-ui--message-scroller-target="viewport" data-slot="message-scroller-viewport" tabindex="0"><div aria-relevant="additions text" class="flex h-max min-h-full flex-col gap-8" data-ruby-ui--message-scroller-target="content" data-slot="message-scroller-content" role="log"><div class="min-w-0 shrink-0" data-message-id="m1" data-slot="message-scroller-item">first</div><div class="min-w-0 shrink-0" data-message-id="m2" data-scroll-anchor="" data-slot="message-scroller-item">last</div></div></div><button class="absolute left-1/2 z-10 -translate-x-1/2 inline-flex size-8 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full data-[direction=start]:[&amp;_svg]:rotate-180" data-action="click-&gt;ruby-ui--message-scroller#jump" data-active="false" data-direction="end" data-ruby-ui--message-scroller-target="button" data-slot="message-scroller-button" tabindex="-1" type="button"><svg class="size-4" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14"></path><path d="m19 12-7 7-7-7"></path></svg><span class="sr-only">Scroll to end</span></button></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/message_scroller/provider_custom_values.html b/gem/test/golden/strict/message_scroller/provider_custom_values.html
new file mode 100644
index 00000000..11965d17
--- /dev/null
+++ b/gem/test/golden/strict/message_scroller/provider_custom_values.html
@@ -0,0 +1 @@
+<div class="contents" data-controller="ruby-ui--message-scroller" data-ruby-ui--message-scroller-auto-scroll-value="false" data-ruby-ui--message-scroller-default-position-value="last-anchor" data-ruby-ui--message-scroller-preserve-on-prepend-value="false" data-ruby-ui--message-scroller-previous-item-peek-value="32" data-slot="message-scroller-provider">x</div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/native_select/default.html b/gem/test/golden/strict/native_select/default.html
new file mode 100644
index 00000000..5dc7ae72
--- /dev/null
+++ b/gem/test/golden/strict/native_select/default.html
@@ -0,0 +1 @@
+<div class="group/native-select relative w-fit has-[select:disabled]:opacity-50"><select class="border-border bg-transparent text-sm w-full min-w-0 appearance-none rounded-md border py-1 pr-8 pl-2.5 shadow-xs transition-[color,box-shadow] outline-none select-none ring-0 ring-ring/0 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive aria-invalid:ring-2 h-9" data-action="change-&gt;ruby-ui--form-field#onChange invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" name="country"><option value="">Select a country</option><optgroup label="Americas"><option selected value="br">Brazil</option><option value="us">United States</option></optgroup></select><span class="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 select-none"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"></path></svg></span></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/native_select/icon.html b/gem/test/golden/strict/native_select/icon.html
new file mode 100644
index 00000000..74b8337e
--- /dev/null
+++ b/gem/test/golden/strict/native_select/icon.html
@@ -0,0 +1 @@
+<span class="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 select-none"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"></path></svg></span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/native_select/small.html b/gem/test/golden/strict/native_select/small.html
new file mode 100644
index 00000000..81655c8c
--- /dev/null
+++ b/gem/test/golden/strict/native_select/small.html
@@ -0,0 +1 @@
+<div class="group/native-select relative w-fit has-[select:disabled]:opacity-50"><select class="border-border bg-transparent text-sm w-full min-w-0 appearance-none border pr-8 pl-2.5 shadow-xs transition-[color,box-shadow] outline-none select-none ring-0 ring-ring/0 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive aria-invalid:ring-2 h-7 rounded-md py-0.5" data-action="change-&gt;ruby-ui--form-field#onChange invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" name="country"><option value="br">Brazil</option></select><span class="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 select-none"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"></path></svg></span></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/pagination/default.html b/gem/test/golden/strict/pagination/default.html
new file mode 100644
index 00000000..ab835426
--- /dev/null
+++ b/gem/test/golden/strict/pagination/default.html
@@ -0,0 +1 @@
+<nav aria-label="pagination" class="mx-auto flex w-full justify-center" role="navigation"><ul class="flex flex-row items-center gap-1"><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/page/1">Prev</a></li><li><span aria-hidden="" class="flex h-9 w-9 items-center justify-center"><svg class="h-4 w-4" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg><span class="sr-only">More pages</span></span></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/page/4">4</a></li><li><a aria-current="page" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" href="/page/5">5</a></li><li><span aria-hidden="" class="flex h-9 w-9 items-center justify-center"><svg class="h-4 w-4" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg><span class="sr-only">More pages</span></span></li><li><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/page/6">Next</a></li></ul></nav>
\ No newline at end of file
diff --git a/gem/test/golden/strict/popover/default.html b/gem/test/golden/strict/popover/default.html
new file mode 100644
index 00000000..3389388c
--- /dev/null
+++ b/gem/test/golden/strict/popover/default.html
@@ -0,0 +1 @@
+<div data-controller="ruby-ui--popover" data-ruby-ui--popover-options-value="{}" data-ruby-ui--popover-trigger-value="hover"><div class="inline-block w-full" data-ruby-ui--popover-target="trigger"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" type="button">Open Popover</button></div><div class="hidden z-50 rounded-md border bg-background p-1 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 absolute w-40" data-ruby-ui--popover-target="content" data-state="closed"><a class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm hover:bg-accent hover:text-accent-foreground" href="/profile" type="button">Profile</a></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/popover/with_options.html b/gem/test/golden/strict/popover/with_options.html
new file mode 100644
index 00000000..26bb6015
--- /dev/null
+++ b/gem/test/golden/strict/popover/with_options.html
@@ -0,0 +1 @@
+<div data-controller="ruby-ui--popover" data-ruby-ui--popover-options-value="{&quot;trigger&quot;:&quot;click&quot;,&quot;placement&quot;:&quot;bottom-end&quot;}" data-ruby-ui--popover-trigger-value="click"><div class="inline-block" data-ruby-ui--popover-target="trigger">T</div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/progress/value_0.html b/gem/test/golden/strict/progress/value_0.html
new file mode 100644
index 00000000..92a4e5ac
--- /dev/null
+++ b/gem/test/golden/strict/progress/value_0.html
@@ -0,0 +1 @@
+<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0.0" aria-valuetext="0.0%" class="relative h-2 overflow-hidden rounded-full bg-primary/20 [&amp;&gt;*]:bg-primary" role="progressbar"><div class="h-full w-full flex-1" style="transform: translateX(-100.0%)"></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/progress/value_100.html b/gem/test/golden/strict/progress/value_100.html
new file mode 100644
index 00000000..74d3ffbb
--- /dev/null
+++ b/gem/test/golden/strict/progress/value_100.html
@@ -0,0 +1 @@
+<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100.0" aria-valuetext="100.0%" class="relative h-2 overflow-hidden rounded-full bg-primary/20 [&amp;&gt;*]:bg-primary" role="progressbar"><div class="h-full w-full flex-1" style="transform: translateX(-0.0%)"></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/progress/value_33_5.html b/gem/test/golden/strict/progress/value_33_5.html
new file mode 100644
index 00000000..d1d84129
--- /dev/null
+++ b/gem/test/golden/strict/progress/value_33_5.html
@@ -0,0 +1 @@
+<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="33.5" aria-valuetext="33.5%" class="relative h-2 overflow-hidden rounded-full bg-primary/20 [&amp;&gt;*]:bg-primary" role="progressbar"><div class="h-full w-full flex-1" style="transform: translateX(-66.5%)"></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/radio_button/checked.html b/gem/test/golden/strict/radio_button/checked.html
new file mode 100644
index 00000000..a11fab5c
--- /dev/null
+++ b/gem/test/golden/strict/radio_button/checked.html
@@ -0,0 +1 @@
+<input checked class="h-4 w-4 p-0 border-primary rounded-full flex-none disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary dark:checked:bg-secondary checked:text-primary checked:border-primary aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" data-action="change-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" name="plan" type="radio" value="pro">
\ No newline at end of file
diff --git a/gem/test/golden/strict/radio_button/default.html b/gem/test/golden/strict/radio_button/default.html
new file mode 100644
index 00000000..24369b20
--- /dev/null
+++ b/gem/test/golden/strict/radio_button/default.html
@@ -0,0 +1 @@
+<input class="h-4 w-4 p-0 border-primary rounded-full flex-none disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary dark:checked:bg-secondary checked:text-primary checked:border-primary aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" data-action="change-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" name="plan" type="radio" value="pro">
\ No newline at end of file
diff --git a/gem/test/golden/strict/select/default.html b/gem/test/golden/strict/select/default.html
new file mode 100644
index 00000000..6a3810a9
--- /dev/null
+++ b/gem/test/golden/strict/select/default.html
@@ -0,0 +1 @@
+<div class="group/select w-full relative" data-action="click@window-&gt;ruby-ui--select#clickOutside" data-controller="ruby-ui--select" data-ruby-ui--select-open-value="false" data-ruby-ui--select-ruby-ui--select-item-outlet=".item"><input class="hidden" data-action="change-&gt;ruby-ui--form-field#onChange invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" data-ruby-ui--select-target="input" name="person"><button aria-activedescendant="" aria-autocomplete="none" aria-controls="radix-:r0:" aria-expanded="false" aria-haspopup="listbox" class="truncate w-full flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" data-action="ruby-ui--select#onClick" data-ruby-ui--select-target="trigger" role="combobox" type="button"><span class="truncate pointer-events-none" data-ruby-ui--select-target="value">Select a person</span><svg class="ml-2 h-4 w-4 shrink-0 opacity-50" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button><div class="hidden w-full absolute top-0 left-0 z-50" data-ruby-ui--select-target="content" id="content00000001" role="listbox" tabindex="-1"><div class="max-h-96 w-full text-wrap overflow-auto rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:fill-mode-forwards slide-in-from-top-2" data-ruby-ui--select-target="panel" data-state="closed"><div><h3 class="px-2 py-1.5 text-sm font-semibold">People</h3><div aria-selected="false" class="item group relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed" data-action="click-&gt;ruby-ui--select#selectItem keydown.enter-&gt;ruby-ui--select#selectItem keydown.down-&gt;ruby-ui--select#handleKeyDown keydown.up-&gt;ruby-ui--select#handleKeyUp keydown.esc-&gt;ruby-ui--select#handleEsc" data-controller="ruby-ui--select-item" data-orientation="vertical" data-ruby-ui--select-target="item" data-value="1" role="option" tabindex="0"><svg class="invisible group-aria-selected:visible mr-2 h-4 w-4 flex-none" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6 9 17l-5-5"></path></svg>John Doe</div><div aria-selected="false" class="item group relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed" data-action="click-&gt;ruby-ui--select#selectItem keydown.enter-&gt;ruby-ui--select#selectItem keydown.down-&gt;ruby-ui--select#handleKeyDown keydown.up-&gt;ruby-ui--select#handleKeyUp keydown.esc-&gt;ruby-ui--select#handleEsc" data-controller="ruby-ui--select-item" data-orientation="vertical" data-ruby-ui--select-target="item" data-value="2" role="option" tabindex="0"><svg class="invisible group-aria-selected:visible mr-2 h-4 w-4 flex-none" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6 9 17l-5-5"></path></svg>Jane Doe</div></div></div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/select/value_falls_back_to_placeholder.html b/gem/test/golden/strict/select/value_falls_back_to_placeholder.html
new file mode 100644
index 00000000..e8d97e1a
--- /dev/null
+++ b/gem/test/golden/strict/select/value_falls_back_to_placeholder.html
@@ -0,0 +1 @@
+<span class="truncate pointer-events-none" data-ruby-ui--select-target="value">Placeholder</span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/separator/as_hr.html b/gem/test/golden/strict/separator/as_hr.html
new file mode 100644
index 00000000..e63af339
--- /dev/null
+++ b/gem/test/golden/strict/separator/as_hr.html
@@ -0,0 +1 @@
+<hr class="shrink-0 bg-border h-[1px] w-full" role="none">
\ No newline at end of file
diff --git a/gem/test/golden/strict/separator/default.html b/gem/test/golden/strict/separator/default.html
new file mode 100644
index 00000000..7944b249
--- /dev/null
+++ b/gem/test/golden/strict/separator/default.html
@@ -0,0 +1 @@
+<div class="shrink-0 bg-border h-[1px] w-full" role="none"></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/separator/not_decorative.html b/gem/test/golden/strict/separator/not_decorative.html
new file mode 100644
index 00000000..1e492c83
--- /dev/null
+++ b/gem/test/golden/strict/separator/not_decorative.html
@@ -0,0 +1 @@
+<div class="shrink-0 bg-border h-[1px] w-full" role="separator"></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/separator/vertical.html b/gem/test/golden/strict/separator/vertical.html
new file mode 100644
index 00000000..1a855b34
--- /dev/null
+++ b/gem/test/golden/strict/separator/vertical.html
@@ -0,0 +1 @@
+<div class="shrink-0 bg-border h-full w-[1px]" role="none"></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/sheet/content_bottom.html b/gem/test/golden/strict/sheet/content_bottom.html
new file mode 100644
index 00000000..e5bb9667
--- /dev/null
+++ b/gem/test/golden/strict/sheet/content_bottom.html
@@ -0,0 +1 @@
+<template data-ruby-ui--sheet-target="content"><div data-controller="ruby-ui--sheet-content"><div class="fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm 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]:fill-mode-forwards" data-action="click-&gt;ruby-ui--sheet-content#close" data-ruby-ui--sheet-content-target="backdrop" data-state="open"></div><div class="fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-scroll inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom" data-ruby-ui--sheet-content-target="panel" data-state="open">body<button class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" data-action="click-&gt;ruby-ui--sheet-content#close" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></div></div></template>
\ No newline at end of file
diff --git a/gem/test/golden/strict/sheet/content_left.html b/gem/test/golden/strict/sheet/content_left.html
new file mode 100644
index 00000000..b04b702b
--- /dev/null
+++ b/gem/test/golden/strict/sheet/content_left.html
@@ -0,0 +1 @@
+<template data-ruby-ui--sheet-target="content"><div data-controller="ruby-ui--sheet-content"><div class="fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm 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]:fill-mode-forwards" data-action="click-&gt;ruby-ui--sheet-content#close" data-ruby-ui--sheet-content-target="backdrop" data-state="open"></div><div class="fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-scroll inset-y-0 left-0 h-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left" data-ruby-ui--sheet-content-target="panel" data-state="open">body<button class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" data-action="click-&gt;ruby-ui--sheet-content#close" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></div></div></template>
\ No newline at end of file
diff --git a/gem/test/golden/strict/sheet/content_right.html b/gem/test/golden/strict/sheet/content_right.html
new file mode 100644
index 00000000..08df6b68
--- /dev/null
+++ b/gem/test/golden/strict/sheet/content_right.html
@@ -0,0 +1 @@
+<template data-ruby-ui--sheet-target="content"><div data-controller="ruby-ui--sheet-content"><div class="fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm 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]:fill-mode-forwards" data-action="click-&gt;ruby-ui--sheet-content#close" data-ruby-ui--sheet-content-target="backdrop" data-state="open"></div><div class="fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-scroll inset-y-0 right-0 h-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right" data-ruby-ui--sheet-content-target="panel" data-state="open">body<button class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" data-action="click-&gt;ruby-ui--sheet-content#close" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></div></div></template>
\ No newline at end of file
diff --git a/gem/test/golden/strict/sheet/content_top.html b/gem/test/golden/strict/sheet/content_top.html
new file mode 100644
index 00000000..88c3cd1d
--- /dev/null
+++ b/gem/test/golden/strict/sheet/content_top.html
@@ -0,0 +1 @@
+<template data-ruby-ui--sheet-target="content"><div data-controller="ruby-ui--sheet-content"><div class="fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm 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]:fill-mode-forwards" data-action="click-&gt;ruby-ui--sheet-content#close" data-ruby-ui--sheet-content-target="backdrop" data-state="open"></div><div class="fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-scroll inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top" data-ruby-ui--sheet-content-target="panel" data-state="open">body<button class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" data-action="click-&gt;ruby-ui--sheet-content#close" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></div></div></template>
\ No newline at end of file
diff --git a/gem/test/golden/strict/sheet/default.html b/gem/test/golden/strict/sheet/default.html
new file mode 100644
index 00000000..c34b5a4e
--- /dev/null
+++ b/gem/test/golden/strict/sheet/default.html
@@ -0,0 +1 @@
+<div data-controller="ruby-ui--sheet" data-ruby-ui--sheet-open-value="false"><div data-action="click-&gt;ruby-ui--sheet#open"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" type="button">Open Sheet</button></div><template data-ruby-ui--sheet-target="content"><div data-controller="ruby-ui--sheet-content"><div class="fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm 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]:fill-mode-forwards" data-action="click-&gt;ruby-ui--sheet-content#close" data-ruby-ui--sheet-content-target="backdrop" data-state="open"></div><div class="fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-scroll inset-y-0 right-0 h-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm" data-ruby-ui--sheet-content-target="panel" data-state="open"><div class="flex flex-col space-y-1.5 text-center sm:text-left"><h3 class="text-lg font-semibold leading-none tracking-tight">Edit profile</h3><p class="text-sm text-muted-foreground">Make changes to your profile here.</p></div><div class="py-4"><input class="flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] border-border ring-0 ring-ring/0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:border-ring focus-visible:shadow-sm" data-action="input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" name="name" type="string"></div><div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-y-2 sm:gap-y-0"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed px-4 py-2 h-9 text-sm bg-primary text-primary-foreground shadow hover:bg-primary/90" type="submit">Save</button></div><button class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" data-action="click-&gt;ruby-ui--sheet-content#close" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></div></div></template></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/sheet/open.html b/gem/test/golden/strict/sheet/open.html
new file mode 100644
index 00000000..30d947cc
--- /dev/null
+++ b/gem/test/golden/strict/sheet/open.html
@@ -0,0 +1 @@
+<div data-controller="ruby-ui--sheet" data-ruby-ui--sheet-open-value="true">content</div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/shortcut_key/default.html b/gem/test/golden/strict/shortcut_key/default.html
new file mode 100644
index 00000000..52ba7456
--- /dev/null
+++ b/gem/test/golden/strict/shortcut_key/default.html
@@ -0,0 +1 @@
+<kbd class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"><span class="text-xs">Cmd</span>K</kbd>
\ No newline at end of file
diff --git a/gem/test/golden/strict/sidebar/collapsible_icon_right_floating.html b/gem/test/golden/strict/sidebar/collapsible_icon_right_floating.html
new file mode 100644
index 00000000..8df11625
--- /dev/null
+++ b/gem/test/golden/strict/sidebar/collapsible_icon_right_floating.html
@@ -0,0 +1 @@
+<div data-action="ruby--ui-sidebar:open-&gt;ruby-ui--sheet#open:self" data-controller="ruby-ui--sheet" data-ruby-ui--sheet-open-value="false" data-ruby-ui--sidebar-target="mobileSidebar"><template data-ruby-ui--sheet-target="content"><div data-controller="ruby-ui--sheet-content"><div class="fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm 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]:fill-mode-forwards" data-action="click-&gt;ruby-ui--sheet-content#close" data-ruby-ui--sheet-content-target="backdrop" data-state="open"></div><div class="fixed pointer-events-auto z-50 gap-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-scroll inset-y-0 right-0 h-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&amp;&gt;button]:hidden" data-mobile="true" data-ruby-ui--sheet-content-target="panel" data-sidebar="sidebar" data-state="open" style="--sidebar-width: 18rem;"><div class="flex flex-col space-y-1.5 text-center sm:text-left sr-only"><h3 class="text-lg font-semibold leading-none tracking-tight">Sidebar</h3><p class="text-sm text-muted-foreground">Displays the mobile sidebar.</p></div><div class="flex h-full w-full flex-col"><div class="flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden" data-sidebar="content">Body</div></div><button class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" data-action="click-&gt;ruby-ui--sheet-content#close" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></div></div></template></div><div class="group peer hidden text-sidebar-foreground md:block" data-collapsible="icon" data-collapsible-kind="icon" data-ruby-ui--sidebar-target="sidebar" data-side="right" data-state="collapsed" data-variant="floating"><div class="relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"></div><div class="fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"><div class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow" data-sidebar="sidebar"><div class="flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden" data-sidebar="content">Body</div></div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/sidebar/collapsible_offcanvas.html b/gem/test/golden/strict/sidebar/collapsible_offcanvas.html
new file mode 100644
index 00000000..1e8b9505
--- /dev/null
+++ b/gem/test/golden/strict/sidebar/collapsible_offcanvas.html
@@ -0,0 +1 @@
+<div class="group/sidebar-wrapper [&amp;:has([data-variant=inset])]:bg-sidebar flex min-h-svh w-full" data-controller="ruby-ui--sidebar" style="--sidebar-width: 16rem; --sidebar-width-icon: 3rem;"><div data-action="ruby--ui-sidebar:open-&gt;ruby-ui--sheet#open:self" data-controller="ruby-ui--sheet" data-ruby-ui--sheet-open-value="false" data-ruby-ui--sidebar-target="mobileSidebar"><template data-ruby-ui--sheet-target="content"><div data-controller="ruby-ui--sheet-content"><div class="fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm 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]:fill-mode-forwards" data-action="click-&gt;ruby-ui--sheet-content#close" data-ruby-ui--sheet-content-target="backdrop" data-state="open"></div><div class="fixed pointer-events-auto z-50 gap-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-scroll inset-y-0 left-0 h-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&amp;&gt;button]:hidden" data-mobile="true" data-ruby-ui--sheet-content-target="panel" data-sidebar="sidebar" data-state="open" style="--sidebar-width: 18rem;"><div class="flex flex-col space-y-1.5 text-center sm:text-left sr-only"><h3 class="text-lg font-semibold leading-none tracking-tight">Sidebar</h3><p class="text-sm text-muted-foreground">Displays the mobile sidebar.</p></div><div class="flex h-full w-full flex-col"><div class="flex flex-col gap-2 p-2" data-sidebar="header"><div class="relative flex w-full min-w-0 flex-col p-2" data-sidebar="group"><div class="w-full text-sm" data-sidebar="group-content"><input class="flex rounded-md border px-3 py-1 text-sm transition-[color,box-shadow] border-border ring-0 ring-ring/0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:border-ring focus-visible:shadow-sm h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring" data-action="input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" data-sidebar="input" id="search" placeholder="Search the docs" type="string"></div></div></div><div class="flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden" data-sidebar="content"><div class="relative flex w-full min-w-0 flex-col p-2" data-sidebar="group"><div class="flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0" data-sidebar="group-label">Application</div><button class="absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 after:absolute after:-inset-2 after:md:hidden group-data-[collapsible=icon]:hidden" data-sidebar="group-action">Add</button><div class="w-full text-sm" data-sidebar="group-content"><ul class="flex w-full min-w-0 flex-col gap-1" data-sidebar="menu"><ul class="group/menu-item relative" data-sidebar="menu-item"><a class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-none ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&amp;&gt;span:last-child]:truncate [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm" data-active="true" data-sidebar="menu-button" data-size="default" href="/settings">Settings</a><button class="absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 after:absolute after:-inset-2 after:md:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=icon]:hidden" data-sidebar="menu-action">More</button><div class="pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=icon]:hidden" data-sidebar="menu-badge">3</div><ul class="mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden" data-sidebar="menu-sub"><li><a class="flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&amp;&gt;span:last-child]:truncate [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 [&amp;&gt;svg]:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden text-sm" data-active="false" data-sidebar="menu-sub-button" data-size="md" href="/settings/team">Team</a></li></ul></ul><ul class="group/menu-item relative" data-sidebar="menu-item"><div class="flex h-8 items-center gap-2 rounded-md px-2" data-sidebar="menu-skeleton"><div class="animate-pulse bg-primary/10 size-4 rounded-md" data-sidebar="menu-skeleton-icon"></div><div class="animate-pulse rounded-md bg-primary/10 h-4 max-w-[var(--skeleton-width)] flex-1" data-sidebar="menu-skeleton-text" style="--skeleton-width: 51%;"></div></div></ul><ul class="group/menu-item relative" data-sidebar="menu-item"><div class="flex h-8 items-center gap-2 rounded-md px-2" data-sidebar="menu-skeleton"><div class="animate-pulse rounded-md bg-primary/10 h-4 max-w-[var(--skeleton-width)] flex-1" data-sidebar="menu-skeleton-text" style="--skeleton-width: 52%;"></div></div></ul></ul></div></div><div class="shrink-0 h-[1px] mx-2 w-auto bg-sidebar-border" data-sidebar="separator" role="none"></div></div><div class="flex flex-col gap-2 p-2" data-sidebar="footer">Footer</div><button class="absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex [[data-side=left]_&amp;]:cursor-w-resize [[data-side=right]_&amp;]:cursor-e-resize [[data-side=left][data-state=collapsed]_&amp;]:cursor-e-resize [[data-side=right][data-state=collapsed]_&amp;]:cursor-w-resize group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar [[data-side=left][data-collapsible=offcanvas]_&amp;]:-right-2 [[data-side=right][data-collapsible=offcanvas]_&amp;]:-left-2" data-action="click-&gt;ruby-ui--sidebar#toggle" data-sidebar="rail" data-tabindex="-1"></button></div><button class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" data-action="click-&gt;ruby-ui--sheet-content#close" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></div></div></template></div><div class="group peer hidden text-sidebar-foreground md:block" data-collapsible="" data-collapsible-kind="offcanvas" data-ruby-ui--sidebar-target="sidebar" data-side="left" data-state="expanded" data-variant="sidebar"><div class="relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180 group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"></div><div class="fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l"><div class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow" data-sidebar="sidebar"><div class="flex flex-col gap-2 p-2" data-sidebar="header"><div class="relative flex w-full min-w-0 flex-col p-2" data-sidebar="group"><div class="w-full text-sm" data-sidebar="group-content"><input class="flex rounded-md border px-3 py-1 text-sm transition-[color,box-shadow] border-border ring-0 ring-ring/0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:border-ring focus-visible:shadow-sm h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring" data-action="input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" data-sidebar="input" id="search" placeholder="Search the docs" type="string"></div></div></div><div class="flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden" data-sidebar="content"><div class="relative flex w-full min-w-0 flex-col p-2" data-sidebar="group"><div class="flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0" data-sidebar="group-label">Application</div><button class="absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 after:absolute after:-inset-2 after:md:hidden group-data-[collapsible=icon]:hidden" data-sidebar="group-action">Add</button><div class="w-full text-sm" data-sidebar="group-content"><ul class="flex w-full min-w-0 flex-col gap-1" data-sidebar="menu"><ul class="group/menu-item relative" data-sidebar="menu-item"><a class="peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-none ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&amp;&gt;span:last-child]:truncate [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm" data-active="true" data-sidebar="menu-button" data-size="default" href="/settings">Settings</a><button class="absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 after:absolute after:-inset-2 after:md:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=icon]:hidden" data-sidebar="menu-action">More</button><div class="pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=icon]:hidden" data-sidebar="menu-badge">3</div><ul class="mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden" data-sidebar="menu-sub"><li><a class="flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&amp;&gt;span:last-child]:truncate [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 [&amp;&gt;svg]:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden text-sm" data-active="false" data-sidebar="menu-sub-button" data-size="md" href="/settings/team">Team</a></li></ul></ul><ul class="group/menu-item relative" data-sidebar="menu-item"><div class="flex h-8 items-center gap-2 rounded-md px-2" data-sidebar="menu-skeleton"><div class="animate-pulse bg-primary/10 size-4 rounded-md" data-sidebar="menu-skeleton-icon"></div><div class="animate-pulse rounded-md bg-primary/10 h-4 max-w-[var(--skeleton-width)] flex-1" data-sidebar="menu-skeleton-text" style="--skeleton-width: 53%;"></div></div></ul><ul class="group/menu-item relative" data-sidebar="menu-item"><div class="flex h-8 items-center gap-2 rounded-md px-2" data-sidebar="menu-skeleton"><div class="animate-pulse rounded-md bg-primary/10 h-4 max-w-[var(--skeleton-width)] flex-1" data-sidebar="menu-skeleton-text" style="--skeleton-width: 54%;"></div></div></ul></ul></div></div><div class="shrink-0 h-[1px] mx-2 w-auto bg-sidebar-border" data-sidebar="separator" role="none"></div></div><div class="flex flex-col gap-2 p-2" data-sidebar="footer">Footer</div><button class="absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex [[data-side=left]_&amp;]:cursor-w-resize [[data-side=right]_&amp;]:cursor-e-resize [[data-side=left][data-state=collapsed]_&amp;]:cursor-e-resize [[data-side=right][data-state=collapsed]_&amp;]:cursor-w-resize group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar [[data-side=left][data-collapsible=offcanvas]_&amp;]:-right-2 [[data-side=right][data-collapsible=offcanvas]_&amp;]:-left-2" data-action="click-&gt;ruby-ui--sidebar#toggle" data-sidebar="rail" data-tabindex="-1"></button></div></div></div><main class="relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed hover:bg-accent hover:text-accent-foreground h-7 w-7 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0" data-action="click-&gt;ruby-ui--sidebar#toggle" data-sidebar="trigger" type="button"><svg class="lucide lucide-panel-left" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><rect height="18" rx="2" width="18" x="3" y="3"></rect><path d="M9 3v18"></path></svg><span class="sr-only">Toggle Sidebar</span></button></main></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/sidebar/mobile.html b/gem/test/golden/strict/sidebar/mobile.html
new file mode 100644
index 00000000..ae7ed256
--- /dev/null
+++ b/gem/test/golden/strict/sidebar/mobile.html
@@ -0,0 +1 @@
+<div data-action="ruby--ui-sidebar:open-&gt;ruby-ui--sheet#open:self" data-controller="ruby-ui--sheet" data-ruby-ui--sheet-open-value="false" data-ruby-ui--sidebar-target="mobileSidebar"><template data-ruby-ui--sheet-target="content"><div data-controller="ruby-ui--sheet-content"><div class="fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm 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]:fill-mode-forwards" data-action="click-&gt;ruby-ui--sheet-content#close" data-ruby-ui--sheet-content-target="backdrop" data-state="open"></div><div class="fixed pointer-events-auto z-50 gap-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-scroll inset-y-0 right-0 h-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&amp;&gt;button]:hidden" data-mobile="true" data-ruby-ui--sheet-content-target="panel" data-sidebar="sidebar" data-state="open" style="--sidebar-width: 18rem;"><div class="flex flex-col space-y-1.5 text-center sm:text-left sr-only"><h3 class="text-lg font-semibold leading-none tracking-tight">Sidebar</h3><p class="text-sm text-muted-foreground">Displays the mobile sidebar.</p></div><div class="flex h-full w-full flex-col">Body</div><button class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" data-action="click-&gt;ruby-ui--sheet-content#close" type="button"><svg class="h-4 w-4" fill="none" height="15" viewBox="0 0 15 15" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></div></div></template></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/sidebar/non_collapsible.html b/gem/test/golden/strict/sidebar/non_collapsible.html
new file mode 100644
index 00000000..252598e2
--- /dev/null
+++ b/gem/test/golden/strict/sidebar/non_collapsible.html
@@ -0,0 +1 @@
+<div class="group/sidebar-wrapper [&amp;:has([data-variant=inset])]:bg-sidebar flex min-h-svh w-full" data-controller="ruby-ui--sidebar" style="--sidebar-width: 16rem; --sidebar-width-icon: 3rem;"><div class="flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar text-sidebar-foreground"><div class="flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden" data-sidebar="content">Body</div></div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/skeleton/default.html b/gem/test/golden/strict/skeleton/default.html
new file mode 100644
index 00000000..a3316ce7
--- /dev/null
+++ b/gem/test/golden/strict/skeleton/default.html
@@ -0,0 +1 @@
+<div class="animate-pulse rounded-md bg-primary/10 w-14 h-14"></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/switch/checked_without_hidden_input.html b/gem/test/golden/strict/switch/checked_without_hidden_input.html
new file mode 100644
index 00000000..abd2fef3
--- /dev/null
+++ b/gem/test/golden/strict/switch/checked_without_hidden_input.html
@@ -0,0 +1 @@
+<label class="peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors bg-input has-checked:bg-primary has-disabled:cursor-not-allowed has-disabled:opacity-50 has-aria-disabled:cursor-not-allowed has-aria-disabled:opacity-50 has-aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background" role="switch"><input checked class="hidden peer" name="notifications" type="checkbox" value="yes"><span class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform translate-x-0 peer-checked:translate-x-5"></span></label>
\ No newline at end of file
diff --git a/gem/test/golden/strict/switch/default.html b/gem/test/golden/strict/switch/default.html
new file mode 100644
index 00000000..71bfe334
--- /dev/null
+++ b/gem/test/golden/strict/switch/default.html
@@ -0,0 +1 @@
+<label class="peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors bg-input has-checked:bg-primary has-disabled:cursor-not-allowed has-disabled:opacity-50 has-aria-disabled:cursor-not-allowed has-aria-disabled:opacity-50 has-aria-disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background" role="switch"><input name="notifications" type="hidden" value="0"><input class="hidden peer" name="notifications" type="checkbox" value="1"><span class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform translate-x-0 peer-checked:translate-x-5"></span></label>
\ No newline at end of file
diff --git a/gem/test/golden/strict/table/default.html b/gem/test/golden/strict/table/default.html
new file mode 100644
index 00000000..ccbe62fe
--- /dev/null
+++ b/gem/test/golden/strict/table/default.html
@@ -0,0 +1 @@
+<div class="relative w-full overflow-auto"><table class="w-full caption-bottom text-sm"><caption class="mt-4 text-sm text-muted-foreground">Employees at Acme inc.</caption><thead class="[&amp;_tr]:border-b"><tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"><th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px]">Name</th><th class="h-10 px-2 align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px] text-right">Amount</th></tr></thead><tbody class="[&amp;_tr:last-child]:border-0"><tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"><td class="p-2 align-middle [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px] font-medium">INV-0001</td><td class="p-2 align-middle [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px] text-right">100</td></tr></tbody><tfoot class="border-t bg-muted/50 font-medium[&amp; amp;&gt;tr]:last:border-b-0"><tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"><th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px]" colspan="1">Total</th><th class="h-10 px-2 align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px] text-right">100</th></tr></tfoot></table></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/table/detached_row.html b/gem/test/golden/strict/table/detached_row.html
new file mode 100644
index 00000000..f514a934
--- /dev/null
+++ b/gem/test/golden/strict/table/detached_row.html
@@ -0,0 +1 @@
+<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"><td class="p-2 align-middle [&amp;:has([role=checkbox])]:pr-0 [&amp;&gt;[role=checkbox]]:translate-y-[2px]">detached</td></tr>
\ No newline at end of file
diff --git a/gem/test/golden/strict/tabs/default.html b/gem/test/golden/strict/tabs/default.html
new file mode 100644
index 00000000..505974f3
--- /dev/null
+++ b/gem/test/golden/strict/tabs/default.html
@@ -0,0 +1 @@
+<div class="w-96" data-controller="ruby-ui--tabs" data-ruby-ui--tabs-active-value="account"><div class="inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground"><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" data-action="click-&gt;ruby-ui--tabs#show" data-ruby-ui--tabs-target="trigger" data-value="account" type="button">Account</button><a class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" data-action="click-&gt;ruby-ui--tabs#show" data-ruby-ui--tabs-target="trigger" data-value="password" href="#password">Password</a></div><div class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hidden" data-ruby-ui--tabs-target="content" data-value="account">Account panel</div><div class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hidden" data-ruby-ui--tabs-target="content" data-value="password">Password panel</div></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/textarea/default.html b/gem/test/golden/strict/textarea/default.html
new file mode 100644
index 00000000..630b1d1e
--- /dev/null
+++ b/gem/test/golden/strict/textarea/default.html
@@ -0,0 +1 @@
+<textarea class="flex w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors border-border placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" data-action="input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" name="bio" placeholder="Tell us about yourself" rows="4"></textarea>
\ No newline at end of file
diff --git a/gem/test/golden/strict/textarea/rows_and_content.html b/gem/test/golden/strict/textarea/rows_and_content.html
new file mode 100644
index 00000000..7daf43ba
--- /dev/null
+++ b/gem/test/golden/strict/textarea/rows_and_content.html
@@ -0,0 +1 @@
+<textarea class="flex w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors border-border placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" data-action="input-&gt;ruby-ui--form-field#onInput invalid-&gt;ruby-ui--form-field#onInvalid" data-ruby-ui--form-field-target="input" name="bio" rows="8">existing content</textarea>
\ No newline at end of file
diff --git a/gem/test/golden/strict/theme_toggle/default.html b/gem/test/golden/strict/theme_toggle/default.html
new file mode 100644
index 00000000..fca5e855
--- /dev/null
+++ b/gem/test/golden/strict/theme_toggle/default.html
@@ -0,0 +1 @@
+<span class="contents" data-action="click-&gt;ruby-ui--toggle#toggle ruby-ui--toggle:change-&gt;ruby-ui--theme-toggle#apply" data-controller="ruby-ui--toggle ruby-ui--theme-toggle" data-ruby-ui--toggle-pressed-value="false" data-ruby-ui--toggle-unpressed-value-value="" data-ruby-ui--toggle-value-value="1"><button aria-label="Toggle theme" aria-pressed="false" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-9 min-w-9 px-2" data-ruby-ui--toggle-target="button" data-state="off" type="button">T</button></span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/toast/item_with_all_slots.html b/gem/test/golden/strict/toast/item_with_all_slots.html
new file mode 100644
index 00000000..b3f1950e
--- /dev/null
+++ b/gem/test/golden/strict/toast/item_with_all_slots.html
@@ -0,0 +1 @@
+<div aria-label="Notifications" aria-live="polite" class="group/toaster pointer-events-none fixed z-[100] p-4 sm:p-6 data-[position=top-left]:top-0 data-[position=top-left]:left-0 data-[position=top-center]:top-0 data-[position=top-center]:left-1/2 data-[position=top-center]:-translate-x-1/2 data-[position=top-right]:top-0 data-[position=top-right]:right-0 data-[position=bottom-left]:bottom-0 data-[position=bottom-left]:left-0 data-[position=bottom-center]:bottom-0 data-[position=bottom-center]:left-1/2 data-[position=bottom-center]:-translate-x-1/2 data-[position=bottom-right]:bottom-0 data-[position=bottom-right]:right-0" data-close-button="false" data-controller="ruby-ui--toaster" data-position="bottom-right" data-ruby-ui--toaster-close-button-value="false" data-ruby-ui--toaster-dir-value="ltr" data-ruby-ui--toaster-duration-value="4000" data-ruby-ui--toaster-expand-value="false" data-ruby-ui--toaster-gap-value="14" data-ruby-ui--toaster-hotkey-value="alt+t" data-ruby-ui--toaster-max-value="3" data-ruby-ui--toaster-offset-value="24" data-ruby-ui--toaster-position-value="bottom-right" data-ruby-ui--toaster-rich-colors-value="false" data-ruby-ui--toaster-theme-value="system" data-turbo-permanent="" id="ruby-ui-toaster-region" role="region"><ol class="pointer-events-auto relative m-0 p-0 list-none w-[356px] max-w-full" id="ruby-ui-toaster"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="false" data-ruby-ui--toast-duration-value="6000" data-ruby-ui--toast-invert-value="true" data-ruby-ui--toast-on-auto-close-value="log" data-ruby-ui--toast-on-dismiss-value="log" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="error" id="t1" role="alert" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z"></path><path d="m15 9-6 6"></path><path d="m9 9 6 6"></path></svg></span><div class="font-medium leading-normal" data-slot="title">Upload failed</div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description">The file is too large.</div><button class="inline-flex h-6 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium bg-foreground text-background border-0 ml-auto hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-ring transition-opacity disabled:pointer-events-none disabled:opacity-50" data-action="retry" data-slot="action" type="button">Retry</button><button class="inline-flex h-6 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium bg-foreground/10 text-foreground border-0 ml-auto hover:bg-foreground/15 focus:outline-none focus:ring-2 focus:ring-ring transition-colors" data-action="click-&gt;ruby-ui--toast#dismiss" data-slot="cancel" type="button">Dismiss</button><button aria-label="Close toast" class="absolute right-2 top-2 size-6 cursor-pointer rounded-md text-foreground/60 p-0 flex items-center justify-center transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-1 focus:ring-ring" data-action="click-&gt;ruby-ui--toast#dismiss" data-slot="close" type="button"><svg class="size-3.5" fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg><span class="sr-only">Close</span></button></li></ol><template data-ruby-ui--toaster-target="skeleton" data-variant="default"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="default" role="status" tabindex="0"><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="success"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="success" role="status" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="error"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="error" role="alert" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z"></path><path d="m15 9-6 6"></path><path d="m9 9 6 6"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="warning"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="warning" role="status" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="info"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="info" role="status" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="loading"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="loading" role="status" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 animate-spin -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div></li></template><template data-ruby-ui--toaster-target="actionTpl"><button class="inline-flex h-6 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium bg-foreground text-background border-0 ml-auto hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-ring transition-opacity disabled:pointer-events-none disabled:opacity-50" data-slot="action" type="button"></button></template><template data-ruby-ui--toaster-target="cancelTpl"><button class="inline-flex h-6 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium bg-foreground/10 text-foreground border-0 ml-auto hover:bg-foreground/15 focus:outline-none focus:ring-2 focus:ring-ring transition-colors" data-action="click-&gt;ruby-ui--toast#dismiss" data-slot="cancel" type="button"></button></template><template data-ruby-ui--toaster-target="closeTpl"><button aria-label="Close toast" class="absolute right-2 top-2 size-6 cursor-pointer rounded-md text-foreground/60 p-0 flex items-center justify-center transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-1 focus:ring-ring" data-action="click-&gt;ruby-ui--toast#dismiss" data-slot="close" type="button"><svg class="size-3.5" fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg><span class="sr-only">Close</span></button></template></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/toast/region_top_center_with_close_button.html b/gem/test/golden/strict/toast/region_top_center_with_close_button.html
new file mode 100644
index 00000000..eb86da06
--- /dev/null
+++ b/gem/test/golden/strict/toast/region_top_center_with_close_button.html
@@ -0,0 +1 @@
+<div aria-label="Notifications" aria-live="polite" class="group/toaster pointer-events-none fixed z-[100] p-4 sm:p-6 data-[position=top-left]:top-0 data-[position=top-left]:left-0 data-[position=top-center]:top-0 data-[position=top-center]:left-1/2 data-[position=top-center]:-translate-x-1/2 data-[position=top-right]:top-0 data-[position=top-right]:right-0 data-[position=bottom-left]:bottom-0 data-[position=bottom-left]:left-0 data-[position=bottom-center]:bottom-0 data-[position=bottom-center]:left-1/2 data-[position=bottom-center]:-translate-x-1/2 data-[position=bottom-right]:bottom-0 data-[position=bottom-right]:right-0" data-close-button="true" data-controller="ruby-ui--toaster" data-position="top-center" data-ruby-ui--toaster-close-button-value="true" data-ruby-ui--toaster-dir-value="rtl" data-ruby-ui--toaster-duration-value="8000" data-ruby-ui--toaster-expand-value="true" data-ruby-ui--toaster-gap-value="14" data-ruby-ui--toaster-hotkey-value="ctrl+shift+t" data-ruby-ui--toaster-max-value="5" data-ruby-ui--toaster-offset-value="24" data-ruby-ui--toaster-position-value="top-center" data-ruby-ui--toaster-rich-colors-value="true" data-ruby-ui--toaster-theme-value="dark" data-turbo-permanent="" id="ruby-ui-toaster-region" role="region"><ol class="pointer-events-auto relative m-0 p-0 list-none w-[356px] max-w-full" id="ruby-ui-toaster"></ol><template data-ruby-ui--toaster-target="skeleton" data-variant="default"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="default" role="status" tabindex="0"><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div><button aria-label="Close toast" class="absolute right-2 top-2 size-6 cursor-pointer rounded-md text-foreground/60 p-0 flex items-center justify-center transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-1 focus:ring-ring" data-action="click-&gt;ruby-ui--toast#dismiss" data-slot="close" type="button"><svg class="size-3.5" fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg><span class="sr-only">Close</span></button></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="success"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="success" role="status" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div><button aria-label="Close toast" class="absolute right-2 top-2 size-6 cursor-pointer rounded-md text-foreground/60 p-0 flex items-center justify-center transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-1 focus:ring-ring" data-action="click-&gt;ruby-ui--toast#dismiss" data-slot="close" type="button"><svg class="size-3.5" fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg><span class="sr-only">Close</span></button></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="error"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="error" role="alert" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z"></path><path d="m15 9-6 6"></path><path d="m9 9 6 6"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div><button aria-label="Close toast" class="absolute right-2 top-2 size-6 cursor-pointer rounded-md text-foreground/60 p-0 flex items-center justify-center transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-1 focus:ring-ring" data-action="click-&gt;ruby-ui--toast#dismiss" data-slot="close" type="button"><svg class="size-3.5" fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg><span class="sr-only">Close</span></button></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="warning"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="warning" role="status" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div><button aria-label="Close toast" class="absolute right-2 top-2 size-6 cursor-pointer rounded-md text-foreground/60 p-0 flex items-center justify-center transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-1 focus:ring-ring" data-action="click-&gt;ruby-ui--toast#dismiss" data-slot="close" type="button"><svg class="size-3.5" fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg><span class="sr-only">Close</span></button></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="info"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="info" role="status" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div><button aria-label="Close toast" class="absolute right-2 top-2 size-6 cursor-pointer rounded-md text-foreground/60 p-0 flex items-center justify-center transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-1 focus:ring-ring" data-action="click-&gt;ruby-ui--toast#dismiss" data-slot="close" type="button"><svg class="size-3.5" fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg><span class="sr-only">Close</span></button></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="loading"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="loading" role="status" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 animate-spin -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div><button aria-label="Close toast" class="absolute right-2 top-2 size-6 cursor-pointer rounded-md text-foreground/60 p-0 flex items-center justify-center transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-1 focus:ring-ring" data-action="click-&gt;ruby-ui--toast#dismiss" data-slot="close" type="button"><svg class="size-3.5" fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg><span class="sr-only">Close</span></button></li></template><template data-ruby-ui--toaster-target="actionTpl"><button class="inline-flex h-6 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium bg-foreground text-background border-0 ml-auto hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-ring transition-opacity disabled:pointer-events-none disabled:opacity-50" data-slot="action" type="button"></button></template><template data-ruby-ui--toaster-target="cancelTpl"><button class="inline-flex h-6 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium bg-foreground/10 text-foreground border-0 ml-auto hover:bg-foreground/15 focus:outline-none focus:ring-2 focus:ring-ring transition-colors" data-action="click-&gt;ruby-ui--toast#dismiss" data-slot="cancel" type="button"></button></template><template data-ruby-ui--toaster-target="closeTpl"><button aria-label="Close toast" class="absolute right-2 top-2 size-6 cursor-pointer rounded-md text-foreground/60 p-0 flex items-center justify-center transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-1 focus:ring-ring" data-action="click-&gt;ruby-ui--toast#dismiss" data-slot="close" type="button"><svg class="size-3.5" fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg><span class="sr-only">Close</span></button></template></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/toast/region_with_flash.html b/gem/test/golden/strict/toast/region_with_flash.html
new file mode 100644
index 00000000..1b002c4f
--- /dev/null
+++ b/gem/test/golden/strict/toast/region_with_flash.html
@@ -0,0 +1 @@
+<div aria-label="Notifications" aria-live="polite" class="group/toaster pointer-events-none fixed z-[100] p-4 sm:p-6 data-[position=top-left]:top-0 data-[position=top-left]:left-0 data-[position=top-center]:top-0 data-[position=top-center]:left-1/2 data-[position=top-center]:-translate-x-1/2 data-[position=top-right]:top-0 data-[position=top-right]:right-0 data-[position=bottom-left]:bottom-0 data-[position=bottom-left]:left-0 data-[position=bottom-center]:bottom-0 data-[position=bottom-center]:left-1/2 data-[position=bottom-center]:-translate-x-1/2 data-[position=bottom-right]:bottom-0 data-[position=bottom-right]:right-0" data-close-button="false" data-controller="ruby-ui--toaster" data-position="bottom-right" data-ruby-ui--toaster-close-button-value="false" data-ruby-ui--toaster-dir-value="ltr" data-ruby-ui--toaster-duration-value="4000" data-ruby-ui--toaster-expand-value="false" data-ruby-ui--toaster-gap-value="14" data-ruby-ui--toaster-hotkey-value="alt+t" data-ruby-ui--toaster-max-value="3" data-ruby-ui--toaster-offset-value="24" data-ruby-ui--toaster-position-value="bottom-right" data-ruby-ui--toaster-rich-colors-value="false" data-ruby-ui--toaster-theme-value="system" data-turbo-permanent="" id="ruby-ui-toaster-region" role="region"><ol class="pointer-events-auto relative m-0 p-0 list-none w-[356px] max-w-full" id="ruby-ui-toaster"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="info" id="flash-notice" role="status" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg></span><div class="font-medium leading-normal" data-slot="title">Saved</div></li><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="warning" id="flash-alert" role="status" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><div class="font-medium leading-normal" data-slot="title">Careful</div></li></ol><template data-ruby-ui--toaster-target="skeleton" data-variant="default"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="default" role="status" tabindex="0"><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="success"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="success" role="status" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="error"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="error" role="alert" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z"></path><path d="m15 9-6 6"></path><path d="m9 9 6 6"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="warning"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="warning" role="status" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="info"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="info" role="status" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div></li></template><template data-ruby-ui--toaster-target="skeleton" data-variant="loading"><li aria-atomic="true" class="group/toast pointer-events-auto absolute left-0 right-0 flex w-[356px] max-w-full items-center gap-1.5 rounded-lg border bg-popover text-popover-foreground border-border p-4 text-[13px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] group-data-[close-button=true]/toaster:pr-10 transition-[transform,opacity] duration-300 ease-out will-change-transform opacity-[var(--opacity,1)] data-[state=pending]:opacity-0 data-[state=closing]:opacity-0 data-[swipe=move]:transition-none" data-controller="ruby-ui--toast" data-ruby-ui--toast-dismissible-value="true" data-ruby-ui--toast-invert-value="false" data-ruby-ui--toaster-target="toast" data-state="pending" data-swipe="none" data-variant="loading" role="status" tabindex="0"><span class="shrink-0 inline-flex items-center justify-start relative size-4 -ml-[3px] mr-1 text-foreground" data-slot="icon"><svg class="size-4 animate-spin -ml-px" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg></span><div class="flex flex-col gap-0.5 flex-1 min-w-0"><div class="font-medium leading-normal" data-slot="title"></div><div class="font-normal leading-[1.4] text-muted-foreground" data-slot="description"></div></div></li></template><template data-ruby-ui--toaster-target="actionTpl"><button class="inline-flex h-6 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium bg-foreground text-background border-0 ml-auto hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-ring transition-opacity disabled:pointer-events-none disabled:opacity-50" data-slot="action" type="button"></button></template><template data-ruby-ui--toaster-target="cancelTpl"><button class="inline-flex h-6 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium bg-foreground/10 text-foreground border-0 ml-auto hover:bg-foreground/15 focus:outline-none focus:ring-2 focus:ring-ring transition-colors" data-action="click-&gt;ruby-ui--toast#dismiss" data-slot="cancel" type="button"></button></template><template data-ruby-ui--toaster-target="closeTpl"><button aria-label="Close toast" class="absolute right-2 top-2 size-6 cursor-pointer rounded-md text-foreground/60 p-0 flex items-center justify-center transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-1 focus:ring-ring" data-action="click-&gt;ruby-ui--toast#dismiss" data-slot="close" type="button"><svg class="size-3.5" fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg><span class="sr-only">Close</span></button></template></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/toggle/default.html b/gem/test/golden/strict/toggle/default.html
new file mode 100644
index 00000000..5d4d2e7f
--- /dev/null
+++ b/gem/test/golden/strict/toggle/default.html
@@ -0,0 +1 @@
+<span class="contents" data-action="click-&gt;ruby-ui--toggle#toggle" data-controller="ruby-ui--toggle" data-ruby-ui--toggle-pressed-value="false" data-ruby-ui--toggle-unpressed-value-value="" data-ruby-ui--toggle-value-value="1"><button aria-pressed="false" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-9 min-w-9 px-2" data-ruby-ui--toggle-target="button" data-state="off" type="button">B</button></span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/toggle/disabled_small.html b/gem/test/golden/strict/toggle/disabled_small.html
new file mode 100644
index 00000000..a854a6ac
--- /dev/null
+++ b/gem/test/golden/strict/toggle/disabled_small.html
@@ -0,0 +1 @@
+<span class="contents inline-flex" data-action="click-&gt;ruby-ui--toggle#toggle" data-controller="ruby-ui--toggle" data-ruby-ui--toggle-pressed-value="false" data-ruby-ui--toggle-unpressed-value-value="" data-ruby-ui--toggle-value-value="1"><button aria-pressed="false" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-8 min-w-8 px-1.5" data-ruby-ui--toggle-target="button" data-state="off" disabled type="button">B</button></span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/toggle/pressed_outline_with_name.html b/gem/test/golden/strict/toggle/pressed_outline_with_name.html
new file mode 100644
index 00000000..652fd6cd
--- /dev/null
+++ b/gem/test/golden/strict/toggle/pressed_outline_with_name.html
@@ -0,0 +1 @@
+<span class="contents" data-action="click-&gt;ruby-ui--toggle#toggle" data-controller="ruby-ui--toggle" data-ruby-ui--toggle-pressed-value="true" data-ruby-ui--toggle-unpressed-value-value="0" data-ruby-ui--toggle-value-value="1"><button aria-pressed="true" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground h-10 min-w-10 px-2.5" data-ruby-ui--toggle-target="button" data-state="on" type="button">B</button><input data-ruby-ui--toggle-target="input" name="bold" type="hidden" value="1"></span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/toggle_group/disabled.html b/gem/test/golden/strict/toggle_group/disabled.html
new file mode 100644
index 00000000..fdbe4505
--- /dev/null
+++ b/gem/test/golden/strict/toggle_group/disabled.html
@@ -0,0 +1 @@
+<div class="flex w-fit items-center rounded-md" data-controller="ruby-ui--toggle-group" data-orientation="horizontal" data-ruby-ui--toggle-group-name-value="fmt" data-ruby-ui--toggle-group-type-value="multiple" data-spacing="0" role="group"><button aria-pressed="false" class="inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-9 w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10 rounded-none shadow-none first-of-type:rounded-l-md last-of-type:rounded-r-md" data-action="click-&gt;ruby-ui--toggle-group#select keydown-&gt;ruby-ui--toggle-group#navigate" data-ruby-ui--toggle-group-target="item" data-state="off" data-value="bold" disabled tabindex="0" type="button">B</button></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/toggle_group/multiple_outline_spaced_vertical.html b/gem/test/golden/strict/toggle_group/multiple_outline_spaced_vertical.html
new file mode 100644
index 00000000..cb673114
--- /dev/null
+++ b/gem/test/golden/strict/toggle_group/multiple_outline_spaced_vertical.html
@@ -0,0 +1 @@
+<div class="flex w-fit flex-col items-stretch rounded-md gap-2" data-controller="ruby-ui--toggle-group" data-orientation="vertical" data-ruby-ui--toggle-group-name-value="fmt" data-ruby-ui--toggle-group-type-value="multiple" data-spacing="2" role="group"><button aria-pressed="true" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground h-8 w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10" data-action="click-&gt;ruby-ui--toggle-group#select keydown-&gt;ruby-ui--toggle-group#navigate" data-ruby-ui--toggle-group-target="item" data-state="on" data-value="bold" tabindex="0" type="button">B</button><button aria-pressed="true" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground h-8 w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10" data-action="click-&gt;ruby-ui--toggle-group#select keydown-&gt;ruby-ui--toggle-group#navigate" data-ruby-ui--toggle-group-target="item" data-state="on" data-value="italic" tabindex="0" type="button">I</button><button aria-pressed="false" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground h-8 w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10" data-action="click-&gt;ruby-ui--toggle-group#select keydown-&gt;ruby-ui--toggle-group#navigate" data-ruby-ui--toggle-group-target="item" data-state="off" data-value="underline" tabindex="0" type="button">U</button><input data-ruby-ui--toggle-group-target="input" name="fmt[]" type="hidden" value="bold"><input data-ruby-ui--toggle-group-target="input" name="fmt[]" type="hidden" value="italic"></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/toggle_group/single.html b/gem/test/golden/strict/toggle_group/single.html
new file mode 100644
index 00000000..728918c8
--- /dev/null
+++ b/gem/test/golden/strict/toggle_group/single.html
@@ -0,0 +1 @@
+<div class="flex w-fit items-center rounded-md" data-controller="ruby-ui--toggle-group" data-orientation="horizontal" data-ruby-ui--toggle-group-name-value="align" data-ruby-ui--toggle-group-type-value="single" data-spacing="0" role="radiogroup"><button aria-checked="false" class="inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-9 w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10 rounded-none shadow-none first-of-type:rounded-l-md last-of-type:rounded-r-md" data-action="click-&gt;ruby-ui--toggle-group#select keydown-&gt;ruby-ui--toggle-group#navigate" data-ruby-ui--toggle-group-target="item" data-state="off" data-value="left" role="radio" tabindex="-1" type="button">L</button><button aria-checked="true" class="inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-9 w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10 rounded-none shadow-none first-of-type:rounded-l-md last-of-type:rounded-r-md" data-action="click-&gt;ruby-ui--toggle-group#select keydown-&gt;ruby-ui--toggle-group#navigate" data-ruby-ui--toggle-group-target="item" data-state="on" data-value="right" role="radio" tabindex="0" type="button">R</button><input data-ruby-ui--toggle-group-target="input" name="align" type="hidden" value="right"></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/tooltip/default.html b/gem/test/golden/strict/tooltip/default.html
new file mode 100644
index 00000000..06f64c6b
--- /dev/null
+++ b/gem/test/golden/strict/tooltip/default.html
@@ -0,0 +1 @@
+<div class="group" data-controller="ruby-ui--tooltip" data-ruby-ui--tooltip-placement-value="top"><div data-action="mouseenter-&gt;ruby-ui--tooltip#show mouseleave-&gt;ruby-ui--tooltip#hide focus-&gt;ruby-ui--tooltip#show blur-&gt;ruby-ui--tooltip#hide" data-ruby-ui--tooltip-target="trigger" variant="outline"><button class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed h-9 w-9 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground" type="button">?</button></div><template data-ruby-ui--tooltip-target="content"><div class="invisible pointer-events-none w-fit max-w-[calc(100vw-2rem)] text-balance break-words absolute top-0 left-0 z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 data-[state=open]:visible data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:visible data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:fill-mode-forwards" id="tooltip00000001">Add to library</div></template></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/tooltip/placement_right.html b/gem/test/golden/strict/tooltip/placement_right.html
new file mode 100644
index 00000000..06472a31
--- /dev/null
+++ b/gem/test/golden/strict/tooltip/placement_right.html
@@ -0,0 +1 @@
+<div class="group" data-controller="ruby-ui--tooltip" data-ruby-ui--tooltip-placement-value="right"><template data-ruby-ui--tooltip-target="content"><div class="invisible pointer-events-none w-fit max-w-[calc(100vw-2rem)] text-balance break-words absolute top-0 left-0 z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 data-[state=open]:visible data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:visible data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:fill-mode-forwards" id="tooltip00000001">Tip</div></template></div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/blockquote.html b/gem/test/golden/strict/typography/blockquote.html
new file mode 100644
index 00000000..df65b6ea
--- /dev/null
+++ b/gem/test/golden/strict/typography/blockquote.html
@@ -0,0 +1 @@
+<blockquote class="mt-6 border-l-2 pl-6 italic">After all, we are all Rubyists.</blockquote>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/heading_custom_size.html b/gem/test/golden/strict/typography/heading_custom_size.html
new file mode 100644
index 00000000..e3a126d1
--- /dev/null
+++ b/gem/test/golden/strict/typography/heading_custom_size.html
@@ -0,0 +1 @@
+<h2 class="scroll-m-20 font-bold tracking-tight text-3xl lg:text-4xl">Custom Heading</h2>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/heading_level_1.html b/gem/test/golden/strict/typography/heading_level_1.html
new file mode 100644
index 00000000..7fe3cfcd
--- /dev/null
+++ b/gem/test/golden/strict/typography/heading_level_1.html
@@ -0,0 +1 @@
+<h1 class="scroll-m-20 font-bold tracking-tight text-3xl lg:text-4xl">H1</h1>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/heading_level_2.html b/gem/test/golden/strict/typography/heading_level_2.html
new file mode 100644
index 00000000..c3a9f0bc
--- /dev/null
+++ b/gem/test/golden/strict/typography/heading_level_2.html
@@ -0,0 +1 @@
+<h2 class="scroll-m-20 font-bold tracking-tight text-2xl">H2</h2>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/heading_level_3.html b/gem/test/golden/strict/typography/heading_level_3.html
new file mode 100644
index 00000000..32e609ff
--- /dev/null
+++ b/gem/test/golden/strict/typography/heading_level_3.html
@@ -0,0 +1 @@
+<h3 class="scroll-m-20 font-bold tracking-tight text-xl">H3</h3>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/heading_level_4.html b/gem/test/golden/strict/typography/heading_level_4.html
new file mode 100644
index 00000000..041d8340
--- /dev/null
+++ b/gem/test/golden/strict/typography/heading_level_4.html
@@ -0,0 +1 @@
+<h4 class="scroll-m-20 font-bold tracking-tight text-lg">H4</h4>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/inline_code.html b/gem/test/golden/strict/typography/inline_code.html
new file mode 100644
index 00000000..9b1a01e1
--- /dev/null
+++ b/gem/test/golden/strict/typography/inline_code.html
@@ -0,0 +1 @@
+<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">RubyUI::VERSION</code>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/inline_link.html b/gem/test/golden/strict/typography/inline_link.html
new file mode 100644
index 00000000..7ba50bc3
--- /dev/null
+++ b/gem/test/golden/strict/typography/inline_link.html
@@ -0,0 +1 @@
+<a class="text-primary font-medium hover:underline underline-offset-4 cursor-pointer" href="/docs">the docs</a>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_as_div.html b/gem/test/golden/strict/typography/text_as_div.html
new file mode 100644
index 00000000..1d2f6bae
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_as_div.html
@@ -0,0 +1 @@
+<div class="text-base font-normal">div</div>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_as_label.html b/gem/test/golden/strict/typography/text_as_label.html
new file mode 100644
index 00000000..e10e811e
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_as_label.html
@@ -0,0 +1 @@
+<label class="text-base font-normal">label</label>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_as_p.html b/gem/test/golden/strict/typography/text_as_p.html
new file mode 100644
index 00000000..ba183b84
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_as_p.html
@@ -0,0 +1 @@
+<p class="text-base font-normal">p</p>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_as_span.html b/gem/test/golden/strict/typography/text_as_span.html
new file mode 100644
index 00000000..78fb952b
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_as_span.html
@@ -0,0 +1 @@
+<span class="text-base font-normal">span</span>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_size_1.html b/gem/test/golden/strict/typography/text_size_1.html
new file mode 100644
index 00000000..72ca244a
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_size_1.html
@@ -0,0 +1 @@
+<p class="text-xs font-normal">Size 1</p>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_size_2.html b/gem/test/golden/strict/typography/text_size_2.html
new file mode 100644
index 00000000..bd4cabab
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_size_2.html
@@ -0,0 +1 @@
+<p class="text-sm font-normal">Size 2</p>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_size_3.html b/gem/test/golden/strict/typography/text_size_3.html
new file mode 100644
index 00000000..5d5872bd
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_size_3.html
@@ -0,0 +1 @@
+<p class="text-base font-normal">Size 3</p>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_size_4.html b/gem/test/golden/strict/typography/text_size_4.html
new file mode 100644
index 00000000..1b06b74f
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_size_4.html
@@ -0,0 +1 @@
+<p class="text-lg font-normal">Size 4</p>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_size_5.html b/gem/test/golden/strict/typography/text_size_5.html
new file mode 100644
index 00000000..00ea816d
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_size_5.html
@@ -0,0 +1 @@
+<p class="text-xl font-normal">Size 5</p>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_size_6.html b/gem/test/golden/strict/typography/text_size_6.html
new file mode 100644
index 00000000..52f7b4dc
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_size_6.html
@@ -0,0 +1 @@
+<p class="text-2xl font-normal">Size 6</p>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_size_7.html b/gem/test/golden/strict/typography/text_size_7.html
new file mode 100644
index 00000000..8313967e
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_size_7.html
@@ -0,0 +1 @@
+<p class="text-3xl font-normal">Size 7</p>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_size_8.html b/gem/test/golden/strict/typography/text_size_8.html
new file mode 100644
index 00000000..050789b8
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_size_8.html
@@ -0,0 +1 @@
+<p class="text-4xl font-normal">Size 8</p>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_size_9.html b/gem/test/golden/strict/typography/text_size_9.html
new file mode 100644
index 00000000..2c2873c1
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_size_9.html
@@ -0,0 +1 @@
+<p class="text-5xl font-normal">Size 9</p>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_weight_bold.html b/gem/test/golden/strict/typography/text_weight_bold.html
new file mode 100644
index 00000000..8ea662fe
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_weight_bold.html
@@ -0,0 +1 @@
+<p class="text-base font-bold">bold</p>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_weight_light.html b/gem/test/golden/strict/typography/text_weight_light.html
new file mode 100644
index 00000000..2001069d
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_weight_light.html
@@ -0,0 +1 @@
+<p class="text-base font-light">light</p>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_weight_medium.html b/gem/test/golden/strict/typography/text_weight_medium.html
new file mode 100644
index 00000000..f9b4ac68
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_weight_medium.html
@@ -0,0 +1 @@
+<p class="text-base font-medium">medium</p>
\ No newline at end of file
diff --git a/gem/test/golden/strict/typography/text_weight_regular.html b/gem/test/golden/strict/typography/text_weight_regular.html
new file mode 100644
index 00000000..dcd0cbbe
--- /dev/null
+++ b/gem/test/golden/strict/typography/text_weight_regular.html
@@ -0,0 +1 @@
+<p class="text-base font-normal">regular</p>
\ No newline at end of file
diff --git a/gem/test/golden_test.rb b/gem/test/golden_test.rb
index e705eefb..1b38cb32 100644
--- a/gem/test/golden_test.rb
+++ b/gem/test/golden_test.rb
@@ -61,6 +61,28 @@ def assert_golden(scenario, lane)
 
     assert_equal recorded, canonical,
       "HTML for #{scenario.slug} no longer matches the recorded 1.6 snapshot"
+
+    assert_strict(scenario, lane)
+  end
+
+  # The strict form: text and whitespace verbatim. Same discipline as the
+  # canonical snapshot — determinism, fixed point, then equality.
+  def assert_strict(scenario, lane)
+    strict = Golden::CanonicalHtml.call(render(scenario, lane), strict: true)
+
+    assert_equal strict, Golden::CanonicalHtml.call(render(scenario, lane), strict: true),
+      "#{scenario.slug} does not render deterministically in strict form"
+
+    assert_path_exists scenario.strict_snapshot_path,
+      "no strict snapshot for #{scenario.slug} — run `bundle exec rake golden:update` and review the diff"
+
+    recorded = File.read(scenario.strict_snapshot_path)
+
+    assert_equal recorded, Golden::CanonicalHtml.call(recorded, strict: true),
+      "the recorded strict form of #{scenario.slug} is not a fixed point of the normalizer"
+
+    assert_equal recorded, strict,
+      "strict HTML for #{scenario.slug} no longer matches the recorded 1.6 snapshot"
   end
 
   def canonicalize(scenario, lane)
@@ -77,8 +99,11 @@ def render(scenario, lane)
   # file.
   def record!(scenario)
     self.class.recorded[scenario.slug] ||= begin
+      rendered = render(scenario, scenario.recording_lane)
       FileUtils.mkdir_p(File.dirname(scenario.snapshot_path))
-      File.write(scenario.snapshot_path, Golden::CanonicalHtml.call(render(scenario, scenario.recording_lane)))
+      File.write(scenario.snapshot_path, Golden::CanonicalHtml.call(rendered))
+      FileUtils.mkdir_p(File.dirname(scenario.strict_snapshot_path))
+      File.write(scenario.strict_snapshot_path, Golden::CanonicalHtml.call(rendered, strict: true))
       true
     end
   end
@@ -126,6 +151,14 @@ def test_no_orphan_fixture_files
       "fixture files with no scenario (delete them): #{orphans.map { |path| path.delete_prefix("#{Golden::Catalog::VIEWS_ROOT}/") }.join(", ")}"
   end
 
+  def test_no_orphan_strict_snapshot_files
+    expected = Golden::Catalog.scenarios.select(&:pinned?).map(&:strict_snapshot_path).sort
+    orphans = Golden::Catalog.strict_files - expected
+
+    assert_empty orphans,
+      "strict snapshot files with no scenario (delete them): #{orphans.map { |path| path.delete_prefix("#{Golden::Catalog::STRICT_ROOT}/") }.join(", ")}"
+  end
+
   # Rendering the whole catalog once, memoized, because Minitest runs tests in
   # a random order and the coverage check cannot rely on the scenario tests
   # having run first.

From 922f2b11d308d5069bd55ff3042e880fb09e0530 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 13:48:15 -0300
Subject: [PATCH 12/20] [Documentation] RubyUI 2.0: record what Phase 2.0a
 decided
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The spec deferred five mechanisms to Phase 2.0. Decisions 5-9 record
them: the inline Rails application the tests boot, Component as the
layer's name until the last Phlex component is gone, every ERB fixture
written before any migration, the strict lane as the canonical form in
preserve mode, and a list of component roots. The spec's §4.4 and §6
Phase 2.0 now say what was built.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 design/2026-09-19-rubyui-2-0-design.md | 82 ++++++++++++++------------
 design/v2/decisions.md                 | 72 ++++++++++++++++++++++
 2 files changed, 116 insertions(+), 38 deletions(-)

diff --git a/design/2026-09-19-rubyui-2-0-design.md b/design/2026-09-19-rubyui-2-0-design.md
index 9ee6bdc5..204e2455 100644
--- a/design/2026-09-19-rubyui-2-0-design.md
+++ b/design/2026-09-19-rubyui-2-0-design.md
@@ -134,7 +134,10 @@ they were written and proved:
 
 226 lines at the end of the gate, against a 500-line ceiling. The ceiling
 stands for 2.0. `base.rb` and `attributes.rb` are copied into the host app by
-the installer, so every line is a line the user reads.
+the installer, so every line is a line the user reads. During Phase 2 the
+class is named `RubyUI::Component`, because `RubyUI::Base` is still the Phlex
+base the unmigrated components inherit; it takes the name `Base` in Phase 2.4
+(decision 6).
 
 Differences from 1.6's `Base` to carry into the documentation:
 
@@ -178,16 +181,17 @@ Rails.autoloaders.main.inflector.inflect("ruby_ui" => "RubyUI")
 Rails.autoloaders.main.push_dir(Rails.root.join("app/components/ruby_ui"), namespace: RubyUI)
 Rails.autoloaders.main.collapse(Rails.root.join("app/components/ruby_ui/*"))
 
-RubyUI.component_root = Rails.root.join("app/components")
+RubyUI.component_roots = [Rails.root.join("app/components")]
 
 ReActionView.config.intercept_erb = true
 ReActionView.config.validation_mode = :raise
 ```
 
 `extend Phlex::Kit` is removed. Zeitwerk ignores `.html.erb`, so the sidecar
-living in an autoloaded directory is inert. `component_root` is the one
-directory the sidecar lookup searches (§4.3); `app/components` is **not**
-added to the application's view paths, so nothing about how the host resolves
+living in an autoloaded directory is inert. `component_roots` lists the
+directories the sidecar lookup searches — one, in a host app (§4.3);
+`app/components` is **not** added to the application's view paths, so nothing
+about how the host resolves
 its own templates changes, and ViewComponent — whose home directory this is —
 is untouched.
 
@@ -279,49 +283,50 @@ code.
 
 - Promote `Base` and `Attributes` into `gem/lib/ruby_ui/`, with tests of their
   own and the differential test against Phlex 2.4.1 kept.
-- Replace the test harness: `actionview` as a development dependency
-  (`reactionview` is already a runtime one, §4.4); a minimal `ActionView::Base`
-  with a view path into `gem/lib/ruby_ui`, with ReActionView's handler
-  registered so tests compile exactly as users will.
-  `ComponentTest#phlex { }` is replaced by rendering an ERB fixture.
-- Add the **ERB lane** to the golden suite: the 188 scenarios become
-  `.html.erb` fixtures under `gem/test/golden/views/`, rendered through the 2.0
-  component and compared against the frozen snapshot.
+- Replace the test harness: `railties`, `actionview`, `reactionview` and
+  `phlex-rails` as development dependencies, and an inline `Rails::Application`
+  in `test_helper.rb` with the gem as `Rails.root` — ReActionView's handler
+  reads `Rails.root`, and a template outside it falls back to Erubi silently
+  when Herb rejects it (decision 5). `ComponentTest#phlex { }` stays for the
+  Phlex-lane tests until the last Phlex component goes; `render_erb` renders a
+  test view through the harness.
+- Add the **ERB lane** to the golden suite: a scenario may have an ERB fixture
+  under `gem/test/golden/views/`, rendered through the harness and compared
+  against the same frozen snapshot as its own test. With `phlex-rails` loaded a
+  fixture renders a component that is still Phlex, so all 188 fixtures are
+  written before any migration — Button's 15 in plan 2.0a, the rest in 2.0b
+  (decision 7).
 - Implement the `enum` coercion helper in `Base`.
 - Port Phlex's attribute guards into `Attributes` (§4.3), with unit tests
   that assert an unsafe name raises and a `javascript:` reference is dropped.
 - `render_in` assigns `content` on every call; test that an instance rendered
   twice, the second time without a block, renders empty content.
-- Implement the scoped sidecar lookup (§4.3, §4.4) and test it against a
-  host template at the same virtual path, against two overlapping roots, and
-  across two view contexts. The gate's `@template_path ||=` cache is keyed per
-  class and ignored the view context; the scoped lookup must not.
-- Define the **strict lane**. The canonical form is, by design, blind to
-  whitespace at a text–element boundary and between inline siblings (§9.1).
-  Sidecars are therefore written in ERB trim mode (`<%-` / `-%>`) so they emit
-  no whitespace Phlex did not, and the components that carry text —
-  Typography, InlineCode, InlineLink, ShortcutKey, Badge, FormFieldError and
-  the others the Phase 1 inventory names — are additionally compared **raw**,
-  with only attribute order normalized. A strict-lane failure is a real
+- Implement the scoped sidecar lookup: `RubyUI.component_roots`, a
+  `LookupContext` per root, the sidecar found under the root that holds the
+  class file and nowhere else; the `Template` is not cached on the class, so
+  Rails' reloader reaches it (decision 9). Tested against a host template at
+  the same virtual path, a class under no root, and a class with no sidecar.
+- Define the **strict lane**: `CanonicalHtml.call(html, strict: true)`, the
+  preserve-mode form, with its own snapshot for every scenario under
+  `gem/test/golden/strict/`, recorded from Phlex (decision 8). Sidecars and
+  fixtures are written whitespace-tight. A strict-lane failure is a real
   difference, not noise.
 - **MCP.** `mcp/data/registry.json` embeds the source of every component file
   and CI rebuilds it and fails on any diff. Every Phase 2 PR that touches
   `gem/lib/ruby_ui` rebuilds it (`cd mcp && bundle exec exe/ruby-ui-mcp-build`)
   and commits the result. `RegistryBuilder` also extracts examples from
   `*_docs.rb`; decision 11 (Phase 2.3) says what happens to those.
-- **Fresh-app install test.** A script, run in CI, that does `rails new`, adds
-  the gem, runs the installer and the preflight, generates one component and
-  renders it through a request. The golden suite renders without Rails and
-  cannot see installation, reloading, CSRF (`DataTableForm` falls back to a
-  placeholder outside a request) or assets.
+- **Fresh-app install test** — moved to Phase 2.4 (decision 9): it only means
+  something once the installer writes the 2.0 initializer.
 - Point `docs/Gemfile` at the published `ruby_ui` 1.6 instead of
   `path: "../gem"`, so the site keeps building and the CI Docs job stays green
   while the gem is mid-migration. Phase 3 reverts it.
 
 **Acceptance.** The layer is in the gem with its own tests, guards included.
-The ERB lane runs with at least one component at parity, and the strict lane
-with at least one text-bearing component. The fresh-app script passes. All
-three CI jobs are green with the registry rebuilt.
+The ERB lane is green for Button's 15 scenarios against the frozen snapshots
+with Button still Phlex, and the strict lane holds one recorded snapshot per
+scenario (188). All
+three CI jobs are green with the registry unchanged.
 
 #### 2.1 The hard components first
 
@@ -390,7 +395,7 @@ What that pulls into Phase 2:
 The doc pages are not components and the golden suite does not cover them;
 Phase 3 is where they are first looked at on screen, in the site.
 
-**Acceptance.** In the fresh-app install script (Phase 2.0),
+**Acceptance.** In the fresh-app install script (Phase 2.4),
 `rails g ruby_ui:install:docs` copies pages and example files that render
 through a request; every example file compiles through Herb; the golden suite
 is unaffected; no `*_docs.rb` remains in the gem.
@@ -617,10 +622,11 @@ count never named.
 3. **Phase 2.0 defines a strict lane** — raw output, attribute order
    normalized, nothing else — for components that carry text.
 
-What the canonical form still does not see, stated as the contract's
-exclusion: whitespace between two element siblings, and whitespace at a
-text–element boundary, in `:normal` mode. The inventory script stays in the
-tree as a way to find candidates, not as a criterion.
+As of Phase 2.0a the strict lane closes this for every scenario: each also
+keeps its preserve-mode form, so whitespace between element siblings and at
+text–element boundaries is part of the contract, not an exclusion (decision 8).
+The inventory script stays in the tree as a way to read the catalog, not as a
+criterion.
 
 ### 9.2 Three questions for upstream
 
@@ -673,7 +679,7 @@ and Phase 3 is where a browser first looks.
 | `intercept_erb` validates the host app's own templates | A user with malformed HTML anywhere sees errors on install day — and `validation_mode` does not soften it: `:none` empties the template, `:overlay` replaces it (§8) | The installer preflights every host template through `Herb::Engine` before enabling interception and lists what would break; the only opt-out is `intercept_erb = false`, documented as also disabling the tag syntax |
 | herb 0.11 requires a new ReActionView release too | The tag syntax waits on two projects, not one | Decision D ships 2.0.0 without depending on either date |
 | The documentation site runs Phlex while the library no longer does | Between 2.5 and Phase 3 | Acknowledged in the release announcement rather than discovered by readers |
-| `app/components` is also ViewComponent's directory | ViewComponent users | `app/components` is not added to the view paths; the sidecar lookup is scoped to `component_root` (§4.4) |
+| `app/components` is also ViewComponent's directory | ViewComponent users | `app/components` is not added to the view paths; the sidecar lookup is scoped to `component_roots` (§4.4) |
 | Sidecar name collision with a host template | Silent replacement in either direction with a view-path lookup | Lookup scoped to the component root; collision is an error (§4.3) |
 | Removing Phlex's attribute guards | Untrusted attribute values reach the page as `javascript:` URLs or `on*` handlers | Guards ported into `Attributes` with their own tests (§4.3) |
 | `mcp/data/registry.json` embeds component source | Every gem change; CI fails on a stale registry | Rebuilt and committed in every PR that touches `gem/lib/ruby_ui` (Phase 2.0) |
diff --git a/design/v2/decisions.md b/design/v2/decisions.md
index b118d29c..8a9c88e7 100644
--- a/design/v2/decisions.md
+++ b/design/v2/decisions.md
@@ -108,3 +108,75 @@ before the gem release instead of after it.
 **What would reverse this:** sub-phase 2.3 proving larger than the component
 migration itself, in which case the generator ships in 2.1 instead.
 
+## 5. The gem's test harness is an inline Rails application — 2026-09-20
+
+Decision A said `actionview` + `reactionview`, no controller, no dummy app.
+ReActionView's handler reads `Rails.root` without a guard, and a template
+outside `Rails.root` is "external": when Herb rejects it, `external_template_mode`
+falls back to Erubi silently. So the tests need a `Rails`, and its root must be
+the gem. `test_helper.rb` boots the smallest `Rails::Application` — no `app/`
+directory, no routes, no database — with `config.root` at the gem and
+`RAILS_ENV=test`. Measured: the existing suite is unchanged under it and
+`ActionView::Template.handler_for_extension(:erb)` is ReActionView's.
+**Cost if wrong:** `railties` as a development dependency and ~1 s of boot per
+test run. **What would reverse it:** ReActionView dropping its `Rails.root`
+reads, at which point the app object goes.
+
+## 6. The 2.0 layer is `RubyUI::Component` until the last Phlex component is gone — 2026-09-20
+
+`RubyUI::Base` is the Phlex base that 256 components inherit; the 2.0 layer
+cannot take the name while they exist. It lands as `RubyUI::Component`, every
+migrated component inherits `Component`, and one mechanical commit in Phase
+2.4 — after the last migration, before the installer is rewritten — renames
+`Component` to `Base`. Users never see `Component`. The alternative, renaming
+the Phlex base first, touches all 256 files for no user benefit.
+**Cost if wrong:** one sed across the migrated files at the end.
+
+## 7. Every ERB fixture is written before any component migrates — 2026-09-20
+
+With `phlex-rails` loaded (development only), an ERB fixture renders a
+component that is still Phlex, so the ERB lane can be green for all 188
+scenarios while nothing has migrated. Plan 2.0a proves it on Button's 15;
+plan 2.0b writes the other 173. After that a migration changes only an
+implementation, never the ruler — "did I write the fixture right" and "did I
+port the component right" stop being one failure. While a scenario keeps its
+Phlex block, that lane records and the ERB lane compares.
+**Cost if wrong:** ~2,000 lines of ERB written ahead of the first migration.
+`phlex-rails` leaves the gemspec with the last Phlex component.
+
+## 8. The strict lane is the canonical form in preserve mode, for every scenario — 2026-09-20
+
+Every scenario keeps a second snapshot, `CanonicalHtml.call(html, strict: true)`:
+the whole fragment in the normalizer's preserve mode (text and whitespace
+verbatim, attributes sorted, comments dropped, the fragment's own edges
+trimmed). Same fixed-point discipline, same recording rule, same runner. The 188
+strict snapshots were recorded from Phlex.
+
+The spec named seven text-bearing components; the plan first mapped that to
+five directories. Review found a sixth (Breadcrumb), and an audit of the raw
+Phlex output found text inside an inline element in 38 of 54 components — any
+list is one review away from missing one. So there is no list: the contract is
+the literal one, *the 2.0 sidecar emits what Phlex emitted*, and Phlex never
+emitted whitespace between elements. Fixtures and sidecars are written
+whitespace-tight — one line, or `<%-`/`-%>` — because the strict form sees
+every newline they add; the canonical form stays as the diagnostic (canonical
+passes, strict fails: whitespace only).
+**Cost if wrong:** 188 more files to keep, sidecars without newlines between
+static elements, and strictness where a browser would not have cared (inside a
+flex parent, say). **What would reverse it:** sidecars for the large composites
+proving unreadable under the rule, at which point the strict lane narrows to a
+criterion computed from the output (text adjacent to an element sibling) rather
+than a hand-picked list.
+
+## 9. Sidecar lookup takes a list of roots; the fresh-app script moves to 2.4 — 2026-09-20
+
+`RubyUI.component_roots` is an Array — `lib` and `test/probes` in the gem, one
+entry in a host app — and a class's sidecar is found under the root that
+contains its file, through a `LookupContext` scoped to that root. Collision
+with a host template is impossible by construction, and "two sidecars for one
+class" cannot happen (one class file, one directory). The fresh-app install
+script the spec put in Phase 2.0 moves to Phase 2.4: until the installer writes
+the 2.0 initializer, the script would only exercise the 1.6 installer, which
+proves nothing about 2.0.
+**Cost if wrong:** installation is first exercised end to end in 2.4 rather
+than now.

From b635994374230ec6cd974ed1f330aff16a9c1c59 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 14:24:51 -0300
Subject: [PATCH 13/20] [Bug Fix] RubyUI 2.0 layer: match Phlex on four
 attribute shapes, pin the reload registration, name a bad enum default
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Attributes.flat diverged from Phlex 2.4.1 on four shapes, all re-measured
against Phlex at runtime before fixing: `class: [true]` and `style:
{display: true}` silently serialized instead of raising (Phlex has no
`case` branch for a boolean token or style value); `data: {at:
Date.today}` silently nested an ISO date instead of raising (Phlex's
nested-attributes case has no branch for Date/Time, only its top-level
case does); and a String `"style"` key was read as CSS instead of
nesting, because `flat` matched on the dasherized name instead of on
the literal Symbol `:style` Phlex keys on. Each is now pinned in
attributes_differential_test.rb, executed against Phlex at runtime: a
FLAT_CASES entry for the String-key shape, a small RAISE_CASES table
for the three that raise.

RubyUI.lookup_for registers its resolver through
ActionView::PathRegistry.cast_file_system_resolvers so the reloader's
DetailsKey.clear and CacheExpiry can see component roots — nothing
tested that. The added test calls RubyUI.lookup_for on every configured
root directly rather than relying on some other test to have exercised
it first: Phase 2.0a has no real gem component under the `lib` root
yet (every component that exists is a probe under test/probes), so
nothing else in the suite ever resolves a sidecar there.

enum's nil path blamed the caller ("nil is not one of ...") when the
class's own `default:` wasn't a table key; it now names the default. A
value the caller actually gave still fails on its own terms.

RAILS_ENV was `||=`; a gem test suite has no legitimate environment but
"test", and an exported RAILS_ENV=development would turn on 1.6's dev
comment and fail six unit tests.

bundle exec rake: 596 runs, 0 failures, 0 skips; 423 files inspected,
no offenses.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 gem/lib/ruby_ui/attributes.rb                 | 39 ++++++++++++++-----
 gem/lib/ruby_ui/component.rb                  |  8 +++-
 .../ruby_ui/attributes_differential_test.rb   | 20 +++++++++-
 gem/test/ruby_ui/component_test.rb            | 13 +++++++
 gem/test/ruby_ui/enum_test.rb                 | 15 +++++++
 gem/test/test_helper.rb                       |  6 ++-
 6 files changed, 88 insertions(+), 13 deletions(-)

diff --git a/gem/lib/ruby_ui/attributes.rb b/gem/lib/ruby_ui/attributes.rb
index 478aa1ac..b23cd765 100644
--- a/gem/lib/ruby_ui/attributes.rb
+++ b/gem/lib/ruby_ui/attributes.rb
@@ -17,10 +17,15 @@ module RubyUI
   # bare attribute (here "" — Rails renders `disabled="disabled"` for boolean
   # attributes and `aria-x=""` for the rest, which canonicalize like Phlex's
   # bare form); Symbol values are dasherized; Integer/Float use to_s; Date and
-  # Time use iso8601; a Hash nests as `name-key`, with `_:` naming the parent
-  # itself; Array/Set values are space-joined tokens (nil skipped, nested arrays
-  # flattened, empty result omits the attribute); `style:` Hash becomes
-  # "prop: value; prop: value;" and `style:` Array "a; b;".
+  # Time use iso8601 at the top level — nested under a Hash they raise, as
+  # Phlex has no case for them there; a Hash nests as `name-key`, with `_:`
+  # naming the parent itself; Array/Set values are space-joined tokens of
+  # String/Symbol/Integer/Float (nil skipped, nested arrays flattened, empty
+  # result omits the attribute, anything else — `true`, a Date, … — raises, as
+  # Phlex has no case for it in a token list either); `style:` — the Symbol key
+  # only, a String `"style"` key nests like any other Hash key — Hash becomes
+  # "prop: value; prop: value;" (a non-String/Symbol/Integer/Float value
+  # raises) and `style:` Array "a; b;".
   #
   # Phlex's guards (phlex/sgml/attributes.rb) are ported, so a component given
   # untrusted values keeps the protection it has today: a name with `<>&"'/=`,
@@ -29,9 +34,10 @@ module RubyUI
   # whose serialized value, character references decoded, starts with
   # `javascript:` is dropped — serialized first, as Phlex does, so `href: 1`
   # renders and `href: :"javascript:x"` does not. Not ported: Phlex's
-  # `:id`-must-be-a-lowercase-Symbol check (a Phlex convention) and the leading
+  # `:id`-must-be-a-lowercase-Symbol check (a Phlex convention), the leading
   # space it leaves when the first `style:` value is nil (no snapshot depends
-  # on it).
+  # on it), and an object that only responds to `to_h` — Phlex nests it, `flat`
+  # refuses it (fail-loud, deliberate).
   module Attributes
     TAILWIND_MERGER = TailwindMerge::Merger.new.freeze
 
@@ -85,14 +91,17 @@ def flat(attributes)
           name = key_name(key)
           case value
           when Hash
-            if name == "style"
+            # Phlex keys this on the Symbol `:style` itself, not on the
+            # dasherized name: a String `"style"` key nests like any other
+            # Hash key (`style-width="1px"`) rather than being read as CSS.
+            if key == :style
               emit(out, name, styles(value))
             else
               refuse_url_value!(name, value)
               nested(value, "#{name}-", out)
             end
           when Array, Set
-            serialized = (name == "style") ? styles(value) : tokens(value)
+            serialized = (key == :style) ? styles(value) : tokens(value)
             refuse_url_value!(name, value) if serialized.nil?
             emit(out, name, serialized)
           else
@@ -167,6 +176,9 @@ def nested(hash, prefix, out)
           case value
           when Hash then nested(value, "#{name}-", out)
           when Array, Set then (joined = tokens(value)) && out[name] = joined
+          # Phlex's nested-attributes case has no branch for Date/Time (only
+          # the top-level case does), so nesting one raises here too.
+          when Date, Time then raise ArgumentError, "invalid attribute value #{value.inspect}"
           else out[name] = scalar(value)
           end
         end
@@ -188,7 +200,8 @@ def tokens(values)
           case token
           when nil then nil
           when Array, Set then tokens(token)
-          else scalar(token)
+          when String, Symbol, Integer, Float then scalar(token)
+          else raise ArgumentError, "invalid token type #{token.class}"
           end
         end
         list.join(" ") unless list.empty?
@@ -197,7 +210,13 @@ def tokens(values)
       def styles(value)
         case value
         when Hash
-          value.filter_map { |property, v| "#{key_name(property)}: #{scalar(v)};" unless v.nil? }.join(" ")
+          value.filter_map do |property, v|
+            case v
+            when nil then nil
+            when String, Symbol, Integer, Float then "#{key_name(property)}: #{scalar(v)};"
+            else raise ArgumentError, "invalid style value #{v.inspect}"
+            end
+          end.join(" ")
         else
           value.filter_map do |style|
             case style
diff --git a/gem/lib/ruby_ui/component.rb b/gem/lib/ruby_ui/component.rb
index 13637d83..ebdfb87e 100644
--- a/gem/lib/ruby_ui/component.rb
+++ b/gem/lib/ruby_ui/component.rb
@@ -74,7 +74,7 @@ def render_in(view_context, **, &block)
 
     # The view context, for a component that needs a Rails helper from Ruby
     # (`helpers.form_authenticity_token`) or renders a neighbour from a method.
-    # Only available during render_in.
+    # Set by render_in; raises before the first render.
     def helpers
       @view_context or raise ArgumentError, "#{self.class.name} has no view context outside render_in"
     end
@@ -97,6 +97,7 @@ def source_file
           raise ArgumentError, "#{name}: no source location to derive a sidecar template from"
       end
 
+      # Memoized on first use: set RubyUI.component_roots in an initializer, before any render.
       def component_root
         @component_root ||= RubyUI.component_roots.map(&:to_s).find { |root| source_file.start_with?("#{root}/") } or
           raise ArgumentError, "#{name}: #{source_file} is under none of RubyUI.component_roots #{RubyUI.component_roots.inspect}"
@@ -118,6 +119,11 @@ def enum(value, table, default:)
       key = key.to_sym if key.respond_to?(:to_sym)
       return key if table.key?(key)
 
+      if value.nil?
+        raise ArgumentError,
+          "#{self.class.name}: default: #{default.inspect} is not one of #{table.keys.map(&:inspect).join(", ")}"
+      end
+
       raise ArgumentError,
         "#{self.class.name}: #{value.inspect} is not one of #{table.keys.map(&:inspect).join(", ")}"
     end
diff --git a/gem/test/ruby_ui/attributes_differential_test.rb b/gem/test/ruby_ui/attributes_differential_test.rb
index 78b450b4..1a15a1b2 100644
--- a/gem/test/ruby_ui/attributes_differential_test.rb
+++ b/gem/test/ruby_ui/attributes_differential_test.rb
@@ -33,9 +33,27 @@ def view_template
     "empty token list omits the attribute" => {class: [], data: {tokens: [nil]}},
     "url attribute from a non-string" => {href: 1, src: ["/", "a.png"]},
     "javascript url is dropped, a data attribute is not" => {:href => :"javascript:x", "data-href" => "javascript:kept"},
-    "out-of-range character reference" => {href: "java&#999999999999999999;script:alert(1)"}
+    "out-of-range character reference" => {href: "java&#999999999999999999;script:alert(1)"},
+    "a String \"style\" key nests instead of matching Phlex's Symbol :style" => {"style" => {width: "1px"}}
   }.freeze
 
+  # Shapes where Phlex 2.4.1 raises inside `generate_nested_tokens` or
+  # `generate_styles` — no `case` branch there for `true`/`false` or for
+  # Date/Time — so `RubyUI::Attributes.flat` must raise too rather than
+  # silently serialize something Phlex would refuse.
+  RAISE_CASES = {
+    "true has no case in a token list" => {class: [true]},
+    "true has no case as a style value" => {style: {display: true}},
+    "a Date has no case in nested attributes" => {data: {at: Date.today}}
+  }.freeze
+
+  RAISE_CASES.each do |label, attributes|
+    define_method(:"test_raises_#{label.tr(" ", "_")}") do
+      assert_raises(Phlex::ArgumentError) { PhlexDiv.new(attributes).call }
+      assert_raises(ArgumentError) { RubyUI::Attributes.flat(attributes) }
+    end
+  end
+
   FLAT_CASES.each do |label, attributes|
     define_method(:"test_flat_#{label.tr(" ", "_")}") do
       assert_equal canonical_phlex(attributes), canonical_erb(attributes),
diff --git a/gem/test/ruby_ui/component_test.rb b/gem/test/ruby_ui/component_test.rb
index d7ee6a6b..4297e567 100644
--- a/gem/test/ruby_ui/component_test.rb
+++ b/gem/test/ruby_ui/component_test.rb
@@ -100,6 +100,19 @@ def test_overlapping_roots_resolve_the_same_sidecar
     RubyUI::Probes::Div.instance_variable_set(:@component_root, nil)
   end
 
+  def test_component_roots_are_registered_resolvers_the_reloader_can_see
+    RubyUI::Probes::Div.template
+    # Phase 2.0a has no real gem component under the `lib` root yet — every
+    # component that exists is a probe under `test/probes` — so nothing but
+    # this test ever resolves a sidecar there. Call `lookup_for` on every
+    # configured root directly (the same call `Component.template` makes) so
+    # the assertion below does not depend on some other root having already
+    # been exercised by an unrelated test.
+    RubyUI.component_roots.each { |root| RubyUI.lookup_for(root) }
+    paths = ActionView::PathRegistry.all_file_system_resolvers.map(&:path)
+    RubyUI.component_roots.each { |root| assert_includes paths, root.to_s }
+  end
+
   class Homeless < RubyUI::Component
   end
 
diff --git a/gem/test/ruby_ui/enum_test.rb b/gem/test/ruby_ui/enum_test.rb
index 0e61864a..4a6f33ec 100644
--- a/gem/test/ruby_ui/enum_test.rb
+++ b/gem/test/ruby_ui/enum_test.rb
@@ -39,4 +39,19 @@ def test_a_value_that_cannot_be_a_symbol_raises_the_same_way
 
     assert_match(/42/, error.message)
   end
+
+  class BadDefault < RubyUI::Component
+    SIZES = {sm: "h-8", md: "h-9"}.freeze
+
+    def initialize(size: nil, **attrs)
+      @size = enum(size, SIZES, default: :xlg)
+      super(**attrs)
+    end
+  end
+
+  def test_a_bad_default_names_the_default_not_nil
+    error = assert_raises(ArgumentError) { BadDefault.new }
+
+    assert_match(/default: :xlg/, error.message)
+  end
 end
diff --git a/gem/test/test_helper.rb b/gem/test/test_helper.rb
index f278a31d..18b8f549 100644
--- a/gem/test/test_helper.rb
+++ b/gem/test/test_helper.rb
@@ -1,6 +1,10 @@
 # frozen_string_literal: true
 
-ENV["RAILS_ENV"] ||= "test"
+# A gem test suite has no other legitimate environment; unlike an application's
+# test_helper, a developer's exported RAILS_ENV must not leak in here — a
+# stray RAILS_ENV=development would turn on 1.6's dev comment and fail six
+# unit tests.
+ENV["RAILS_ENV"] = "test"
 
 $LOAD_PATH.unshift File.expand_path("../lib", __dir__)
 require "ruby_ui"

From 044316c200a8adcca2c6098e851319afb74d95e6 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 14:29:53 -0300
Subject: [PATCH 14/20] [Documentation] RubyUI 2.0: the spec stops promising a
 collision error; decision 5's premise corrected
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

§4.3 and §5's decision 9 row promised "two sidecars for one class is an
error" and "collision is an error" — the implementation never raises
on a name collision; it simply never consults the host's view paths,
so nothing is there to collide with. Reworded both, the §4.3 `base.rb`
table row (`template_path` doesn't exist; `template` resolved from
`source_file` under `component_root` does), and the §10 risk-table
cell to match. §6 said three CI jobs; `.github/workflows/ci.yml` has
five (gem, docs, mcp, mcp-registry-check, docker-build). Recorded two
carry-forward items the review raised for later phases: subclass
sidecar inheritance (2.1) and component_root/attributes.rb path and
guard questions (2.4).

decisions.md entry 5's stated reason — "a template outside Rails.root
falls back to Erubi" — doesn't hold: without an application
`Rails.root` is nil, `nil.to_s` is `""`, and every identifier
`start_with?("")`, so ReActionView's local_template? is true for
everything, application or not (reactionview/template/local_template.rb).
The reasons that do hold, verified against reactionview/railtie.rb and
railties' Rails.env: the Railtie registers the ERB handler only from
an application-boot initializer, so without one Erubi never yields to
Herb at all; and Rails.env defaults to development unless RAILS_ENV is
set, turning on 1.6's dev comment. Entry 9 gets the paragraph Important
2 earned: the scoped lookup's resolver registration through
ActionView::PathRegistry.cast_file_system_resolvers, why it matters for
the reloader, and the Rails version floor it implies.

Plan's Definition of done recounted after the A1/A2 test additions:
the differential test is 30 cases (19 FLAT_CASES + 8 MIX_CASES + 3
RAISE_CASES) and the guard suite is 11 (`def test_` in
attributes_test.rb), both counted directly rather than assumed.

bundle exec rake: 596 runs, 0 failures, 0 skips; 423 files inspected,
no offenses (docs-only change, numbers unchanged from the prior
commit).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 design/2026-09-19-rubyui-2-0-design.md        | 37 ++++++++++++------
 ...20-phase-2-0a-foundation-implementation.md |  2 +-
 design/v2/decisions.md                        | 38 ++++++++++++++-----
 3 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/design/2026-09-19-rubyui-2-0-design.md b/design/2026-09-19-rubyui-2-0-design.md
index 204e2455..564aae0c 100644
--- a/design/2026-09-19-rubyui-2-0-design.md
+++ b/design/2026-09-19-rubyui-2-0-design.md
@@ -129,7 +129,7 @@ they were written and proved:
 
 | File | Responsibility |
 | --- | --- |
-| `base.rb` | `initialize(**attrs)` → `attrs`; `render_in(view_context, **, &block)` → capture into `content`, render the sidecar; `template_path` derived from the class file; `helpers` (view context, render-time only) |
+| `base.rb` | `initialize(**attrs)` → `attrs`; `render_in(view_context, **, &block)` → capture into `content`, render the sidecar; `template` resolved from `source_file` under the class's `component_root`; `helpers` (view context, render-time only) |
 | `attributes.rb` | `mix` (Phlex `Helpers#mix` semantics), `merge_classes` (tailwind_merge), `flat` (Phlex 2.4.1 serialization → flat string-keyed hash for `tag.attributes`) |
 
 226 lines at the end of the gate, against a 500-line ceiling. The ceiling
@@ -159,12 +159,14 @@ Differences from 1.6's `Base` to carry into the documentation:
 - `render_in` assigns `content` on every call — `nil` when there is no block.
   The gate's version assigned it only with a block, so an instance rendered
   twice repeated its first content.
-- The sidecar is found through a lookup **scoped to the directory that holds
-  `ruby_ui/`**, not through the application's view-path chain, and two
-  candidates for one component is an error. Review showed that with the
-  chain, `append` lets a host `ruby_ui/…` template silently replace the
-  sidecar and `prepend` lets the sidecar silently shadow the host — the
-  ordering only picks which side loses quietly.
+- The sidecar is found through a lookup **scoped to the root that holds the
+  class file** (`RubyUI.component_roots`, §4.4), not through the application's
+  view-path chain: the host's view paths are never consulted, so a host
+  template at the same virtual path is not picked (tested; decision 9), and a
+  class has exactly one sidecar — one class file, one directory. Review showed
+  that with the chain, `append` lets a host `ruby_ui/…` template silently
+  replace the sidecar and `prepend` lets the sidecar silently shadow the host
+  — the ordering only picks which side loses quietly.
 - The development-only `<!-- Before RubyUI::X -->` comment is dropped.
 
 ### 4.4 Distribution and install
@@ -226,7 +228,7 @@ execution go in `design/v2/decisions.md`, one line each, with the reason.
 | 6 | The golden suite lands on `main` in its own PR, before any 2.0 work | It protects 1.6 today — it catches regressions in ordinary bug-fix PRs. On a v2 branch it would protect nothing, and `main` and the branch would diverge in exactly the file that defines what "identical" means. `f7cbeda` is self-contained and cherry-picks cleanly. |
 | 7 | **A.** Test harness is `actionview` + `reactionview`, no controller, no dummy app | Exactly one component touches the view context — `DataTableForm`, for CSRF — and it already falls back to the literal `"csrf-token-placeholder"` that the snapshots recorded. `DataTableSortHead`, the obvious candidate for needing routes, builds its URL with `CGI` from an explicit `path:`. `reactionview` is included because decision D makes Herb what users compile with; testing on Erubi would test something we do not ship, and it puts the Herb validators over every sidecar on every CI run. |
 | 8 | **B.** A coercion helper in `Base`; not the `literal` gem | ~14 components index Symbol-keyed hashes with a user-supplied value and 11 already call `.to_sym`. `DialogContent` and `Badge` do not: `SIZES["lg"]` is `nil`, the class is dropped, nothing is raised. This is a 1.6 bug reachable from `params`, independent of any tag syntax. `Literal::Enum#coerce` looks up by member value and never treats `"lg"` and `:lg` as equivalent, so it does not remove the coercion — it would earn its place only as a full object model (`Base < Literal::Object`, `prop` replacing every constructor), which is a second large migration stacked on the first. Recorded as a legitimate 3.0 direction. |
-| 9 | **C.** Sidecar next to the class, found by a lookup scoped to the component root | Keeps class, template and Stimulus controller in one directory, as 1.6 already keeps class and controller. The gate proved the sidecar-next-to-class shape in development with reloading and in production with eager loading, but resolved it through the application's view-path chain; review showed that both `prepend` and `append` merely choose which side of a name collision loses silently. A lookup scoped to one root has no other side: a collision with the host is impossible, and two sidecars for one class is an error. |
+| 9 | **C.** Sidecar next to the class, found by a lookup scoped to the component root | Keeps class, template and Stimulus controller in one directory, as 1.6 already keeps class and controller. The gate proved the sidecar-next-to-class shape in development with reloading and in production with eager loading, but resolved it through the application's view-path chain; review showed that both `prepend` and `append` merely choose which side of a name collision loses silently. A lookup scoped to one root has no other side: a collision with the host is impossible, and a class has exactly one sidecar (one class file, one directory). |
 | 10 | **D.** Herb is required from 2.0.0, through ReActionView | Verified on released Rails (§8): `rails 8.1.3.1 + reactionview 0.4.1 + herb 0.10.4` resolves, boots, renders, runs custom transform visitors, and rejects malformed HTML at compile time. Every user gets validation from day one, and when herb ships component tags every user gets the tag syntax through `bundle update` — no reinstall, no migration. The accepted cost: two pre-1.0 gems become required, and `intercept_erb` compiles the whole host app through Herb, so a user with malformed HTML anywhere sees it on install day. `validation_mode` does not soften this — `:none` empties the template and `:overlay` replaces it — so the installer preflights the host's templates (§4.4), and the only opt-out is `intercept_erb = false`, which also disables the tag syntax. |
 
 ## 6. Phases
@@ -325,8 +327,7 @@ code.
 **Acceptance.** The layer is in the gem with its own tests, guards included.
 The ERB lane is green for Button's 15 scenarios against the frozen snapshots
 with Button still Phlex, and the strict lane holds one recorded snapshot per
-scenario (188). All
-three CI jobs are green with the registry unchanged.
+scenario (188). All five CI jobs are green with the registry unchanged.
 
 #### 2.1 The hard components first
 
@@ -346,6 +347,11 @@ stays available and documented. This is item 2 of §9.2.
 **Acceptance.** The 18 snapshots of these four components identical to the
 frozen contract; the 1.6 Stimulus controllers unedited.
 
+Decide whether a subclass inherits its parent's sidecar: a host `class
+MyButton < RubyUI::Button` has no sidecar of its own, and 1.6 inherited
+`view_template`. Either `template` walks `ancestors` to the first class with
+a sidecar, or the difference is listed in §4.3.
+
 #### 2.2 The bulk
 
 The remaining ~50 components, in batches.
@@ -408,6 +414,15 @@ and `attributes.rb`. `dependencies.yml` is unchanged — it describes JS
 packages. The gemspec drops `phlex` and gains `tailwind_merge` and
 `reactionview` as runtime dependencies.
 
+`component_root` compares `const_source_location` with `component_roots` by
+prefix; normalise both with `File.expand_path` so a symlinked `Rails.root` (a
+Capistrano `current/`) cannot make them disagree.
+
+`attributes.rb` defines its constants unguarded; 1.6's `Base` guards
+`TAILWIND_MERGER` with `unless defined?` for the gem-plus-copy case. Decide
+whether the installer copies `attributes.rb` at all or the gem's copy is
+authoritative, and guard or not accordingly.
+
 #### 2.5 Release
 
 Version, CHANGELOG, and the manual migration guide. At this point the
@@ -680,7 +695,7 @@ and Phase 3 is where a browser first looks.
 | herb 0.11 requires a new ReActionView release too | The tag syntax waits on two projects, not one | Decision D ships 2.0.0 without depending on either date |
 | The documentation site runs Phlex while the library no longer does | Between 2.5 and Phase 3 | Acknowledged in the release announcement rather than discovered by readers |
 | `app/components` is also ViewComponent's directory | ViewComponent users | `app/components` is not added to the view paths; the sidecar lookup is scoped to `component_roots` (§4.4) |
-| Sidecar name collision with a host template | Silent replacement in either direction with a view-path lookup | Lookup scoped to the component root; collision is an error (§4.3) |
+| Sidecar name collision with a host template | Silent replacement in either direction with a view-path lookup | Lookup scoped to the component root; the host's view paths are never consulted, so a host template at the same virtual path is not picked (§4.3, tested) |
 | Removing Phlex's attribute guards | Untrusted attribute values reach the page as `javascript:` URLs or `on*` handlers | Guards ported into `Attributes` with their own tests (§4.3) |
 | `mcp/data/registry.json` embeds component source | Every gem change; CI fails on a stale registry | Rebuilt and committed in every PR that touches `gem/lib/ruby_ui` (Phase 2.0) |
 | Single-maintainer upstream | Herb and ReActionView | With `intercept_erb = false` the components render through Erubi unchanged — the gate proved byte parity on both lanes — so the library still functions if upstream stalls, minus validation and the tag syntax |
diff --git a/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md b/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
index 6d722fbb..3f48d2e1 100644
--- a/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
+++ b/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
@@ -2115,7 +2115,7 @@ MSG
 ## Definition of done for Phase 2.0a
 
 - `bundle exec rake` green on Ruby 3.3 and 3.4 (CI), zero skips; `mcp/data/registry.json` unchanged.
-- `RubyUI::Component` and `RubyUI::Attributes` in `gem/lib/ruby_ui/`, with the differential test against Phlex 2.4.1 green (24 cases) and the guard tests green (9).
+- `RubyUI::Component` and `RubyUI::Attributes` in `gem/lib/ruby_ui/`, with the differential test against Phlex 2.4.1 green (30 cases) and the guard tests green (11).
 - The 188 golden snapshots byte-identical to `feat/golden-suite`.
 - The ERB lane green for Button's 15 scenarios with `RubyUI::Button` still Phlex.
 - 188 strict snapshots recorded; the strict form a fixed point over every one; every scenario has at least one lane.
diff --git a/design/v2/decisions.md b/design/v2/decisions.md
index 8a9c88e7..3db9200a 100644
--- a/design/v2/decisions.md
+++ b/design/v2/decisions.md
@@ -111,16 +111,28 @@ migration itself, in which case the generator ships in 2.1 instead.
 ## 5. The gem's test harness is an inline Rails application — 2026-09-20
 
 Decision A said `actionview` + `reactionview`, no controller, no dummy app.
-ReActionView's handler reads `Rails.root` without a guard, and a template
-outside `Rails.root` is "external": when Herb rejects it, `external_template_mode`
-falls back to Erubi silently. So the tests need a `Rails`, and its root must be
-the gem. `test_helper.rb` boots the smallest `Rails::Application` — no `app/`
-directory, no routes, no database — with `config.root` at the gem and
-`RAILS_ENV=test`. Measured: the existing suite is unchanged under it and
-`ActionView::Template.handler_for_extension(:erb)` is ReActionView's.
+The premise this started from — that `local_template?` treats a template
+outside `Rails.root` as "external" and falls back to Erubi — doesn't hold
+without an application: `Rails.root` is then `nil`, `nil.to_s` is `""`, and
+every identifier `start_with?("")`, so every template counts as local. The
+reasons that do hold: ReActionView's Railtie registers its ERB handler
+(`ActionView::Template.register_template_handler :erb, …`) only from
+`config.after_initialize`, which a Railtie runs only when a
+`Rails::Application` boots — without one, Erubi stays the `:erb` handler and
+Herb's validation never runs on anything, local or not; and `Rails.env`
+defaults to `development` unless `RAILS_ENV`/`RACK_ENV` is set (it does not
+need an application, but nothing else in a bare `require "rails"` sets it
+either), which turns on 1.6 `Base`'s dev comment. So the tests need a `Rails`,
+and its root must be the gem. `test_helper.rb` boots the smallest
+`Rails::Application` — no `app/` directory, no routes, no database — with
+`config.root` at the gem and `RAILS_ENV=test`. Measured: the existing suite is
+unchanged under it and `ActionView::Template.handler_for_extension(:erb)` is
+ReActionView's.
 **Cost if wrong:** `railties` as a development dependency and ~1 s of boot per
-test run. **What would reverse it:** ReActionView dropping its `Rails.root`
-reads, at which point the app object goes.
+test run. **What would reverse it:** ReActionView registering its ERB handler
+outside an application-boot initializer, at which point the app object's only
+remaining job is `Rails.env`, which `ENV["RAILS_ENV"] = "test"` alone already
+covers.
 
 ## 6. The 2.0 layer is `RubyUI::Component` until the last Phlex component is gone — 2026-09-20
 
@@ -178,5 +190,13 @@ class" cannot happen (one class file, one directory). The fresh-app install
 script the spec put in Phase 2.0 moves to Phase 2.4: until the installer writes
 the 2.0 initializer, the script would only exercise the 1.6 installer, which
 proves nothing about 2.0.
+
+The scoped lookup registers each root's resolver through
+`ActionView::PathRegistry.cast_file_system_resolvers` — a `:nodoc:` API
+present since Rails 7.1 — because that registration is what lets the
+reloader's `DetailsKey.clear` and `CacheExpiry` see the sidecars; a test pins
+it. ReActionView allows `actionview >= 7.0`; the 2.4 gemspec floors Rails at
+7.1.
+
 **Cost if wrong:** installation is first exercised end to end in 2.4 rather
 than now.

From 06fa8bd4966941558e5a4b51ece73b2d58ddc866 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 14:41:23 -0300
Subject: [PATCH 15/20] [Documentation] Test harness: say why the application
 is needed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Decision 5 retracted the "template outside Rails.root falls back to
Erubi" premise; the comment above TestApp and the spec's §6 harness
bullet still stated it, citing the decision by name. Both now give the
reason that holds: ReActionView registers its ERB handler only from an
application-boot initializer.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 design/2026-09-19-rubyui-2-0-design.md |  6 +++---
 gem/test/test_helper.rb                | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/design/2026-09-19-rubyui-2-0-design.md b/design/2026-09-19-rubyui-2-0-design.md
index 564aae0c..0b69e9e6 100644
--- a/design/2026-09-19-rubyui-2-0-design.md
+++ b/design/2026-09-19-rubyui-2-0-design.md
@@ -287,9 +287,9 @@ code.
   own and the differential test against Phlex 2.4.1 kept.
 - Replace the test harness: `railties`, `actionview`, `reactionview` and
   `phlex-rails` as development dependencies, and an inline `Rails::Application`
-  in `test_helper.rb` with the gem as `Rails.root` — ReActionView's handler
-  reads `Rails.root`, and a template outside it falls back to Erubi silently
-  when Herb rejects it (decision 5). `ComponentTest#phlex { }` stays for the
+  in `test_helper.rb` with the gem as `Rails.root` — ReActionView registers its ERB
+  handler only when an application boots; without one Erubi compiles every
+  template and Herb validates nothing (decision 5). `ComponentTest#phlex { }` stays for the
   Phlex-lane tests until the last Phlex component goes; `render_erb` renders a
   test view through the harness.
 - Add the **ERB lane** to the golden suite: a scenario may have an ERB fixture
diff --git a/gem/test/test_helper.rb b/gem/test/test_helper.rb
index 18b8f549..69feef40 100644
--- a/gem/test/test_helper.rb
+++ b/gem/test/test_helper.rb
@@ -26,11 +26,11 @@ module RubyUI
     autoload class_name, path
   end
 
-  # The smallest Rails application that gives ReActionView what it reads:
-  # `Rails.root` (a template under it is "local", so a Herb rejection raises
-  # instead of falling back to Erubi), `Rails.env` and `Rails.logger`. No app/
-  # directory, no routes, no database — an object, so the gem's tests compile
-  # ERB exactly as a host application will.
+  # The smallest Rails application: ReActionView's Railtie registers its ERB
+  # handler only from `config.after_initialize`, which runs when an application
+  # boots — without one Erubi stays the `:erb` handler and Herb never sees a
+  # template (decision 5). No app/ directory, no routes, no database — an
+  # object, so the gem's tests compile ERB exactly as a host application will.
   class TestApp < Rails::Application
     ROOT = File.expand_path("..", __dir__)
     PROBE_VIEWS = File.join(ROOT, "test/probes/views")

From c2449eaa9c54d50e02e9577404efe6124287b390 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 15:17:53 -0300
Subject: [PATCH 16/20] [Bug Fix] RubyUI::Attributes: refuse an unsafe name
 before reading its value, as Phlex does
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The name guard ran inside emit, which only the scalar and token paths
reached: a Hash under an unsafe name slipped through nested via the `_`
root key, so `onclick: {_: "x"}` and `srcdoc: {_: "x"}` were emitted where
Phlex raises. Phlex checks the name before it looks at the value; now so
does flat. A nested name keeps the character check only, as in Phlex
(`foo-onclick` is allowed on both sides) — pinned by a differential case.
Two raise pairs and a guard test cover the hole (review of #548, P0).

Also `require "date"`: `scalar` names Date, and nothing guarantees a host
loaded it before this file. (`Set` autoloads on Ruby 3.2+, the gem's floor.)

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 gem/lib/ruby_ui/attributes.rb                   | 17 ++++++++++++++---
 .../ruby_ui/attributes_differential_test.rb     | 16 ++++++++++------
 gem/test/ruby_ui/attributes_test.rb             |  7 +++++++
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/gem/lib/ruby_ui/attributes.rb b/gem/lib/ruby_ui/attributes.rb
index b23cd765..2b20825a 100644
--- a/gem/lib/ruby_ui/attributes.rb
+++ b/gem/lib/ruby_ui/attributes.rb
@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+require "date"
 require "tailwind_merge"
 
 module RubyUI
@@ -89,6 +90,9 @@ def flat(attributes)
           next unless value
 
           name = key_name(key)
+          # Phlex refuses the name before it looks at the value, so an unsafe
+          # name with a Hash value (`onclick: {_: "x"}`) is refused too.
+          refuse_unsafe_name!(name)
           case value
           when Hash
             # Phlex keys this on the Symbol `:style` itself, not on the
@@ -137,8 +141,11 @@ def refuse_url_value!(name, value)
         raise ArgumentError, "invalid value for #{name}: #{value.inspect}"
       end
 
-      # :keep or :drop. Raises for the names Phlex refuses.
-      def guard(name, serialized)
+      # The names Phlex refuses: forbidden characters, `srcdoc`/`sandbox`/
+      # `http-equiv`, and any `on*` handler. Checked on the top-level name
+      # before the value is read; a nested name only gets the character check,
+      # as in Phlex (`foo-onclick` is allowed there too).
+      def refuse_unsafe_name!(name)
         raise ArgumentError, "unsafe attribute name #{name.inspect}" if name.match?(UNSAFE_ATTRIBUTE_NAME_CHARS)
 
         normalized = name.downcase.delete("^a-z-")
@@ -146,8 +153,12 @@ def guard(name, serialized)
             (normalized.bytesize > 2 && normalized.start_with?("on") && !normalized.include?("-"))
           raise ArgumentError, "unsafe attribute name #{name.inspect}"
         end
+      end
 
-        return :keep unless REF_ATTRIBUTES.include?(normalized)
+      # :keep or :drop — the `javascript:` check on a URL attribute's serialized
+      # value. The name was refused or accepted before the value was read.
+      def guard(name, serialized)
+        return :keep unless REF_ATTRIBUTES.include?(name.downcase.delete("^a-z-"))
 
         decode_references(serialized).downcase.delete("^a-z:").start_with?("javascript:") ? :drop : :keep
       end
diff --git a/gem/test/ruby_ui/attributes_differential_test.rb b/gem/test/ruby_ui/attributes_differential_test.rb
index 1a15a1b2..42b3e88f 100644
--- a/gem/test/ruby_ui/attributes_differential_test.rb
+++ b/gem/test/ruby_ui/attributes_differential_test.rb
@@ -34,17 +34,21 @@ def view_template
     "url attribute from a non-string" => {href: 1, src: ["/", "a.png"]},
     "javascript url is dropped, a data attribute is not" => {:href => :"javascript:x", "data-href" => "javascript:kept"},
     "out-of-range character reference" => {href: "java&#999999999999999999;script:alert(1)"},
-    "a String \"style\" key nests instead of matching Phlex's Symbol :style" => {"style" => {width: "1px"}}
+    "a String \"style\" key nests instead of matching Phlex's Symbol :style" => {"style" => {width: "1px"}},
+    "a nested key may start with on, as in Phlex" => {foo: {onclick: "x"}}
   }.freeze
 
-  # Shapes where Phlex 2.4.1 raises inside `generate_nested_tokens` or
-  # `generate_styles` — no `case` branch there for `true`/`false` or for
-  # Date/Time — so `RubyUI::Attributes.flat` must raise too rather than
-  # silently serialize something Phlex would refuse.
+  # Shapes where Phlex 2.4.1 raises — inside `generate_nested_tokens` or
+  # `generate_styles` (no `case` branch there for `true`/`false` or for
+  # Date/Time), or on the attribute name before it looks at the value — so
+  # `RubyUI::Attributes.flat` must raise too rather than silently serialize
+  # something Phlex would refuse.
   RAISE_CASES = {
     "true has no case in a token list" => {class: [true]},
     "true has no case as a style value" => {style: {display: true}},
-    "a Date has no case in nested attributes" => {data: {at: Date.today}}
+    "a Date has no case in nested attributes" => {data: {at: Date.today}},
+    "an unsafe name is refused before its Hash value is read" => {onclick: {_: "x"}},
+    "srcdoc is refused with a Hash value too" => {srcdoc: {_: "<p>"}}
   }.freeze
 
   RAISE_CASES.each do |label, attributes|
diff --git a/gem/test/ruby_ui/attributes_test.rb b/gem/test/ruby_ui/attributes_test.rb
index a8bf12d9..ca2b9ca7 100644
--- a/gem/test/ruby_ui/attributes_test.rb
+++ b/gem/test/ruby_ui/attributes_test.rb
@@ -22,6 +22,13 @@ def test_srcdoc_sandbox_and_http_equiv_raise
     assert_raises(ArgumentError) { flat("http-equiv" => "refresh") }
   end
 
+  # Phlex checks the name before it looks at the value, so a Hash under an
+  # unsafe name cannot smuggle it in through the `_` root key.
+  def test_an_unsafe_name_is_refused_before_its_hash_value_is_read
+    assert_raises(ArgumentError) { flat(onclick: {_: "x"}) }
+    assert_raises(ArgumentError) { flat(srcdoc: {_: "<p>"}) }
+  end
+
   def test_a_name_with_forbidden_characters_raises_at_any_level
     assert_raises(ArgumentError) { flat("bad name" => "1") }
     assert_raises(ArgumentError) { flat("a=b" => "1") }

From 09e2ee66f0ccbab3418002bd4cf8fc6632847854 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 15:17:53 -0300
Subject: [PATCH 17/20] [Bug Fix] Golden suite: the strict form trims only HTML
 whitespace at the edges
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ruby's strip also takes U+000B and NUL, which HTML_WHITESPACE deliberately
excludes — a text-bearing component whose text started or ended with one
of them would have lost it silently in the strict form. Trim the HTML set
only (review of #548).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 gem/test/golden/canonical_html.rb      | 8 +++++++-
 gem/test/golden/canonical_html_test.rb | 4 ++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/gem/test/golden/canonical_html.rb b/gem/test/golden/canonical_html.rb
index f843db49..757e134c 100644
--- a/gem/test/golden/canonical_html.rb
+++ b/gem/test/golden/canonical_html.rb
@@ -72,7 +72,7 @@ class << self
       def call(html, strict: false)
         out = +""
         parse(html).each { |node| emit(node, 0, out, strict ? :preserve : :normal) }
-        strict ? out.strip : out
+        strict ? trim_edges(out) : out
       end
 
       # Every fragment is parsed inside a `<template>`, and that is not
@@ -101,6 +101,12 @@ def parse(html)
 
       private
 
+      # Only HTML's whitespace at the fragment's edges. Ruby's `strip` would
+      # also take U+000B and NUL, which are text here (see HTML_WHITESPACE).
+      def trim_edges(out)
+        out.sub(/\A[\t\n\f\r ]+/, "").sub(/[\t\n\f\r ]+\z/, "")
+      end
+
       def emit(node, depth, out, mode)
         case node
         when Nokogiri::XML::Element then emit_element(node, depth, out, mode)
diff --git a/gem/test/golden/canonical_html_test.rb b/gem/test/golden/canonical_html_test.rb
index 85fcc712..4122317b 100644
--- a/gem/test/golden/canonical_html_test.rb
+++ b/gem/test/golden/canonical_html_test.rb
@@ -93,6 +93,10 @@ def strict(html)
     Golden::CanonicalHtml.call(html, strict: true)
   end
 
+  def test_strict_trims_only_html_whitespace_at_the_edges
+    assert_equal "\vx\v", strict("\n\vx\v\n")
+  end
+
   def test_strict_sees_whitespace_between_inline_siblings
     refute_equal strict("<span>a</span><span>b</span>"), strict("<span>a</span> <span>b</span>")
   end

From afb83f602438864edfadc5f8d65259836a637fbc Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 15:17:53 -0300
Subject: [PATCH 18/20] =?UTF-8?q?[Documentation]=20Review=20of=20#548:=20t?=
 =?UTF-8?q?he=20load-hook=20assertion,=20decision=205's=20hook,=20=C2=A79.?=
 =?UTF-8?q?4,=20follow-ups=208=E2=80=9311?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ErbHarnessTest keeps its `ActionView::Base` reference and says why: the
  ERB handler is registered from `config.after_initialize` inside the
  `:action_view` load hook, so it needs the constant loaded — without the
  line the test fails under seeds that run it first (37227). Decision 5 and
  the TestApp comment name the hook.
- Golden::Catalog.component_classes' docstring names both base classes.
- Spec §9.4: the strict lane covers every scenario, so the accepted gap is
  what no HTML comparison sees, not uncovered components.
- Plan definition of done: post-review counts, with the as-planned ones.
- follow-up-issues.md 8–11: Switch a11y, ComboboxInputTrigger roles,
  ClipboardPopover initial state, Link type="button" — 1.6 defects the
  strict snapshots made visible; fixed in their own PRs on the 2.0 line.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 design/2026-09-19-rubyui-2-0-design.md        |  8 ++--
 ...20-phase-2-0a-foundation-implementation.md |  2 +-
 design/v2/decisions.md                        |  6 ++-
 design/v2/follow-up-issues.md                 | 46 ++++++++++++++++++-
 gem/test/erb_harness_test.rb                  |  5 +-
 gem/test/golden/catalog.rb                    |  7 +--
 gem/test/test_helper.rb                       |  9 ++--
 7 files changed, 67 insertions(+), 16 deletions(-)

diff --git a/design/2026-09-19-rubyui-2-0-design.md b/design/2026-09-19-rubyui-2-0-design.md
index 0b69e9e6..7b625b1d 100644
--- a/design/2026-09-19-rubyui-2-0-design.md
+++ b/design/2026-09-19-rubyui-2-0-design.md
@@ -681,10 +681,10 @@ behaviour on an empty-versus-whitespace-only element (§9.1), which no
 inline-adjacency measure names. What bounds it now is §9.1's three-part
 resolution — the hardened canonical form catches the empty/whitespace-only
 case for every component, trim mode stops the ERB lane emitting what Phlex did
-not, and the strict lane compares text-bearing components raw. Accepted
-knowingly, with that shape: what remains unseen is whitespace between element
-siblings and at text boundaries in components the strict lane does not cover,
-and Phase 3 is where a browser first looks.
+not, and the strict lane compares every scenario in preserve mode (decision 8).
+Accepted knowingly, with that shape: what remains unseen is what no HTML
+comparison can see — layout, focus, the controllers' behaviour — and Phase 3
+is where a browser first looks.
 
 ## 10. Risks
 
diff --git a/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md b/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
index 3f48d2e1..b00bea8b 100644
--- a/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
+++ b/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
@@ -2115,7 +2115,7 @@ MSG
 ## Definition of done for Phase 2.0a
 
 - `bundle exec rake` green on Ruby 3.3 and 3.4 (CI), zero skips; `mcp/data/registry.json` unchanged.
-- `RubyUI::Component` and `RubyUI::Attributes` in `gem/lib/ruby_ui/`, with the differential test against Phlex 2.4.1 green (30 cases) and the guard tests green (11).
+- `RubyUI::Component` and `RubyUI::Attributes` in `gem/lib/ruby_ui/`, with the differential test against Phlex 2.4.1 green (33 cases) and the guard tests green (12) — the counts after the two review fix rounds; the per-task steps print the counts as planned (27 and 10).
 - The 188 golden snapshots byte-identical to `feat/golden-suite`.
 - The ERB lane green for Button's 15 scenarios with `RubyUI::Button` still Phlex.
 - 188 strict snapshots recorded; the strict form a fixed point over every one; every scenario has at least one lane.
diff --git a/design/v2/decisions.md b/design/v2/decisions.md
index 3db9200a..ba74cb6a 100644
--- a/design/v2/decisions.md
+++ b/design/v2/decisions.md
@@ -118,8 +118,10 @@ every identifier `start_with?("")`, so every template counts as local. The
 reasons that do hold: ReActionView's Railtie registers its ERB handler
 (`ActionView::Template.register_template_handler :erb, …`) only from
 `config.after_initialize`, which a Railtie runs only when a
-`Rails::Application` boots — without one, Erubi stays the `:erb` handler and
-Herb's validation never runs on anything, local or not; and `Rails.env`
+`Rails::Application` boots, inside the `:action_view` load hook that fires
+when `ActionView::Base` loads — without an application, Erubi stays the
+`:erb` handler and Herb's validation never runs on anything, local or not;
+and `Rails.env`
 defaults to `development` unless `RAILS_ENV`/`RACK_ENV` is set (it does not
 need an application, but nothing else in a bare `require "rails"` sets it
 either), which turns on 1.6 `Base`'s dev comment. So the tests need a `Rails`,
diff --git a/design/v2/follow-up-issues.md b/design/v2/follow-up-issues.md
index 630a259b..072777b9 100644
--- a/design/v2/follow-up-issues.md
+++ b/design/v2/follow-up-issues.md
@@ -1,7 +1,8 @@
 # Follow-up issues surfaced by the golden suite
 
 Date: 2026-09-19
-Status: opened 2026-09-19 as #537–#543
+Status: 1–7 opened 2026-09-19 as #537–#543; 8–11 added 2026-09-20 from the
+review of PR #548, to be opened
 
 The golden suite pins what 1.6 renders today, defects included — that is
 what makes it a ruler. These are the defects the recording made visible
@@ -110,6 +111,49 @@ Ordered by user impact.
 - **Fix:** `aria_expanded: "false"` and have `command_controller.js` set it;
   re-record `command/*`.
 
+## 8. `Switch` is neither perceivable nor operable by assistive technology
+
+- **Where:** `switch.rb`: `role: "switch"` on the label with no
+  `aria-checked`; the checkbox input carries `class: "hidden peer"`
+  (`display: none`). Snapshots `switch/*`.
+- **Effect:** the switch role requires `aria-checked`; a `display: none`
+  input leaves the accessibility tree and the tab order, so keyboard users
+  cannot toggle it and the label's `focus-visible:` classes never apply.
+- **Fix:** render `aria-checked` and keep it in sync from the controller;
+  `sr-only` instead of `hidden` so the input stays focusable; re-record
+  `switch/*`.
+
+## 9. `ComboboxInputTrigger` puts the combobox states on a role-less `<div>`
+
+- **Where:** `combobox_input_trigger.rb`: `aria-expanded` and
+  `aria-haspopup="listbox"` on the wrapper `div`; the `<input>` has no
+  `role="combobox"`, `aria-controls` or `aria-activedescendant`. Snapshot
+  `combobox/input_trigger`.
+- **Effect:** ARIA 1.2 puts those states on the element with the combobox
+  role; on a role-less div they are not conveyed, and the listbox
+  relationship is never announced.
+- **Fix:** move `role: "combobox"`, `aria-haspopup`, `aria-expanded` and
+  `aria-controls` onto the input; re-record `combobox/*`.
+
+## 10. `ClipboardPopover` starts hidden with `data-state="open"`
+
+- **Where:** `clipboard_popover.rb` `default_attrs` sets `state: :open` on a
+  panel that starts hidden; `clipboard_controller.js` sets `open` in
+  `showPopover` and `closed` in `hidePopover`. Snapshots
+  `clipboard/popover_*`.
+- **Effect:** the hidden panel is labelled open, unlike ContextMenu,
+  HoverCard and Popover (`closed` at rest). Low user impact: the animate-in
+  classes still run when the element is first displayed.
+- **Fix:** `state: :closed`; re-record `clipboard/popover_*`.
+
+## 11. `Link` carries `type="button"` on an `<a>`
+
+- **Where:** `link.rb` `default_attrs` `{type: "button", ...}`, copied from
+  Button. Snapshots `link/*`.
+- **Effect:** `type` on an anchor names the linked resource's MIME type;
+  `button` is meaningless there. Invalid, harmless.
+- **Fix:** drop `type:` from Link's `default_attrs`; re-record `link/*`.
+
 ## Rejected review findings, for the record
 
 Two findings from the same review were checked and are wrong; they are
diff --git a/gem/test/erb_harness_test.rb b/gem/test/erb_harness_test.rb
index c0031d58..6304f127 100644
--- a/gem/test/erb_harness_test.rb
+++ b/gem/test/erb_harness_test.rb
@@ -7,7 +7,10 @@
 # the ERB lane and the component layer do later stands on these two facts.
 class ErbHarnessTest < Minitest::Test
   def test_erb_is_compiled_by_reactionview_under_rails_root
-    assert_kind_of Class, ActionView::Base # loading it is what swaps the handler in
+    # ReActionView registers the handler from the :action_view load hook, which
+    # fires when ActionView::Base is autoloaded — touch it here rather than
+    # depend on an earlier test having done so.
+    assert_kind_of Class, ActionView::Base
     assert_equal ReActionView::Template::Handlers::ERB, ActionView::Template.handler_for_extension(:erb)
     assert_equal File.expand_path("..", __dir__), Rails.root.to_s
     assert_equal "test", Rails.env
diff --git a/gem/test/golden/catalog.rb b/gem/test/golden/catalog.rb
index 3759a404..5f4f3321 100644
--- a/gem/test/golden/catalog.rb
+++ b/gem/test/golden/catalog.rb
@@ -101,9 +101,10 @@ def component_directories
           .sort
       end
 
-      # Every RubyUI::Base subclass shipped by the gem. Non-Base classes in the
-      # same directories (the DataTable pagination adapters, the Toast flash
-      # helper module) emit no HTML and are covered by their own unit tests.
+      # Every RubyUI::Base or RubyUI::Component subclass shipped by the gem.
+      # Other classes in the same directories (the DataTable pagination
+      # adapters, the Toast flash helper module) emit no HTML and are covered
+      # by their own unit tests.
       def component_classes
         component_directories
           .flat_map { |directory| Dir.glob(File.join(LIB_ROOT, directory, "*.rb")) }
diff --git a/gem/test/test_helper.rb b/gem/test/test_helper.rb
index 69feef40..174d5956 100644
--- a/gem/test/test_helper.rb
+++ b/gem/test/test_helper.rb
@@ -27,10 +27,11 @@ module RubyUI
   end
 
   # The smallest Rails application: ReActionView's Railtie registers its ERB
-  # handler only from `config.after_initialize`, which runs when an application
-  # boots — without one Erubi stays the `:erb` handler and Herb never sees a
-  # template (decision 5). No app/ directory, no routes, no database — an
-  # object, so the gem's tests compile ERB exactly as a host application will.
+  # handler from `config.after_initialize` (inside the `:action_view` load
+  # hook), which runs when an application boots — without one Erubi stays the
+  # `:erb` handler and Herb never sees a template (decision 5). No app/
+  # directory, no routes, no database — an object, so the gem's tests compile
+  # ERB exactly as a host application will.
   class TestApp < Rails::Application
     ROOT = File.expand_path("..", __dir__)
     PROBE_VIEWS = File.join(ROOT, "test/probes/views")

From 4e6bbee5a5911d42967d94c66049576d3591f21a Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 15:23:29 -0300
Subject: [PATCH 19/20] =?UTF-8?q?[Documentation]=20Follow-up=20issues=208?=
 =?UTF-8?q?=E2=80=9311=20opened=20as=20#550=E2=80=93#553?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 design/v2/follow-up-issues.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/design/v2/follow-up-issues.md b/design/v2/follow-up-issues.md
index 072777b9..04ba8af4 100644
--- a/design/v2/follow-up-issues.md
+++ b/design/v2/follow-up-issues.md
@@ -1,8 +1,8 @@
 # Follow-up issues surfaced by the golden suite
 
 Date: 2026-09-19
-Status: 1–7 opened 2026-09-19 as #537–#543; 8–11 added 2026-09-20 from the
-review of PR #548, to be opened
+Status: 1–7 opened 2026-09-19 as #537–#543; 8–11 opened 2026-09-20 as
+#550–#553 from the review of PR #548
 
 The golden suite pins what 1.6 renders today, defects included — that is
 what makes it a ruler. These are the defects the recording made visible
@@ -111,7 +111,7 @@ Ordered by user impact.
 - **Fix:** `aria_expanded: "false"` and have `command_controller.js` set it;
   re-record `command/*`.
 
-## 8. `Switch` is neither perceivable nor operable by assistive technology
+## 8. `Switch` is neither perceivable nor operable by assistive technology — #550
 
 - **Where:** `switch.rb`: `role: "switch"` on the label with no
   `aria-checked`; the checkbox input carries `class: "hidden peer"`
@@ -123,7 +123,7 @@ Ordered by user impact.
   `sr-only` instead of `hidden` so the input stays focusable; re-record
   `switch/*`.
 
-## 9. `ComboboxInputTrigger` puts the combobox states on a role-less `<div>`
+## 9. `ComboboxInputTrigger` puts the combobox states on a role-less `<div>` — #551
 
 - **Where:** `combobox_input_trigger.rb`: `aria-expanded` and
   `aria-haspopup="listbox"` on the wrapper `div`; the `<input>` has no
@@ -135,7 +135,7 @@ Ordered by user impact.
 - **Fix:** move `role: "combobox"`, `aria-haspopup`, `aria-expanded` and
   `aria-controls` onto the input; re-record `combobox/*`.
 
-## 10. `ClipboardPopover` starts hidden with `data-state="open"`
+## 10. `ClipboardPopover` starts hidden with `data-state="open"` — #552
 
 - **Where:** `clipboard_popover.rb` `default_attrs` sets `state: :open` on a
   panel that starts hidden; `clipboard_controller.js` sets `open` in
@@ -146,7 +146,7 @@ Ordered by user impact.
   classes still run when the element is first displayed.
 - **Fix:** `state: :closed`; re-record `clipboard/popover_*`.
 
-## 11. `Link` carries `type="button"` on an `<a>`
+## 11. `Link` carries `type="button"` on an `<a>` — #553
 
 - **Where:** `link.rb` `default_attrs` `{type: "button", ...}`, copied from
   Button. Snapshots `link/*`.

From f8554238ed8f76908544188f8b60e5f46a0179d5 Mon Sep 17 00:00:00 2001
From: Cirdes <cirdes@linkana.com>
Date: Sun, 20 Sep 2026 15:24:22 -0300
Subject: [PATCH 20/20] [Bug Fix] Golden suite: strict snapshot follows the
 custom-keybindings scenario fix

Re-recorded after merging ca928cb from feat/golden-suite; the canonical
and strict forms of command/trigger_with_custom_keybindings now both pin
`keydown.ctrl+p@window`.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../golden/strict/command/trigger_with_custom_keybindings.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gem/test/golden/strict/command/trigger_with_custom_keybindings.html b/gem/test/golden/strict/command/trigger_with_custom_keybindings.html
index ec479fba..45d5e8d6 100644
--- a/gem/test/golden/strict/command/trigger_with_custom_keybindings.html
+++ b/gem/test/golden/strict/command/trigger_with_custom_keybindings.html
@@ -1 +1 @@
-<div data-action="click-&gt;ruby-ui--command-dialog#open ctrl+p-&gt;ruby-ui--command-dialog#open">Open</div>
\ No newline at end of file
+<div data-action="click-&gt;ruby-ui--command-dialog#open keydown.ctrl+p@window-&gt;ruby-ui--command-dialog#open">Open</div>
\ No newline at end of file