diff --git a/design/2026-09-19-rubyui-2-0-design.md b/design/2026-09-19-rubyui-2-0-design.md
index 9ee6bdc5..7b625b1d 100644
--- a/design/2026-09-19-rubyui-2-0-design.md
+++ b/design/2026-09-19-rubyui-2-0-design.md
@@ -129,12 +129,15 @@ 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
 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:
 
@@ -156,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
@@ -178,16 +183,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.
 
@@ -222,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
@@ -279,49 +285,49 @@ 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 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
+  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 five CI jobs are green with the registry unchanged.
 
 #### 2.1 The hard components first
 
@@ -341,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.
@@ -390,7 +401,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.
@@ -403,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
@@ -617,10 +637,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
 
@@ -660,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
 
@@ -673,8 +694,8 @@ 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) |
-| 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) |
+| `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; 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
new file mode 100644
index 00000000..b00bea8b
--- /dev/null
+++ b/design/plans/2026-09-20-phase-2-0a-foundation-implementation.md
@@ -0,0 +1,2130 @@
+# 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 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.
+
+**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, 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. |
+
+---
+
+## 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 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.
+
+**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
+    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
+```
+
+- [ ] **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, ... 0 failures, 0 errors`.
+
+- [ ] **Step 6: Run everything and confirm nothing else moved**
+
+```bash
+cd gem
+bundle exec rake
+```
+
+Expected: `506 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_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
+```
+
+- [ ] **Step 3: Run them and confirm the guard tests fail**
+
+```bash
+cd gem
+bundle exec rake test N=/AttributesTest/
+```
+
+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**
+
+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 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:
+
+```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 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)** Replace the whole `flat` method with:
+
+```ruby
+      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
+```
+
+**(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 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, 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
+```
+
+- [ ] **Step 5: Run the guard tests and confirm all nine pass**
+
+```bash
+cd gem
+bundle exec rake test N=/AttributesTest/
+```
+
+Expected: `10 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
+  ```
+
+- 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
+cd gem
+bundle exec rake test N=/AttributesDifferentialTest/
+```
+
+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**
+
+```bash
+cd gem
+bundle exec rake
+```
+
+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
+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
+      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
+# 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 }
+```
+
+- [ ] **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: `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**
+
+```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
+      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
+```
+
+- [ ] **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: `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
+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; 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`
+- 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
+
+      # 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
+```
+
+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 whole `if UPDATE … end` block (three lines) with
+
+```ruby
+    record!(scenario) if UPDATE
+```
+
+**(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
+
+  # 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
+```
+
+**(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 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
+
+    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: `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**
+
+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: `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
+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: `580 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). 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): 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`; `Scenario#strict_snapshot_path`; `Golden::Catalog.strict_files`; `record!` writes both forms.
+
+- [ ] **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
+
+  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**
+
+```bash
+cd gem
+bundle exec rake test N=/GoldenCanonicalHtmlTest#test_strict/
+```
+
+Expected: 8 runs, 8 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
+```
+
+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**
+
+```bash
+cd gem
+bundle exec rake test N=/GoldenCanonicalHtmlTest/
+```
+
+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: `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**
+
+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__)
+```
+
+**(b)** Inside `Scenario`, after `recording_lane`, add:
+
+```ruby
+      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)
+```
+
+**(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"
+
+    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)** 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(&: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: `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**
+
+```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 --untracked-files=all gem/test/golden/strict | wc -l
+find gem/test/golden/strict -name '*.html' | wc -l
+```
+
+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**
+
+```bash
+cd gem
+bundle exec rake
+```
+
+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
+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 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>
+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, 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.
+```
+
+- [ ] **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 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:
+
+```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 one recorded snapshot per
+scenario (188). 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 "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: 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**
+
+```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: `589 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 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
+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            # 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
+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 (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.
+- 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 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.
diff --git a/design/v2/decisions.md b/design/v2/decisions.md
index b118d29c..ba74cb6a 100644
--- a/design/v2/decisions.md
+++ b/design/v2/decisions.md
@@ -108,3 +108,97 @@ 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.
+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, 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`,
+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 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
+
+`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.
+
+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.
diff --git a/design/v2/follow-up-issues.md b/design/v2/follow-up-issues.md
index 630a259b..04ba8af4 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 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
@@ -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 — #550
+
+- **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>` — #551
+
+- **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"` — #552
+
+- **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>` — #553
+
+- **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/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/lib/ruby_ui/attributes.rb b/gem/lib/ruby_ui/attributes.rb
new file mode 100644
index 00000000..2b20825a
--- /dev/null
+++ b/gem/lib/ruby_ui/attributes.rb
@@ -0,0 +1,244 @@
+# frozen_string_literal: true
+
+require "date"
+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 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 `<>&"'/=`,
+  # 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), the leading
+  # space it leaves when the first `style:` value is nil (no snapshot depends
+  # 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
+
+    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)
+          # 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
+            # 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 = (key == :style) ? styles(value) : tokens(value)
+            refuse_url_value!(name, value) if serialized.nil?
+            emit(out, name, serialized)
+          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
+
+      # 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
+
+      # 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-")
+        if UNSAFE_ATTRIBUTES.include?(normalized) ||
+            (normalized.bytesize > 2 && normalized.start_with?("on") && !normalized.include?("-"))
+          raise ArgumentError, "unsafe attribute name #{name.inspect}"
+        end
+      end
+
+      # :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
+
+      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
+          # 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
+      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)
+          when String, Symbol, Integer, Float then scalar(token)
+          else raise ArgumentError, "invalid token type #{token.class}"
+          end
+        end
+        list.join(" ") unless list.empty?
+      end
+
+      def styles(value)
+        case value
+        when Hash
+          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
+            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/lib/ruby_ui/component.rb b/gem/lib/ruby_ui/component.rb
new file mode 100644
index 00000000..ebdfb87e
--- /dev/null
+++ b/gem/lib/ruby_ui/component.rb
@@ -0,0 +1,131 @@
+# 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.
+    # 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
+
+    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
+
+      # 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}"
+      end
+    end
+
+    private
+
+    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)
+
+      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
+  end
+end
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..6304f127
--- /dev/null
+++ b/gem/test/erb_harness_test.rb
@@ -0,0 +1,26 @@
+# 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
+    # 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
+  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/golden/canonical_html.rb b/gem/test/golden/canonical_html.rb
index 5cee60b7..757e134c 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 ? trim_edges(out) : out
       end
 
       # Every fragment is parsed inside a `<template>`, and that is not
@@ -97,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 99ccbf48..4122317b 100644
--- a/gem/test/golden/canonical_html_test.rb
+++ b/gem/test/golden/canonical_html_test.rb
@@ -88,4 +88,57 @@ 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_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
+
+  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 d4555fad..5f4f3321 100644
--- a/gem/test/golden/catalog.rb
+++ b/gem/test/golden/catalog.rb
@@ -6,6 +6,12 @@ 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__)
+
+    # 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
@@ -24,8 +30,32 @@ 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 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
     end
 
@@ -51,6 +81,16 @@ 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
+
+      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.
@@ -61,15 +101,16 @@ 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")) }
           .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/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..45d5e8d6
--- /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 keydown.ctrl+p@window-&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/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..1b38cb32 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"
@@ -58,10 +61,51 @@ def assert_golden(scenario)
 
     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)
+    Golden::CanonicalHtml.call(render(scenario, lane))
   end
 
-  def canonicalize(scenario)
-    Golden::CanonicalHtml.call(Golden::Harness.render(&scenario.block))
+  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
+      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
 end
 
@@ -92,12 +136,38 @@ 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
+
+  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.
   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
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/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/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/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/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/attributes_differential_test.rb b/gem/test/ruby_ui/attributes_differential_test.rb
new file mode 100644
index 00000000..42b3e88f
--- /dev/null
+++ b/gem/test/ruby_ui/attributes_differential_test.rb
@@ -0,0 +1,103 @@
+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)"},
+    "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), 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}},
+    "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|
+    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),
+        "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..ca2b9ca7
--- /dev/null
+++ b/gem/test/ruby_ui/attributes_test.rb
@@ -0,0 +1,90 @@
+# 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
+
+  # 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") }
+    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
+
+  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
diff --git a/gem/test/ruby_ui/component_test.rb b/gem/test/ruby_ui/component_test.rb
new file mode 100644
index 00000000..4297e567
--- /dev/null
+++ b/gem/test/ruby_ui/component_test.rb
@@ -0,0 +1,124 @@
+# 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
+
+  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
+
+  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/ruby_ui/enum_test.rb b/gem/test/ruby_ui/enum_test.rb
new file mode 100644
index 00000000..4a6f33ec
--- /dev/null
+++ b/gem/test/ruby_ui/enum_test.rb
@@ -0,0 +1,57 @@
+# 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
+
+  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 d31728d7..174d5956 100644
--- a/gem/test/test_helper.rb
+++ b/gem/test/test_helper.rb
@@ -1,10 +1,20 @@
 # frozen_string_literal: true
 
+# 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"
 require "phlex"
 require "json"
 require "securerandom"
+require "rails"
+require "action_controller/railtie"
+require "reactionview"
+require "phlex-rails"
 require "minitest/autorun"
 
 module RubyUI
@@ -15,8 +25,53 @@ module RubyUI
 
     autoload class_name, path
   end
+
+  # The smallest Rails application: ReActionView's Railtie registers its ERB
+  # 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")
+
+    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!
+
+# 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(&)
@@ -25,10 +80,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