diff --git a/mix.exs b/mix.exs
index a6657b8..8fe7fc5 100644
--- a/mix.exs
+++ b/mix.exs
@@ -54,7 +54,7 @@ defmodule Shadix.MixProject do
   # Run "mix help deps" to learn about dependencies.
   defp deps do
     [
-      {:phoenix_live_view, "~> 1.1"},
+      {:phoenix_live_view, "~> 1.2"},
       {:jason, "~> 1.4"},
 
       # Dev/test harness + docs deployment: assertion helpers and TS hook builds.
diff --git a/mix.lock b/mix.lock
index 35b40a3..61274ab 100644
--- a/mix.lock
+++ b/mix.lock
@@ -22,7 +22,7 @@
   "nimble_parsec": {:hex, :nimble_parsec, "1.4.2", "8efba0122db06df95bfaa78f791344a89352ba04baedd3849593bfce4d0dc1c6", [:mix], [], "hexpm", "4b21398942dda052b403bbe1da991ccd03a053668d147d53fb8c4e0efe09c973"},
   "phoenix": {:hex, :phoenix, "1.8.8", "ada3d761359274178180c0e992ef0c2b536bd7c3bd75ebba94acbf39ab4347fe", [:mix], [{:bandit, "~> 1.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.7", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5.3", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "f0c843037bd2e7012fc1d1ec9574dfa6972b7e3d09e9b77fd23aa283af0aa994"},
   "phoenix_html": {:hex, :phoenix_html, "4.3.0", "d3577a5df4b6954cd7890c84d955c470b5310bb49647f0a114a6eeecc850f7ad", [:mix], [], "hexpm", "3eaa290a78bab0f075f791a46a981bbe769d94bc776869f4f3063a14f30497ad"},
-  "phoenix_live_view": {:hex, :phoenix_live_view, "1.1.32", "4977ad4cfab7868f3d2ba390a2cd6c62412614d48f798e85785602281a0a3827", [:mix], [{:igniter, ">= 0.6.16 and < 1.0.0-0", [hex: :igniter, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:lazy_html, "~> 0.1.0", [hex: :lazy_html, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0 or ~> 1.8.0-rc", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "3c9d8e76373414259ec5699a809991d1324808bee1d297730599e273282cee34"},
+  "phoenix_live_view": {:hex, :phoenix_live_view, "1.2.3", "e8abe7f2acb96d98695e9290b35cb5a01a696cc2086d4ff2e0b3aa8b9c74675f", [:mix], [{:igniter, ">= 0.6.16 and < 1.0.0-0", [hex: :igniter, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:lazy_html, "~> 0.1.0", [hex: :lazy_html, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0 or ~> 1.8.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "449affd6aea24daaa2f6b43748fc1e2c6a87610df996cc1f54e7b19a7a18e638"},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.2.0", "ff3a5616e1bed6804de7773b92cbccfc0b0f473faf1f63d7daf1206c7aeaaa6f", [:mix], [], "hexpm", "adc313a5bf7136039f63cfd9668fde73bba0765e0614cba80c06ac9460ff3e96"},
   "phoenix_template": {:hex, :phoenix_template, "1.0.4", "e2092c132f3b5e5b2d49c96695342eb36d0ed514c5b252a77048d5969330d639", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "2c0c81f0e5c6753faf5cca2f229c9709919aba34fab866d3bc05060c9c444206"},
   "phosphor_live_view": {:hex, :phosphor_live_view, "2.1.0", "41a433b3a9493896ce085460c1e67ab23979b8b7ce82406a63029b8cc638c348", [:mix], [{:phoenix, "~> 1.7", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_live_view, "~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "723f2d92765e1b096b2b117651c4564576d3e693d155273026c0f556de87811a"},
-- 
2.51.2


From f6ef260c8e5b83af7e4aa573ad0a144a89faa971 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <git@btao.org>
Date: Sat, 20 Jun 2026 00:49:03 +0100
Subject: [PATCH 02/12] feat: ColocatedCSS module, namespace rewrite, :shadix
 config, render_file

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 lib/shadix/colocated_css.ex        | 17 ++++++++++
 lib/shadix/generator.ex            | 54 ++++++++++++++++++++++++++++++
 test/shadix/colocated_css_test.exs |  8 +++++
 test/shadix/generator_test.exs     | 53 +++++++++++++++++++++++++++++
 4 files changed, 132 insertions(+)
 create mode 100644 lib/shadix/colocated_css.ex
 create mode 100644 test/shadix/colocated_css_test.exs

diff --git a/lib/shadix/colocated_css.ex b/lib/shadix/colocated_css.ex
new file mode 100644
index 0000000..0d3da36
--- /dev/null
+++ b/lib/shadix/colocated_css.ex
@@ -0,0 +1,17 @@
+defmodule Shadix.ColocatedCSS do
+  @moduledoc """
+  HEEx `:type` for shadix's colocated component CSS.
+
+  Extracts the contents of a component's `<style :type={Shadix.ColocatedCSS}>` tag
+  at compile time into the `phoenix-colocated` bundle, as-is. shadix CSS is already
+  keyed by `data-slot` attributes and wrapped in `@layer components`, so no scoping
+  transform is needed.
+
+  When a component is copied into a consumer's app, `Shadix.ColocatedCSS` is rewritten
+  to `<their namespace>.ColocatedCSS`, so each app owns its own copy of this module.
+  """
+  use Phoenix.LiveView.ColocatedCSS
+
+  @impl true
+  def transform("style", _attrs, css, _meta), do: {:ok, css, []}
+end
diff --git a/lib/shadix/generator.ex b/lib/shadix/generator.ex
index 7110488..0655b0d 100644
--- a/lib/shadix/generator.ex
+++ b/lib/shadix/generator.ex
@@ -26,10 +26,64 @@ defmodule Shadix.Generator do
   def rewrite_namespace(source, namespace) do
     source
     |> String.replace("Shadix.Components", namespace)
+    |> String.replace("Shadix.ColocatedCSS", namespace <> ".ColocatedCSS")
     |> String.replace("Shadix.Cn", namespace <> ".Cn")
     |> String.replace("Shadix.Form", namespace <> ".Form")
   end
 
+  @default_style "nova"
+  @marker "<%!-- shadix:colocated-css --%>"
+
+  @doc """
+  Resolves the configured style: `opts[:style]`, then `config :shadix, :style`,
+  then the default (`"nova"`).
+  """
+  @spec configured_style(keyword()) :: String.t()
+  def configured_style(opts),
+    do: opts[:style] || Application.get_env(:shadix, :style) || @default_style
+
+  @doc """
+  Resolves the configured namespace: `opts[:namespace]`, then `config :shadix,
+  :namespace`, then `default_namespace/0`.
+  """
+  @spec configured_namespace(keyword()) :: String.t()
+  def configured_namespace(opts),
+    do: opts[:namespace] || Application.get_env(:shadix, :namespace) || default_namespace()
+
+  @doc """
+  Resolves the configured target dir: `opts[:dir]`, then `config :shadix, :dir`,
+  then `default_dir/1` for `namespace`.
+  """
+  @spec configured_dir(keyword(), String.t()) :: String.t()
+  def configured_dir(opts, namespace),
+    do: opts[:dir] || Application.get_env(:shadix, :dir) || default_dir(namespace)
+
+  @doc """
+  Renders a registry file's content for a target app: injects the chosen style's
+  colocated CSS at the `#{@marker}` marker (when `styles` is a map containing
+  `style`), then rewrites `Shadix.*` namespaces.
+
+  Markerless / styleless content is passed through `rewrite_namespace/2` only.
+  """
+  @spec render_file(String.t(), map() | nil, String.t(), String.t()) :: String.t()
+  def render_file(content, styles, style, namespace) do
+    content
+    |> inject_style(styles, style)
+    |> rewrite_namespace(namespace)
+  end
+
+  defp inject_style(content, styles, style) when is_map(styles) do
+    case Map.fetch(styles, style) do
+      {:ok, css} ->
+        String.replace(content, @marker, "<style :type={Shadix.ColocatedCSS}>\n#{css}\n</style>")
+
+      :error ->
+        content
+    end
+  end
+
+  defp inject_style(content, _styles, _style), do: content
+
   @doc """
   Returns the default target namespace for the current Mix project.
 
diff --git a/test/shadix/colocated_css_test.exs b/test/shadix/colocated_css_test.exs
new file mode 100644
index 0000000..49603e6
--- /dev/null
+++ b/test/shadix/colocated_css_test.exs
@@ -0,0 +1,8 @@
+defmodule Shadix.ColocatedCSSTest do
+  use ExUnit.Case, async: true
+
+  test "transform/4 returns the css unchanged with no root attrs" do
+    assert Shadix.ColocatedCSS.transform("style", %{}, ".x{color:red}", %{}) ==
+             {:ok, ".x{color:red}", []}
+  end
+end
diff --git a/test/shadix/generator_test.exs b/test/shadix/generator_test.exs
index e0b6b98..6effe89 100644
--- a/test/shadix/generator_test.exs
+++ b/test/shadix/generator_test.exs
@@ -45,6 +45,11 @@ defmodule Shadix.GeneratorTest do
       assert out == "import Demo.UI.Form\n  Demo.UI.Form.field_attrs(x)"
     end
 
+    test "rewrites Shadix.ColocatedCSS to the target namespace" do
+      assert Generator.rewrite_namespace(":type={Shadix.ColocatedCSS}", "Demo.UI") ==
+               ":type={Demo.UI.ColocatedCSS}"
+    end
+
     test "leaves unrelated text unchanged" do
       source = "defmodule MyApp.Something do\n  @doc \"unrelated\"\nend"
       result = Generator.rewrite_namespace(source, "Demo.UI")
@@ -52,6 +57,54 @@ defmodule Shadix.GeneratorTest do
     end
   end
 
+  describe "configured_style/1 + configured_namespace/1 + configured_dir/2" do
+    test "configured_style prefers opts, then app env, then nova" do
+      assert Generator.configured_style(style: "vega") == "vega"
+      Application.put_env(:shadix, :style, "vega")
+      assert Generator.configured_style([]) == "vega"
+      Application.delete_env(:shadix, :style)
+      assert Generator.configured_style([]) == "nova"
+    end
+
+    test "configured_namespace prefers opts, then app env, then default" do
+      assert Generator.configured_namespace(namespace: "A.B") == "A.B"
+      Application.put_env(:shadix, :namespace, "C.D")
+      assert Generator.configured_namespace([]) == "C.D"
+      Application.delete_env(:shadix, :namespace)
+      assert Generator.configured_namespace([]) == "ShadixWeb.Components.UI"
+    end
+
+    test "configured_dir prefers opts, then app env, then default_dir" do
+      assert Generator.configured_dir([dir: "x/y"], "A.B") == "x/y"
+      Application.put_env(:shadix, :dir, "z")
+      assert Generator.configured_dir([], "A.B") == "z"
+      Application.delete_env(:shadix, :dir)
+      assert Generator.configured_dir([], "Demo") == "lib/demo"
+    end
+  end
+
+  describe "render_file/4" do
+    test "injects chosen style at the marker and rewrites namespace" do
+      content = ~s(<%!-- shadix:colocated-css --%>\n<button data-slot="button"></button>)
+      styles = %{"nova" => "@layer components { [data-slot=button]{height:2rem} }"}
+      out = Generator.render_file(content, styles, "nova", "Demo.UI")
+      assert out =~ ":type={Demo.UI.ColocatedCSS}"
+      assert out =~ "height:2rem"
+      refute out =~ "shadix:colocated-css"
+    end
+
+    test "leaves legacy (markerless) content to namespace rewrite only" do
+      assert Generator.render_file("Shadix.Cn.cn([])", nil, "nova", "Demo.UI") ==
+               "Demo.UI.Cn.cn([])"
+    end
+
+    test "passes through when the style key is absent from styles map" do
+      content = "<%!-- shadix:colocated-css --%>\nx"
+      out = Generator.render_file(content, %{"nova" => "css"}, "vega", "Demo.UI")
+      assert out =~ "shadix:colocated-css"
+    end
+  end
+
   describe "default_namespace/0" do
     test "returns a camelize+Web.Components.UI namespace derived from app name" do
       # This calls Mix.Project.config()[:app], which in test context is :shadix
-- 
2.51.2


From 682ec2be86a343384e43cf7251f698141bb04c64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <git@btao.org>
Date: Sat, 20 Jun 2026 00:51:59 +0100
Subject: [PATCH 03/12] feat(gen.registry,add): per-style manifests + --style
 colocated injection

- gen.registry: manifest_for/2 carries styles map + default_style + colocated_css
  dep for marker components; reads priv/styles/<style>/<name>.css; raises on missing.
- shadix.add: --style flag, :shadix config resolution, render_file injection.
- New colocated_css manifest.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 lib/mix/tasks/shadix.add.ex                 |  18 +++-
 lib/mix/tasks/shadix.gen.registry.ex        | 112 ++++++++++++++------
 priv/registry/colocated_css.json            |  12 +++
 priv/styles/nova/.keep                      |   0
 priv/styles/vega/.keep                      |   0
 test/mix/tasks/shadix_gen_registry_test.exs |  47 +++++++-
 6 files changed, 152 insertions(+), 37 deletions(-)
 create mode 100644 priv/registry/colocated_css.json
 create mode 100644 priv/styles/nova/.keep
 create mode 100644 priv/styles/vega/.keep

diff --git a/lib/mix/tasks/shadix.add.ex b/lib/mix/tasks/shadix.add.ex
index 022a71e..173cd51 100644
--- a/lib/mix/tasks/shadix.add.ex
+++ b/lib/mix/tasks/shadix.add.ex
@@ -35,15 +35,22 @@ defmodule Mix.Tasks.Shadix.Add do
   def run(args) do
     {opts, names, _invalid} =
       OptionParser.parse(args,
-        strict: [namespace: :string, dir: :string, hooks_dir: :string, force: :boolean]
+        strict: [
+          namespace: :string,
+          dir: :string,
+          hooks_dir: :string,
+          force: :boolean,
+          style: :string
+        ]
       )
 
     if names == [] do
       Mix.raise("Usage: mix shadix.add <component> [component...] [options]")
     end
 
-    namespace = Keyword.get(opts, :namespace) || Shadix.Generator.default_namespace()
-    dir = Keyword.get(opts, :dir) || Shadix.Generator.default_dir(namespace)
+    namespace = Shadix.Generator.configured_namespace(opts)
+    dir = Shadix.Generator.configured_dir(opts, namespace)
+    style = Shadix.Generator.configured_style(opts)
     hooks_dir = Keyword.get(opts, :hooks_dir, "assets/js/hooks")
     force = Keyword.get(opts, :force, false)
 
@@ -55,7 +62,10 @@ defmodule Mix.Tasks.Shadix.Add do
       Enum.flat_map(manifests, fn manifest ->
         Enum.flat_map(manifest["files"], fn file ->
           dest = Path.join(dir, file["path"])
-          content = Shadix.Generator.rewrite_namespace(file["content"], namespace)
+
+          content =
+            Shadix.Generator.render_file(file["content"], manifest["styles"], style, namespace)
+
           maybe_write(dest, content, force)
         end)
       end)
diff --git a/lib/mix/tasks/shadix.gen.registry.ex b/lib/mix/tasks/shadix.gen.registry.ex
index f6d532e..7bc1b8a 100644
--- a/lib/mix/tasks/shadix.gen.registry.ex
+++ b/lib/mix/tasks/shadix.gen.registry.ex
@@ -39,33 +39,19 @@ defmodule Mix.Tasks.Shadix.Gen.Registry do
     out_dir = Keyword.get(opts, :out, "priv/registry")
     File.mkdir_p!(out_dir)
 
-    # Collect source files: cn first, then form, then all components
+    # Collect source files: cn, form, colocated_css first, then all components
     cn_path = "lib/shadix/cn.ex"
     form_path = "lib/shadix/form.ex"
+    colocated_css_path = "lib/shadix/colocated_css.ex"
     component_paths = Path.wildcard("lib/shadix/components/*.ex") |> Enum.sort()
 
     sources =
-      [{cn_path, "cn"}, {form_path, "form"}] ++
+      [{cn_path, "cn"}, {form_path, "form"}, {colocated_css_path, "colocated_css"}] ++
         Enum.map(component_paths, fn p -> {p, name_from_path(p)} end)
 
     Enum.each(sources, fn {source_path, name} ->
       content = File.read!(source_path)
-      deps = deps_for(name, content)
-      hooks = hooks_for(name, content)
-      npm_deps = npm_deps_from_hooks(hooks)
-
-      manifest = %{
-        "name" => name,
-        "registry_deps" => deps,
-        "npm_deps" => npm_deps,
-        "files" => [
-          %{
-            "path" => "#{name}.ex",
-            "content" => content
-          }
-        ],
-        "hooks" => hooks
-      }
+      manifest = manifest_for(name, content)
 
       json = Jason.encode!(manifest, pretty: true)
       out_path = Path.join(out_dir, "#{name}.json")
@@ -76,6 +62,71 @@ defmodule Mix.Tasks.Shadix.Gen.Registry do
     Mix.shell().info("Done. #{length(sources)} manifest(s) written to #{out_dir}/")
   end
 
+  # The marker a converted component carries (first node of its template); its
+  # presence switches the component into colocated-CSS mode.
+  @marker "<%!-- shadix:colocated-css --%>"
+
+  @doc """
+  Builds the registry manifest for a single source `name`/`content`.
+
+  Marker components (containing `#{@marker}`) additionally carry:
+  - `"default_style" => "nova"`
+  - `"styles" => %{<style> => <css>}` for every style dir under `priv/styles/`
+  - a `"colocated_css"` registry dep
+
+  Public so the manifest shape is unit-testable without writing JSON to disk.
+  """
+  @spec manifest_for(String.t(), String.t()) :: map()
+  def manifest_for(name, content) do
+    hooks = hooks_for(name, content)
+
+    base = %{
+      "name" => name,
+      "registry_deps" => deps_for(name, content),
+      "npm_deps" => npm_deps_from_hooks(hooks),
+      "files" => [%{"path" => "#{name}.ex", "content" => content}],
+      "hooks" => hooks
+    }
+
+    if String.contains?(content, @marker) do
+      base
+      |> Map.put("default_style", "nova")
+      |> Map.put("styles", styles_for(name))
+    else
+      base
+    end
+  end
+
+  # Reads `priv/styles/<style>/<name>.css` for every discovered style.
+  # Raises if a marker component is missing a style file (drift guard).
+  defp styles_for(name) do
+    for style <- discovered_styles(), into: %{} do
+      path = "priv/styles/#{style}/#{name}.css"
+
+      unless File.exists?(path) do
+        Mix.raise(
+          "Component #{name} has the colocated-css marker but #{path} is missing. " <>
+            "Author the per-style CSS or remove the marker."
+        )
+      end
+
+      {style, File.read!(path)}
+    end
+  end
+
+  # Style names = immediate subdirectories of priv/styles/.
+  defp discovered_styles do
+    case File.ls("priv/styles") do
+      {:ok, entries} ->
+        entries
+        |> Enum.filter(&File.dir?(Path.join("priv/styles", &1)))
+        |> Enum.sort()
+
+      _ ->
+        []
+    end
+  end
+
   # Derives the component name from its file path.
   # e.g. "lib/shadix/components/button.ex" -> "button"
   defp name_from_path(path) do
@@ -83,24 +134,25 @@ defmodule Mix.Tasks.Shadix.Gen.Registry do
     |> Path.basename(".ex")
   end
 
-  # Determines the registry_deps for a given entry.
-  # - "cn"  → no deps
-  # - "form" → no deps (form.ex does not import Shadix.Cn)
-  # - components → always depend on "cn"; also depend on "form" when they
-  #   import Shadix.Form
+  # Determines the registry_deps for a given entry by scanning usage:
+  # - "cn"/"form"/"colocated_css" are leaf helpers with no deps
+  # - "cn" when the source references the cn helper
+  # - "form" when it imports Shadix.Form
+  # - "colocated_css" when it carries the colocated-css marker
   defp deps_for("cn", _content), do: []
   defp deps_for("form", _content), do: []
+  defp deps_for("colocated_css", _content), do: []
 
   defp deps_for(_name, content) do
-    base = ["cn"]
-
-    if content =~ "import Shadix.Form" do
-      base ++ ["form"]
-    else
-      base
-    end
+    []
+    |> maybe_dep(content =~ "Shadix.Cn" or content =~ ~r/\bcn\(/, "cn")
+    |> maybe_dep(content =~ "import Shadix.Form", "form")
+    |> maybe_dep(String.contains?(content, @marker), "colocated_css")
   end
 
+  defp maybe_dep(deps, true, dep), do: deps ++ [dep]
+  defp maybe_dep(deps, false, _dep), do: deps
+
   # Auto-detects hooks by scanning the component source for phx-hook="ShadixXxx"
   # occurrences. For each distinct hook name, the corresponding TS file is
   # assets/ts/<snake>.ts where <snake> = Macro.underscore of the part after "Shadix".
diff --git a/priv/registry/colocated_css.json b/priv/registry/colocated_css.json
new file mode 100644
index 0000000..01820ab
--- /dev/null
+++ b/priv/registry/colocated_css.json
@@ -0,0 +1,12 @@
+{
+  "files": [
+    {
+      "content": "defmodule Shadix.ColocatedCSS do\n  @moduledoc \"\"\"\n  HEEx `:type` for shadix's colocated component CSS.\n\n  Extracts the contents of a component's `<style :type={Shadix.ColocatedCSS}>` tag\n  at compile time into the `phoenix-colocated` bundle, as-is. shadix CSS is already\n  keyed by `data-slot` attributes and wrapped in `@layer components`, so no scoping\n  transform is needed.\n\n  When a component is copied into a consumer's app, `Shadix.ColocatedCSS` is rewritten\n  to `<their namespace>.ColocatedCSS`, so each app owns its own copy of this module.\n  \"\"\"\n  use Phoenix.LiveView.ColocatedCSS\n\n  @impl true\n  def transform(\"style\", _attrs, css, _meta), do: {:ok, css, []}\nend\n",
+      "path": "colocated_css.ex"
+    }
+  ],
+  "hooks": [],
+  "name": "colocated_css",
+  "npm_deps": [],
+  "registry_deps": []
+}
\ No newline at end of file
diff --git a/priv/styles/nova/.keep b/priv/styles/nova/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/priv/styles/vega/.keep b/priv/styles/vega/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/test/mix/tasks/shadix_gen_registry_test.exs b/test/mix/tasks/shadix_gen_registry_test.exs
index ae20553..3adb870 100644
--- a/test/mix/tasks/shadix_gen_registry_test.exs
+++ b/test/mix/tasks/shadix_gen_registry_test.exs
@@ -14,6 +14,47 @@ defmodule Mix.Tasks.Shadix.Gen.RegistryTest do
     {:ok, tmp_dir: tmp_dir}
   end
 
+  describe "manifest_for/2 (colocated styles)" do
+    @cn_name "_styletest"
+
+    setup do
+      on_exit(fn ->
+        File.rm_rf!("priv/styles/nova/#{@cn_name}.css")
+        File.rm_rf!("priv/styles/vega/#{@cn_name}.css")
+      end)
+
+      :ok
+    end
+
+    test "markerless content has no styles and reflects cn usage" do
+      m = Mix.Tasks.Shadix.Gen.Registry.manifest_for(@cn_name, "Shadix.Cn.cn([])")
+      refute Map.has_key?(m, "styles")
+      refute Map.has_key?(m, "default_style")
+      assert m["registry_deps"] == ["cn"]
+    end
+
+    test "marker content carries styles map, default_style and colocated_css dep" do
+      File.write!("priv/styles/nova/#{@cn_name}.css", "@layer components { [data-slot=x]{} }")
+      File.write!("priv/styles/vega/#{@cn_name}.css", "@layer components { [data-slot=x]{} }")
+
+      content = ~s(<%!-- shadix:colocated-css --%>\n<div data-slot="x"></div>)
+      m = Mix.Tasks.Shadix.Gen.Registry.manifest_for(@cn_name, content)
+
+      assert m["default_style"] == "nova"
+      assert Map.keys(m["styles"]) |> Enum.sort() == ["nova", "vega"]
+      assert "colocated_css" in m["registry_deps"]
+      refute "cn" in m["registry_deps"]
+    end
+
+    test "marker content missing a style file raises" do
+      content = "<%!-- shadix:colocated-css --%>\n<div data-slot=\"x\"></div>"
+
+      assert_raise Mix.Error, ~r/#{@cn_name}\.css is missing/, fn ->
+        Mix.Tasks.Shadix.Gen.Registry.manifest_for(@cn_name, content)
+      end
+    end
+  end
+
   test "generates button.json with correct structure", %{tmp_dir: tmp_dir} do
     Mix.Tasks.Shadix.Gen.Registry.run(["--out", tmp_dir])
 
@@ -47,12 +88,12 @@ defmodule Mix.Tasks.Shadix.Gen.RegistryTest do
     assert file["content"] =~ "defmodule Shadix.Cn"
   end
 
-  test "generates one JSON per component plus cn and form", %{tmp_dir: tmp_dir} do
+  test "generates one JSON per component plus cn, form and colocated_css", %{tmp_dir: tmp_dir} do
     Mix.Tasks.Shadix.Gen.Registry.run(["--out", tmp_dir])
 
     json_files = Path.wildcard(Path.join(tmp_dir, "*.json"))
-    # components + cn + form
-    expected = length(Path.wildcard("lib/shadix/components/*.ex")) + 2
+    # components + cn + form + colocated_css
+    expected = length(Path.wildcard("lib/shadix/components/*.ex")) + 3
     assert length(json_files) == expected
   end
 
-- 
2.51.2


From 14bc697f5e1bfb82c194872775293f3d2e53d5cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <git@btao.org>
Date: Sat, 20 Jun 2026 00:58:46 +0100
Subject: [PATCH 04/12] feat(button): colocated nova/vega styles (pilot
 vertical slice)

- button.ex: marker + data-slot/variant/size; styling moved to colocated CSS.
- priv/styles/{nova,vega}/button.css: verbatim ports (adds xs/icon-xs/sm/lg sizes).
- gen.registry: reject components with >1 marker (guards moduledoc mentions).
- Update registry/add tests + doctest to button's colocated_css dep + injection.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 lib/mix/tasks/shadix.gen.registry.ex        | 25 +++++++--
 lib/shadix/components/button.ex             | 49 +++++------------
 lib/shadix/registry.ex                      |  4 +-
 priv/registry/button.json                   | 11 +++-
 priv/styles/nova/button.css                 | 61 +++++++++++++++++++++
 priv/styles/vega/button.css                 | 61 +++++++++++++++++++++
 test/mix/tasks/shadix_add_test.exs          | 38 ++++++++++---
 test/mix/tasks/shadix_gen_registry_test.exs |  6 +-
 test/shadix/components/button_test.exs      | 27 +++++----
 test/shadix/registry_test.exs               |  4 +-
 10 files changed, 215 insertions(+), 71 deletions(-)
 create mode 100644 priv/styles/nova/button.css
 create mode 100644 priv/styles/vega/button.css

diff --git a/lib/mix/tasks/shadix.gen.registry.ex b/lib/mix/tasks/shadix.gen.registry.ex
index 7bc1b8a..0c6bb25 100644
--- a/lib/mix/tasks/shadix.gen.registry.ex
+++ b/lib/mix/tasks/shadix.gen.registry.ex
@@ -88,15 +88,28 @@ defmodule Mix.Tasks.Shadix.Gen.Registry do
       "hooks" => hooks
     }
 
-    if String.contains?(content, @marker) do
-      base
-      |> Map.put("default_style", "nova")
-      |> Map.put("styles", styles_for(name))
-    else
-      base
+    case marker_count(content) do
+      0 ->
+        base
+
+      1 ->
+        base
+        |> Map.put("default_style", "nova")
+        |> Map.put("styles", styles_for(name))
+
+      n ->
+        Mix.raise(
+          "Component #{name} contains the colocated-css marker #{n} times; it must appear " <>
+            "exactly once (the first node of the template). Remove other occurrences " <>
+            "(e.g. from the @moduledoc)."
+        )
     end
   end
 
+  defp marker_count(content) do
+    content |> String.split(@marker) |> length() |> Kernel.-(1)
+  end
+
   # Reads `priv/styles/<style>/<name>.css` for every discovered style.
   # Raises if a marker component is missing a style file (drift guard).
   defp styles_for(name) do
diff --git a/lib/shadix/components/button.ex b/lib/shadix/components/button.ex
index 28ef25f..098b3e7 100644
--- a/lib/shadix/components/button.ex
+++ b/lib/shadix/components/button.ex
@@ -3,62 +3,39 @@ defmodule Shadix.Components.Button do
   A button styled with the shadcn variant/size system.
 
   Renders a `<button>` carrying `data-slot="button"` plus `data-variant` and
-  `data-size` for stable styling/targeting. Caller-supplied `class` is appended
-  last; Tailwind cascade layers ensure it wins over the defaults.
+  `data-size`. All styling lives in the component's colocated CSS
+  (`priv/styles/<style>/button.css`, ported verbatim from shadcn), keyed by those
+  data attributes and wrapped in `@layer components` so a caller-supplied `class`
+  always wins. The colocated-css marker (the first node of the template) is replaced
+  by the chosen style's colocated `<style>` block when the component is copied into a
+  consumer app via `mix shadix.add`.
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
-  @base "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none active:not-aria-[haspopup]:translate-y-px 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 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-
-  @variants %{
-    "default" => "bg-primary text-primary-foreground hover:bg-primary/90",
-    "destructive" =>
-      "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-    "outline" =>
-      "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-    "secondary" => "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-    "ghost" => "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-    "link" => "text-primary underline-offset-4 hover:underline"
-  }
-
-  @sizes %{
-    "default" => "h-9 px-4 py-2 has-[>svg]:px-3",
-    "sm" => "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-    "lg" => "h-10 rounded-md px-6 has-[>svg]:px-4",
-    "icon" => "size-9"
-  }
-
   attr(:variant, :string,
     default: "default",
     values: ~w(default secondary destructive outline ghost link)
   )
 
-  attr(:size, :string, default: "default", values: ~w(default sm lg icon))
+  attr(:size, :string,
+    default: "default",
+    values: ~w(default xs sm lg icon icon-xs icon-sm icon-lg)
+  )
+
   attr(:type, :string, default: "button")
   attr(:class, :string, default: nil)
   attr(:rest, :global, include: ~w(disabled form name value autofocus))
   slot(:inner_block, required: true)
 
   def button(assigns) do
-    class =
-      cn([
-        @base,
-        Map.fetch!(@variants, assigns.variant),
-        Map.fetch!(@sizes, assigns.size),
-        assigns.class
-      ])
-
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <button
       type={@type}
       data-slot="button"
       data-variant={@variant}
       data-size={@size}
-      class={@computed_class}
+      class={["group/button", @class]}
       {@rest}
     >
       {render_slot(@inner_block)}
diff --git a/lib/shadix/registry.ex b/lib/shadix/registry.ex
index fe606dd..3635841 100644
--- a/lib/shadix/registry.ex
+++ b/lib/shadix/registry.ex
@@ -45,10 +45,10 @@ defmodule Shadix.Registry do
   ## Examples
 
       iex> Shadix.Registry.resolve("button") |> Enum.map(& &1["name"])
-      ["cn", "button"]
+      ["colocated_css", "button"]
 
       iex> Shadix.Registry.resolve(["card", "button"]) |> Enum.map(& &1["name"])
-      ["cn", "card", "button"]
+      ["cn", "card", "colocated_css", "button"]
   """
   @spec resolve(String.t() | [String.t()]) :: [map()]
   def resolve(name) when is_binary(name), do: resolve([name])
diff --git a/priv/registry/button.json b/priv/registry/button.json
index 62b32b5..1954f1f 100644
--- a/priv/registry/button.json
+++ b/priv/registry/button.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Button do\n  @moduledoc \"\"\"\n  A button styled with the shadcn variant/size system.\n\n  Renders a `<button>` carrying `data-slot=\"button\"` plus `data-variant` and\n  `data-size` for stable styling/targeting. Caller-supplied `class` is appended\n  last; Tailwind cascade layers ensure it wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @base \"inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none active:not-aria-[haspopup]:translate-y-px 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 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n\n  @variants %{\n    \"default\" => \"bg-primary text-primary-foreground hover:bg-primary/90\",\n    \"destructive\" =>\n      \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40\",\n    \"outline\" =>\n      \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n    \"secondary\" => \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n    \"ghost\" => \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n    \"link\" => \"text-primary underline-offset-4 hover:underline\"\n  }\n\n  @sizes %{\n    \"default\" => \"h-9 px-4 py-2 has-[>svg]:px-3\",\n    \"sm\" => \"h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5\",\n    \"lg\" => \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n    \"icon\" => \"size-9\"\n  }\n\n  attr(:variant, :string,\n    default: \"default\",\n    values: ~w(default secondary destructive outline ghost link)\n  )\n\n  attr(:size, :string, default: \"default\", values: ~w(default sm lg icon))\n  attr(:type, :string, default: \"button\")\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled form name value autofocus))\n  slot(:inner_block, required: true)\n\n  def button(assigns) do\n    class =\n      cn([\n        @base,\n        Map.fetch!(@variants, assigns.variant),\n        Map.fetch!(@sizes, assigns.size),\n        assigns.class\n      ])\n\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <button\n      type={@type}\n      data-slot=\"button\"\n      data-variant={@variant}\n      data-size={@size}\n      class={@computed_class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </button>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Button do\n  @moduledoc \"\"\"\n  A button styled with the shadcn variant/size system.\n\n  Renders a `<button>` carrying `data-slot=\"button\"` plus `data-variant` and\n  `data-size`. All styling lives in the component's colocated CSS\n  (`priv/styles/<style>/button.css`, ported verbatim from shadcn), keyed by those\n  data attributes and wrapped in `@layer components` so a caller-supplied `class`\n  always wins. The colocated-css marker (the first node of the template) is replaced\n  by the chosen style's colocated `<style>` block when the component is copied into a\n  consumer app via `mix shadix.add`.\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:variant, :string,\n    default: \"default\",\n    values: ~w(default secondary destructive outline ghost link)\n  )\n\n  attr(:size, :string,\n    default: \"default\",\n    values: ~w(default xs sm lg icon icon-xs icon-sm icon-lg)\n  )\n\n  attr(:type, :string, default: \"button\")\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled form name value autofocus))\n  slot(:inner_block, required: true)\n\n  def button(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <button\n      type={@type}\n      data-slot=\"button\"\n      data-variant={@variant}\n      data-size={@size}\n      class={[\"group/button\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </button>\n    \"\"\"\n  end\nend\n",
       "path": "button.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "button",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"button\"] {\n    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"button\"][data-variant=\"default\"] {\n    @apply bg-primary text-primary-foreground hover:bg-primary/80;\n  }\n\n  [data-slot=\"button\"][data-variant=\"outline\"] {\n    @apply border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground;\n  }\n\n  [data-slot=\"button\"][data-variant=\"secondary\"] {\n    @apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;\n  }\n\n  [data-slot=\"button\"][data-variant=\"ghost\"] {\n    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;\n  }\n\n  [data-slot=\"button\"][data-variant=\"destructive\"] {\n    @apply bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30;\n  }\n\n  [data-slot=\"button\"][data-variant=\"link\"] {\n    @apply text-primary underline-offset-4 hover:underline;\n  }\n\n  [data-slot=\"button\"][data-size=\"xs\"] {\n    @apply h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3;\n  }\n\n  [data-slot=\"button\"][data-size=\"sm\"] {\n    @apply h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5;\n  }\n\n  [data-slot=\"button\"][data-size=\"default\"] {\n    @apply h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n\n  [data-slot=\"button\"][data-size=\"lg\"] {\n    @apply h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n\n  [data-slot=\"button\"][data-size=\"icon-xs\"] {\n    @apply size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3;\n  }\n\n  [data-slot=\"button\"][data-size=\"icon-sm\"] {\n    @apply size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg;\n  }\n\n  [data-slot=\"button\"][data-size=\"icon\"] {\n    @apply size-8;\n  }\n\n  [data-slot=\"button\"][data-size=\"icon-lg\"] {\n    @apply size-9;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"button\"] {\n    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"button\"][data-variant=\"default\"] {\n    @apply bg-primary text-primary-foreground hover:bg-primary/80;\n  }\n\n  [data-slot=\"button\"][data-variant=\"outline\"] {\n    @apply border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs;\n  }\n\n  [data-slot=\"button\"][data-variant=\"secondary\"] {\n    @apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;\n  }\n\n  [data-slot=\"button\"][data-variant=\"ghost\"] {\n    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;\n  }\n\n  [data-slot=\"button\"][data-variant=\"destructive\"] {\n    @apply bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30;\n  }\n\n  [data-slot=\"button\"][data-variant=\"link\"] {\n    @apply text-primary underline-offset-4 hover:underline;\n  }\n\n  [data-slot=\"button\"][data-size=\"xs\"] {\n    @apply h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3;\n  }\n\n  [data-slot=\"button\"][data-size=\"sm\"] {\n    @apply h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5;\n  }\n\n  [data-slot=\"button\"][data-size=\"default\"] {\n    @apply h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n\n  [data-slot=\"button\"][data-size=\"lg\"] {\n    @apply h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n\n  [data-slot=\"button\"][data-size=\"icon-xs\"] {\n    @apply size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3;\n  }\n\n  [data-slot=\"button\"][data-size=\"icon-sm\"] {\n    @apply size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md;\n  }\n\n  [data-slot=\"button\"][data-size=\"icon\"] {\n    @apply size-9;\n  }\n\n  [data-slot=\"button\"][data-size=\"icon-lg\"] {\n    @apply size-10;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/styles/nova/button.css b/priv/styles/nova/button.css
new file mode 100644
index 0000000..de4732a
--- /dev/null
+++ b/priv/styles/nova/button.css
@@ -0,0 +1,61 @@
+@layer components {
+  [data-slot="button"] {
+    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="button"][data-variant="default"] {
+    @apply bg-primary text-primary-foreground hover:bg-primary/80;
+  }
+
+  [data-slot="button"][data-variant="outline"] {
+    @apply border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground;
+  }
+
+  [data-slot="button"][data-variant="secondary"] {
+    @apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
+  }
+
+  [data-slot="button"][data-variant="ghost"] {
+    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
+  }
+
+  [data-slot="button"][data-variant="destructive"] {
+    @apply bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30;
+  }
+
+  [data-slot="button"][data-variant="link"] {
+    @apply text-primary underline-offset-4 hover:underline;
+  }
+
+  [data-slot="button"][data-size="xs"] {
+    @apply h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3;
+  }
+
+  [data-slot="button"][data-size="sm"] {
+    @apply h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5;
+  }
+
+  [data-slot="button"][data-size="default"] {
+    @apply h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+
+  [data-slot="button"][data-size="lg"] {
+    @apply h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+
+  [data-slot="button"][data-size="icon-xs"] {
+    @apply size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3;
+  }
+
+  [data-slot="button"][data-size="icon-sm"] {
+    @apply size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg;
+  }
+
+  [data-slot="button"][data-size="icon"] {
+    @apply size-8;
+  }
+
+  [data-slot="button"][data-size="icon-lg"] {
+    @apply size-9;
+  }
+}
diff --git a/priv/styles/vega/button.css b/priv/styles/vega/button.css
new file mode 100644
index 0000000..8f4cd67
--- /dev/null
+++ b/priv/styles/vega/button.css
@@ -0,0 +1,61 @@
+@layer components {
+  [data-slot="button"] {
+    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="button"][data-variant="default"] {
+    @apply bg-primary text-primary-foreground hover:bg-primary/80;
+  }
+
+  [data-slot="button"][data-variant="outline"] {
+    @apply border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs;
+  }
+
+  [data-slot="button"][data-variant="secondary"] {
+    @apply bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
+  }
+
+  [data-slot="button"][data-variant="ghost"] {
+    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
+  }
+
+  [data-slot="button"][data-variant="destructive"] {
+    @apply bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30;
+  }
+
+  [data-slot="button"][data-variant="link"] {
+    @apply text-primary underline-offset-4 hover:underline;
+  }
+
+  [data-slot="button"][data-size="xs"] {
+    @apply h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3;
+  }
+
+  [data-slot="button"][data-size="sm"] {
+    @apply h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5;
+  }
+
+  [data-slot="button"][data-size="default"] {
+    @apply h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+
+  [data-slot="button"][data-size="lg"] {
+    @apply h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+
+  [data-slot="button"][data-size="icon-xs"] {
+    @apply size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3;
+  }
+
+  [data-slot="button"][data-size="icon-sm"] {
+    @apply size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md;
+  }
+
+  [data-slot="button"][data-size="icon"] {
+    @apply size-9;
+  }
+
+  [data-slot="button"][data-size="icon-lg"] {
+    @apply size-10;
+  }
+}
diff --git a/test/mix/tasks/shadix_add_test.exs b/test/mix/tasks/shadix_add_test.exs
index c91cfd8..6de26bf 100644
--- a/test/mix/tasks/shadix_add_test.exs
+++ b/test/mix/tasks/shadix_add_test.exs
@@ -15,24 +15,44 @@ defmodule Mix.Tasks.Shadix.AddTest do
   end
 
   describe "run/1 with button component" do
-    test "writes button.ex and cn.ex with rewritten namespaces", %{tmp_dir: tmp_dir} do
+    test "writes button.ex + colocated_css.ex, injecting the default style", %{tmp_dir: tmp_dir} do
       Mix.Tasks.Shadix.Add.run(["button", "--namespace", "Demo.UI", "--dir", tmp_dir])
 
       button_path = Path.join(tmp_dir, "button.ex")
-      cn_path = Path.join(tmp_dir, "cn.ex")
+      colocated_path = Path.join(tmp_dir, "colocated_css.ex")
 
       assert File.exists?(button_path)
-      assert File.exists?(cn_path)
+      assert File.exists?(colocated_path)
 
       button_content = File.read!(button_path)
       assert button_content =~ "Demo.UI.Button"
-      assert button_content =~ "import Demo.UI.Cn"
-      refute button_content =~ "Shadix.Components"
-      refute button_content =~ "Shadix.Cn"
+      # default style (nova) injected at the marker, referencing the app's module
+      assert button_content =~ ":type={Demo.UI.ColocatedCSS}"
+      assert button_content =~ "@layer components"
+      assert button_content =~ ~s([data-slot="button"])
+      refute button_content =~ "shadix:colocated-css"
+      refute button_content =~ "Shadix."
+
+      colocated_content = File.read!(colocated_path)
+      assert colocated_content =~ "defmodule Demo.UI.ColocatedCSS"
+      refute colocated_content =~ "Shadix.ColocatedCSS"
+    end
+
+    test "injects the vega style when --style vega is given", %{tmp_dir: tmp_dir} do
+      Mix.Tasks.Shadix.Add.run([
+        "button",
+        "--namespace",
+        "Demo.UI",
+        "--dir",
+        tmp_dir,
+        "--style",
+        "vega"
+      ])
 
-      cn_content = File.read!(cn_path)
-      assert cn_content =~ "defmodule Demo.UI.Cn"
-      refute cn_content =~ "Shadix.Cn"
+      button_content = File.read!(Path.join(tmp_dir, "button.ex"))
+      # vega's button base uses rounded-md (nova uses rounded-lg); vega has no rounded-lg
+      assert button_content =~ "rounded-md"
+      refute button_content =~ "rounded-lg"
     end
 
     test "second run without --force skips existing files", %{tmp_dir: tmp_dir} do
diff --git a/test/mix/tasks/shadix_gen_registry_test.exs b/test/mix/tasks/shadix_gen_registry_test.exs
index 3adb870..051f8f7 100644
--- a/test/mix/tasks/shadix_gen_registry_test.exs
+++ b/test/mix/tasks/shadix_gen_registry_test.exs
@@ -64,12 +64,16 @@ defmodule Mix.Tasks.Shadix.Gen.RegistryTest do
     manifest = button_path |> File.read!() |> Jason.decode!()
 
     assert manifest["name"] == "button"
-    assert manifest["registry_deps"] == ["cn"]
+    # Button is now a colocated-css component: depends on colocated_css, not cn.
+    assert manifest["registry_deps"] == ["colocated_css"]
+    assert manifest["default_style"] == "nova"
+    assert Map.keys(manifest["styles"]) |> Enum.sort() == ["nova", "vega"]
     assert manifest["npm_deps"] == []
     assert is_list(manifest["files"])
     [file] = manifest["files"]
     assert file["path"] == "button.ex"
     assert file["content"] =~ "defmodule Shadix.Components.Button"
+    assert file["content"] =~ "shadix:colocated-css"
   end
 
   test "generates cn.json with empty deps", %{tmp_dir: tmp_dir} do
diff --git a/test/shadix/components/button_test.exs b/test/shadix/components/button_test.exs
index b2799c2..8fac873 100644
--- a/test/shadix/components/button_test.exs
+++ b/test/shadix/components/button_test.exs
@@ -32,10 +32,9 @@ defmodule Shadix.Components.ButtonTest do
     doc = parse(html)
     assert Floki.attribute(doc, "button", "data-variant") == ["default"]
     assert Floki.attribute(doc, "button", "data-size") == ["default"]
-    assert class_of(html) =~ "bg-primary"
   end
 
-  test "applies the destructive variant classes" do
+  test "exposes the variant via data-variant (styling lives in colocated CSS)" do
     assigns = %{}
 
     html =
@@ -43,23 +42,27 @@ defmodule Shadix.Components.ButtonTest do
       <Shadix.Components.Button.button variant="destructive">Delete</Shadix.Components.Button.button>
       """)
 
-    assert class_of(html) =~ "bg-destructive"
     assert parse(html) |> Floki.attribute("button", "data-variant") == ["destructive"]
+    # styling is keyed off data attributes in CSS, not emitted as inline utilities
+    refute class_of(html) =~ "bg-destructive"
   end
 
-  test "applies the sm size classes" do
-    assigns = %{}
+  test "exposes the size via data-size, including the expanded sizes" do
+    for size <- ~w(default xs sm lg icon icon-xs icon-sm icon-lg) do
+      assigns = %{size: size}
 
-    html =
-      rendered_to_string(~H"""
-      <Shadix.Components.Button.button size="sm">Small</Shadix.Components.Button.button>
-      """)
+      html =
+        rendered_to_string(~H"""
+        <Shadix.Components.Button.button size={@size}>x</Shadix.Components.Button.button>
+        """)
 
-    assert class_of(html) =~ "h-8"
-    assert parse(html) |> Floki.attribute("button", "data-size") == ["sm"]
+      assert parse(html) |> Floki.attribute("button", "data-size") == [size]
+      # no inline sizing utilities on the element — sizing lives in colocated CSS
+      refute class_of(html) =~ ~r/\bh-\d/
+    end
   end
 
-  test "appends the caller's class after the component defaults" do
+  test "appends the caller's class after the group marker" do
     assigns = %{}
 
     html =
diff --git a/test/shadix/registry_test.exs b/test/shadix/registry_test.exs
index d49f7be..d0aa086 100644
--- a/test/shadix/registry_test.exs
+++ b/test/shadix/registry_test.exs
@@ -17,7 +17,7 @@ defmodule Shadix.RegistryTest do
     test "loads the button manifest" do
       manifest = Registry.load!("button")
       assert manifest["name"] == "button"
-      assert manifest["registry_deps"] == ["cn"]
+      assert manifest["registry_deps"] == ["colocated_css"]
       [file] = manifest["files"]
       assert file["path"] == "button.ex"
       assert file["content"] =~ "defmodule Shadix.Components.Button"
@@ -34,7 +34,7 @@ defmodule Shadix.RegistryTest do
     test "resolve a single name returns deps-before-dependents" do
       manifests = Registry.resolve("button")
       names = Enum.map(manifests, & &1["name"])
-      assert names == ["cn", "button"]
+      assert names == ["colocated_css", "button"]
     end
 
     test "resolve cn returns just cn (no deps)" do
-- 
2.51.2


From a685cc828e3235437306875f71197a28f4dd7528 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <git@btao.org>
Date: Sat, 20 Jun 2026 00:59:33 +0100
Subject: [PATCH 05/12] test: colocated styles drift guard (per-value
 variant/size coverage)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 test/shadix/styles_drift_test.exs | 58 +++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 test/shadix/styles_drift_test.exs

diff --git a/test/shadix/styles_drift_test.exs b/test/shadix/styles_drift_test.exs
new file mode 100644
index 0000000..abad5f7
--- /dev/null
+++ b/test/shadix/styles_drift_test.exs
@@ -0,0 +1,58 @@
+defmodule Shadix.StylesDriftTest do
+  @moduledoc """
+  Guards that every colocated-css component's per-style CSS covers every
+  `data-variant` / `data-size` value the component declares, for every style.
+
+  A component is "converted" when its source contains the colocated-css marker.
+  For each such component, each `priv/styles/<style>/<name>.css` must contain a
+  `[data-variant="<v>"]` rule for every declared `:variant` value and a
+  `[data-size="<v>"]` rule for every declared `:size` value. This is the
+  per-value complement to `gen.registry`'s "style file exists at all" check.
+  """
+  use ExUnit.Case, async: true
+
+  @marker "<%!-- shadix:colocated-css --%>"
+
+  defp styles do
+    case File.ls("priv/styles") do
+      {:ok, entries} -> Enum.filter(entries, &File.dir?(Path.join("priv/styles", &1)))
+      _ -> []
+    end
+  end
+
+  defp marker_components do
+    "lib/shadix/components/*.ex"
+    |> Path.wildcard()
+    |> Enum.map(fn path -> {Path.basename(path, ".ex"), File.read!(path)} end)
+    |> Enum.filter(fn {_name, content} -> String.contains?(content, @marker) end)
+  end
+
+  # Declared values for `attr(:<attr>, ... values: ~w(...))`, or [] if absent.
+  defp declared_values(content, attr) do
+    case Regex.run(~r/attr\(:#{attr},.*?values:\s*~w\(([^)]*)\)/s, content) do
+      [_, list] -> String.split(list, ~r/\s+/, trim: true)
+      nil -> []
+    end
+  end
+
+  test "every style covers every declared variant/size of every converted component" do
+    components = marker_components()
+    style_dirs = styles()
+
+    for {name, content} <- components,
+        style <- style_dirs do
+      css_path = "priv/styles/#{style}/#{name}.css"
+      css = File.read!(css_path)
+
+      for variant <- declared_values(content, "variant") do
+        assert css =~ ~s([data-variant="#{variant}"]),
+               "#{css_path} is missing a [data-variant=\"#{variant}\"] rule"
+      end
+
+      for size <- declared_values(content, "size") do
+        assert css =~ ~s([data-size="#{size}"]),
+               "#{css_path} is missing a [data-size=\"#{size}\"] rule"
+      end
+    end
+  end
+end
-- 
2.51.2


From 37f6223924b36121b41823766cf0b163bfefe8d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <git@btao.org>
Date: Sat, 20 Jun 2026 01:06:59 +0100
Subject: [PATCH 06/12] feat(styles): port batch 1 to colocated nova/vega
 (badge, kbd, separator, skeleton, label, breadcrumb, alert, empty)

Verbatim ports from vendored shadcn style-{nova,vega}.css, verified per component.
Skeleton drops redundant motion-reduce (global prefers-reduced-motion covers it).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 lib/shadix/components/alert.ex             | 41 +++++-------
 lib/shadix/components/badge.ex             | 36 +++--------
 lib/shadix/components/breadcrumb.ex        | 46 ++++----------
 lib/shadix/components/empty.ex             | 72 +++++-----------------
 lib/shadix/components/kbd.ex               | 22 ++-----
 lib/shadix/components/label.ex             | 12 ++--
 lib/shadix/components/separator.ex         | 17 +++--
 lib/shadix/components/skeleton.ex          | 18 +++---
 priv/registry/alert.json                   | 11 +++-
 priv/registry/badge.json                   | 11 +++-
 priv/registry/breadcrumb.json              | 11 +++-
 priv/registry/empty.json                   | 11 +++-
 priv/registry/kbd.json                     | 11 +++-
 priv/registry/label.json                   | 11 +++-
 priv/registry/separator.json               | 11 +++-
 priv/registry/skeleton.json                | 11 +++-
 priv/styles/nova/alert.css                 | 21 +++++++
 priv/styles/nova/badge.css                 | 21 +++++++
 priv/styles/nova/breadcrumb.css            | 25 ++++++++
 priv/styles/nova/empty.css                 | 33 ++++++++++
 priv/styles/nova/kbd.css                   |  9 +++
 priv/styles/nova/label.css                 |  5 ++
 priv/styles/nova/separator.css             | 13 ++++
 priv/styles/nova/skeleton.css              |  5 ++
 priv/styles/vega/alert.css                 | 21 +++++++
 priv/styles/vega/badge.css                 | 21 +++++++
 priv/styles/vega/breadcrumb.css            | 25 ++++++++
 priv/styles/vega/empty.css                 | 33 ++++++++++
 priv/styles/vega/kbd.css                   |  9 +++
 priv/styles/vega/label.css                 |  5 ++
 priv/styles/vega/separator.css             | 13 ++++
 priv/styles/vega/skeleton.css              |  5 ++
 test/shadix/components/alert_test.exs      |  4 +-
 test/shadix/components/badge_test.exs      |  4 +-
 test/shadix/components/breadcrumb_test.exs |  8 +--
 test/shadix/components/empty_test.exs      | 27 +++++---
 test/shadix/components/kbd_test.exs        | 18 +-----
 test/shadix/components/label_test.exs      |  6 +-
 test/shadix/components/separator_test.exs  | 16 +++--
 test/shadix/components/skeleton_test.exs   | 10 +--
 40 files changed, 443 insertions(+), 266 deletions(-)
 create mode 100644 priv/styles/nova/alert.css
 create mode 100644 priv/styles/nova/badge.css
 create mode 100644 priv/styles/nova/breadcrumb.css
 create mode 100644 priv/styles/nova/empty.css
 create mode 100644 priv/styles/nova/kbd.css
 create mode 100644 priv/styles/nova/label.css
 create mode 100644 priv/styles/nova/separator.css
 create mode 100644 priv/styles/nova/skeleton.css
 create mode 100644 priv/styles/vega/alert.css
 create mode 100644 priv/styles/vega/badge.css
 create mode 100644 priv/styles/vega/breadcrumb.css
 create mode 100644 priv/styles/vega/empty.css
 create mode 100644 priv/styles/vega/kbd.css
 create mode 100644 priv/styles/vega/label.css
 create mode 100644 priv/styles/vega/separator.css
 create mode 100644 priv/styles/vega/skeleton.css

diff --git a/lib/shadix/components/alert.ex b/lib/shadix/components/alert.ex
index a9eb7e6..fca7cca 100644
--- a/lib/shadix/components/alert.ex
+++ b/lib/shadix/components/alert.ex
@@ -4,17 +4,13 @@ defmodule Shadix.Components.Alert do
 
   Provides `alert/1`, `alert_title/1`, and `alert_description/1` as
   presentational Phoenix function components.
+
+  Each element carries a stable `data-slot` (and `data-variant` on the root) for
+  styling/targeting. Styling lives in the colocated `priv/styles/<skin>/alert.css`
+  (selected by `data-slot`/`data-variant`); caller-supplied `class` is appended
+  last so Tailwind cascade layers ensure it wins over the defaults.
   """
   use Phoenix.Component
-  import Shadix.Cn
-
-  @base "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
-
-  @variants %{
-    "default" => "bg-card text-card-foreground",
-    "destructive" =>
-      "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
-  }
 
   attr(:variant, :string, default: "default", values: ~w(default destructive))
   attr(:class, :string, default: nil)
@@ -22,11 +18,15 @@ defmodule Shadix.Components.Alert do
   slot(:inner_block, required: true)
 
   def alert(assigns) do
-    class = cn([@base, Map.fetch!(@variants, assigns.variant), assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <div role="alert" data-slot="alert" data-variant={@variant} class={@computed_class} {@rest}>
+    <%!-- shadix:colocated-css --%>
+    <div
+      role="alert"
+      data-slot="alert"
+      data-variant={@variant}
+      class={["group/alert", @class]}
+      {@rest}
+    >
       {render_slot(@inner_block)}
     </div>
     """
@@ -37,11 +37,8 @@ defmodule Shadix.Components.Alert do
   slot(:inner_block, required: true)
 
   def alert_title(assigns) do
-    class = cn(["col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <div data-slot="alert-title" class={@computed_class} {@rest}>
+    <div data-slot="alert-title" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -52,16 +49,8 @@ defmodule Shadix.Components.Alert do
   slot(:inner_block, required: true)
 
   def alert_description(assigns) do
-    class =
-      cn([
-        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
-        assigns.class
-      ])
-
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <div data-slot="alert-description" class={@computed_class} {@rest}>
+    <div data-slot="alert-description" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
diff --git a/lib/shadix/components/badge.ex b/lib/shadix/components/badge.ex
index bce0533..c5e66e2 100644
--- a/lib/shadix/components/badge.ex
+++ b/lib/shadix/components/badge.ex
@@ -3,25 +3,12 @@ defmodule Shadix.Components.Badge do
   A badge styled with the shadcn variant system.
 
   Renders a `<span>` carrying `data-slot="badge"` plus `data-variant` for stable
-  styling/targeting. Caller-supplied `class` is appended last; Tailwind cascade
-  layers ensure it wins over the defaults.
+  styling/targeting. Styling lives in the colocated `priv/styles/<skin>/badge.css`
+  (selected by `data-slot`/`data-variant`); caller-supplied `class` is appended last
+  so Tailwind cascade layers ensure it wins over the defaults.
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
-  @base "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3"
-
-  @variants %{
-    "default" => "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-    "secondary" =>
-      "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-    "destructive" =>
-      "border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
-    "outline" =>
-      "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-  }
-
   attr(:variant, :string,
     default: "default",
     values: ~w(default secondary destructive outline)
@@ -32,17 +19,14 @@ defmodule Shadix.Components.Badge do
   slot(:inner_block, required: true)
 
   def badge(assigns) do
-    class =
-      cn([
-        @base,
-        Map.fetch!(@variants, assigns.variant),
-        assigns.class
-      ])
-
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <span data-slot="badge" data-variant={@variant} class={@computed_class} {@rest}>
+    <%!-- shadix:colocated-css --%>
+    <span
+      data-slot="badge"
+      data-variant={@variant}
+      class={["group/badge", @class]}
+      {@rest}
+    >
       {render_slot(@inner_block)}
     </span>
     """
diff --git a/lib/shadix/components/breadcrumb.ex b/lib/shadix/components/breadcrumb.ex
index b2e3df8..39dc109 100644
--- a/lib/shadix/components/breadcrumb.ex
+++ b/lib/shadix/components/breadcrumb.ex
@@ -5,19 +5,22 @@ defmodule Shadix.Components.Breadcrumb do
   Exposes one function per shadcn subcomponent:
   `breadcrumb/1`, `breadcrumb_list/1`, `breadcrumb_item/1`, `breadcrumb_link/1`,
   `breadcrumb_page/1`, `breadcrumb_separator/1`, and `breadcrumb_ellipsis/1`.
+
+  Each element carries a stable `data-slot` for styling/targeting. Styling lives in
+  the colocated `priv/styles/<skin>/breadcrumb.css` (selected by `data-slot`);
+  caller-supplied `class` is appended last so Tailwind cascade layers ensure it wins
+  over the defaults.
   """
   use Phoenix.Component
-  import Shadix.Cn
 
   attr(:class, :string, default: nil)
   attr(:rest, :global)
   slot(:inner_block, required: true)
 
   def breadcrumb(assigns) do
-    assigns = assign(assigns, :computed_class, cn([assigns.class]))
-
     ~H"""
-    <nav aria-label="breadcrumb" data-slot="breadcrumb" class={@computed_class} {@rest}>
+    <%!-- shadix:colocated-css --%>
+    <nav aria-label="breadcrumb" data-slot="breadcrumb" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </nav>
     """
@@ -28,16 +31,8 @@ defmodule Shadix.Components.Breadcrumb do
   slot(:inner_block, required: true)
 
   def breadcrumb_list(assigns) do
-    class =
-      cn([
-        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
-        assigns.class
-      ])
-
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <ol data-slot="breadcrumb-list" class={@computed_class} {@rest}>
+    <ol data-slot="breadcrumb-list" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </ol>
     """
@@ -48,11 +43,8 @@ defmodule Shadix.Components.Breadcrumb do
   slot(:inner_block, required: true)
 
   def breadcrumb_item(assigns) do
-    class = cn(["inline-flex items-center gap-1.5", assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <li data-slot="breadcrumb-item" class={@computed_class} {@rest}>
+    <li data-slot="breadcrumb-item" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </li>
     """
@@ -63,11 +55,8 @@ defmodule Shadix.Components.Breadcrumb do
   slot(:inner_block, required: true)
 
   def breadcrumb_link(assigns) do
-    class = cn(["transition-colors hover:text-foreground", assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <a data-slot="breadcrumb-link" class={@computed_class} {@rest}>
+    <a data-slot="breadcrumb-link" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </a>
     """
@@ -78,16 +67,13 @@ defmodule Shadix.Components.Breadcrumb do
   slot(:inner_block, required: true)
 
   def breadcrumb_page(assigns) do
-    class = cn(["font-normal text-foreground", assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
     <span
       data-slot="breadcrumb-page"
       role="link"
       aria-disabled="true"
       aria-current="page"
-      class={@computed_class}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -100,15 +86,12 @@ defmodule Shadix.Components.Breadcrumb do
   slot(:inner_block)
 
   def breadcrumb_separator(assigns) do
-    class = cn(["[&>svg]:size-3.5", assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
     <li
       data-slot="breadcrumb-separator"
       role="presentation"
       aria-hidden="true"
-      class={@computed_class}
+      class={@class}
       {@rest}
     >
       <%= if @inner_block == [] do %>
@@ -136,15 +119,12 @@ defmodule Shadix.Components.Breadcrumb do
   attr(:rest, :global)
 
   def breadcrumb_ellipsis(assigns) do
-    class = cn(["flex size-9 items-center justify-center", assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
     <span
       data-slot="breadcrumb-ellipsis"
       role="presentation"
       aria-hidden="true"
-      class={@computed_class}
+      class={@class}
       {@rest}
     >
       <svg
diff --git a/lib/shadix/components/empty.ex b/lib/shadix/components/empty.ex
index 24ac454..f0cc55a 100644
--- a/lib/shadix/components/empty.ex
+++ b/lib/shadix/components/empty.ex
@@ -1,35 +1,27 @@
 defmodule Shadix.Components.Empty do
   @moduledoc """
-  Empty state components, ported from shadcn/ui (new-york-v4) "empty".
+  Empty state components, ported from shadcn/ui "empty".
 
   Exposes `empty/1`, `empty_header/1`, `empty_media/1`, `empty_title/1`,
   `empty_description/1`, and `empty_content/1`. `empty_media/1` carries a
   `variant` axis (`default` / `icon`).
+
+  Each part renders a `<div>` carrying a stable `data-slot` (and `data-variant`
+  on `empty_media/1`) for styling/targeting. Styling lives in the colocated
+  `priv/styles/<skin>/empty.css` (selected by `data-slot`/`data-variant`);
+  caller-supplied `class` is appended last so Tailwind cascade layers ensure it
+  wins over the defaults.
   """
   use Phoenix.Component
-  import Shadix.Cn
-
-  @empty_media_variants %{
-    "default" => "bg-transparent",
-    "icon" =>
-      "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6"
-  }
 
   attr(:class, :string, default: nil)
   attr(:rest, :global)
   slot(:inner_block, required: true)
 
   def empty(assigns) do
-    class =
-      cn([
-        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
-        assigns.class
-      ])
-
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <div data-slot="empty" class={@computed_class} {@rest}>{render_slot(@inner_block)}</div>
+    <%!-- shadix:colocated-css --%>
+    <div data-slot="empty" class={@class} {@rest}>{render_slot(@inner_block)}</div>
     """
   end
 
@@ -38,16 +30,8 @@ defmodule Shadix.Components.Empty do
   slot(:inner_block, required: true)
 
   def empty_header(assigns) do
-    class =
-      cn([
-        "flex max-w-sm flex-col items-center gap-2 text-center",
-        assigns.class
-      ])
-
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <div data-slot="empty-header" class={@computed_class} {@rest}>{render_slot(@inner_block)}</div>
+    <div data-slot="empty-header" class={@class} {@rest}>{render_slot(@inner_block)}</div>
     """
   end
 
@@ -57,17 +41,8 @@ defmodule Shadix.Components.Empty do
   slot(:inner_block, required: true)
 
   def empty_media(assigns) do
-    class =
-      cn([
-        "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        Map.fetch!(@empty_media_variants, assigns.variant),
-        assigns.class
-      ])
-
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <div data-slot="empty-icon" data-variant={@variant} class={@computed_class} {@rest}>
+    <div data-slot="empty-icon" data-variant={@variant} class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -78,11 +53,8 @@ defmodule Shadix.Components.Empty do
   slot(:inner_block, required: true)
 
   def empty_title(assigns) do
-    class = cn(["text-lg font-medium tracking-tight", assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <div data-slot="empty-title" class={@computed_class} {@rest}>{render_slot(@inner_block)}</div>
+    <div data-slot="empty-title" class={@class} {@rest}>{render_slot(@inner_block)}</div>
     """
   end
 
@@ -91,16 +63,8 @@ defmodule Shadix.Components.Empty do
   slot(:inner_block, required: true)
 
   def empty_description(assigns) do
-    class =
-      cn([
-        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        assigns.class
-      ])
-
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <div data-slot="empty-description" class={@computed_class} {@rest}>
+    <div data-slot="empty-description" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -111,16 +75,8 @@ defmodule Shadix.Components.Empty do
   slot(:inner_block, required: true)
 
   def empty_content(assigns) do
-    class =
-      cn([
-        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
-        assigns.class
-      ])
-
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <div data-slot="empty-content" class={@computed_class} {@rest}>{render_slot(@inner_block)}</div>
+    <div data-slot="empty-content" class={@class} {@rest}>{render_slot(@inner_block)}</div>
     """
   end
 end
diff --git a/lib/shadix/components/kbd.ex b/lib/shadix/components/kbd.ex
index b82ddcc..a6b0b66 100644
--- a/lib/shadix/components/kbd.ex
+++ b/lib/shadix/components/kbd.ex
@@ -3,28 +3,19 @@ defmodule Shadix.Components.Kbd do
   Kbd component translated from the shadcn-ui "kbd" component.
 
   Exposes `kbd/1` and `kbd_group/1`, both rendering `<kbd>` elements with the
-  corresponding `data-slot` values from the original source.
+  corresponding `data-slot` values from the original source. Styling is delivered
+  via colocated CSS keyed on those `data-slot` attributes.
   """
   use Phoenix.Component
-  import Shadix.Cn
 
   attr(:class, :string, default: nil)
   attr(:rest, :global)
   slot(:inner_block, required: true)
 
   def kbd(assigns) do
-    class =
-      cn([
-        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none",
-        "[&_svg:not([class*='size-'])]:size-3",
-        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
-        assigns.class
-      ])
-
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <kbd data-slot="kbd" class={@computed_class} {@rest}>{render_slot(@inner_block)}</kbd>
+    <%!-- shadix:colocated-css --%>
+    <kbd data-slot="kbd" class={@class} {@rest}>{render_slot(@inner_block)}</kbd>
     """
   end
 
@@ -33,11 +24,8 @@ defmodule Shadix.Components.Kbd do
   slot(:inner_block, required: true)
 
   def kbd_group(assigns) do
-    class = cn(["inline-flex items-center gap-1", assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <kbd data-slot="kbd-group" class={@computed_class} {@rest}>{render_slot(@inner_block)}</kbd>
+    <kbd data-slot="kbd-group" class={@class} {@rest}>{render_slot(@inner_block)}</kbd>
     """
   end
 end
diff --git a/lib/shadix/components/label.ex b/lib/shadix/components/label.ex
index 047bf02..bf818d6 100644
--- a/lib/shadix/components/label.ex
+++ b/lib/shadix/components/label.ex
@@ -2,12 +2,10 @@ defmodule Shadix.Components.Label do
   @moduledoc """
   Label component translated from the shadcn/ui `label` component.
 
-  Renders a `<label>` element with `data-slot="label"`. Presentational only.
+  Renders a `<label>` element with `data-slot="label"`. Presentational only;
+  styling is delivered via colocated CSS keyed on the `data-slot` attribute.
   """
   use Phoenix.Component
-  import Shadix.Cn
-
-  @base "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
 
   attr(:for, :string, default: nil)
   attr(:class, :string, default: nil)
@@ -15,11 +13,9 @@ defmodule Shadix.Components.Label do
   slot(:inner_block, required: true)
 
   def label(assigns) do
-    class = cn([@base, assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <label for={@for} data-slot="label" class={@computed_class} {@rest}>
+    <%!-- shadix:colocated-css --%>
+    <label for={@for} data-slot="label" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </label>
     """
diff --git a/lib/shadix/components/separator.ex b/lib/shadix/components/separator.ex
index d035c3f..2b233f8 100644
--- a/lib/shadix/components/separator.ex
+++ b/lib/shadix/components/separator.ex
@@ -8,36 +8,33 @@ defmodule Shadix.Components.Separator do
   as a semantic separator (`role="separator"` with `aria-orientation`), matching
   shadcn/Radix's `decorative` prop and base-ui's separator.
 
-  The `orientation` is reflected as `data-orientation` to drive the
-  `data-[orientation=...]` Tailwind selectors.
+  Renders a `<div>` carrying `data-slot="separator"` plus `data-orientation`
+  for stable styling/targeting. Styling lives in the colocated
+  `priv/styles/<skin>/separator.css` (selected by `data-slot`/`data-orientation`);
+  caller-supplied `class` is appended last so Tailwind cascade layers ensure it
+  wins over the defaults.
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
-  @base "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px"
-
   attr(:orientation, :string, default: "horizontal", values: ~w(horizontal vertical))
   attr(:decorative, :boolean, default: true)
   attr(:class, :string, default: nil)
   attr(:rest, :global)
 
   def separator(assigns) do
-    class = cn([@base, assigns.class])
-
     assigns =
       assigns
-      |> assign(:computed_class, class)
       |> assign(:role, if(assigns.decorative, do: "none", else: "separator"))
       |> assign(:aria_orientation, if(assigns.decorative, do: nil, else: assigns.orientation))
 
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <div
       data-slot="separator"
       role={@role}
       aria-orientation={@aria_orientation}
       data-orientation={@orientation}
-      class={@computed_class}
+      class={@class}
       {@rest}
     >
     </div>
diff --git a/lib/shadix/components/skeleton.ex b/lib/shadix/components/skeleton.ex
index c75fdac..68464bb 100644
--- a/lib/shadix/components/skeleton.ex
+++ b/lib/shadix/components/skeleton.ex
@@ -2,24 +2,24 @@ defmodule Shadix.Components.Skeleton do
   @moduledoc """
   Skeleton component, translated from the shadcn/ui `skeleton` component.
 
-  Renders a `<div>` with `data-slot="skeleton"` used as a loading placeholder.
-
-  The pulse animation respects `prefers-reduced-motion`: under reduced motion
-  the `animate-pulse` loop is suppressed via `motion-reduce:animate-none`.
+  Renders a `<div>` carrying `data-slot="skeleton"`, used as a loading
+  placeholder. All styling lives in the component's colocated CSS
+  (`priv/styles/<style>/skeleton.css`, ported verbatim from shadcn), keyed by that
+  data attribute and wrapped in `@layer components` so a caller-supplied `class`
+  always wins. The colocated-css marker (the first node of the template) is
+  replaced by the chosen style's colocated `<style>` block when the component is
+  copied into a consumer app via `mix shadix.add`.
   """
   use Phoenix.Component
-  import Shadix.Cn
 
   attr(:class, :string, default: nil)
   attr(:rest, :global)
   slot(:inner_block)
 
   def skeleton(assigns) do
-    class = cn(["animate-pulse rounded-md bg-accent motion-reduce:animate-none", assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <div data-slot="skeleton" class={@computed_class} {@rest}>{render_slot(@inner_block)}</div>
+    <%!-- shadix:colocated-css --%>
+    <div data-slot="skeleton" class={@class} {@rest}>{render_slot(@inner_block)}</div>
     """
   end
 end
diff --git a/priv/registry/alert.json b/priv/registry/alert.json
index cba24e7..90b0a86 100644
--- a/priv/registry/alert.json
+++ b/priv/registry/alert.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Alert do\n  @moduledoc \"\"\"\n  Alert component translated from the shadcn-ui \"alert\" component.\n\n  Provides `alert/1`, `alert_title/1`, and `alert_description/1` as\n  presentational Phoenix function components.\n  \"\"\"\n  use Phoenix.Component\n  import Shadix.Cn\n\n  @base \"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current\"\n\n  @variants %{\n    \"default\" => \"bg-card text-card-foreground\",\n    \"destructive\" =>\n      \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current\"\n  }\n\n  attr(:variant, :string, default: \"default\", values: ~w(default destructive))\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert(assigns) do\n    class = cn([@base, Map.fetch!(@variants, assigns.variant), assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <div role=\"alert\" data-slot=\"alert\" data-variant={@variant} class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_title(assigns) do\n    class = cn([\"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\", assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <div data-slot=\"alert-title\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_description(assigns) do\n    class =\n      cn([\n        \"col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed\",\n        assigns.class\n      ])\n\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <div data-slot=\"alert-description\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Alert do\n  @moduledoc \"\"\"\n  Alert component translated from the shadcn-ui \"alert\" component.\n\n  Provides `alert/1`, `alert_title/1`, and `alert_description/1` as\n  presentational Phoenix function components.\n\n  Each element carries a stable `data-slot` (and `data-variant` on the root) for\n  styling/targeting. Styling lives in the colocated `priv/styles/<skin>/alert.css`\n  (selected by `data-slot`/`data-variant`); caller-supplied `class` is appended\n  last so Tailwind cascade layers ensure it wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:variant, :string, default: \"default\", values: ~w(default destructive))\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div\n      role=\"alert\"\n      data-slot=\"alert\"\n      data-variant={@variant}\n      class={[\"group/alert\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_title(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"alert-title\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_description(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"alert-description\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\nend\n",
       "path": "alert.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "alert",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"alert\"] {\n    @apply relative w-full grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"alert\"][data-variant=\"default\"] {\n    @apply bg-card text-card-foreground;\n  }\n\n  [data-slot=\"alert\"][data-variant=\"destructive\"] {\n    @apply text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current;\n  }\n\n  [data-slot=\"alert-title\"] {\n    @apply font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground;\n  }\n\n  [data-slot=\"alert-description\"] {\n    @apply text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"alert\"] {\n    @apply relative w-full grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"alert\"][data-variant=\"default\"] {\n    @apply bg-card text-card-foreground;\n  }\n\n  [data-slot=\"alert\"][data-variant=\"destructive\"] {\n    @apply text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current;\n  }\n\n  [data-slot=\"alert-title\"] {\n    @apply font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground;\n  }\n\n  [data-slot=\"alert-description\"] {\n    @apply text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/badge.json b/priv/registry/badge.json
index 2982459..cc2a68a 100644
--- a/priv/registry/badge.json
+++ b/priv/registry/badge.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Badge do\n  @moduledoc \"\"\"\n  A badge styled with the shadcn variant system.\n\n  Renders a `<span>` carrying `data-slot=\"badge\"` plus `data-variant` for stable\n  styling/targeting. Caller-supplied `class` is appended last; Tailwind cascade\n  layers ensure it wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @base \"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3\"\n\n  @variants %{\n    \"default\" => \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n    \"secondary\" =>\n      \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n    \"destructive\" =>\n      \"border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90\",\n    \"outline\" =>\n      \"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\"\n  }\n\n  attr(:variant, :string,\n    default: \"default\",\n    values: ~w(default secondary destructive outline)\n  )\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(title role))\n  slot(:inner_block, required: true)\n\n  def badge(assigns) do\n    class =\n      cn([\n        @base,\n        Map.fetch!(@variants, assigns.variant),\n        assigns.class\n      ])\n\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <span data-slot=\"badge\" data-variant={@variant} class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Badge do\n  @moduledoc \"\"\"\n  A badge styled with the shadcn variant system.\n\n  Renders a `<span>` carrying `data-slot=\"badge\"` plus `data-variant` for stable\n  styling/targeting. Styling lives in the colocated `priv/styles/<skin>/badge.css`\n  (selected by `data-slot`/`data-variant`); caller-supplied `class` is appended last\n  so Tailwind cascade layers ensure it wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:variant, :string,\n    default: \"default\",\n    values: ~w(default secondary destructive outline)\n  )\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(title role))\n  slot(:inner_block, required: true)\n\n  def badge(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <span\n      data-slot=\"badge\"\n      data-variant={@variant}\n      class={[\"group/badge\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\nend\n",
       "path": "badge.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "badge",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"badge\"] {\n    @apply inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3!;\n  }\n\n  [data-slot=\"badge\"][data-variant=\"default\"] {\n    @apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;\n  }\n\n  [data-slot=\"badge\"][data-variant=\"secondary\"] {\n    @apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;\n  }\n\n  [data-slot=\"badge\"][data-variant=\"outline\"] {\n    @apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground;\n  }\n\n  [data-slot=\"badge\"][data-variant=\"destructive\"] {\n    @apply bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"badge\"] {\n    @apply inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3!;\n  }\n\n  [data-slot=\"badge\"][data-variant=\"default\"] {\n    @apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;\n  }\n\n  [data-slot=\"badge\"][data-variant=\"secondary\"] {\n    @apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;\n  }\n\n  [data-slot=\"badge\"][data-variant=\"outline\"] {\n    @apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground;\n  }\n\n  [data-slot=\"badge\"][data-variant=\"destructive\"] {\n    @apply bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/breadcrumb.json b/priv/registry/breadcrumb.json
index 0af0758..58c467f 100644
--- a/priv/registry/breadcrumb.json
+++ b/priv/registry/breadcrumb.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Breadcrumb do\n  @moduledoc \"\"\"\n  Breadcrumb component, translated from the shadcn/ui `breadcrumb` component.\n\n  Exposes one function per shadcn subcomponent:\n  `breadcrumb/1`, `breadcrumb_list/1`, `breadcrumb_item/1`, `breadcrumb_link/1`,\n  `breadcrumb_page/1`, `breadcrumb_separator/1`, and `breadcrumb_ellipsis/1`.\n  \"\"\"\n  use Phoenix.Component\n  import Shadix.Cn\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def breadcrumb(assigns) do\n    assigns = assign(assigns, :computed_class, cn([assigns.class]))\n\n    ~H\"\"\"\n    <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </nav>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def breadcrumb_list(assigns) do\n    class =\n      cn([\n        \"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5\",\n        assigns.class\n      ])\n\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <ol data-slot=\"breadcrumb-list\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </ol>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def breadcrumb_item(assigns) do\n    class = cn([\"inline-flex items-center gap-1.5\", assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <li data-slot=\"breadcrumb-item\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </li>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(href hreflang target rel download))\n  slot(:inner_block, required: true)\n\n  def breadcrumb_link(assigns) do\n    class = cn([\"transition-colors hover:text-foreground\", assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <a data-slot=\"breadcrumb-link\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </a>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def breadcrumb_page(assigns) do\n    class = cn([\"font-normal text-foreground\", assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      class={@computed_class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block)\n\n  def breadcrumb_separator(assigns) do\n    class = cn([\"[&>svg]:size-3.5\", assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      class={@computed_class}\n      {@rest}\n    >\n      <%= if @inner_block == [] do %>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <path d=\"m9 18 6-6-6-6\" />\n        </svg>\n      <% else %>\n        {render_slot(@inner_block)}\n      <% end %>\n    </li>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def breadcrumb_ellipsis(assigns) do\n    class = cn([\"flex size-9 items-center justify-center\", assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      class={@computed_class}\n      {@rest}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"1\" />\n        <circle cx=\"19\" cy=\"12\" r=\"1\" />\n        <circle cx=\"5\" cy=\"12\" r=\"1\" />\n      </svg>\n      <span class=\"sr-only\">More</span>\n    </span>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Breadcrumb do\n  @moduledoc \"\"\"\n  Breadcrumb component, translated from the shadcn/ui `breadcrumb` component.\n\n  Exposes one function per shadcn subcomponent:\n  `breadcrumb/1`, `breadcrumb_list/1`, `breadcrumb_item/1`, `breadcrumb_link/1`,\n  `breadcrumb_page/1`, `breadcrumb_separator/1`, and `breadcrumb_ellipsis/1`.\n\n  Each element carries a stable `data-slot` for styling/targeting. Styling lives in\n  the colocated `priv/styles/<skin>/breadcrumb.css` (selected by `data-slot`);\n  caller-supplied `class` is appended last so Tailwind cascade layers ensure it wins\n  over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def breadcrumb(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </nav>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def breadcrumb_list(assigns) do\n    ~H\"\"\"\n    <ol data-slot=\"breadcrumb-list\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </ol>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def breadcrumb_item(assigns) do\n    ~H\"\"\"\n    <li data-slot=\"breadcrumb-item\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </li>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(href hreflang target rel download))\n  slot(:inner_block, required: true)\n\n  def breadcrumb_link(assigns) do\n    ~H\"\"\"\n    <a data-slot=\"breadcrumb-link\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </a>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def breadcrumb_page(assigns) do\n    ~H\"\"\"\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block)\n\n  def breadcrumb_separator(assigns) do\n    ~H\"\"\"\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      class={@class}\n      {@rest}\n    >\n      <%= if @inner_block == [] do %>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <path d=\"m9 18 6-6-6-6\" />\n        </svg>\n      <% else %>\n        {render_slot(@inner_block)}\n      <% end %>\n    </li>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def breadcrumb_ellipsis(assigns) do\n    ~H\"\"\"\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      class={@class}\n      {@rest}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"1\" />\n        <circle cx=\"19\" cy=\"12\" r=\"1\" />\n        <circle cx=\"5\" cy=\"12\" r=\"1\" />\n      </svg>\n      <span class=\"sr-only\">More</span>\n    </span>\n    \"\"\"\n  end\nend\n",
       "path": "breadcrumb.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "breadcrumb",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"breadcrumb-list\"] {\n    @apply flex flex-wrap items-center wrap-break-word text-muted-foreground gap-1.5 text-sm;\n  }\n\n  [data-slot=\"breadcrumb-item\"] {\n    @apply inline-flex items-center gap-1;\n  }\n\n  [data-slot=\"breadcrumb-link\"] {\n    @apply hover:text-foreground transition-colors;\n  }\n\n  [data-slot=\"breadcrumb-page\"] {\n    @apply text-foreground font-normal;\n  }\n\n  [data-slot=\"breadcrumb-separator\"] {\n    @apply [&>svg]:size-3.5;\n  }\n\n  [data-slot=\"breadcrumb-ellipsis\"] {\n    @apply flex items-center justify-center size-5 [&>svg]:size-4;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"breadcrumb-list\"] {\n    @apply flex flex-wrap items-center wrap-break-word text-muted-foreground gap-1.5 text-sm sm:gap-2.5;\n  }\n\n  [data-slot=\"breadcrumb-item\"] {\n    @apply inline-flex items-center gap-1.5;\n  }\n\n  [data-slot=\"breadcrumb-link\"] {\n    @apply hover:text-foreground transition-colors;\n  }\n\n  [data-slot=\"breadcrumb-page\"] {\n    @apply text-foreground font-normal;\n  }\n\n  [data-slot=\"breadcrumb-separator\"] {\n    @apply [&>svg]:size-3.5;\n  }\n\n  [data-slot=\"breadcrumb-ellipsis\"] {\n    @apply flex items-center justify-center size-5 [&>svg]:size-4;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/empty.json b/priv/registry/empty.json
index 057eb79..458491c 100644
--- a/priv/registry/empty.json
+++ b/priv/registry/empty.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Empty do\n  @moduledoc \"\"\"\n  Empty state components, ported from shadcn/ui (new-york-v4) \"empty\".\n\n  Exposes `empty/1`, `empty_header/1`, `empty_media/1`, `empty_title/1`,\n  `empty_description/1`, and `empty_content/1`. `empty_media/1` carries a\n  `variant` axis (`default` / `icon`).\n  \"\"\"\n  use Phoenix.Component\n  import Shadix.Cn\n\n  @empty_media_variants %{\n    \"default\" => \"bg-transparent\",\n    \"icon\" =>\n      \"flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6\"\n  }\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def empty(assigns) do\n    class =\n      cn([\n        \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12\",\n        assigns.class\n      ])\n\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <div data-slot=\"empty\" class={@computed_class} {@rest}>{render_slot(@inner_block)}</div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def empty_header(assigns) do\n    class =\n      cn([\n        \"flex max-w-sm flex-col items-center gap-2 text-center\",\n        assigns.class\n      ])\n\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <div data-slot=\"empty-header\" class={@computed_class} {@rest}>{render_slot(@inner_block)}</div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:variant, :string, default: \"default\", values: ~w(default icon))\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def empty_media(assigns) do\n    class =\n      cn([\n        \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        Map.fetch!(@empty_media_variants, assigns.variant),\n        assigns.class\n      ])\n\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <div data-slot=\"empty-icon\" data-variant={@variant} class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def empty_title(assigns) do\n    class = cn([\"text-lg font-medium tracking-tight\", assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <div data-slot=\"empty-title\" class={@computed_class} {@rest}>{render_slot(@inner_block)}</div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def empty_description(assigns) do\n    class =\n      cn([\n        \"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        assigns.class\n      ])\n\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <div data-slot=\"empty-description\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def empty_content(assigns) do\n    class =\n      cn([\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        assigns.class\n      ])\n\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <div data-slot=\"empty-content\" class={@computed_class} {@rest}>{render_slot(@inner_block)}</div>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Empty do\n  @moduledoc \"\"\"\n  Empty state components, ported from shadcn/ui \"empty\".\n\n  Exposes `empty/1`, `empty_header/1`, `empty_media/1`, `empty_title/1`,\n  `empty_description/1`, and `empty_content/1`. `empty_media/1` carries a\n  `variant` axis (`default` / `icon`).\n\n  Each part renders a `<div>` carrying a stable `data-slot` (and `data-variant`\n  on `empty_media/1`) for styling/targeting. Styling lives in the colocated\n  `priv/styles/<skin>/empty.css` (selected by `data-slot`/`data-variant`);\n  caller-supplied `class` is appended last so Tailwind cascade layers ensure it\n  wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def empty(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div data-slot=\"empty\" class={@class} {@rest}>{render_slot(@inner_block)}</div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def empty_header(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"empty-header\" class={@class} {@rest}>{render_slot(@inner_block)}</div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:variant, :string, default: \"default\", values: ~w(default icon))\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def empty_media(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"empty-icon\" data-variant={@variant} class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def empty_title(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"empty-title\" class={@class} {@rest}>{render_slot(@inner_block)}</div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def empty_description(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"empty-description\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def empty_content(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"empty-content\" class={@class} {@rest}>{render_slot(@inner_block)}</div>\n    \"\"\"\n  end\nend\n",
       "path": "empty.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "empty",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"empty\"] {\n    @apply flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance gap-4 rounded-xl border-dashed p-6;\n  }\n\n  [data-slot=\"empty-header\"] {\n    @apply flex max-w-sm flex-col items-center gap-2;\n  }\n\n  [data-slot=\"empty-icon\"] {\n    @apply flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0 mb-2;\n  }\n\n  [data-slot=\"empty-icon\"][data-variant=\"default\"] {\n    @apply bg-transparent;\n  }\n\n  [data-slot=\"empty-icon\"][data-variant=\"icon\"] {\n    @apply bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"empty-title\"] {\n    @apply text-sm font-medium tracking-tight;\n  }\n\n  [data-slot=\"empty-description\"] {\n    @apply text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary text-sm/relaxed;\n  }\n\n  [data-slot=\"empty-content\"] {\n    @apply flex w-full max-w-sm min-w-0 flex-col items-center text-balance gap-2.5 text-sm;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"empty\"] {\n    @apply flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance gap-4 rounded-lg border-dashed p-12;\n  }\n\n  [data-slot=\"empty-header\"] {\n    @apply flex max-w-sm flex-col items-center gap-2;\n  }\n\n  [data-slot=\"empty-icon\"] {\n    @apply flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0 mb-2;\n  }\n\n  [data-slot=\"empty-icon\"][data-variant=\"default\"] {\n    @apply bg-transparent;\n  }\n\n  [data-slot=\"empty-icon\"][data-variant=\"icon\"] {\n    @apply bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6;\n  }\n\n  [data-slot=\"empty-title\"] {\n    @apply text-lg font-medium tracking-tight;\n  }\n\n  [data-slot=\"empty-description\"] {\n    @apply text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary text-sm/relaxed;\n  }\n\n  [data-slot=\"empty-content\"] {\n    @apply flex w-full max-w-sm min-w-0 flex-col items-center text-balance gap-4 text-sm;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/kbd.json b/priv/registry/kbd.json
index cece324..34fcbc2 100644
--- a/priv/registry/kbd.json
+++ b/priv/registry/kbd.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Kbd do\n  @moduledoc \"\"\"\n  Kbd component translated from the shadcn-ui \"kbd\" component.\n\n  Exposes `kbd/1` and `kbd_group/1`, both rendering `<kbd>` elements with the\n  corresponding `data-slot` values from the original source.\n  \"\"\"\n  use Phoenix.Component\n  import Shadix.Cn\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def kbd(assigns) do\n    class =\n      cn([\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none\",\n        \"[&_svg:not([class*='size-'])]:size-3\",\n        \"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10\",\n        assigns.class\n      ])\n\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <kbd data-slot=\"kbd\" class={@computed_class} {@rest}>{render_slot(@inner_block)}</kbd>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def kbd_group(assigns) do\n    class = cn([\"inline-flex items-center gap-1\", assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <kbd data-slot=\"kbd-group\" class={@computed_class} {@rest}>{render_slot(@inner_block)}</kbd>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Kbd do\n  @moduledoc \"\"\"\n  Kbd component translated from the shadcn-ui \"kbd\" component.\n\n  Exposes `kbd/1` and `kbd_group/1`, both rendering `<kbd>` elements with the\n  corresponding `data-slot` values from the original source. Styling is delivered\n  via colocated CSS keyed on those `data-slot` attributes.\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def kbd(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <kbd data-slot=\"kbd\" class={@class} {@rest}>{render_slot(@inner_block)}</kbd>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def kbd_group(assigns) do\n    ~H\"\"\"\n    <kbd data-slot=\"kbd-group\" class={@class} {@rest}>{render_slot(@inner_block)}</kbd>\n    \"\"\"\n  end\nend\n",
       "path": "kbd.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "kbd",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"kbd\"] {\n    @apply pointer-events-none inline-flex items-center justify-center select-none bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;\n  }\n\n  [data-slot=\"kbd-group\"] {\n    @apply inline-flex items-center gap-1;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"kbd\"] {\n    @apply pointer-events-none inline-flex items-center justify-center select-none bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;\n  }\n\n  [data-slot=\"kbd-group\"] {\n    @apply inline-flex items-center gap-1;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/label.json b/priv/registry/label.json
index 10f50a9..64b4bd4 100644
--- a/priv/registry/label.json
+++ b/priv/registry/label.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Label do\n  @moduledoc \"\"\"\n  Label component translated from the shadcn/ui `label` component.\n\n  Renders a `<label>` element with `data-slot=\"label\"`. Presentational only.\n  \"\"\"\n  use Phoenix.Component\n  import Shadix.Cn\n\n  @base \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\"\n\n  attr(:for, :string, default: nil)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(form))\n  slot(:inner_block, required: true)\n\n  def label(assigns) do\n    class = cn([@base, assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <label for={@for} data-slot=\"label\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </label>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Label do\n  @moduledoc \"\"\"\n  Label component translated from the shadcn/ui `label` component.\n\n  Renders a `<label>` element with `data-slot=\"label\"`. Presentational only;\n  styling is delivered via colocated CSS keyed on the `data-slot` attribute.\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:for, :string, default: nil)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(form))\n  slot(:inner_block, required: true)\n\n  def label(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <label for={@for} data-slot=\"label\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </label>\n    \"\"\"\n  end\nend\n",
       "path": "label.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "label",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"label\"] {\n    @apply flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"label\"] {\n    @apply flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/separator.json b/priv/registry/separator.json
index ffb4ba7..435522e 100644
--- a/priv/registry/separator.json
+++ b/priv/registry/separator.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Separator do\n  @moduledoc \"\"\"\n  A visual separator (divider) between content.\n\n  Translated from the shadcn/ui `separator` component. By default it is\n  decorative — it renders a `<div>` with `role=\"none\"` and is hidden from the\n  accessibility tree. Pass `decorative={false}` to expose it to screen readers\n  as a semantic separator (`role=\"separator\"` with `aria-orientation`), matching\n  shadcn/Radix's `decorative` prop and base-ui's separator.\n\n  The `orientation` is reflected as `data-orientation` to drive the\n  `data-[orientation=...]` Tailwind selectors.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @base \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px\"\n\n  attr(:orientation, :string, default: \"horizontal\", values: ~w(horizontal vertical))\n  attr(:decorative, :boolean, default: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def separator(assigns) do\n    class = cn([@base, assigns.class])\n\n    assigns =\n      assigns\n      |> assign(:computed_class, class)\n      |> assign(:role, if(assigns.decorative, do: \"none\", else: \"separator\"))\n      |> assign(:aria_orientation, if(assigns.decorative, do: nil, else: assigns.orientation))\n\n    ~H\"\"\"\n    <div\n      data-slot=\"separator\"\n      role={@role}\n      aria-orientation={@aria_orientation}\n      data-orientation={@orientation}\n      class={@computed_class}\n      {@rest}\n    >\n    </div>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Separator do\n  @moduledoc \"\"\"\n  A visual separator (divider) between content.\n\n  Translated from the shadcn/ui `separator` component. By default it is\n  decorative — it renders a `<div>` with `role=\"none\"` and is hidden from the\n  accessibility tree. Pass `decorative={false}` to expose it to screen readers\n  as a semantic separator (`role=\"separator\"` with `aria-orientation`), matching\n  shadcn/Radix's `decorative` prop and base-ui's separator.\n\n  Renders a `<div>` carrying `data-slot=\"separator\"` plus `data-orientation`\n  for stable styling/targeting. Styling lives in the colocated\n  `priv/styles/<skin>/separator.css` (selected by `data-slot`/`data-orientation`);\n  caller-supplied `class` is appended last so Tailwind cascade layers ensure it\n  wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:orientation, :string, default: \"horizontal\", values: ~w(horizontal vertical))\n  attr(:decorative, :boolean, default: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def separator(assigns) do\n    assigns =\n      assigns\n      |> assign(:role, if(assigns.decorative, do: \"none\", else: \"separator\"))\n      |> assign(:aria_orientation, if(assigns.decorative, do: nil, else: assigns.orientation))\n\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div\n      data-slot=\"separator\"\n      role={@role}\n      aria-orientation={@aria_orientation}\n      data-orientation={@orientation}\n      class={@class}\n      {@rest}\n    >\n    </div>\n    \"\"\"\n  end\nend\n",
       "path": "separator.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "separator",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"separator\"] {\n    @apply bg-border shrink-0;\n  }\n\n  [data-slot=\"separator\"][data-orientation=\"horizontal\"] {\n    @apply h-px w-full;\n  }\n\n  [data-slot=\"separator\"][data-orientation=\"vertical\"] {\n    @apply h-full w-px;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"separator\"] {\n    @apply bg-border shrink-0;\n  }\n\n  [data-slot=\"separator\"][data-orientation=\"horizontal\"] {\n    @apply h-px w-full;\n  }\n\n  [data-slot=\"separator\"][data-orientation=\"vertical\"] {\n    @apply h-full w-px;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/skeleton.json b/priv/registry/skeleton.json
index bf364c4..074ac8e 100644
--- a/priv/registry/skeleton.json
+++ b/priv/registry/skeleton.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Skeleton do\n  @moduledoc \"\"\"\n  Skeleton component, translated from the shadcn/ui `skeleton` component.\n\n  Renders a `<div>` with `data-slot=\"skeleton\"` used as a loading placeholder.\n\n  The pulse animation respects `prefers-reduced-motion`: under reduced motion\n  the `animate-pulse` loop is suppressed via `motion-reduce:animate-none`.\n  \"\"\"\n  use Phoenix.Component\n  import Shadix.Cn\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block)\n\n  def skeleton(assigns) do\n    class = cn([\"animate-pulse rounded-md bg-accent motion-reduce:animate-none\", assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <div data-slot=\"skeleton\" class={@computed_class} {@rest}>{render_slot(@inner_block)}</div>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Skeleton do\n  @moduledoc \"\"\"\n  Skeleton component, translated from the shadcn/ui `skeleton` component.\n\n  Renders a `<div>` carrying `data-slot=\"skeleton\"`, used as a loading\n  placeholder. All styling lives in the component's colocated CSS\n  (`priv/styles/<style>/skeleton.css`, ported verbatim from shadcn), keyed by that\n  data attribute and wrapped in `@layer components` so a caller-supplied `class`\n  always wins. The colocated-css marker (the first node of the template) is\n  replaced by the chosen style's colocated `<style>` block when the component is\n  copied into a consumer app via `mix shadix.add`.\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block)\n\n  def skeleton(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div data-slot=\"skeleton\" class={@class} {@rest}>{render_slot(@inner_block)}</div>\n    \"\"\"\n  end\nend\n",
       "path": "skeleton.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "skeleton",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"skeleton\"] {\n    @apply animate-pulse bg-muted rounded-md;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"skeleton\"] {\n    @apply animate-pulse bg-muted rounded-md;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/styles/nova/alert.css b/priv/styles/nova/alert.css
new file mode 100644
index 0000000..de7e77d
--- /dev/null
+++ b/priv/styles/nova/alert.css
@@ -0,0 +1,21 @@
+@layer components {
+  [data-slot="alert"] {
+    @apply relative w-full grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="alert"][data-variant="default"] {
+    @apply bg-card text-card-foreground;
+  }
+
+  [data-slot="alert"][data-variant="destructive"] {
+    @apply text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current;
+  }
+
+  [data-slot="alert-title"] {
+    @apply font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground;
+  }
+
+  [data-slot="alert-description"] {
+    @apply text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground;
+  }
+}
diff --git a/priv/styles/nova/badge.css b/priv/styles/nova/badge.css
new file mode 100644
index 0000000..db319e4
--- /dev/null
+++ b/priv/styles/nova/badge.css
@@ -0,0 +1,21 @@
+@layer components {
+  [data-slot="badge"] {
+    @apply inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3!;
+  }
+
+  [data-slot="badge"][data-variant="default"] {
+    @apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
+  }
+
+  [data-slot="badge"][data-variant="secondary"] {
+    @apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;
+  }
+
+  [data-slot="badge"][data-variant="outline"] {
+    @apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground;
+  }
+
+  [data-slot="badge"][data-variant="destructive"] {
+    @apply bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20;
+  }
+}
diff --git a/priv/styles/nova/breadcrumb.css b/priv/styles/nova/breadcrumb.css
new file mode 100644
index 0000000..c5e2a85
--- /dev/null
+++ b/priv/styles/nova/breadcrumb.css
@@ -0,0 +1,25 @@
+@layer components {
+  [data-slot="breadcrumb-list"] {
+    @apply flex flex-wrap items-center wrap-break-word text-muted-foreground gap-1.5 text-sm;
+  }
+
+  [data-slot="breadcrumb-item"] {
+    @apply inline-flex items-center gap-1;
+  }
+
+  [data-slot="breadcrumb-link"] {
+    @apply hover:text-foreground transition-colors;
+  }
+
+  [data-slot="breadcrumb-page"] {
+    @apply text-foreground font-normal;
+  }
+
+  [data-slot="breadcrumb-separator"] {
+    @apply [&>svg]:size-3.5;
+  }
+
+  [data-slot="breadcrumb-ellipsis"] {
+    @apply flex items-center justify-center size-5 [&>svg]:size-4;
+  }
+}
diff --git a/priv/styles/nova/empty.css b/priv/styles/nova/empty.css
new file mode 100644
index 0000000..e30d1a0
--- /dev/null
+++ b/priv/styles/nova/empty.css
@@ -0,0 +1,33 @@
+@layer components {
+  [data-slot="empty"] {
+    @apply flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance gap-4 rounded-xl border-dashed p-6;
+  }
+
+  [data-slot="empty-header"] {
+    @apply flex max-w-sm flex-col items-center gap-2;
+  }
+
+  [data-slot="empty-icon"] {
+    @apply flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0 mb-2;
+  }
+
+  [data-slot="empty-icon"][data-variant="default"] {
+    @apply bg-transparent;
+  }
+
+  [data-slot="empty-icon"][data-variant="icon"] {
+    @apply bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="empty-title"] {
+    @apply text-sm font-medium tracking-tight;
+  }
+
+  [data-slot="empty-description"] {
+    @apply text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary text-sm/relaxed;
+  }
+
+  [data-slot="empty-content"] {
+    @apply flex w-full max-w-sm min-w-0 flex-col items-center text-balance gap-2.5 text-sm;
+  }
+}
diff --git a/priv/styles/nova/kbd.css b/priv/styles/nova/kbd.css
new file mode 100644
index 0000000..4adf086
--- /dev/null
+++ b/priv/styles/nova/kbd.css
@@ -0,0 +1,9 @@
+@layer components {
+  [data-slot="kbd"] {
+    @apply pointer-events-none inline-flex items-center justify-center select-none bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
+  }
+
+  [data-slot="kbd-group"] {
+    @apply inline-flex items-center gap-1;
+  }
+}
diff --git a/priv/styles/nova/label.css b/priv/styles/nova/label.css
new file mode 100644
index 0000000..c10682e
--- /dev/null
+++ b/priv/styles/nova/label.css
@@ -0,0 +1,5 @@
+@layer components {
+  [data-slot="label"] {
+    @apply flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
+  }
+}
diff --git a/priv/styles/nova/separator.css b/priv/styles/nova/separator.css
new file mode 100644
index 0000000..dc49df0
--- /dev/null
+++ b/priv/styles/nova/separator.css
@@ -0,0 +1,13 @@
+@layer components {
+  [data-slot="separator"] {
+    @apply bg-border shrink-0;
+  }
+
+  [data-slot="separator"][data-orientation="horizontal"] {
+    @apply h-px w-full;
+  }
+
+  [data-slot="separator"][data-orientation="vertical"] {
+    @apply h-full w-px;
+  }
+}
diff --git a/priv/styles/nova/skeleton.css b/priv/styles/nova/skeleton.css
new file mode 100644
index 0000000..9153948
--- /dev/null
+++ b/priv/styles/nova/skeleton.css
@@ -0,0 +1,5 @@
+@layer components {
+  [data-slot="skeleton"] {
+    @apply animate-pulse bg-muted rounded-md;
+  }
+}
diff --git a/priv/styles/vega/alert.css b/priv/styles/vega/alert.css
new file mode 100644
index 0000000..726e332
--- /dev/null
+++ b/priv/styles/vega/alert.css
@@ -0,0 +1,21 @@
+@layer components {
+  [data-slot="alert"] {
+    @apply relative w-full grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="alert"][data-variant="default"] {
+    @apply bg-card text-card-foreground;
+  }
+
+  [data-slot="alert"][data-variant="destructive"] {
+    @apply text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current;
+  }
+
+  [data-slot="alert-title"] {
+    @apply font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground;
+  }
+
+  [data-slot="alert-description"] {
+    @apply text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground;
+  }
+}
diff --git a/priv/styles/vega/badge.css b/priv/styles/vega/badge.css
new file mode 100644
index 0000000..db319e4
--- /dev/null
+++ b/priv/styles/vega/badge.css
@@ -0,0 +1,21 @@
+@layer components {
+  [data-slot="badge"] {
+    @apply inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3!;
+  }
+
+  [data-slot="badge"][data-variant="default"] {
+    @apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
+  }
+
+  [data-slot="badge"][data-variant="secondary"] {
+    @apply bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80;
+  }
+
+  [data-slot="badge"][data-variant="outline"] {
+    @apply border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground;
+  }
+
+  [data-slot="badge"][data-variant="destructive"] {
+    @apply bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20;
+  }
+}
diff --git a/priv/styles/vega/breadcrumb.css b/priv/styles/vega/breadcrumb.css
new file mode 100644
index 0000000..7f46fee
--- /dev/null
+++ b/priv/styles/vega/breadcrumb.css
@@ -0,0 +1,25 @@
+@layer components {
+  [data-slot="breadcrumb-list"] {
+    @apply flex flex-wrap items-center wrap-break-word text-muted-foreground gap-1.5 text-sm sm:gap-2.5;
+  }
+
+  [data-slot="breadcrumb-item"] {
+    @apply inline-flex items-center gap-1.5;
+  }
+
+  [data-slot="breadcrumb-link"] {
+    @apply hover:text-foreground transition-colors;
+  }
+
+  [data-slot="breadcrumb-page"] {
+    @apply text-foreground font-normal;
+  }
+
+  [data-slot="breadcrumb-separator"] {
+    @apply [&>svg]:size-3.5;
+  }
+
+  [data-slot="breadcrumb-ellipsis"] {
+    @apply flex items-center justify-center size-5 [&>svg]:size-4;
+  }
+}
diff --git a/priv/styles/vega/empty.css b/priv/styles/vega/empty.css
new file mode 100644
index 0000000..012dfe9
--- /dev/null
+++ b/priv/styles/vega/empty.css
@@ -0,0 +1,33 @@
+@layer components {
+  [data-slot="empty"] {
+    @apply flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance gap-4 rounded-lg border-dashed p-12;
+  }
+
+  [data-slot="empty-header"] {
+    @apply flex max-w-sm flex-col items-center gap-2;
+  }
+
+  [data-slot="empty-icon"] {
+    @apply flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0 mb-2;
+  }
+
+  [data-slot="empty-icon"][data-variant="default"] {
+    @apply bg-transparent;
+  }
+
+  [data-slot="empty-icon"][data-variant="icon"] {
+    @apply bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6;
+  }
+
+  [data-slot="empty-title"] {
+    @apply text-lg font-medium tracking-tight;
+  }
+
+  [data-slot="empty-description"] {
+    @apply text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary text-sm/relaxed;
+  }
+
+  [data-slot="empty-content"] {
+    @apply flex w-full max-w-sm min-w-0 flex-col items-center text-balance gap-4 text-sm;
+  }
+}
diff --git a/priv/styles/vega/kbd.css b/priv/styles/vega/kbd.css
new file mode 100644
index 0000000..4adf086
--- /dev/null
+++ b/priv/styles/vega/kbd.css
@@ -0,0 +1,9 @@
+@layer components {
+  [data-slot="kbd"] {
+    @apply pointer-events-none inline-flex items-center justify-center select-none bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
+  }
+
+  [data-slot="kbd-group"] {
+    @apply inline-flex items-center gap-1;
+  }
+}
diff --git a/priv/styles/vega/label.css b/priv/styles/vega/label.css
new file mode 100644
index 0000000..c10682e
--- /dev/null
+++ b/priv/styles/vega/label.css
@@ -0,0 +1,5 @@
+@layer components {
+  [data-slot="label"] {
+    @apply flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
+  }
+}
diff --git a/priv/styles/vega/separator.css b/priv/styles/vega/separator.css
new file mode 100644
index 0000000..dc49df0
--- /dev/null
+++ b/priv/styles/vega/separator.css
@@ -0,0 +1,13 @@
+@layer components {
+  [data-slot="separator"] {
+    @apply bg-border shrink-0;
+  }
+
+  [data-slot="separator"][data-orientation="horizontal"] {
+    @apply h-px w-full;
+  }
+
+  [data-slot="separator"][data-orientation="vertical"] {
+    @apply h-full w-px;
+  }
+}
diff --git a/priv/styles/vega/skeleton.css b/priv/styles/vega/skeleton.css
new file mode 100644
index 0000000..9153948
--- /dev/null
+++ b/priv/styles/vega/skeleton.css
@@ -0,0 +1,5 @@
+@layer components {
+  [data-slot="skeleton"] {
+    @apply animate-pulse bg-muted rounded-md;
+  }
+}
diff --git a/test/shadix/components/alert_test.exs b/test/shadix/components/alert_test.exs
index 2b8e255..de85e78 100644
--- a/test/shadix/components/alert_test.exs
+++ b/test/shadix/components/alert_test.exs
@@ -19,7 +19,7 @@ defmodule Shadix.Components.AlertTest do
     assert Floki.attribute(tree, "div", "data-variant") == ["default"]
   end
 
-  test "alert applies destructive variant classes and data-variant" do
+  test "alert exposes destructive variant via data-variant" do
     assigns = %{}
 
     html =
@@ -29,8 +29,6 @@ defmodule Shadix.Components.AlertTest do
 
     tree = parse(html)
     assert Floki.attribute(tree, "div", "data-variant") == ["destructive"]
-    [class] = Floki.attribute(tree, "div", "class")
-    assert class =~ "text-destructive"
   end
 
   test "alert appends caller class last" do
diff --git a/test/shadix/components/badge_test.exs b/test/shadix/components/badge_test.exs
index 12c4a1f..1f84e67 100644
--- a/test/shadix/components/badge_test.exs
+++ b/test/shadix/components/badge_test.exs
@@ -20,7 +20,7 @@ defmodule Shadix.Components.BadgeTest do
     assert Floki.text(doc) =~ "New"
   end
 
-  test "applies variant classes and data-variant" do
+  test "reflects the variant via data-variant" do
     assigns = %{}
 
     html =
@@ -30,8 +30,6 @@ defmodule Shadix.Components.BadgeTest do
 
     doc = parse(html)
     assert Floki.attribute(doc, "span", "data-variant") == ["destructive"]
-    [class] = Floki.attribute(doc, "span", "class")
-    assert class =~ "bg-destructive"
   end
 
   test "appends caller class last" do
diff --git a/test/shadix/components/breadcrumb_test.exs b/test/shadix/components/breadcrumb_test.exs
index 3ad3556..ca40729 100644
--- a/test/shadix/components/breadcrumb_test.exs
+++ b/test/shadix/components/breadcrumb_test.exs
@@ -18,7 +18,7 @@ defmodule Shadix.Components.BreadcrumbTest do
     assert Floki.attribute(doc, "nav", "aria-label") == ["breadcrumb"]
   end
 
-  test "breadcrumb_list applies base classes with caller class last" do
+  test "breadcrumb_list carries data-slot and forwards caller class" do
     assigns = %{}
 
     html =
@@ -26,9 +26,9 @@ defmodule Shadix.Components.BreadcrumbTest do
       <Shadix.Components.Breadcrumb.breadcrumb_list class="custom">x</Shadix.Components.Breadcrumb.breadcrumb_list>
       """)
 
-    [class] = parse(html) |> Floki.attribute("ol", "class")
-    assert String.contains?(class, "flex flex-wrap items-center")
-    assert String.ends_with?(class, "custom")
+    doc = parse(html)
+    assert Floki.attribute(doc, "ol", "data-slot") == ["breadcrumb-list"]
+    assert Floki.attribute(doc, "ol", "class") == ["custom"]
   end
 
   test "breadcrumb_page has role/aria attributes and data-slot" do
diff --git a/test/shadix/components/empty_test.exs b/test/shadix/components/empty_test.exs
index 190a5c2..06521a2 100644
--- a/test/shadix/components/empty_test.exs
+++ b/test/shadix/components/empty_test.exs
@@ -30,7 +30,7 @@ defmodule Shadix.Components.EmptyTest do
     assert slots == ["empty-header", "empty-title", "empty-description", "empty-content"]
   end
 
-  test "empty_media default variant sets data-variant and base classes" do
+  test "empty_media default variant sets data-slot and data-variant" do
     assigns = %{}
 
     html =
@@ -41,11 +41,9 @@ defmodule Shadix.Components.EmptyTest do
     doc = parse(html)
     assert Floki.attribute(doc, "div", "data-slot") == ["empty-icon"]
     assert Floki.attribute(doc, "div", "data-variant") == ["default"]
-    [class] = Floki.attribute(doc, "div", "class")
-    assert class =~ "bg-transparent"
   end
 
-  test "empty_media icon variant lifts the icon classes" do
+  test "empty_media icon variant sets data-variant" do
     assigns = %{}
 
     html =
@@ -53,12 +51,12 @@ defmodule Shadix.Components.EmptyTest do
       <Shadix.Components.Empty.empty_media variant="icon">m</Shadix.Components.Empty.empty_media>
       """)
 
-    [class] = parse(html) |> Floki.attribute("div", "class")
-    assert class =~ "size-10"
-    assert class =~ "bg-muted"
+    doc = parse(html)
+    assert Floki.attribute(doc, "div", "data-slot") == ["empty-icon"]
+    assert Floki.attribute(doc, "div", "data-variant") == ["icon"]
   end
 
-  test "caller class comes last and global attrs pass through" do
+  test "caller class is present and global attrs pass through" do
     assigns = %{}
 
     html =
@@ -67,7 +65,18 @@ defmodule Shadix.Components.EmptyTest do
       """)
 
     [class] = parse(html) |> Floki.attribute("div", "class")
-    assert String.ends_with?(class, "my-custom")
+    assert class =~ "my-custom"
     assert parse(html) |> Floki.attribute("div", "id") == ["x"]
   end
+
+  test "renders inner block content" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <Shadix.Components.Empty.empty>hello empty</Shadix.Components.Empty.empty>
+      """)
+
+    assert html =~ "hello empty"
+  end
 end
diff --git a/test/shadix/components/kbd_test.exs b/test/shadix/components/kbd_test.exs
index e312327..90b2430 100644
--- a/test/shadix/components/kbd_test.exs
+++ b/test/shadix/components/kbd_test.exs
@@ -28,21 +28,7 @@ defmodule Shadix.Components.KbdTest do
     assert parse(html) |> Floki.attribute("kbd", "data-slot") == ["kbd-group"]
   end
 
-  test "kbd includes base classes" do
-    assigns = %{}
-
-    html =
-      rendered_to_string(~H"""
-      <Shadix.Components.Kbd.kbd>K</Shadix.Components.Kbd.kbd>
-      """)
-
-    class = parse(html) |> Floki.attribute("kbd", "class") |> List.first()
-    assert class =~ "inline-flex"
-    assert class =~ "bg-muted"
-    assert class =~ "rounded-sm"
-  end
-
-  test "caller class is appended last" do
+  test "caller class is present on the element" do
     assigns = %{}
 
     html =
@@ -51,7 +37,7 @@ defmodule Shadix.Components.KbdTest do
       """)
 
     class = parse(html) |> Floki.attribute("kbd", "class") |> List.first()
-    assert String.ends_with?(class, "custom-class")
+    assert class =~ "custom-class"
   end
 
   test "global attrs pass through" do
diff --git a/test/shadix/components/label_test.exs b/test/shadix/components/label_test.exs
index c7136f8..ca12b1f 100644
--- a/test/shadix/components/label_test.exs
+++ b/test/shadix/components/label_test.exs
@@ -29,7 +29,7 @@ defmodule Shadix.Components.LabelTest do
     assert parse(html) |> Floki.attribute("label", "for") == ["email"]
   end
 
-  test "appends caller class last" do
+  test "forwards caller class to the element" do
     assigns = %{}
 
     html =
@@ -37,9 +37,7 @@ defmodule Shadix.Components.LabelTest do
       <Shadix.Components.Label.label class="custom-class">Name</Shadix.Components.Label.label>
       """)
 
-    classes = parse(html) |> Floki.attribute("label", "class") |> List.first()
-    assert classes =~ "text-sm"
-    assert String.ends_with?(classes, "custom-class")
+    assert parse(html) |> Floki.attribute("label", "class") == ["custom-class"]
   end
 
   test "passes through global attributes" do
diff --git a/test/shadix/components/separator_test.exs b/test/shadix/components/separator_test.exs
index 4720df2..2c5cca3 100644
--- a/test/shadix/components/separator_test.exs
+++ b/test/shadix/components/separator_test.exs
@@ -30,22 +30,21 @@ defmodule Shadix.Components.SeparatorTest do
     assert parse(html) |> Floki.attribute("div", "data-orientation") == ["vertical"]
   end
 
-  test "includes base classes" do
+  test "exposes a semantic separator when not decorative" do
     assigns = %{}
 
     html =
       rendered_to_string(~H"""
-      <Shadix.Components.Separator.separator />
+      <Shadix.Components.Separator.separator decorative={false} orientation="vertical" />
       """)
 
-    [class] = parse(html) |> Floki.attribute("div", "class")
-    assert class =~ "shrink-0"
-    assert class =~ "bg-border"
-    assert class =~ "data-[orientation=horizontal]:h-px"
-    assert class =~ "data-[orientation=vertical]:w-px"
+    doc = parse(html)
+    assert Floki.attribute(doc, "div", "role") == ["separator"]
+    assert Floki.attribute(doc, "div", "aria-orientation") == ["vertical"]
+    assert Floki.attribute(doc, "div", "data-orientation") == ["vertical"]
   end
 
-  test "appends caller class last" do
+  test "forwards caller class onto the element" do
     assigns = %{}
 
     html =
@@ -55,7 +54,6 @@ defmodule Shadix.Components.SeparatorTest do
 
     [class] = parse(html) |> Floki.attribute("div", "class")
     assert class =~ "my-4"
-    assert String.ends_with?(class, "my-4")
   end
 
   test "passes through global attributes" do
diff --git a/test/shadix/components/skeleton_test.exs b/test/shadix/components/skeleton_test.exs
index 5f224a5..9f44249 100644
--- a/test/shadix/components/skeleton_test.exs
+++ b/test/shadix/components/skeleton_test.exs
@@ -5,7 +5,7 @@ defmodule Shadix.Components.SkeletonTest do
 
   defp parse(html), do: Floki.parse_fragment!(html)
 
-  test "renders a div with data-slot and base classes" do
+  test "renders a div with data-slot" do
     assigns = %{}
 
     html =
@@ -15,10 +15,6 @@ defmodule Shadix.Components.SkeletonTest do
 
     doc = parse(html)
     assert Floki.attribute(doc, "div", "data-slot") == ["skeleton"]
-    classes = Floki.attribute(doc, "div", "class") |> List.first()
-    assert classes =~ "animate-pulse"
-    assert classes =~ "rounded-md"
-    assert classes =~ "bg-accent"
   end
 
   test "renders optional inner_block content" do
@@ -32,7 +28,7 @@ defmodule Shadix.Components.SkeletonTest do
     assert parse(html) |> Floki.text() =~ "hello"
   end
 
-  test "appends caller class last" do
+  test "forwards the caller class to the element" do
     assigns = %{}
 
     html =
@@ -41,7 +37,7 @@ defmodule Shadix.Components.SkeletonTest do
       """)
 
     classes = parse(html) |> Floki.attribute("div", "class") |> List.first()
-    assert String.ends_with?(classes, "h-4 w-full")
+    assert classes =~ "h-4 w-full"
   end
 
   test "passes through global attributes" do
-- 
2.51.2


From 050444181d852ae064a4aa677ffe962b1298ee00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <git@btao.org>
Date: Sat, 20 Jun 2026 01:10:04 +0100
Subject: [PATCH 07/12] feat(theme): pin tokens to shadcn neutral exactly
 (foreground/primary 0->0.145/0.205; dark accent 0.269)

Matches shadcn's 'neutral' baseColor verbatim (verified vs vendored registry.json).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 assets/css/app.css       | 10 +++++-----
 priv/templates/theme.css | 14 +++++++-------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 7e5fbd6..767401b 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -33,12 +33,12 @@
 :root {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
-  --foreground: oklch(0% 0 0);
+  --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0% 0 0);
+  --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0% 0 0);
-  --primary: oklch(0% 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
@@ -66,7 +66,7 @@
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.371 0 0);
+  --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --destructive-foreground: oklch(0.58 0.22 27);
diff --git a/priv/templates/theme.css b/priv/templates/theme.css
index 72ccd93..eefdd79 100644
--- a/priv/templates/theme.css
+++ b/priv/templates/theme.css
@@ -39,12 +39,12 @@
 :root {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
-  --foreground: oklch(0% 0 0);
+  --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0% 0 0);
+  --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0% 0 0);
-  --primary: oklch(0% 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
@@ -58,8 +58,8 @@
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
   --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0% 0 0);
-  --sidebar-primary: oklch(0% 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.97 0 0);
   --sidebar-accent-foreground: oklch(0.205 0 0);
@@ -80,7 +80,7 @@
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.371 0 0);
+  --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --destructive-foreground: oklch(0.58 0.22 27);
-- 
2.51.2


From a575288198e0453fadac7b76aa945f5ae10015dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <git@btao.org>
Date: Sat, 20 Jun 2026 01:25:39 +0100
Subject: [PATCH 08/12] feat(styles): port batches 2-5 to colocated nova/vega
 (35 components)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Form controls, overlays, listbox/menus, structural-gap components — verbatim
ports from vendored shadcn style-{nova,vega}.css, each adversarially verified.
Structural-gap components (drawer, carousel, resizable, sidebar, sonner, combobox,
command, select, navigation_menu, accordion, calendar-less) match their shared
rendered surface; divergences are noted in agent reports. 44/47 components now
colocated; aspect_ratio/collapsible/data_table stay legacy (no shadcn skin).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 lib/shadix/components/accordion.ex            | 31 ++++---
 lib/shadix/components/alert_dialog.ex         | 57 ++----------
 lib/shadix/components/avatar.ex               | 29 +++----
 lib/shadix/components/card.ex                 | 54 +++++-------
 lib/shadix/components/carousel.ex             | 40 +++------
 lib/shadix/components/checkbox.ex             | 25 +++---
 lib/shadix/components/combobox.ex             | 23 ++---
 lib/shadix/components/command.ex              | 42 +++------
 lib/shadix/components/context_menu.ex         | 25 ++----
 lib/shadix/components/dialog.ex               | 47 ++++------
 lib/shadix/components/drawer.ex               | 51 +++--------
 lib/shadix/components/dropdown_menu.ex        | 26 ++----
 lib/shadix/components/hover_card.ex           | 16 ++--
 lib/shadix/components/input.ex                | 16 ++--
 lib/shadix/components/input_otp.ex            | 14 ++-
 lib/shadix/components/menubar.ex              | 37 ++------
 lib/shadix/components/navigation_menu.ex      | 45 +++-------
 lib/shadix/components/pagination.ex           | 87 ++++---------------
 lib/shadix/components/popover.ex              | 16 ++--
 lib/shadix/components/progress.ex             | 12 +--
 lib/shadix/components/radio_group.ex          | 23 ++---
 lib/shadix/components/resizable.ex            | 83 ++++--------------
 lib/shadix/components/scroll_area.ex          | 31 +++----
 lib/shadix/components/select.ex               | 38 ++++----
 lib/shadix/components/sheet.ex                | 70 +++++----------
 lib/shadix/components/sidebar.ex              | 59 +++++--------
 lib/shadix/components/slider.ex               | 27 +++---
 lib/shadix/components/sonner.ex               | 36 ++------
 lib/shadix/components/switch.ex               | 17 ++--
 lib/shadix/components/table.ex                | 48 +++-------
 lib/shadix/components/tabs.ex                 | 31 ++-----
 lib/shadix/components/textarea.ex             | 16 ++--
 lib/shadix/components/toggle.ex               | 39 +++------
 lib/shadix/components/toggle_group.ex         | 57 +++---------
 lib/shadix/components/tooltip.ex              | 16 ++--
 priv/registry/accordion.json                  | 11 ++-
 priv/registry/alert_dialog.json               | 11 ++-
 priv/registry/avatar.json                     | 11 ++-
 priv/registry/card.json                       | 11 ++-
 priv/registry/carousel.json                   | 11 ++-
 priv/registry/checkbox.json                   | 13 ++-
 priv/registry/combobox.json                   | 13 ++-
 priv/registry/command.json                    | 11 ++-
 priv/registry/context_menu.json               | 11 ++-
 priv/registry/dialog.json                     | 11 ++-
 priv/registry/drawer.json                     | 11 ++-
 priv/registry/dropdown_menu.json              | 11 ++-
 priv/registry/hover_card.json                 | 11 ++-
 priv/registry/input.json                      | 11 ++-
 priv/registry/input_otp.json                  | 11 ++-
 priv/registry/menubar.json                    | 11 ++-
 priv/registry/navigation_menu.json            | 11 ++-
 priv/registry/pagination.json                 | 11 ++-
 priv/registry/popover.json                    | 11 ++-
 priv/registry/progress.json                   | 11 ++-
 priv/registry/radio_group.json                | 13 ++-
 priv/registry/resizable.json                  | 11 ++-
 priv/registry/scroll_area.json                | 11 ++-
 priv/registry/select.json                     | 13 ++-
 priv/registry/sheet.json                      | 11 ++-
 priv/registry/sidebar.json                    | 11 ++-
 priv/registry/slider.json                     | 13 ++-
 priv/registry/sonner.json                     | 11 ++-
 priv/registry/switch.json                     | 13 ++-
 priv/registry/table.json                      | 11 ++-
 priv/registry/tabs.json                       | 11 ++-
 priv/registry/textarea.json                   | 11 ++-
 priv/registry/toggle.json                     | 11 ++-
 priv/registry/toggle_group.json               | 11 ++-
 priv/registry/tooltip.json                    | 11 ++-
 priv/styles/nova/accordion.css                | 21 +++++
 priv/styles/nova/alert_dialog.css             | 33 +++++++
 priv/styles/nova/avatar.css                   | 13 +++
 priv/styles/nova/card.css                     | 29 +++++++
 priv/styles/nova/carousel.css                 | 21 +++++
 priv/styles/nova/checkbox.css                 |  9 ++
 priv/styles/nova/combobox.css                 | 21 +++++
 priv/styles/nova/command.css                  | 41 +++++++++
 priv/styles/nova/context_menu.css             | 25 ++++++
 priv/styles/nova/dialog.css                   | 29 +++++++
 priv/styles/nova/drawer.css                   | 25 ++++++
 priv/styles/nova/dropdown_menu.css            | 21 +++++
 priv/styles/nova/hover_card.css               |  5 ++
 priv/styles/nova/input.css                    |  5 ++
 priv/styles/nova/input_otp.css                | 19 ++++
 priv/styles/nova/menubar.css                  | 29 +++++++
 priv/styles/nova/navigation_menu.css          | 29 +++++++
 priv/styles/nova/pagination.css               | 49 +++++++++++
 priv/styles/nova/popover.css                  | 17 ++++
 priv/styles/nova/progress.css                 |  9 ++
 priv/styles/nova/radio_group.css              |  9 ++
 priv/styles/nova/resizable.css                | 29 +++++++
 priv/styles/nova/scroll_area.css              | 18 ++++
 priv/styles/nova/select.css                   | 21 +++++
 priv/styles/nova/sheet.css                    | 29 +++++++
 priv/styles/nova/sidebar.css                  | 41 +++++++++
 priv/styles/nova/slider.css                   | 17 ++++
 priv/styles/nova/sonner.css                   | 44 ++++++++++
 priv/styles/nova/switch.css                   |  9 ++
 priv/styles/nova/table.css                    | 37 ++++++++
 priv/styles/nova/tabs.css                     | 17 ++++
 priv/styles/nova/textarea.css                 |  5 ++
 priv/styles/nova/toggle.css                   | 25 ++++++
 priv/styles/nova/toggle_group.css             | 29 +++++++
 priv/styles/nova/tooltip.css                  |  5 ++
 priv/styles/vega/accordion.css                | 21 +++++
 priv/styles/vega/alert_dialog.css             | 33 +++++++
 priv/styles/vega/avatar.css                   | 13 +++
 priv/styles/vega/card.css                     | 29 +++++++
 priv/styles/vega/carousel.css                 | 21 +++++
 priv/styles/vega/checkbox.css                 |  9 ++
 priv/styles/vega/combobox.css                 | 21 +++++
 priv/styles/vega/command.css                  | 41 +++++++++
 priv/styles/vega/context_menu.css             | 25 ++++++
 priv/styles/vega/dialog.css                   | 29 +++++++
 priv/styles/vega/drawer.css                   | 25 ++++++
 priv/styles/vega/dropdown_menu.css            | 21 +++++
 priv/styles/vega/hover_card.css               |  5 ++
 priv/styles/vega/input.css                    |  5 ++
 priv/styles/vega/input_otp.css                | 19 ++++
 priv/styles/vega/menubar.css                  | 29 +++++++
 priv/styles/vega/navigation_menu.css          | 29 +++++++
 priv/styles/vega/pagination.css               | 49 +++++++++++
 priv/styles/vega/popover.css                  | 17 ++++
 priv/styles/vega/progress.css                 |  9 ++
 priv/styles/vega/radio_group.css              |  9 ++
 priv/styles/vega/resizable.css                | 29 +++++++
 priv/styles/vega/scroll_area.css              | 18 ++++
 priv/styles/vega/select.css                   | 21 +++++
 priv/styles/vega/sheet.css                    | 29 +++++++
 priv/styles/vega/sidebar.css                  | 41 +++++++++
 priv/styles/vega/slider.css                   | 17 ++++
 priv/styles/vega/sonner.css                   | 44 ++++++++++
 priv/styles/vega/switch.css                   |  9 ++
 priv/styles/vega/table.css                    | 37 ++++++++
 priv/styles/vega/tabs.css                     | 17 ++++
 priv/styles/vega/textarea.css                 |  5 ++
 priv/styles/vega/toggle.css                   | 25 ++++++
 priv/styles/vega/toggle_group.css             | 29 +++++++
 priv/styles/vega/tooltip.css                  |  5 ++
 test/mix/tasks/shadix_add_test.exs            | 19 ++--
 test/mix/tasks/shadix_gen_registry_test.exs   |  2 +-
 test/shadix/components/accordion_test.exs     | 17 ++--
 test/shadix/components/alert_dialog_test.exs  | 25 +++++-
 test/shadix/components/avatar_test.exs        | 28 +-----
 test/shadix/components/card_test.exs          | 27 ++++--
 test/shadix/components/carousel_test.exs      | 34 ++++++--
 test/shadix/components/checkbox_test.exs      | 19 ++++
 test/shadix/components/combobox_test.exs      | 18 ++++
 test/shadix/components/command_test.exs       |  2 +
 test/shadix/components/context_menu_test.exs  | 30 ++++++-
 test/shadix/components/dialog_test.exs        | 44 +++++++++-
 test/shadix/components/drawer_test.exs        | 20 +++--
 test/shadix/components/dropdown_menu_test.exs | 17 ++++
 test/shadix/components/input_otp_test.exs     | 10 +--
 test/shadix/components/input_test.exs         |  9 +-
 test/shadix/components/menubar_test.exs       | 16 ++++
 .../components/navigation_menu_test.exs       | 17 +++-
 test/shadix/components/pagination_test.exs    | 81 +++++++++++++++--
 test/shadix/components/popover_test.exs       | 20 +++++
 test/shadix/components/progress_test.exs      |  3 +-
 test/shadix/components/radio_group_test.exs   |  6 +-
 test/shadix/components/resizable_test.exs     |  7 +-
 test/shadix/components/scroll_area_test.exs   | 13 +--
 test/shadix/components/select_test.exs        |  3 +
 test/shadix/components/sheet_test.exs         | 23 ++++-
 test/shadix/components/sidebar_test.exs       | 14 +--
 test/shadix/components/slider_test.exs        |  2 +-
 test/shadix/components/sonner_test.exs        | 25 ++++--
 test/shadix/components/table_test.exs         | 16 ++--
 test/shadix/components/tabs_test.exs          | 39 +++++++++
 test/shadix/components/textarea_test.exs      | 14 ---
 test/shadix/components/toggle_group_test.exs  | 16 ++--
 test/shadix/components/toggle_test.exs        | 15 ++--
 test/shadix/components/tooltip_test.exs       | 16 ++++
 test/shadix/registry_test.exs                 | 13 ++-
 176 files changed, 2761 insertions(+), 1170 deletions(-)
 create mode 100644 priv/styles/nova/accordion.css
 create mode 100644 priv/styles/nova/alert_dialog.css
 create mode 100644 priv/styles/nova/avatar.css
 create mode 100644 priv/styles/nova/card.css
 create mode 100644 priv/styles/nova/carousel.css
 create mode 100644 priv/styles/nova/checkbox.css
 create mode 100644 priv/styles/nova/combobox.css
 create mode 100644 priv/styles/nova/command.css
 create mode 100644 priv/styles/nova/context_menu.css
 create mode 100644 priv/styles/nova/dialog.css
 create mode 100644 priv/styles/nova/drawer.css
 create mode 100644 priv/styles/nova/dropdown_menu.css
 create mode 100644 priv/styles/nova/hover_card.css
 create mode 100644 priv/styles/nova/input.css
 create mode 100644 priv/styles/nova/input_otp.css
 create mode 100644 priv/styles/nova/menubar.css
 create mode 100644 priv/styles/nova/navigation_menu.css
 create mode 100644 priv/styles/nova/pagination.css
 create mode 100644 priv/styles/nova/popover.css
 create mode 100644 priv/styles/nova/progress.css
 create mode 100644 priv/styles/nova/radio_group.css
 create mode 100644 priv/styles/nova/resizable.css
 create mode 100644 priv/styles/nova/scroll_area.css
 create mode 100644 priv/styles/nova/select.css
 create mode 100644 priv/styles/nova/sheet.css
 create mode 100644 priv/styles/nova/sidebar.css
 create mode 100644 priv/styles/nova/slider.css
 create mode 100644 priv/styles/nova/sonner.css
 create mode 100644 priv/styles/nova/switch.css
 create mode 100644 priv/styles/nova/table.css
 create mode 100644 priv/styles/nova/tabs.css
 create mode 100644 priv/styles/nova/textarea.css
 create mode 100644 priv/styles/nova/toggle.css
 create mode 100644 priv/styles/nova/toggle_group.css
 create mode 100644 priv/styles/nova/tooltip.css
 create mode 100644 priv/styles/vega/accordion.css
 create mode 100644 priv/styles/vega/alert_dialog.css
 create mode 100644 priv/styles/vega/avatar.css
 create mode 100644 priv/styles/vega/card.css
 create mode 100644 priv/styles/vega/carousel.css
 create mode 100644 priv/styles/vega/checkbox.css
 create mode 100644 priv/styles/vega/combobox.css
 create mode 100644 priv/styles/vega/command.css
 create mode 100644 priv/styles/vega/context_menu.css
 create mode 100644 priv/styles/vega/dialog.css
 create mode 100644 priv/styles/vega/drawer.css
 create mode 100644 priv/styles/vega/dropdown_menu.css
 create mode 100644 priv/styles/vega/hover_card.css
 create mode 100644 priv/styles/vega/input.css
 create mode 100644 priv/styles/vega/input_otp.css
 create mode 100644 priv/styles/vega/menubar.css
 create mode 100644 priv/styles/vega/navigation_menu.css
 create mode 100644 priv/styles/vega/pagination.css
 create mode 100644 priv/styles/vega/popover.css
 create mode 100644 priv/styles/vega/progress.css
 create mode 100644 priv/styles/vega/radio_group.css
 create mode 100644 priv/styles/vega/resizable.css
 create mode 100644 priv/styles/vega/scroll_area.css
 create mode 100644 priv/styles/vega/select.css
 create mode 100644 priv/styles/vega/sheet.css
 create mode 100644 priv/styles/vega/sidebar.css
 create mode 100644 priv/styles/vega/slider.css
 create mode 100644 priv/styles/vega/sonner.css
 create mode 100644 priv/styles/vega/switch.css
 create mode 100644 priv/styles/vega/table.css
 create mode 100644 priv/styles/vega/tabs.css
 create mode 100644 priv/styles/vega/textarea.css
 create mode 100644 priv/styles/vega/toggle.css
 create mode 100644 priv/styles/vega/toggle_group.css
 create mode 100644 priv/styles/vega/tooltip.css

diff --git a/lib/shadix/components/accordion.ex b/lib/shadix/components/accordion.ex
index 7aaa04a..88ae194 100644
--- a/lib/shadix/components/accordion.ex
+++ b/lib/shadix/components/accordion.ex
@@ -10,7 +10,15 @@ defmodule Shadix.Components.Accordion do
   transitions between `0fr` (collapsed) and `1fr` (expanded), with the inner
   wrapper clipping overflow. This animates the panel's height smoothly without
   anyone having to measure it, and degrades to an instant toggle under
-  `prefers-reduced-motion`.
+  `prefers-reduced-motion`. (This differs from shadcn, which animates via a
+  Radix-supplied `--radix-accordion-content-height` variable; shadix derives the
+  height purely in CSS, so those grid-rows utilities are load-bearing behavior
+  and stay inline.)
+
+  Each element carries a stable `data-slot` for styling/targeting; the skin lives
+  in the colocated `priv/styles/<skin>/accordion.css` (selected by `data-slot`)
+  and the caller-supplied `class` is appended last so Tailwind cascade layers let
+  it win over the defaults.
 
   Because the collapsed panel stays in the DOM (so it can animate) rather than
   being `display:none`, it carries `inert` while closed to keep it out of the
@@ -31,8 +39,6 @@ defmodule Shadix.Components.Accordion do
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
-
   @doc """
   Renders the accordion root, a vertical stack of `accordion_item/1`s.
 
@@ -47,7 +53,8 @@ defmodule Shadix.Components.Accordion do
 
   def accordion(assigns) do
     ~H"""
-    <div data-slot="accordion" data-type={@type} class={cn([@class])} {@rest}>
+    <%!-- shadix:colocated-css --%>
+    <div data-slot="accordion" data-type={@type} class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -66,7 +73,7 @@ defmodule Shadix.Components.Accordion do
 
   def accordion_item(assigns) do
     ~H"""
-    <div id={@id} data-slot="accordion-item" class={cn(["border-b last:border-b-0", @class])} {@rest}>
+    <div id={@id} data-slot="accordion-item" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -102,12 +109,7 @@ defmodule Shadix.Components.Accordion do
           |> JS.toggle_attribute({"data-state", "open", "closed"}, to: "##{@id}-content")
           |> JS.toggle_attribute({"inert", "true"}, to: "##{@id}-content")
         }
-        class={
-          cn([
-            "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-            @class
-          ])
-        }
+        class={["[&[data-state=open]>svg]:rotate-180", @class]}
         {@rest}
       >
         {render_slot(@inner_block)}
@@ -122,7 +124,8 @@ defmodule Shadix.Components.Accordion do
           stroke-linecap="round"
           stroke-linejoin="round"
           aria-hidden="true"
-          class="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200 motion-reduce:transition-none"
+          data-slot="accordion-trigger-icon"
+          class="pointer-events-none translate-y-0.5 transition-transform duration-200 motion-reduce:transition-none"
         >
           <path d="m6 9 6 6 6-6" />
         </svg>
@@ -154,10 +157,10 @@ defmodule Shadix.Components.Accordion do
       role="region"
       aria-labelledby={"#{@id}-trigger"}
       inert
-      class="grid grid-rows-[0fr] text-sm transition-[grid-template-rows] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] data-[state=open]:grid-rows-[1fr] motion-reduce:transition-none"
+      class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] data-[state=open]:grid-rows-[1fr] motion-reduce:transition-none"
     >
       <div class="overflow-hidden">
-        <div class={cn(["pt-0 pb-4", @class])}>
+        <div data-slot="accordion-content-inner" class={@class}>
           {render_slot(@inner_block)}
         </div>
       </div>
diff --git a/lib/shadix/components/alert_dialog.ex b/lib/shadix/components/alert_dialog.ex
index c363ab5..de8dc4a 100644
--- a/lib/shadix/components/alert_dialog.ex
+++ b/lib/shadix/components/alert_dialog.ex
@@ -24,8 +24,6 @@ defmodule Shadix.Components.AlertDialog do
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
-
   @doc """
   Renders a modal alert dialog with a `:trigger` slot and arbitrary content.
 
@@ -42,22 +40,18 @@ defmodule Shadix.Components.AlertDialog do
 
   def alert_dialog(assigns) do
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <span phx-click={show_alert_dialog(@id)} class="contents">{render_slot(@trigger)}</span>
     <div id={"#{@id}-root"} phx-hook="ShadixAlertDialog">
       <div
         id={"#{@id}-overlay"}
-        class="hidden fixed inset-0 z-50 bg-black/50"
+        class="hidden"
         aria-hidden="true"
         data-slot="alert-dialog-overlay"
       />
       <.focus_wrap
         id={"#{@id}-content"}
-        class={
-          cn([
-            "hidden fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background p-6 shadow-lg",
-            @class
-          ])
-        }
+        class={["hidden group/alert-dialog-content", @class]}
         role="alertdialog"
         aria-modal="true"
         aria-labelledby={"#{@id}-title"}
@@ -123,11 +117,7 @@ defmodule Shadix.Components.AlertDialog do
 
   def alert_dialog_header(assigns) do
     ~H"""
-    <div
-      data-slot="alert-dialog-header"
-      class={cn(["flex flex-col gap-2 text-center sm:text-left", @class])}
-      {@rest}
-    >
+    <div data-slot="alert-dialog-header" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -140,11 +130,7 @@ defmodule Shadix.Components.AlertDialog do
 
   def alert_dialog_footer(assigns) do
     ~H"""
-    <div
-      data-slot="alert-dialog-footer"
-      class={cn(["flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", @class])}
-      {@rest}
-    >
+    <div data-slot="alert-dialog-footer" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -161,12 +147,7 @@ defmodule Shadix.Components.AlertDialog do
 
   def alert_dialog_title(assigns) do
     ~H"""
-    <h2
-      id={"#{@id}-title"}
-      data-slot="alert-dialog-title"
-      class={cn(["text-lg leading-none font-semibold", @class])}
-      {@rest}
-    >
+    <h2 id={"#{@id}-title"} data-slot="alert-dialog-title" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </h2>
     """
@@ -183,12 +164,7 @@ defmodule Shadix.Components.AlertDialog do
 
   def alert_dialog_description(assigns) do
     ~H"""
-    <p
-      id={"#{@id}-description"}
-      data-slot="alert-dialog-description"
-      class={cn(["text-muted-foreground text-sm", @class])}
-      {@rest}
-    >
+    <p id={"#{@id}-description"} data-slot="alert-dialog-description" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </p>
     """
@@ -209,17 +185,7 @@ defmodule Shadix.Components.AlertDialog do
 
   def alert_dialog_action(assigns) do
     ~H"""
-    <button
-      type={@type}
-      data-slot="alert-dialog-action"
-      class={
-        cn([
-          "inline-flex h-9 shrink-0 items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium whitespace-nowrap text-primary-foreground shadow-xs transition-all outline-none hover:bg-primary/90 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
-          @class
-        ])
-      }
-      {@rest}
-    >
+    <button type={@type} data-slot="alert-dialog-action" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </button>
     """
@@ -243,12 +209,7 @@ defmodule Shadix.Components.AlertDialog do
       type={@type}
       data-slot="alert-dialog-cancel"
       phx-click={hide_alert_dialog(@id)}
-      class={
-        cn([
-          "inline-flex h-9 shrink-0 items-center justify-center gap-2 rounded-md border bg-background px-4 py-2 text-sm font-medium whitespace-nowrap shadow-xs transition-all outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
diff --git a/lib/shadix/components/avatar.ex b/lib/shadix/components/avatar.ex
index 32d9ba7..c938433 100644
--- a/lib/shadix/components/avatar.ex
+++ b/lib/shadix/components/avatar.ex
@@ -1,6 +1,6 @@
 defmodule Shadix.Components.Avatar do
   @moduledoc """
-  Avatar, translated from the shadcn/ui (new-york-v4) avatar.
+  Avatar, translated from the shadcn/ui avatar.
 
   Radix's Avatar uses an internal image-loading state machine to swap between the
   image and a fallback. This portable version reproduces that with a tiny hook,
@@ -11,11 +11,14 @@ defmodule Shadix.Components.Avatar do
   Compose them as: `avatar/1` wrapper containing an `avatar_image/1` followed by
   an `avatar_fallback/1` (the fallback must come after the image so the hook can
   find it as the next sibling).
+
+  Each element carries a stable `data-slot` (`avatar`, `avatar-image`,
+  `avatar-fallback`). Styling lives in the colocated `priv/styles/<skin>/avatar.css`
+  (selected by `data-slot`); caller-supplied `class` is appended last so Tailwind
+  cascade layers ensure it wins over the defaults.
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
   @doc """
   Wrapper for an avatar. Renders a `data-slot="avatar"` span; place an
   `avatar_image/1` and then an `avatar_fallback/1` inside it.
@@ -26,11 +29,8 @@ defmodule Shadix.Components.Avatar do
 
   def avatar(assigns) do
     ~H"""
-    <span
-      data-slot="avatar"
-      class={cn(["relative flex size-8 shrink-0 overflow-hidden rounded-full", @class])}
-      {@rest}
-    >
+    <%!-- shadix:colocated-css --%>
+    <span data-slot="avatar" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </span>
     """
@@ -52,7 +52,7 @@ defmodule Shadix.Components.Avatar do
       data-slot="avatar-image"
       id={@id}
       phx-hook="ShadixAvatar"
-      class={cn(["aspect-square size-full", @class])}
+      class={@class}
       src={@src}
       alt={@alt}
       {@rest}
@@ -70,16 +70,7 @@ defmodule Shadix.Components.Avatar do
 
   def avatar_fallback(assigns) do
     ~H"""
-    <span
-      data-slot="avatar-fallback"
-      class={
-        cn([
-          "hidden size-full flex items-center justify-center rounded-full bg-muted",
-          @class
-        ])
-      }
-      {@rest}
-    >
+    <span data-slot="avatar-fallback" class={["hidden", @class]} {@rest}>
       {render_slot(@inner_block)}
     </span>
     """
diff --git a/lib/shadix/components/card.ex b/lib/shadix/components/card.ex
index b82879a..2d41470 100644
--- a/lib/shadix/components/card.ex
+++ b/lib/shadix/components/card.ex
@@ -1,33 +1,27 @@
 defmodule Shadix.Components.Card do
   @moduledoc """
-  Card component, translated from the shadcn/ui (new-york-v4) card.
+  Card components, ported from shadcn/ui "card".
 
   Provides `card/1` and its subcomponents `card_header/1`, `card_title/1`,
   `card_description/1`, `card_action/1`, `card_content/1`, and `card_footer/1`.
-  Each renders a `<div>` carrying a stable `data-slot` and the verbatim shadcn
-  Tailwind classes. These are presentational only.
+  Each renders a `<div>` carrying a stable `data-slot` for styling/targeting.
+
+  Styling lives in the colocated `priv/styles/<skin>/card.css` (selected by
+  `data-slot`); caller-supplied `class` is appended last so Tailwind cascade
+  layers ensure it wins over the defaults. The non-`@apply`-able `group/card`,
+  `group/card-header`, and `@container/card-header` markers stay inline on the
+  element. These components are presentational only.
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
-  @card "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm"
-  @card_header "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6"
-  @card_title "leading-none font-semibold"
-  @card_description "text-sm text-muted-foreground"
-  @card_action "col-start-2 row-span-2 row-start-1 self-start justify-self-end"
-  @card_content "px-6"
-  @card_footer "flex items-center px-6 [.border-t]:pt-6"
-
   attr(:class, :string, default: nil)
   attr(:rest, :global)
   slot(:inner_block, required: true)
 
   def card(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@card, assigns.class]))
-
     ~H"""
-    <div data-slot="card" class={@computed_class} {@rest}>
+    <%!-- shadix:colocated-css --%>
+    <div data-slot="card" class={["group/card", @class]} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -38,10 +32,12 @@ defmodule Shadix.Components.Card do
   slot(:inner_block, required: true)
 
   def card_header(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@card_header, assigns.class]))
-
     ~H"""
-    <div data-slot="card-header" class={@computed_class} {@rest}>
+    <div
+      data-slot="card-header"
+      class={["group/card-header @container/card-header", @class]}
+      {@rest}
+    >
       {render_slot(@inner_block)}
     </div>
     """
@@ -52,10 +48,8 @@ defmodule Shadix.Components.Card do
   slot(:inner_block, required: true)
 
   def card_title(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@card_title, assigns.class]))
-
     ~H"""
-    <div data-slot="card-title" class={@computed_class} {@rest}>
+    <div data-slot="card-title" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -66,10 +60,8 @@ defmodule Shadix.Components.Card do
   slot(:inner_block, required: true)
 
   def card_description(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@card_description, assigns.class]))
-
     ~H"""
-    <div data-slot="card-description" class={@computed_class} {@rest}>
+    <div data-slot="card-description" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -80,10 +72,8 @@ defmodule Shadix.Components.Card do
   slot(:inner_block, required: true)
 
   def card_action(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@card_action, assigns.class]))
-
     ~H"""
-    <div data-slot="card-action" class={@computed_class} {@rest}>
+    <div data-slot="card-action" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -94,10 +84,8 @@ defmodule Shadix.Components.Card do
   slot(:inner_block, required: true)
 
   def card_content(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@card_content, assigns.class]))
-
     ~H"""
-    <div data-slot="card-content" class={@computed_class} {@rest}>
+    <div data-slot="card-content" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -108,10 +96,8 @@ defmodule Shadix.Components.Card do
   slot(:inner_block, required: true)
 
   def card_footer(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@card_footer, assigns.class]))
-
     ~H"""
-    <div data-slot="card-footer" class={@computed_class} {@rest}>
+    <div data-slot="card-footer" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
diff --git a/lib/shadix/components/carousel.ex b/lib/shadix/components/carousel.ex
index f8ecf86..9be1025 100644
--- a/lib/shadix/components/carousel.ex
+++ b/lib/shadix/components/carousel.ex
@@ -3,10 +3,14 @@ defmodule Shadix.Components.Carousel do
   A horizontal carousel built on native CSS scroll-snap and a small LiveView hook.
 
   Unlike the React original (which wraps [Embla](https://www.embla-carousel.com/)),
-  this v1 is a pure CSS scroll-snap carousel: the content track is an
-  `overflow-x-auto` flex row with `snap-x snap-mandatory`, and each item is a
-  full-width `snap-start` child. Scrolling, momentum, and snapping are entirely
-  native to the browser, so there is no JS layout/animation loop.
+  this v1 is a pure CSS scroll-snap carousel: the content track is a horizontally
+  scrolling flex row with mandatory x scroll-snap, and each item is a full-width
+  slide that snaps to its start edge. Scrolling, momentum, and snapping are
+  entirely native to the browser, so there is no JS layout/animation loop.
+
+  Styling is delivered by the colocated `priv/styles/{nova,vega}/carousel.css`
+  skins keyed on each element's `data-slot`; the component markup carries only the
+  `data-slot` attributes and any caller-supplied `class`.
 
   The `ShadixCarousel` hook (assets/ts/carousel.ts) only wires the
   previous/next buttons: clicking them scrolls the content element by one item
@@ -31,8 +35,6 @@ defmodule Shadix.Components.Carousel do
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
   @doc """
   Renders the carousel root: a `relative` wrapper carrying the `ShadixCarousel`
   hook.
@@ -49,13 +51,14 @@ defmodule Shadix.Components.Carousel do
 
   def carousel(assigns) do
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <div
       id={@id}
       phx-hook="ShadixCarousel"
       data-slot="carousel"
       role="region"
       aria-roledescription="carousel"
-      class={cn(["relative", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -83,12 +86,7 @@ defmodule Shadix.Components.Carousel do
       role="group"
       aria-roledescription="carousel slides"
       aria-label="Slides"
-      class={
-        cn([
-          "flex overflow-x-auto snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -109,7 +107,7 @@ defmodule Shadix.Components.Carousel do
       data-slot="carousel-item"
       role="group"
       aria-roledescription="slide"
-      class={cn(["min-w-0 shrink-0 grow-0 basis-full snap-start", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -133,12 +131,7 @@ defmodule Shadix.Components.Carousel do
       data-slot="carousel-previous"
       data-carousel-prev
       aria-label="Previous slide"
-      class={
-        cn([
-          "absolute top-1/2 -left-12 size-8 -translate-y-1/2 inline-flex items-center justify-center rounded-full border border-input bg-background shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
       <svg
@@ -175,12 +168,7 @@ defmodule Shadix.Components.Carousel do
       data-slot="carousel-next"
       data-carousel-next
       aria-label="Next slide"
-      class={
-        cn([
-          "absolute top-1/2 -right-12 size-8 -translate-y-1/2 inline-flex items-center justify-center rounded-full border border-input bg-background shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
       <svg
diff --git a/lib/shadix/components/checkbox.ex b/lib/shadix/components/checkbox.ex
index 2097ccb..7c0dbe7 100644
--- a/lib/shadix/components/checkbox.ex
+++ b/lib/shadix/components/checkbox.ex
@@ -1,26 +1,26 @@
 defmodule Shadix.Components.Checkbox do
   @moduledoc """
-  Checkbox component adapted from shadcn/ui (new-york-v4).
+  Checkbox component adapted from shadcn/ui.
 
   Renders a native `<input type="checkbox">` (with a preceding hidden `"false"`
   input so an unchecked box still submits a value) and is field-aware: it derives
   its `id`, `name`, `value`, and `errors` from a `Phoenix.HTML.FormField`.
 
-  The box is the `appearance-none` input; the check mark is a sibling `<svg>`
-  overlay shown via `peer-checked:visible`. It uses `text-primary-foreground`
-  (via `currentColor`) so the check contrasts correctly in both light and dark
-  mode — unlike a fixed-colour background-image. No JavaScript, no Radix.
+  The box is the `appearance-none` input carrying `data-slot="checkbox"`; the
+  check mark is a sibling `<svg>` overlay (`data-slot="checkbox-indicator"`) shown
+  via `peer-checked:visible`. No JavaScript, no Radix.
 
-  Caller-supplied `class` is appended last (to the input); Tailwind cascade
-  layers ensure it wins over the defaults.
+  All styling lives in the component's colocated CSS
+  (`priv/styles/<style>/checkbox.css`, ported verbatim from shadcn), keyed by the
+  `data-slot` attributes and wrapped in `@layer components` so a caller-supplied
+  `class` always wins. The colocated-css marker (the first node of the template)
+  is replaced by the chosen style's `<style>` block when the component is copied
+  into a consumer app via `mix shadix.add`.
   """
   use Phoenix.Component
 
-  import Shadix.Cn
   import Shadix.Form
 
-  @base "peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-transparent shadow-xs transition-shadow outline-none checked:border-primary checked:bg-primary dark:checked:bg-primary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40"
-
   attr(:field, Phoenix.HTML.FormField, required: true)
   attr(:class, :string, default: nil)
   attr(:rest, :global, include: ~w(disabled required readonly autofocus))
@@ -29,9 +29,9 @@ defmodule Shadix.Components.Checkbox do
     %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)
     assigns = assign(assigns, id: id, name: name, value: value, errors: errors)
     assigns = assign(assigns, :checked, Phoenix.HTML.Form.normalize_value("checkbox", value))
-    assigns = assign(assigns, :computed_class, cn([@base, assigns.class]))
 
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <input type="hidden" name={@name} value="false" />
     <span class="relative inline-grid size-4 shrink-0 *:[grid-area:1/1]">
       <input
@@ -41,12 +41,13 @@ defmodule Shadix.Components.Checkbox do
         name={@name}
         value="true"
         checked={@checked}
-        class={@computed_class}
+        class={["peer", @class]}
         aria-invalid={(@errors != [] && "true") || nil}
         aria-describedby={(@errors != [] && "#{@id}-error") || nil}
         {@rest}
       />
       <svg
+        data-slot="checkbox-indicator"
         class="pointer-events-none invisible size-3.5 place-self-center text-primary-foreground peer-checked:visible"
         viewBox="0 0 24 24"
         fill="none"
diff --git a/lib/shadix/components/combobox.ex b/lib/shadix/components/combobox.ex
index e96d866..f3b1708 100644
--- a/lib/shadix/components/combobox.ex
+++ b/lib/shadix/components/combobox.ex
@@ -27,7 +27,6 @@ defmodule Shadix.Components.Combobox do
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
   import Shadix.Form
 
   @doc """
@@ -47,6 +46,7 @@ defmodule Shadix.Components.Combobox do
     assigns = assign(assigns, name: name, value: value, errors: errors)
 
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <input type="hidden" id={"#{@id}-value"} name={@name} value={@value} data-combobox-value />
     <button
       type="button"
@@ -59,12 +59,7 @@ defmodule Shadix.Components.Combobox do
       aria-expanded="false"
       aria-controls={"#{@id}-content"}
       aria-invalid={@errors != [] && "true"}
-      class={
-        cn([
-          "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-          @class
-        ])
-      }
+      class={@class}
     >
       <span data-combobox-label data-placeholder={@value in [nil, ""] && "true"} class="truncate">
         {@placeholder}
@@ -93,7 +88,7 @@ defmodule Shadix.Components.Combobox do
       data-trigger={"#{@id}-trigger"}
       data-input={"#{@id}-value"}
       data-on-close={hide_combobox(@id)}
-      class="hidden fixed left-0 top-0 z-50 w-72 origin-top overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-md"
+      class="hidden fixed left-0 top-0 z-50 w-72 origin-top overflow-hidden p-0"
     >
       <div class="flex items-center border-b px-3">
         <svg
@@ -123,7 +118,6 @@ defmodule Shadix.Components.Combobox do
           aria-expanded="true"
           aria-controls={"#{@id}-listbox"}
           autocomplete="off"
-          class="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
         />
       </div>
       <div id={"#{@id}-listbox"} role="listbox" aria-label={@placeholder} class="max-h-72 overflow-y-auto p-1">
@@ -133,7 +127,7 @@ defmodule Shadix.Components.Combobox do
           data-combobox-empty
           role="status"
           aria-live="polite"
-          class="hidden py-6 text-center text-sm text-muted-foreground"
+          class="hidden"
         >
           No results found.
         </div>
@@ -162,17 +156,12 @@ defmodule Shadix.Components.Combobox do
       aria-selected="false"
       data-slot="combobox-item"
       data-value={@value}
-      class={
-        cn([
-          "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none hover:bg-accent hover:text-accent-foreground data-[active]:bg-accent data-[active]:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
       <span
         data-combobox-item-indicator
-        class="absolute left-2 flex size-4 items-center justify-center opacity-0"
+        class="absolute right-2 flex size-4 items-center justify-center opacity-0"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
diff --git a/lib/shadix/components/command.ex b/lib/shadix/components/command.ex
index 8967bb7..8f7719f 100644
--- a/lib/shadix/components/command.ex
+++ b/lib/shadix/components/command.ex
@@ -15,13 +15,12 @@ defmodule Shadix.Components.Command do
   so the hook can locate it from the root, and the empty/list slots are matched by
   their `data-slot` attributes.
 
-  Caller-supplied `class` is appended last; Tailwind cascade layers ensure it wins
-  over the defaults.
+  Styling lives in colocated CSS (`priv/styles/<skin>/command.css`), keyed off each
+  element's stable `data-slot`. Caller-supplied `class` is appended last; Tailwind
+  cascade layers ensure it wins over the defaults.
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
   @doc """
   The command root: a rounded, bordered panel hosting the `ShadixCommand` hook.
 
@@ -36,16 +35,12 @@ defmodule Shadix.Components.Command do
 
   def command(assigns) do
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <div
       id={@id}
       data-slot="command"
       phx-hook="ShadixCommand"
-      class={
-        cn([
-          "flex h-full w-full flex-col overflow-hidden rounded-md border bg-popover text-popover-foreground",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -64,7 +59,7 @@ defmodule Shadix.Components.Command do
 
   def command_input(assigns) do
     ~H"""
-    <div data-slot="command-input-wrapper" class="flex h-9 items-center gap-2 border-b px-3">
+    <div data-slot="command-input-wrapper">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
@@ -92,12 +87,7 @@ defmodule Shadix.Components.Command do
         autocomplete="off"
         spellcheck="false"
         placeholder={@placeholder}
-        class={
-          cn([
-            "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",
-            @class
-          ])
-        }
+        class={@class}
         {@rest}
       />
     </div>
@@ -115,7 +105,7 @@ defmodule Shadix.Components.Command do
       role="listbox"
       aria-label="Suggestions"
       data-slot="command-list"
-      class={cn(["max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -138,14 +128,13 @@ defmodule Shadix.Components.Command do
       role="group"
       aria-label={@heading}
       data-slot="command-group"
-      class={cn(["overflow-hidden p-1 text-foreground", @class])}
+      class={@class}
       {@rest}
     >
       <div
         :if={@heading}
         aria-hidden="true"
         data-slot="command-group-heading"
-        class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
       >
         {@heading}
       </div>
@@ -170,12 +159,7 @@ defmodule Shadix.Components.Command do
       tabindex="-1"
       data-slot="command-item"
       data-value={@value}
-      class={
-        cn([
-          "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-accent hover:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-          @class
-        ])
-      }
+      class={["group/command-item", @class]}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -196,7 +180,7 @@ defmodule Shadix.Components.Command do
     <div
       role="presentation"
       data-slot="command-empty"
-      class={cn(["hidden py-6 text-center text-sm", @class])}
+      class={["hidden", @class]}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -213,7 +197,7 @@ defmodule Shadix.Components.Command do
     <div
       aria-hidden="true"
       data-slot="command-separator"
-      class={cn(["-mx-1 h-px bg-border", @class])}
+      class={@class}
       {@rest}
     />
     """
@@ -228,7 +212,7 @@ defmodule Shadix.Components.Command do
     ~H"""
     <span
       data-slot="command-shortcut"
-      class={cn(["ml-auto text-xs tracking-widest text-muted-foreground", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
diff --git a/lib/shadix/components/context_menu.ex b/lib/shadix/components/context_menu.ex
index 0daa726..8ae34d9 100644
--- a/lib/shadix/components/context_menu.ex
+++ b/lib/shadix/components/context_menu.ex
@@ -24,8 +24,6 @@ defmodule Shadix.Components.ContextMenu do
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
-
   @doc """
   Renders a context menu with a `:trigger` slot (the right-clickable area) and
   arbitrary menu items.
@@ -42,11 +40,12 @@ defmodule Shadix.Components.ContextMenu do
 
   def context_menu(assigns) do
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <div
       id={"#{@id}-trigger"}
       data-context-trigger
       data-slot="context-menu-trigger"
-      class={cn(["block", @trigger_class])}
+      class={@trigger_class}
     >
       {render_slot(@trigger)}
     </div>
@@ -60,12 +59,7 @@ defmodule Shadix.Components.ContextMenu do
       data-trigger={"#{@id}-trigger"}
       data-on-open={show_menu(@id)}
       data-on-close={hide_menu(@id)}
-      class={
-        cn([
-          "hidden fixed left-0 top-0 z-50 min-w-[8rem] origin-top overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-          @class
-        ])
-      }
+      class={["hidden fixed left-0 top-0", @class]}
     >
       {render_slot(@inner_block)}
     </div>
@@ -127,12 +121,7 @@ defmodule Shadix.Components.ContextMenu do
             {"transition ease-in duration-75", "opacity-100 scale-100", "opacity-0 scale-95"}
         )
       }
-      class={
-        cn([
-          "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-          @class
-        ])
-      }
+      class={["group/context-menu-item", @class]}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -149,7 +138,7 @@ defmodule Shadix.Components.ContextMenu do
     ~H"""
     <div
       data-slot="context-menu-label"
-      class={cn(["px-2 py-1.5 text-sm font-medium text-foreground", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -166,7 +155,7 @@ defmodule Shadix.Components.ContextMenu do
     <div
       role="separator"
       data-slot="context-menu-separator"
-      class={cn(["-mx-1 my-1 h-px bg-border", @class])}
+      class={@class}
       {@rest}
     />
     """
@@ -181,7 +170,7 @@ defmodule Shadix.Components.ContextMenu do
     ~H"""
     <span
       data-slot="context-menu-shortcut"
-      class={cn(["ml-auto text-xs tracking-widest text-muted-foreground", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
diff --git a/lib/shadix/components/dialog.ex b/lib/shadix/components/dialog.ex
index e5a3874..06dd7cd 100644
--- a/lib/shadix/components/dialog.ex
+++ b/lib/shadix/components/dialog.ex
@@ -13,13 +13,17 @@ defmodule Shadix.Components.Dialog do
   The trigger and content live side by side under a `*-root` wrapper carrying the
   hook; ids are derived from the required `:id` so titles/descriptions wire up to
   `aria-labelledby` / `aria-describedby` stably.
+
+  Each element carries a stable `data-slot` for styling/targeting. Styling lives in
+  the colocated `priv/styles/<skin>/dialog.css` (selected by `data-slot`); the
+  caller-supplied `class` is appended last so Tailwind cascade layers ensure it wins
+  over the defaults. `hidden` stays inline on the overlay/content because the JS
+  commands toggle it to open and close the dialog.
   """
   use Phoenix.Component
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
-
   @doc """
   Renders a modal dialog with a `:trigger` slot and arbitrary content.
 
@@ -33,22 +37,19 @@ defmodule Shadix.Components.Dialog do
 
   def dialog(assigns) do
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <span phx-click={show_dialog(@id)} class="contents">{render_slot(@trigger)}</span>
     <div id={"#{@id}-root"} phx-hook="ShadixDialog">
       <div
         id={"#{@id}-overlay"}
-        class="hidden fixed inset-0 z-50 bg-black/50"
+        data-slot="dialog-overlay"
+        class="hidden"
         aria-hidden="true"
         phx-click={hide_dialog(@id)}
       />
       <.focus_wrap
         id={"#{@id}-content"}
-        class={
-          cn([
-            "hidden fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background p-6 shadow-lg",
-            @class
-          ])
-        }
+        class={["hidden", @class]}
         role="dialog"
         aria-modal="true"
         aria-labelledby={"#{@id}-title"}
@@ -62,7 +63,7 @@ defmodule Shadix.Components.Dialog do
           type="button"
           phx-click={hide_dialog(@id)}
           aria-label="Close"
-          class="absolute right-4 top-4 rounded-xs 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          data-slot="dialog-close"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -134,11 +135,7 @@ defmodule Shadix.Components.Dialog do
 
   def dialog_header(assigns) do
     ~H"""
-    <div
-      data-slot="dialog-header"
-      class={cn(["flex flex-col gap-2 text-center sm:text-left", @class])}
-      {@rest}
-    >
+    <div data-slot="dialog-header" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -151,11 +148,7 @@ defmodule Shadix.Components.Dialog do
 
   def dialog_footer(assigns) do
     ~H"""
-    <div
-      data-slot="dialog-footer"
-      class={cn(["flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", @class])}
-      {@rest}
-    >
+    <div data-slot="dialog-footer" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -172,12 +165,7 @@ defmodule Shadix.Components.Dialog do
 
   def dialog_title(assigns) do
     ~H"""
-    <h2
-      id={"#{@id}-title"}
-      data-slot="dialog-title"
-      class={cn(["text-lg leading-none font-semibold", @class])}
-      {@rest}
-    >
+    <h2 id={"#{@id}-title"} data-slot="dialog-title" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </h2>
     """
@@ -193,12 +181,7 @@ defmodule Shadix.Components.Dialog do
 
   def dialog_description(assigns) do
     ~H"""
-    <p
-      id={"#{@id}-description"}
-      data-slot="dialog-description"
-      class={cn(["text-muted-foreground text-sm", @class])}
-      {@rest}
-    >
+    <p id={"#{@id}-description"} data-slot="dialog-description" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </p>
     """
diff --git a/lib/shadix/components/drawer.ex b/lib/shadix/components/drawer.ex
index 7c4350d..d834533 100644
--- a/lib/shadix/components/drawer.ex
+++ b/lib/shadix/components/drawer.ex
@@ -14,6 +14,12 @@ defmodule Shadix.Components.Drawer do
   The content is fixed to the BOTTOM edge of the viewport and slides up from
   below; a small grab-handle bar sits near the top for visual affordance.
 
+  Each element carries a stable `data-slot`; styling lives in the colocated
+  `priv/styles/<skin>/drawer.css` (selected by `data-slot`). The `hidden` toggle
+  and positioning the JS commands rely on stay inline, and caller-supplied
+  `class` is appended last so Tailwind cascade layers ensure it wins over the
+  defaults.
+
   > #### v1 has no drag-to-dismiss {: .info}
   >
   > shadcn/ui's drawer uses [vaul](https://github.com/emilkowalski/vaul) to
@@ -25,8 +31,6 @@ defmodule Shadix.Components.Drawer do
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
-
   @doc """
   Renders a bottom drawer with a `:trigger` slot and arbitrary content.
 
@@ -40,6 +44,7 @@ defmodule Shadix.Components.Drawer do
 
   def drawer(assigns) do
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <span phx-click={show_drawer(@id)} class="contents">{render_slot(@trigger)}</span>
     <div id={"#{@id}-root"} phx-hook="ShadixDrawer">
       <div
@@ -50,12 +55,7 @@ defmodule Shadix.Components.Drawer do
       />
       <.focus_wrap
         id={"#{@id}-content"}
-        class={
-          cn([
-            "hidden fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-lg border bg-background",
-            @class
-          ])
-        }
+        class={["hidden", @class]}
         role="dialog"
         aria-modal="true"
         aria-labelledby={"#{@id}-title"}
@@ -64,11 +64,7 @@ defmodule Shadix.Components.Drawer do
         phx-window-keydown={hide_drawer(@id)}
         phx-key="escape"
       >
-        <div
-          data-slot="drawer-handle"
-          aria-hidden="true"
-          class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted"
-        />
+        <div data-slot="drawer-handle" aria-hidden="true" />
         {render_slot(@inner_block)}
       </.focus_wrap>
     </div>
@@ -128,11 +124,7 @@ defmodule Shadix.Components.Drawer do
 
   def drawer_header(assigns) do
     ~H"""
-    <div
-      data-slot="drawer-header"
-      class={cn(["flex flex-col gap-0.5 p-4 text-center md:gap-1.5 md:text-left", @class])}
-      {@rest}
-    >
+    <div data-slot="drawer-header" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -145,7 +137,7 @@ defmodule Shadix.Components.Drawer do
 
   def drawer_footer(assigns) do
     ~H"""
-    <div data-slot="drawer-footer" class={cn(["mt-auto flex flex-col gap-2 p-4", @class])} {@rest}>
+    <div data-slot="drawer-footer" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -162,12 +154,7 @@ defmodule Shadix.Components.Drawer do
 
   def drawer_title(assigns) do
     ~H"""
-    <h2
-      id={"#{@id}-title"}
-      data-slot="drawer-title"
-      class={cn(["text-foreground font-semibold", @class])}
-      {@rest}
-    >
+    <h2 id={"#{@id}-title"} data-slot="drawer-title" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </h2>
     """
@@ -184,12 +171,7 @@ defmodule Shadix.Components.Drawer do
 
   def drawer_description(assigns) do
     ~H"""
-    <p
-      id={"#{@id}-description"}
-      data-slot="drawer-description"
-      class={cn(["text-muted-foreground text-sm", @class])}
-      {@rest}
-    >
+    <p id={"#{@id}-description"} data-slot="drawer-description" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </p>
     """
@@ -212,12 +194,7 @@ defmodule Shadix.Components.Drawer do
       data-slot="drawer-close"
       phx-click={hide_drawer(@id)}
       aria-label="Close"
-      class={
-        cn([
-          "rounded-md ring-offset-background transition-opacity focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
diff --git a/lib/shadix/components/dropdown_menu.ex b/lib/shadix/components/dropdown_menu.ex
index 7a4eddb..23f9225 100644
--- a/lib/shadix/components/dropdown_menu.ex
+++ b/lib/shadix/components/dropdown_menu.ex
@@ -19,8 +19,6 @@ defmodule Shadix.Components.DropdownMenu do
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
-
   @doc """
   Renders a dropdown menu with a `:trigger` slot and arbitrary menu items.
 
@@ -35,6 +33,7 @@ defmodule Shadix.Components.DropdownMenu do
 
   def dropdown_menu(assigns) do
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <span
       id={"#{@id}-trigger"}
       phx-click={toggle_menu(@id)}
@@ -50,12 +49,7 @@ defmodule Shadix.Components.DropdownMenu do
       phx-hook="ShadixDropdownMenu"
       data-trigger={"#{@id}-trigger"}
       data-on-close={hide_menu(@id)}
-      class={
-        cn([
-          "hidden fixed left-0 top-0 z-50 min-w-[8rem] origin-top overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-          @class
-        ])
-      }
+      class={["hidden fixed left-0 top-0 z-50 origin-top overflow-y-auto outline-none", @class]}
     >
       {render_slot(@inner_block)}
     </div>
@@ -117,12 +111,10 @@ defmodule Shadix.Components.DropdownMenu do
             {"transition ease-in duration-75", "opacity-100 scale-100", "opacity-0 scale-95"}
         )
       }
-      class={
-        cn([
-          "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-          @class
-        ])
-      }
+      class={[
+        "group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        @class
+      ]}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -139,7 +131,7 @@ defmodule Shadix.Components.DropdownMenu do
     ~H"""
     <div
       data-slot="dropdown-menu-label"
-      class={cn(["px-2 py-1.5 text-sm font-medium", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -156,7 +148,7 @@ defmodule Shadix.Components.DropdownMenu do
     <div
       role="separator"
       data-slot="dropdown-menu-separator"
-      class={cn(["-mx-1 my-1 h-px bg-border", @class])}
+      class={@class}
       {@rest}
     />
     """
@@ -171,7 +163,7 @@ defmodule Shadix.Components.DropdownMenu do
     ~H"""
     <span
       data-slot="dropdown-menu-shortcut"
-      class={cn(["ml-auto text-xs tracking-widest text-muted-foreground", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
diff --git a/lib/shadix/components/hover_card.ex b/lib/shadix/components/hover_card.ex
index c505e45..8e05f4f 100644
--- a/lib/shadix/components/hover_card.ex
+++ b/lib/shadix/components/hover_card.ex
@@ -14,13 +14,17 @@ defmodule Shadix.Components.HoverCard do
 
   Trigger and content ids are derived from the required `:id` so `data-trigger`
   and the JS targets line up stably.
+
+  Each element carries a stable `data-slot` for styling/targeting. Styling lives
+  in the colocated `priv/styles/<skin>/hover_card.css` (selected by `data-slot`);
+  caller-supplied `class` is appended last so Tailwind cascade layers ensure it
+  wins over the defaults. The `hidden fixed left-0 top-0` markers on the content
+  stay inline because they drive the JS show/hide and Floating UI positioning.
   """
   use Phoenix.Component
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
-
   @doc """
   Renders a hover card with a `:trigger` slot and arbitrary card content.
 
@@ -36,6 +40,7 @@ defmodule Shadix.Components.HoverCard do
 
   def hover_card(assigns) do
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <span id={"#{@id}-trigger"} data-slot="hover-card-trigger" class="contents">
       {render_slot(@trigger)}
     </span>
@@ -46,12 +51,7 @@ defmodule Shadix.Components.HoverCard do
       data-trigger={"#{@id}-trigger"}
       data-on-open={show_hover_card(@id)}
       data-on-close={hide_hover_card(@id)}
-      class={
-        cn([
-          "hidden fixed left-0 top-0 z-50 w-64 origin-top rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
-          @class
-        ])
-      }
+      class={["hidden fixed left-0 top-0 origin-top", @class]}
     >
       {render_slot(@inner_block)}
     </div>
diff --git a/lib/shadix/components/input.ex b/lib/shadix/components/input.ex
index 8bfb2c4..8522cb3 100644
--- a/lib/shadix/components/input.ex
+++ b/lib/shadix/components/input.ex
@@ -1,17 +1,13 @@
 defmodule Shadix.Components.Input do
   @moduledoc """
-  Input component translated from shadcn/ui (new-york-v4).
+  Input component translated from shadcn/ui.
 
   Renders a void `<input>` element with `data-slot="input"`. No variants.
-  Caller-supplied `class` is appended last; Tailwind cascade layers ensure it
-  wins over the defaults.
+  Styling is delivered via colocated CSS (`priv/styles/<skin>/input.css`);
+  caller-supplied `class` is appended last so it can override defaults.
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
-  @base "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
-
   attr(:type, :string, default: "text")
   attr(:class, :string, default: nil)
 
@@ -21,11 +17,9 @@ defmodule Shadix.Components.Input do
   )
 
   def input(assigns) do
-    class = cn([@base, assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <input type={@type} data-slot="input" class={@computed_class} {@rest} />
+    <%!-- shadix:colocated-css --%>
+    <input type={@type} data-slot="input" class={@class} {@rest} />
     """
   end
 end
diff --git a/lib/shadix/components/input_otp.ex b/lib/shadix/components/input_otp.ex
index eb33797..9864dae 100644
--- a/lib/shadix/components/input_otp.ex
+++ b/lib/shadix/components/input_otp.ex
@@ -8,6 +8,10 @@ defmodule Shadix.Components.InputOtp do
   inside a flex row plus one hidden input (`data-otp-value`) carrying the
   concatenated value for form submission.
 
+  Styling is delivered via colocated CSS keyed on the `data-slot` attributes
+  (`input-otp` on the container, `input-otp-slot` on each digit); see
+  `priv/styles/{nova,vega}/input_otp.css`.
+
   The `ShadixInputOtp` hook (assets/ts/input_otp.ts) lives on the container and
   drives the behavior JS commands can't: typing a digit advances focus to the
   next slot, `Backspace` on an empty slot moves back, arrow keys move between
@@ -16,10 +20,6 @@ defmodule Shadix.Components.InputOtp do
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
-  @slot_class "size-9 rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30"
-
   @doc """
   Renders a segmented OTP input made of `@length` single-character slots and a
   hidden input (`name={@name}`) holding the concatenated value.
@@ -31,16 +31,15 @@ defmodule Shadix.Components.InputOtp do
   attr(:class, :string, default: nil)
 
   def input_otp(assigns) do
-    assigns = assign(assigns, :slot_class, @slot_class)
-
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <div
       id={@id}
       phx-hook="ShadixInputOtp"
       data-slot="input-otp"
       role="group"
       aria-label={@label}
-      class={cn(["flex items-center gap-2 has-disabled:opacity-50", @class])}
+      class={@class}
     >
       <input
         :for={i <- 0..(@length - 1)}
@@ -52,7 +51,6 @@ defmodule Shadix.Components.InputOtp do
         data-otp-index={i}
         aria-label={"Digit #{i + 1}"}
         tabindex={if(i == 0, do: "0", else: "-1")}
-        class={@slot_class}
       />
       <input type="hidden" name={@name} data-otp-value value="" />
     </div>
diff --git a/lib/shadix/components/menubar.ex b/lib/shadix/components/menubar.ex
index 7b0e062..e3009f2 100644
--- a/lib/shadix/components/menubar.ex
+++ b/lib/shadix/components/menubar.ex
@@ -41,8 +41,6 @@ defmodule Shadix.Components.Menubar do
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
-
   @doc """
   Renders the horizontal menubar container.
 
@@ -58,18 +56,14 @@ defmodule Shadix.Components.Menubar do
 
   def menubar(assigns) do
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <div
       id={@id}
       role="menubar"
       aria-orientation="horizontal"
       data-slot="menubar"
       phx-hook="ShadixMenubar"
-      class={
-        cn([
-          "flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -105,12 +99,7 @@ defmodule Shadix.Components.Menubar do
       aria-haspopup="menu"
       aria-expanded="false"
       aria-controls={"#{@id}-content"}
-      class={
-        cn([
-          "flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground",
-          @class
-        ])
-      }
+      class={@class}
     >
       {@label}
     </button>
@@ -122,12 +111,7 @@ defmodule Shadix.Components.Menubar do
       data-trigger={"#{@id}-trigger"}
       data-on-open={show_menu(@id)}
       data-on-close={hide_menu(@id)}
-      class={
-        cn([
-          "hidden fixed left-0 top-0 z-50 min-w-[12rem] origin-top-left overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-          @content_class
-        ])
-      }
+      class={["hidden fixed left-0 top-0 z-50 origin-top-left overflow-y-auto outline-none", @content_class]}
     >
       {render_slot(@inner_block)}
     </div>
@@ -204,12 +188,7 @@ defmodule Shadix.Components.Menubar do
             {"transition ease-in duration-75", "opacity-100 scale-100", "opacity-0 scale-95"}
         )
       }
-      class={
-        cn([
-          "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-          @class
-        ])
-      }
+      class={["group/menubar-item", @class]}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -226,7 +205,7 @@ defmodule Shadix.Components.Menubar do
     ~H"""
     <div
       data-slot="menubar-label"
-      class={cn(["px-2 py-1.5 text-sm font-medium", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -243,7 +222,7 @@ defmodule Shadix.Components.Menubar do
     <div
       role="separator"
       data-slot="menubar-separator"
-      class={cn(["-mx-1 my-1 h-px bg-border", @class])}
+      class={@class}
       {@rest}
     />
     """
@@ -258,7 +237,7 @@ defmodule Shadix.Components.Menubar do
     ~H"""
     <span
       data-slot="menubar-shortcut"
-      class={cn(["ml-auto text-xs tracking-widest text-muted-foreground", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
diff --git a/lib/shadix/components/navigation_menu.ex b/lib/shadix/components/navigation_menu.ex
index 8f6cc02..aa36973 100644
--- a/lib/shadix/components/navigation_menu.ex
+++ b/lib/shadix/components/navigation_menu.ex
@@ -15,6 +15,11 @@ defmodule Shadix.Components.NavigationMenu do
   Trigger and content ids are derived from the required `:id` so `aria-controls`,
   `data-trigger`, and the JS targets line up stably.
 
+  Styling lives in the colocated `priv/styles/{nova,vega}/navigation_menu.css`
+  skins, keyed by each element's `data-slot`; the component renders only the
+  stable `data-slot`/`data-state` markers plus the behavioral positioning and
+  `hidden` classes the JS hook toggles.
+
   NOTE: This is a focused v1. Compared to the shadcn/Radix original it omits the
   shared animated viewport, motion direction animations (`data-motion`), the
   active-link indicator, and pointer-grace hand-off between adjacent panels. Each
@@ -26,8 +31,6 @@ defmodule Shadix.Components.NavigationMenu do
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
-
   @doc """
   Renders the navigation menu root.
 
@@ -40,10 +43,11 @@ defmodule Shadix.Components.NavigationMenu do
 
   def navigation_menu(assigns) do
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <nav
       role="navigation"
       data-slot="navigation-menu"
-      class={cn(["group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", @class])}
+      class={["group/navigation-menu", @class]}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -63,11 +67,7 @@ defmodule Shadix.Components.NavigationMenu do
 
   def navigation_menu_list(assigns) do
     ~H"""
-    <ul
-      data-slot="navigation-menu-list"
-      class={cn(["group flex flex-1 list-none items-center justify-center gap-1", @class])}
-      {@rest}
-    >
+    <ul data-slot="navigation-menu-list" class={["group", @class]} {@rest}>
       {render_slot(@inner_block)}
     </ul>
     """
@@ -84,7 +84,7 @@ defmodule Shadix.Components.NavigationMenu do
 
   def navigation_menu_item(assigns) do
     ~H"""
-    <li data-slot="navigation-menu-item" class={cn(["relative", @class])} {@rest}>
+    <li data-slot="navigation-menu-item" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </li>
     """
@@ -116,12 +116,7 @@ defmodule Shadix.Components.NavigationMenu do
       aria-controls={"#{@id}-content"}
       phx-click={toggle_content(@id)}
       phx-mouseenter={show_content(@id)}
-      class={
-        cn([
-          "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent [&[data-state=open]>svg]:rotate-180",
-          @class
-        ])
-      }
+      class={["group/navigation-menu-trigger group", @class]}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -136,7 +131,7 @@ defmodule Shadix.Components.NavigationMenu do
         stroke-linecap="round"
         stroke-linejoin="round"
         aria-hidden="true"
-        class="relative top-[1px] ml-1 size-3 transition duration-300"
+        data-slot="navigation-menu-trigger-icon"
       >
         <path d="m6 9 6 6 6-6" />
       </svg>
@@ -167,12 +162,7 @@ defmodule Shadix.Components.NavigationMenu do
       data-trigger={"#{@id}-trigger"}
       phx-hook="ShadixNavigationMenu"
       data-on-close={hide_content(@id)}
-      class={
-        cn([
-          "hidden fixed left-0 top-0 z-50 w-max overflow-hidden rounded-md border bg-popover p-2 text-popover-foreground shadow",
-          @class
-        ])
-      }
+      class={["hidden fixed left-0 top-0 z-50 w-max overflow-hidden", @class]}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -192,16 +182,7 @@ defmodule Shadix.Components.NavigationMenu do
 
   def navigation_menu_link(assigns) do
     ~H"""
-    <a
-      data-slot="navigation-menu-link"
-      class={
-        cn([
-          "flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-          @class
-        ])
-      }
-      {@rest}
-    >
+    <a data-slot="navigation-menu-link" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </a>
     """
diff --git a/lib/shadix/components/pagination.ex b/lib/shadix/components/pagination.ex
index 039134d..d8bcfef 100644
--- a/lib/shadix/components/pagination.ex
+++ b/lib/shadix/components/pagination.ex
@@ -2,37 +2,26 @@ defmodule Shadix.Components.Pagination do
   @moduledoc """
   Pagination components translated from the shadcn/ui `pagination` component.
 
-  Presentational only; no navigation behavior is wired up. The button-ish
-  classes for `pagination_link/1` are lifted verbatim from shadcn's
-  `buttonVariants` (base + `outline`/`ghost` variant + `default`/`icon` size).
+  Presentational only; no navigation behavior is wired up. Styling is supplied by
+  the colocated nova/vega skins; each element carries a stable `data-slot` (and
+  `data-active`/`data-size` on links) so the CSS can target it. The link-ish
+  elements mirror shadcn's button styling (outline when active, ghost otherwise;
+  `default`/`icon` sizes).
   """
   use Phoenix.Component
-  import Shadix.Cn
-
-  @button_base "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all 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 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-
-  @variant_outline "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50"
-  @variant_ghost "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
-
-  @sizes %{
-    "default" => "h-9 px-4 py-2 has-[>svg]:px-3",
-    "icon" => "size-9"
-  }
 
   attr(:class, :string, default: nil)
   attr(:rest, :global)
   slot(:inner_block, required: true)
 
   def pagination(assigns) do
-    class = cn(["mx-auto flex w-full justify-center", assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <nav
       role="navigation"
       aria-label="pagination"
       data-slot="pagination"
-      class={@computed_class}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -45,11 +34,8 @@ defmodule Shadix.Components.Pagination do
   slot(:inner_block, required: true)
 
   def pagination_content(assigns) do
-    class = cn(["flex flex-row items-center gap-1", assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <ul data-slot="pagination-content" class={@computed_class} {@rest}>
+    <ul data-slot="pagination-content" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </ul>
     """
@@ -60,11 +46,8 @@ defmodule Shadix.Components.Pagination do
   slot(:inner_block, required: true)
 
   def pagination_item(assigns) do
-    class = cn([assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <li data-slot="pagination-item" class={@computed_class} {@rest}>
+    <li data-slot="pagination-item" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </li>
     """
@@ -77,24 +60,13 @@ defmodule Shadix.Components.Pagination do
   slot(:inner_block, required: true)
 
   def pagination_link(assigns) do
-    variant = if assigns.is_active, do: @variant_outline, else: @variant_ghost
-
-    class =
-      cn([
-        @button_base,
-        variant,
-        Map.fetch!(@sizes, assigns.size),
-        assigns.class
-      ])
-
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
     <a
       aria-current={if @is_active, do: "page"}
       data-slot="pagination-link"
       data-active={to_string(@is_active)}
-      class={@computed_class}
+      data-size={@size}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -107,23 +79,12 @@ defmodule Shadix.Components.Pagination do
   slot(:inner_block)
 
   def pagination_previous(assigns) do
-    class =
-      cn([
-        @button_base,
-        @variant_ghost,
-        Map.fetch!(@sizes, "default"),
-        "gap-1 px-2.5 sm:pl-2.5",
-        assigns.class
-      ])
-
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
     <a
       aria-label="Go to previous page"
-      data-slot="pagination-link"
+      data-slot="pagination-previous"
       data-active="false"
-      class={@computed_class}
+      class={@class}
       {@rest}
     >
       <svg
@@ -136,6 +97,7 @@ defmodule Shadix.Components.Pagination do
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
+        data-icon="inline-start"
         aria-hidden="true"
       >
         <path d="m15 18-6-6 6-6" />
@@ -150,23 +112,12 @@ defmodule Shadix.Components.Pagination do
   slot(:inner_block)
 
   def pagination_next(assigns) do
-    class =
-      cn([
-        @button_base,
-        @variant_ghost,
-        Map.fetch!(@sizes, "default"),
-        "gap-1 px-2.5 sm:pr-2.5",
-        assigns.class
-      ])
-
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
     <a
       aria-label="Go to next page"
-      data-slot="pagination-link"
+      data-slot="pagination-next"
       data-active="false"
-      class={@computed_class}
+      class={@class}
       {@rest}
     >
       <span class="hidden sm:block">Next</span>
@@ -180,6 +131,7 @@ defmodule Shadix.Components.Pagination do
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
+        data-icon="inline-end"
         aria-hidden="true"
       >
         <path d="m9 18 6-6-6-6" />
@@ -192,11 +144,8 @@ defmodule Shadix.Components.Pagination do
   attr(:rest, :global)
 
   def pagination_ellipsis(assigns) do
-    class = cn(["flex size-9 items-center justify-center", assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <span aria-hidden="true" data-slot="pagination-ellipsis" class={@computed_class} {@rest}>
+    <span aria-hidden="true" data-slot="pagination-ellipsis" class={@class} {@rest}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
diff --git a/lib/shadix/components/popover.ex b/lib/shadix/components/popover.ex
index eb774e4..d1956a7 100644
--- a/lib/shadix/components/popover.ex
+++ b/lib/shadix/components/popover.ex
@@ -20,8 +20,6 @@ defmodule Shadix.Components.Popover do
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
-
   @doc """
   Renders a popover with a `:trigger` slot and arbitrary content.
 
@@ -36,6 +34,7 @@ defmodule Shadix.Components.Popover do
 
   def popover(assigns) do
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <span
       id={"#{@id}-trigger"}
       phx-click={toggle_popover(@id)}
@@ -53,12 +52,7 @@ defmodule Shadix.Components.Popover do
       phx-hook="ShadixPopover"
       data-trigger={"#{@id}-trigger"}
       data-on-close={hide_popover(@id)}
-      class={
-        cn([
-          "hidden fixed left-0 top-0 z-50 w-72 origin-top rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
-          @class
-        ])
-      }
+      class={["hidden fixed left-0 top-0 z-50 w-72 origin-top outline-none", @class]}
     >
       {render_slot(@inner_block)}
     </div>
@@ -103,7 +97,7 @@ defmodule Shadix.Components.Popover do
     ~H"""
     <div
       data-slot="popover-header"
-      class={cn(["flex flex-col gap-1 text-sm", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -126,7 +120,7 @@ defmodule Shadix.Components.Popover do
     <div
       id={@id && "#{@id}-title"}
       data-slot="popover-title"
-      class={cn(["font-medium", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -148,7 +142,7 @@ defmodule Shadix.Components.Popover do
     <p
       id={@id && "#{@id}-description"}
       data-slot="popover-description"
-      class={cn(["text-muted-foreground text-sm", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
diff --git a/lib/shadix/components/progress.ex b/lib/shadix/components/progress.ex
index 5d987e4..2a0a347 100644
--- a/lib/shadix/components/progress.ex
+++ b/lib/shadix/components/progress.ex
@@ -4,9 +4,11 @@ defmodule Shadix.Components.Progress do
 
   Renders a determinate progress bar. The `value` attribute (0-100) controls
   how far the indicator is filled.
+
+  Styling is delivered by the colocated `progress.css` skin; the elements carry
+  stable `data-slot` attributes (`progress`, `progress-indicator`) for targeting.
   """
   use Phoenix.Component
-  import Shadix.Cn
 
   attr(:value, :integer, default: 0)
   attr(:label, :string, default: "Progress", doc: "Accessible name for the progress bar.")
@@ -14,10 +16,8 @@ defmodule Shadix.Components.Progress do
   attr(:rest, :global)
 
   def progress(assigns) do
-    class = cn(["relative h-2 w-full overflow-hidden rounded-full bg-primary/20", assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <div
       data-slot="progress"
       role="progressbar"
@@ -26,12 +26,12 @@ defmodule Shadix.Components.Progress do
       aria-valuemax="100"
       aria-valuenow={@value}
       aria-valuetext={"#{@value}%"}
-      class={@computed_class}
+      class={@class}
       {@rest}
     >
       <div
         data-slot="progress-indicator"
-        class="h-full w-full flex-1 bg-primary transition-all motion-reduce:transition-none"
+        class={["motion-reduce:transition-none"]}
         style={"transform: translateX(-#{100 - @value}%)"}
       >
       </div>
diff --git a/lib/shadix/components/radio_group.ex b/lib/shadix/components/radio_group.ex
index a786a14..a54cc83 100644
--- a/lib/shadix/components/radio_group.ex
+++ b/lib/shadix/components/radio_group.ex
@@ -1,6 +1,6 @@
 defmodule Shadix.Components.RadioGroup do
   @moduledoc """
-  Radio group component translated from shadcn/ui (new-york-v4).
+  Radio group component translated from shadcn/ui.
 
   Two function-components:
 
@@ -14,6 +14,10 @@ defmodule Shadix.Components.RadioGroup do
       item's `value`. The selected dot is drawn with CSS only (a `before:`
       pseudo-element shown via the `checked:` variant), no JavaScript.
 
+  Styling is delivered via colocated CSS keyed on the `data-slot` attributes
+  (`radio-group`, `radio-group-item`); the elements carry only structural
+  marker classes (`peer`, `group/radio-group-item`) plus the caller `class`.
+
   Radios are grouped, so an individual item does not render its own error
   message; surface validation alongside the group/label as appropriate. Each
   item still reflects the field's invalid state via `aria-invalid` so screen
@@ -21,22 +25,16 @@ defmodule Shadix.Components.RadioGroup do
   """
   use Phoenix.Component
 
-  import Shadix.Cn
   import Shadix.Form
 
-  @container_base "grid gap-3"
-
-  @item_base "peer relative flex aspect-square size-4 shrink-0 appearance-none items-center justify-center rounded-full border border-input bg-transparent text-primary shadow-xs transition-[color,box-shadow] outline-none before:size-2 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity before:content-[''] checked:before:opacity-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40"
-
   attr(:class, :string, default: nil)
   attr(:rest, :global)
   slot(:inner_block, required: true)
 
   def radio_group(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@container_base, assigns.class]))
-
     ~H"""
-    <div role="radiogroup" data-slot="radio-group" class={@computed_class} {@rest}>
+    <%!-- shadix:colocated-css --%>
+    <div role="radiogroup" data-slot="radio-group" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -50,10 +48,7 @@ defmodule Shadix.Components.RadioGroup do
   def radio_group_item(assigns) do
     %{name: name, value: value, errors: errors} = field_attrs(assigns.field)
 
-    assigns =
-      assigns
-      |> assign(name: name, field_value: value, errors: errors)
-      |> assign(:computed_class, cn([@item_base, assigns.class]))
+    assigns = assign(assigns, name: name, field_value: value, errors: errors)
 
     ~H"""
     <input
@@ -64,7 +59,7 @@ defmodule Shadix.Components.RadioGroup do
       checked={to_string(@field_value) == @value}
       aria-invalid={(@errors != [] && "true") || nil}
       data-slot="radio-group-item"
-      class={@computed_class}
+      class={["peer group/radio-group-item", @class]}
       {@rest}
     />
     """
diff --git a/lib/shadix/components/resizable.ex b/lib/shadix/components/resizable.ex
index 42ab8cc..5437515 100644
--- a/lib/shadix/components/resizable.ex
+++ b/lib/shadix/components/resizable.ex
@@ -14,6 +14,13 @@ defmodule Shadix.Components.Resizable do
   fraction of the parent's size, and shifts that fraction from the next panel's
   `flex-basis` to the previous panel's (clamped to 0-100%).
 
+  Each element carries a stable `data-slot`; the group also mirrors `:direction`
+  onto `data-direction` (read by the hook and used to switch the flex axis) and
+  the handle's `aria-orientation` drives its direction-dependent styling. Styling
+  lives in the colocated `priv/styles/<skin>/resizable.css`, selected by those
+  attributes. Caller-supplied `class` is appended last so the Tailwind cascade
+  layers ensure it wins over the defaults.
+
   Compose them like:
 
       <.resizable id="demo">
@@ -24,13 +31,11 @@ defmodule Shadix.Components.Resizable do
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
   @doc """
   Renders a resizable group (the flex container holding two panels and a handle).
 
   `:direction` is mirrored onto `data-direction` so the hook can read it, and it
-  switches the flex axis (`flex-col` for vertical).
+  switches the flex axis (column for vertical).
   """
   attr(:id, :string, required: true)
   attr(:direction, :string, default: "horizontal", values: ~w(horizontal vertical))
@@ -40,19 +45,8 @@ defmodule Shadix.Components.Resizable do
 
   def resizable(assigns) do
     ~H"""
-    <div
-      id={@id}
-      data-slot="resizable"
-      data-direction={@direction}
-      class={
-        cn([
-          "flex h-full w-full",
-          @direction == "vertical" && "flex-col",
-          @class
-        ])
-      }
-      {@rest}
-    >
+    <%!-- shadix:colocated-css --%>
+    <div id={@id} data-slot="resizable" data-direction={@direction} class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -72,12 +66,7 @@ defmodule Shadix.Components.Resizable do
 
   def resizable_panel(assigns) do
     ~H"""
-    <div
-      data-slot="resizable-panel"
-      class={cn(["min-h-0 min-w-0 overflow-auto", @class])}
-      style={@style}
-      {@rest}
-    >
+    <div data-slot="resizable-panel" class={@class} style={@style} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -87,8 +76,9 @@ defmodule Shadix.Components.Resizable do
   Renders the draggable divider between two panels.
 
   Carries `phx-hook="ShadixResizable"`, `role="separator"`, and an
-  `aria-orientation` derived from `:direction`. It paints a thin border-colored
-  bar with a centered grip and an enlarged hit area (`after:` pseudo-element).
+  `aria-orientation` derived from `:direction`. The `aria-orientation` also drives
+  its direction-dependent styling: a thin border-colored bar with a centered grip
+  and an enlarged hit area (`after:` pseudo-element).
   """
   attr(:id, :string, default: nil)
   attr(:direction, :string, default: "horizontal", values: ~w(horizontal vertical))
@@ -108,51 +98,10 @@ defmodule Shadix.Components.Resizable do
       aria-valuemax="100"
       aria-valuenow="50"
       aria-orientation={if @direction == "vertical", do: "horizontal", else: "vertical"}
-      class={
-        cn([
-          "bg-border relative flex items-center justify-center",
-          "focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-offset-1",
-          if(@direction == "vertical",
-            do:
-              "h-px w-full cursor-row-resize after:absolute after:left-0 after:h-1 after:w-full after:-translate-y-1/2",
-            else:
-              "w-px cursor-col-resize after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2"
-          ),
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
-      <div
-        data-slot="resizable-handle-grip"
-        class={
-          cn([
-            "bg-border z-10 flex items-center justify-center rounded-xs border",
-            if(@direction == "vertical", do: "h-3 w-4", else: "h-4 w-3")
-          ])
-        }
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          aria-hidden="true"
-          class={cn(["size-2.5", @direction == "vertical" && "rotate-90"])}
-        >
-          <circle cx="9" cy="12" r="1" />
-          <circle cx="9" cy="5" r="1" />
-          <circle cx="9" cy="19" r="1" />
-          <circle cx="15" cy="12" r="1" />
-          <circle cx="15" cy="5" r="1" />
-          <circle cx="15" cy="19" r="1" />
-        </svg>
-      </div>
+      <div data-slot="resizable-handle-grip"></div>
     </div>
     """
   end
diff --git a/lib/shadix/components/scroll_area.ex b/lib/shadix/components/scroll_area.ex
index ee228d8..b14053a 100644
--- a/lib/shadix/components/scroll_area.ex
+++ b/lib/shadix/components/scroll_area.ex
@@ -1,6 +1,6 @@
 defmodule Shadix.Components.ScrollArea do
   @moduledoc """
-  Scroll area component, translated from the shadcn/ui (new-york-v4) scroll-area.
+  Scroll area component, translated from the shadcn/ui scroll-area.
 
   NOTE: the React/Radix original replaces the browser's native scrollbar with a
   custom overlay scrollbar (the `ScrollBar`/`ScrollAreaThumb` primitives) driven
@@ -8,17 +8,22 @@ defmodule Shadix.Components.ScrollArea do
   behaviour and merely *styles the native scrollbars* (thin width, rounded
   `bg-border` thumb) via `scrollbar-width` and the `::-webkit-scrollbar`
   pseudo-elements. There is no Radix-style custom-scrollbar JS and therefore no
-  LiveView hook.
+  LiveView hook, and the `scroll-area-scrollbar` / `scroll-area-thumb` slots are
+  not rendered.
 
   The outer `scroll-area` wrapper clips overflow; the inner
   `scroll-area-viewport` is the scrollable element and receives the caller's
   content. Give the wrapper a constrained size (e.g. `class="h-72 w-48"`) so
   there is something to scroll.
+
+  Each element carries a stable `data-slot` (`scroll-area`,
+  `scroll-area-viewport`). Styling lives in the colocated
+  `priv/styles/<skin>/scroll_area.css` (selected by `data-slot`);
+  caller-supplied `class` is appended last so Tailwind cascade layers ensure it
+  wins over the defaults.
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
   @doc """
   Renders a scroll area with styled native scrollbars.
 
@@ -31,21 +36,9 @@ defmodule Shadix.Components.ScrollArea do
 
   def scroll_area(assigns) do
     ~H"""
-    <div data-slot="scroll-area" class={cn(["relative overflow-hidden", @class])} {@rest}>
-      <div
-        data-slot="scroll-area-viewport"
-        tabindex="0"
-        class={
-          cn([
-            "size-full overflow-auto rounded-[inherit]",
-            "outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
-            "[scrollbar-width:thin] [scrollbar-color:var(--border)_transparent]",
-            "[&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar]:h-2.5",
-            "[&::-webkit-scrollbar-track]:bg-transparent",
-            "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border"
-          ])
-        }
-      >
+    <%!-- shadix:colocated-css --%>
+    <div data-slot="scroll-area" class={@class} {@rest}>
+      <div data-slot="scroll-area-viewport" tabindex="0">
         {render_slot(@inner_block)}
       </div>
     </div>
diff --git a/lib/shadix/components/select.ex b/lib/shadix/components/select.ex
index 114316e..8f05421 100644
--- a/lib/shadix/components/select.ex
+++ b/lib/shadix/components/select.ex
@@ -19,18 +19,22 @@ defmodule Shadix.Components.Select do
 
   Trigger and content ids derive from the required `:id` so `aria-controls`,
   `data-trigger`, and the JS targets line up stably.
+
+  All styling lives in the component's colocated CSS
+  (`priv/styles/<style>/select.css`, ported verbatim from shadcn), keyed by the
+  `data-slot` attributes and wrapped in `@layer components` so a caller-supplied
+  `class` always wins. The colocated-css marker (the first node of the template)
+  is replaced by the chosen style's colocated `<style>` block when the component
+  is copied into a consumer app via `mix shadix.add`. The content element keeps
+  its JS/Floating-UI positioning utilities (`hidden fixed …`) inline because they
+  are load-bearing for the `ShadixSelect` hook.
   """
   use Phoenix.Component
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
   import Shadix.Form
 
-  @trigger_class "flex h-9 w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder=true]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-
-  @content_class "hidden fixed left-0 top-0 z-50 max-h-96 min-w-[8rem] origin-top overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
-
   @doc """
   Renders a field-aware select.
 
@@ -52,17 +56,17 @@ defmodule Shadix.Components.Select do
       assign(assigns,
         name: name,
         value: value,
-        errors: errors,
-        trigger_class: @trigger_class,
-        content_class: cn([@content_class, assigns.class])
+        errors: errors
       )
 
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <input type="hidden" id={"#{@id}-input"} name={@name} value={@value} data-select-value />
     <button
       type="button"
       id={"#{@id}-trigger"}
       data-slot="select-trigger"
+      data-size="default"
       role="combobox"
       aria-haspopup="listbox"
       aria-expanded="false"
@@ -72,7 +76,6 @@ defmodule Shadix.Components.Select do
       aria-describedby={(@errors != [] && "#{@id}-error") || nil}
       data-placeholder={if @value == nil, do: "true", else: "false"}
       phx-click={toggle_listbox(@id)}
-      class={@trigger_class}
     >
       <span
         id={"#{@id}-value"}
@@ -106,7 +109,10 @@ defmodule Shadix.Components.Select do
       data-input={"#{@id}-input"}
       data-placeholder={@placeholder}
       data-on-close={hide_listbox(@id)}
-      class={@content_class}
+      class={[
+        "hidden fixed left-0 top-0 z-50 max-h-96 origin-top overflow-x-hidden overflow-y-auto",
+        @class
+      ]}
     >
       {render_slot(@inner_block)}
     </div>
@@ -173,18 +179,10 @@ defmodule Shadix.Components.Select do
       aria-selected="false"
       aria-disabled={@disabled && "true"}
       data-disabled={@disabled && "true"}
-      class={
-        cn([
-          "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
-      <span
-        data-slot="select-item-indicator"
-        class="absolute right-2 flex size-3.5 items-center justify-center"
-      >
+      <span data-slot="select-item-indicator">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
diff --git a/lib/shadix/components/sheet.ex b/lib/shadix/components/sheet.ex
index dac48af..b990de7 100644
--- a/lib/shadix/components/sheet.ex
+++ b/lib/shadix/components/sheet.ex
@@ -12,38 +12,27 @@ defmodule Shadix.Components.Sheet do
 
   Unlike the dialog, the content is NOT centered: it is fixed to the chosen
   `:side` (one of `top`, `right`, `bottom`, `left`) and slides in from that edge.
-  Side-based classes and enter/leave transitions are computed from the `@sides`
-  map.
+  Positioning is driven by the colocated `[data-slot="sheet-content"]` CSS keyed
+  off `data-side`; the enter/leave slide transitions are computed from the
+  `@sides` map.
+
+  Styling is delivered by colocated CSS (`priv/styles/<skin>/sheet.css`); each
+  element carries a stable `data-slot` (and the content panel a `data-side`) that
+  the CSS targets.
   """
   use Phoenix.Component
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
-
-  # Per-side positioning + slide transition classes. `from`/`to` are the
-  # transition endpoints (the off-screen and on-screen translate states).
+  # Per-side slide transition endpoints. `from`/`to` are the off-screen and
+  # on-screen translate states used by the show/hide JS commands. (Per-side
+  # positioning lives in the `[data-slot="sheet-content"]` CSS, keyed on
+  # `data-side`.)
   @sides %{
-    "right" => %{
-      position: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l",
-      from: "translate-x-full",
-      to: "translate-x-0"
-    },
-    "left" => %{
-      position: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r",
-      from: "-translate-x-full",
-      to: "translate-x-0"
-    },
-    "top" => %{
-      position: "inset-x-0 top-0 h-auto w-full border-b",
-      from: "-translate-y-full",
-      to: "translate-y-0"
-    },
-    "bottom" => %{
-      position: "inset-x-0 bottom-0 h-auto w-full border-t",
-      from: "translate-y-full",
-      to: "translate-y-0"
-    }
+    "right" => %{from: "translate-x-full", to: "translate-x-0"},
+    "left" => %{from: "-translate-x-full", to: "translate-x-0"},
+    "top" => %{from: "-translate-y-full", to: "translate-y-0"},
+    "bottom" => %{from: "translate-y-full", to: "translate-y-0"}
   }
 
   @doc """
@@ -60,26 +49,20 @@ defmodule Shadix.Components.Sheet do
   slot(:inner_block, required: true)
 
   def sheet(assigns) do
-    assigns = assign(assigns, :side_classes, @sides[assigns.side])
-
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <span phx-click={show_sheet(@id, @side)} class="contents">{render_slot(@trigger)}</span>
     <div id={"#{@id}-root"} phx-hook="ShadixSheet">
       <div
         id={"#{@id}-overlay"}
-        class="hidden fixed inset-0 z-50 bg-black/50"
+        data-slot="sheet-overlay"
+        class="hidden"
         aria-hidden="true"
         phx-click={hide_sheet(@id, @side)}
       />
       <.focus_wrap
         id={"#{@id}-content"}
-        class={
-          cn([
-            "hidden fixed z-50 flex flex-col gap-4 bg-background p-6 shadow-lg",
-            @side_classes.position,
-            @class
-          ])
-        }
+        class={["hidden", @class]}
         role="dialog"
         aria-modal="true"
         aria-labelledby={"#{@id}-title"}
@@ -157,7 +140,7 @@ defmodule Shadix.Components.Sheet do
 
   def sheet_header(assigns) do
     ~H"""
-    <div data-slot="sheet-header" class={cn(["flex flex-col gap-1.5", @class])} {@rest}>
+    <div data-slot="sheet-header" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -170,7 +153,7 @@ defmodule Shadix.Components.Sheet do
 
   def sheet_footer(assigns) do
     ~H"""
-    <div data-slot="sheet-footer" class={cn(["mt-auto flex flex-col gap-2", @class])} {@rest}>
+    <div data-slot="sheet-footer" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -190,7 +173,7 @@ defmodule Shadix.Components.Sheet do
     <h2
       id={"#{@id}-title"}
       data-slot="sheet-title"
-      class={cn(["text-foreground font-semibold", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -211,7 +194,7 @@ defmodule Shadix.Components.Sheet do
     <p
       id={"#{@id}-description"}
       data-slot="sheet-description"
-      class={cn(["text-muted-foreground text-sm", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -234,12 +217,7 @@ defmodule Shadix.Components.Sheet do
       data-slot="sheet-close"
       phx-click={hide_sheet(@id, @side)}
       aria-label="Close"
-      class={
-        cn([
-          "absolute right-4 top-4 rounded-xs 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",
-          @class
-        ])
-      }
+      class={@class}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
diff --git a/lib/shadix/components/sidebar.ex b/lib/shadix/components/sidebar.ex
index 6b0187a..4a7ffa6 100644
--- a/lib/shadix/components/sidebar.ex
+++ b/lib/shadix/components/sidebar.ex
@@ -12,15 +12,18 @@ defmodule Shadix.Components.Sidebar do
   `sidebar_trigger/1` is a button carrying `data-slot="sidebar-trigger"`; the
   hook listens for clicks on any such trigger inside the provider and flips the
   provider's `data-state`. The CSS reacts: `sidebar/1` is an `<aside>` that
-  animates its width between `w-64` (expanded) and `w-0`/`overflow-hidden`
-  (collapsed). No server round-trip is involved — toggling is entirely
-  client-side.
+  animates its width between expanded and collapsed (zero width / hidden
+  overflow) widths driven by the provider's `data-state` via the
+  `group/sidebar` marker. No server round-trip is involved — toggling is
+  entirely client-side.
 
   The remaining parts (`sidebar_header/1`, `sidebar_content/1`,
   `sidebar_footer/1`, `sidebar_group/1`, `sidebar_group_label/1`,
   `sidebar_menu/1`, `sidebar_menu_item/1`, `sidebar_menu_button/1`) are
-  layout/structure primitives styled with the `--sidebar*` theme tokens
-  (`bg-sidebar`, `text-sidebar-foreground`, `bg-sidebar-accent`, …).
+  layout/structure primitives styled via their `data-slot` attributes using the
+  `--sidebar*` theme tokens. Styling lives in the colocated stylesheet
+  (`priv/styles/<skin>/sidebar.css`); each element carries a stable `data-slot`
+  (and the menu button a `data-active`) that the CSS targets.
 
   ## Simplifications (vs. shadcn's Sidebar)
 
@@ -43,8 +46,6 @@ defmodule Shadix.Components.Sidebar do
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
   @doc """
   The flex wrapper that owns sidebar open/closed state.
 
@@ -59,12 +60,13 @@ defmodule Shadix.Components.Sidebar do
 
   def sidebar_provider(assigns) do
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <div
       id={@id}
       data-slot="sidebar-provider"
       phx-hook="ShadixSidebar"
       data-state="expanded"
-      class={cn(["group/sidebar flex min-h-svh w-full", @class])}
+      class={["group/sidebar", @class]}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -86,13 +88,7 @@ defmodule Shadix.Components.Sidebar do
     ~H"""
     <aside
       data-slot="sidebar"
-      class={
-        cn([
-          "flex h-svh shrink-0 flex-col overflow-hidden border-r bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-linear motion-reduce:transition-none",
-          "w-64 group-data-[state=collapsed]/sidebar:w-0",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -117,12 +113,7 @@ defmodule Shadix.Components.Sidebar do
       data-slot="sidebar-trigger"
       aria-label="Toggle sidebar"
       aria-expanded="true"
-      class={
-        cn([
-          "inline-flex size-7 items-center justify-center rounded-md text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
       <%= if @inner_block != [] do %>
@@ -155,7 +146,7 @@ defmodule Shadix.Components.Sidebar do
     ~H"""
     <div
       data-slot="sidebar-header"
-      class={cn(["flex flex-col gap-2 p-2", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -172,7 +163,7 @@ defmodule Shadix.Components.Sidebar do
     ~H"""
     <div
       data-slot="sidebar-content"
-      class={cn(["flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-2", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -189,7 +180,7 @@ defmodule Shadix.Components.Sidebar do
     ~H"""
     <div
       data-slot="sidebar-footer"
-      class={cn(["flex flex-col gap-2 p-2", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -206,7 +197,7 @@ defmodule Shadix.Components.Sidebar do
     ~H"""
     <div
       data-slot="sidebar-group"
-      class={cn(["relative flex w-full min-w-0 flex-col p-2", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -223,12 +214,7 @@ defmodule Shadix.Components.Sidebar do
     ~H"""
     <div
       data-slot="sidebar-group-label"
-      class={
-        cn([
-          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -245,7 +231,7 @@ defmodule Shadix.Components.Sidebar do
     ~H"""
     <ul
       data-slot="sidebar-menu"
-      class={cn(["flex w-full min-w-0 flex-col gap-1", @class])}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -262,7 +248,7 @@ defmodule Shadix.Components.Sidebar do
     ~H"""
     <li
       data-slot="sidebar-menu-item"
-      class={cn(["group/menu-item relative", @class])}
+      class={["group/menu-item relative", @class]}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -286,12 +272,7 @@ defmodule Shadix.Components.Sidebar do
     <a
       data-slot="sidebar-menu-button"
       data-active={to_string(@active)}
-      class={
-        cn([
-          "flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
diff --git a/lib/shadix/components/slider.ex b/lib/shadix/components/slider.ex
index 4d0bbac..1af11bf 100644
--- a/lib/shadix/components/slider.ex
+++ b/lib/shadix/components/slider.ex
@@ -1,27 +1,22 @@
 defmodule Shadix.Components.Slider do
   @moduledoc """
-  Slider component adapted from shadcn/ui (new-york-v4) to a native
-  `<input type="range">`.
+  Slider component adapted from shadcn/ui to a native `<input type="range">`.
 
   Field-aware: the current value is read from the bound `Phoenix.HTML.FormField`.
   shadcn builds its slider from Radix markup (track + range + thumb); here the
-  same look is reconstructed on the native element with `appearance-none` plus
-  Tailwind arbitrary variants targeting the browser's slider track/thumb
-  pseudo-elements (`::-webkit-slider-runnable-track`, `::-webkit-slider-thumb`,
-  `::-moz-range-track`, `::-moz-range-thumb`). No JavaScript.
+  same look is reconstructed on the native element via the browser's slider
+  track/thumb pseudo-elements (`::-webkit-slider-runnable-track`,
+  `::-webkit-slider-thumb`, `::-moz-range-track`, `::-moz-range-thumb`). No
+  JavaScript.
+
+  Styling is delivered by the colocated `priv/styles/<skin>/slider.css` skin via
+  the `data-slot="slider"` attribute. Caller-supplied `class` is appended last;
+  Tailwind cascade layers ensure it wins over the defaults.
   """
   use Phoenix.Component
 
-  import Shadix.Cn
   import Shadix.Form
 
-  @base "w-full cursor-pointer appearance-none bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none " <>
-          "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:w-full [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-muted " <>
-          "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:w-full [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted " <>
-          "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:ring-ring/50 [&::-webkit-slider-thumb]:transition-[box-shadow] hover:[&::-webkit-slider-thumb]:ring-4 focus-visible:[&::-webkit-slider-thumb]:ring-4 " <>
-          "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-primary [&::-moz-range-thumb]:bg-background [&::-moz-range-thumb]:shadow-sm [&::-moz-range-thumb]:ring-ring/50 [&::-moz-range-thumb]:transition-[box-shadow] hover:[&::-moz-range-thumb]:ring-4 focus-visible:[&::-moz-range-thumb]:ring-4 " <>
-          "aria-invalid:[&::-webkit-slider-thumb]:border-destructive aria-invalid:[&::-moz-range-thumb]:border-destructive"
-
   attr(:field, Phoenix.HTML.FormField, required: true)
   attr(:min, :integer, default: 0)
   attr(:max, :integer, default: 100)
@@ -33,9 +28,9 @@ defmodule Shadix.Components.Slider do
   def slider(assigns) do
     %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)
     assigns = assign(assigns, id: id, name: name, value: value, errors: errors)
-    assigns = assign(assigns, :computed_class, cn([@base, assigns.class]))
 
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <input
       type="range"
       data-slot="slider"
@@ -47,7 +42,7 @@ defmodule Shadix.Components.Slider do
       step={@step}
       aria-invalid={@errors != [] && "true"}
       aria-describedby={(@errors != [] && "#{@id}-error") || nil}
-      class={@computed_class}
+      class={@class}
       {@rest}
     />
     <p
diff --git a/lib/shadix/components/sonner.ex b/lib/shadix/components/sonner.ex
index 590b06f..e2cf150 100644
--- a/lib/shadix/components/sonner.ex
+++ b/lib/shadix/components/sonner.ex
@@ -32,6 +32,11 @@ defmodule Shadix.Components.Sonner do
   `role="alertdialog"` with an `aria-live="assertive"` announcement channel.
   All other variants use `role="dialog"` with an `aria-live="polite"` channel.
 
+  Each element carries a stable `data-slot` (and the toast a `data-variant`/
+  `data-state`); styling lives in the colocated `priv/styles/<skin>/sonner.css`,
+  selected by those attributes, with the caller's `class` appended last so the
+  Tailwind cascade layers let it win over the defaults.
+
   ## Accessibility
 
   Each toast is `role="dialog"` or `role="alertdialog"`, `aria-modal="false"`,
@@ -53,8 +58,6 @@ defmodule Shadix.Components.Sonner do
   """
   use Phoenix.LiveComponent
 
-  import Shadix.Cn
-
   @high_priority_variants ~w(error warning)
 
   @impl true
@@ -97,16 +100,17 @@ defmodule Shadix.Components.Sonner do
   @impl true
   def render(assigns) do
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <div id={@id} data-slot="toaster" phx-hook="ShadixSonner" phx-target={@myself}>
       <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">{@polite}</div>
       <div class="sr-only" role="alert" aria-live="assertive" aria-atomic="true">{@assertive}</div>
       <ol
         id={"#{@id}-list"}
+        data-slot="toaster-list"
         role="region"
         aria-label="Notifications"
         tabindex="-1"
         phx-update="stream"
-        class="fixed bottom-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:bottom-4 sm:right-4 sm:top-auto sm:flex-col md:max-w-[420px]"
       >
         <.toast
           :for={{dom_id, toast} <- @streams.toasts}
@@ -214,25 +218,14 @@ defmodule Shadix.Components.Sonner do
       aria-labelledby={@title_id}
       aria-describedby={@desc_id}
       tabindex="0"
-      class={
-        cn([
-          "group pointer-events-auto relative flex w-full list-none items-start gap-2 rounded-md border p-4 pr-8 shadow-lg outline-none",
-          "transition-all duration-200 ease-out motion-reduce:transition-none",
-          "data-[state=open]:translate-y-0 data-[state=open]:opacity-100",
-          "data-[state=closed]:translate-y-2 data-[state=closed]:opacity-0",
-          "focus-visible:ring-[3px] focus-visible:ring-ring/50",
-          variant_class(@variant),
-          @class
-        ])
-      }
+      class={["group", @class]}
       {@rest}
     >
-      <div class="grid gap-1"><div :if={@title} id={@title_id} data-slot="toast-title" class="text-sm font-semibold">{@title}</div><div :if={@message} id={@desc_id} data-slot="toast-description" class="text-sm opacity-90">{@message}</div>{render_slot(@inner_block)}</div>
+      <div class="grid gap-1"><div :if={@title} id={@title_id} data-slot="toast-title">{@title}</div><div :if={@message} id={@desc_id} data-slot="toast-description">{@message}</div>{render_slot(@inner_block)}</div>
       <button
         type="button"
         data-slot="toast-close"
         aria-label="Close notification"
-        class="absolute right-2 top-2 rounded-md p-1 opacity-60 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -253,15 +246,4 @@ defmodule Shadix.Components.Sonner do
     </li>
     """
   end
-
-  defp variant_class("success"), do: "bg-background text-foreground border-green-500/50"
-  defp variant_class("info"), do: "bg-background text-foreground border-blue-500/50"
-  defp variant_class("warning"), do: "bg-background text-foreground border-yellow-500/50"
-  # White text on the destructive surface (matching the button's destructive
-  # variant). The theme's `--destructive-foreground` is a dark red in dark mode,
-  # which renders unreadably on the light-salmon dark-mode `--destructive`.
-  defp variant_class("error"),
-    do: "bg-destructive text-white border-destructive dark:bg-destructive/60"
-
-  defp variant_class(_), do: "bg-background text-foreground border"
 end
diff --git a/lib/shadix/components/switch.ex b/lib/shadix/components/switch.ex
index a1946ff..7969149 100644
--- a/lib/shadix/components/switch.ex
+++ b/lib/shadix/components/switch.ex
@@ -4,20 +4,17 @@ defmodule Shadix.Components.Switch do
 
   A field-aware boolean control rendered as a native checkbox styled into a
   pill-shaped switch. Like the checkbox control, it emits a hidden `"false"`
-  input first so an unchecked switch still submits a value. The thumb is drawn
-  with a `before:` pseudo-element and translated on `checked:` — no JavaScript,
-  no `phx-*` bindings, no Radix `data-state` behavior.
+  input first so an unchecked switch still submits a value — no JavaScript,
+  no `phx-*` bindings.
 
-  Caller-supplied `class` is appended last; Tailwind cascade layers ensure it
-  wins over the defaults.
+  Styling is delivered by the colocated `priv/styles/<skin>/switch.css` skin
+  via the `data-slot="switch"` attribute. Caller-supplied `class` is appended
+  last; Tailwind cascade layers ensure it wins over the defaults.
   """
   use Phoenix.Component
 
-  import Shadix.Cn
   import Shadix.Form
 
-  @base "peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer appearance-none items-center rounded-full border border-transparent bg-input shadow-xs transition-all motion-reduce:transition-none outline-none before:pointer-events-none before:absolute before:top-1/2 before:left-0.5 before:-translate-y-1/2 before:size-4 before:rounded-full before:bg-background before:transition-transform before:motion-reduce:transition-none before:content-[''] checked:bg-primary dark:checked:bg-primary checked:before:translate-x-4 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/80 dark:aria-invalid:ring-destructive/40"
-
   attr(:field, Phoenix.HTML.FormField, required: true)
   attr(:class, :string, default: nil)
   attr(:rest, :global, include: ~w(disabled required readonly autofocus))
@@ -26,9 +23,9 @@ defmodule Shadix.Components.Switch do
     %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)
     assigns = assign(assigns, id: id, name: name, value: value, errors: errors)
     assigns = assign(assigns, :checked, Phoenix.HTML.Form.normalize_value("checkbox", value))
-    assigns = assign(assigns, :computed_class, cn([@base, assigns.class]))
 
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <input type="hidden" name={@name} value="false" />
     <input
       type="checkbox"
@@ -40,7 +37,7 @@ defmodule Shadix.Components.Switch do
       checked={@checked}
       aria-invalid={(@errors != [] && "true") || nil}
       aria-describedby={(@errors != [] && "#{@id}-error") || nil}
-      class={@computed_class}
+      class={["group/switch peer", @class]}
       {@rest}
     />
     <p
diff --git a/lib/shadix/components/table.ex b/lib/shadix/components/table.ex
index 37abf00..7cbd6bd 100644
--- a/lib/shadix/components/table.ex
+++ b/lib/shadix/components/table.ex
@@ -5,29 +5,21 @@ defmodule Shadix.Components.Table do
   Provides `table/1` (wrapped in a scroll container) along with
   `table_header/1`, `table_body/1`, `table_footer/1`, `table_row/1`,
   `table_head/1`, `table_cell/1`, and `table_caption/1`.
+
+  Styling is delivered via colocated CSS keyed off each element's
+  `data-slot` attribute.
   """
   use Phoenix.Component
-  import Shadix.Cn
-
-  @table "w-full caption-bottom text-sm"
-  @table_header "[&_tr]:border-b"
-  @table_body "[&_tr:last-child]:border-0"
-  @table_footer "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0"
-  @table_row "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted"
-  @table_head "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"
-  @table_cell "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"
-  @table_caption "mt-4 text-sm text-muted-foreground"
 
   attr(:class, :string, default: nil)
   attr(:rest, :global)
   slot(:inner_block, required: true)
 
   def table(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@table, assigns.class]))
-
     ~H"""
-    <div data-slot="table-container" class="relative w-full overflow-x-auto">
-      <table data-slot="table" class={@computed_class} {@rest}>
+    <%!-- shadix:colocated-css --%>
+    <div data-slot="table-container">
+      <table data-slot="table" class={@class} {@rest}>
         {render_slot(@inner_block)}
       </table>
     </div>
@@ -39,10 +31,8 @@ defmodule Shadix.Components.Table do
   slot(:inner_block, required: true)
 
   def table_header(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@table_header, assigns.class]))
-
     ~H"""
-    <thead data-slot="table-header" class={@computed_class} {@rest}>
+    <thead data-slot="table-header" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </thead>
     """
@@ -53,10 +43,8 @@ defmodule Shadix.Components.Table do
   slot(:inner_block, required: true)
 
   def table_body(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@table_body, assigns.class]))
-
     ~H"""
-    <tbody data-slot="table-body" class={@computed_class} {@rest}>
+    <tbody data-slot="table-body" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </tbody>
     """
@@ -67,10 +55,8 @@ defmodule Shadix.Components.Table do
   slot(:inner_block, required: true)
 
   def table_footer(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@table_footer, assigns.class]))
-
     ~H"""
-    <tfoot data-slot="table-footer" class={@computed_class} {@rest}>
+    <tfoot data-slot="table-footer" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </tfoot>
     """
@@ -81,10 +67,8 @@ defmodule Shadix.Components.Table do
   slot(:inner_block, required: true)
 
   def table_row(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@table_row, assigns.class]))
-
     ~H"""
-    <tr data-slot="table-row" class={@computed_class} {@rest}>
+    <tr data-slot="table-row" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </tr>
     """
@@ -95,10 +79,8 @@ defmodule Shadix.Components.Table do
   slot(:inner_block, required: true)
 
   def table_head(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@table_head, assigns.class]))
-
     ~H"""
-    <th data-slot="table-head" class={@computed_class} {@rest}>
+    <th data-slot="table-head" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </th>
     """
@@ -109,10 +91,8 @@ defmodule Shadix.Components.Table do
   slot(:inner_block, required: true)
 
   def table_cell(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@table_cell, assigns.class]))
-
     ~H"""
-    <td data-slot="table-cell" class={@computed_class} {@rest}>
+    <td data-slot="table-cell" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </td>
     """
@@ -123,10 +103,8 @@ defmodule Shadix.Components.Table do
   slot(:inner_block, required: true)
 
   def table_caption(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@table_caption, assigns.class]))
-
     ~H"""
-    <caption data-slot="table-caption" class={@computed_class} {@rest}>
+    <caption data-slot="table-caption" class={@class} {@rest}>
       {render_slot(@inner_block)}
     </caption>
     """
diff --git a/lib/shadix/components/tabs.ex b/lib/shadix/components/tabs.ex
index 374d3a3..519f600 100644
--- a/lib/shadix/components/tabs.ex
+++ b/lib/shadix/components/tabs.ex
@@ -15,13 +15,15 @@ defmodule Shadix.Components.Tabs do
   focus with activation on focus for keyboard a11y.
 
   data-slots: `tabs`, `tabs-list`, `tabs-trigger`, `tabs-content`.
+
+  Styling is delivered by the colocated `priv/styles/<skin>/tabs.css` rules
+  (keyed on each element's `data-slot`); the component itself carries only the
+  stable data attributes plus any caller-supplied `class`.
   """
   use Phoenix.Component
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
-
   @doc """
   The tabs root. `:default` is the value of the tab that is active on first
   render; descendant triggers/contents take this `:id` to wire ids together.
@@ -34,13 +36,8 @@ defmodule Shadix.Components.Tabs do
 
   def tabs(assigns) do
     ~H"""
-    <div
-      id={@id}
-      data-slot="tabs"
-      data-tabs-default={@default}
-      class={cn(["flex flex-col gap-2", @class])}
-      {@rest}
-    >
+    <%!-- shadix:colocated-css --%>
+    <div id={@id} data-slot="tabs" data-tabs-default={@default} class={@class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -62,12 +59,7 @@ defmodule Shadix.Components.Tabs do
       role="tablist"
       data-slot="tabs-list"
       phx-hook="ShadixTabs"
-      class={
-        cn([
-          "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -103,12 +95,7 @@ defmodule Shadix.Components.Tabs do
       aria-controls={"#{@id}-panel-#{@value}"}
       tabindex={if @active, do: "0", else: "-1"}
       phx-click={select_tab(@id, @value)}
-      class={
-        cn([
-          "data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 dark:text-muted-foreground dark:hover:text-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all hover:text-foreground focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-          @class
-        ])
-      }
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -139,7 +126,7 @@ defmodule Shadix.Components.Tabs do
       data-tabs-value={@value}
       aria-labelledby={"#{@id}-tab-#{@value}"}
       tabindex="0"
-      class={cn(["flex-1 outline-none", !@active && "hidden", @class])}
+      class={[!@active && "hidden", @class]}
       {@rest}
     >
       {render_slot(@inner_block)}
diff --git a/lib/shadix/components/textarea.ex b/lib/shadix/components/textarea.ex
index ba63678..967745e 100644
--- a/lib/shadix/components/textarea.ex
+++ b/lib/shadix/components/textarea.ex
@@ -1,16 +1,14 @@
 defmodule Shadix.Components.Textarea do
   @moduledoc """
-  Textarea component translated from the shadcn-ui "textarea" component.
+  Textarea component translated from shadcn/ui.
 
   Renders a `<textarea>` element with `data-slot="textarea"`. Supports an
-  optional `inner_block` slot to provide initial text content.
+  optional `inner_block` slot to provide initial text content. No variants.
+  Styling is delivered via colocated CSS (`priv/styles/<skin>/textarea.css`);
+  caller-supplied `class` is appended last so it can override defaults.
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
-  @base "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40"
-
   attr(:class, :string, default: nil)
 
   attr(:rest, :global,
@@ -20,11 +18,9 @@ defmodule Shadix.Components.Textarea do
   slot(:inner_block)
 
   def textarea(assigns) do
-    class = cn([@base, assigns.class])
-    assigns = assign(assigns, :computed_class, class)
-
     ~H"""
-    <textarea data-slot="textarea" class={@computed_class} {@rest}>{render_slot(@inner_block)}</textarea>
+    <%!-- shadix:colocated-css --%>
+    <textarea data-slot="textarea" class={@class} {@rest}>{render_slot(@inner_block)}</textarea>
     """
   end
 end
diff --git a/lib/shadix/components/toggle.ex b/lib/shadix/components/toggle.ex
index 7a2cd86..fdabe80 100644
--- a/lib/shadix/components/toggle.ex
+++ b/lib/shadix/components/toggle.ex
@@ -1,36 +1,21 @@
 defmodule Shadix.Components.Toggle do
   @moduledoc """
-  Toggle component translated from shadcn/ui (new-york-v4).
+  Toggle component translated from shadcn/ui.
 
   A two-state toggle button. Unlike a native checkbox, the pressed state lives in
-  ARIA (`aria-pressed`) and a `data-state` of `"on"`/`"off"` that the `cva` styles
-  key off of (the on-state gets `bg-accent`). It renders a plain
+  ARIA (`aria-pressed`) and a `data-state` of `"on"`/`"off"`. It renders a plain
   `<button type="button">` and is *uncontrolled*: `@pressed` only seeds the initial
   markup. The small `ShadixToggle` hook (assets/ts/toggle.ts) flips both
   `aria-pressed` and `data-state` on click by reading the current DOM value, so it
   stays independent of the server-rendered initial state.
 
-  Caller-supplied `class` is appended last; Tailwind cascade layers ensure it wins
-  over the defaults.
+  Styling is delivered via colocated CSS keyed off the stable `data-slot`,
+  `data-variant`, and `data-size` attributes; only the `group/toggle` marker is
+  carried inline. Caller-supplied `class` is appended last; Tailwind cascade layers
+  ensure it wins over the defaults.
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
-  @base "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 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-
-  @variants %{
-    "default" => "bg-transparent",
-    "outline" =>
-      "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
-  }
-
-  @sizes %{
-    "default" => "h-9 min-w-9 px-2",
-    "sm" => "h-8 min-w-8 px-1.5",
-    "lg" => "h-10 min-w-10 px-2.5"
-  }
-
   @doc """
   Renders an uncontrolled two-state toggle button.
 
@@ -45,21 +30,17 @@ defmodule Shadix.Components.Toggle do
   slot(:inner_block, required: true)
 
   def toggle(assigns) do
-    assigns =
-      assign(
-        assigns,
-        :computed_class,
-        cn([@base, @variants[assigns.variant], @sizes[assigns.size], assigns.class])
-      )
-
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <button
       type="button"
       data-slot="toggle"
+      data-variant={@variant}
+      data-size={@size}
       aria-pressed={to_string(@pressed)}
       data-state={if @pressed, do: "on", else: "off"}
       phx-hook="ShadixToggle"
-      class={@computed_class}
+      class={["group/toggle", @class]}
       {@rest}
     >
       {render_slot(@inner_block)}
diff --git a/lib/shadix/components/toggle_group.ex b/lib/shadix/components/toggle_group.ex
index 2b143f2..78c7cc8 100644
--- a/lib/shadix/components/toggle_group.ex
+++ b/lib/shadix/components/toggle_group.ex
@@ -1,6 +1,6 @@
 defmodule Shadix.Components.ToggleGroup do
   @moduledoc """
-  Toggle group component translated from shadcn/ui (new-york-v4).
+  Toggle group component translated from shadcn/ui.
 
   A set of two-state toggle buttons. Unlike the React/Radix original, selection
   state is uncontrolled and managed entirely on the client by the `ShadixToggleGroup`
@@ -11,41 +11,20 @@ defmodule Shadix.Components.ToggleGroup do
       others off; clicking the active item again turns it off.
     * `"multiple"` — each item toggles independently.
 
-  Item visuals reuse the toggle (`toggle.tsx`) classes, keyed off `data-state=on`.
-  There is no server round-trip; the hook is needed because plain
-  `Phoenix.LiveView.JS` cannot read/flip a boolean state attribute across siblings.
+  Item visuals reuse the toggle styling, keyed off `data-state=on`. There is no
+  server round-trip; the hook is needed because plain `Phoenix.LiveView.JS` cannot
+  read/flip a boolean state attribute across siblings.
 
     * `toggle_group/1` — `role="group"` container carrying the hook and `data-type`.
     * `toggle_group_item/1` — a `<button type="button">` toggle.
 
-  Caller-supplied `class` is appended last; Tailwind cascade layers ensure it wins
-  over the defaults.
+  Styling is delivered via colocated CSS keyed off the stable `data-slot`,
+  `data-variant`, and `data-size` attributes; only the `group/toggle-group` marker is
+  carried inline. Caller-supplied `class` is appended last; Tailwind cascade layers
+  ensure it wins over the defaults.
   """
   use Phoenix.Component
 
-  import Shadix.Cn
-
-  @group_base "group/toggle-group flex w-fit items-center rounded-md"
-
-  # Lifted from toggle.tsx (`toggleVariants` base). The toggle-group item
-  # overrides (@item_overrides) are appended AFTER the size classes so that
-  # `min-w-0`/`px-3` win, mirroring the shadcn class order in toggle-group.tsx.
-  @item_base "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 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-
-  @item_overrides "min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10"
-
-  @item_variants %{
-    "default" => "bg-transparent",
-    "outline" =>
-      "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
-  }
-
-  @item_sizes %{
-    "default" => "h-9 min-w-9 px-2",
-    "sm" => "h-8 min-w-8 px-1.5",
-    "lg" => "h-10 min-w-10 px-2.5"
-  }
-
   @doc """
   Renders the toggle-group container.
 
@@ -61,9 +40,8 @@ defmodule Shadix.Components.ToggleGroup do
   slot(:inner_block, required: true)
 
   def toggle_group(assigns) do
-    assigns = assign(assigns, :computed_class, cn([@group_base, assigns.class]))
-
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <div
       id={@id}
       role="group"
@@ -72,7 +50,7 @@ defmodule Shadix.Components.ToggleGroup do
       data-variant={@variant}
       data-size={@size}
       phx-hook="ShadixToggleGroup"
-      class={@computed_class}
+      class={["group/toggle-group", @class]}
       {@rest}
     >
       {render_slot(@inner_block)}
@@ -95,19 +73,6 @@ defmodule Shadix.Components.ToggleGroup do
   slot(:inner_block, required: true)
 
   def toggle_group_item(assigns) do
-    assigns =
-      assign(
-        assigns,
-        :computed_class,
-        cn([
-          @item_base,
-          @item_variants[assigns.variant],
-          @item_sizes[assigns.size],
-          @item_overrides,
-          assigns.class
-        ])
-      )
-
     ~H"""
     <button
       type="button"
@@ -117,7 +82,7 @@ defmodule Shadix.Components.ToggleGroup do
       data-size={@size}
       aria-pressed="false"
       data-state="off"
-      class={@computed_class}
+      class={@class}
       {@rest}
     >
       {render_slot(@inner_block)}
diff --git a/lib/shadix/components/tooltip.ex b/lib/shadix/components/tooltip.ex
index 9107cd2..80392c1 100644
--- a/lib/shadix/components/tooltip.ex
+++ b/lib/shadix/components/tooltip.ex
@@ -16,13 +16,17 @@ defmodule Shadix.Components.Tooltip do
 
   Trigger and content ids are derived from the required `:id` so `data-trigger`
   and the JS targets line up stably.
+
+  Each element carries a stable `data-slot` for styling/targeting. Styling lives
+  in the colocated `priv/styles/<skin>/tooltip.css` (selected by `data-slot`);
+  caller-supplied `class` is appended last so Tailwind cascade layers ensure it
+  wins over the defaults. The `hidden fixed left-0 top-0` markers on the content
+  stay inline because they drive the JS show/hide and Floating UI positioning.
   """
   use Phoenix.Component
 
   alias Phoenix.LiveView.JS
 
-  import Shadix.Cn
-
   @doc """
   Renders a tooltip with a `:trigger` slot and the tooltip text as the
   `inner_block`.
@@ -40,6 +44,7 @@ defmodule Shadix.Components.Tooltip do
 
   def tooltip(assigns) do
     ~H"""
+    <%!-- shadix:colocated-css --%>
     <span id={"#{@id}-trigger"} data-slot="tooltip-trigger" class="contents">
       {render_slot(@trigger)}
     </span>
@@ -51,12 +56,7 @@ defmodule Shadix.Components.Tooltip do
       data-trigger={"#{@id}-trigger"}
       data-on-open={show_tooltip(@id)}
       data-on-close={hide_tooltip(@id)}
-      class={
-        cn([
-          "hidden fixed left-0 top-0 z-50 w-fit rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground",
-          @class
-        ])
-      }
+      class={["hidden fixed left-0 top-0", @class]}
     >
       {render_slot(@inner_block)}
     </div>
diff --git a/priv/registry/accordion.json b/priv/registry/accordion.json
index 75c4cbd..ccc11e3 100644
--- a/priv/registry/accordion.json
+++ b/priv/registry/accordion.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Accordion do\n  @moduledoc ~S\"\"\"\n  A vertically stacked set of collapsible sections, built purely on client-side\n  JS commands and CSS — no LiveView hook and no server round-trip.\n\n  Each trigger's `phx-click` flips a `data-state` of `\"open\"`/`\"closed\"` (and the\n  matching `aria-expanded`) on both itself and its paired content panel. The\n  panel animates open/closed in pure CSS using the `grid-template-rows`\n  `0fr → 1fr` technique: the content lives inside a grid whose single row\n  transitions between `0fr` (collapsed) and `1fr` (expanded), with the inner\n  wrapper clipping overflow. This animates the panel's height smoothly without\n  anyone having to measure it, and degrades to an instant toggle under\n  `prefers-reduced-motion`.\n\n  Because the collapsed panel stays in the DOM (so it can animate) rather than\n  being `display:none`, it carries `inert` while closed to keep it out of the\n  tab order and the accessibility tree; the same `phx-click` toggles `inert`.\n  The trigger's `data-state` also drives the chevron rotation via the\n  `[&[data-state=open]>svg]:rotate-180` utility lifted from shadcn.\n\n  Ids wire the pieces together: `accordion_item/1` takes a unique `:id`,\n  `accordion_trigger/1` and `accordion_content/1` take that same id and derive\n  `\"#{id}-trigger\"` / `\"#{id}-content\"` so `aria-controls` and the toggle target\n  line up stably.\n\n  NOTE: `type=\"single\"` auto-closing of sibling items is simplified — items\n  behave as independent toggles in this v1, so `type` is currently advisory and\n  rendered as a `data-type` hint on the root.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders the accordion root, a vertical stack of `accordion_item/1`s.\n\n  `:type` is advisory in this v1 (see moduledoc): both `\"single\"` and\n  `\"multiple\"` render independent toggles and the value is exposed as\n  `data-type` for styling/JS hooks.\n  \"\"\"\n  attr(:type, :string, default: \"single\", values: ~w(single multiple))\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def accordion(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"accordion\" data-type={@type} class={cn([@class])} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A single accordion item; wraps a trigger and its content.\n\n  `:id` must be unique per item and is reused by `accordion_trigger/1` and\n  `accordion_content/1` to wire `aria-controls` and the toggle target.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def accordion_item(assigns) do\n    ~H\"\"\"\n    <div id={@id} data-slot=\"accordion-item\" class={cn([\"border-b last:border-b-0\", @class])} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  The clickable header of an item. `:id` is the *item* id.\n\n  Renders a `<button id=\"#{id}-trigger\">` with `aria-controls=\"#{id}-content\"`,\n  `aria-expanded` and a `data-state` that toggle on click, plus a chevron SVG\n  that rotates when `data-state=\"open\"`. The same `phx-click` flips the paired\n  content panel's `data-state` (which drives the CSS open/close animation) and\n  its `inert` attribute.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def accordion_trigger(assigns) do\n    ~H\"\"\"\n    <h3 class=\"flex\" data-slot=\"accordion-header\">\n      <button\n        type=\"button\"\n        id={\"#{@id}-trigger\"}\n        data-slot=\"accordion-trigger\"\n        data-state=\"closed\"\n        aria-expanded=\"false\"\n        aria-controls={\"#{@id}-content\"}\n        phx-click={\n          JS.toggle_attribute({\"aria-expanded\", \"true\", \"false\"}, to: \"##{@id}-trigger\")\n          |> JS.toggle_attribute({\"data-state\", \"open\", \"closed\"}, to: \"##{@id}-trigger\")\n          |> JS.toggle_attribute({\"data-state\", \"open\", \"closed\"}, to: \"##{@id}-content\")\n          |> JS.toggle_attribute({\"inert\", \"true\"}, to: \"##{@id}-content\")\n        }\n        class={\n          cn([\n            \"flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180\",\n            @class\n          ])\n        }\n        {@rest}\n      >\n        {render_slot(@inner_block)}\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200 motion-reduce:transition-none\"\n        >\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </button>\n    </h3>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  The collapsible body of an item. `:id` is the *item* id.\n\n  Renders `<div id=\"#{id}-content\" role=\"region\">`, collapsed (`data-state=\"closed\"`\n  and `inert`) by default. The panel animates open/closed in pure CSS via the\n  `grid-template-rows` `0fr → 1fr` trick keyed off `data-state`; the inner\n  `overflow-hidden` wrapper clips the content as the row collapses. Under\n  `prefers-reduced-motion` the transition is dropped and it toggles instantly.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def accordion_content(assigns) do\n    ~H\"\"\"\n    <div\n      id={\"#{@id}-content\"}\n      data-slot=\"accordion-content\"\n      data-state=\"closed\"\n      role=\"region\"\n      aria-labelledby={\"#{@id}-trigger\"}\n      inert\n      class=\"grid grid-rows-[0fr] text-sm transition-[grid-template-rows] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] data-[state=open]:grid-rows-[1fr] motion-reduce:transition-none\"\n    >\n      <div class=\"overflow-hidden\">\n        <div class={cn([\"pt-0 pb-4\", @class])}>\n          {render_slot(@inner_block)}\n        </div>\n      </div>\n    </div>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Accordion do\n  @moduledoc ~S\"\"\"\n  A vertically stacked set of collapsible sections, built purely on client-side\n  JS commands and CSS — no LiveView hook and no server round-trip.\n\n  Each trigger's `phx-click` flips a `data-state` of `\"open\"`/`\"closed\"` (and the\n  matching `aria-expanded`) on both itself and its paired content panel. The\n  panel animates open/closed in pure CSS using the `grid-template-rows`\n  `0fr → 1fr` technique: the content lives inside a grid whose single row\n  transitions between `0fr` (collapsed) and `1fr` (expanded), with the inner\n  wrapper clipping overflow. This animates the panel's height smoothly without\n  anyone having to measure it, and degrades to an instant toggle under\n  `prefers-reduced-motion`. (This differs from shadcn, which animates via a\n  Radix-supplied `--radix-accordion-content-height` variable; shadix derives the\n  height purely in CSS, so those grid-rows utilities are load-bearing behavior\n  and stay inline.)\n\n  Each element carries a stable `data-slot` for styling/targeting; the skin lives\n  in the colocated `priv/styles/<skin>/accordion.css` (selected by `data-slot`)\n  and the caller-supplied `class` is appended last so Tailwind cascade layers let\n  it win over the defaults.\n\n  Because the collapsed panel stays in the DOM (so it can animate) rather than\n  being `display:none`, it carries `inert` while closed to keep it out of the\n  tab order and the accessibility tree; the same `phx-click` toggles `inert`.\n  The trigger's `data-state` also drives the chevron rotation via the\n  `[&[data-state=open]>svg]:rotate-180` utility lifted from shadcn.\n\n  Ids wire the pieces together: `accordion_item/1` takes a unique `:id`,\n  `accordion_trigger/1` and `accordion_content/1` take that same id and derive\n  `\"#{id}-trigger\"` / `\"#{id}-content\"` so `aria-controls` and the toggle target\n  line up stably.\n\n  NOTE: `type=\"single\"` auto-closing of sibling items is simplified — items\n  behave as independent toggles in this v1, so `type` is currently advisory and\n  rendered as a `data-type` hint on the root.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  @doc \"\"\"\n  Renders the accordion root, a vertical stack of `accordion_item/1`s.\n\n  `:type` is advisory in this v1 (see moduledoc): both `\"single\"` and\n  `\"multiple\"` render independent toggles and the value is exposed as\n  `data-type` for styling/JS hooks.\n  \"\"\"\n  attr(:type, :string, default: \"single\", values: ~w(single multiple))\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def accordion(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div data-slot=\"accordion\" data-type={@type} class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A single accordion item; wraps a trigger and its content.\n\n  `:id` must be unique per item and is reused by `accordion_trigger/1` and\n  `accordion_content/1` to wire `aria-controls` and the toggle target.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def accordion_item(assigns) do\n    ~H\"\"\"\n    <div id={@id} data-slot=\"accordion-item\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  The clickable header of an item. `:id` is the *item* id.\n\n  Renders a `<button id=\"#{id}-trigger\">` with `aria-controls=\"#{id}-content\"`,\n  `aria-expanded` and a `data-state` that toggle on click, plus a chevron SVG\n  that rotates when `data-state=\"open\"`. The same `phx-click` flips the paired\n  content panel's `data-state` (which drives the CSS open/close animation) and\n  its `inert` attribute.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def accordion_trigger(assigns) do\n    ~H\"\"\"\n    <h3 class=\"flex\" data-slot=\"accordion-header\">\n      <button\n        type=\"button\"\n        id={\"#{@id}-trigger\"}\n        data-slot=\"accordion-trigger\"\n        data-state=\"closed\"\n        aria-expanded=\"false\"\n        aria-controls={\"#{@id}-content\"}\n        phx-click={\n          JS.toggle_attribute({\"aria-expanded\", \"true\", \"false\"}, to: \"##{@id}-trigger\")\n          |> JS.toggle_attribute({\"data-state\", \"open\", \"closed\"}, to: \"##{@id}-trigger\")\n          |> JS.toggle_attribute({\"data-state\", \"open\", \"closed\"}, to: \"##{@id}-content\")\n          |> JS.toggle_attribute({\"inert\", \"true\"}, to: \"##{@id}-content\")\n        }\n        class={[\"[&[data-state=open]>svg]:rotate-180\", @class]}\n        {@rest}\n      >\n        {render_slot(@inner_block)}\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          data-slot=\"accordion-trigger-icon\"\n          class=\"pointer-events-none translate-y-0.5 transition-transform duration-200 motion-reduce:transition-none\"\n        >\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </button>\n    </h3>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  The collapsible body of an item. `:id` is the *item* id.\n\n  Renders `<div id=\"#{id}-content\" role=\"region\">`, collapsed (`data-state=\"closed\"`\n  and `inert`) by default. The panel animates open/closed in pure CSS via the\n  `grid-template-rows` `0fr → 1fr` trick keyed off `data-state`; the inner\n  `overflow-hidden` wrapper clips the content as the row collapses. Under\n  `prefers-reduced-motion` the transition is dropped and it toggles instantly.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def accordion_content(assigns) do\n    ~H\"\"\"\n    <div\n      id={\"#{@id}-content\"}\n      data-slot=\"accordion-content\"\n      data-state=\"closed\"\n      role=\"region\"\n      aria-labelledby={\"#{@id}-trigger\"}\n      inert\n      class=\"grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] data-[state=open]:grid-rows-[1fr] motion-reduce:transition-none\"\n    >\n      <div class=\"overflow-hidden\">\n        <div data-slot=\"accordion-content-inner\" class={@class}>\n          {render_slot(@inner_block)}\n        </div>\n      </div>\n    </div>\n    \"\"\"\n  end\nend\n",
       "path": "accordion.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "accordion",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"accordion\"] {\n    @apply flex w-full flex-col;\n  }\n\n  [data-slot=\"accordion-item\"] {\n    @apply not-last:border-b;\n  }\n\n  [data-slot=\"accordion-trigger\"] {\n    @apply group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;\n  }\n\n  [data-slot=\"accordion-content\"] {\n    @apply text-sm;\n  }\n\n  [data-slot=\"accordion-content-inner\"] {\n    @apply pt-0 pb-2.5;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"accordion\"] {\n    @apply flex w-full flex-col;\n  }\n\n  [data-slot=\"accordion-item\"] {\n    @apply not-last:border-b;\n  }\n\n  [data-slot=\"accordion-trigger\"] {\n    @apply group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;\n  }\n\n  [data-slot=\"accordion-content\"] {\n    @apply text-sm;\n  }\n\n  [data-slot=\"accordion-content-inner\"] {\n    @apply pt-0 pb-4;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/alert_dialog.json b/priv/registry/alert_dialog.json
index c7c7b83..6116e5b 100644
--- a/priv/registry/alert_dialog.json
+++ b/priv/registry/alert_dialog.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.AlertDialog do\n  @moduledoc \"\"\"\n  A modal alert dialog for destructive or otherwise consequential confirmations.\n\n  This is the `Dialog`'s stricter sibling: it renders with `role=\"alertdialog\"`\n  and deliberately offers no dismissal affordances other than an explicit\n  choice. There is **no X close button** and clicking the overlay does **not**\n  close it — the user must pick the action or cancel. `Escape` is still honored\n  via `phx-window-keydown` so keyboard users are never trapped.\n\n  Like `Dialog`, it is portal-free and fully client-driven: `show_alert_dialog/1`\n  and `hide_alert_dialog/1` are `Phoenix.LiveView.JS` command builders that toggle\n  the overlay and content panel (with transitions) and dispatch\n  `shadix:alert-dialog-open` / `shadix:alert-dialog-close` events. The\n  `ShadixAlertDialog` hook (assets/ts/alert_dialog.ts) listens for those events to\n  lock body scroll and manage focus. Focus is trapped with Phoenix's built-in\n  `<.focus_wrap>`.\n\n  The trigger and content live side by side under a `*-root` wrapper carrying the\n  hook; ids are derived from the required `:id` so titles/descriptions wire up to\n  `aria-labelledby` / `aria-describedby` stably.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders a modal alert dialog with a `:trigger` slot and arbitrary content.\n\n  The trigger is wrapped in a `display: contents` span wired to\n  `show_alert_dialog/1`, so the caller's own button/element opens the dialog\n  without extra markup. The overlay is intentionally not clickable and no close\n  button is rendered; only `Escape` and the explicit action/cancel controls\n  dismiss it.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def alert_dialog(assigns) do\n    ~H\"\"\"\n    <span phx-click={show_alert_dialog(@id)} class=\"contents\">{render_slot(@trigger)}</span>\n    <div id={\"#{@id}-root\"} phx-hook=\"ShadixAlertDialog\">\n      <div\n        id={\"#{@id}-overlay\"}\n        class=\"hidden fixed inset-0 z-50 bg-black/50\"\n        aria-hidden=\"true\"\n        data-slot=\"alert-dialog-overlay\"\n      />\n      <.focus_wrap\n        id={\"#{@id}-content\"}\n        class={\n          cn([\n            \"hidden fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background p-6 shadow-lg\",\n            @class\n          ])\n        }\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        aria-labelledby={\"#{@id}-title\"}\n        aria-describedby={\"#{@id}-description\"}\n        data-slot=\"alert-dialog-content\"\n        phx-window-keydown={hide_alert_dialog(@id)}\n        phx-key=\"escape\"\n      >\n        {render_slot(@inner_block)}\n      </.focus_wrap>\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that opens the alert dialog with `id`.\n\n  Shows the overlay and content panel with enter transitions and dispatches\n  `shadix:alert-dialog-open` on the `*-root` element for the `ShadixAlertDialog`\n  hook.\n  \"\"\"\n  def show_alert_dialog(id) do\n    %JS{}\n    |> JS.show(\n      to: \"##{id}-overlay\",\n      transition: {\"transition-opacity ease-out duration-200\", \"opacity-0\", \"opacity-100\"}\n    )\n    |> JS.show(\n      to: \"##{id}-content\",\n      display: \"grid\",\n      transition:\n        {\"transition ease-out duration-200\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"}\n    )\n    |> JS.dispatch(\"shadix:alert-dialog-open\", to: \"##{id}-root\")\n    |> JS.focus_first(to: \"##{id}-content\")\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the alert dialog with `id`.\n\n  Hides the overlay and content panel with leave transitions and dispatches\n  `shadix:alert-dialog-close` on the `*-root` element for the `ShadixAlertDialog`\n  hook.\n  \"\"\"\n  def hide_alert_dialog(id) do\n    %JS{}\n    |> JS.hide(\n      to: \"##{id}-overlay\",\n      transition: {\"transition-opacity ease-in duration-150\", \"opacity-100\", \"opacity-0\"}\n    )\n    |> JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-150\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n    |> JS.dispatch(\"shadix:alert-dialog-close\", to: \"##{id}-root\")\n  end\n\n  @doc \"Header region of an alert dialog; stacks title/description with sensible spacing.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_dialog_header(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"alert-dialog-header\"\n      class={cn([\"flex flex-col gap-2 text-center sm:text-left\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"Footer region of an alert dialog; right-aligns the cancel/action controls on larger screens.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_dialog_footer(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"alert-dialog-footer\"\n      class={cn([\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Alert dialog title. `:id` is the *dialog's* id; the title renders with\n  `\"#{id}-title\"` so it matches the content panel's `aria-labelledby`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_dialog_title(assigns) do\n    ~H\"\"\"\n    <h2\n      id={\"#{@id}-title\"}\n      data-slot=\"alert-dialog-title\"\n      class={cn([\"text-lg leading-none font-semibold\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </h2>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Alert dialog description. `:id` is the *dialog's* id; renders with\n  `\"#{id}-description\"` so it matches the content panel's `aria-describedby`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_dialog_description(assigns) do\n    ~H\"\"\"\n    <p\n      id={\"#{@id}-description\"}\n      data-slot=\"alert-dialog-description\"\n      class={cn([\"text-muted-foreground text-sm\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </p>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  The primary (often destructive) action button.\n\n  Renders a plain primary `<button>` carrying `data-slot=\"alert-dialog-action\"`.\n  The caller is expected to wire it with `phx-click` (and may pass any other\n  attributes via the global `:rest`) to perform the confirmed operation; it does\n  not close the dialog on its own.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:type, :string, default: \"button\")\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_dialog_action(assigns) do\n    ~H\"\"\"\n    <button\n      type={@type}\n      data-slot=\"alert-dialog-action\"\n      class={\n        cn([\n          \"inline-flex h-9 shrink-0 items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium whitespace-nowrap text-primary-foreground shadow-xs transition-all outline-none hover:bg-primary/90 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </button>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  The cancel button: an outline-styled `<button>` that closes the alert dialog.\n\n  `:id` is the *dialog's* id so the button can call `hide_alert_dialog/1` on the\n  correct panel. Carries `data-slot=\"alert-dialog-cancel\"`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:type, :string, default: \"button\")\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_dialog_cancel(assigns) do\n    ~H\"\"\"\n    <button\n      type={@type}\n      data-slot=\"alert-dialog-cancel\"\n      phx-click={hide_alert_dialog(@id)}\n      class={\n        cn([\n          \"inline-flex h-9 shrink-0 items-center justify-center gap-2 rounded-md border bg-background px-4 py-2 text-sm font-medium whitespace-nowrap shadow-xs transition-all outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </button>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.AlertDialog do\n  @moduledoc \"\"\"\n  A modal alert dialog for destructive or otherwise consequential confirmations.\n\n  This is the `Dialog`'s stricter sibling: it renders with `role=\"alertdialog\"`\n  and deliberately offers no dismissal affordances other than an explicit\n  choice. There is **no X close button** and clicking the overlay does **not**\n  close it — the user must pick the action or cancel. `Escape` is still honored\n  via `phx-window-keydown` so keyboard users are never trapped.\n\n  Like `Dialog`, it is portal-free and fully client-driven: `show_alert_dialog/1`\n  and `hide_alert_dialog/1` are `Phoenix.LiveView.JS` command builders that toggle\n  the overlay and content panel (with transitions) and dispatch\n  `shadix:alert-dialog-open` / `shadix:alert-dialog-close` events. The\n  `ShadixAlertDialog` hook (assets/ts/alert_dialog.ts) listens for those events to\n  lock body scroll and manage focus. Focus is trapped with Phoenix's built-in\n  `<.focus_wrap>`.\n\n  The trigger and content live side by side under a `*-root` wrapper carrying the\n  hook; ids are derived from the required `:id` so titles/descriptions wire up to\n  `aria-labelledby` / `aria-describedby` stably.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  @doc \"\"\"\n  Renders a modal alert dialog with a `:trigger` slot and arbitrary content.\n\n  The trigger is wrapped in a `display: contents` span wired to\n  `show_alert_dialog/1`, so the caller's own button/element opens the dialog\n  without extra markup. The overlay is intentionally not clickable and no close\n  button is rendered; only `Escape` and the explicit action/cancel controls\n  dismiss it.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def alert_dialog(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <span phx-click={show_alert_dialog(@id)} class=\"contents\">{render_slot(@trigger)}</span>\n    <div id={\"#{@id}-root\"} phx-hook=\"ShadixAlertDialog\">\n      <div\n        id={\"#{@id}-overlay\"}\n        class=\"hidden\"\n        aria-hidden=\"true\"\n        data-slot=\"alert-dialog-overlay\"\n      />\n      <.focus_wrap\n        id={\"#{@id}-content\"}\n        class={[\"hidden group/alert-dialog-content\", @class]}\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        aria-labelledby={\"#{@id}-title\"}\n        aria-describedby={\"#{@id}-description\"}\n        data-slot=\"alert-dialog-content\"\n        phx-window-keydown={hide_alert_dialog(@id)}\n        phx-key=\"escape\"\n      >\n        {render_slot(@inner_block)}\n      </.focus_wrap>\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that opens the alert dialog with `id`.\n\n  Shows the overlay and content panel with enter transitions and dispatches\n  `shadix:alert-dialog-open` on the `*-root` element for the `ShadixAlertDialog`\n  hook.\n  \"\"\"\n  def show_alert_dialog(id) do\n    %JS{}\n    |> JS.show(\n      to: \"##{id}-overlay\",\n      transition: {\"transition-opacity ease-out duration-200\", \"opacity-0\", \"opacity-100\"}\n    )\n    |> JS.show(\n      to: \"##{id}-content\",\n      display: \"grid\",\n      transition:\n        {\"transition ease-out duration-200\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"}\n    )\n    |> JS.dispatch(\"shadix:alert-dialog-open\", to: \"##{id}-root\")\n    |> JS.focus_first(to: \"##{id}-content\")\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the alert dialog with `id`.\n\n  Hides the overlay and content panel with leave transitions and dispatches\n  `shadix:alert-dialog-close` on the `*-root` element for the `ShadixAlertDialog`\n  hook.\n  \"\"\"\n  def hide_alert_dialog(id) do\n    %JS{}\n    |> JS.hide(\n      to: \"##{id}-overlay\",\n      transition: {\"transition-opacity ease-in duration-150\", \"opacity-100\", \"opacity-0\"}\n    )\n    |> JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-150\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n    |> JS.dispatch(\"shadix:alert-dialog-close\", to: \"##{id}-root\")\n  end\n\n  @doc \"Header region of an alert dialog; stacks title/description with sensible spacing.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_dialog_header(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"alert-dialog-header\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"Footer region of an alert dialog; right-aligns the cancel/action controls on larger screens.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_dialog_footer(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"alert-dialog-footer\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Alert dialog title. `:id` is the *dialog's* id; the title renders with\n  `\"#{id}-title\"` so it matches the content panel's `aria-labelledby`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_dialog_title(assigns) do\n    ~H\"\"\"\n    <h2 id={\"#{@id}-title\"} data-slot=\"alert-dialog-title\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </h2>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Alert dialog description. `:id` is the *dialog's* id; renders with\n  `\"#{id}-description\"` so it matches the content panel's `aria-describedby`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_dialog_description(assigns) do\n    ~H\"\"\"\n    <p id={\"#{@id}-description\"} data-slot=\"alert-dialog-description\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </p>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  The primary (often destructive) action button.\n\n  Renders a plain primary `<button>` carrying `data-slot=\"alert-dialog-action\"`.\n  The caller is expected to wire it with `phx-click` (and may pass any other\n  attributes via the global `:rest`) to perform the confirmed operation; it does\n  not close the dialog on its own.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:type, :string, default: \"button\")\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_dialog_action(assigns) do\n    ~H\"\"\"\n    <button type={@type} data-slot=\"alert-dialog-action\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </button>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  The cancel button: an outline-styled `<button>` that closes the alert dialog.\n\n  `:id` is the *dialog's* id so the button can call `hide_alert_dialog/1` on the\n  correct panel. Carries `data-slot=\"alert-dialog-cancel\"`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:type, :string, default: \"button\")\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def alert_dialog_cancel(assigns) do\n    ~H\"\"\"\n    <button\n      type={@type}\n      data-slot=\"alert-dialog-cancel\"\n      phx-click={hide_alert_dialog(@id)}\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </button>\n    \"\"\"\n  end\nend\n",
       "path": "alert_dialog.ex"
     }
   ],
@@ -15,6 +16,10 @@
   "name": "alert_dialog",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"alert-dialog-overlay\"] {\n    @apply fixed inset-0 z-50 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;\n  }\n\n  [data-slot=\"alert-dialog-content\"] {\n    @apply fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm;\n  }\n\n  [data-slot=\"alert-dialog-header\"] {\n    @apply grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr];\n  }\n\n  [data-slot=\"alert-dialog-footer\"] {\n    @apply flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4;\n  }\n\n  [data-slot=\"alert-dialog-title\"] {\n    @apply text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2;\n  }\n\n  [data-slot=\"alert-dialog-description\"] {\n    @apply text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3;\n  }\n\n  [data-slot=\"alert-dialog-action\"] {\n    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 bg-primary text-primary-foreground hover:bg-primary/80 h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n\n  [data-slot=\"alert-dialog-cancel\"] {\n    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"alert-dialog-overlay\"] {\n    @apply fixed inset-0 z-50 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;\n  }\n\n  [data-slot=\"alert-dialog-content\"] {\n    @apply fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-6 rounded-xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg;\n  }\n\n  [data-slot=\"alert-dialog-header\"] {\n    @apply grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr];\n  }\n\n  [data-slot=\"alert-dialog-footer\"] {\n    @apply flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end;\n  }\n\n  [data-slot=\"alert-dialog-title\"] {\n    @apply text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2;\n  }\n\n  [data-slot=\"alert-dialog-description\"] {\n    @apply text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3;\n  }\n\n  [data-slot=\"alert-dialog-action\"] {\n    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 bg-primary text-primary-foreground hover:bg-primary/80 h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n\n  [data-slot=\"alert-dialog-cancel\"] {\n    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/avatar.json b/priv/registry/avatar.json
index 07385f5..a16e060 100644
--- a/priv/registry/avatar.json
+++ b/priv/registry/avatar.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Avatar do\n  @moduledoc \"\"\"\n  Avatar, translated from the shadcn/ui (new-york-v4) avatar.\n\n  Radix's Avatar uses an internal image-loading state machine to swap between the\n  image and a fallback. This portable version reproduces that with a tiny hook,\n  `ShadixAvatar` (assets/ts/avatar.ts), placed on the `<img>`: if the image loads\n  it stays visible and the sibling fallback is hidden; if the image errors or has\n  no `src`, the image is hidden and the fallback is revealed.\n\n  Compose them as: `avatar/1` wrapper containing an `avatar_image/1` followed by\n  an `avatar_fallback/1` (the fallback must come after the image so the hook can\n  find it as the next sibling).\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Wrapper for an avatar. Renders a `data-slot=\"avatar\"` span; place an\n  `avatar_image/1` and then an `avatar_fallback/1` inside it.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def avatar(assigns) do\n    ~H\"\"\"\n    <span\n      data-slot=\"avatar\"\n      class={cn([\"relative flex size-8 shrink-0 overflow-hidden rounded-full\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Avatar image. Carries the `ShadixAvatar` hook which hides the image and reveals\n  the sibling fallback on error / missing `src`, and hides the fallback on load.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:src, :string, default: nil)\n  attr(:alt, :string, default: \"\")\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def avatar_image(assigns) do\n    ~H\"\"\"\n    <img\n      data-slot=\"avatar-image\"\n      id={@id}\n      phx-hook=\"ShadixAvatar\"\n      class={cn([\"aspect-square size-full\", @class])}\n      src={@src}\n      alt={@alt}\n      {@rest}\n    />\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Avatar fallback (typically initials). Starts hidden via the `hidden` class and\n  is revealed by the `ShadixAvatar` hook when the image fails to load.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def avatar_fallback(assigns) do\n    ~H\"\"\"\n    <span\n      data-slot=\"avatar-fallback\"\n      class={\n        cn([\n          \"hidden size-full flex items-center justify-center rounded-full bg-muted\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Avatar do\n  @moduledoc \"\"\"\n  Avatar, translated from the shadcn/ui avatar.\n\n  Radix's Avatar uses an internal image-loading state machine to swap between the\n  image and a fallback. This portable version reproduces that with a tiny hook,\n  `ShadixAvatar` (assets/ts/avatar.ts), placed on the `<img>`: if the image loads\n  it stays visible and the sibling fallback is hidden; if the image errors or has\n  no `src`, the image is hidden and the fallback is revealed.\n\n  Compose them as: `avatar/1` wrapper containing an `avatar_image/1` followed by\n  an `avatar_fallback/1` (the fallback must come after the image so the hook can\n  find it as the next sibling).\n\n  Each element carries a stable `data-slot` (`avatar`, `avatar-image`,\n  `avatar-fallback`). Styling lives in the colocated `priv/styles/<skin>/avatar.css`\n  (selected by `data-slot`); caller-supplied `class` is appended last so Tailwind\n  cascade layers ensure it wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  @doc \"\"\"\n  Wrapper for an avatar. Renders a `data-slot=\"avatar\"` span; place an\n  `avatar_image/1` and then an `avatar_fallback/1` inside it.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def avatar(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <span data-slot=\"avatar\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Avatar image. Carries the `ShadixAvatar` hook which hides the image and reveals\n  the sibling fallback on error / missing `src`, and hides the fallback on load.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:src, :string, default: nil)\n  attr(:alt, :string, default: \"\")\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def avatar_image(assigns) do\n    ~H\"\"\"\n    <img\n      data-slot=\"avatar-image\"\n      id={@id}\n      phx-hook=\"ShadixAvatar\"\n      class={@class}\n      src={@src}\n      alt={@alt}\n      {@rest}\n    />\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Avatar fallback (typically initials). Starts hidden via the `hidden` class and\n  is revealed by the `ShadixAvatar` hook when the image fails to load.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def avatar_fallback(assigns) do\n    ~H\"\"\"\n    <span data-slot=\"avatar-fallback\" class={[\"hidden\", @class]} {@rest}>\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\nend\n",
       "path": "avatar.ex"
     }
   ],
@@ -15,6 +16,10 @@
   "name": "avatar",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"avatar\"] {\n    @apply relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6;\n  }\n\n  [data-slot=\"avatar-image\"] {\n    @apply aspect-square size-full object-cover rounded-full;\n  }\n\n  [data-slot=\"avatar-fallback\"] {\n    @apply flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs bg-muted text-muted-foreground rounded-full;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"avatar\"] {\n    @apply relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6;\n  }\n\n  [data-slot=\"avatar-image\"] {\n    @apply aspect-square size-full object-cover rounded-full;\n  }\n\n  [data-slot=\"avatar-fallback\"] {\n    @apply flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs bg-muted text-muted-foreground rounded-full;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/card.json b/priv/registry/card.json
index 64d0767..884ba6b 100644
--- a/priv/registry/card.json
+++ b/priv/registry/card.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Card do\n  @moduledoc \"\"\"\n  Card component, translated from the shadcn/ui (new-york-v4) card.\n\n  Provides `card/1` and its subcomponents `card_header/1`, `card_title/1`,\n  `card_description/1`, `card_action/1`, `card_content/1`, and `card_footer/1`.\n  Each renders a `<div>` carrying a stable `data-slot` and the verbatim shadcn\n  Tailwind classes. These are presentational only.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @card \"flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm\"\n  @card_header \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\"\n  @card_title \"leading-none font-semibold\"\n  @card_description \"text-sm text-muted-foreground\"\n  @card_action \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\"\n  @card_content \"px-6\"\n  @card_footer \"flex items-center px-6 [.border-t]:pt-6\"\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def card(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@card, assigns.class]))\n\n    ~H\"\"\"\n    <div data-slot=\"card\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def card_header(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@card_header, assigns.class]))\n\n    ~H\"\"\"\n    <div data-slot=\"card-header\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def card_title(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@card_title, assigns.class]))\n\n    ~H\"\"\"\n    <div data-slot=\"card-title\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def card_description(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@card_description, assigns.class]))\n\n    ~H\"\"\"\n    <div data-slot=\"card-description\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def card_action(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@card_action, assigns.class]))\n\n    ~H\"\"\"\n    <div data-slot=\"card-action\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def card_content(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@card_content, assigns.class]))\n\n    ~H\"\"\"\n    <div data-slot=\"card-content\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def card_footer(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@card_footer, assigns.class]))\n\n    ~H\"\"\"\n    <div data-slot=\"card-footer\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Card do\n  @moduledoc \"\"\"\n  Card components, ported from shadcn/ui \"card\".\n\n  Provides `card/1` and its subcomponents `card_header/1`, `card_title/1`,\n  `card_description/1`, `card_action/1`, `card_content/1`, and `card_footer/1`.\n  Each renders a `<div>` carrying a stable `data-slot` for styling/targeting.\n\n  Styling lives in the colocated `priv/styles/<skin>/card.css` (selected by\n  `data-slot`); caller-supplied `class` is appended last so Tailwind cascade\n  layers ensure it wins over the defaults. The non-`@apply`-able `group/card`,\n  `group/card-header`, and `@container/card-header` markers stay inline on the\n  element. These components are presentational only.\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def card(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div data-slot=\"card\" class={[\"group/card\", @class]} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def card_header(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"card-header\"\n      class={[\"group/card-header @container/card-header\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def card_title(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"card-title\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def card_description(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"card-description\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def card_action(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"card-action\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def card_content(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"card-content\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def card_footer(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"card-footer\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\nend\n",
       "path": "card.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "card",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"card\"] {\n    @apply flex flex-col ring-foreground/10 bg-card text-card-foreground gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl;\n  }\n\n  [data-slot=\"card-header\"] {\n    @apply grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] gap-1 rounded-t-xl px-(--card-spacing) [.border-b]:pb-(--card-spacing);\n  }\n\n  [data-slot=\"card-title\"] {\n    @apply text-base leading-snug font-medium group-data-[size=sm]/card:text-sm;\n  }\n\n  [data-slot=\"card-description\"] {\n    @apply text-muted-foreground text-sm;\n  }\n\n  [data-slot=\"card-action\"] {\n    @apply col-start-2 row-span-2 row-start-1 self-start justify-self-end;\n  }\n\n  [data-slot=\"card-content\"] {\n    @apply px-(--card-spacing);\n  }\n\n  [data-slot=\"card-footer\"] {\n    @apply flex items-center bg-muted/50 rounded-b-xl border-t p-(--card-spacing);\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"card\"] {\n    @apply flex flex-col ring-foreground/10 bg-card text-card-foreground gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm shadow-xs ring-1 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl;\n  }\n\n  [data-slot=\"card-header\"] {\n    @apply grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] gap-1 rounded-t-xl px-(--card-spacing) [.border-b]:pb-(--card-spacing);\n  }\n\n  [data-slot=\"card-title\"] {\n    @apply text-base leading-normal font-medium group-data-[size=sm]/card:text-sm;\n  }\n\n  [data-slot=\"card-description\"] {\n    @apply text-muted-foreground text-sm;\n  }\n\n  [data-slot=\"card-action\"] {\n    @apply col-start-2 row-span-2 row-start-1 self-start justify-self-end;\n  }\n\n  [data-slot=\"card-content\"] {\n    @apply px-(--card-spacing);\n  }\n\n  [data-slot=\"card-footer\"] {\n    @apply flex items-center rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing);\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/carousel.json b/priv/registry/carousel.json
index a720fb2..170c507 100644
--- a/priv/registry/carousel.json
+++ b/priv/registry/carousel.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Carousel do\n  @moduledoc \"\"\"\n  A horizontal carousel built on native CSS scroll-snap and a small LiveView hook.\n\n  Unlike the React original (which wraps [Embla](https://www.embla-carousel.com/)),\n  this v1 is a pure CSS scroll-snap carousel: the content track is an\n  `overflow-x-auto` flex row with `snap-x snap-mandatory`, and each item is a\n  full-width `snap-start` child. Scrolling, momentum, and snapping are entirely\n  native to the browser, so there is no JS layout/animation loop.\n\n  The `ShadixCarousel` hook (assets/ts/carousel.ts) only wires the\n  previous/next buttons: clicking them scrolls the content element by one item\n  (its `clientWidth`) left or right with smooth behaviour, and the hook toggles\n  the buttons' `disabled` state at the start/end of the track (and on scroll /\n  resize).\n\n  ## Simplifications vs. the original\n\n    * **Horizontal only.** No `orientation=\"vertical\"`.\n    * **No drag/pointer physics.** You can still drag/flick on touch devices via\n      native scrolling, but there is no Embla-style mouse-drag inertia.\n    * **No autoplay**, no loop, no programmatic `setApi`/`opts`/`plugins`.\n    * **One-item paging.** Prev/next scroll by exactly one viewport width\n      (one full-basis item) rather than honouring multi-item `slidesToScroll`.\n    * **Keyboard arrows** are not bound (the React version listens for\n      Left/Right); rely on the focusable scroll container instead.\n\n  The content track and buttons are linked by `data-carousel-prev` /\n  `data-carousel-next` markers and a `data-carousel-content` marker so the hook\n  can find them from the root wrapper without ids.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders the carousel root: a `relative` wrapper carrying the `ShadixCarousel`\n  hook.\n\n  Compose `carousel_content/1` (with `carousel_item/1` children) and the\n  `carousel_previous/1` / `carousel_next/1` buttons inside it. The hook finds\n  the content track and buttons by their `data-carousel-*` markers, so they may\n  appear anywhere within this wrapper.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def carousel(assigns) do\n    ~H\"\"\"\n    <div\n      id={@id}\n      phx-hook=\"ShadixCarousel\"\n      data-slot=\"carousel\"\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      class={cn([\"relative\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The scrollable track. A horizontal flex row with mandatory x scroll-snap and\n  a hidden scrollbar.\n\n  Carries `data-carousel-content` so the `ShadixCarousel` hook can scroll it by\n  one item when the prev/next buttons are clicked.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def carousel_content(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"carousel-content\"\n      data-carousel-content\n      tabindex=\"0\"\n      role=\"group\"\n      aria-roledescription=\"carousel slides\"\n      aria-label=\"Slides\"\n      class={\n        cn([\n          \"flex overflow-x-auto snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A single slide. Full-basis, non-growing/shrinking, snapping to its start edge.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def carousel_item(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"carousel-item\"\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      class={cn([\"min-w-0 shrink-0 grow-0 basis-full snap-start\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The \"previous\" control: a round, absolutely-positioned icon button.\n\n  Carries `data-carousel-prev`; the hook wires its click to scroll the content\n  back by one item and toggles its `disabled` state at the start of the track.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def carousel_previous(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      data-slot=\"carousel-previous\"\n      data-carousel-prev\n      aria-label=\"Previous slide\"\n      class={\n        cn([\n          \"absolute top-1/2 -left-12 size-8 -translate-y-1/2 inline-flex items-center justify-center rounded-full border border-input bg-background shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m15 18-6-6 6-6\" />\n      </svg>\n    </button>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The \"next\" control: a round, absolutely-positioned icon button.\n\n  Carries `data-carousel-next`; the hook wires its click to scroll the content\n  forward by one item and toggles its `disabled` state at the end of the track.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def carousel_next(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      data-slot=\"carousel-next\"\n      data-carousel-next\n      aria-label=\"Next slide\"\n      class={\n        cn([\n          \"absolute top-1/2 -right-12 size-8 -translate-y-1/2 inline-flex items-center justify-center rounded-full border border-input bg-background shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    </button>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Carousel do\n  @moduledoc \"\"\"\n  A horizontal carousel built on native CSS scroll-snap and a small LiveView hook.\n\n  Unlike the React original (which wraps [Embla](https://www.embla-carousel.com/)),\n  this v1 is a pure CSS scroll-snap carousel: the content track is a horizontally\n  scrolling flex row with mandatory x scroll-snap, and each item is a full-width\n  slide that snaps to its start edge. Scrolling, momentum, and snapping are\n  entirely native to the browser, so there is no JS layout/animation loop.\n\n  Styling is delivered by the colocated `priv/styles/{nova,vega}/carousel.css`\n  skins keyed on each element's `data-slot`; the component markup carries only the\n  `data-slot` attributes and any caller-supplied `class`.\n\n  The `ShadixCarousel` hook (assets/ts/carousel.ts) only wires the\n  previous/next buttons: clicking them scrolls the content element by one item\n  (its `clientWidth`) left or right with smooth behaviour, and the hook toggles\n  the buttons' `disabled` state at the start/end of the track (and on scroll /\n  resize).\n\n  ## Simplifications vs. the original\n\n    * **Horizontal only.** No `orientation=\"vertical\"`.\n    * **No drag/pointer physics.** You can still drag/flick on touch devices via\n      native scrolling, but there is no Embla-style mouse-drag inertia.\n    * **No autoplay**, no loop, no programmatic `setApi`/`opts`/`plugins`.\n    * **One-item paging.** Prev/next scroll by exactly one viewport width\n      (one full-basis item) rather than honouring multi-item `slidesToScroll`.\n    * **Keyboard arrows** are not bound (the React version listens for\n      Left/Right); rely on the focusable scroll container instead.\n\n  The content track and buttons are linked by `data-carousel-prev` /\n  `data-carousel-next` markers and a `data-carousel-content` marker so the hook\n  can find them from the root wrapper without ids.\n  \"\"\"\n  use Phoenix.Component\n\n  @doc \"\"\"\n  Renders the carousel root: a `relative` wrapper carrying the `ShadixCarousel`\n  hook.\n\n  Compose `carousel_content/1` (with `carousel_item/1` children) and the\n  `carousel_previous/1` / `carousel_next/1` buttons inside it. The hook finds\n  the content track and buttons by their `data-carousel-*` markers, so they may\n  appear anywhere within this wrapper.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def carousel(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div\n      id={@id}\n      phx-hook=\"ShadixCarousel\"\n      data-slot=\"carousel\"\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The scrollable track. A horizontal flex row with mandatory x scroll-snap and\n  a hidden scrollbar.\n\n  Carries `data-carousel-content` so the `ShadixCarousel` hook can scroll it by\n  one item when the prev/next buttons are clicked.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def carousel_content(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"carousel-content\"\n      data-carousel-content\n      tabindex=\"0\"\n      role=\"group\"\n      aria-roledescription=\"carousel slides\"\n      aria-label=\"Slides\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A single slide. Full-basis, non-growing/shrinking, snapping to its start edge.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def carousel_item(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"carousel-item\"\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The \"previous\" control: a round, absolutely-positioned icon button.\n\n  Carries `data-carousel-prev`; the hook wires its click to scroll the content\n  back by one item and toggles its `disabled` state at the start of the track.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def carousel_previous(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      data-slot=\"carousel-previous\"\n      data-carousel-prev\n      aria-label=\"Previous slide\"\n      class={@class}\n      {@rest}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m15 18-6-6 6-6\" />\n      </svg>\n    </button>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The \"next\" control: a round, absolutely-positioned icon button.\n\n  Carries `data-carousel-next`; the hook wires its click to scroll the content\n  forward by one item and toggles its `disabled` state at the end of the track.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def carousel_next(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      data-slot=\"carousel-next\"\n      data-carousel-next\n      aria-label=\"Next slide\"\n      class={@class}\n      {@rest}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    </button>\n    \"\"\"\n  end\nend\n",
       "path": "carousel.ex"
     }
   ],
@@ -15,6 +16,10 @@
   "name": "carousel",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"carousel\"] {\n    @apply relative;\n  }\n\n  [data-slot=\"carousel-content\"] {\n    @apply flex overflow-x-auto snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;\n  }\n\n  [data-slot=\"carousel-item\"] {\n    @apply min-w-0 shrink-0 grow-0 basis-full snap-start;\n  }\n\n  [data-slot=\"carousel-previous\"] {\n    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg rounded-full absolute touch-manipulation top-1/2 -left-12 -translate-y-1/2;\n  }\n\n  [data-slot=\"carousel-next\"] {\n    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg rounded-full absolute touch-manipulation top-1/2 -right-12 -translate-y-1/2;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"carousel\"] {\n    @apply relative;\n  }\n\n  [data-slot=\"carousel-content\"] {\n    @apply flex overflow-x-auto snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;\n  }\n\n  [data-slot=\"carousel-item\"] {\n    @apply min-w-0 shrink-0 grow-0 basis-full snap-start;\n  }\n\n  [data-slot=\"carousel-previous\"] {\n    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md rounded-full absolute touch-manipulation top-1/2 -left-12 -translate-y-1/2;\n  }\n\n  [data-slot=\"carousel-next\"] {\n    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md rounded-full absolute touch-manipulation top-1/2 -right-12 -translate-y-1/2;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/checkbox.json b/priv/registry/checkbox.json
index 7809b09..5f7edc8 100644
--- a/priv/registry/checkbox.json
+++ b/priv/registry/checkbox.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Checkbox do\n  @moduledoc \"\"\"\n  Checkbox component adapted from shadcn/ui (new-york-v4).\n\n  Renders a native `<input type=\"checkbox\">` (with a preceding hidden `\"false\"`\n  input so an unchecked box still submits a value) and is field-aware: it derives\n  its `id`, `name`, `value`, and `errors` from a `Phoenix.HTML.FormField`.\n\n  The box is the `appearance-none` input; the check mark is a sibling `<svg>`\n  overlay shown via `peer-checked:visible`. It uses `text-primary-foreground`\n  (via `currentColor`) so the check contrasts correctly in both light and dark\n  mode — unlike a fixed-colour background-image. No JavaScript, no Radix.\n\n  Caller-supplied `class` is appended last (to the input); Tailwind cascade\n  layers ensure it wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n  import Shadix.Form\n\n  @base \"peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-transparent shadow-xs transition-shadow outline-none checked:border-primary checked:bg-primary dark:checked:bg-primary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40\"\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled required readonly autofocus))\n\n  def checkbox(assigns) do\n    %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)\n    assigns = assign(assigns, id: id, name: name, value: value, errors: errors)\n    assigns = assign(assigns, :checked, Phoenix.HTML.Form.normalize_value(\"checkbox\", value))\n    assigns = assign(assigns, :computed_class, cn([@base, assigns.class]))\n\n    ~H\"\"\"\n    <input type=\"hidden\" name={@name} value=\"false\" />\n    <span class=\"relative inline-grid size-4 shrink-0 *:[grid-area:1/1]\">\n      <input\n        type=\"checkbox\"\n        data-slot=\"checkbox\"\n        id={@id}\n        name={@name}\n        value=\"true\"\n        checked={@checked}\n        class={@computed_class}\n        aria-invalid={(@errors != [] && \"true\") || nil}\n        aria-describedby={(@errors != [] && \"#{@id}-error\") || nil}\n        {@rest}\n      />\n      <svg\n        class=\"pointer-events-none invisible size-3.5 place-self-center text-primary-foreground peer-checked:visible\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M20 6 9 17l-5-5\" />\n      </svg>\n    </span>\n    <p\n      :if={@errors != []}\n      id={\"#{@id}-error\"}\n      data-slot=\"form-message\"\n      class=\"text-destructive text-sm mt-1\"\n    >\n      {List.first(@errors)}\n    </p>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Checkbox do\n  @moduledoc \"\"\"\n  Checkbox component adapted from shadcn/ui.\n\n  Renders a native `<input type=\"checkbox\">` (with a preceding hidden `\"false\"`\n  input so an unchecked box still submits a value) and is field-aware: it derives\n  its `id`, `name`, `value`, and `errors` from a `Phoenix.HTML.FormField`.\n\n  The box is the `appearance-none` input carrying `data-slot=\"checkbox\"`; the\n  check mark is a sibling `<svg>` overlay (`data-slot=\"checkbox-indicator\"`) shown\n  via `peer-checked:visible`. No JavaScript, no Radix.\n\n  All styling lives in the component's colocated CSS\n  (`priv/styles/<style>/checkbox.css`, ported verbatim from shadcn), keyed by the\n  `data-slot` attributes and wrapped in `@layer components` so a caller-supplied\n  `class` always wins. The colocated-css marker (the first node of the template)\n  is replaced by the chosen style's `<style>` block when the component is copied\n  into a consumer app via `mix shadix.add`.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Form\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled required readonly autofocus))\n\n  def checkbox(assigns) do\n    %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)\n    assigns = assign(assigns, id: id, name: name, value: value, errors: errors)\n    assigns = assign(assigns, :checked, Phoenix.HTML.Form.normalize_value(\"checkbox\", value))\n\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <input type=\"hidden\" name={@name} value=\"false\" />\n    <span class=\"relative inline-grid size-4 shrink-0 *:[grid-area:1/1]\">\n      <input\n        type=\"checkbox\"\n        data-slot=\"checkbox\"\n        id={@id}\n        name={@name}\n        value=\"true\"\n        checked={@checked}\n        class={[\"peer\", @class]}\n        aria-invalid={(@errors != [] && \"true\") || nil}\n        aria-describedby={(@errors != [] && \"#{@id}-error\") || nil}\n        {@rest}\n      />\n      <svg\n        data-slot=\"checkbox-indicator\"\n        class=\"pointer-events-none invisible size-3.5 place-self-center text-primary-foreground peer-checked:visible\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M20 6 9 17l-5-5\" />\n      </svg>\n    </span>\n    <p\n      :if={@errors != []}\n      id={\"#{@id}-error\"}\n      data-slot=\"form-message\"\n      class=\"text-destructive text-sm mt-1\"\n    >\n      {List.first(@errors)}\n    </p>\n    \"\"\"\n  end\nend\n",
       "path": "checkbox.ex"
     }
   ],
@@ -9,7 +10,11 @@
   "name": "checkbox",
   "npm_deps": [],
   "registry_deps": [
-    "cn",
-    "form"
-  ]
+    "form",
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"checkbox\"] {\n    @apply relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3;\n  }\n\n  [data-slot=\"checkbox-indicator\"] {\n    @apply grid place-content-center text-current transition-none [&>svg]:size-3.5;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"checkbox\"] {\n    @apply relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3;\n  }\n\n  [data-slot=\"checkbox-indicator\"] {\n    @apply grid place-content-center text-current transition-none [&>svg]:size-3.5;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/combobox.json b/priv/registry/combobox.json
index 88bd3a7..f5a3576 100644
--- a/priv/registry/combobox.json
+++ b/priv/registry/combobox.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Combobox do\n  @moduledoc \"\"\"\n  A searchable select, built on client-side JS commands, Floating UI, and a small\n  LiveView hook.\n\n  shadcn composes its combobox from `Popover` + `Command`; here it is a single,\n  self-contained, field-aware control. It renders a hidden `<input>` (carrying the\n  field's `name` so the selection submits with the form), a trigger `<button>`\n  (`role=\"combobox\"`, showing the selected label or the placeholder plus a chevron),\n  and a hidden content panel positioned by Floating UI. The panel holds a search\n  text input at the top and a `[role=\"listbox\"]` of `combobox_item/1` options.\n\n  The `ShadixCombobox` hook (assets/ts/combobox.ts) is modelled on the dropdown\n  menu hook: it watches the content's visibility via a `MutationObserver`,\n  positions it under the trigger with `@floating-ui/dom` (`computePosition` +\n  `autoUpdate`, `bottom-start`/`flip`/`shift`), focuses the search input on open,\n  filters options by `textContent` as the user types (toggling a `hidden` class and\n  an empty-state element), navigates the visible options with the arrow keys, and\n  selects on `Enter`/click (writing the hidden value, updating the trigger label,\n  and closing). It closes on `Escape` or outside pointerdown via the `data-on-close`\n  JS (`hide_combobox/1`).\n\n  Trigger and content ids are derived from the required `:id` so `aria-controls`,\n  `data-trigger`, and the JS targets line up stably.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n  import Shadix.Form\n\n  @doc \"\"\"\n  Renders a searchable select bound to a `Phoenix.HTML.FormField`.\n\n  The selected option's `value` is submitted via a hidden input named for the\n  field. The `:inner_block` holds `combobox_item/1` options.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:placeholder, :string, default: \"Select an option\")\n  attr(:class, :string, default: nil)\n  slot(:inner_block, required: true)\n\n  def combobox(assigns) do\n    %{name: name, value: value, errors: errors} = field_attrs(assigns.field)\n    assigns = assign(assigns, name: name, value: value, errors: errors)\n\n    ~H\"\"\"\n    <input type=\"hidden\" id={\"#{@id}-value\"} name={@name} value={@value} data-combobox-value />\n    <button\n      type=\"button\"\n      id={\"#{@id}-trigger\"}\n      role=\"combobox\"\n      data-slot=\"combobox-trigger\"\n      phx-click={toggle_combobox(@id)}\n      aria-label={@placeholder}\n      aria-haspopup=\"listbox\"\n      aria-expanded=\"false\"\n      aria-controls={\"#{@id}-content\"}\n      aria-invalid={@errors != [] && \"true\"}\n      class={\n        cn([\n          \"flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          @class\n        ])\n      }\n    >\n      <span data-combobox-label data-placeholder={@value in [nil, \"\"] && \"true\"} class=\"truncate\">\n        {@placeholder}\n      </span>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n        class=\"pointer-events-none size-4 shrink-0 text-muted-foreground\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n    <div\n      id={\"#{@id}-content\"}\n      data-slot=\"combobox-content\"\n      tabindex=\"-1\"\n      phx-hook=\"ShadixCombobox\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-input={\"#{@id}-value\"}\n      data-on-close={hide_combobox(@id)}\n      class=\"hidden fixed left-0 top-0 z-50 w-72 origin-top overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-md\"\n    >\n      <div class=\"flex items-center border-b px-3\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          class=\"mr-2 size-4 shrink-0 opacity-50\"\n        >\n          <circle cx=\"11\" cy=\"11\" r=\"8\" />\n          <path d=\"m21 21-4.3-4.3\" />\n        </svg>\n        <input\n          type=\"text\"\n          data-slot=\"combobox-input\"\n          data-combobox-search\n          placeholder=\"Search…\"\n          aria-label=\"Search\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          aria-expanded=\"true\"\n          aria-controls={\"#{@id}-listbox\"}\n          autocomplete=\"off\"\n          class=\"flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\"\n        />\n      </div>\n      <div id={\"#{@id}-listbox\"} role=\"listbox\" aria-label={@placeholder} class=\"max-h-72 overflow-y-auto p-1\">\n        {render_slot(@inner_block)}\n        <div\n          data-slot=\"combobox-empty\"\n          data-combobox-empty\n          role=\"status\"\n          aria-live=\"polite\"\n          class=\"hidden py-6 text-center text-sm text-muted-foreground\"\n        >\n          No results found.\n        </div>\n      </div>\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A selectable option within a `combobox/1`.\n\n  `:value` is the value written to the hidden input on select; the `:inner_block`\n  is the visible label. Carries `role=\"option\"`, `data-value`, and\n  `data-slot=\"combobox-item\"` so the hook can read/filter/select it.\n  \"\"\"\n  attr(:value, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def combobox_item(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"option\"\n      tabindex=\"-1\"\n      aria-selected=\"false\"\n      data-slot=\"combobox-item\"\n      data-value={@value}\n      class={\n        cn([\n          \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none hover:bg-accent hover:text-accent-foreground data-[active]:bg-accent data-[active]:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      <span\n        data-combobox-item-indicator\n        class=\"absolute left-2 flex size-4 items-center justify-center opacity-0\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          class=\"size-4\"\n        >\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </span>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that opens the combobox with `id`.\n\n  Reveals the content panel with an enter transition. The `ShadixCombobox` hook\n  reacts to the resulting visibility change to position the panel, focus the\n  search input, and wire up keyboard/outside-click handling.\n  \"\"\"\n  def toggle_combobox(id) do\n    JS.toggle(\n      to: \"##{id}-content\",\n      in: {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"},\n      out: {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"},\n      display: \"block\"\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the combobox with `id`.\n\n  Hides the content panel with a leave transition. Used by the hook's\n  `data-on-close` (Escape / outside click) and on select.\n  \"\"\"\n  def hide_combobox(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Combobox do\n  @moduledoc \"\"\"\n  A searchable select, built on client-side JS commands, Floating UI, and a small\n  LiveView hook.\n\n  shadcn composes its combobox from `Popover` + `Command`; here it is a single,\n  self-contained, field-aware control. It renders a hidden `<input>` (carrying the\n  field's `name` so the selection submits with the form), a trigger `<button>`\n  (`role=\"combobox\"`, showing the selected label or the placeholder plus a chevron),\n  and a hidden content panel positioned by Floating UI. The panel holds a search\n  text input at the top and a `[role=\"listbox\"]` of `combobox_item/1` options.\n\n  The `ShadixCombobox` hook (assets/ts/combobox.ts) is modelled on the dropdown\n  menu hook: it watches the content's visibility via a `MutationObserver`,\n  positions it under the trigger with `@floating-ui/dom` (`computePosition` +\n  `autoUpdate`, `bottom-start`/`flip`/`shift`), focuses the search input on open,\n  filters options by `textContent` as the user types (toggling a `hidden` class and\n  an empty-state element), navigates the visible options with the arrow keys, and\n  selects on `Enter`/click (writing the hidden value, updating the trigger label,\n  and closing). It closes on `Escape` or outside pointerdown via the `data-on-close`\n  JS (`hide_combobox/1`).\n\n  Trigger and content ids are derived from the required `:id` so `aria-controls`,\n  `data-trigger`, and the JS targets line up stably.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Form\n\n  @doc \"\"\"\n  Renders a searchable select bound to a `Phoenix.HTML.FormField`.\n\n  The selected option's `value` is submitted via a hidden input named for the\n  field. The `:inner_block` holds `combobox_item/1` options.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:placeholder, :string, default: \"Select an option\")\n  attr(:class, :string, default: nil)\n  slot(:inner_block, required: true)\n\n  def combobox(assigns) do\n    %{name: name, value: value, errors: errors} = field_attrs(assigns.field)\n    assigns = assign(assigns, name: name, value: value, errors: errors)\n\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <input type=\"hidden\" id={\"#{@id}-value\"} name={@name} value={@value} data-combobox-value />\n    <button\n      type=\"button\"\n      id={\"#{@id}-trigger\"}\n      role=\"combobox\"\n      data-slot=\"combobox-trigger\"\n      phx-click={toggle_combobox(@id)}\n      aria-label={@placeholder}\n      aria-haspopup=\"listbox\"\n      aria-expanded=\"false\"\n      aria-controls={\"#{@id}-content\"}\n      aria-invalid={@errors != [] && \"true\"}\n      class={@class}\n    >\n      <span data-combobox-label data-placeholder={@value in [nil, \"\"] && \"true\"} class=\"truncate\">\n        {@placeholder}\n      </span>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n        class=\"pointer-events-none size-4 shrink-0 text-muted-foreground\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n    <div\n      id={\"#{@id}-content\"}\n      data-slot=\"combobox-content\"\n      tabindex=\"-1\"\n      phx-hook=\"ShadixCombobox\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-input={\"#{@id}-value\"}\n      data-on-close={hide_combobox(@id)}\n      class=\"hidden fixed left-0 top-0 z-50 w-72 origin-top overflow-hidden p-0\"\n    >\n      <div class=\"flex items-center border-b px-3\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          class=\"mr-2 size-4 shrink-0 opacity-50\"\n        >\n          <circle cx=\"11\" cy=\"11\" r=\"8\" />\n          <path d=\"m21 21-4.3-4.3\" />\n        </svg>\n        <input\n          type=\"text\"\n          data-slot=\"combobox-input\"\n          data-combobox-search\n          placeholder=\"Search…\"\n          aria-label=\"Search\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          aria-expanded=\"true\"\n          aria-controls={\"#{@id}-listbox\"}\n          autocomplete=\"off\"\n        />\n      </div>\n      <div id={\"#{@id}-listbox\"} role=\"listbox\" aria-label={@placeholder} class=\"max-h-72 overflow-y-auto p-1\">\n        {render_slot(@inner_block)}\n        <div\n          data-slot=\"combobox-empty\"\n          data-combobox-empty\n          role=\"status\"\n          aria-live=\"polite\"\n          class=\"hidden\"\n        >\n          No results found.\n        </div>\n      </div>\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A selectable option within a `combobox/1`.\n\n  `:value` is the value written to the hidden input on select; the `:inner_block`\n  is the visible label. Carries `role=\"option\"`, `data-value`, and\n  `data-slot=\"combobox-item\"` so the hook can read/filter/select it.\n  \"\"\"\n  attr(:value, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def combobox_item(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"option\"\n      tabindex=\"-1\"\n      aria-selected=\"false\"\n      data-slot=\"combobox-item\"\n      data-value={@value}\n      class={@class}\n      {@rest}\n    >\n      <span\n        data-combobox-item-indicator\n        class=\"absolute right-2 flex size-4 items-center justify-center opacity-0\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          class=\"size-4\"\n        >\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </span>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that opens the combobox with `id`.\n\n  Reveals the content panel with an enter transition. The `ShadixCombobox` hook\n  reacts to the resulting visibility change to position the panel, focus the\n  search input, and wire up keyboard/outside-click handling.\n  \"\"\"\n  def toggle_combobox(id) do\n    JS.toggle(\n      to: \"##{id}-content\",\n      in: {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"},\n      out: {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"},\n      display: \"block\"\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the combobox with `id`.\n\n  Hides the content panel with a leave transition. Used by the hook's\n  `data-on-close` (Escape / outside click) and on select.\n  \"\"\"\n  def hide_combobox(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\nend\n",
       "path": "combobox.ex"
     }
   ],
@@ -17,7 +18,11 @@
     "@floating-ui/dom"
   ],
   "registry_deps": [
-    "cn",
-    "form"
-  ]
+    "form",
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"combobox-trigger\"] {\n    @apply flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"combobox-content\"] {\n    @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none;\n  }\n\n  [data-slot=\"combobox-input\"] {\n    @apply flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50;\n  }\n\n  [data-slot=\"combobox-item\"] {\n    @apply relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground data-[active]:bg-accent data-[active]:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"combobox-empty\"] {\n    @apply text-muted-foreground w-full py-2 text-center text-sm;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"combobox-trigger\"] {\n    @apply flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"combobox-content\"] {\n    @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none;\n  }\n\n  [data-slot=\"combobox-input\"] {\n    @apply flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50;\n  }\n\n  [data-slot=\"combobox-item\"] {\n    @apply relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground data-[active]:bg-accent data-[active]:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"combobox-empty\"] {\n    @apply text-muted-foreground w-full py-2 text-center text-sm;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/command.json b/priv/registry/command.json
index feca344..b9e526e 100644
--- a/priv/registry/command.json
+++ b/priv/registry/command.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Command do\n  @moduledoc \"\"\"\n  A command palette / filterable list adapted from shadcn/ui (new-york-v4).\n\n  shadcn builds this on the `cmdk` primitive; we reimplement the essential\n  behaviour with a small LiveView hook. The `command/1` root carries the\n  `ShadixCommand` hook (assets/ts/command.ts), which on mount focuses the search\n  input, filters the `[role=\\\"option\\\"]` items by the input's text (matching each\n  option's `textContent`, toggling the Tailwind `hidden` class), shows the\n  `command_empty/1` slot when nothing matches, and provides arrow/Home/End\n  keyboard navigation over the *visible* options with Enter activating the\n  focused option via `.click()`.\n\n  Ids are derived from the required `:id`: the input carries `data-command-search`\n  so the hook can locate it from the root, and the empty/list slots are matched by\n  their `data-slot` attributes.\n\n  Caller-supplied `class` is appended last; Tailwind cascade layers ensure it wins\n  over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  The command root: a rounded, bordered panel hosting the `ShadixCommand` hook.\n\n  Compose `command_input/1`, `command_list/1` (with `command_group/1`,\n  `command_item/1`, `command_empty/1`, `command_separator/1`) inside its\n  `inner_block`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def command(assigns) do\n    ~H\"\"\"\n    <div\n      id={@id}\n      data-slot=\"command\"\n      phx-hook=\"ShadixCommand\"\n      class={\n        cn([\n          \"flex h-full w-full flex-col overflow-hidden rounded-md border bg-popover text-popover-foreground\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The search input. `:id` is the *command's* id; the input gets `#\\#{id}-input`,\n  a `data-command-search` marker the hook keys off, and a leading search icon.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:placeholder, :string, default: \"Type a command or search...\")\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def command_input(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"command-input-wrapper\" class=\"flex h-9 items-center gap-2 border-b px-3\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4 shrink-0 opacity-50\"\n      >\n        <circle cx=\"11\" cy=\"11\" r=\"8\" />\n        <path d=\"m21 21-4.3-4.3\" />\n      </svg>\n      <input\n        id={\"#{@id}-input\"}\n        type=\"text\"\n        role=\"combobox\"\n        data-slot=\"command-input\"\n        data-command-search\n        aria-label=\"Search\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        placeholder={@placeholder}\n        class={\n          cn([\n            \"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\",\n            @class\n          ])\n        }\n        {@rest}\n      />\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A scrollable container holding the command groups, items, and empty state.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def command_list(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"listbox\"\n      aria-label=\"Suggestions\"\n      data-slot=\"command-list\"\n      class={cn([\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A labelled group of items. `:heading` renders a small muted label above the\n  items.\n  \"\"\"\n  attr(:heading, :string, default: nil)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def command_group(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"group\"\n      aria-label={@heading}\n      data-slot=\"command-group\"\n      class={cn([\"overflow-hidden p-1 text-foreground\", @class])}\n      {@rest}\n    >\n      <div\n        :if={@heading}\n        aria-hidden=\"true\"\n        data-slot=\"command-group-heading\"\n        class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\"\n      >\n        {@heading}\n      </div>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A selectable option. `:value` is the option's value (mirrored to `data-value`);\n  wire `phx-click` (or any handler) via `:rest`.\n  \"\"\"\n  attr(:value, :string, default: nil)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def command_item(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"option\"\n      tabindex=\"-1\"\n      data-slot=\"command-item\"\n      data-value={@value}\n      class={\n        cn([\n          \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-accent hover:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The empty state, shown by the hook (via `JS.show/JS.hide`) when no options\n  match the search. Hidden by default with the Tailwind `hidden` class.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def command_empty(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"presentation\"\n      data-slot=\"command-empty\"\n      class={cn([\"hidden py-6 text-center text-sm\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A horizontal separator between command sections.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def command_separator(assigns) do\n    ~H\"\"\"\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"command-separator\"\n      class={cn([\"-mx-1 h-px bg-border\", @class])}\n      {@rest}\n    />\n    \"\"\"\n  end\n\n  @doc \"A trailing keyboard-shortcut hint within a command item.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def command_shortcut(assigns) do\n    ~H\"\"\"\n    <span\n      data-slot=\"command-shortcut\"\n      class={cn([\"ml-auto text-xs tracking-widest text-muted-foreground\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Command do\n  @moduledoc \"\"\"\n  A command palette / filterable list adapted from shadcn/ui (new-york-v4).\n\n  shadcn builds this on the `cmdk` primitive; we reimplement the essential\n  behaviour with a small LiveView hook. The `command/1` root carries the\n  `ShadixCommand` hook (assets/ts/command.ts), which on mount focuses the search\n  input, filters the `[role=\\\"option\\\"]` items by the input's text (matching each\n  option's `textContent`, toggling the Tailwind `hidden` class), shows the\n  `command_empty/1` slot when nothing matches, and provides arrow/Home/End\n  keyboard navigation over the *visible* options with Enter activating the\n  focused option via `.click()`.\n\n  Ids are derived from the required `:id`: the input carries `data-command-search`\n  so the hook can locate it from the root, and the empty/list slots are matched by\n  their `data-slot` attributes.\n\n  Styling lives in colocated CSS (`priv/styles/<skin>/command.css`), keyed off each\n  element's stable `data-slot`. Caller-supplied `class` is appended last; Tailwind\n  cascade layers ensure it wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  @doc \"\"\"\n  The command root: a rounded, bordered panel hosting the `ShadixCommand` hook.\n\n  Compose `command_input/1`, `command_list/1` (with `command_group/1`,\n  `command_item/1`, `command_empty/1`, `command_separator/1`) inside its\n  `inner_block`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def command(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div\n      id={@id}\n      data-slot=\"command\"\n      phx-hook=\"ShadixCommand\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The search input. `:id` is the *command's* id; the input gets `#\\#{id}-input`,\n  a `data-command-search` marker the hook keys off, and a leading search icon.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:placeholder, :string, default: \"Type a command or search...\")\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def command_input(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"command-input-wrapper\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4 shrink-0 opacity-50\"\n      >\n        <circle cx=\"11\" cy=\"11\" r=\"8\" />\n        <path d=\"m21 21-4.3-4.3\" />\n      </svg>\n      <input\n        id={\"#{@id}-input\"}\n        type=\"text\"\n        role=\"combobox\"\n        data-slot=\"command-input\"\n        data-command-search\n        aria-label=\"Search\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        placeholder={@placeholder}\n        class={@class}\n        {@rest}\n      />\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A scrollable container holding the command groups, items, and empty state.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def command_list(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"listbox\"\n      aria-label=\"Suggestions\"\n      data-slot=\"command-list\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A labelled group of items. `:heading` renders a small muted label above the\n  items.\n  \"\"\"\n  attr(:heading, :string, default: nil)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def command_group(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"group\"\n      aria-label={@heading}\n      data-slot=\"command-group\"\n      class={@class}\n      {@rest}\n    >\n      <div\n        :if={@heading}\n        aria-hidden=\"true\"\n        data-slot=\"command-group-heading\"\n      >\n        {@heading}\n      </div>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A selectable option. `:value` is the option's value (mirrored to `data-value`);\n  wire `phx-click` (or any handler) via `:rest`.\n  \"\"\"\n  attr(:value, :string, default: nil)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def command_item(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"option\"\n      tabindex=\"-1\"\n      data-slot=\"command-item\"\n      data-value={@value}\n      class={[\"group/command-item\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The empty state, shown by the hook (via `JS.show/JS.hide`) when no options\n  match the search. Hidden by default with the Tailwind `hidden` class.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def command_empty(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"presentation\"\n      data-slot=\"command-empty\"\n      class={[\"hidden\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A horizontal separator between command sections.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def command_separator(assigns) do\n    ~H\"\"\"\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"command-separator\"\n      class={@class}\n      {@rest}\n    />\n    \"\"\"\n  end\n\n  @doc \"A trailing keyboard-shortcut hint within a command item.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def command_shortcut(assigns) do\n    ~H\"\"\"\n    <span\n      data-slot=\"command-shortcut\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\nend\n",
       "path": "command.ex"
     }
   ],
@@ -15,6 +16,10 @@
   "name": "command",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"command\"] {\n    @apply flex size-full flex-col overflow-hidden bg-popover text-popover-foreground rounded-xl! p-1;\n  }\n\n  [data-slot=\"command-input-wrapper\"] {\n    @apply flex items-center gap-2 p-1 pb-0;\n  }\n\n  [data-slot=\"command-input\"] {\n    @apply outline-hidden disabled:cursor-not-allowed disabled:opacity-50 w-full text-sm;\n  }\n\n  [data-slot=\"command-list\"] {\n    @apply overflow-x-hidden overflow-y-auto no-scrollbar max-h-72 scroll-py-1 outline-none;\n  }\n\n  [data-slot=\"command-empty\"] {\n    @apply py-6 text-center text-sm;\n  }\n\n  [data-slot=\"command-group\"] {\n    @apply text-foreground overflow-hidden p-1;\n  }\n\n  [data-slot=\"command-group-heading\"] {\n    @apply text-muted-foreground px-2 py-1.5 text-xs font-medium;\n  }\n\n  [data-slot=\"command-separator\"] {\n    @apply bg-border -mx-1 h-px;\n  }\n\n  [data-slot=\"command-item\"] {\n    @apply data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"command-shortcut\"] {\n    @apply text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"command\"] {\n    @apply flex size-full flex-col overflow-hidden bg-popover text-popover-foreground rounded-xl! p-1;\n  }\n\n  [data-slot=\"command-input-wrapper\"] {\n    @apply flex items-center gap-2 p-1 pb-0;\n  }\n\n  [data-slot=\"command-input\"] {\n    @apply outline-hidden disabled:cursor-not-allowed disabled:opacity-50 w-full text-sm;\n  }\n\n  [data-slot=\"command-list\"] {\n    @apply overflow-x-hidden overflow-y-auto no-scrollbar max-h-72 scroll-py-1 outline-none;\n  }\n\n  [data-slot=\"command-empty\"] {\n    @apply py-6 text-center text-sm;\n  }\n\n  [data-slot=\"command-group\"] {\n    @apply text-foreground overflow-hidden p-1;\n  }\n\n  [data-slot=\"command-group-heading\"] {\n    @apply text-muted-foreground px-2 py-1.5 text-xs font-medium;\n  }\n\n  [data-slot=\"command-separator\"] {\n    @apply bg-border -mx-1 h-px w-auto;\n  }\n\n  [data-slot=\"command-item\"] {\n    @apply data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"command-shortcut\"] {\n    @apply text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/context_menu.json b/priv/registry/context_menu.json
index f694410..0f76635 100644
--- a/priv/registry/context_menu.json
+++ b/priv/registry/context_menu.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.ContextMenu do\n  @moduledoc \"\"\"\n  A right-click context menu built on client-side JS commands, Floating UI, and a\n  small LiveView hook.\n\n  Like the dropdown menu, this is a portal-free, fully client-driven menu, but it\n  is opened by the `contextmenu` (right-click) event on the trigger area rather\n  than a click, and it is positioned at the *pointer* rather than under an anchor.\n\n  The `:trigger` slot defines the right-clickable area. The content\n  `<div role=\"menu\">` carries the `ShadixContextMenu` hook\n  (assets/ts/context_menu.ts), which listens for `contextmenu` on the trigger,\n  prevents the browser's native menu, and positions the content at the pointer\n  using a `@floating-ui/dom` virtual element (`computePosition` + `autoUpdate`,\n  `right-start`/`flip`/`shift`). The hook watches the content's visibility via a\n  `MutationObserver` to manage keyboard navigation (arrows/Home/End/Enter/\n  Escape/Tab) and closes on outside `pointerdown` via the `data-on-close` JS\n  (`hide_menu/1`).\n\n  Trigger and content ids are derived from the required `:id` so `data-trigger`\n  and the JS targets line up stably.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders a context menu with a `:trigger` slot (the right-clickable area) and\n  arbitrary menu items.\n\n  The trigger is wrapped in a `<div data-context-trigger>` whose `contextmenu`\n  event is intercepted by the hook. The content `<div role=\"menu\">` carries the\n  `ShadixContextMenu` hook and is positioned by Floating UI at open time.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:trigger_class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def context_menu(assigns) do\n    ~H\"\"\"\n    <div\n      id={\"#{@id}-trigger\"}\n      data-context-trigger\n      data-slot=\"context-menu-trigger\"\n      class={cn([\"block\", @trigger_class])}\n    >\n      {render_slot(@trigger)}\n    </div>\n    <div\n      id={\"#{@id}-content\"}\n      role=\"menu\"\n      aria-orientation=\"vertical\"\n      tabindex=\"-1\"\n      data-slot=\"context-menu-content\"\n      phx-hook=\"ShadixContextMenu\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-on-open={show_menu(@id)}\n      data-on-close={hide_menu(@id)}\n      class={\n        cn([\n          \"hidden fixed left-0 top-0 z-50 min-w-[8rem] origin-top overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md\",\n          @class\n        ])\n      }\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that opens the menu with `id`.\n\n  Shows the content panel with an enter transition. The `ShadixContextMenu` hook\n  calls this through `data-on-open` after positioning, but it is also exported for\n  composition.\n  \"\"\"\n  def show_menu(id) do\n    JS.show(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the menu with `id`.\n\n  Hides the content panel with a leave transition. Used by the hook's\n  `data-on-close` (Escape / Tab / outside click) and by menu items on select.\n  \"\"\"\n  def hide_menu(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  A selectable menu item.\n\n  `:id` is the *menu's* id (not the item's). On click it runs the caller's\n  `:on_select` JS and then closes the menu.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:on_select, JS, default: %JS{})\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def context_menu_item(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"menuitem\"\n      tabindex=\"-1\"\n      data-slot=\"context-menu-item\"\n      phx-click={\n        @on_select\n        |> JS.hide(\n          to: \"##{@id}-content\",\n          transition:\n            {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n        )\n      }\n      class={\n        cn([\n          \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A non-interactive group label within a context menu.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def context_menu_label(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"context-menu-label\"\n      class={cn([\"px-2 py-1.5 text-sm font-medium text-foreground\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A horizontal separator between context menu sections.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def context_menu_separator(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"separator\"\n      data-slot=\"context-menu-separator\"\n      class={cn([\"-mx-1 my-1 h-px bg-border\", @class])}\n      {@rest}\n    />\n    \"\"\"\n  end\n\n  @doc \"A trailing keyboard-shortcut hint within a context menu item.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def context_menu_shortcut(assigns) do\n    ~H\"\"\"\n    <span\n      data-slot=\"context-menu-shortcut\"\n      class={cn([\"ml-auto text-xs tracking-widest text-muted-foreground\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.ContextMenu do\n  @moduledoc \"\"\"\n  A right-click context menu built on client-side JS commands, Floating UI, and a\n  small LiveView hook.\n\n  Like the dropdown menu, this is a portal-free, fully client-driven menu, but it\n  is opened by the `contextmenu` (right-click) event on the trigger area rather\n  than a click, and it is positioned at the *pointer* rather than under an anchor.\n\n  The `:trigger` slot defines the right-clickable area. The content\n  `<div role=\"menu\">` carries the `ShadixContextMenu` hook\n  (assets/ts/context_menu.ts), which listens for `contextmenu` on the trigger,\n  prevents the browser's native menu, and positions the content at the pointer\n  using a `@floating-ui/dom` virtual element (`computePosition` + `autoUpdate`,\n  `right-start`/`flip`/`shift`). The hook watches the content's visibility via a\n  `MutationObserver` to manage keyboard navigation (arrows/Home/End/Enter/\n  Escape/Tab) and closes on outside `pointerdown` via the `data-on-close` JS\n  (`hide_menu/1`).\n\n  Trigger and content ids are derived from the required `:id` so `data-trigger`\n  and the JS targets line up stably.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  @doc \"\"\"\n  Renders a context menu with a `:trigger` slot (the right-clickable area) and\n  arbitrary menu items.\n\n  The trigger is wrapped in a `<div data-context-trigger>` whose `contextmenu`\n  event is intercepted by the hook. The content `<div role=\"menu\">` carries the\n  `ShadixContextMenu` hook and is positioned by Floating UI at open time.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:trigger_class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def context_menu(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div\n      id={\"#{@id}-trigger\"}\n      data-context-trigger\n      data-slot=\"context-menu-trigger\"\n      class={@trigger_class}\n    >\n      {render_slot(@trigger)}\n    </div>\n    <div\n      id={\"#{@id}-content\"}\n      role=\"menu\"\n      aria-orientation=\"vertical\"\n      tabindex=\"-1\"\n      data-slot=\"context-menu-content\"\n      phx-hook=\"ShadixContextMenu\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-on-open={show_menu(@id)}\n      data-on-close={hide_menu(@id)}\n      class={[\"hidden fixed left-0 top-0\", @class]}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that opens the menu with `id`.\n\n  Shows the content panel with an enter transition. The `ShadixContextMenu` hook\n  calls this through `data-on-open` after positioning, but it is also exported for\n  composition.\n  \"\"\"\n  def show_menu(id) do\n    JS.show(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the menu with `id`.\n\n  Hides the content panel with a leave transition. Used by the hook's\n  `data-on-close` (Escape / Tab / outside click) and by menu items on select.\n  \"\"\"\n  def hide_menu(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  A selectable menu item.\n\n  `:id` is the *menu's* id (not the item's). On click it runs the caller's\n  `:on_select` JS and then closes the menu.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:on_select, JS, default: %JS{})\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def context_menu_item(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"menuitem\"\n      tabindex=\"-1\"\n      data-slot=\"context-menu-item\"\n      phx-click={\n        @on_select\n        |> JS.hide(\n          to: \"##{@id}-content\",\n          transition:\n            {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n        )\n      }\n      class={[\"group/context-menu-item\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A non-interactive group label within a context menu.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def context_menu_label(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"context-menu-label\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A horizontal separator between context menu sections.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def context_menu_separator(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"separator\"\n      data-slot=\"context-menu-separator\"\n      class={@class}\n      {@rest}\n    />\n    \"\"\"\n  end\n\n  @doc \"A trailing keyboard-shortcut hint within a context menu item.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def context_menu_shortcut(assigns) do\n    ~H\"\"\"\n    <span\n      data-slot=\"context-menu-shortcut\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\nend\n",
       "path": "context_menu.ex"
     }
   ],
@@ -17,6 +18,10 @@
     "@floating-ui/dom"
   ],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"context-menu-trigger\"] {\n    @apply block select-none;\n  }\n\n  [data-slot=\"context-menu-content\"] {\n    @apply z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100;\n  }\n\n  [data-slot=\"context-menu-item\"] {\n    @apply relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"context-menu-label\"] {\n    @apply text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7;\n  }\n\n  [data-slot=\"context-menu-separator\"] {\n    @apply bg-border -mx-1 my-1 h-px;\n  }\n\n  [data-slot=\"context-menu-shortcut\"] {\n    @apply text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"context-menu-trigger\"] {\n    @apply block select-none;\n  }\n\n  [data-slot=\"context-menu-content\"] {\n    @apply z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100;\n  }\n\n  [data-slot=\"context-menu-item\"] {\n    @apply relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"context-menu-label\"] {\n    @apply text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8;\n  }\n\n  [data-slot=\"context-menu-separator\"] {\n    @apply bg-border -mx-1 my-1 h-px;\n  }\n\n  [data-slot=\"context-menu-shortcut\"] {\n    @apply text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/dialog.json b/priv/registry/dialog.json
index 9871308..d567488 100644
--- a/priv/registry/dialog.json
+++ b/priv/registry/dialog.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Dialog do\n  @moduledoc \"\"\"\n  A modal dialog built on client-side JS commands and a small LiveView hook.\n\n  Unlike the React/Radix original, this is a portal-free, fully client-driven\n  dialog: `show_dialog/1` and `hide_dialog/1` are `Phoenix.LiveView.JS` command\n  builders that toggle the overlay and content panel (with transitions) and\n  dispatch `shadix:dialog-open` / `shadix:dialog-close` events. The `ShadixDialog`\n  hook (assets/ts/dialog.ts) listens for those events to lock body scroll and\n  manage focus. `Escape` and overlay-click both close via `phx-window-keydown` /\n  `phx-click`. Focus is trapped with Phoenix's built-in `<.focus_wrap>`.\n\n  The trigger and content live side by side under a `*-root` wrapper carrying the\n  hook; ids are derived from the required `:id` so titles/descriptions wire up to\n  `aria-labelledby` / `aria-describedby` stably.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders a modal dialog with a `:trigger` slot and arbitrary content.\n\n  The trigger is wrapped in a `display: contents` span wired to `show_dialog/1`,\n  so the caller's own button/element shows the dialog without extra markup.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def dialog(assigns) do\n    ~H\"\"\"\n    <span phx-click={show_dialog(@id)} class=\"contents\">{render_slot(@trigger)}</span>\n    <div id={\"#{@id}-root\"} phx-hook=\"ShadixDialog\">\n      <div\n        id={\"#{@id}-overlay\"}\n        class=\"hidden fixed inset-0 z-50 bg-black/50\"\n        aria-hidden=\"true\"\n        phx-click={hide_dialog(@id)}\n      />\n      <.focus_wrap\n        id={\"#{@id}-content\"}\n        class={\n          cn([\n            \"hidden fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background p-6 shadow-lg\",\n            @class\n          ])\n        }\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={\"#{@id}-title\"}\n        aria-describedby={\"#{@id}-description\"}\n        data-slot=\"dialog-content\"\n        phx-window-keydown={hide_dialog(@id)}\n        phx-key=\"escape\"\n      >\n        {render_slot(@inner_block)}\n        <button\n          type=\"button\"\n          phx-click={hide_dialog(@id)}\n          aria-label=\"Close\"\n          class=\"absolute right-4 top-4 rounded-xs 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M18 6 6 18\" />\n            <path d=\"m6 6 12 12\" />\n          </svg>\n        </button>\n      </.focus_wrap>\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that opens the dialog with `id`.\n\n  Shows the overlay and content panel with enter transitions and dispatches\n  `shadix:dialog-open` on the `*-root` element for the `ShadixDialog` hook.\n  \"\"\"\n  def show_dialog(id) do\n    %JS{}\n    |> JS.show(\n      to: \"##{id}-overlay\",\n      transition: {\"transition-opacity ease-out duration-200\", \"opacity-0\", \"opacity-100\"}\n    )\n    |> JS.show(\n      to: \"##{id}-content\",\n      display: \"grid\",\n      transition:\n        {\"transition ease-out duration-200\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"}\n    )\n    |> JS.dispatch(\"shadix:dialog-open\", to: \"##{id}-root\")\n    |> JS.focus_first(to: \"##{id}-content\")\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the dialog with `id`.\n\n  Hides the overlay and content panel with leave transitions and dispatches\n  `shadix:dialog-close` on the `*-root` element for the `ShadixDialog` hook.\n  \"\"\"\n  def hide_dialog(id) do\n    %JS{}\n    |> JS.hide(\n      to: \"##{id}-overlay\",\n      transition: {\"transition-opacity ease-in duration-150\", \"opacity-100\", \"opacity-0\"}\n    )\n    |> JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-150\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n    |> JS.dispatch(\"shadix:dialog-close\", to: \"##{id}-root\")\n  end\n\n  @doc \"Header region of a dialog; stacks title/description with sensible spacing.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def dialog_header(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"dialog-header\"\n      class={cn([\"flex flex-col gap-2 text-center sm:text-left\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"Footer region of a dialog; right-aligns actions on larger screens.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def dialog_footer(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"dialog-footer\"\n      class={cn([\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Dialog title. `:id` is the *dialog's* id; the title renders with `\"#{id}-title\"`\n  so it matches the content panel's `aria-labelledby`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def dialog_title(assigns) do\n    ~H\"\"\"\n    <h2\n      id={\"#{@id}-title\"}\n      data-slot=\"dialog-title\"\n      class={cn([\"text-lg leading-none font-semibold\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </h2>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Dialog description. `:id` is the *dialog's* id; renders with `\"#{id}-description\"`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def dialog_description(assigns) do\n    ~H\"\"\"\n    <p\n      id={\"#{@id}-description\"}\n      data-slot=\"dialog-description\"\n      class={cn([\"text-muted-foreground text-sm\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </p>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Dialog do\n  @moduledoc \"\"\"\n  A modal dialog built on client-side JS commands and a small LiveView hook.\n\n  Unlike the React/Radix original, this is a portal-free, fully client-driven\n  dialog: `show_dialog/1` and `hide_dialog/1` are `Phoenix.LiveView.JS` command\n  builders that toggle the overlay and content panel (with transitions) and\n  dispatch `shadix:dialog-open` / `shadix:dialog-close` events. The `ShadixDialog`\n  hook (assets/ts/dialog.ts) listens for those events to lock body scroll and\n  manage focus. `Escape` and overlay-click both close via `phx-window-keydown` /\n  `phx-click`. Focus is trapped with Phoenix's built-in `<.focus_wrap>`.\n\n  The trigger and content live side by side under a `*-root` wrapper carrying the\n  hook; ids are derived from the required `:id` so titles/descriptions wire up to\n  `aria-labelledby` / `aria-describedby` stably.\n\n  Each element carries a stable `data-slot` for styling/targeting. Styling lives in\n  the colocated `priv/styles/<skin>/dialog.css` (selected by `data-slot`); the\n  caller-supplied `class` is appended last so Tailwind cascade layers ensure it wins\n  over the defaults. `hidden` stays inline on the overlay/content because the JS\n  commands toggle it to open and close the dialog.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  @doc \"\"\"\n  Renders a modal dialog with a `:trigger` slot and arbitrary content.\n\n  The trigger is wrapped in a `display: contents` span wired to `show_dialog/1`,\n  so the caller's own button/element shows the dialog without extra markup.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def dialog(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <span phx-click={show_dialog(@id)} class=\"contents\">{render_slot(@trigger)}</span>\n    <div id={\"#{@id}-root\"} phx-hook=\"ShadixDialog\">\n      <div\n        id={\"#{@id}-overlay\"}\n        data-slot=\"dialog-overlay\"\n        class=\"hidden\"\n        aria-hidden=\"true\"\n        phx-click={hide_dialog(@id)}\n      />\n      <.focus_wrap\n        id={\"#{@id}-content\"}\n        class={[\"hidden\", @class]}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={\"#{@id}-title\"}\n        aria-describedby={\"#{@id}-description\"}\n        data-slot=\"dialog-content\"\n        phx-window-keydown={hide_dialog(@id)}\n        phx-key=\"escape\"\n      >\n        {render_slot(@inner_block)}\n        <button\n          type=\"button\"\n          phx-click={hide_dialog(@id)}\n          aria-label=\"Close\"\n          data-slot=\"dialog-close\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M18 6 6 18\" />\n            <path d=\"m6 6 12 12\" />\n          </svg>\n        </button>\n      </.focus_wrap>\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that opens the dialog with `id`.\n\n  Shows the overlay and content panel with enter transitions and dispatches\n  `shadix:dialog-open` on the `*-root` element for the `ShadixDialog` hook.\n  \"\"\"\n  def show_dialog(id) do\n    %JS{}\n    |> JS.show(\n      to: \"##{id}-overlay\",\n      transition: {\"transition-opacity ease-out duration-200\", \"opacity-0\", \"opacity-100\"}\n    )\n    |> JS.show(\n      to: \"##{id}-content\",\n      display: \"grid\",\n      transition:\n        {\"transition ease-out duration-200\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"}\n    )\n    |> JS.dispatch(\"shadix:dialog-open\", to: \"##{id}-root\")\n    |> JS.focus_first(to: \"##{id}-content\")\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the dialog with `id`.\n\n  Hides the overlay and content panel with leave transitions and dispatches\n  `shadix:dialog-close` on the `*-root` element for the `ShadixDialog` hook.\n  \"\"\"\n  def hide_dialog(id) do\n    %JS{}\n    |> JS.hide(\n      to: \"##{id}-overlay\",\n      transition: {\"transition-opacity ease-in duration-150\", \"opacity-100\", \"opacity-0\"}\n    )\n    |> JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-150\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n    |> JS.dispatch(\"shadix:dialog-close\", to: \"##{id}-root\")\n  end\n\n  @doc \"Header region of a dialog; stacks title/description with sensible spacing.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def dialog_header(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"dialog-header\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"Footer region of a dialog; right-aligns actions on larger screens.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def dialog_footer(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"dialog-footer\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Dialog title. `:id` is the *dialog's* id; the title renders with `\"#{id}-title\"`\n  so it matches the content panel's `aria-labelledby`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def dialog_title(assigns) do\n    ~H\"\"\"\n    <h2 id={\"#{@id}-title\"} data-slot=\"dialog-title\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </h2>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Dialog description. `:id` is the *dialog's* id; renders with `\"#{id}-description\"`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def dialog_description(assigns) do\n    ~H\"\"\"\n    <p id={\"#{@id}-description\"} data-slot=\"dialog-description\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </p>\n    \"\"\"\n  end\nend\n",
       "path": "dialog.ex"
     }
   ],
@@ -15,6 +16,10 @@
   "name": "dialog",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"dialog-overlay\"] {\n    @apply fixed inset-0 isolate z-50 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;\n  }\n\n  [data-slot=\"dialog-content\"] {\n    @apply fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm;\n  }\n\n  [data-slot=\"dialog-close\"] {\n    @apply absolute top-2 right-2;\n  }\n\n  [data-slot=\"dialog-header\"] {\n    @apply flex flex-col gap-2;\n  }\n\n  [data-slot=\"dialog-footer\"] {\n    @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4;\n  }\n\n  [data-slot=\"dialog-title\"] {\n    @apply text-base leading-none font-medium;\n  }\n\n  [data-slot=\"dialog-description\"] {\n    @apply text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"dialog-overlay\"] {\n    @apply fixed inset-0 isolate z-50 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;\n  }\n\n  [data-slot=\"dialog-content\"] {\n    @apply fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md;\n  }\n\n  [data-slot=\"dialog-close\"] {\n    @apply absolute top-4 right-4;\n  }\n\n  [data-slot=\"dialog-header\"] {\n    @apply flex flex-col gap-2;\n  }\n\n  [data-slot=\"dialog-footer\"] {\n    @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;\n  }\n\n  [data-slot=\"dialog-title\"] {\n    @apply leading-none font-medium;\n  }\n\n  [data-slot=\"dialog-description\"] {\n    @apply text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/drawer.json b/priv/registry/drawer.json
index 0e90cc5..805c324 100644
--- a/priv/registry/drawer.json
+++ b/priv/registry/drawer.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Drawer do\n  @moduledoc \"\"\"\n  A bottom sheet (\"drawer\") built on client-side JS commands and a small\n  LiveView hook.\n\n  Modelled on `Shadix.Components.Sheet`: `show_drawer/1` and `hide_drawer/1` are\n  `Phoenix.LiveView.JS` command builders that toggle the overlay and content\n  panel (with a slide-up transition) and dispatch `shadix:drawer-open` /\n  `shadix:drawer-close` events. The `ShadixDrawer` hook (assets/ts/drawer.ts)\n  listens for those events to lock body scroll and manage focus. `Escape` and\n  overlay-click both close via `phx-window-keydown` / `phx-click`. Focus is\n  trapped with Phoenix's built-in `<.focus_wrap>`.\n\n  The content is fixed to the BOTTOM edge of the viewport and slides up from\n  below; a small grab-handle bar sits near the top for visual affordance.\n\n  > #### v1 has no drag-to-dismiss {: .info}\n  >\n  > shadcn/ui's drawer uses [vaul](https://github.com/emilkowalski/vaul) to\n  > support dragging the sheet down to dismiss it. This v1 deliberately does\n  > NOT implement drag gestures: it is a tap/Escape/overlay drawer. The grab\n  > handle is decorative.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders a bottom drawer with a `:trigger` slot and arbitrary content.\n\n  The trigger is wrapped in a `display: contents` span wired to `show_drawer/1`,\n  so the caller's own button/element shows the drawer without extra markup.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def drawer(assigns) do\n    ~H\"\"\"\n    <span phx-click={show_drawer(@id)} class=\"contents\">{render_slot(@trigger)}</span>\n    <div id={\"#{@id}-root\"} phx-hook=\"ShadixDrawer\">\n      <div\n        id={\"#{@id}-overlay\"}\n        class=\"hidden fixed inset-0 z-50 bg-black/50\"\n        aria-hidden=\"true\"\n        phx-click={hide_drawer(@id)}\n      />\n      <.focus_wrap\n        id={\"#{@id}-content\"}\n        class={\n          cn([\n            \"hidden fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-lg border bg-background\",\n            @class\n          ])\n        }\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={\"#{@id}-title\"}\n        aria-describedby={\"#{@id}-description\"}\n        data-slot=\"drawer-content\"\n        phx-window-keydown={hide_drawer(@id)}\n        phx-key=\"escape\"\n      >\n        <div\n          data-slot=\"drawer-handle\"\n          aria-hidden=\"true\"\n          class=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\"\n        />\n        {render_slot(@inner_block)}\n      </.focus_wrap>\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that opens the drawer with `id`.\n\n  Shows the overlay and slides the content panel up from the bottom edge, then\n  dispatches `shadix:drawer-open` on the `*-root` element for the `ShadixDrawer`\n  hook.\n  \"\"\"\n  def show_drawer(id) do\n    %JS{}\n    |> JS.show(\n      to: \"##{id}-overlay\",\n      transition: {\"transition-opacity ease-out duration-300\", \"opacity-0\", \"opacity-100\"}\n    )\n    |> JS.show(\n      to: \"##{id}-content\",\n      display: \"flex\",\n      transition:\n        {\"transition ease-out duration-500\", \"translate-y-full opacity-0\",\n         \"translate-y-0 opacity-100\"}\n    )\n    |> JS.dispatch(\"shadix:drawer-open\", to: \"##{id}-root\")\n    |> JS.focus_first(to: \"##{id}-content\")\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the drawer with `id`.\n\n  Hides the overlay and slides the content panel back down off the bottom edge,\n  then dispatches `shadix:drawer-close` on the `*-root` element for the\n  `ShadixDrawer` hook.\n  \"\"\"\n  def hide_drawer(id) do\n    %JS{}\n    |> JS.hide(\n      to: \"##{id}-overlay\",\n      transition: {\"transition-opacity ease-in duration-300\", \"opacity-100\", \"opacity-0\"}\n    )\n    |> JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-300\", \"translate-y-0 opacity-100\",\n         \"translate-y-full opacity-0\"}\n    )\n    |> JS.dispatch(\"shadix:drawer-close\", to: \"##{id}-root\")\n  end\n\n  @doc \"Header region of a drawer; stacks title/description, centered by default.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def drawer_header(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"drawer-header\"\n      class={cn([\"flex flex-col gap-0.5 p-4 text-center md:gap-1.5 md:text-left\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"Footer region of a drawer; pushed to the bottom of the panel.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def drawer_footer(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"drawer-footer\" class={cn([\"mt-auto flex flex-col gap-2 p-4\", @class])} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Drawer title. `:id` is the *drawer's* id; the title renders with\n  `\"#{id}-title\"` so it matches the content panel's `aria-labelledby`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def drawer_title(assigns) do\n    ~H\"\"\"\n    <h2\n      id={\"#{@id}-title\"}\n      data-slot=\"drawer-title\"\n      class={cn([\"text-foreground font-semibold\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </h2>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Drawer description. `:id` is the *drawer's* id; renders with\n  `\"#{id}-description\"`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def drawer_description(assigns) do\n    ~H\"\"\"\n    <p\n      id={\"#{@id}-description\"}\n      data-slot=\"drawer-description\"\n      class={cn([\"text-muted-foreground text-sm\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </p>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  A close button for the drawer with `:id`. Closes the drawer via\n  `hide_drawer/1`. Renders its `inner_block` as the button label (defaulting to\n  a visually-hidden \"Close\" when empty).\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block)\n\n  def drawer_close(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      data-slot=\"drawer-close\"\n      phx-click={hide_drawer(@id)}\n      aria-label=\"Close\"\n      class={\n        cn([\n          \"rounded-md ring-offset-background transition-opacity focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </button>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Drawer do\n  @moduledoc \"\"\"\n  A bottom sheet (\"drawer\") built on client-side JS commands and a small\n  LiveView hook.\n\n  Modelled on `Shadix.Components.Sheet`: `show_drawer/1` and `hide_drawer/1` are\n  `Phoenix.LiveView.JS` command builders that toggle the overlay and content\n  panel (with a slide-up transition) and dispatch `shadix:drawer-open` /\n  `shadix:drawer-close` events. The `ShadixDrawer` hook (assets/ts/drawer.ts)\n  listens for those events to lock body scroll and manage focus. `Escape` and\n  overlay-click both close via `phx-window-keydown` / `phx-click`. Focus is\n  trapped with Phoenix's built-in `<.focus_wrap>`.\n\n  The content is fixed to the BOTTOM edge of the viewport and slides up from\n  below; a small grab-handle bar sits near the top for visual affordance.\n\n  Each element carries a stable `data-slot`; styling lives in the colocated\n  `priv/styles/<skin>/drawer.css` (selected by `data-slot`). The `hidden` toggle\n  and positioning the JS commands rely on stay inline, and caller-supplied\n  `class` is appended last so Tailwind cascade layers ensure it wins over the\n  defaults.\n\n  > #### v1 has no drag-to-dismiss {: .info}\n  >\n  > shadcn/ui's drawer uses [vaul](https://github.com/emilkowalski/vaul) to\n  > support dragging the sheet down to dismiss it. This v1 deliberately does\n  > NOT implement drag gestures: it is a tap/Escape/overlay drawer. The grab\n  > handle is decorative.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  @doc \"\"\"\n  Renders a bottom drawer with a `:trigger` slot and arbitrary content.\n\n  The trigger is wrapped in a `display: contents` span wired to `show_drawer/1`,\n  so the caller's own button/element shows the drawer without extra markup.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def drawer(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <span phx-click={show_drawer(@id)} class=\"contents\">{render_slot(@trigger)}</span>\n    <div id={\"#{@id}-root\"} phx-hook=\"ShadixDrawer\">\n      <div\n        id={\"#{@id}-overlay\"}\n        class=\"hidden fixed inset-0 z-50 bg-black/50\"\n        aria-hidden=\"true\"\n        phx-click={hide_drawer(@id)}\n      />\n      <.focus_wrap\n        id={\"#{@id}-content\"}\n        class={[\"hidden\", @class]}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={\"#{@id}-title\"}\n        aria-describedby={\"#{@id}-description\"}\n        data-slot=\"drawer-content\"\n        phx-window-keydown={hide_drawer(@id)}\n        phx-key=\"escape\"\n      >\n        <div data-slot=\"drawer-handle\" aria-hidden=\"true\" />\n        {render_slot(@inner_block)}\n      </.focus_wrap>\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that opens the drawer with `id`.\n\n  Shows the overlay and slides the content panel up from the bottom edge, then\n  dispatches `shadix:drawer-open` on the `*-root` element for the `ShadixDrawer`\n  hook.\n  \"\"\"\n  def show_drawer(id) do\n    %JS{}\n    |> JS.show(\n      to: \"##{id}-overlay\",\n      transition: {\"transition-opacity ease-out duration-300\", \"opacity-0\", \"opacity-100\"}\n    )\n    |> JS.show(\n      to: \"##{id}-content\",\n      display: \"flex\",\n      transition:\n        {\"transition ease-out duration-500\", \"translate-y-full opacity-0\",\n         \"translate-y-0 opacity-100\"}\n    )\n    |> JS.dispatch(\"shadix:drawer-open\", to: \"##{id}-root\")\n    |> JS.focus_first(to: \"##{id}-content\")\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the drawer with `id`.\n\n  Hides the overlay and slides the content panel back down off the bottom edge,\n  then dispatches `shadix:drawer-close` on the `*-root` element for the\n  `ShadixDrawer` hook.\n  \"\"\"\n  def hide_drawer(id) do\n    %JS{}\n    |> JS.hide(\n      to: \"##{id}-overlay\",\n      transition: {\"transition-opacity ease-in duration-300\", \"opacity-100\", \"opacity-0\"}\n    )\n    |> JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-300\", \"translate-y-0 opacity-100\",\n         \"translate-y-full opacity-0\"}\n    )\n    |> JS.dispatch(\"shadix:drawer-close\", to: \"##{id}-root\")\n  end\n\n  @doc \"Header region of a drawer; stacks title/description, centered by default.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def drawer_header(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"drawer-header\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"Footer region of a drawer; pushed to the bottom of the panel.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def drawer_footer(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"drawer-footer\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Drawer title. `:id` is the *drawer's* id; the title renders with\n  `\"#{id}-title\"` so it matches the content panel's `aria-labelledby`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def drawer_title(assigns) do\n    ~H\"\"\"\n    <h2 id={\"#{@id}-title\"} data-slot=\"drawer-title\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </h2>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Drawer description. `:id` is the *drawer's* id; renders with\n  `\"#{id}-description\"`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def drawer_description(assigns) do\n    ~H\"\"\"\n    <p id={\"#{@id}-description\"} data-slot=\"drawer-description\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </p>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  A close button for the drawer with `:id`. Closes the drawer via\n  `hide_drawer/1`. Renders its `inner_block` as the button label (defaulting to\n  a visually-hidden \"Close\" when empty).\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block)\n\n  def drawer_close(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      data-slot=\"drawer-close\"\n      phx-click={hide_drawer(@id)}\n      aria-label=\"Close\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </button>\n    \"\"\"\n  end\nend\n",
       "path": "drawer.ex"
     }
   ],
@@ -15,6 +16,10 @@
   "name": "drawer",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"drawer-content\"] {\n    @apply fixed z-50 bg-popover text-popover-foreground flex h-auto flex-col text-sm inset-x-0 bottom-0 mt-24 max-h-[80vh] rounded-t-xl border-t;\n  }\n\n  [data-slot=\"drawer-handle\"] {\n    @apply bg-muted mx-auto mt-4 h-1 w-[100px] shrink-0 rounded-full;\n  }\n\n  [data-slot=\"drawer-header\"] {\n    @apply flex flex-col gap-0.5 p-4 text-center md:gap-0.5 md:text-left;\n  }\n\n  [data-slot=\"drawer-footer\"] {\n    @apply mt-auto flex flex-col gap-2 p-4;\n  }\n\n  [data-slot=\"drawer-title\"] {\n    @apply text-foreground text-base font-medium;\n  }\n\n  [data-slot=\"drawer-description\"] {\n    @apply text-muted-foreground text-sm;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"drawer-content\"] {\n    @apply fixed z-50 bg-popover text-popover-foreground flex h-auto flex-col text-sm inset-x-0 bottom-0 mt-24 max-h-[80vh] rounded-t-xl border-t;\n  }\n\n  [data-slot=\"drawer-handle\"] {\n    @apply bg-muted mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full;\n  }\n\n  [data-slot=\"drawer-header\"] {\n    @apply flex flex-col gap-0.5 p-4 text-center md:gap-1.5 md:text-left;\n  }\n\n  [data-slot=\"drawer-footer\"] {\n    @apply mt-auto flex flex-col gap-2 p-4;\n  }\n\n  [data-slot=\"drawer-title\"] {\n    @apply text-foreground font-medium;\n  }\n\n  [data-slot=\"drawer-description\"] {\n    @apply text-muted-foreground text-sm;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/dropdown_menu.json b/priv/registry/dropdown_menu.json
index c252a5e..98c5b1e 100644
--- a/priv/registry/dropdown_menu.json
+++ b/priv/registry/dropdown_menu.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.DropdownMenu do\n  @moduledoc \"\"\"\n  A dropdown menu built on client-side JS commands, Floating UI, and a small\n  LiveView hook.\n\n  Like the dialog, this is a portal-free, fully client-driven menu. The trigger\n  toggles the menu content with `toggle_menu/1` (a `Phoenix.LiveView.JS` builder\n  with enter/leave transitions); the `ShadixDropdownMenu` hook\n  (assets/ts/dropdown_menu.ts) watches the content's visibility via a\n  `MutationObserver`, positions it under the trigger with `@floating-ui/dom`\n  (`computePosition` + `autoUpdate`, `bottom-start`/`flip`/`shift`), manages\n  keyboard navigation (arrows/Home/End/Enter/Escape/Tab), and closes on outside\n  pointerdown via the `data-on-close` JS (`hide_menu/1`).\n\n  Trigger and content ids are derived from the required `:id` so `aria-controls`,\n  `data-trigger`, and the JS targets line up stably.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders a dropdown menu with a `:trigger` slot and arbitrary menu items.\n\n  The trigger is wrapped in a `display: contents` span wired to `toggle_menu/1`,\n  carrying the menu's ARIA wiring. The content `<div role=\\\"menu\\\">` carries the\n  `ShadixDropdownMenu` hook and is positioned by Floating UI at open time.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def dropdown_menu(assigns) do\n    ~H\"\"\"\n    <span\n      id={\"#{@id}-trigger\"}\n      phx-click={toggle_menu(@id)}\n      class=\"contents\"\n    >\n      {render_slot(@trigger)}\n    </span>\n    <div\n      id={\"#{@id}-content\"}\n      role=\"menu\"\n      tabindex=\"-1\"\n      data-slot=\"dropdown-menu-content\"\n      phx-hook=\"ShadixDropdownMenu\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-on-close={hide_menu(@id)}\n      class={\n        cn([\n          \"hidden fixed left-0 top-0 z-50 min-w-[8rem] origin-top overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md\",\n          @class\n        ])\n      }\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that toggles the menu with `id`.\n\n  Toggles the content panel's visibility with enter/leave transitions. The\n  `ShadixDropdownMenu` hook reacts to the resulting visibility change to position\n  the menu and wire up keyboard/outside-click handling.\n  \"\"\"\n  def toggle_menu(id) do\n    JS.toggle(\n      to: \"##{id}-content\",\n      in: {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"},\n      out: {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the menu with `id`.\n\n  Hides the content panel with a leave transition. Used by the hook's\n  `data-on-close` (Escape / Tab / outside click) and by menu items on select.\n  \"\"\"\n  def hide_menu(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  A selectable menu item.\n\n  `:id` is the *menu's* id (not the item's). On click it runs the caller's\n  `:on_select` JS and then closes the menu.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:on_select, JS, default: %JS{})\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def dropdown_menu_item(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"menuitem\"\n      tabindex=\"-1\"\n      data-slot=\"dropdown-menu-item\"\n      phx-click={\n        @on_select\n        |> JS.hide(\n          to: \"##{@id}-content\",\n          transition:\n            {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n        )\n      }\n      class={\n        cn([\n          \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A non-interactive group label within a dropdown menu.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def dropdown_menu_label(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"dropdown-menu-label\"\n      class={cn([\"px-2 py-1.5 text-sm font-medium\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A horizontal separator between dropdown menu sections.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def dropdown_menu_separator(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"separator\"\n      data-slot=\"dropdown-menu-separator\"\n      class={cn([\"-mx-1 my-1 h-px bg-border\", @class])}\n      {@rest}\n    />\n    \"\"\"\n  end\n\n  @doc \"A trailing keyboard-shortcut hint within a dropdown menu item.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def dropdown_menu_shortcut(assigns) do\n    ~H\"\"\"\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      class={cn([\"ml-auto text-xs tracking-widest text-muted-foreground\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.DropdownMenu do\n  @moduledoc \"\"\"\n  A dropdown menu built on client-side JS commands, Floating UI, and a small\n  LiveView hook.\n\n  Like the dialog, this is a portal-free, fully client-driven menu. The trigger\n  toggles the menu content with `toggle_menu/1` (a `Phoenix.LiveView.JS` builder\n  with enter/leave transitions); the `ShadixDropdownMenu` hook\n  (assets/ts/dropdown_menu.ts) watches the content's visibility via a\n  `MutationObserver`, positions it under the trigger with `@floating-ui/dom`\n  (`computePosition` + `autoUpdate`, `bottom-start`/`flip`/`shift`), manages\n  keyboard navigation (arrows/Home/End/Enter/Escape/Tab), and closes on outside\n  pointerdown via the `data-on-close` JS (`hide_menu/1`).\n\n  Trigger and content ids are derived from the required `:id` so `aria-controls`,\n  `data-trigger`, and the JS targets line up stably.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  @doc \"\"\"\n  Renders a dropdown menu with a `:trigger` slot and arbitrary menu items.\n\n  The trigger is wrapped in a `display: contents` span wired to `toggle_menu/1`,\n  carrying the menu's ARIA wiring. The content `<div role=\\\"menu\\\">` carries the\n  `ShadixDropdownMenu` hook and is positioned by Floating UI at open time.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def dropdown_menu(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <span\n      id={\"#{@id}-trigger\"}\n      phx-click={toggle_menu(@id)}\n      class=\"contents\"\n    >\n      {render_slot(@trigger)}\n    </span>\n    <div\n      id={\"#{@id}-content\"}\n      role=\"menu\"\n      tabindex=\"-1\"\n      data-slot=\"dropdown-menu-content\"\n      phx-hook=\"ShadixDropdownMenu\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-on-close={hide_menu(@id)}\n      class={[\"hidden fixed left-0 top-0 z-50 origin-top overflow-y-auto outline-none\", @class]}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that toggles the menu with `id`.\n\n  Toggles the content panel's visibility with enter/leave transitions. The\n  `ShadixDropdownMenu` hook reacts to the resulting visibility change to position\n  the menu and wire up keyboard/outside-click handling.\n  \"\"\"\n  def toggle_menu(id) do\n    JS.toggle(\n      to: \"##{id}-content\",\n      in: {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"},\n      out: {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the menu with `id`.\n\n  Hides the content panel with a leave transition. Used by the hook's\n  `data-on-close` (Escape / Tab / outside click) and by menu items on select.\n  \"\"\"\n  def hide_menu(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  A selectable menu item.\n\n  `:id` is the *menu's* id (not the item's). On click it runs the caller's\n  `:on_select` JS and then closes the menu.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:on_select, JS, default: %JS{})\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def dropdown_menu_item(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"menuitem\"\n      tabindex=\"-1\"\n      data-slot=\"dropdown-menu-item\"\n      phx-click={\n        @on_select\n        |> JS.hide(\n          to: \"##{@id}-content\",\n          transition:\n            {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n        )\n      }\n      class={[\n        \"group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        @class\n      ]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A non-interactive group label within a dropdown menu.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def dropdown_menu_label(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"dropdown-menu-label\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A horizontal separator between dropdown menu sections.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def dropdown_menu_separator(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"separator\"\n      data-slot=\"dropdown-menu-separator\"\n      class={@class}\n      {@rest}\n    />\n    \"\"\"\n  end\n\n  @doc \"A trailing keyboard-shortcut hint within a dropdown menu item.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def dropdown_menu_shortcut(assigns) do\n    ~H\"\"\"\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\nend\n",
       "path": "dropdown_menu.ex"
     }
   ],
@@ -17,6 +18,10 @@
     "@floating-ui/dom"
   ],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"dropdown-menu-content\"] {\n    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100;\n  }\n\n  [data-slot=\"dropdown-menu-item\"] {\n    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"dropdown-menu-label\"] {\n    @apply text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7;\n  }\n\n  [data-slot=\"dropdown-menu-separator\"] {\n    @apply bg-border -mx-1 my-1 h-px;\n  }\n\n  [data-slot=\"dropdown-menu-shortcut\"] {\n    @apply text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"dropdown-menu-content\"] {\n    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100;\n  }\n\n  [data-slot=\"dropdown-menu-item\"] {\n    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"dropdown-menu-label\"] {\n    @apply text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8;\n  }\n\n  [data-slot=\"dropdown-menu-separator\"] {\n    @apply bg-border -mx-1 my-1 h-px;\n  }\n\n  [data-slot=\"dropdown-menu-shortcut\"] {\n    @apply text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/hover_card.json b/priv/registry/hover_card.json
index f1dc3a6..c106d37 100644
--- a/priv/registry/hover_card.json
+++ b/priv/registry/hover_card.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.HoverCard do\n  @moduledoc \"\"\"\n  A hover-triggered rich card built on client-side JS commands, Floating UI, and\n  a small LiveView hook.\n\n  Like the tooltip, this is a portal-free, fully client-driven overlay opened by\n  *hover* rather than click: the `ShadixHoverCard` hook (assets/ts/hover_card.ts)\n  attaches `mouseenter` / `focusin` and `mouseleave` / `focusout` listeners to\n  the trigger, running the content's `data-on-open` / `data-on-close`\n  `Phoenix.LiveView.JS` commands (which run enter/leave transitions) and\n  positioning the content relative to the trigger with `@floating-ui/dom`\n  (`computePosition` + `autoUpdate`, `bottom` placement). There is no keyboard\n  navigation or click-outside handling — it simply follows the pointer/focus.\n\n  Trigger and content ids are derived from the required `:id` so `data-trigger`\n  and the JS targets line up stably.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders a hover card with a `:trigger` slot and arbitrary card content.\n\n  The trigger is wrapped in a `display: contents` span wired to mouse/focus\n  events, so the caller's own element opens the card without extra markup. The\n  content `<div>` carries the `ShadixHoverCard` hook and is positioned by\n  Floating UI at open time.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def hover_card(assigns) do\n    ~H\"\"\"\n    <span id={\"#{@id}-trigger\"} data-slot=\"hover-card-trigger\" class=\"contents\">\n      {render_slot(@trigger)}\n    </span>\n    <div\n      id={\"#{@id}-content\"}\n      data-slot=\"hover-card-content\"\n      phx-hook=\"ShadixHoverCard\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-on-open={show_hover_card(@id)}\n      data-on-close={hide_hover_card(@id)}\n      class={\n        cn([\n          \"hidden fixed left-0 top-0 z-50 w-64 origin-top rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none\",\n          @class\n        ])\n      }\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that shows the hover card with `id`.\n\n  Shows the content panel with an enter transition and dispatches\n  `shadix:hover-card-open` so the `ShadixHoverCard` hook positions it under the\n  trigger with Floating UI.\n  \"\"\"\n  def show_hover_card(id) do\n    %JS{}\n    |> JS.show(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-out duration-150\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"}\n    )\n    |> JS.dispatch(\"shadix:hover-card-open\", to: \"##{id}-content\")\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that hides the hover card with `id`.\n\n  Hides the content panel with a leave transition and dispatches\n  `shadix:hover-card-close` so the `ShadixHoverCard` hook stops positioning it.\n  \"\"\"\n  def hide_hover_card(id) do\n    %JS{}\n    |> JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-100\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n    |> JS.dispatch(\"shadix:hover-card-close\", to: \"##{id}-content\")\n  end\nend\n",
+      "content": "defmodule Shadix.Components.HoverCard do\n  @moduledoc \"\"\"\n  A hover-triggered rich card built on client-side JS commands, Floating UI, and\n  a small LiveView hook.\n\n  Like the tooltip, this is a portal-free, fully client-driven overlay opened by\n  *hover* rather than click: the `ShadixHoverCard` hook (assets/ts/hover_card.ts)\n  attaches `mouseenter` / `focusin` and `mouseleave` / `focusout` listeners to\n  the trigger, running the content's `data-on-open` / `data-on-close`\n  `Phoenix.LiveView.JS` commands (which run enter/leave transitions) and\n  positioning the content relative to the trigger with `@floating-ui/dom`\n  (`computePosition` + `autoUpdate`, `bottom` placement). There is no keyboard\n  navigation or click-outside handling — it simply follows the pointer/focus.\n\n  Trigger and content ids are derived from the required `:id` so `data-trigger`\n  and the JS targets line up stably.\n\n  Each element carries a stable `data-slot` for styling/targeting. Styling lives\n  in the colocated `priv/styles/<skin>/hover_card.css` (selected by `data-slot`);\n  caller-supplied `class` is appended last so Tailwind cascade layers ensure it\n  wins over the defaults. The `hidden fixed left-0 top-0` markers on the content\n  stay inline because they drive the JS show/hide and Floating UI positioning.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  @doc \"\"\"\n  Renders a hover card with a `:trigger` slot and arbitrary card content.\n\n  The trigger is wrapped in a `display: contents` span wired to mouse/focus\n  events, so the caller's own element opens the card without extra markup. The\n  content `<div>` carries the `ShadixHoverCard` hook and is positioned by\n  Floating UI at open time.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def hover_card(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <span id={\"#{@id}-trigger\"} data-slot=\"hover-card-trigger\" class=\"contents\">\n      {render_slot(@trigger)}\n    </span>\n    <div\n      id={\"#{@id}-content\"}\n      data-slot=\"hover-card-content\"\n      phx-hook=\"ShadixHoverCard\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-on-open={show_hover_card(@id)}\n      data-on-close={hide_hover_card(@id)}\n      class={[\"hidden fixed left-0 top-0 origin-top\", @class]}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that shows the hover card with `id`.\n\n  Shows the content panel with an enter transition and dispatches\n  `shadix:hover-card-open` so the `ShadixHoverCard` hook positions it under the\n  trigger with Floating UI.\n  \"\"\"\n  def show_hover_card(id) do\n    %JS{}\n    |> JS.show(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-out duration-150\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"}\n    )\n    |> JS.dispatch(\"shadix:hover-card-open\", to: \"##{id}-content\")\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that hides the hover card with `id`.\n\n  Hides the content panel with a leave transition and dispatches\n  `shadix:hover-card-close` so the `ShadixHoverCard` hook stops positioning it.\n  \"\"\"\n  def hide_hover_card(id) do\n    %JS{}\n    |> JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-100\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n    |> JS.dispatch(\"shadix:hover-card-close\", to: \"##{id}-content\")\n  end\nend\n",
       "path": "hover_card.ex"
     }
   ],
@@ -17,6 +18,10 @@
     "@floating-ui/dom"
   ],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"hover-card-content\"] {\n    @apply z-50 origin-(--radix-hover-card-content-transform-origin) outline-hidden data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"hover-card-content\"] {\n    @apply z-50 origin-(--radix-hover-card-content-transform-origin) outline-hidden data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-4 text-sm shadow-md ring-1 duration-100;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/input.json b/priv/registry/input.json
index efcab99..3028ede 100644
--- a/priv/registry/input.json
+++ b/priv/registry/input.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Input do\n  @moduledoc \"\"\"\n  Input component translated from shadcn/ui (new-york-v4).\n\n  Renders a void `<input>` element with `data-slot=\"input\"`. No variants.\n  Caller-supplied `class` is appended last; Tailwind cascade layers ensure it\n  wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @base \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\"\n\n  attr(:type, :string, default: \"text\")\n  attr(:class, :string, default: nil)\n\n  attr(:rest, :global,\n    include:\n      ~w(name value placeholder disabled required readonly autocomplete autofocus min max step pattern inputmode maxlength minlength multiple size list form)\n  )\n\n  def input(assigns) do\n    class = cn([@base, assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <input type={@type} data-slot=\"input\" class={@computed_class} {@rest} />\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Input do\n  @moduledoc \"\"\"\n  Input component translated from shadcn/ui.\n\n  Renders a void `<input>` element with `data-slot=\"input\"`. No variants.\n  Styling is delivered via colocated CSS (`priv/styles/<skin>/input.css`);\n  caller-supplied `class` is appended last so it can override defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:type, :string, default: \"text\")\n  attr(:class, :string, default: nil)\n\n  attr(:rest, :global,\n    include:\n      ~w(name value placeholder disabled required readonly autocomplete autofocus min max step pattern inputmode maxlength minlength multiple size list form)\n  )\n\n  def input(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <input type={@type} data-slot=\"input\" class={@class} {@rest} />\n    \"\"\"\n  end\nend\n",
       "path": "input.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "input",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"input\"] {\n    @apply w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"input\"] {\n    @apply w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/input_otp.json b/priv/registry/input_otp.json
index 41077b7..2f488d8 100644
--- a/priv/registry/input_otp.json
+++ b/priv/registry/input_otp.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.InputOtp do\n  @moduledoc \"\"\"\n  A segmented one-time-code input.\n\n  The shadcn/ui original wraps the `input-otp` npm library; this is a minimal\n  reimplementation in pure Phoenix + a small LiveView hook. `input_otp/1` renders\n  `@length` single-character text slots (`inputmode=\"numeric\"`, `maxlength=\"1\"`)\n  inside a flex row plus one hidden input (`data-otp-value`) carrying the\n  concatenated value for form submission.\n\n  The `ShadixInputOtp` hook (assets/ts/input_otp.ts) lives on the container and\n  drives the behavior JS commands can't: typing a digit advances focus to the\n  next slot, `Backspace` on an empty slot moves back, arrow keys move between\n  slots, paste fills across slots, and the hidden input is kept in sync (with an\n  `input` event dispatched so LiveView/forms observe changes).\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @slot_class \"size-9 rounded-md border border-input bg-transparent text-center text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30\"\n\n  @doc \"\"\"\n  Renders a segmented OTP input made of `@length` single-character slots and a\n  hidden input (`name={@name}`) holding the concatenated value.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:length, :integer, default: 6)\n  attr(:name, :string, default: nil)\n  attr(:label, :string, default: \"One-time code\")\n  attr(:class, :string, default: nil)\n\n  def input_otp(assigns) do\n    assigns = assign(assigns, :slot_class, @slot_class)\n\n    ~H\"\"\"\n    <div\n      id={@id}\n      phx-hook=\"ShadixInputOtp\"\n      data-slot=\"input-otp\"\n      role=\"group\"\n      aria-label={@label}\n      class={cn([\"flex items-center gap-2 has-disabled:opacity-50\", @class])}\n    >\n      <input\n        :for={i <- 0..(@length - 1)}\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete={if(i == 0, do: \"one-time-code\", else: \"off\")}\n        maxlength=\"1\"\n        data-slot=\"input-otp-slot\"\n        data-otp-index={i}\n        aria-label={\"Digit #{i + 1}\"}\n        tabindex={if(i == 0, do: \"0\", else: \"-1\")}\n        class={@slot_class}\n      />\n      <input type=\"hidden\" name={@name} data-otp-value value=\"\" />\n    </div>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.InputOtp do\n  @moduledoc \"\"\"\n  A segmented one-time-code input.\n\n  The shadcn/ui original wraps the `input-otp` npm library; this is a minimal\n  reimplementation in pure Phoenix + a small LiveView hook. `input_otp/1` renders\n  `@length` single-character text slots (`inputmode=\"numeric\"`, `maxlength=\"1\"`)\n  inside a flex row plus one hidden input (`data-otp-value`) carrying the\n  concatenated value for form submission.\n\n  Styling is delivered via colocated CSS keyed on the `data-slot` attributes\n  (`input-otp` on the container, `input-otp-slot` on each digit); see\n  `priv/styles/{nova,vega}/input_otp.css`.\n\n  The `ShadixInputOtp` hook (assets/ts/input_otp.ts) lives on the container and\n  drives the behavior JS commands can't: typing a digit advances focus to the\n  next slot, `Backspace` on an empty slot moves back, arrow keys move between\n  slots, paste fills across slots, and the hidden input is kept in sync (with an\n  `input` event dispatched so LiveView/forms observe changes).\n  \"\"\"\n  use Phoenix.Component\n\n  @doc \"\"\"\n  Renders a segmented OTP input made of `@length` single-character slots and a\n  hidden input (`name={@name}`) holding the concatenated value.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:length, :integer, default: 6)\n  attr(:name, :string, default: nil)\n  attr(:label, :string, default: \"One-time code\")\n  attr(:class, :string, default: nil)\n\n  def input_otp(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div\n      id={@id}\n      phx-hook=\"ShadixInputOtp\"\n      data-slot=\"input-otp\"\n      role=\"group\"\n      aria-label={@label}\n      class={@class}\n    >\n      <input\n        :for={i <- 0..(@length - 1)}\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete={if(i == 0, do: \"one-time-code\", else: \"off\")}\n        maxlength=\"1\"\n        data-slot=\"input-otp-slot\"\n        data-otp-index={i}\n        aria-label={\"Digit #{i + 1}\"}\n        tabindex={if(i == 0, do: \"0\", else: \"-1\")}\n      />\n      <input type=\"hidden\" name={@name} data-otp-value value=\"\" />\n    </div>\n    \"\"\"\n  end\nend\n",
       "path": "input_otp.ex"
     }
   ],
@@ -15,6 +16,10 @@
   "name": "input_otp",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  /*\n   * Structural divergence from shadcn: shadcn's input-otp wraps the `input-otp`\n   * npm library, rendering a single hidden OTPInput plus per-character <div>\n   * slots whose \"active\" state is driven by the library via data-[active=true].\n   * Shadix renders one native <input> per character (focusable, roving\n   * tabindex), so the active state is real :focus-visible, not data-[active].\n   * The skin bodies below are copied verbatim from .cn-input-otp* with\n   * data-[active=true]: rewritten to focus-visible: and the native-input\n   * necessities (text-center, bg-transparent, disabled affordances) added.\n   */\n  [data-slot=\"input-otp\"] {\n    @apply flex items-center has-disabled:opacity-50 gap-2;\n  }\n\n  [data-slot=\"input-otp-slot\"] {\n    @apply relative flex items-center justify-center focus-visible:z-10 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:aria-invalid:ring-destructive/20 dark:focus-visible:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-visible:aria-invalid:border-destructive size-8 border-y border-r text-center text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg focus-visible:ring-3 bg-transparent disabled:cursor-not-allowed disabled:opacity-50;\n  }\n}\n",
+    "vega": "@layer components {\n  /*\n   * Structural divergence from shadcn: shadcn's input-otp wraps the `input-otp`\n   * npm library, rendering a single hidden OTPInput plus per-character <div>\n   * slots whose \"active\" state is driven by the library via data-[active=true].\n   * Shadix renders one native <input> per character (focusable, roving\n   * tabindex), so the active state is real :focus-visible, not data-[active].\n   * The skin bodies below are copied verbatim from .cn-input-otp* with\n   * data-[active=true]: rewritten to focus-visible: and the native-input\n   * necessities (text-center, bg-transparent, disabled affordances) added.\n   */\n  [data-slot=\"input-otp\"] {\n    @apply flex items-center has-disabled:opacity-50 gap-2;\n  }\n\n  [data-slot=\"input-otp-slot\"] {\n    @apply relative flex items-center justify-center focus-visible:z-10 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:aria-invalid:ring-destructive/20 dark:focus-visible:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-visible:aria-invalid:border-destructive size-9 border-y border-r text-center text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md focus-visible:ring-3 bg-transparent disabled:cursor-not-allowed disabled:opacity-50;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/menubar.json b/priv/registry/menubar.json
index ec6c728..d185c5e 100644
--- a/priv/registry/menubar.json
+++ b/priv/registry/menubar.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Menubar do\n  @moduledoc \"\"\"\n  A horizontal bar of menus, like a desktop application's menubar (File, Edit,\n  View, ...), built on client-side JS commands, Floating UI, and the\n  `ShadixMenubar` LiveView hook (assets/ts/menubar.ts).\n\n  Each menu is a trigger button (`role=\"menuitem\"`, `aria-haspopup=\"menu\"`)\n  paired with a Floating-UI-positioned content panel (`role=\"menu\"`). The\n  trigger toggles its panel with `toggle_menu/1` (enter/leave transitions); the\n  hook watches each panel's visibility with a `MutationObserver`, positions it\n  under its trigger with `@floating-ui/dom` (`computePosition` + `autoUpdate`,\n  `bottom-start`/`flip`/`shift`), and coordinates the bar as a whole.\n\n  Coordination handled by the hook:\n\n    * clicking a trigger opens that menu's content below it;\n    * `ArrowLeft`/`ArrowRight` move focus between menu triggers (roving),\n      wrapping at the ends;\n    * while any menu is open, focusing/hovering another trigger switches the\n      open menu to it;\n    * `ArrowUp`/`ArrowDown`/`Home`/`End` move between the open menu's items;\n    * `Escape` closes the open menu and returns focus to its trigger;\n    * a pointerdown outside the bar closes the open menu.\n\n  Simplifications for this v1 (noted per the brief):\n\n    * no submenus, checkbox/radio items, or item groups (shadcn's\n      `MenubarSub*`, `MenubarCheckboxItem`, `MenubarRadioItem`, `MenubarGroup`\n      are not ported);\n    * triggers do not auto-open on hover before the first click — a menu must be\n      opened by click (or keyboard) first, after which hovering siblings\n      switches between them, matching the shadcn \"menubar feels open once you\n      click\" behaviour.\n\n  Each menu's trigger and content ids are derived from the required `:id` so\n  `aria-controls`, `data-trigger`, and the JS targets line up stably. All menus\n  within a bar should share a common id prefix (e.g. `\"app-menubar-file\"`,\n  `\"app-menubar-edit\"`) and the bar carries the `phx-hook` so it can find them.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders the horizontal menubar container.\n\n  Carries `role=\"menubar\"`, `data-slot=\"menubar\"`, and the `ShadixMenubar`\n  hook, which discovers the child `menubar_menu/1` triggers/contents and wires\n  up cross-menu keyboard navigation and open/close coordination. The inner block\n  holds one `menubar_menu/1` per top-level menu.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def menubar(assigns) do\n    ~H\"\"\"\n    <div\n      id={@id}\n      role=\"menubar\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"menubar\"\n      phx-hook=\"ShadixMenubar\"\n      class={\n        cn([\n          \"flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Renders a single menu within the bar: a trigger button plus its content panel.\n\n  The trigger is a `<button role=\"menuitem\" aria-haspopup=\"menu\">` carrying\n  `data-slot=\"menubar-trigger\"`; clicking it toggles the content panel via\n  `toggle_menu/1`. The content is a `<div role=\"menu\">` carrying\n  `data-slot=\"menubar-content\"` and the `data-trigger`/`data-on-close` wiring the\n  `ShadixMenubar` hook uses to position and close it. The `:label` is the text\n  shown on the trigger; the inner block holds the menu items.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:label, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:content_class, :string, default: nil)\n  slot(:inner_block, required: true)\n\n  def menubar_menu(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      id={\"#{@id}-trigger\"}\n      role=\"menuitem\"\n      data-slot=\"menubar-trigger\"\n      tabindex=\"-1\"\n      phx-click={toggle_menu(@id)}\n      aria-haspopup=\"menu\"\n      aria-expanded=\"false\"\n      aria-controls={\"#{@id}-content\"}\n      class={\n        cn([\n          \"flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground\",\n          @class\n        ])\n      }\n    >\n      {@label}\n    </button>\n    <div\n      id={\"#{@id}-content\"}\n      role=\"menu\"\n      tabindex=\"-1\"\n      data-slot=\"menubar-content\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-on-open={show_menu(@id)}\n      data-on-close={hide_menu(@id)}\n      class={\n        cn([\n          \"hidden fixed left-0 top-0 z-50 min-w-[12rem] origin-top-left overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md\",\n          @content_class\n        ])\n      }\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that toggles the menu with `id`.\n\n  Toggles the content panel's visibility with enter/leave transitions. The\n  `ShadixMenubar` hook reacts to the visibility change to position the panel and\n  switch the bar's open menu.\n  \"\"\"\n  def toggle_menu(id) do\n    JS.toggle(\n      to: \"##{id}-content\",\n      in: {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"},\n      out: {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that opens the menu with `id`.\n\n  Shows the content panel with an enter transition. Used by the hook's\n  `data-on-open` when switching the open menu via arrow keys or hover.\n  \"\"\"\n  def show_menu(id) do\n    JS.show(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the menu with `id`.\n\n  Hides the content panel with a leave transition. Used by the hook's\n  `data-on-close` (Escape / outside click / switching menus) and by menu items\n  on select.\n  \"\"\"\n  def hide_menu(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  A selectable menu item.\n\n  `:id` is the *menu's* id (not the item's). On click it runs the caller's\n  `:on_select` JS and then closes that menu.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:on_select, JS, default: %JS{})\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def menubar_item(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"menuitem\"\n      tabindex=\"-1\"\n      data-slot=\"menubar-item\"\n      phx-click={\n        @on_select\n        |> JS.hide(\n          to: \"##{@id}-content\",\n          transition:\n            {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n        )\n      }\n      class={\n        cn([\n          \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A non-interactive group label within a menu.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def menubar_label(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"menubar-label\"\n      class={cn([\"px-2 py-1.5 text-sm font-medium\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A horizontal separator between menu sections.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def menubar_separator(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"separator\"\n      data-slot=\"menubar-separator\"\n      class={cn([\"-mx-1 my-1 h-px bg-border\", @class])}\n      {@rest}\n    />\n    \"\"\"\n  end\n\n  @doc \"A trailing keyboard-shortcut hint within a menu item.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def menubar_shortcut(assigns) do\n    ~H\"\"\"\n    <span\n      data-slot=\"menubar-shortcut\"\n      class={cn([\"ml-auto text-xs tracking-widest text-muted-foreground\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Menubar do\n  @moduledoc \"\"\"\n  A horizontal bar of menus, like a desktop application's menubar (File, Edit,\n  View, ...), built on client-side JS commands, Floating UI, and the\n  `ShadixMenubar` LiveView hook (assets/ts/menubar.ts).\n\n  Each menu is a trigger button (`role=\"menuitem\"`, `aria-haspopup=\"menu\"`)\n  paired with a Floating-UI-positioned content panel (`role=\"menu\"`). The\n  trigger toggles its panel with `toggle_menu/1` (enter/leave transitions); the\n  hook watches each panel's visibility with a `MutationObserver`, positions it\n  under its trigger with `@floating-ui/dom` (`computePosition` + `autoUpdate`,\n  `bottom-start`/`flip`/`shift`), and coordinates the bar as a whole.\n\n  Coordination handled by the hook:\n\n    * clicking a trigger opens that menu's content below it;\n    * `ArrowLeft`/`ArrowRight` move focus between menu triggers (roving),\n      wrapping at the ends;\n    * while any menu is open, focusing/hovering another trigger switches the\n      open menu to it;\n    * `ArrowUp`/`ArrowDown`/`Home`/`End` move between the open menu's items;\n    * `Escape` closes the open menu and returns focus to its trigger;\n    * a pointerdown outside the bar closes the open menu.\n\n  Simplifications for this v1 (noted per the brief):\n\n    * no submenus, checkbox/radio items, or item groups (shadcn's\n      `MenubarSub*`, `MenubarCheckboxItem`, `MenubarRadioItem`, `MenubarGroup`\n      are not ported);\n    * triggers do not auto-open on hover before the first click — a menu must be\n      opened by click (or keyboard) first, after which hovering siblings\n      switches between them, matching the shadcn \"menubar feels open once you\n      click\" behaviour.\n\n  Each menu's trigger and content ids are derived from the required `:id` so\n  `aria-controls`, `data-trigger`, and the JS targets line up stably. All menus\n  within a bar should share a common id prefix (e.g. `\"app-menubar-file\"`,\n  `\"app-menubar-edit\"`) and the bar carries the `phx-hook` so it can find them.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  @doc \"\"\"\n  Renders the horizontal menubar container.\n\n  Carries `role=\"menubar\"`, `data-slot=\"menubar\"`, and the `ShadixMenubar`\n  hook, which discovers the child `menubar_menu/1` triggers/contents and wires\n  up cross-menu keyboard navigation and open/close coordination. The inner block\n  holds one `menubar_menu/1` per top-level menu.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def menubar(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div\n      id={@id}\n      role=\"menubar\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"menubar\"\n      phx-hook=\"ShadixMenubar\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Renders a single menu within the bar: a trigger button plus its content panel.\n\n  The trigger is a `<button role=\"menuitem\" aria-haspopup=\"menu\">` carrying\n  `data-slot=\"menubar-trigger\"`; clicking it toggles the content panel via\n  `toggle_menu/1`. The content is a `<div role=\"menu\">` carrying\n  `data-slot=\"menubar-content\"` and the `data-trigger`/`data-on-close` wiring the\n  `ShadixMenubar` hook uses to position and close it. The `:label` is the text\n  shown on the trigger; the inner block holds the menu items.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:label, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:content_class, :string, default: nil)\n  slot(:inner_block, required: true)\n\n  def menubar_menu(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      id={\"#{@id}-trigger\"}\n      role=\"menuitem\"\n      data-slot=\"menubar-trigger\"\n      tabindex=\"-1\"\n      phx-click={toggle_menu(@id)}\n      aria-haspopup=\"menu\"\n      aria-expanded=\"false\"\n      aria-controls={\"#{@id}-content\"}\n      class={@class}\n    >\n      {@label}\n    </button>\n    <div\n      id={\"#{@id}-content\"}\n      role=\"menu\"\n      tabindex=\"-1\"\n      data-slot=\"menubar-content\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-on-open={show_menu(@id)}\n      data-on-close={hide_menu(@id)}\n      class={[\"hidden fixed left-0 top-0 z-50 origin-top-left overflow-y-auto outline-none\", @content_class]}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that toggles the menu with `id`.\n\n  Toggles the content panel's visibility with enter/leave transitions. The\n  `ShadixMenubar` hook reacts to the visibility change to position the panel and\n  switch the bar's open menu.\n  \"\"\"\n  def toggle_menu(id) do\n    JS.toggle(\n      to: \"##{id}-content\",\n      in: {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"},\n      out: {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that opens the menu with `id`.\n\n  Shows the content panel with an enter transition. Used by the hook's\n  `data-on-open` when switching the open menu via arrow keys or hover.\n  \"\"\"\n  def show_menu(id) do\n    JS.show(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the menu with `id`.\n\n  Hides the content panel with a leave transition. Used by the hook's\n  `data-on-close` (Escape / outside click / switching menus) and by menu items\n  on select.\n  \"\"\"\n  def hide_menu(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  A selectable menu item.\n\n  `:id` is the *menu's* id (not the item's). On click it runs the caller's\n  `:on_select` JS and then closes that menu.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:on_select, JS, default: %JS{})\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def menubar_item(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"menuitem\"\n      tabindex=\"-1\"\n      data-slot=\"menubar-item\"\n      phx-click={\n        @on_select\n        |> JS.hide(\n          to: \"##{@id}-content\",\n          transition:\n            {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n        )\n      }\n      class={[\"group/menubar-item\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A non-interactive group label within a menu.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def menubar_label(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"menubar-label\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A horizontal separator between menu sections.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def menubar_separator(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"separator\"\n      data-slot=\"menubar-separator\"\n      class={@class}\n      {@rest}\n    />\n    \"\"\"\n  end\n\n  @doc \"A trailing keyboard-shortcut hint within a menu item.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def menubar_shortcut(assigns) do\n    ~H\"\"\"\n    <span\n      data-slot=\"menubar-shortcut\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\nend\n",
       "path": "menubar.ex"
     }
   ],
@@ -17,6 +18,10 @@
     "@floating-ui/dom"
   ],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"menubar\"] {\n    @apply flex items-center h-8 gap-0.5 rounded-lg border p-[3px];\n  }\n\n  [data-slot=\"menubar-trigger\"] {\n    @apply flex items-center outline-hidden select-none hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium;\n  }\n\n  [data-slot=\"menubar-content\"] {\n    @apply bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 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 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100;\n  }\n\n  [data-slot=\"menubar-item\"] {\n    @apply relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"menubar-label\"] {\n    @apply px-1.5 py-1 text-sm font-medium data-inset:pl-7;\n  }\n\n  [data-slot=\"menubar-separator\"] {\n    @apply -mx-1 my-1 h-px bg-border;\n  }\n\n  [data-slot=\"menubar-shortcut\"] {\n    @apply ml-auto text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"menubar\"] {\n    @apply flex items-center h-9 gap-1 rounded-md border p-1 shadow-xs;\n  }\n\n  [data-slot=\"menubar-trigger\"] {\n    @apply flex items-center outline-hidden select-none hover:bg-muted aria-expanded:bg-muted rounded-sm px-2 py-1 text-sm font-medium;\n  }\n\n  [data-slot=\"menubar-content\"] {\n    @apply bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 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 ring-foreground/10 min-w-36 rounded-md p-1 shadow-md ring-1 duration-100;\n  }\n\n  [data-slot=\"menubar-item\"] {\n    @apply relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"menubar-label\"] {\n    @apply px-2 py-1.5 text-sm font-medium data-inset:pl-8;\n  }\n\n  [data-slot=\"menubar-separator\"] {\n    @apply -mx-1 my-1 h-px bg-border;\n  }\n\n  [data-slot=\"menubar-shortcut\"] {\n    @apply ml-auto text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/navigation_menu.json b/priv/registry/navigation_menu.json
index 9186559..c01eace 100644
--- a/priv/registry/navigation_menu.json
+++ b/priv/registry/navigation_menu.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.NavigationMenu do\n  @moduledoc ~S\"\"\"\n  A site navigation menu with dropdown panels, built on client-side JS commands,\n  Floating UI, and a small LiveView hook.\n\n  Each `navigation_menu_trigger/1` is a `<button>` whose `phx-click` toggles its\n  paired `navigation_menu_content/1` dropdown panel. The `ShadixNavigationMenu`\n  hook (assets/ts/navigation_menu.ts) lives on each content panel: it watches the\n  panel's visibility via a `MutationObserver`, positions it under the trigger with\n  `@floating-ui/dom` (`computePosition` + `autoUpdate`, `bottom-start`/`flip`/\n  `shift`), syncs the trigger's `aria-expanded` and `data-state` (driving the\n  chevron rotation), opens on trigger hover, and closes on outside pointerdown or\n  Escape.\n\n  Trigger and content ids are derived from the required `:id` so `aria-controls`,\n  `data-trigger`, and the JS targets line up stably.\n\n  NOTE: This is a focused v1. Compared to the shadcn/Radix original it omits the\n  shared animated viewport, motion direction animations (`data-motion`), the\n  active-link indicator, and pointer-grace hand-off between adjacent panels. Each\n  trigger simply opens its own panel positioned below it; links navigate. Single\n  open-at-a-time across siblings is also not enforced (panels toggle\n  independently).\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders the navigation menu root.\n\n  A `<nav role=\"navigation\">` wrapper carrying `data-slot=\"navigation-menu\"`.\n  Contains a single `navigation_menu_list/1` of items.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def navigation_menu(assigns) do\n    ~H\"\"\"\n    <nav\n      role=\"navigation\"\n      data-slot=\"navigation-menu\"\n      class={cn([\"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </nav>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The horizontal list of navigation items.\n\n  Renders a `<ul>` with `data-slot=\"navigation-menu-list\"`. Children are\n  `navigation_menu_item/1`s.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def navigation_menu_list(assigns) do\n    ~H\"\"\"\n    <ul\n      data-slot=\"navigation-menu-list\"\n      class={cn([\"group flex flex-1 list-none items-center justify-center gap-1\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </ul>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A single navigation item; wraps a trigger + content, or a link.\n\n  Renders an `<li>` with `data-slot=\"navigation-menu-item\"`.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def navigation_menu_item(assigns) do\n    ~H\"\"\"\n    <li data-slot=\"navigation-menu-item\" class={cn([\"relative\", @class])} {@rest}>\n      {render_slot(@inner_block)}\n    </li>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  The clickable trigger for a dropdown panel. `:id` is the *item* id.\n\n  Renders `<button id=\"#{id}-trigger\">` with `aria-controls=\"#{id}-content\"`\n  and `aria-expanded` (kept in sync by the hook) — a disclosure button, matching\n  base-ui/Radix (no `aria-haspopup`, since the panel holds links, not a\n  `role=\"menu\"`). A chevron SVG rotates when\n  `data-state=\"open\"`. `phx-click` toggles the paired content panel; `mouseenter`\n  opens it.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def navigation_menu_trigger(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      id={\"#{@id}-trigger\"}\n      data-slot=\"navigation-menu-trigger\"\n      data-state=\"closed\"\n      aria-expanded=\"false\"\n      aria-controls={\"#{@id}-content\"}\n      phx-click={toggle_content(@id)}\n      phx-mouseenter={show_content(@id)}\n      class={\n        cn([\n          \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent [&[data-state=open]>svg]:rotate-180\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n        class=\"relative top-[1px] ml-1 size-3 transition duration-300\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  The dropdown panel for a trigger. `:id` is the *item* id.\n\n  Renders `<div id=\"#{id}-content\">`, hidden by default (the `hidden` class). The\n  `ShadixNavigationMenu` hook here positions the panel under the\n  `\"#{id}-trigger\"` button with Floating UI, syncs the trigger's\n  `aria-expanded`/`data-state`, and closes the panel on outside pointerdown /\n  Escape via the `data-on-close` JS.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def navigation_menu_content(assigns) do\n    ~H\"\"\"\n    <div\n      id={\"#{@id}-content\"}\n      data-slot=\"navigation-menu-content\"\n      data-state=\"closed\"\n      data-trigger={\"#{@id}-trigger\"}\n      phx-hook=\"ShadixNavigationMenu\"\n      data-on-close={hide_content(@id)}\n      class={\n        cn([\n          \"hidden fixed left-0 top-0 z-50 w-max overflow-hidden rounded-md border bg-popover p-2 text-popover-foreground shadow\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A styled navigation link.\n\n  Renders an `<a data-slot=\"navigation-menu-link\">`. Pass `href` (and any of\n  `target`/`rel`/etc.) via the global attrs.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(href hreflang target rel download))\n  slot(:inner_block, required: true)\n\n  def navigation_menu_link(assigns) do\n    ~H\"\"\"\n    <a\n      data-slot=\"navigation-menu-link\"\n      class={\n        cn([\n          \"flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </a>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that toggles the panel with `id`.\n\n  The `ShadixNavigationMenu` hook reacts to the resulting visibility change to\n  position the panel and wire up outside-click / Escape handling.\n  \"\"\"\n  def toggle_content(id) do\n    JS.toggle(\n      to: \"##{id}-content\",\n      in: {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"},\n      out: {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that shows the panel with `id`.\n\n  Used by the trigger's `mouseenter` to open the panel on hover.\n  \"\"\"\n  def show_content(id) do\n    JS.show(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the panel with `id`.\n\n  Used by the hook's `data-on-close` (Escape / outside click).\n  \"\"\"\n  def hide_content(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\nend\n",
+      "content": "defmodule Shadix.Components.NavigationMenu do\n  @moduledoc ~S\"\"\"\n  A site navigation menu with dropdown panels, built on client-side JS commands,\n  Floating UI, and a small LiveView hook.\n\n  Each `navigation_menu_trigger/1` is a `<button>` whose `phx-click` toggles its\n  paired `navigation_menu_content/1` dropdown panel. The `ShadixNavigationMenu`\n  hook (assets/ts/navigation_menu.ts) lives on each content panel: it watches the\n  panel's visibility via a `MutationObserver`, positions it under the trigger with\n  `@floating-ui/dom` (`computePosition` + `autoUpdate`, `bottom-start`/`flip`/\n  `shift`), syncs the trigger's `aria-expanded` and `data-state` (driving the\n  chevron rotation), opens on trigger hover, and closes on outside pointerdown or\n  Escape.\n\n  Trigger and content ids are derived from the required `:id` so `aria-controls`,\n  `data-trigger`, and the JS targets line up stably.\n\n  Styling lives in the colocated `priv/styles/{nova,vega}/navigation_menu.css`\n  skins, keyed by each element's `data-slot`; the component renders only the\n  stable `data-slot`/`data-state` markers plus the behavioral positioning and\n  `hidden` classes the JS hook toggles.\n\n  NOTE: This is a focused v1. Compared to the shadcn/Radix original it omits the\n  shared animated viewport, motion direction animations (`data-motion`), the\n  active-link indicator, and pointer-grace hand-off between adjacent panels. Each\n  trigger simply opens its own panel positioned below it; links navigate. Single\n  open-at-a-time across siblings is also not enforced (panels toggle\n  independently).\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  @doc \"\"\"\n  Renders the navigation menu root.\n\n  A `<nav role=\"navigation\">` wrapper carrying `data-slot=\"navigation-menu\"`.\n  Contains a single `navigation_menu_list/1` of items.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def navigation_menu(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <nav\n      role=\"navigation\"\n      data-slot=\"navigation-menu\"\n      class={[\"group/navigation-menu\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </nav>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The horizontal list of navigation items.\n\n  Renders a `<ul>` with `data-slot=\"navigation-menu-list\"`. Children are\n  `navigation_menu_item/1`s.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def navigation_menu_list(assigns) do\n    ~H\"\"\"\n    <ul data-slot=\"navigation-menu-list\" class={[\"group\", @class]} {@rest}>\n      {render_slot(@inner_block)}\n    </ul>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A single navigation item; wraps a trigger + content, or a link.\n\n  Renders an `<li>` with `data-slot=\"navigation-menu-item\"`.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def navigation_menu_item(assigns) do\n    ~H\"\"\"\n    <li data-slot=\"navigation-menu-item\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </li>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  The clickable trigger for a dropdown panel. `:id` is the *item* id.\n\n  Renders `<button id=\"#{id}-trigger\">` with `aria-controls=\"#{id}-content\"`\n  and `aria-expanded` (kept in sync by the hook) — a disclosure button, matching\n  base-ui/Radix (no `aria-haspopup`, since the panel holds links, not a\n  `role=\"menu\"`). A chevron SVG rotates when\n  `data-state=\"open\"`. `phx-click` toggles the paired content panel; `mouseenter`\n  opens it.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def navigation_menu_trigger(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      id={\"#{@id}-trigger\"}\n      data-slot=\"navigation-menu-trigger\"\n      data-state=\"closed\"\n      aria-expanded=\"false\"\n      aria-controls={\"#{@id}-content\"}\n      phx-click={toggle_content(@id)}\n      phx-mouseenter={show_content(@id)}\n      class={[\"group/navigation-menu-trigger group\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n        data-slot=\"navigation-menu-trigger-icon\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  The dropdown panel for a trigger. `:id` is the *item* id.\n\n  Renders `<div id=\"#{id}-content\">`, hidden by default (the `hidden` class). The\n  `ShadixNavigationMenu` hook here positions the panel under the\n  `\"#{id}-trigger\"` button with Floating UI, syncs the trigger's\n  `aria-expanded`/`data-state`, and closes the panel on outside pointerdown /\n  Escape via the `data-on-close` JS.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def navigation_menu_content(assigns) do\n    ~H\"\"\"\n    <div\n      id={\"#{@id}-content\"}\n      data-slot=\"navigation-menu-content\"\n      data-state=\"closed\"\n      data-trigger={\"#{@id}-trigger\"}\n      phx-hook=\"ShadixNavigationMenu\"\n      data-on-close={hide_content(@id)}\n      class={[\"hidden fixed left-0 top-0 z-50 w-max overflow-hidden\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A styled navigation link.\n\n  Renders an `<a data-slot=\"navigation-menu-link\">`. Pass `href` (and any of\n  `target`/`rel`/etc.) via the global attrs.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(href hreflang target rel download))\n  slot(:inner_block, required: true)\n\n  def navigation_menu_link(assigns) do\n    ~H\"\"\"\n    <a data-slot=\"navigation-menu-link\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </a>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that toggles the panel with `id`.\n\n  The `ShadixNavigationMenu` hook reacts to the resulting visibility change to\n  position the panel and wire up outside-click / Escape handling.\n  \"\"\"\n  def toggle_content(id) do\n    JS.toggle(\n      to: \"##{id}-content\",\n      in: {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"},\n      out: {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that shows the panel with `id`.\n\n  Used by the trigger's `mouseenter` to open the panel on hover.\n  \"\"\"\n  def show_content(id) do\n    JS.show(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the panel with `id`.\n\n  Used by the hook's `data-on-close` (Escape / outside click).\n  \"\"\"\n  def hide_content(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\nend\n",
       "path": "navigation_menu.ex"
     }
   ],
@@ -17,6 +18,10 @@
     "@floating-ui/dom"
   ],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"navigation-menu\"] {\n    @apply relative flex flex-1 items-center justify-center max-w-max;\n  }\n\n  [data-slot=\"navigation-menu-list\"] {\n    @apply flex flex-1 list-none items-center justify-center gap-0;\n  }\n\n  [data-slot=\"navigation-menu-item\"] {\n    @apply relative;\n  }\n\n  [data-slot=\"navigation-menu-trigger\"] {\n    @apply inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50;\n  }\n\n  [data-slot=\"navigation-menu-trigger-icon\"] {\n    @apply relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;\n  }\n\n  [data-slot=\"navigation-menu-content\"] {\n    @apply data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300;\n  }\n\n  [data-slot=\"navigation-menu-link\"] {\n    @apply data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"navigation-menu\"] {\n    @apply relative flex flex-1 items-center justify-center max-w-max;\n  }\n\n  [data-slot=\"navigation-menu-list\"] {\n    @apply flex flex-1 list-none items-center justify-center gap-0;\n  }\n\n  [data-slot=\"navigation-menu-item\"] {\n    @apply relative;\n  }\n\n  [data-slot=\"navigation-menu-trigger\"] {\n    @apply inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50;\n  }\n\n  [data-slot=\"navigation-menu-trigger-icon\"] {\n    @apply relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;\n  }\n\n  [data-slot=\"navigation-menu-content\"] {\n    @apply data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-2 pr-2.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300;\n  }\n\n  [data-slot=\"navigation-menu-link\"] {\n    @apply data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-md p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-sm;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/pagination.json b/priv/registry/pagination.json
index 4ac5864..4aff646 100644
--- a/priv/registry/pagination.json
+++ b/priv/registry/pagination.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Pagination do\n  @moduledoc \"\"\"\n  Pagination components translated from the shadcn/ui `pagination` component.\n\n  Presentational only; no navigation behavior is wired up. The button-ish\n  classes for `pagination_link/1` are lifted verbatim from shadcn's\n  `buttonVariants` (base + `outline`/`ghost` variant + `default`/`icon` size).\n  \"\"\"\n  use Phoenix.Component\n  import Shadix.Cn\n\n  @button_base \"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all 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 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n\n  @variant_outline \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\"\n  @variant_ghost \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\"\n\n  @sizes %{\n    \"default\" => \"h-9 px-4 py-2 has-[>svg]:px-3\",\n    \"icon\" => \"size-9\"\n  }\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def pagination(assigns) do\n    class = cn([\"mx-auto flex w-full justify-center\", assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      class={@computed_class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </nav>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def pagination_content(assigns) do\n    class = cn([\"flex flex-row items-center gap-1\", assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <ul data-slot=\"pagination-content\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </ul>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def pagination_item(assigns) do\n    class = cn([assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <li data-slot=\"pagination-item\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </li>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:is_active, :boolean, default: false)\n  attr(:size, :string, default: \"icon\", values: ~w(default icon))\n  attr(:rest, :global, include: ~w(href))\n  slot(:inner_block, required: true)\n\n  def pagination_link(assigns) do\n    variant = if assigns.is_active, do: @variant_outline, else: @variant_ghost\n\n    class =\n      cn([\n        @button_base,\n        variant,\n        Map.fetch!(@sizes, assigns.size),\n        assigns.class\n      ])\n\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <a\n      aria-current={if @is_active, do: \"page\"}\n      data-slot=\"pagination-link\"\n      data-active={to_string(@is_active)}\n      class={@computed_class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </a>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(href))\n  slot(:inner_block)\n\n  def pagination_previous(assigns) do\n    class =\n      cn([\n        @button_base,\n        @variant_ghost,\n        Map.fetch!(@sizes, \"default\"),\n        \"gap-1 px-2.5 sm:pl-2.5\",\n        assigns.class\n      ])\n\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <a\n      aria-label=\"Go to previous page\"\n      data-slot=\"pagination-link\"\n      data-active=\"false\"\n      class={@computed_class}\n      {@rest}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m15 18-6-6 6-6\" />\n      </svg>\n      <span class=\"hidden sm:block\">Previous</span>\n    </a>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(href))\n  slot(:inner_block)\n\n  def pagination_next(assigns) do\n    class =\n      cn([\n        @button_base,\n        @variant_ghost,\n        Map.fetch!(@sizes, \"default\"),\n        \"gap-1 px-2.5 sm:pr-2.5\",\n        assigns.class\n      ])\n\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <a\n      aria-label=\"Go to next page\"\n      data-slot=\"pagination-link\"\n      data-active=\"false\"\n      class={@computed_class}\n      {@rest}\n    >\n      <span class=\"hidden sm:block\">Next</span>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    </a>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def pagination_ellipsis(assigns) do\n    class = cn([\"flex size-9 items-center justify-center\", assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <span aria-hidden=\"true\" data-slot=\"pagination-ellipsis\" class={@computed_class} {@rest}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"1\" />\n        <circle cx=\"19\" cy=\"12\" r=\"1\" />\n        <circle cx=\"5\" cy=\"12\" r=\"1\" />\n      </svg>\n      <span class=\"sr-only\">More pages</span>\n    </span>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Pagination do\n  @moduledoc \"\"\"\n  Pagination components translated from the shadcn/ui `pagination` component.\n\n  Presentational only; no navigation behavior is wired up. Styling is supplied by\n  the colocated nova/vega skins; each element carries a stable `data-slot` (and\n  `data-active`/`data-size` on links) so the CSS can target it. The link-ish\n  elements mirror shadcn's button styling (outline when active, ghost otherwise;\n  `default`/`icon` sizes).\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def pagination(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </nav>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def pagination_content(assigns) do\n    ~H\"\"\"\n    <ul data-slot=\"pagination-content\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </ul>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def pagination_item(assigns) do\n    ~H\"\"\"\n    <li data-slot=\"pagination-item\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </li>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:is_active, :boolean, default: false)\n  attr(:size, :string, default: \"icon\", values: ~w(default icon))\n  attr(:rest, :global, include: ~w(href))\n  slot(:inner_block, required: true)\n\n  def pagination_link(assigns) do\n    ~H\"\"\"\n    <a\n      aria-current={if @is_active, do: \"page\"}\n      data-slot=\"pagination-link\"\n      data-active={to_string(@is_active)}\n      data-size={@size}\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </a>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(href))\n  slot(:inner_block)\n\n  def pagination_previous(assigns) do\n    ~H\"\"\"\n    <a\n      aria-label=\"Go to previous page\"\n      data-slot=\"pagination-previous\"\n      data-active=\"false\"\n      class={@class}\n      {@rest}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        data-icon=\"inline-start\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m15 18-6-6 6-6\" />\n      </svg>\n      <span class=\"hidden sm:block\">Previous</span>\n    </a>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(href))\n  slot(:inner_block)\n\n  def pagination_next(assigns) do\n    ~H\"\"\"\n    <a\n      aria-label=\"Go to next page\"\n      data-slot=\"pagination-next\"\n      data-active=\"false\"\n      class={@class}\n      {@rest}\n    >\n      <span class=\"hidden sm:block\">Next</span>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        data-icon=\"inline-end\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m9 18 6-6-6-6\" />\n      </svg>\n    </a>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def pagination_ellipsis(assigns) do\n    ~H\"\"\"\n    <span aria-hidden=\"true\" data-slot=\"pagination-ellipsis\" class={@class} {@rest}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"1\" />\n        <circle cx=\"19\" cy=\"12\" r=\"1\" />\n        <circle cx=\"5\" cy=\"12\" r=\"1\" />\n      </svg>\n      <span class=\"sr-only\">More pages</span>\n    </span>\n    \"\"\"\n  end\nend\n",
       "path": "pagination.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "pagination",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"pagination\"] {\n    @apply mx-auto flex w-full justify-center;\n  }\n\n  [data-slot=\"pagination-content\"] {\n    @apply flex items-center gap-0.5;\n  }\n\n  [data-slot=\"pagination-link\"],\n  [data-slot=\"pagination-previous\"],\n  [data-slot=\"pagination-next\"] {\n    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"pagination-link\"][data-active=\"true\"],\n  [data-slot=\"pagination-previous\"][data-active=\"true\"],\n  [data-slot=\"pagination-next\"][data-active=\"true\"] {\n    @apply border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground;\n  }\n\n  [data-slot=\"pagination-link\"][data-active=\"false\"],\n  [data-slot=\"pagination-previous\"][data-active=\"false\"],\n  [data-slot=\"pagination-next\"][data-active=\"false\"] {\n    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;\n  }\n\n  [data-slot=\"pagination-link\"][data-size=\"default\"],\n  [data-slot=\"pagination-previous\"],\n  [data-slot=\"pagination-next\"] {\n    @apply h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n\n  [data-slot=\"pagination-link\"][data-size=\"icon\"] {\n    @apply size-8;\n  }\n\n  [data-slot=\"pagination-previous\"] {\n    @apply pl-1.5!;\n  }\n\n  [data-slot=\"pagination-next\"] {\n    @apply pr-1.5!;\n  }\n\n  [data-slot=\"pagination-ellipsis\"] {\n    @apply flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"pagination\"] {\n    @apply mx-auto flex w-full justify-center;\n  }\n\n  [data-slot=\"pagination-content\"] {\n    @apply flex items-center gap-1;\n  }\n\n  [data-slot=\"pagination-link\"],\n  [data-slot=\"pagination-previous\"],\n  [data-slot=\"pagination-next\"] {\n    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"pagination-link\"][data-active=\"true\"],\n  [data-slot=\"pagination-previous\"][data-active=\"true\"],\n  [data-slot=\"pagination-next\"][data-active=\"true\"] {\n    @apply border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs;\n  }\n\n  [data-slot=\"pagination-link\"][data-active=\"false\"],\n  [data-slot=\"pagination-previous\"][data-active=\"false\"],\n  [data-slot=\"pagination-next\"][data-active=\"false\"] {\n    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;\n  }\n\n  [data-slot=\"pagination-link\"][data-size=\"default\"],\n  [data-slot=\"pagination-previous\"],\n  [data-slot=\"pagination-next\"] {\n    @apply h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n\n  [data-slot=\"pagination-link\"][data-size=\"icon\"] {\n    @apply size-9;\n  }\n\n  [data-slot=\"pagination-previous\"] {\n    @apply pl-2!;\n  }\n\n  [data-slot=\"pagination-next\"] {\n    @apply pr-2!;\n  }\n\n  [data-slot=\"pagination-ellipsis\"] {\n    @apply flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/popover.json b/priv/registry/popover.json
index f3eb434..e0c7915 100644
--- a/priv/registry/popover.json
+++ b/priv/registry/popover.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Popover do\n  @moduledoc \"\"\"\n  A click-triggered popover with arbitrary content, built on client-side JS\n  commands, Floating UI, and a small LiveView hook.\n\n  Like the dropdown menu, this is a portal-free, fully client-driven overlay. The\n  trigger toggles the popover content with `toggle_popover/1` (a\n  `Phoenix.LiveView.JS` builder with enter/leave transitions); the\n  `ShadixPopover` hook (assets/ts/popover.ts) watches the content's visibility\n  via a `MutationObserver`, positions it relative to the trigger with\n  `@floating-ui/dom` (`computePosition` + `autoUpdate`, `bottom`/`flip`/`shift`),\n  and closes on `Escape` or outside pointerdown via the `data-on-close` JS\n  (`hide_popover/1`). Unlike the menu, the content is arbitrary, so there is no\n  arrow-key item navigation.\n\n  Trigger and content ids are derived from the required `:id` so `aria-controls`,\n  `data-trigger`, and the JS targets line up stably.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders a popover with a `:trigger` slot and arbitrary content.\n\n  The trigger is wrapped in a `display: contents` span wired to `toggle_popover/1`,\n  carrying the popover's ARIA wiring. The content `<div role=\\\"dialog\\\">` carries\n  the `ShadixPopover` hook and is positioned by Floating UI at open time.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def popover(assigns) do\n    ~H\"\"\"\n    <span\n      id={\"#{@id}-trigger\"}\n      phx-click={toggle_popover(@id)}\n      class=\"contents\"\n    >\n      {render_slot(@trigger)}\n    </span>\n    <div\n      id={\"#{@id}-content\"}\n      tabindex=\"-1\"\n      role=\"dialog\"\n      aria-labelledby={\"#{@id}-title\"}\n      aria-describedby={\"#{@id}-description\"}\n      data-slot=\"popover-content\"\n      phx-hook=\"ShadixPopover\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-on-close={hide_popover(@id)}\n      class={\n        cn([\n          \"hidden fixed left-0 top-0 z-50 w-72 origin-top rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none\",\n          @class\n        ])\n      }\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that toggles the popover with `id`.\n\n  Toggles the content panel's visibility with enter/leave transitions. The\n  `ShadixPopover` hook reacts to the resulting visibility change to position the\n  popover and wire up Escape/outside-click handling.\n  \"\"\"\n  def toggle_popover(id) do\n    JS.toggle(\n      to: \"##{id}-content\",\n      in: {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"},\n      out: {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the popover with `id`.\n\n  Hides the content panel with a leave transition. Used by the hook's\n  `data-on-close` (Escape / outside click).\n  \"\"\"\n  def hide_popover(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"Header region of a popover; stacks title/description with sensible spacing.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def popover_header(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"popover-header\"\n      class={cn([\"flex flex-col gap-1 text-sm\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Popover title. Pass the *popover's* `:id` so the title renders with\n  `\"#{id}-title\"`, matching the content panel's `aria-labelledby` and giving\n  screen-reader users the popover's accessible name.\n  \"\"\"\n  attr(:id, :string, default: nil)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def popover_title(assigns) do\n    ~H\"\"\"\n    <div\n      id={@id && \"#{@id}-title\"}\n      data-slot=\"popover-title\"\n      class={cn([\"font-medium\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Popover description. Pass the *popover's* `:id` so the description renders with\n  `\"#{id}-description\"`, matching the content panel's `aria-describedby`.\n  \"\"\"\n  attr(:id, :string, default: nil)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def popover_description(assigns) do\n    ~H\"\"\"\n    <p\n      id={@id && \"#{@id}-description\"}\n      data-slot=\"popover-description\"\n      class={cn([\"text-muted-foreground text-sm\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </p>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Popover do\n  @moduledoc \"\"\"\n  A click-triggered popover with arbitrary content, built on client-side JS\n  commands, Floating UI, and a small LiveView hook.\n\n  Like the dropdown menu, this is a portal-free, fully client-driven overlay. The\n  trigger toggles the popover content with `toggle_popover/1` (a\n  `Phoenix.LiveView.JS` builder with enter/leave transitions); the\n  `ShadixPopover` hook (assets/ts/popover.ts) watches the content's visibility\n  via a `MutationObserver`, positions it relative to the trigger with\n  `@floating-ui/dom` (`computePosition` + `autoUpdate`, `bottom`/`flip`/`shift`),\n  and closes on `Escape` or outside pointerdown via the `data-on-close` JS\n  (`hide_popover/1`). Unlike the menu, the content is arbitrary, so there is no\n  arrow-key item navigation.\n\n  Trigger and content ids are derived from the required `:id` so `aria-controls`,\n  `data-trigger`, and the JS targets line up stably.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  @doc \"\"\"\n  Renders a popover with a `:trigger` slot and arbitrary content.\n\n  The trigger is wrapped in a `display: contents` span wired to `toggle_popover/1`,\n  carrying the popover's ARIA wiring. The content `<div role=\\\"dialog\\\">` carries\n  the `ShadixPopover` hook and is positioned by Floating UI at open time.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def popover(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <span\n      id={\"#{@id}-trigger\"}\n      phx-click={toggle_popover(@id)}\n      class=\"contents\"\n    >\n      {render_slot(@trigger)}\n    </span>\n    <div\n      id={\"#{@id}-content\"}\n      tabindex=\"-1\"\n      role=\"dialog\"\n      aria-labelledby={\"#{@id}-title\"}\n      aria-describedby={\"#{@id}-description\"}\n      data-slot=\"popover-content\"\n      phx-hook=\"ShadixPopover\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-on-close={hide_popover(@id)}\n      class={[\"hidden fixed left-0 top-0 z-50 w-72 origin-top outline-none\", @class]}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that toggles the popover with `id`.\n\n  Toggles the content panel's visibility with enter/leave transitions. The\n  `ShadixPopover` hook reacts to the resulting visibility change to position the\n  popover and wire up Escape/outside-click handling.\n  \"\"\"\n  def toggle_popover(id) do\n    JS.toggle(\n      to: \"##{id}-content\",\n      in: {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"},\n      out: {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the popover with `id`.\n\n  Hides the content panel with a leave transition. Used by the hook's\n  `data-on-close` (Escape / outside click).\n  \"\"\"\n  def hide_popover(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"Header region of a popover; stacks title/description with sensible spacing.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def popover_header(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"popover-header\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Popover title. Pass the *popover's* `:id` so the title renders with\n  `\"#{id}-title\"`, matching the content panel's `aria-labelledby` and giving\n  screen-reader users the popover's accessible name.\n  \"\"\"\n  attr(:id, :string, default: nil)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def popover_title(assigns) do\n    ~H\"\"\"\n    <div\n      id={@id && \"#{@id}-title\"}\n      data-slot=\"popover-title\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Popover description. Pass the *popover's* `:id` so the description renders with\n  `\"#{id}-description\"`, matching the content panel's `aria-describedby`.\n  \"\"\"\n  attr(:id, :string, default: nil)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def popover_description(assigns) do\n    ~H\"\"\"\n    <p\n      id={@id && \"#{@id}-description\"}\n      data-slot=\"popover-description\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </p>\n    \"\"\"\n  end\nend\n",
       "path": "popover.ex"
     }
   ],
@@ -17,6 +18,10 @@
     "@floating-ui/dom"
   ],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"popover-content\"] {\n    @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100;\n  }\n\n  [data-slot=\"popover-header\"] {\n    @apply flex flex-col gap-0.5 text-sm;\n  }\n\n  [data-slot=\"popover-title\"] {\n    @apply font-medium;\n  }\n\n  [data-slot=\"popover-description\"] {\n    @apply text-muted-foreground;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"popover-content\"] {\n    @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 flex flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 duration-100;\n  }\n\n  [data-slot=\"popover-header\"] {\n    @apply flex flex-col gap-1 text-sm;\n  }\n\n  [data-slot=\"popover-title\"] {\n    @apply font-medium;\n  }\n\n  [data-slot=\"popover-description\"] {\n    @apply text-muted-foreground;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/progress.json b/priv/registry/progress.json
index 1c34b84..9b0897f 100644
--- a/priv/registry/progress.json
+++ b/priv/registry/progress.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Progress do\n  @moduledoc \"\"\"\n  Progress bar, translated from the shadcn/ui `progress` component.\n\n  Renders a determinate progress bar. The `value` attribute (0-100) controls\n  how far the indicator is filled.\n  \"\"\"\n  use Phoenix.Component\n  import Shadix.Cn\n\n  attr(:value, :integer, default: 0)\n  attr(:label, :string, default: \"Progress\", doc: \"Accessible name for the progress bar.\")\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def progress(assigns) do\n    class = cn([\"relative h-2 w-full overflow-hidden rounded-full bg-primary/20\", assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <div\n      data-slot=\"progress\"\n      role=\"progressbar\"\n      aria-label={@label}\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      aria-valuenow={@value}\n      aria-valuetext={\"#{@value}%\"}\n      class={@computed_class}\n      {@rest}\n    >\n      <div\n        data-slot=\"progress-indicator\"\n        class=\"h-full w-full flex-1 bg-primary transition-all motion-reduce:transition-none\"\n        style={\"transform: translateX(-#{100 - @value}%)\"}\n      >\n      </div>\n    </div>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Progress do\n  @moduledoc \"\"\"\n  Progress bar, translated from the shadcn/ui `progress` component.\n\n  Renders a determinate progress bar. The `value` attribute (0-100) controls\n  how far the indicator is filled.\n\n  Styling is delivered by the colocated `progress.css` skin; the elements carry\n  stable `data-slot` attributes (`progress`, `progress-indicator`) for targeting.\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:value, :integer, default: 0)\n  attr(:label, :string, default: \"Progress\", doc: \"Accessible name for the progress bar.\")\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def progress(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div\n      data-slot=\"progress\"\n      role=\"progressbar\"\n      aria-label={@label}\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      aria-valuenow={@value}\n      aria-valuetext={\"#{@value}%\"}\n      class={@class}\n      {@rest}\n    >\n      <div\n        data-slot=\"progress-indicator\"\n        class={[\"motion-reduce:transition-none\"]}\n        style={\"transform: translateX(-#{100 - @value}%)\"}\n      >\n      </div>\n    </div>\n    \"\"\"\n  end\nend\n",
       "path": "progress.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "progress",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"progress\"] {\n    @apply relative flex w-full items-center overflow-x-hidden bg-muted h-1 rounded-full;\n  }\n\n  [data-slot=\"progress-indicator\"] {\n    @apply size-full flex-1 transition-all bg-primary;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"progress\"] {\n    @apply relative flex w-full items-center overflow-x-hidden bg-muted h-1.5 rounded-full;\n  }\n\n  [data-slot=\"progress-indicator\"] {\n    @apply size-full flex-1 transition-all bg-primary;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/radio_group.json b/priv/registry/radio_group.json
index 47c4547..0dfe182 100644
--- a/priv/registry/radio_group.json
+++ b/priv/registry/radio_group.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.RadioGroup do\n  @moduledoc \"\"\"\n  Radio group component translated from shadcn/ui (new-york-v4).\n\n  Two function-components:\n\n    * `radio_group/1` — a presentational container (`role=\"radiogroup\"`,\n      `data-slot=\"radio-group\"`) that lays out the items in a grid. It is NOT\n      field-aware; it just renders its `inner_block`.\n\n    * `radio_group_item/1` — a field-aware native `<input type=\"radio\">`. Each\n      item shares the field's `name` (so the browser groups them) but renders a\n      unique `id`, and is `checked` when the field's current value matches the\n      item's `value`. The selected dot is drawn with CSS only (a `before:`\n      pseudo-element shown via the `checked:` variant), no JavaScript.\n\n  Radios are grouped, so an individual item does not render its own error\n  message; surface validation alongside the group/label as appropriate. Each\n  item still reflects the field's invalid state via `aria-invalid` so screen\n  readers and the destructive styling pick it up.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n  import Shadix.Form\n\n  @container_base \"grid gap-3\"\n\n  @item_base \"peer relative flex aspect-square size-4 shrink-0 appearance-none items-center justify-center rounded-full border border-input bg-transparent text-primary shadow-xs transition-[color,box-shadow] outline-none before:size-2 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity before:content-[''] checked:before:opacity-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40\"\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def radio_group(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@container_base, assigns.class]))\n\n    ~H\"\"\"\n    <div role=\"radiogroup\" data-slot=\"radio-group\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:value, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled required))\n\n  def radio_group_item(assigns) do\n    %{name: name, value: value, errors: errors} = field_attrs(assigns.field)\n\n    assigns =\n      assigns\n      |> assign(name: name, field_value: value, errors: errors)\n      |> assign(:computed_class, cn([@item_base, assigns.class]))\n\n    ~H\"\"\"\n    <input\n      type=\"radio\"\n      id={\"#{@name}_#{@value}\"}\n      name={@name}\n      value={@value}\n      checked={to_string(@field_value) == @value}\n      aria-invalid={(@errors != [] && \"true\") || nil}\n      data-slot=\"radio-group-item\"\n      class={@computed_class}\n      {@rest}\n    />\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.RadioGroup do\n  @moduledoc \"\"\"\n  Radio group component translated from shadcn/ui.\n\n  Two function-components:\n\n    * `radio_group/1` — a presentational container (`role=\"radiogroup\"`,\n      `data-slot=\"radio-group\"`) that lays out the items in a grid. It is NOT\n      field-aware; it just renders its `inner_block`.\n\n    * `radio_group_item/1` — a field-aware native `<input type=\"radio\">`. Each\n      item shares the field's `name` (so the browser groups them) but renders a\n      unique `id`, and is `checked` when the field's current value matches the\n      item's `value`. The selected dot is drawn with CSS only (a `before:`\n      pseudo-element shown via the `checked:` variant), no JavaScript.\n\n  Styling is delivered via colocated CSS keyed on the `data-slot` attributes\n  (`radio-group`, `radio-group-item`); the elements carry only structural\n  marker classes (`peer`, `group/radio-group-item`) plus the caller `class`.\n\n  Radios are grouped, so an individual item does not render its own error\n  message; surface validation alongside the group/label as appropriate. Each\n  item still reflects the field's invalid state via `aria-invalid` so screen\n  readers and the destructive styling pick it up.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Form\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def radio_group(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div role=\"radiogroup\" data-slot=\"radio-group\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:value, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled required))\n\n  def radio_group_item(assigns) do\n    %{name: name, value: value, errors: errors} = field_attrs(assigns.field)\n\n    assigns = assign(assigns, name: name, field_value: value, errors: errors)\n\n    ~H\"\"\"\n    <input\n      type=\"radio\"\n      id={\"#{@name}_#{@value}\"}\n      name={@name}\n      value={@value}\n      checked={to_string(@field_value) == @value}\n      aria-invalid={(@errors != [] && \"true\") || nil}\n      data-slot=\"radio-group-item\"\n      class={[\"peer group/radio-group-item\", @class]}\n      {@rest}\n    />\n    \"\"\"\n  end\nend\n",
       "path": "radio_group.ex"
     }
   ],
@@ -9,7 +10,11 @@
   "name": "radio_group",
   "npm_deps": [],
   "registry_deps": [
-    "cn",
-    "form"
-  ]
+    "form",
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"radio-group\"] {\n    @apply w-full grid gap-2;\n  }\n\n  [data-slot=\"radio-group-item\"] {\n    @apply relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"radio-group\"] {\n    @apply w-full grid gap-3;\n  }\n\n  [data-slot=\"radio-group-item\"] {\n    @apply relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/resizable.json b/priv/registry/resizable.json
index 2a02936..c79ef0b 100644
--- a/priv/registry/resizable.json
+++ b/priv/registry/resizable.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Resizable do\n  @moduledoc \"\"\"\n  Draggable split panes for a two-panel horizontal or vertical layout.\n\n  Unlike the React `react-resizable-panels` original, this v1 is deliberately\n  simplified: it supports exactly one group with two panels separated by a single\n  handle, with no nested groups and no persistence. The group is a flexbox; each\n  panel sizes itself via `flex-basis` (a percentage) and the handle is a thin,\n  grabbable divider carrying the `ShadixResizable` hook.\n\n  Dragging is pure client behavior that LiveView's `JS` commands can't express, so\n  it lives in the hook (assets/ts/resizable.ts): on pointer drag it reads the\n  direction from the parent's `data-direction`, computes the pointer delta as a\n  fraction of the parent's size, and shifts that fraction from the next panel's\n  `flex-basis` to the previous panel's (clamped to 0-100%).\n\n  Compose them like:\n\n      <.resizable id=\"demo\">\n        <.resizable_panel>One</.resizable_panel>\n        <.resizable_handle />\n        <.resizable_panel>Two</.resizable_panel>\n      </.resizable>\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders a resizable group (the flex container holding two panels and a handle).\n\n  `:direction` is mirrored onto `data-direction` so the hook can read it, and it\n  switches the flex axis (`flex-col` for vertical).\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:direction, :string, default: \"horizontal\", values: ~w(horizontal vertical))\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def resizable(assigns) do\n    ~H\"\"\"\n    <div\n      id={@id}\n      data-slot=\"resizable\"\n      data-direction={@direction}\n      class={\n        cn([\n          \"flex h-full w-full\",\n          @direction == \"vertical\" && \"flex-col\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Renders a single resizable panel.\n\n  The panel's size is driven by `flex-basis`; the hook rewrites it on drag. By\n  default panels start at an even 50% split via the inline style, but callers may\n  override `style` to set a different initial basis.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:style, :string, default: \"flex-basis: 50%;\")\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def resizable_panel(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"resizable-panel\"\n      class={cn([\"min-h-0 min-w-0 overflow-auto\", @class])}\n      style={@style}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Renders the draggable divider between two panels.\n\n  Carries `phx-hook=\"ShadixResizable\"`, `role=\"separator\"`, and an\n  `aria-orientation` derived from `:direction`. It paints a thin border-colored\n  bar with a centered grip and an enlarged hit area (`after:` pseudo-element).\n  \"\"\"\n  attr(:id, :string, default: nil)\n  attr(:direction, :string, default: \"horizontal\", values: ~w(horizontal vertical))\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def resizable_handle(assigns) do\n    ~H\"\"\"\n    <div\n      id={@id}\n      data-slot=\"resizable-handle\"\n      phx-hook=\"ShadixResizable\"\n      role=\"separator\"\n      tabindex=\"0\"\n      aria-label=\"Resize panels\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      aria-valuenow=\"50\"\n      aria-orientation={if @direction == \"vertical\", do: \"horizontal\", else: \"vertical\"}\n      class={\n        cn([\n          \"bg-border relative flex items-center justify-center\",\n          \"focus-visible:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-offset-1\",\n          if(@direction == \"vertical\",\n            do:\n              \"h-px w-full cursor-row-resize after:absolute after:left-0 after:h-1 after:w-full after:-translate-y-1/2\",\n            else:\n              \"w-px cursor-col-resize after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2\"\n          ),\n          @class\n        ])\n      }\n      {@rest}\n    >\n      <div\n        data-slot=\"resizable-handle-grip\"\n        class={\n          cn([\n            \"bg-border z-10 flex items-center justify-center rounded-xs border\",\n            if(@direction == \"vertical\", do: \"h-3 w-4\", else: \"h-4 w-3\")\n          ])\n        }\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          class={cn([\"size-2.5\", @direction == \"vertical\" && \"rotate-90\"])}\n        >\n          <circle cx=\"9\" cy=\"12\" r=\"1\" />\n          <circle cx=\"9\" cy=\"5\" r=\"1\" />\n          <circle cx=\"9\" cy=\"19\" r=\"1\" />\n          <circle cx=\"15\" cy=\"12\" r=\"1\" />\n          <circle cx=\"15\" cy=\"5\" r=\"1\" />\n          <circle cx=\"15\" cy=\"19\" r=\"1\" />\n        </svg>\n      </div>\n    </div>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Resizable do\n  @moduledoc \"\"\"\n  Draggable split panes for a two-panel horizontal or vertical layout.\n\n  Unlike the React `react-resizable-panels` original, this v1 is deliberately\n  simplified: it supports exactly one group with two panels separated by a single\n  handle, with no nested groups and no persistence. The group is a flexbox; each\n  panel sizes itself via `flex-basis` (a percentage) and the handle is a thin,\n  grabbable divider carrying the `ShadixResizable` hook.\n\n  Dragging is pure client behavior that LiveView's `JS` commands can't express, so\n  it lives in the hook (assets/ts/resizable.ts): on pointer drag it reads the\n  direction from the parent's `data-direction`, computes the pointer delta as a\n  fraction of the parent's size, and shifts that fraction from the next panel's\n  `flex-basis` to the previous panel's (clamped to 0-100%).\n\n  Each element carries a stable `data-slot`; the group also mirrors `:direction`\n  onto `data-direction` (read by the hook and used to switch the flex axis) and\n  the handle's `aria-orientation` drives its direction-dependent styling. Styling\n  lives in the colocated `priv/styles/<skin>/resizable.css`, selected by those\n  attributes. Caller-supplied `class` is appended last so the Tailwind cascade\n  layers ensure it wins over the defaults.\n\n  Compose them like:\n\n      <.resizable id=\"demo\">\n        <.resizable_panel>One</.resizable_panel>\n        <.resizable_handle />\n        <.resizable_panel>Two</.resizable_panel>\n      </.resizable>\n  \"\"\"\n  use Phoenix.Component\n\n  @doc \"\"\"\n  Renders a resizable group (the flex container holding two panels and a handle).\n\n  `:direction` is mirrored onto `data-direction` so the hook can read it, and it\n  switches the flex axis (column for vertical).\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:direction, :string, default: \"horizontal\", values: ~w(horizontal vertical))\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def resizable(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div id={@id} data-slot=\"resizable\" data-direction={@direction} class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Renders a single resizable panel.\n\n  The panel's size is driven by `flex-basis`; the hook rewrites it on drag. By\n  default panels start at an even 50% split via the inline style, but callers may\n  override `style` to set a different initial basis.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:style, :string, default: \"flex-basis: 50%;\")\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def resizable_panel(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"resizable-panel\" class={@class} style={@style} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Renders the draggable divider between two panels.\n\n  Carries `phx-hook=\"ShadixResizable\"`, `role=\"separator\"`, and an\n  `aria-orientation` derived from `:direction`. The `aria-orientation` also drives\n  its direction-dependent styling: a thin border-colored bar with a centered grip\n  and an enlarged hit area (`after:` pseudo-element).\n  \"\"\"\n  attr(:id, :string, default: nil)\n  attr(:direction, :string, default: \"horizontal\", values: ~w(horizontal vertical))\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def resizable_handle(assigns) do\n    ~H\"\"\"\n    <div\n      id={@id}\n      data-slot=\"resizable-handle\"\n      phx-hook=\"ShadixResizable\"\n      role=\"separator\"\n      tabindex=\"0\"\n      aria-label=\"Resize panels\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      aria-valuenow=\"50\"\n      aria-orientation={if @direction == \"vertical\", do: \"horizontal\", else: \"vertical\"}\n      class={@class}\n      {@rest}\n    >\n      <div data-slot=\"resizable-handle-grip\"></div>\n    </div>\n    \"\"\"\n  end\nend\n",
       "path": "resizable.ex"
     }
   ],
@@ -15,6 +16,10 @@
   "name": "resizable",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"resizable\"] {\n    @apply flex h-full w-full;\n  }\n\n  [data-slot=\"resizable\"][data-direction=\"vertical\"] {\n    @apply flex-col;\n  }\n\n  [data-slot=\"resizable-panel\"] {\n    @apply min-h-0 min-w-0 overflow-auto;\n  }\n\n  [data-slot=\"resizable-handle\"] {\n    @apply relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden cursor-col-resize;\n  }\n\n  [data-slot=\"resizable-handle\"][aria-orientation=\"horizontal\"] {\n    @apply h-px w-full after:left-0 after:h-1 after:w-full after:translate-x-0 after:-translate-y-1/2 cursor-row-resize;\n  }\n\n  [data-slot=\"resizable-handle-grip\"] {\n    @apply bg-border h-6 w-1 rounded-lg z-10 flex shrink-0;\n  }\n\n  [data-slot=\"resizable-handle\"][aria-orientation=\"horizontal\"] > [data-slot=\"resizable-handle-grip\"] {\n    @apply rotate-90;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"resizable\"] {\n    @apply flex h-full w-full;\n  }\n\n  [data-slot=\"resizable\"][data-direction=\"vertical\"] {\n    @apply flex-col;\n  }\n\n  [data-slot=\"resizable-panel\"] {\n    @apply min-h-0 min-w-0 overflow-auto;\n  }\n\n  [data-slot=\"resizable-handle\"] {\n    @apply relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden cursor-col-resize;\n  }\n\n  [data-slot=\"resizable-handle\"][aria-orientation=\"horizontal\"] {\n    @apply h-px w-full after:left-0 after:h-1 after:w-full after:translate-x-0 after:-translate-y-1/2 cursor-row-resize;\n  }\n\n  [data-slot=\"resizable-handle-grip\"] {\n    @apply bg-border h-6 w-1 rounded-lg z-10 flex shrink-0;\n  }\n\n  [data-slot=\"resizable-handle\"][aria-orientation=\"horizontal\"] > [data-slot=\"resizable-handle-grip\"] {\n    @apply rotate-90;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/scroll_area.json b/priv/registry/scroll_area.json
index 2d00895..99581a6 100644
--- a/priv/registry/scroll_area.json
+++ b/priv/registry/scroll_area.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.ScrollArea do\n  @moduledoc \"\"\"\n  Scroll area component, translated from the shadcn/ui (new-york-v4) scroll-area.\n\n  NOTE: the React/Radix original replaces the browser's native scrollbar with a\n  custom overlay scrollbar (the `ScrollBar`/`ScrollAreaThumb` primitives) driven\n  by JavaScript. This v1 is intentionally CSS-only: it keeps the native scroll\n  behaviour and merely *styles the native scrollbars* (thin width, rounded\n  `bg-border` thumb) via `scrollbar-width` and the `::-webkit-scrollbar`\n  pseudo-elements. There is no Radix-style custom-scrollbar JS and therefore no\n  LiveView hook.\n\n  The outer `scroll-area` wrapper clips overflow; the inner\n  `scroll-area-viewport` is the scrollable element and receives the caller's\n  content. Give the wrapper a constrained size (e.g. `class=\"h-72 w-48\"`) so\n  there is something to scroll.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders a scroll area with styled native scrollbars.\n\n  The caller's `:class` is applied to the outer wrapper (typically to size it),\n  while the inner viewport handles the actual scrolling.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def scroll_area(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"scroll-area\" class={cn([\"relative overflow-hidden\", @class])} {@rest}>\n      <div\n        data-slot=\"scroll-area-viewport\"\n        tabindex=\"0\"\n        class={\n          cn([\n            \"size-full overflow-auto rounded-[inherit]\",\n            \"outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\",\n            \"[scrollbar-width:thin] [scrollbar-color:var(--border)_transparent]\",\n            \"[&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar]:h-2.5\",\n            \"[&::-webkit-scrollbar-track]:bg-transparent\",\n            \"[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border\"\n          ])\n        }\n      >\n        {render_slot(@inner_block)}\n      </div>\n    </div>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.ScrollArea do\n  @moduledoc \"\"\"\n  Scroll area component, translated from the shadcn/ui scroll-area.\n\n  NOTE: the React/Radix original replaces the browser's native scrollbar with a\n  custom overlay scrollbar (the `ScrollBar`/`ScrollAreaThumb` primitives) driven\n  by JavaScript. This v1 is intentionally CSS-only: it keeps the native scroll\n  behaviour and merely *styles the native scrollbars* (thin width, rounded\n  `bg-border` thumb) via `scrollbar-width` and the `::-webkit-scrollbar`\n  pseudo-elements. There is no Radix-style custom-scrollbar JS and therefore no\n  LiveView hook, and the `scroll-area-scrollbar` / `scroll-area-thumb` slots are\n  not rendered.\n\n  The outer `scroll-area` wrapper clips overflow; the inner\n  `scroll-area-viewport` is the scrollable element and receives the caller's\n  content. Give the wrapper a constrained size (e.g. `class=\"h-72 w-48\"`) so\n  there is something to scroll.\n\n  Each element carries a stable `data-slot` (`scroll-area`,\n  `scroll-area-viewport`). Styling lives in the colocated\n  `priv/styles/<skin>/scroll_area.css` (selected by `data-slot`);\n  caller-supplied `class` is appended last so Tailwind cascade layers ensure it\n  wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  @doc \"\"\"\n  Renders a scroll area with styled native scrollbars.\n\n  The caller's `:class` is applied to the outer wrapper (typically to size it),\n  while the inner viewport handles the actual scrolling.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def scroll_area(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div data-slot=\"scroll-area\" class={@class} {@rest}>\n      <div data-slot=\"scroll-area-viewport\" tabindex=\"0\">\n        {render_slot(@inner_block)}\n      </div>\n    </div>\n    \"\"\"\n  end\nend\n",
       "path": "scroll_area.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "scroll_area",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"scroll-area\"] {\n    @apply relative overflow-hidden;\n  }\n\n  /*\n   * shadix divergence: the React/Radix original renders separate\n   * `scroll-area-scrollbar` / `scroll-area-thumb` slots driven by JS. This\n   * CSS-only port keeps the native scroll on the viewport and styles the\n   * native scrollbars instead. The shadcn structural base\n   * (`size-full rounded-[inherit] transition-[color,box-shadow] outline-none\n   * focus-visible:*`) is preserved verbatim; the `overflow-auto` and\n   * `::-webkit-scrollbar` rules are the native-scrollbar substitute.\n   */\n  [data-slot=\"scroll-area-viewport\"] {\n    @apply size-full overflow-auto rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 [scrollbar-width:thin] [scrollbar-color:var(--border)_transparent] [&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"scroll-area\"] {\n    @apply relative overflow-hidden;\n  }\n\n  /*\n   * shadix divergence: the React/Radix original renders separate\n   * `scroll-area-scrollbar` / `scroll-area-thumb` slots driven by JS. This\n   * CSS-only port keeps the native scroll on the viewport and styles the\n   * native scrollbars instead. The shadcn structural base\n   * (`size-full rounded-[inherit] transition-[color,box-shadow] outline-none\n   * focus-visible:*`) is preserved verbatim; the `overflow-auto` and\n   * `::-webkit-scrollbar` rules are the native-scrollbar substitute.\n   */\n  [data-slot=\"scroll-area-viewport\"] {\n    @apply size-full overflow-auto rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 [scrollbar-width:thin] [scrollbar-color:var(--border)_transparent] [&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/select.json b/priv/registry/select.json
index 1ebbdbe..eddcc72 100644
--- a/priv/registry/select.json
+++ b/priv/registry/select.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Select do\n  @moduledoc \"\"\"\n  A field-aware select (listbox) built on client-side JS commands, Floating UI,\n  and the `ShadixSelect` hook.\n\n  Unlike a native `<select>`, this reconstructs the shadcn look as a trigger\n  button plus a Floating-UI-positioned popup `<div role=\"listbox\">`. It is\n  field-aware via `Shadix.Form`: it derives its `name`/`value` from a\n  `Phoenix.HTML.FormField` and carries the selected value in a hidden `<input>`\n  so it submits with the surrounding form.\n\n  The trigger toggles the content with `toggle_listbox/1`; the `ShadixSelect`\n  hook (assets/ts/select.ts) watches the content's visibility via a\n  `MutationObserver`, positions it under the trigger with `@floating-ui/dom`,\n  handles keyboard navigation (arrows/Home/End/type-ahead/Enter/Escape), and on\n  select writes the chosen value into the hidden input (dispatching an `input`\n  event), updates the trigger label, marks `aria-selected`, then closes and\n  refocuses the trigger. It initializes the selection from the field value.\n\n  Trigger and content ids derive from the required `:id` so `aria-controls`,\n  `data-trigger`, and the JS targets line up stably.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n  import Shadix.Form\n\n  @trigger_class \"flex h-9 w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder=true]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n\n  @content_class \"hidden fixed left-0 top-0 z-50 max-h-96 min-w-[8rem] origin-top overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md\"\n\n  @doc \"\"\"\n  Renders a field-aware select.\n\n  The required `:field` supplies the hidden input's `name` and the initial\n  value. The required `:id` derives the trigger/content ids. Pass `select_item/1`\n  children in the default slot.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:placeholder, :string, default: \"Select…\")\n  attr(:class, :string, default: nil)\n  slot(:inner_block, required: true)\n\n  def select(assigns) do\n    %{name: name, value: value, errors: errors} = field_attrs(assigns.field)\n    value = if value in [nil, \"\"], do: nil, else: to_string(value)\n\n    assigns =\n      assign(assigns,\n        name: name,\n        value: value,\n        errors: errors,\n        trigger_class: @trigger_class,\n        content_class: cn([@content_class, assigns.class])\n      )\n\n    ~H\"\"\"\n    <input type=\"hidden\" id={\"#{@id}-input\"} name={@name} value={@value} data-select-value />\n    <button\n      type=\"button\"\n      id={\"#{@id}-trigger\"}\n      data-slot=\"select-trigger\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      aria-expanded=\"false\"\n      aria-controls={\"#{@id}-content\"}\n      aria-labelledby={\"#{@id}-value\"}\n      aria-invalid={@errors != [] && \"true\"}\n      aria-describedby={(@errors != [] && \"#{@id}-error\") || nil}\n      data-placeholder={if @value == nil, do: \"true\", else: \"false\"}\n      phx-click={toggle_listbox(@id)}\n      class={@trigger_class}\n    >\n      <span\n        id={\"#{@id}-value\"}\n        data-slot=\"select-value\"\n        data-select-label\n        phx-update=\"ignore\"\n      >{@placeholder}</span>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n        class=\"size-4 opacity-50\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n    <div\n      id={\"#{@id}-content\"}\n      role=\"listbox\"\n      tabindex=\"-1\"\n      data-slot=\"select-content\"\n      phx-hook=\"ShadixSelect\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-input={\"#{@id}-input\"}\n      data-placeholder={@placeholder}\n      data-on-close={hide_listbox(@id)}\n      class={@content_class}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    <p\n      :if={@errors != []}\n      id={\"#{@id}-error\"}\n      data-slot=\"form-message\"\n      class=\"text-destructive text-sm mt-1\"\n    >\n      {List.first(@errors)}\n    </p>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that toggles the listbox with `id`.\n\n  Reveals/hides the content panel with enter/leave transitions; the\n  `ShadixSelect` hook reacts to the visibility change to position the listbox\n  and wire up keyboard/outside-click handling.\n  \"\"\"\n  def toggle_listbox(id) do\n    JS.toggle(\n      to: \"##{id}-content\",\n      in: {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"},\n      out: {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"},\n      display: \"block\"\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the listbox with `id`.\n\n  Used by the hook's `data-on-close` (Escape / outside click) and after a\n  selection.\n  \"\"\"\n  def hide_listbox(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  A selectable option within a select.\n\n  `:value` is the value submitted with the form when chosen; the inner block is\n  the visible label. The `ShadixSelect` hook selects it on click/Enter.\n  \"\"\"\n  attr(:value, :string, required: true)\n  attr(:disabled, :boolean, default: false)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def select_item(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"option\"\n      tabindex=\"-1\"\n      data-slot=\"select-item\"\n      data-value={@value}\n      aria-selected=\"false\"\n      aria-disabled={@disabled && \"true\"}\n      data-disabled={@disabled && \"true\"}\n      class={\n        cn([\n          \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      <span\n        data-slot=\"select-item-indicator\"\n        class=\"absolute right-2 flex size-3.5 items-center justify-center\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          data-select-check\n          class=\"hidden size-4\"\n        >\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </span>\n      <span data-select-item-text>{render_slot(@inner_block)}</span>\n    </div>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Select do\n  @moduledoc \"\"\"\n  A field-aware select (listbox) built on client-side JS commands, Floating UI,\n  and the `ShadixSelect` hook.\n\n  Unlike a native `<select>`, this reconstructs the shadcn look as a trigger\n  button plus a Floating-UI-positioned popup `<div role=\"listbox\">`. It is\n  field-aware via `Shadix.Form`: it derives its `name`/`value` from a\n  `Phoenix.HTML.FormField` and carries the selected value in a hidden `<input>`\n  so it submits with the surrounding form.\n\n  The trigger toggles the content with `toggle_listbox/1`; the `ShadixSelect`\n  hook (assets/ts/select.ts) watches the content's visibility via a\n  `MutationObserver`, positions it under the trigger with `@floating-ui/dom`,\n  handles keyboard navigation (arrows/Home/End/type-ahead/Enter/Escape), and on\n  select writes the chosen value into the hidden input (dispatching an `input`\n  event), updates the trigger label, marks `aria-selected`, then closes and\n  refocuses the trigger. It initializes the selection from the field value.\n\n  Trigger and content ids derive from the required `:id` so `aria-controls`,\n  `data-trigger`, and the JS targets line up stably.\n\n  All styling lives in the component's colocated CSS\n  (`priv/styles/<style>/select.css`, ported verbatim from shadcn), keyed by the\n  `data-slot` attributes and wrapped in `@layer components` so a caller-supplied\n  `class` always wins. The colocated-css marker (the first node of the template)\n  is replaced by the chosen style's colocated `<style>` block when the component\n  is copied into a consumer app via `mix shadix.add`. The content element keeps\n  its JS/Floating-UI positioning utilities (`hidden fixed …`) inline because they\n  are load-bearing for the `ShadixSelect` hook.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Form\n\n  @doc \"\"\"\n  Renders a field-aware select.\n\n  The required `:field` supplies the hidden input's `name` and the initial\n  value. The required `:id` derives the trigger/content ids. Pass `select_item/1`\n  children in the default slot.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:placeholder, :string, default: \"Select…\")\n  attr(:class, :string, default: nil)\n  slot(:inner_block, required: true)\n\n  def select(assigns) do\n    %{name: name, value: value, errors: errors} = field_attrs(assigns.field)\n    value = if value in [nil, \"\"], do: nil, else: to_string(value)\n\n    assigns =\n      assign(assigns,\n        name: name,\n        value: value,\n        errors: errors\n      )\n\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <input type=\"hidden\" id={\"#{@id}-input\"} name={@name} value={@value} data-select-value />\n    <button\n      type=\"button\"\n      id={\"#{@id}-trigger\"}\n      data-slot=\"select-trigger\"\n      data-size=\"default\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      aria-expanded=\"false\"\n      aria-controls={\"#{@id}-content\"}\n      aria-labelledby={\"#{@id}-value\"}\n      aria-invalid={@errors != [] && \"true\"}\n      aria-describedby={(@errors != [] && \"#{@id}-error\") || nil}\n      data-placeholder={if @value == nil, do: \"true\", else: \"false\"}\n      phx-click={toggle_listbox(@id)}\n    >\n      <span\n        id={\"#{@id}-value\"}\n        data-slot=\"select-value\"\n        data-select-label\n        phx-update=\"ignore\"\n      >{@placeholder}</span>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n        class=\"size-4 opacity-50\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n    <div\n      id={\"#{@id}-content\"}\n      role=\"listbox\"\n      tabindex=\"-1\"\n      data-slot=\"select-content\"\n      phx-hook=\"ShadixSelect\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-input={\"#{@id}-input\"}\n      data-placeholder={@placeholder}\n      data-on-close={hide_listbox(@id)}\n      class={[\n        \"hidden fixed left-0 top-0 z-50 max-h-96 origin-top overflow-x-hidden overflow-y-auto\",\n        @class\n      ]}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    <p\n      :if={@errors != []}\n      id={\"#{@id}-error\"}\n      data-slot=\"form-message\"\n      class=\"text-destructive text-sm mt-1\"\n    >\n      {List.first(@errors)}\n    </p>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that toggles the listbox with `id`.\n\n  Reveals/hides the content panel with enter/leave transitions; the\n  `ShadixSelect` hook reacts to the visibility change to position the listbox\n  and wire up keyboard/outside-click handling.\n  \"\"\"\n  def toggle_listbox(id) do\n    JS.toggle(\n      to: \"##{id}-content\",\n      in: {\"transition ease-out duration-100\", \"opacity-0 scale-95\", \"opacity-100 scale-100\"},\n      out: {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"},\n      display: \"block\"\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the listbox with `id`.\n\n  Used by the hook's `data-on-close` (Escape / outside click) and after a\n  selection.\n  \"\"\"\n  def hide_listbox(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-75\", \"opacity-100 scale-100\", \"opacity-0 scale-95\"}\n    )\n  end\n\n  @doc \"\"\"\n  A selectable option within a select.\n\n  `:value` is the value submitted with the form when chosen; the inner block is\n  the visible label. The `ShadixSelect` hook selects it on click/Enter.\n  \"\"\"\n  attr(:value, :string, required: true)\n  attr(:disabled, :boolean, default: false)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def select_item(assigns) do\n    ~H\"\"\"\n    <div\n      role=\"option\"\n      tabindex=\"-1\"\n      data-slot=\"select-item\"\n      data-value={@value}\n      aria-selected=\"false\"\n      aria-disabled={@disabled && \"true\"}\n      data-disabled={@disabled && \"true\"}\n      class={@class}\n      {@rest}\n    >\n      <span data-slot=\"select-item-indicator\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          data-select-check\n          class=\"hidden size-4\"\n        >\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </span>\n      <span data-select-item-text>{render_slot(@inner_block)}</span>\n    </div>\n    \"\"\"\n  end\nend\n",
       "path": "select.ex"
     }
   ],
@@ -17,7 +18,11 @@
     "@floating-ui/dom"
   ],
   "registry_deps": [
-    "cn",
-    "form"
-  ]
+    "form",
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"select-trigger\"] {\n    @apply flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0 border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"select-value\"] {\n    @apply flex flex-1 text-left;\n  }\n\n  [data-slot=\"select-content\"] {\n    @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100;\n  }\n\n  [data-slot=\"select-item\"] {\n    @apply relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2;\n  }\n\n  [data-slot=\"select-item-indicator\"] {\n    @apply pointer-events-none absolute right-2 flex size-4 items-center justify-center;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"select-trigger\"] {\n    @apply flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0 border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"select-value\"] {\n    @apply flex flex-1 text-left;\n  }\n\n  [data-slot=\"select-content\"] {\n    @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100;\n  }\n\n  [data-slot=\"select-item\"] {\n    @apply relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2;\n  }\n\n  [data-slot=\"select-item-indicator\"] {\n    @apply pointer-events-none absolute right-2 flex size-4 items-center justify-center;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/sheet.json b/priv/registry/sheet.json
index 21635ff..c527ecf 100644
--- a/priv/registry/sheet.json
+++ b/priv/registry/sheet.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Sheet do\n  @moduledoc \"\"\"\n  A side panel (\"sheet\") built on client-side JS commands and a small LiveView hook.\n\n  Modelled on `Shadix.Components.Dialog`: `show_sheet/1` and `hide_sheet/1` are\n  `Phoenix.LiveView.JS` command builders that toggle the overlay and content\n  panel (with side-aware slide transitions) and dispatch `shadix:sheet-open` /\n  `shadix:sheet-close` events. The `ShadixSheet` hook (assets/ts/sheet.ts) listens\n  for those events to lock body scroll and manage focus. `Escape` and\n  overlay-click both close via `phx-window-keydown` / `phx-click`. Focus is\n  trapped with Phoenix's built-in `<.focus_wrap>`.\n\n  Unlike the dialog, the content is NOT centered: it is fixed to the chosen\n  `:side` (one of `top`, `right`, `bottom`, `left`) and slides in from that edge.\n  Side-based classes and enter/leave transitions are computed from the `@sides`\n  map.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n\n  # Per-side positioning + slide transition classes. `from`/`to` are the\n  # transition endpoints (the off-screen and on-screen translate states).\n  @sides %{\n    \"right\" => %{\n      position: \"inset-y-0 right-0 h-full w-3/4 max-w-sm border-l\",\n      from: \"translate-x-full\",\n      to: \"translate-x-0\"\n    },\n    \"left\" => %{\n      position: \"inset-y-0 left-0 h-full w-3/4 max-w-sm border-r\",\n      from: \"-translate-x-full\",\n      to: \"translate-x-0\"\n    },\n    \"top\" => %{\n      position: \"inset-x-0 top-0 h-auto w-full border-b\",\n      from: \"-translate-y-full\",\n      to: \"translate-y-0\"\n    },\n    \"bottom\" => %{\n      position: \"inset-x-0 bottom-0 h-auto w-full border-t\",\n      from: \"translate-y-full\",\n      to: \"translate-y-0\"\n    }\n  }\n\n  @doc \"\"\"\n  Renders a side panel with a `:trigger` slot and arbitrary content.\n\n  The trigger is wrapped in a `display: contents` span wired to `show_sheet/1`,\n  so the caller's own button/element shows the sheet without extra markup. The\n  `:side` attribute controls which edge the panel is fixed to and slides from.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:side, :string, default: \"right\", values: ~w(top right bottom left))\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def sheet(assigns) do\n    assigns = assign(assigns, :side_classes, @sides[assigns.side])\n\n    ~H\"\"\"\n    <span phx-click={show_sheet(@id, @side)} class=\"contents\">{render_slot(@trigger)}</span>\n    <div id={\"#{@id}-root\"} phx-hook=\"ShadixSheet\">\n      <div\n        id={\"#{@id}-overlay\"}\n        class=\"hidden fixed inset-0 z-50 bg-black/50\"\n        aria-hidden=\"true\"\n        phx-click={hide_sheet(@id, @side)}\n      />\n      <.focus_wrap\n        id={\"#{@id}-content\"}\n        class={\n          cn([\n            \"hidden fixed z-50 flex flex-col gap-4 bg-background p-6 shadow-lg\",\n            @side_classes.position,\n            @class\n          ])\n        }\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={\"#{@id}-title\"}\n        aria-describedby={\"#{@id}-description\"}\n        data-slot=\"sheet-content\"\n        data-side={@side}\n        phx-window-keydown={hide_sheet(@id, @side)}\n        phx-key=\"escape\"\n      >\n        {render_slot(@inner_block)}\n        <.sheet_close id={@id} side={@side} />\n      </.focus_wrap>\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that opens the sheet with `id`.\n\n  Shows the overlay and content panel with side-aware enter transitions and\n  dispatches `shadix:sheet-open` on the `*-root` element for the `ShadixSheet`\n  hook.\n  \"\"\"\n  def show_sheet(id, side \\\\ \"right\") do\n    %{from: from, to: to} = @sides[side]\n\n    %JS{}\n    |> JS.show(\n      to: \"##{id}-overlay\",\n      transition:\n        {\"transition-opacity ease-out duration-300 motion-reduce:transition-none\", \"opacity-0\",\n         \"opacity-100\"}\n    )\n    |> JS.show(\n      to: \"##{id}-content\",\n      display: \"flex\",\n      transition:\n        {\"transition ease-out duration-500 motion-reduce:transition-none\", \"#{from} opacity-0\",\n         \"#{to} opacity-100\"}\n    )\n    |> JS.dispatch(\"shadix:sheet-open\", to: \"##{id}-root\")\n    |> JS.focus_first(to: \"##{id}-content\")\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the sheet with `id`.\n\n  Hides the overlay and content panel with side-aware leave transitions and\n  dispatches `shadix:sheet-close` on the `*-root` element for the `ShadixSheet`\n  hook.\n  \"\"\"\n  def hide_sheet(id, side \\\\ \"right\") do\n    %{from: from, to: to} = @sides[side]\n\n    %JS{}\n    |> JS.hide(\n      to: \"##{id}-overlay\",\n      transition:\n        {\"transition-opacity ease-in duration-300 motion-reduce:transition-none\", \"opacity-100\",\n         \"opacity-0\"}\n    )\n    |> JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-300 motion-reduce:transition-none\", \"#{to} opacity-100\",\n         \"#{from} opacity-0\"}\n    )\n    |> JS.dispatch(\"shadix:sheet-close\", to: \"##{id}-root\")\n  end\n\n  @doc \"Header region of a sheet; stacks title/description with sensible spacing.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sheet_header(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"sheet-header\" class={cn([\"flex flex-col gap-1.5\", @class])} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"Footer region of a sheet; pushed to the bottom of the panel.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sheet_footer(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"sheet-footer\" class={cn([\"mt-auto flex flex-col gap-2\", @class])} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Sheet title. `:id` is the *sheet's* id; the title renders with `\"#{id}-title\"`\n  so it matches the content panel's `aria-labelledby`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sheet_title(assigns) do\n    ~H\"\"\"\n    <h2\n      id={\"#{@id}-title\"}\n      data-slot=\"sheet-title\"\n      class={cn([\"text-foreground font-semibold\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </h2>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Sheet description. `:id` is the *sheet's* id; renders with `\"#{id}-description\"`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sheet_description(assigns) do\n    ~H\"\"\"\n    <p\n      id={\"#{@id}-description\"}\n      data-slot=\"sheet-description\"\n      class={cn([\"text-muted-foreground text-sm\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </p>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  A close button for the sheet with `:id`. Renders the X icon and closes the\n  sheet via `hide_sheet/1`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:side, :string, default: \"right\", values: ~w(top right bottom left))\n  attr(:class, :string, default: nil)\n\n  def sheet_close(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      data-slot=\"sheet-close\"\n      phx-click={hide_sheet(@id, @side)}\n      aria-label=\"Close\"\n      class={\n        cn([\n          \"absolute right-4 top-4 rounded-xs 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\",\n          @class\n        ])\n      }\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Sheet do\n  @moduledoc \"\"\"\n  A side panel (\"sheet\") built on client-side JS commands and a small LiveView hook.\n\n  Modelled on `Shadix.Components.Dialog`: `show_sheet/1` and `hide_sheet/1` are\n  `Phoenix.LiveView.JS` command builders that toggle the overlay and content\n  panel (with side-aware slide transitions) and dispatch `shadix:sheet-open` /\n  `shadix:sheet-close` events. The `ShadixSheet` hook (assets/ts/sheet.ts) listens\n  for those events to lock body scroll and manage focus. `Escape` and\n  overlay-click both close via `phx-window-keydown` / `phx-click`. Focus is\n  trapped with Phoenix's built-in `<.focus_wrap>`.\n\n  Unlike the dialog, the content is NOT centered: it is fixed to the chosen\n  `:side` (one of `top`, `right`, `bottom`, `left`) and slides in from that edge.\n  Positioning is driven by the colocated `[data-slot=\"sheet-content\"]` CSS keyed\n  off `data-side`; the enter/leave slide transitions are computed from the\n  `@sides` map.\n\n  Styling is delivered by colocated CSS (`priv/styles/<skin>/sheet.css`); each\n  element carries a stable `data-slot` (and the content panel a `data-side`) that\n  the CSS targets.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  # Per-side slide transition endpoints. `from`/`to` are the off-screen and\n  # on-screen translate states used by the show/hide JS commands. (Per-side\n  # positioning lives in the `[data-slot=\"sheet-content\"]` CSS, keyed on\n  # `data-side`.)\n  @sides %{\n    \"right\" => %{from: \"translate-x-full\", to: \"translate-x-0\"},\n    \"left\" => %{from: \"-translate-x-full\", to: \"translate-x-0\"},\n    \"top\" => %{from: \"-translate-y-full\", to: \"translate-y-0\"},\n    \"bottom\" => %{from: \"translate-y-full\", to: \"translate-y-0\"}\n  }\n\n  @doc \"\"\"\n  Renders a side panel with a `:trigger` slot and arbitrary content.\n\n  The trigger is wrapped in a `display: contents` span wired to `show_sheet/1`,\n  so the caller's own button/element shows the sheet without extra markup. The\n  `:side` attribute controls which edge the panel is fixed to and slides from.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:side, :string, default: \"right\", values: ~w(top right bottom left))\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def sheet(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <span phx-click={show_sheet(@id, @side)} class=\"contents\">{render_slot(@trigger)}</span>\n    <div id={\"#{@id}-root\"} phx-hook=\"ShadixSheet\">\n      <div\n        id={\"#{@id}-overlay\"}\n        data-slot=\"sheet-overlay\"\n        class=\"hidden\"\n        aria-hidden=\"true\"\n        phx-click={hide_sheet(@id, @side)}\n      />\n      <.focus_wrap\n        id={\"#{@id}-content\"}\n        class={[\"hidden\", @class]}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={\"#{@id}-title\"}\n        aria-describedby={\"#{@id}-description\"}\n        data-slot=\"sheet-content\"\n        data-side={@side}\n        phx-window-keydown={hide_sheet(@id, @side)}\n        phx-key=\"escape\"\n      >\n        {render_slot(@inner_block)}\n        <.sheet_close id={@id} side={@side} />\n      </.focus_wrap>\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that opens the sheet with `id`.\n\n  Shows the overlay and content panel with side-aware enter transitions and\n  dispatches `shadix:sheet-open` on the `*-root` element for the `ShadixSheet`\n  hook.\n  \"\"\"\n  def show_sheet(id, side \\\\ \"right\") do\n    %{from: from, to: to} = @sides[side]\n\n    %JS{}\n    |> JS.show(\n      to: \"##{id}-overlay\",\n      transition:\n        {\"transition-opacity ease-out duration-300 motion-reduce:transition-none\", \"opacity-0\",\n         \"opacity-100\"}\n    )\n    |> JS.show(\n      to: \"##{id}-content\",\n      display: \"flex\",\n      transition:\n        {\"transition ease-out duration-500 motion-reduce:transition-none\", \"#{from} opacity-0\",\n         \"#{to} opacity-100\"}\n    )\n    |> JS.dispatch(\"shadix:sheet-open\", to: \"##{id}-root\")\n    |> JS.focus_first(to: \"##{id}-content\")\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that closes the sheet with `id`.\n\n  Hides the overlay and content panel with side-aware leave transitions and\n  dispatches `shadix:sheet-close` on the `*-root` element for the `ShadixSheet`\n  hook.\n  \"\"\"\n  def hide_sheet(id, side \\\\ \"right\") do\n    %{from: from, to: to} = @sides[side]\n\n    %JS{}\n    |> JS.hide(\n      to: \"##{id}-overlay\",\n      transition:\n        {\"transition-opacity ease-in duration-300 motion-reduce:transition-none\", \"opacity-100\",\n         \"opacity-0\"}\n    )\n    |> JS.hide(\n      to: \"##{id}-content\",\n      transition:\n        {\"transition ease-in duration-300 motion-reduce:transition-none\", \"#{to} opacity-100\",\n         \"#{from} opacity-0\"}\n    )\n    |> JS.dispatch(\"shadix:sheet-close\", to: \"##{id}-root\")\n  end\n\n  @doc \"Header region of a sheet; stacks title/description with sensible spacing.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sheet_header(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"sheet-header\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"Footer region of a sheet; pushed to the bottom of the panel.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sheet_footer(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"sheet-footer\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Sheet title. `:id` is the *sheet's* id; the title renders with `\"#{id}-title\"`\n  so it matches the content panel's `aria-labelledby`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sheet_title(assigns) do\n    ~H\"\"\"\n    <h2\n      id={\"#{@id}-title\"}\n      data-slot=\"sheet-title\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </h2>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  Sheet description. `:id` is the *sheet's* id; renders with `\"#{id}-description\"`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sheet_description(assigns) do\n    ~H\"\"\"\n    <p\n      id={\"#{@id}-description\"}\n      data-slot=\"sheet-description\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </p>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  A close button for the sheet with `:id`. Renders the X icon and closes the\n  sheet via `hide_sheet/1`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:side, :string, default: \"right\", values: ~w(top right bottom left))\n  attr(:class, :string, default: nil)\n\n  def sheet_close(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      data-slot=\"sheet-close\"\n      phx-click={hide_sheet(@id, @side)}\n      aria-label=\"Close\"\n      class={@class}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M18 6 6 18\" />\n        <path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n    \"\"\"\n  end\nend\n",
       "path": "sheet.ex"
     }
   ],
@@ -15,6 +16,10 @@
   "name": "sheet",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"sheet-overlay\"] {\n    @apply fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs;\n  }\n\n  [data-slot=\"sheet-content\"] {\n    @apply bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;\n  }\n\n  [data-slot=\"sheet-close\"] {\n    @apply absolute top-3 right-3;\n  }\n\n  [data-slot=\"sheet-header\"] {\n    @apply flex flex-col gap-0.5 p-4;\n  }\n\n  [data-slot=\"sheet-footer\"] {\n    @apply mt-auto flex flex-col gap-2 p-4;\n  }\n\n  [data-slot=\"sheet-title\"] {\n    @apply text-foreground text-base font-medium;\n  }\n\n  [data-slot=\"sheet-description\"] {\n    @apply text-muted-foreground text-sm;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"sheet-overlay\"] {\n    @apply fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs;\n  }\n\n  [data-slot=\"sheet-content\"] {\n    @apply bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;\n  }\n\n  [data-slot=\"sheet-close\"] {\n    @apply absolute top-4 right-4;\n  }\n\n  [data-slot=\"sheet-header\"] {\n    @apply flex flex-col gap-1.5 p-4;\n  }\n\n  [data-slot=\"sheet-footer\"] {\n    @apply mt-auto flex flex-col gap-2 p-4;\n  }\n\n  [data-slot=\"sheet-title\"] {\n    @apply text-foreground font-medium;\n  }\n\n  [data-slot=\"sheet-description\"] {\n    @apply text-muted-foreground text-sm;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/sidebar.json b/priv/registry/sidebar.json
index 5697ff8..bc441f2 100644
--- a/priv/registry/sidebar.json
+++ b/priv/registry/sidebar.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Sidebar do\n  @moduledoc \"\"\"\n  A collapsible application sidebar built from a small set of composable parts.\n\n  `sidebar_provider/1` is a flex wrapper that owns the open/closed state via a\n  `data-state` attribute (`\"expanded\"` / `\"collapsed\"`) and carries the\n  `ShadixSidebar` hook (assets/ts/sidebar.ts). It also gets a Tailwind group\n  marker (`group/sidebar`) so descendant elements can react to the state purely\n  in CSS via `group-data-[state=collapsed]/sidebar:*` variants. The provider\n  holds both the `sidebar/1` and the main content.\n\n  `sidebar_trigger/1` is a button carrying `data-slot=\"sidebar-trigger\"`; the\n  hook listens for clicks on any such trigger inside the provider and flips the\n  provider's `data-state`. The CSS reacts: `sidebar/1` is an `<aside>` that\n  animates its width between `w-64` (expanded) and `w-0`/`overflow-hidden`\n  (collapsed). No server round-trip is involved — toggling is entirely\n  client-side.\n\n  The remaining parts (`sidebar_header/1`, `sidebar_content/1`,\n  `sidebar_footer/1`, `sidebar_group/1`, `sidebar_group_label/1`,\n  `sidebar_menu/1`, `sidebar_menu_item/1`, `sidebar_menu_button/1`) are\n  layout/structure primitives styled with the `--sidebar*` theme tokens\n  (`bg-sidebar`, `text-sidebar-foreground`, `bg-sidebar-accent`, …).\n\n  ## Simplifications (vs. shadcn's Sidebar)\n\n  shadcn's Sidebar is a large system; this is a focused v1. Intentionally\n  omitted:\n\n    * **No mobile off-canvas sheet.** There is no `Sheet`-based mobile variant;\n      the sidebar collapses in place on every viewport.\n    * **No rail.** There is no draggable/clickable rail handle along the edge.\n    * **No cookie persistence.** Open state is not persisted to a cookie (or to\n      the server); it resets on reload.\n    * **No keyboard shortcut.** There is no global `⌘B` / `Ctrl+B` toggle; only\n      the trigger button toggles the sidebar.\n    * **No `side`/`variant`/`collapsible` modes.** The sidebar is always on the\n      left, always the \"sidebar\" variant, and always collapses to zero width\n      (no \"icon\" collapse mode).\n    * **No `useSidebar` context.** State lives in a DOM `data-state` attribute,\n      not a shared context object; `sidebar_menu_button/1` does not auto-render\n      tooltips when collapsed.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  The flex wrapper that owns sidebar open/closed state.\n\n  Renders a `div` with `data-slot=\"sidebar-provider\"`, the `ShadixSidebar` hook,\n  and `data-state` (defaults to `\"expanded\"`). Place a `sidebar/1` and the main\n  content inside its `:inner_block`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_provider(assigns) do\n    ~H\"\"\"\n    <div\n      id={@id}\n      data-slot=\"sidebar-provider\"\n      phx-hook=\"ShadixSidebar\"\n      data-state=\"expanded\"\n      class={cn([\"group/sidebar flex min-h-svh w-full\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The sidebar surface: an `<aside>` whose width animates with the provider state.\n\n  Expanded is `w-64`; collapsed is `w-0` with `overflow-hidden`, driven by the\n  provider's `data-state` via the `group/sidebar` marker.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar(assigns) do\n    ~H\"\"\"\n    <aside\n      data-slot=\"sidebar\"\n      class={\n        cn([\n          \"flex h-svh shrink-0 flex-col overflow-hidden border-r bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-linear motion-reduce:transition-none\",\n          \"w-64 group-data-[state=collapsed]/sidebar:w-0\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </aside>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The toggle button. Clicking it flips the provider's `data-state`.\n\n  Carries `data-slot=\"sidebar-trigger\"`; the `ShadixSidebar` hook reacts to the\n  click. Renders a panel icon by default; override via the `:inner_block` slot.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block)\n\n  def sidebar_trigger(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      data-slot=\"sidebar-trigger\"\n      aria-label=\"Toggle sidebar\"\n      aria-expanded=\"true\"\n      class={\n        cn([\n          \"inline-flex size-7 items-center justify-center rounded-md text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      <%= if @inner_block != [] do %>\n        {render_slot(@inner_block)}\n      <% else %>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n          <path d=\"M9 3v18\" />\n        </svg>\n      <% end %>\n    </button>\n    \"\"\"\n  end\n\n  @doc \"The sidebar header region (top of the sidebar).\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_header(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"sidebar-header\"\n      class={cn([\"flex flex-col gap-2 p-2\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"The scrollable main content region of the sidebar.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_content(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"sidebar-content\"\n      class={cn([\"flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-2\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"The sidebar footer region (bottom of the sidebar).\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_footer(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"sidebar-footer\"\n      class={cn([\"flex flex-col gap-2 p-2\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A logical group of menu items within the sidebar content.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_group(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"sidebar-group\"\n      class={cn([\"relative flex w-full min-w-0 flex-col p-2\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A non-interactive label for a `sidebar_group/1`.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_group_label(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"sidebar-group-label\"\n      class={\n        cn([\n          \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"The menu list (`ul`) holding `sidebar_menu_item/1`s.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_menu(assigns) do\n    ~H\"\"\"\n    <ul\n      data-slot=\"sidebar-menu\"\n      class={cn([\"flex w-full min-w-0 flex-col gap-1\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </ul>\n    \"\"\"\n  end\n\n  @doc \"A menu list item (`li`).\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_menu_item(assigns) do\n    ~H\"\"\"\n    <li\n      data-slot=\"sidebar-menu-item\"\n      class={cn([\"group/menu-item relative\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </li>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A styled menu entry.\n\n  Renders an `<a>` so the caller can pass `href`/`navigate`/`patch` (or any\n  attribute) through `:rest`. Set `active` to mark the current item.\n  \"\"\"\n  attr(:active, :boolean, default: false)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(href navigate patch method download))\n  slot(:inner_block, required: true)\n\n  def sidebar_menu_button(assigns) do\n    ~H\"\"\"\n    <a\n      data-slot=\"sidebar-menu-button\"\n      data-active={to_string(@active)}\n      class={\n        cn([\n          \"flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </a>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Sidebar do\n  @moduledoc \"\"\"\n  A collapsible application sidebar built from a small set of composable parts.\n\n  `sidebar_provider/1` is a flex wrapper that owns the open/closed state via a\n  `data-state` attribute (`\"expanded\"` / `\"collapsed\"`) and carries the\n  `ShadixSidebar` hook (assets/ts/sidebar.ts). It also gets a Tailwind group\n  marker (`group/sidebar`) so descendant elements can react to the state purely\n  in CSS via `group-data-[state=collapsed]/sidebar:*` variants. The provider\n  holds both the `sidebar/1` and the main content.\n\n  `sidebar_trigger/1` is a button carrying `data-slot=\"sidebar-trigger\"`; the\n  hook listens for clicks on any such trigger inside the provider and flips the\n  provider's `data-state`. The CSS reacts: `sidebar/1` is an `<aside>` that\n  animates its width between expanded and collapsed (zero width / hidden\n  overflow) widths driven by the provider's `data-state` via the\n  `group/sidebar` marker. No server round-trip is involved — toggling is\n  entirely client-side.\n\n  The remaining parts (`sidebar_header/1`, `sidebar_content/1`,\n  `sidebar_footer/1`, `sidebar_group/1`, `sidebar_group_label/1`,\n  `sidebar_menu/1`, `sidebar_menu_item/1`, `sidebar_menu_button/1`) are\n  layout/structure primitives styled via their `data-slot` attributes using the\n  `--sidebar*` theme tokens. Styling lives in the colocated stylesheet\n  (`priv/styles/<skin>/sidebar.css`); each element carries a stable `data-slot`\n  (and the menu button a `data-active`) that the CSS targets.\n\n  ## Simplifications (vs. shadcn's Sidebar)\n\n  shadcn's Sidebar is a large system; this is a focused v1. Intentionally\n  omitted:\n\n    * **No mobile off-canvas sheet.** There is no `Sheet`-based mobile variant;\n      the sidebar collapses in place on every viewport.\n    * **No rail.** There is no draggable/clickable rail handle along the edge.\n    * **No cookie persistence.** Open state is not persisted to a cookie (or to\n      the server); it resets on reload.\n    * **No keyboard shortcut.** There is no global `⌘B` / `Ctrl+B` toggle; only\n      the trigger button toggles the sidebar.\n    * **No `side`/`variant`/`collapsible` modes.** The sidebar is always on the\n      left, always the \"sidebar\" variant, and always collapses to zero width\n      (no \"icon\" collapse mode).\n    * **No `useSidebar` context.** State lives in a DOM `data-state` attribute,\n      not a shared context object; `sidebar_menu_button/1` does not auto-render\n      tooltips when collapsed.\n  \"\"\"\n  use Phoenix.Component\n\n  @doc \"\"\"\n  The flex wrapper that owns sidebar open/closed state.\n\n  Renders a `div` with `data-slot=\"sidebar-provider\"`, the `ShadixSidebar` hook,\n  and `data-state` (defaults to `\"expanded\"`). Place a `sidebar/1` and the main\n  content inside its `:inner_block`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_provider(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div\n      id={@id}\n      data-slot=\"sidebar-provider\"\n      phx-hook=\"ShadixSidebar\"\n      data-state=\"expanded\"\n      class={[\"group/sidebar\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The sidebar surface: an `<aside>` whose width animates with the provider state.\n\n  Expanded is `w-64`; collapsed is `w-0` with `overflow-hidden`, driven by the\n  provider's `data-state` via the `group/sidebar` marker.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar(assigns) do\n    ~H\"\"\"\n    <aside\n      data-slot=\"sidebar\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </aside>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The toggle button. Clicking it flips the provider's `data-state`.\n\n  Carries `data-slot=\"sidebar-trigger\"`; the `ShadixSidebar` hook reacts to the\n  click. Renders a panel icon by default; override via the `:inner_block` slot.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block)\n\n  def sidebar_trigger(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      data-slot=\"sidebar-trigger\"\n      aria-label=\"Toggle sidebar\"\n      aria-expanded=\"true\"\n      class={@class}\n      {@rest}\n    >\n      <%= if @inner_block != [] do %>\n        {render_slot(@inner_block)}\n      <% else %>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n          <path d=\"M9 3v18\" />\n        </svg>\n      <% end %>\n    </button>\n    \"\"\"\n  end\n\n  @doc \"The sidebar header region (top of the sidebar).\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_header(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"sidebar-header\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"The scrollable main content region of the sidebar.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_content(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"sidebar-content\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"The sidebar footer region (bottom of the sidebar).\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_footer(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"sidebar-footer\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A logical group of menu items within the sidebar content.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_group(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"sidebar-group\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"A non-interactive label for a `sidebar_group/1`.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_group_label(assigns) do\n    ~H\"\"\"\n    <div\n      data-slot=\"sidebar-group-label\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"The menu list (`ul`) holding `sidebar_menu_item/1`s.\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_menu(assigns) do\n    ~H\"\"\"\n    <ul\n      data-slot=\"sidebar-menu\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </ul>\n    \"\"\"\n  end\n\n  @doc \"A menu list item (`li`).\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def sidebar_menu_item(assigns) do\n    ~H\"\"\"\n    <li\n      data-slot=\"sidebar-menu-item\"\n      class={[\"group/menu-item relative\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </li>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  A styled menu entry.\n\n  Renders an `<a>` so the caller can pass `href`/`navigate`/`patch` (or any\n  attribute) through `:rest`. Set `active` to mark the current item.\n  \"\"\"\n  attr(:active, :boolean, default: false)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(href navigate patch method download))\n  slot(:inner_block, required: true)\n\n  def sidebar_menu_button(assigns) do\n    ~H\"\"\"\n    <a\n      data-slot=\"sidebar-menu-button\"\n      data-active={to_string(@active)}\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </a>\n    \"\"\"\n  end\nend\n",
       "path": "sidebar.ex"
     }
   ],
@@ -15,6 +16,10 @@
   "name": "sidebar",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"sidebar-provider\"] {\n    @apply flex min-h-svh w-full;\n  }\n\n  [data-slot=\"sidebar\"] {\n    @apply flex h-svh shrink-0 flex-col overflow-hidden border-r bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-linear motion-reduce:transition-none w-64 group-data-[state=collapsed]/sidebar:w-0;\n  }\n\n  [data-slot=\"sidebar-trigger\"] {\n    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg;\n  }\n\n  [data-slot=\"sidebar-header\"] {\n    @apply flex flex-col gap-2 p-2;\n  }\n\n  [data-slot=\"sidebar-content\"] {\n    @apply flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden no-scrollbar gap-0;\n  }\n\n  [data-slot=\"sidebar-footer\"] {\n    @apply flex flex-col gap-2 p-2;\n  }\n\n  [data-slot=\"sidebar-group\"] {\n    @apply relative flex w-full min-w-0 flex-col p-2;\n  }\n\n  [data-slot=\"sidebar-group-label\"] {\n    @apply flex shrink-0 items-center outline-hidden [&>svg]:shrink-0 text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4;\n  }\n\n  [data-slot=\"sidebar-menu\"] {\n    @apply flex w-full min-w-0 flex-col gap-0;\n  }\n\n  [data-slot=\"sidebar-menu-button\"] {\n    @apply flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"sidebar-provider\"] {\n    @apply flex min-h-svh w-full;\n  }\n\n  [data-slot=\"sidebar\"] {\n    @apply flex h-svh shrink-0 flex-col overflow-hidden border-r bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-linear motion-reduce:transition-none w-64 group-data-[state=collapsed]/sidebar:w-0;\n  }\n\n  [data-slot=\"sidebar-trigger\"] {\n    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md;\n  }\n\n  [data-slot=\"sidebar-header\"] {\n    @apply flex flex-col gap-2 p-2;\n  }\n\n  [data-slot=\"sidebar-content\"] {\n    @apply flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden no-scrollbar gap-2;\n  }\n\n  [data-slot=\"sidebar-footer\"] {\n    @apply flex flex-col gap-2 p-2;\n  }\n\n  [data-slot=\"sidebar-group\"] {\n    @apply relative flex w-full min-w-0 flex-col p-2;\n  }\n\n  [data-slot=\"sidebar-group-label\"] {\n    @apply flex shrink-0 items-center outline-hidden [&>svg]:shrink-0 text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4;\n  }\n\n  [data-slot=\"sidebar-menu\"] {\n    @apply flex w-full min-w-0 flex-col gap-1;\n  }\n\n  [data-slot=\"sidebar-menu-button\"] {\n    @apply flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/slider.json b/priv/registry/slider.json
index 2cc0771..cb1d0ee 100644
--- a/priv/registry/slider.json
+++ b/priv/registry/slider.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Slider do\n  @moduledoc \"\"\"\n  Slider component adapted from shadcn/ui (new-york-v4) to a native\n  `<input type=\"range\">`.\n\n  Field-aware: the current value is read from the bound `Phoenix.HTML.FormField`.\n  shadcn builds its slider from Radix markup (track + range + thumb); here the\n  same look is reconstructed on the native element with `appearance-none` plus\n  Tailwind arbitrary variants targeting the browser's slider track/thumb\n  pseudo-elements (`::-webkit-slider-runnable-track`, `::-webkit-slider-thumb`,\n  `::-moz-range-track`, `::-moz-range-thumb`). No JavaScript.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n  import Shadix.Form\n\n  @base \"w-full cursor-pointer appearance-none bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none \" <>\n          \"[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:w-full [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-muted \" <>\n          \"[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:w-full [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted \" <>\n          \"[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:ring-ring/50 [&::-webkit-slider-thumb]:transition-[box-shadow] hover:[&::-webkit-slider-thumb]:ring-4 focus-visible:[&::-webkit-slider-thumb]:ring-4 \" <>\n          \"[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-primary [&::-moz-range-thumb]:bg-background [&::-moz-range-thumb]:shadow-sm [&::-moz-range-thumb]:ring-ring/50 [&::-moz-range-thumb]:transition-[box-shadow] hover:[&::-moz-range-thumb]:ring-4 focus-visible:[&::-moz-range-thumb]:ring-4 \" <>\n          \"aria-invalid:[&::-webkit-slider-thumb]:border-destructive aria-invalid:[&::-moz-range-thumb]:border-destructive\"\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:min, :integer, default: 0)\n  attr(:max, :integer, default: 100)\n  attr(:step, :integer, default: 1)\n  attr(:class, :string, default: nil)\n\n  attr(:rest, :global, include: ~w(disabled required readonly autofocus))\n\n  def slider(assigns) do\n    %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)\n    assigns = assign(assigns, id: id, name: name, value: value, errors: errors)\n    assigns = assign(assigns, :computed_class, cn([@base, assigns.class]))\n\n    ~H\"\"\"\n    <input\n      type=\"range\"\n      data-slot=\"slider\"\n      id={@id}\n      name={@name}\n      value={@value}\n      min={@min}\n      max={@max}\n      step={@step}\n      aria-invalid={@errors != [] && \"true\"}\n      aria-describedby={(@errors != [] && \"#{@id}-error\") || nil}\n      class={@computed_class}\n      {@rest}\n    />\n    <p\n      :if={@errors != []}\n      id={\"#{@id}-error\"}\n      data-slot=\"form-message\"\n      class=\"text-destructive text-sm mt-1\"\n    >\n      {List.first(@errors)}\n    </p>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Slider do\n  @moduledoc \"\"\"\n  Slider component adapted from shadcn/ui to a native `<input type=\"range\">`.\n\n  Field-aware: the current value is read from the bound `Phoenix.HTML.FormField`.\n  shadcn builds its slider from Radix markup (track + range + thumb); here the\n  same look is reconstructed on the native element via the browser's slider\n  track/thumb pseudo-elements (`::-webkit-slider-runnable-track`,\n  `::-webkit-slider-thumb`, `::-moz-range-track`, `::-moz-range-thumb`). No\n  JavaScript.\n\n  Styling is delivered by the colocated `priv/styles/<skin>/slider.css` skin via\n  the `data-slot=\"slider\"` attribute. Caller-supplied `class` is appended last;\n  Tailwind cascade layers ensure it wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Form\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:min, :integer, default: 0)\n  attr(:max, :integer, default: 100)\n  attr(:step, :integer, default: 1)\n  attr(:class, :string, default: nil)\n\n  attr(:rest, :global, include: ~w(disabled required readonly autofocus))\n\n  def slider(assigns) do\n    %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)\n    assigns = assign(assigns, id: id, name: name, value: value, errors: errors)\n\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <input\n      type=\"range\"\n      data-slot=\"slider\"\n      id={@id}\n      name={@name}\n      value={@value}\n      min={@min}\n      max={@max}\n      step={@step}\n      aria-invalid={@errors != [] && \"true\"}\n      aria-describedby={(@errors != [] && \"#{@id}-error\") || nil}\n      class={@class}\n      {@rest}\n    />\n    <p\n      :if={@errors != []}\n      id={\"#{@id}-error\"}\n      data-slot=\"form-message\"\n      class=\"text-destructive text-sm mt-1\"\n    >\n      {List.first(@errors)}\n    </p>\n    \"\"\"\n  end\nend\n",
       "path": "slider.ex"
     }
   ],
@@ -9,7 +10,11 @@
   "name": "slider",
   "npm_deps": [],
   "registry_deps": [
-    "cn",
-    "form"
-  ]
+    "form",
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  /*\n   * shadix renders the slider as a native <input type=\"range\"> rather than the\n   * shadcn Radix track/range/thumb elements, so the cn-slider-track and\n   * cn-slider-thumb skins are mapped onto the browser slider pseudo-elements.\n   * There is no separate range fill element on a native input, so the\n   * cn-slider-range skin (bg-primary) has no target here.\n   */\n  [data-slot=\"slider\"] {\n    @apply w-full cursor-pointer appearance-none bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none\n      [&::-webkit-slider-runnable-track]:w-full [&::-webkit-slider-runnable-track]:bg-muted [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:h-1\n      [&::-moz-range-track]:w-full [&::-moz-range-track]:bg-muted [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-1\n      [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-ring [&::-webkit-slider-thumb]:ring-ring/50 [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:transition-[color,box-shadow] hover:[&::-webkit-slider-thumb]:ring-3 focus-visible:[&::-webkit-slider-thumb]:ring-3 active:[&::-webkit-slider-thumb]:ring-3\n      [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-ring [&::-moz-range-thumb]:ring-ring/50 [&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:transition-[color,box-shadow] hover:[&::-moz-range-thumb]:ring-3 focus-visible:[&::-moz-range-thumb]:ring-3 active:[&::-moz-range-thumb]:ring-3\n      aria-invalid:[&::-webkit-slider-thumb]:border-destructive aria-invalid:[&::-moz-range-thumb]:border-destructive;\n  }\n}\n",
+    "vega": "@layer components {\n  /*\n   * shadix renders the slider as a native <input type=\"range\"> rather than the\n   * shadcn Radix track/range/thumb elements, so the cn-slider-track and\n   * cn-slider-thumb skins are mapped onto the browser slider pseudo-elements.\n   * There is no separate range fill element on a native input, so the\n   * cn-slider-range skin (bg-primary) has no target here.\n   */\n  [data-slot=\"slider\"] {\n    @apply w-full cursor-pointer appearance-none bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none\n      [&::-webkit-slider-runnable-track]:w-full [&::-webkit-slider-runnable-track]:bg-muted [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:h-1.5\n      [&::-moz-range-track]:w-full [&::-moz-range-track]:bg-muted [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-1.5\n      [&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:ring-ring/50 [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:transition-[color,box-shadow] hover:[&::-webkit-slider-thumb]:ring-4 focus-visible:[&::-webkit-slider-thumb]:ring-4\n      [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-primary [&::-moz-range-thumb]:ring-ring/50 [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:shadow-sm [&::-moz-range-thumb]:transition-[color,box-shadow] hover:[&::-moz-range-thumb]:ring-4 focus-visible:[&::-moz-range-thumb]:ring-4\n      aria-invalid:[&::-webkit-slider-thumb]:border-destructive aria-invalid:[&::-moz-range-thumb]:border-destructive;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/sonner.json b/priv/registry/sonner.json
index 321c3c3..a6fc796 100644
--- a/priv/registry/sonner.json
+++ b/priv/registry/sonner.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Sonner do\n  @moduledoc ~S\"\"\"\n  Toast notifications, the Shadix take on shadcn's `sonner` integration.\n\n  shadcn delegates entirely to the `sonner` npm library (a React component with\n  its own imperative `toast()` API). There is no equivalent runtime in Phoenix,\n  so this module is a `Phoenix.LiveComponent` that owns a `:toasts` stream and\n  renders an accessible region: a visually-hidden polite region, a\n  visually-hidden assertive region, and the visible stream `<ol>` of `toast/1`s.\n\n  ## Usage\n\n  Mount once in your layout (or root LiveView):\n\n      <.live_component module={Shadix.Components.Sonner} id=\"shadix-toaster\" flash={@flash} />\n\n  Trigger a toast from a LiveView:\n\n      def handle_event(\"save\", _p, socket) do\n        Shadix.Components.Sonner.send_toast(title: \"Saved\", message: \"Done\", variant: \"success\")\n        {:noreply, socket}\n      end\n\n  Existing flashes also appear automatically and are cleared so they won't replay:\n\n      {:noreply, put_flash(socket, :error, \"Something went wrong\")}\n\n  ## Variants\n\n  Supported variant values are `default | success | info | warning | error`.\n  The `error` and `warning` variants are considered high-priority and use\n  `role=\"alertdialog\"` with an `aria-live=\"assertive\"` announcement channel.\n  All other variants use `role=\"dialog\"` with an `aria-live=\"polite\"` channel.\n\n  ## Accessibility\n\n  Each toast is `role=\"dialog\"` or `role=\"alertdialog\"`, `aria-modal=\"false\"`,\n  focusable (`tabindex=\"0\"`), and links its title/description via\n  `aria-labelledby`/`aria-describedby`. Two sr-only live regions (polite and\n  assertive) announce new toasts to screen readers. The `ShadixSonner` JS hook\n  handles: auto-dismiss after ~4 s, pause-on-hover/focus, Escape to dismiss\n  the focused toast, and F6 to move focus to the toast stack. Entry/exit\n  animation is pure-CSS via `data-state`; `prefers-reduced-motion` disables\n  transitions.\n\n  ## Simplifications vs. sonner\n\n  This v1 deliberately scopes out a lot of the sonner feature set:\n\n    * No swipe-to-dismiss, action buttons, promise toasts, programmatic\n      update/dismiss-by-id, stacking-collapse, or position configuration\n      (fixed bottom-right). The duration is a fixed ~4 s.\n  \"\"\"\n  use Phoenix.LiveComponent\n\n  import Shadix.Cn\n\n  @high_priority_variants ~w(error warning)\n\n  @impl true\n  def mount(socket) do\n    {:ok,\n     socket\n     |> stream(:toasts, [])\n     |> assign(polite: \"\", assertive: \"\", seen_flash: MapSet.new())}\n  end\n\n  @default_toaster_id \"shadix-toaster\"\n\n  @doc \"\"\"\n  Sends a toast to a mounted `Sonner` live component from anywhere with access to\n  the component (typically a LiveView `handle_event`/`handle_info`). `opts` are\n  passed to `build_toast/1` (`:title`, `:message`, `:variant`, optional `:id`).\n  \"\"\"\n  def send_toast(toaster_id \\\\ @default_toaster_id, opts) do\n    send_update(__MODULE__, id: toaster_id, add_toast: build_toast(opts))\n    :ok\n  end\n\n  @impl true\n  def update(%{add_toast: toast}, socket) do\n    {:ok, socket |> stream_insert(:toasts, toast) |> announce(toast)}\n  end\n\n  def update(assigns, socket) do\n    {:ok, socket |> assign(:id, assigns.id) |> assign_flash(assigns)}\n  end\n\n  defp announce(socket, toast) do\n    text = [toast.title, toast.message] |> Enum.reject(&is_nil/1) |> Enum.join(\" \")\n\n    if toast.high_priority?,\n      do: assign(socket, assertive: text, polite: \"\"),\n      else: assign(socket, polite: text, assertive: \"\")\n  end\n\n  @impl true\n  def render(assigns) do\n    ~H\"\"\"\n    <div id={@id} data-slot=\"toaster\" phx-hook=\"ShadixSonner\" phx-target={@myself}>\n      <div class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{@polite}</div>\n      <div class=\"sr-only\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">{@assertive}</div>\n      <ol\n        id={\"#{@id}-list\"}\n        role=\"region\"\n        aria-label=\"Notifications\"\n        tabindex=\"-1\"\n        phx-update=\"stream\"\n        class=\"fixed bottom-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:bottom-4 sm:right-4 sm:top-auto sm:flex-col md:max-w-[420px]\"\n      >\n        <.toast\n          :for={{dom_id, toast} <- @streams.toasts}\n          id={dom_id}\n          variant={toast.variant}\n          title={toast.title}\n          message={toast.message}\n        />\n      </ol>\n    </div>\n    \"\"\"\n  end\n\n  @impl true\n  def handle_event(\"clear\", %{\"id\" => dom_id}, socket) do\n    {:noreply, stream_delete_by_dom_id(socket, :toasts, dom_id)}\n  end\n\n  @flash_variants %{\"info\" => \"info\", \"error\" => \"error\"}\n\n  defp assign_flash(socket, assigns) do\n    flash = Map.get(assigns, :flash, %{})\n\n    current =\n      for {kind, variant} <- @flash_variants,\n          message = Phoenix.Flash.get(flash, String.to_existing_atom(kind)),\n          is_binary(message) and message != \"\",\n          into: %{},\n          do: {kind, {variant, message}}\n\n    seen = socket.assigns.seen_flash\n\n    socket =\n      Enum.reduce(current, socket, fn {kind, {variant, message}}, socket ->\n        if MapSet.member?(seen, {kind, message}) do\n          socket\n        else\n          toast = build_toast(message: message, variant: variant)\n\n          socket\n          |> stream_insert(:toasts, toast)\n          |> announce(toast)\n          |> push_event(\"lv:clear-flash\", %{key: kind})\n        end\n      end)\n\n    # Keep only keys still present this render, so a cleared-then-retriggered\n    # identical flash counts as new next time.\n    new_seen = MapSet.new(current, fn {kind, {_variant, message}} -> {kind, message} end)\n    assign(socket, :seen_flash, new_seen)\n  end\n\n  @doc \"\"\"\n  Builds a normalized toast map from user-supplied options. Pure; used by\n  `send_toast/2` and the flash bridge to feed the `:toasts` stream.\n  \"\"\"\n  def build_toast(opts) do\n    opts = Map.new(opts)\n    variant = to_string(Map.get(opts, :variant, \"default\"))\n\n    %{\n      id: Map.get(opts, :id) || \"toast-#{System.unique_integer([:positive, :monotonic])}\",\n      variant: variant,\n      title: opts[:title],\n      message: opts[:message],\n      high_priority?: variant in @high_priority_variants\n    }\n  end\n\n  @doc ~S\"\"\"\n  A single toast notification. Rendered by the `Sonner` live component's stream\n  loop, but kept as a standalone function component so its accessibility markup\n  is testable in isolation.\n\n  `:variant` drives both styling and a11y priority: `error`/`warning` render as\n  `role=\"alertdialog\"` (high priority), the rest as `role=\"dialog\"`. The toast is\n  focusable (`tabindex=\"0\"`) and links its title/description via\n  `aria-labelledby`/`aria-describedby` only when those elements exist. Dismissal\n  is delegated to the `ShadixSonner` hook (the close button carries no\n  `phx-click`), and enter/exit is pure-CSS via `data-state`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:variant, :string, default: \"default\", values: ~w(default success info warning error))\n  attr(:title, :string, default: nil)\n  attr(:message, :string, default: nil)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block)\n\n  def toast(assigns) do\n    assigns =\n      assigns\n      |> assign(:high_priority?, assigns.variant in ~w(error warning))\n      |> assign(:title_id, assigns.title && \"#{assigns.id}-title\")\n      |> assign(:desc_id, assigns.message && \"#{assigns.id}-description\")\n\n    ~H\"\"\"\n    <li\n      id={@id}\n      data-slot=\"toast\"\n      data-variant={@variant}\n      data-state=\"closed\"\n      role={if @high_priority?, do: \"alertdialog\", else: \"dialog\"}\n      aria-modal=\"false\"\n      aria-labelledby={@title_id}\n      aria-describedby={@desc_id}\n      tabindex=\"0\"\n      class={\n        cn([\n          \"group pointer-events-auto relative flex w-full list-none items-start gap-2 rounded-md border p-4 pr-8 shadow-lg outline-none\",\n          \"transition-all duration-200 ease-out motion-reduce:transition-none\",\n          \"data-[state=open]:translate-y-0 data-[state=open]:opacity-100\",\n          \"data-[state=closed]:translate-y-2 data-[state=closed]:opacity-0\",\n          \"focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n          variant_class(@variant),\n          @class\n        ])\n      }\n      {@rest}\n    >\n      <div class=\"grid gap-1\"><div :if={@title} id={@title_id} data-slot=\"toast-title\" class=\"text-sm font-semibold\">{@title}</div><div :if={@message} id={@desc_id} data-slot=\"toast-description\" class=\"text-sm opacity-90\">{@message}</div>{render_slot(@inner_block)}</div>\n      <button\n        type=\"button\"\n        data-slot=\"toast-close\"\n        aria-label=\"Close notification\"\n        class=\"absolute right-2 top-2 rounded-md p-1 opacity-60 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </button>\n    </li>\n    \"\"\"\n  end\n\n  defp variant_class(\"success\"), do: \"bg-background text-foreground border-green-500/50\"\n  defp variant_class(\"info\"), do: \"bg-background text-foreground border-blue-500/50\"\n  defp variant_class(\"warning\"), do: \"bg-background text-foreground border-yellow-500/50\"\n  # White text on the destructive surface (matching the button's destructive\n  # variant). The theme's `--destructive-foreground` is a dark red in dark mode,\n  # which renders unreadably on the light-salmon dark-mode `--destructive`.\n  defp variant_class(\"error\"),\n    do: \"bg-destructive text-white border-destructive dark:bg-destructive/60\"\n\n  defp variant_class(_), do: \"bg-background text-foreground border\"\nend\n",
+      "content": "defmodule Shadix.Components.Sonner do\n  @moduledoc ~S\"\"\"\n  Toast notifications, the Shadix take on shadcn's `sonner` integration.\n\n  shadcn delegates entirely to the `sonner` npm library (a React component with\n  its own imperative `toast()` API). There is no equivalent runtime in Phoenix,\n  so this module is a `Phoenix.LiveComponent` that owns a `:toasts` stream and\n  renders an accessible region: a visually-hidden polite region, a\n  visually-hidden assertive region, and the visible stream `<ol>` of `toast/1`s.\n\n  ## Usage\n\n  Mount once in your layout (or root LiveView):\n\n      <.live_component module={Shadix.Components.Sonner} id=\"shadix-toaster\" flash={@flash} />\n\n  Trigger a toast from a LiveView:\n\n      def handle_event(\"save\", _p, socket) do\n        Shadix.Components.Sonner.send_toast(title: \"Saved\", message: \"Done\", variant: \"success\")\n        {:noreply, socket}\n      end\n\n  Existing flashes also appear automatically and are cleared so they won't replay:\n\n      {:noreply, put_flash(socket, :error, \"Something went wrong\")}\n\n  ## Variants\n\n  Supported variant values are `default | success | info | warning | error`.\n  The `error` and `warning` variants are considered high-priority and use\n  `role=\"alertdialog\"` with an `aria-live=\"assertive\"` announcement channel.\n  All other variants use `role=\"dialog\"` with an `aria-live=\"polite\"` channel.\n\n  Each element carries a stable `data-slot` (and the toast a `data-variant`/\n  `data-state`); styling lives in the colocated `priv/styles/<skin>/sonner.css`,\n  selected by those attributes, with the caller's `class` appended last so the\n  Tailwind cascade layers let it win over the defaults.\n\n  ## Accessibility\n\n  Each toast is `role=\"dialog\"` or `role=\"alertdialog\"`, `aria-modal=\"false\"`,\n  focusable (`tabindex=\"0\"`), and links its title/description via\n  `aria-labelledby`/`aria-describedby`. Two sr-only live regions (polite and\n  assertive) announce new toasts to screen readers. The `ShadixSonner` JS hook\n  handles: auto-dismiss after ~4 s, pause-on-hover/focus, Escape to dismiss\n  the focused toast, and F6 to move focus to the toast stack. Entry/exit\n  animation is pure-CSS via `data-state`; `prefers-reduced-motion` disables\n  transitions.\n\n  ## Simplifications vs. sonner\n\n  This v1 deliberately scopes out a lot of the sonner feature set:\n\n    * No swipe-to-dismiss, action buttons, promise toasts, programmatic\n      update/dismiss-by-id, stacking-collapse, or position configuration\n      (fixed bottom-right). The duration is a fixed ~4 s.\n  \"\"\"\n  use Phoenix.LiveComponent\n\n  @high_priority_variants ~w(error warning)\n\n  @impl true\n  def mount(socket) do\n    {:ok,\n     socket\n     |> stream(:toasts, [])\n     |> assign(polite: \"\", assertive: \"\", seen_flash: MapSet.new())}\n  end\n\n  @default_toaster_id \"shadix-toaster\"\n\n  @doc \"\"\"\n  Sends a toast to a mounted `Sonner` live component from anywhere with access to\n  the component (typically a LiveView `handle_event`/`handle_info`). `opts` are\n  passed to `build_toast/1` (`:title`, `:message`, `:variant`, optional `:id`).\n  \"\"\"\n  def send_toast(toaster_id \\\\ @default_toaster_id, opts) do\n    send_update(__MODULE__, id: toaster_id, add_toast: build_toast(opts))\n    :ok\n  end\n\n  @impl true\n  def update(%{add_toast: toast}, socket) do\n    {:ok, socket |> stream_insert(:toasts, toast) |> announce(toast)}\n  end\n\n  def update(assigns, socket) do\n    {:ok, socket |> assign(:id, assigns.id) |> assign_flash(assigns)}\n  end\n\n  defp announce(socket, toast) do\n    text = [toast.title, toast.message] |> Enum.reject(&is_nil/1) |> Enum.join(\" \")\n\n    if toast.high_priority?,\n      do: assign(socket, assertive: text, polite: \"\"),\n      else: assign(socket, polite: text, assertive: \"\")\n  end\n\n  @impl true\n  def render(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div id={@id} data-slot=\"toaster\" phx-hook=\"ShadixSonner\" phx-target={@myself}>\n      <div class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{@polite}</div>\n      <div class=\"sr-only\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">{@assertive}</div>\n      <ol\n        id={\"#{@id}-list\"}\n        data-slot=\"toaster-list\"\n        role=\"region\"\n        aria-label=\"Notifications\"\n        tabindex=\"-1\"\n        phx-update=\"stream\"\n      >\n        <.toast\n          :for={{dom_id, toast} <- @streams.toasts}\n          id={dom_id}\n          variant={toast.variant}\n          title={toast.title}\n          message={toast.message}\n        />\n      </ol>\n    </div>\n    \"\"\"\n  end\n\n  @impl true\n  def handle_event(\"clear\", %{\"id\" => dom_id}, socket) do\n    {:noreply, stream_delete_by_dom_id(socket, :toasts, dom_id)}\n  end\n\n  @flash_variants %{\"info\" => \"info\", \"error\" => \"error\"}\n\n  defp assign_flash(socket, assigns) do\n    flash = Map.get(assigns, :flash, %{})\n\n    current =\n      for {kind, variant} <- @flash_variants,\n          message = Phoenix.Flash.get(flash, String.to_existing_atom(kind)),\n          is_binary(message) and message != \"\",\n          into: %{},\n          do: {kind, {variant, message}}\n\n    seen = socket.assigns.seen_flash\n\n    socket =\n      Enum.reduce(current, socket, fn {kind, {variant, message}}, socket ->\n        if MapSet.member?(seen, {kind, message}) do\n          socket\n        else\n          toast = build_toast(message: message, variant: variant)\n\n          socket\n          |> stream_insert(:toasts, toast)\n          |> announce(toast)\n          |> push_event(\"lv:clear-flash\", %{key: kind})\n        end\n      end)\n\n    # Keep only keys still present this render, so a cleared-then-retriggered\n    # identical flash counts as new next time.\n    new_seen = MapSet.new(current, fn {kind, {_variant, message}} -> {kind, message} end)\n    assign(socket, :seen_flash, new_seen)\n  end\n\n  @doc \"\"\"\n  Builds a normalized toast map from user-supplied options. Pure; used by\n  `send_toast/2` and the flash bridge to feed the `:toasts` stream.\n  \"\"\"\n  def build_toast(opts) do\n    opts = Map.new(opts)\n    variant = to_string(Map.get(opts, :variant, \"default\"))\n\n    %{\n      id: Map.get(opts, :id) || \"toast-#{System.unique_integer([:positive, :monotonic])}\",\n      variant: variant,\n      title: opts[:title],\n      message: opts[:message],\n      high_priority?: variant in @high_priority_variants\n    }\n  end\n\n  @doc ~S\"\"\"\n  A single toast notification. Rendered by the `Sonner` live component's stream\n  loop, but kept as a standalone function component so its accessibility markup\n  is testable in isolation.\n\n  `:variant` drives both styling and a11y priority: `error`/`warning` render as\n  `role=\"alertdialog\"` (high priority), the rest as `role=\"dialog\"`. The toast is\n  focusable (`tabindex=\"0\"`) and links its title/description via\n  `aria-labelledby`/`aria-describedby` only when those elements exist. Dismissal\n  is delegated to the `ShadixSonner` hook (the close button carries no\n  `phx-click`), and enter/exit is pure-CSS via `data-state`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:variant, :string, default: \"default\", values: ~w(default success info warning error))\n  attr(:title, :string, default: nil)\n  attr(:message, :string, default: nil)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block)\n\n  def toast(assigns) do\n    assigns =\n      assigns\n      |> assign(:high_priority?, assigns.variant in ~w(error warning))\n      |> assign(:title_id, assigns.title && \"#{assigns.id}-title\")\n      |> assign(:desc_id, assigns.message && \"#{assigns.id}-description\")\n\n    ~H\"\"\"\n    <li\n      id={@id}\n      data-slot=\"toast\"\n      data-variant={@variant}\n      data-state=\"closed\"\n      role={if @high_priority?, do: \"alertdialog\", else: \"dialog\"}\n      aria-modal=\"false\"\n      aria-labelledby={@title_id}\n      aria-describedby={@desc_id}\n      tabindex=\"0\"\n      class={[\"group\", @class]}\n      {@rest}\n    >\n      <div class=\"grid gap-1\"><div :if={@title} id={@title_id} data-slot=\"toast-title\">{@title}</div><div :if={@message} id={@desc_id} data-slot=\"toast-description\">{@message}</div>{render_slot(@inner_block)}</div>\n      <button\n        type=\"button\"\n        data-slot=\"toast-close\"\n        aria-label=\"Close notification\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </button>\n    </li>\n    \"\"\"\n  end\nend\n",
       "path": "sonner.ex"
     }
   ],
@@ -15,6 +16,10 @@
   "name": "sonner",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"toaster-list\"] {\n    @apply fixed bottom-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:bottom-4 sm:right-4 sm:top-auto sm:flex-col md:max-w-[420px];\n  }\n\n  [data-slot=\"toast\"] {\n    @apply pointer-events-auto relative flex w-full list-none items-start gap-2 border p-4 pr-8 shadow-lg outline-none transition-all duration-200 ease-out motion-reduce:transition-none data-[state=open]:translate-y-0 data-[state=open]:opacity-100 data-[state=closed]:translate-y-2 data-[state=closed]:opacity-0 focus-visible:ring-[3px] focus-visible:ring-ring/50 rounded-2xl;\n  }\n\n  [data-slot=\"toast\"][data-variant=\"default\"] {\n    @apply bg-background text-foreground;\n  }\n\n  [data-slot=\"toast\"][data-variant=\"success\"] {\n    @apply bg-background text-foreground border-green-500/50;\n  }\n\n  [data-slot=\"toast\"][data-variant=\"info\"] {\n    @apply bg-background text-foreground border-blue-500/50;\n  }\n\n  [data-slot=\"toast\"][data-variant=\"warning\"] {\n    @apply bg-background text-foreground border-yellow-500/50;\n  }\n\n  /* White text on the destructive surface (matching the button's destructive\n     variant). The theme's `--destructive-foreground` is a dark red in dark mode,\n     which renders unreadably on the light-salmon dark-mode `--destructive`. */\n  [data-slot=\"toast\"][data-variant=\"error\"] {\n    @apply bg-destructive text-white border-destructive dark:bg-destructive/60;\n  }\n\n  [data-slot=\"toast-title\"] {\n    @apply text-sm font-semibold;\n  }\n\n  [data-slot=\"toast-description\"] {\n    @apply text-sm opacity-90;\n  }\n\n  [data-slot=\"toast-close\"] {\n    @apply absolute right-2 top-2 rounded-md p-1 opacity-60 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"toaster-list\"] {\n    @apply fixed bottom-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:bottom-4 sm:right-4 sm:top-auto sm:flex-col md:max-w-[420px];\n  }\n\n  [data-slot=\"toast\"] {\n    @apply pointer-events-auto relative flex w-full list-none items-start gap-2 border p-4 pr-8 shadow-lg outline-none transition-all duration-200 ease-out motion-reduce:transition-none data-[state=open]:translate-y-0 data-[state=open]:opacity-100 data-[state=closed]:translate-y-2 data-[state=closed]:opacity-0 focus-visible:ring-[3px] focus-visible:ring-ring/50 rounded-2xl;\n  }\n\n  [data-slot=\"toast\"][data-variant=\"default\"] {\n    @apply bg-background text-foreground;\n  }\n\n  [data-slot=\"toast\"][data-variant=\"success\"] {\n    @apply bg-background text-foreground border-green-500/50;\n  }\n\n  [data-slot=\"toast\"][data-variant=\"info\"] {\n    @apply bg-background text-foreground border-blue-500/50;\n  }\n\n  [data-slot=\"toast\"][data-variant=\"warning\"] {\n    @apply bg-background text-foreground border-yellow-500/50;\n  }\n\n  /* White text on the destructive surface (matching the button's destructive\n     variant). The theme's `--destructive-foreground` is a dark red in dark mode,\n     which renders unreadably on the light-salmon dark-mode `--destructive`. */\n  [data-slot=\"toast\"][data-variant=\"error\"] {\n    @apply bg-destructive text-white border-destructive dark:bg-destructive/60;\n  }\n\n  [data-slot=\"toast-title\"] {\n    @apply text-sm font-semibold;\n  }\n\n  [data-slot=\"toast-description\"] {\n    @apply text-sm opacity-90;\n  }\n\n  [data-slot=\"toast-close\"] {\n    @apply absolute right-2 top-2 rounded-md p-1 opacity-60 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/switch.json b/priv/registry/switch.json
index 5d5c2df..87da68a 100644
--- a/priv/registry/switch.json
+++ b/priv/registry/switch.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Switch do\n  @moduledoc \"\"\"\n  Switch component translated from shadcn/ui (new-york-v4).\n\n  A field-aware boolean control rendered as a native checkbox styled into a\n  pill-shaped switch. Like the checkbox control, it emits a hidden `\"false\"`\n  input first so an unchecked switch still submits a value. The thumb is drawn\n  with a `before:` pseudo-element and translated on `checked:` — no JavaScript,\n  no `phx-*` bindings, no Radix `data-state` behavior.\n\n  Caller-supplied `class` is appended last; Tailwind cascade layers ensure it\n  wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n  import Shadix.Form\n\n  @base \"peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer appearance-none items-center rounded-full border border-transparent bg-input shadow-xs transition-all motion-reduce:transition-none outline-none before:pointer-events-none before:absolute before:top-1/2 before:left-0.5 before:-translate-y-1/2 before:size-4 before:rounded-full before:bg-background before:transition-transform before:motion-reduce:transition-none before:content-[''] checked:bg-primary dark:checked:bg-primary checked:before:translate-x-4 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/80 dark:aria-invalid:ring-destructive/40\"\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled required readonly autofocus))\n\n  def switch(assigns) do\n    %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)\n    assigns = assign(assigns, id: id, name: name, value: value, errors: errors)\n    assigns = assign(assigns, :checked, Phoenix.HTML.Form.normalize_value(\"checkbox\", value))\n    assigns = assign(assigns, :computed_class, cn([@base, assigns.class]))\n\n    ~H\"\"\"\n    <input type=\"hidden\" name={@name} value=\"false\" />\n    <input\n      type=\"checkbox\"\n      role=\"switch\"\n      data-slot=\"switch\"\n      id={@id}\n      name={@name}\n      value=\"true\"\n      checked={@checked}\n      aria-invalid={(@errors != [] && \"true\") || nil}\n      aria-describedby={(@errors != [] && \"#{@id}-error\") || nil}\n      class={@computed_class}\n      {@rest}\n    />\n    <p\n      :if={@errors != []}\n      id={\"#{@id}-error\"}\n      data-slot=\"form-message\"\n      class=\"text-destructive text-sm mt-1\"\n    >\n      {List.first(@errors)}\n    </p>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Switch do\n  @moduledoc \"\"\"\n  Switch component translated from shadcn/ui (new-york-v4).\n\n  A field-aware boolean control rendered as a native checkbox styled into a\n  pill-shaped switch. Like the checkbox control, it emits a hidden `\"false\"`\n  input first so an unchecked switch still submits a value — no JavaScript,\n  no `phx-*` bindings.\n\n  Styling is delivered by the colocated `priv/styles/<skin>/switch.css` skin\n  via the `data-slot=\"switch\"` attribute. Caller-supplied `class` is appended\n  last; Tailwind cascade layers ensure it wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Form\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled required readonly autofocus))\n\n  def switch(assigns) do\n    %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)\n    assigns = assign(assigns, id: id, name: name, value: value, errors: errors)\n    assigns = assign(assigns, :checked, Phoenix.HTML.Form.normalize_value(\"checkbox\", value))\n\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <input type=\"hidden\" name={@name} value=\"false\" />\n    <input\n      type=\"checkbox\"\n      role=\"switch\"\n      data-slot=\"switch\"\n      id={@id}\n      name={@name}\n      value=\"true\"\n      checked={@checked}\n      aria-invalid={(@errors != [] && \"true\") || nil}\n      aria-describedby={(@errors != [] && \"#{@id}-error\") || nil}\n      class={[\"group/switch peer\", @class]}\n      {@rest}\n    />\n    <p\n      :if={@errors != []}\n      id={\"#{@id}-error\"}\n      data-slot=\"form-message\"\n      class=\"text-destructive text-sm mt-1\"\n    >\n      {List.first(@errors)}\n    </p>\n    \"\"\"\n  end\nend\n",
       "path": "switch.ex"
     }
   ],
@@ -9,7 +10,11 @@
   "name": "switch",
   "npm_deps": [],
   "registry_deps": [
-    "cn",
-    "form"
-  ]
+    "form",
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"switch\"] {\n    @apply relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];\n  }\n\n  [data-slot=\"switch-thumb\"] {\n    @apply pointer-events-none block ring-0 transition-transform bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"switch\"] {\n    @apply relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];\n  }\n\n  [data-slot=\"switch-thumb\"] {\n    @apply pointer-events-none block ring-0 transition-transform bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/table.json b/priv/registry/table.json
index b70b6f3..27b23cc 100644
--- a/priv/registry/table.json
+++ b/priv/registry/table.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Table do\n  @moduledoc \"\"\"\n  A responsive table component, translated from shadcn/ui.\n\n  Provides `table/1` (wrapped in a scroll container) along with\n  `table_header/1`, `table_body/1`, `table_footer/1`, `table_row/1`,\n  `table_head/1`, `table_cell/1`, and `table_caption/1`.\n  \"\"\"\n  use Phoenix.Component\n  import Shadix.Cn\n\n  @table \"w-full caption-bottom text-sm\"\n  @table_header \"[&_tr]:border-b\"\n  @table_body \"[&_tr:last-child]:border-0\"\n  @table_footer \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\"\n  @table_row \"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted\"\n  @table_head \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\"\n  @table_cell \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\"\n  @table_caption \"mt-4 text-sm text-muted-foreground\"\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def table(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@table, assigns.class]))\n\n    ~H\"\"\"\n    <div data-slot=\"table-container\" class=\"relative w-full overflow-x-auto\">\n      <table data-slot=\"table\" class={@computed_class} {@rest}>\n        {render_slot(@inner_block)}\n      </table>\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def table_header(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@table_header, assigns.class]))\n\n    ~H\"\"\"\n    <thead data-slot=\"table-header\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </thead>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def table_body(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@table_body, assigns.class]))\n\n    ~H\"\"\"\n    <tbody data-slot=\"table-body\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </tbody>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def table_footer(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@table_footer, assigns.class]))\n\n    ~H\"\"\"\n    <tfoot data-slot=\"table-footer\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </tfoot>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(data-state))\n  slot(:inner_block, required: true)\n\n  def table_row(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@table_row, assigns.class]))\n\n    ~H\"\"\"\n    <tr data-slot=\"table-row\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </tr>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(colspan rowspan scope abbr))\n  slot(:inner_block, required: true)\n\n  def table_head(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@table_head, assigns.class]))\n\n    ~H\"\"\"\n    <th data-slot=\"table-head\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </th>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(colspan rowspan headers))\n  slot(:inner_block, required: true)\n\n  def table_cell(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@table_cell, assigns.class]))\n\n    ~H\"\"\"\n    <td data-slot=\"table-cell\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </td>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def table_caption(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@table_caption, assigns.class]))\n\n    ~H\"\"\"\n    <caption data-slot=\"table-caption\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </caption>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Table do\n  @moduledoc \"\"\"\n  A responsive table component, translated from shadcn/ui.\n\n  Provides `table/1` (wrapped in a scroll container) along with\n  `table_header/1`, `table_body/1`, `table_footer/1`, `table_row/1`,\n  `table_head/1`, `table_cell/1`, and `table_caption/1`.\n\n  Styling is delivered via colocated CSS keyed off each element's\n  `data-slot` attribute.\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def table(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div data-slot=\"table-container\">\n      <table data-slot=\"table\" class={@class} {@rest}>\n        {render_slot(@inner_block)}\n      </table>\n    </div>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def table_header(assigns) do\n    ~H\"\"\"\n    <thead data-slot=\"table-header\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </thead>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def table_body(assigns) do\n    ~H\"\"\"\n    <tbody data-slot=\"table-body\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </tbody>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def table_footer(assigns) do\n    ~H\"\"\"\n    <tfoot data-slot=\"table-footer\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </tfoot>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(data-state))\n  slot(:inner_block, required: true)\n\n  def table_row(assigns) do\n    ~H\"\"\"\n    <tr data-slot=\"table-row\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </tr>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(colspan rowspan scope abbr))\n  slot(:inner_block, required: true)\n\n  def table_head(assigns) do\n    ~H\"\"\"\n    <th data-slot=\"table-head\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </th>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(colspan rowspan headers))\n  slot(:inner_block, required: true)\n\n  def table_cell(assigns) do\n    ~H\"\"\"\n    <td data-slot=\"table-cell\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </td>\n    \"\"\"\n  end\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def table_caption(assigns) do\n    ~H\"\"\"\n    <caption data-slot=\"table-caption\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </caption>\n    \"\"\"\n  end\nend\n",
       "path": "table.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "table",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"table-container\"] {\n    @apply relative w-full overflow-x-auto;\n  }\n\n  [data-slot=\"table\"] {\n    @apply w-full caption-bottom text-sm;\n  }\n\n  [data-slot=\"table-header\"] {\n    @apply [&_tr]:border-b;\n  }\n\n  [data-slot=\"table-body\"] {\n    @apply [&_tr:last-child]:border-0;\n  }\n\n  [data-slot=\"table-footer\"] {\n    @apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;\n  }\n\n  [data-slot=\"table-row\"] {\n    @apply hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50;\n  }\n\n  [data-slot=\"table-head\"] {\n    @apply text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0;\n  }\n\n  [data-slot=\"table-cell\"] {\n    @apply p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0;\n  }\n\n  [data-slot=\"table-caption\"] {\n    @apply text-muted-foreground mt-4 text-sm;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"table-container\"] {\n    @apply relative w-full overflow-x-auto;\n  }\n\n  [data-slot=\"table\"] {\n    @apply w-full caption-bottom text-sm;\n  }\n\n  [data-slot=\"table-header\"] {\n    @apply [&_tr]:border-b;\n  }\n\n  [data-slot=\"table-body\"] {\n    @apply [&_tr:last-child]:border-0;\n  }\n\n  [data-slot=\"table-footer\"] {\n    @apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;\n  }\n\n  [data-slot=\"table-row\"] {\n    @apply hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50;\n  }\n\n  [data-slot=\"table-head\"] {\n    @apply text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0;\n  }\n\n  [data-slot=\"table-cell\"] {\n    @apply p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0;\n  }\n\n  [data-slot=\"table-caption\"] {\n    @apply text-muted-foreground mt-4 text-sm;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/tabs.json b/priv/registry/tabs.json
index 3620261..89e5e9a 100644
--- a/priv/registry/tabs.json
+++ b/priv/registry/tabs.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Tabs do\n  @moduledoc ~S\"\"\"\n  A fully client-driven, uncontrolled tabs component.\n\n  Unlike the React/Radix original there is no server state: `tabs_trigger/1`\n  carries a `Phoenix.LiveView.JS` `phx-click` that, scoped to a shared\n  `data-tabs-id`, hides every sibling panel and shows its own, then flips\n  `aria-selected` / `data-state` across all triggers in the group. The initial\n  state is rendered statically from the required `:default` value: the matching\n  panel is shown and its trigger marked selected.\n\n  Triggers and panels are wired together by id (`\"#{id}-tab-#{value}\"` /\n  `\"#{id}-panel-#{value}\"`) so `aria-controls` / `aria-labelledby` line up, and a\n  small `ShadixTabs` hook on the tablist provides ArrowLeft/ArrowRight roving\n  focus with activation on focus for keyboard a11y.\n\n  data-slots: `tabs`, `tabs-list`, `tabs-trigger`, `tabs-content`.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  The tabs root. `:default` is the value of the tab that is active on first\n  render; descendant triggers/contents take this `:id` to wire ids together.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:default, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def tabs(assigns) do\n    ~H\"\"\"\n    <div\n      id={@id}\n      data-slot=\"tabs\"\n      data-tabs-default={@default}\n      class={cn([\"flex flex-col gap-2\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The list of triggers (`role=\"tablist\"`). Carries the `ShadixTabs` hook for\n  roving focus.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def tabs_list(assigns) do\n    ~H\"\"\"\n    <div\n      id={\"#{@id}-list\"}\n      role=\"tablist\"\n      data-slot=\"tabs-list\"\n      phx-hook=\"ShadixTabs\"\n      class={\n        cn([\n          \"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  A single tab trigger. `:id` is the *tabs'* id and `:value` selects which panel\n  it controls. Clicking shows its panel, hides siblings, and updates selected\n  state across the group via a shared `data-tabs-id` selector.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:value, :string, required: true)\n  attr(:default, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def tabs_trigger(assigns) do\n    assigns = assign(assigns, :active, assigns.value == assigns.default)\n\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      id={\"#{@id}-tab-#{@value}\"}\n      role=\"tab\"\n      data-slot=\"tabs-trigger\"\n      data-tabs-id={@id}\n      data-tabs-value={@value}\n      data-state={if @active, do: \"active\", else: \"inactive\"}\n      aria-selected={if @active, do: \"true\", else: \"false\"}\n      aria-controls={\"#{@id}-panel-#{@value}\"}\n      tabindex={if @active, do: \"0\", else: \"-1\"}\n      phx-click={select_tab(@id, @value)}\n      class={\n        cn([\n          \"data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 dark:text-muted-foreground dark:hover:text-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all hover:text-foreground focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          @class\n        ])\n      }\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </button>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  A tab panel. `:id` is the *tabs'* id and `:value` ties it to its trigger. The\n  panel is `hidden` unless its `:value` equals `:default`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:value, :string, required: true)\n  attr(:default, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def tabs_content(assigns) do\n    assigns = assign(assigns, :active, assigns.value == assigns.default)\n\n    ~H\"\"\"\n    <div\n      id={\"#{@id}-panel-#{@value}\"}\n      role=\"tabpanel\"\n      data-slot=\"tabs-content\"\n      data-tabs-id={@id}\n      data-tabs-value={@value}\n      aria-labelledby={\"#{@id}-tab-#{@value}\"}\n      tabindex=\"0\"\n      class={cn([\"flex-1 outline-none\", !@active && \"hidden\", @class])}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that activates the tab `value` in\n  the tabs group `id`: hides every sibling panel and shows the chosen one, then\n  resets selected/active state on all triggers before marking the chosen one.\n  \"\"\"\n  def select_tab(id, value) do\n    %JS{}\n    |> JS.hide(to: \"[data-tabs-id='#{id}'][role='tabpanel']\")\n    |> JS.set_attribute({\"aria-selected\", \"false\"},\n      to: \"[data-tabs-id='#{id}'][role='tab']\"\n    )\n    |> JS.set_attribute({\"data-state\", \"inactive\"}, to: \"[data-tabs-id='#{id}'][role='tab']\")\n    |> JS.set_attribute({\"tabindex\", \"-1\"}, to: \"[data-tabs-id='#{id}'][role='tab']\")\n    |> JS.show(to: \"##{id}-panel-#{value}\", display: \"block\")\n    |> JS.set_attribute({\"aria-selected\", \"true\"}, to: \"##{id}-tab-#{value}\")\n    |> JS.set_attribute({\"data-state\", \"active\"}, to: \"##{id}-tab-#{value}\")\n    |> JS.set_attribute({\"tabindex\", \"0\"}, to: \"##{id}-tab-#{value}\")\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Tabs do\n  @moduledoc ~S\"\"\"\n  A fully client-driven, uncontrolled tabs component.\n\n  Unlike the React/Radix original there is no server state: `tabs_trigger/1`\n  carries a `Phoenix.LiveView.JS` `phx-click` that, scoped to a shared\n  `data-tabs-id`, hides every sibling panel and shows its own, then flips\n  `aria-selected` / `data-state` across all triggers in the group. The initial\n  state is rendered statically from the required `:default` value: the matching\n  panel is shown and its trigger marked selected.\n\n  Triggers and panels are wired together by id (`\"#{id}-tab-#{value}\"` /\n  `\"#{id}-panel-#{value}\"`) so `aria-controls` / `aria-labelledby` line up, and a\n  small `ShadixTabs` hook on the tablist provides ArrowLeft/ArrowRight roving\n  focus with activation on focus for keyboard a11y.\n\n  data-slots: `tabs`, `tabs-list`, `tabs-trigger`, `tabs-content`.\n\n  Styling is delivered by the colocated `priv/styles/<skin>/tabs.css` rules\n  (keyed on each element's `data-slot`); the component itself carries only the\n  stable data attributes plus any caller-supplied `class`.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  @doc \"\"\"\n  The tabs root. `:default` is the value of the tab that is active on first\n  render; descendant triggers/contents take this `:id` to wire ids together.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:default, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def tabs(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div id={@id} data-slot=\"tabs\" data-tabs-default={@default} class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  The list of triggers (`role=\"tablist\"`). Carries the `ShadixTabs` hook for\n  roving focus.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def tabs_list(assigns) do\n    ~H\"\"\"\n    <div\n      id={\"#{@id}-list\"}\n      role=\"tablist\"\n      data-slot=\"tabs-list\"\n      phx-hook=\"ShadixTabs\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  A single tab trigger. `:id` is the *tabs'* id and `:value` selects which panel\n  it controls. Clicking shows its panel, hides siblings, and updates selected\n  state across the group via a shared `data-tabs-id` selector.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:value, :string, required: true)\n  attr(:default, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def tabs_trigger(assigns) do\n    assigns = assign(assigns, :active, assigns.value == assigns.default)\n\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      id={\"#{@id}-tab-#{@value}\"}\n      role=\"tab\"\n      data-slot=\"tabs-trigger\"\n      data-tabs-id={@id}\n      data-tabs-value={@value}\n      data-state={if @active, do: \"active\", else: \"inactive\"}\n      aria-selected={if @active, do: \"true\", else: \"false\"}\n      aria-controls={\"#{@id}-panel-#{@value}\"}\n      tabindex={if @active, do: \"0\", else: \"-1\"}\n      phx-click={select_tab(@id, @value)}\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </button>\n    \"\"\"\n  end\n\n  @doc ~S\"\"\"\n  A tab panel. `:id` is the *tabs'* id and `:value` ties it to its trigger. The\n  panel is `hidden` unless its `:value` equals `:default`.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:value, :string, required: true)\n  attr(:default, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def tabs_content(assigns) do\n    assigns = assign(assigns, :active, assigns.value == assigns.default)\n\n    ~H\"\"\"\n    <div\n      id={\"#{@id}-panel-#{@value}\"}\n      role=\"tabpanel\"\n      data-slot=\"tabs-content\"\n      data-tabs-id={@id}\n      data-tabs-value={@value}\n      aria-labelledby={\"#{@id}-tab-#{@value}\"}\n      tabindex=\"0\"\n      class={[!@active && \"hidden\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that activates the tab `value` in\n  the tabs group `id`: hides every sibling panel and shows the chosen one, then\n  resets selected/active state on all triggers before marking the chosen one.\n  \"\"\"\n  def select_tab(id, value) do\n    %JS{}\n    |> JS.hide(to: \"[data-tabs-id='#{id}'][role='tabpanel']\")\n    |> JS.set_attribute({\"aria-selected\", \"false\"},\n      to: \"[data-tabs-id='#{id}'][role='tab']\"\n    )\n    |> JS.set_attribute({\"data-state\", \"inactive\"}, to: \"[data-tabs-id='#{id}'][role='tab']\")\n    |> JS.set_attribute({\"tabindex\", \"-1\"}, to: \"[data-tabs-id='#{id}'][role='tab']\")\n    |> JS.show(to: \"##{id}-panel-#{value}\", display: \"block\")\n    |> JS.set_attribute({\"aria-selected\", \"true\"}, to: \"##{id}-tab-#{value}\")\n    |> JS.set_attribute({\"data-state\", \"active\"}, to: \"##{id}-tab-#{value}\")\n    |> JS.set_attribute({\"tabindex\", \"0\"}, to: \"##{id}-tab-#{value}\")\n  end\nend\n",
       "path": "tabs.ex"
     }
   ],
@@ -15,6 +16,10 @@
   "name": "tabs",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"tabs\"] {\n    @apply flex flex-col gap-2;\n  }\n\n  [data-slot=\"tabs-list\"] {\n    @apply inline-flex w-fit items-center justify-center text-muted-foreground bg-muted rounded-lg p-[3px] h-8;\n  }\n\n  [data-slot=\"tabs-trigger\"] {\n    @apply relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"tabs-content\"] {\n    @apply flex-1 outline-none text-sm;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"tabs\"] {\n    @apply flex flex-col gap-2;\n  }\n\n  [data-slot=\"tabs-list\"] {\n    @apply inline-flex w-fit items-center justify-center text-muted-foreground bg-muted rounded-lg p-[3px] h-9;\n  }\n\n  [data-slot=\"tabs-trigger\"] {\n    @apply relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"tabs-content\"] {\n    @apply flex-1 outline-none text-sm;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/textarea.json b/priv/registry/textarea.json
index 2cf0e6b..fdfdbb6 100644
--- a/priv/registry/textarea.json
+++ b/priv/registry/textarea.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Textarea do\n  @moduledoc \"\"\"\n  Textarea component translated from the shadcn-ui \"textarea\" component.\n\n  Renders a `<textarea>` element with `data-slot=\"textarea\"`. Supports an\n  optional `inner_block` slot to provide initial text content.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @base \"flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40\"\n\n  attr(:class, :string, default: nil)\n\n  attr(:rest, :global,\n    include: ~w(name placeholder disabled required readonly rows cols autofocus)\n  )\n\n  slot(:inner_block)\n\n  def textarea(assigns) do\n    class = cn([@base, assigns.class])\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <textarea data-slot=\"textarea\" class={@computed_class} {@rest}>{render_slot(@inner_block)}</textarea>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Textarea do\n  @moduledoc \"\"\"\n  Textarea component translated from shadcn/ui.\n\n  Renders a `<textarea>` element with `data-slot=\"textarea\"`. Supports an\n  optional `inner_block` slot to provide initial text content. No variants.\n  Styling is delivered via colocated CSS (`priv/styles/<skin>/textarea.css`);\n  caller-supplied `class` is appended last so it can override defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  attr(:class, :string, default: nil)\n\n  attr(:rest, :global,\n    include: ~w(name placeholder disabled required readonly rows cols autofocus)\n  )\n\n  slot(:inner_block)\n\n  def textarea(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <textarea data-slot=\"textarea\" class={@class} {@rest}>{render_slot(@inner_block)}</textarea>\n    \"\"\"\n  end\nend\n",
       "path": "textarea.ex"
     }
   ],
@@ -9,6 +10,10 @@
   "name": "textarea",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"textarea\"] {\n    @apply flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"textarea\"] {\n    @apply flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/toggle.json b/priv/registry/toggle.json
index 7755d2c..b3aca6e 100644
--- a/priv/registry/toggle.json
+++ b/priv/registry/toggle.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Toggle do\n  @moduledoc \"\"\"\n  Toggle component translated from shadcn/ui (new-york-v4).\n\n  A two-state toggle button. Unlike a native checkbox, the pressed state lives in\n  ARIA (`aria-pressed`) and a `data-state` of `\"on\"`/`\"off\"` that the `cva` styles\n  key off of (the on-state gets `bg-accent`). It renders a plain\n  `<button type=\"button\">` and is *uncontrolled*: `@pressed` only seeds the initial\n  markup. The small `ShadixToggle` hook (assets/ts/toggle.ts) flips both\n  `aria-pressed` and `data-state` on click by reading the current DOM value, so it\n  stays independent of the server-rendered initial state.\n\n  Caller-supplied `class` is appended last; Tailwind cascade layers ensure it wins\n  over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @base \"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 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n\n  @variants %{\n    \"default\" => \"bg-transparent\",\n    \"outline\" =>\n      \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\"\n  }\n\n  @sizes %{\n    \"default\" => \"h-9 min-w-9 px-2\",\n    \"sm\" => \"h-8 min-w-8 px-1.5\",\n    \"lg\" => \"h-10 min-w-10 px-2.5\"\n  }\n\n  @doc \"\"\"\n  Renders an uncontrolled two-state toggle button.\n\n  `:pressed` seeds the initial `aria-pressed` / `data-state`; thereafter the\n  `ShadixToggle` hook owns the state and flips it on click.\n  \"\"\"\n  attr(:variant, :string, default: \"default\", values: ~w(default outline))\n  attr(:size, :string, default: \"default\", values: ~w(default sm lg))\n  attr(:pressed, :boolean, default: false)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def toggle(assigns) do\n    assigns =\n      assign(\n        assigns,\n        :computed_class,\n        cn([@base, @variants[assigns.variant], @sizes[assigns.size], assigns.class])\n      )\n\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      data-slot=\"toggle\"\n      aria-pressed={to_string(@pressed)}\n      data-state={if @pressed, do: \"on\", else: \"off\"}\n      phx-hook=\"ShadixToggle\"\n      class={@computed_class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </button>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Toggle do\n  @moduledoc \"\"\"\n  Toggle component translated from shadcn/ui.\n\n  A two-state toggle button. Unlike a native checkbox, the pressed state lives in\n  ARIA (`aria-pressed`) and a `data-state` of `\"on\"`/`\"off\"`. It renders a plain\n  `<button type=\"button\">` and is *uncontrolled*: `@pressed` only seeds the initial\n  markup. The small `ShadixToggle` hook (assets/ts/toggle.ts) flips both\n  `aria-pressed` and `data-state` on click by reading the current DOM value, so it\n  stays independent of the server-rendered initial state.\n\n  Styling is delivered via colocated CSS keyed off the stable `data-slot`,\n  `data-variant`, and `data-size` attributes; only the `group/toggle` marker is\n  carried inline. Caller-supplied `class` is appended last; Tailwind cascade layers\n  ensure it wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  @doc \"\"\"\n  Renders an uncontrolled two-state toggle button.\n\n  `:pressed` seeds the initial `aria-pressed` / `data-state`; thereafter the\n  `ShadixToggle` hook owns the state and flips it on click.\n  \"\"\"\n  attr(:variant, :string, default: \"default\", values: ~w(default outline))\n  attr(:size, :string, default: \"default\", values: ~w(default sm lg))\n  attr(:pressed, :boolean, default: false)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def toggle(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <button\n      type=\"button\"\n      data-slot=\"toggle\"\n      data-variant={@variant}\n      data-size={@size}\n      aria-pressed={to_string(@pressed)}\n      data-state={if @pressed, do: \"on\", else: \"off\"}\n      phx-hook=\"ShadixToggle\"\n      class={[\"group/toggle\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </button>\n    \"\"\"\n  end\nend\n",
       "path": "toggle.ex"
     }
   ],
@@ -15,6 +16,10 @@
   "name": "toggle",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"toggle\"] {\n    @apply inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"toggle\"][data-variant=\"default\"] {\n    @apply bg-transparent;\n  }\n\n  [data-slot=\"toggle\"][data-variant=\"outline\"] {\n    @apply border-input hover:bg-muted border bg-transparent;\n  }\n\n  [data-slot=\"toggle\"][data-size=\"default\"] {\n    @apply h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n\n  [data-slot=\"toggle\"][data-size=\"sm\"] {\n    @apply h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5;\n  }\n\n  [data-slot=\"toggle\"][data-size=\"lg\"] {\n    @apply h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"toggle\"] {\n    @apply inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4;\n  }\n\n  [data-slot=\"toggle\"][data-variant=\"default\"] {\n    @apply bg-transparent;\n  }\n\n  [data-slot=\"toggle\"][data-variant=\"outline\"] {\n    @apply border-input hover:bg-muted border bg-transparent shadow-xs;\n  }\n\n  [data-slot=\"toggle\"][data-size=\"default\"] {\n    @apply h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n\n  [data-slot=\"toggle\"][data-size=\"sm\"] {\n    @apply h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5;\n  }\n\n  [data-slot=\"toggle\"][data-size=\"lg\"] {\n    @apply h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/toggle_group.json b/priv/registry/toggle_group.json
index e5e4a8b..53a3360 100644
--- a/priv/registry/toggle_group.json
+++ b/priv/registry/toggle_group.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.ToggleGroup do\n  @moduledoc \"\"\"\n  Toggle group component translated from shadcn/ui (new-york-v4).\n\n  A set of two-state toggle buttons. Unlike the React/Radix original, selection\n  state is uncontrolled and managed entirely on the client by the `ShadixToggleGroup`\n  hook (assets/ts/toggle_group.ts): clicking an item flips its `aria-pressed` and\n  `data-state` (`on`/`off`). The group's `data-type` decides the selection model:\n\n    * `\"single\"` — radio-like; at most one item is on. Clicking an item turns the\n      others off; clicking the active item again turns it off.\n    * `\"multiple\"` — each item toggles independently.\n\n  Item visuals reuse the toggle (`toggle.tsx`) classes, keyed off `data-state=on`.\n  There is no server round-trip; the hook is needed because plain\n  `Phoenix.LiveView.JS` cannot read/flip a boolean state attribute across siblings.\n\n    * `toggle_group/1` — `role=\"group\"` container carrying the hook and `data-type`.\n    * `toggle_group_item/1` — a `<button type=\"button\">` toggle.\n\n  Caller-supplied `class` is appended last; Tailwind cascade layers ensure it wins\n  over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @group_base \"group/toggle-group flex w-fit items-center rounded-md\"\n\n  # Lifted from toggle.tsx (`toggleVariants` base). The toggle-group item\n  # overrides (@item_overrides) are appended AFTER the size classes so that\n  # `min-w-0`/`px-3` win, mirroring the shadcn class order in toggle-group.tsx.\n  @item_base \"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 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n\n  @item_overrides \"min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10\"\n\n  @item_variants %{\n    \"default\" => \"bg-transparent\",\n    \"outline\" =>\n      \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\"\n  }\n\n  @item_sizes %{\n    \"default\" => \"h-9 min-w-9 px-2\",\n    \"sm\" => \"h-8 min-w-8 px-1.5\",\n    \"lg\" => \"h-10 min-w-10 px-2.5\"\n  }\n\n  @doc \"\"\"\n  Renders the toggle-group container.\n\n  Carries `role=\"group\"`, the `ShadixToggleGroup` hook, and `data-type`\n  (`\"single\"` or `\"multiple\"`) that the hook reads to decide the selection model.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:type, :string, default: \"single\", values: ~w(single multiple))\n  attr(:variant, :string, default: \"default\", values: ~w(default outline))\n  attr(:size, :string, default: \"default\", values: ~w(default sm lg))\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def toggle_group(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@group_base, assigns.class]))\n\n    ~H\"\"\"\n    <div\n      id={@id}\n      role=\"group\"\n      data-slot=\"toggle-group\"\n      data-type={@type}\n      data-variant={@variant}\n      data-size={@size}\n      phx-hook=\"ShadixToggleGroup\"\n      class={@computed_class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Renders a single toggle button within a `toggle_group/1`.\n\n  Starts in the `off` state (`aria-pressed=\"false\"`, `data-state=\"off\"`); the\n  `ShadixToggleGroup` hook flips both on click. Pass `disabled` (or any global\n  attribute) via the rest.\n  \"\"\"\n  attr(:value, :string, required: true)\n  attr(:variant, :string, default: \"default\", values: ~w(default outline))\n  attr(:size, :string, default: \"default\", values: ~w(default sm lg))\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled))\n  slot(:inner_block, required: true)\n\n  def toggle_group_item(assigns) do\n    assigns =\n      assign(\n        assigns,\n        :computed_class,\n        cn([\n          @item_base,\n          @item_variants[assigns.variant],\n          @item_sizes[assigns.size],\n          @item_overrides,\n          assigns.class\n        ])\n      )\n\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      data-slot=\"toggle-group-item\"\n      data-value={@value}\n      data-variant={@variant}\n      data-size={@size}\n      aria-pressed=\"false\"\n      data-state=\"off\"\n      class={@computed_class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </button>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.ToggleGroup do\n  @moduledoc \"\"\"\n  Toggle group component translated from shadcn/ui.\n\n  A set of two-state toggle buttons. Unlike the React/Radix original, selection\n  state is uncontrolled and managed entirely on the client by the `ShadixToggleGroup`\n  hook (assets/ts/toggle_group.ts): clicking an item flips its `aria-pressed` and\n  `data-state` (`on`/`off`). The group's `data-type` decides the selection model:\n\n    * `\"single\"` — radio-like; at most one item is on. Clicking an item turns the\n      others off; clicking the active item again turns it off.\n    * `\"multiple\"` — each item toggles independently.\n\n  Item visuals reuse the toggle styling, keyed off `data-state=on`. There is no\n  server round-trip; the hook is needed because plain `Phoenix.LiveView.JS` cannot\n  read/flip a boolean state attribute across siblings.\n\n    * `toggle_group/1` — `role=\"group\"` container carrying the hook and `data-type`.\n    * `toggle_group_item/1` — a `<button type=\"button\">` toggle.\n\n  Styling is delivered via colocated CSS keyed off the stable `data-slot`,\n  `data-variant`, and `data-size` attributes; only the `group/toggle-group` marker is\n  carried inline. Caller-supplied `class` is appended last; Tailwind cascade layers\n  ensure it wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  @doc \"\"\"\n  Renders the toggle-group container.\n\n  Carries `role=\"group\"`, the `ShadixToggleGroup` hook, and `data-type`\n  (`\"single\"` or `\"multiple\"`) that the hook reads to decide the selection model.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:type, :string, default: \"single\", values: ~w(single multiple))\n  attr(:variant, :string, default: \"default\", values: ~w(default outline))\n  attr(:size, :string, default: \"default\", values: ~w(default sm lg))\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def toggle_group(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div\n      id={@id}\n      role=\"group\"\n      data-slot=\"toggle-group\"\n      data-type={@type}\n      data-variant={@variant}\n      data-size={@size}\n      phx-hook=\"ShadixToggleGroup\"\n      class={[\"group/toggle-group\", @class]}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Renders a single toggle button within a `toggle_group/1`.\n\n  Starts in the `off` state (`aria-pressed=\"false\"`, `data-state=\"off\"`); the\n  `ShadixToggleGroup` hook flips both on click. Pass `disabled` (or any global\n  attribute) via the rest.\n  \"\"\"\n  attr(:value, :string, required: true)\n  attr(:variant, :string, default: \"default\", values: ~w(default outline))\n  attr(:size, :string, default: \"default\", values: ~w(default sm lg))\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled))\n  slot(:inner_block, required: true)\n\n  def toggle_group_item(assigns) do\n    ~H\"\"\"\n    <button\n      type=\"button\"\n      data-slot=\"toggle-group-item\"\n      data-value={@value}\n      data-variant={@variant}\n      data-size={@size}\n      aria-pressed=\"false\"\n      data-state=\"off\"\n      class={@class}\n      {@rest}\n    >\n      {render_slot(@inner_block)}\n    </button>\n    \"\"\"\n  end\nend\n",
       "path": "toggle_group.ex"
     }
   ],
@@ -15,6 +16,10 @@
   "name": "toggle_group",
   "npm_deps": [],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"toggle-group\"] {\n    @apply flex w-fit flex-row items-center rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)];\n  }\n\n  [data-slot=\"toggle-group-item\"] {\n    @apply inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 shrink-0 focus:z-10 focus-visible:z-10;\n  }\n\n  [data-slot=\"toggle-group-item\"][data-variant=\"default\"] {\n    @apply bg-transparent;\n  }\n\n  [data-slot=\"toggle-group-item\"][data-variant=\"outline\"] {\n    @apply border-input hover:bg-muted border bg-transparent;\n  }\n\n  [data-slot=\"toggle-group-item\"][data-size=\"default\"] {\n    @apply h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n\n  [data-slot=\"toggle-group-item\"][data-size=\"sm\"] {\n    @apply h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5;\n  }\n\n  [data-slot=\"toggle-group-item\"][data-size=\"lg\"] {\n    @apply h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"toggle-group\"] {\n    @apply flex w-fit flex-row items-center rounded-md;\n  }\n\n  [data-slot=\"toggle-group-item\"] {\n    @apply inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 shrink-0 focus:z-10 focus-visible:z-10 data-[state=on]:bg-muted;\n  }\n\n  [data-slot=\"toggle-group-item\"][data-variant=\"default\"] {\n    @apply bg-transparent;\n  }\n\n  [data-slot=\"toggle-group-item\"][data-variant=\"outline\"] {\n    @apply border-input hover:bg-muted border bg-transparent shadow-xs;\n  }\n\n  [data-slot=\"toggle-group-item\"][data-size=\"default\"] {\n    @apply h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n\n  [data-slot=\"toggle-group-item\"][data-size=\"sm\"] {\n    @apply h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5;\n  }\n\n  [data-slot=\"toggle-group-item\"][data-size=\"lg\"] {\n    @apply h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/registry/tooltip.json b/priv/registry/tooltip.json
index a1e3721..c39cfee 100644
--- a/priv/registry/tooltip.json
+++ b/priv/registry/tooltip.json
@@ -1,7 +1,8 @@
 {
+  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Tooltip do\n  @moduledoc \"\"\"\n  A hover/focus tooltip built on client-side JS commands, Floating UI, and a\n  small LiveView hook.\n\n  Like the hover card, this is a portal-free, fully client-driven overlay opened\n  by *hover* or *focus* rather than click. The `ShadixTooltip` hook\n  (assets/ts/tooltip.ts) attaches `mouseenter` / `focusin` listeners to the\n  trigger that run the content's `data-on-open` JS (`show_tooltip/1`) and\n  `mouseleave` / `focusout` listeners that run its `data-on-close` JS\n  (`hide_tooltip/1`), both with enter/leave transitions. While open the hook\n  positions the content above the trigger with `@floating-ui/dom`\n  (`computePosition` + `autoUpdate`, `top` placement, `offset(4)` / `flip` /\n  `shift`). There is no keyboard navigation or click-outside handling — it\n  simply follows the pointer/focus.\n\n  Trigger and content ids are derived from the required `:id` so `data-trigger`\n  and the JS targets line up stably.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders a tooltip with a `:trigger` slot and the tooltip text as the\n  `inner_block`.\n\n  The trigger is wrapped in a `display: contents` span so the caller's own\n  element opens the tooltip without extra markup. The content\n  `<div role=\"tooltip\">` carries the `ShadixTooltip` hook, the `data-on-open` /\n  `data-on-close` JS commands, and is positioned above the trigger by Floating UI\n  while open.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def tooltip(assigns) do\n    ~H\"\"\"\n    <span id={\"#{@id}-trigger\"} data-slot=\"tooltip-trigger\" class=\"contents\">\n      {render_slot(@trigger)}\n    </span>\n    <div\n      id={\"#{@id}-content\"}\n      role=\"tooltip\"\n      data-slot=\"tooltip-content\"\n      phx-hook=\"ShadixTooltip\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-on-open={show_tooltip(@id)}\n      data-on-close={hide_tooltip(@id)}\n      class={\n        cn([\n          \"hidden fixed left-0 top-0 z-50 w-fit rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground\",\n          @class\n        ])\n      }\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that shows the tooltip with `id`.\n\n  Reveals the content panel with an enter transition. The `ShadixTooltip` hook\n  reacts to the resulting visibility change to position the tooltip above the\n  trigger with Floating UI.\n  \"\"\"\n  def show_tooltip(id) do\n    JS.show(\n      to: \"##{id}-content\",\n      transition: {\"transition-opacity ease-out duration-150\", \"opacity-0\", \"opacity-100\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that hides the tooltip with `id`.\n\n  Hides the content panel with a leave transition.\n  \"\"\"\n  def hide_tooltip(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition: {\"transition-opacity ease-in duration-150\", \"opacity-100\", \"opacity-0\"}\n    )\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Tooltip do\n  @moduledoc \"\"\"\n  A hover/focus tooltip built on client-side JS commands, Floating UI, and a\n  small LiveView hook.\n\n  Like the hover card, this is a portal-free, fully client-driven overlay opened\n  by *hover* or *focus* rather than click. The `ShadixTooltip` hook\n  (assets/ts/tooltip.ts) attaches `mouseenter` / `focusin` listeners to the\n  trigger that run the content's `data-on-open` JS (`show_tooltip/1`) and\n  `mouseleave` / `focusout` listeners that run its `data-on-close` JS\n  (`hide_tooltip/1`), both with enter/leave transitions. While open the hook\n  positions the content above the trigger with `@floating-ui/dom`\n  (`computePosition` + `autoUpdate`, `top` placement, `offset(4)` / `flip` /\n  `shift`). There is no keyboard navigation or click-outside handling — it\n  simply follows the pointer/focus.\n\n  Trigger and content ids are derived from the required `:id` so `data-trigger`\n  and the JS targets line up stably.\n\n  Each element carries a stable `data-slot` for styling/targeting. Styling lives\n  in the colocated `priv/styles/<skin>/tooltip.css` (selected by `data-slot`);\n  caller-supplied `class` is appended last so Tailwind cascade layers ensure it\n  wins over the defaults. The `hidden fixed left-0 top-0` markers on the content\n  stay inline because they drive the JS show/hide and Floating UI positioning.\n  \"\"\"\n  use Phoenix.Component\n\n  alias Phoenix.LiveView.JS\n\n  @doc \"\"\"\n  Renders a tooltip with a `:trigger` slot and the tooltip text as the\n  `inner_block`.\n\n  The trigger is wrapped in a `display: contents` span so the caller's own\n  element opens the tooltip without extra markup. The content\n  `<div role=\"tooltip\">` carries the `ShadixTooltip` hook, the `data-on-open` /\n  `data-on-close` JS commands, and is positioned above the trigger by Floating UI\n  while open.\n  \"\"\"\n  attr(:id, :string, required: true)\n  attr(:class, :string, default: nil)\n  slot(:trigger, required: true)\n  slot(:inner_block, required: true)\n\n  def tooltip(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <span id={\"#{@id}-trigger\"} data-slot=\"tooltip-trigger\" class=\"contents\">\n      {render_slot(@trigger)}\n    </span>\n    <div\n      id={\"#{@id}-content\"}\n      role=\"tooltip\"\n      data-slot=\"tooltip-content\"\n      phx-hook=\"ShadixTooltip\"\n      data-trigger={\"#{@id}-trigger\"}\n      data-on-open={show_tooltip(@id)}\n      data-on-close={hide_tooltip(@id)}\n      class={[\"hidden fixed left-0 top-0\", @class]}\n    >\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that shows the tooltip with `id`.\n\n  Reveals the content panel with an enter transition. The `ShadixTooltip` hook\n  reacts to the resulting visibility change to position the tooltip above the\n  trigger with Floating UI.\n  \"\"\"\n  def show_tooltip(id) do\n    JS.show(\n      to: \"##{id}-content\",\n      transition: {\"transition-opacity ease-out duration-150\", \"opacity-0\", \"opacity-100\"}\n    )\n  end\n\n  @doc \"\"\"\n  Returns the `Phoenix.LiveView.JS` command that hides the tooltip with `id`.\n\n  Hides the content panel with a leave transition.\n  \"\"\"\n  def hide_tooltip(id) do\n    JS.hide(\n      to: \"##{id}-content\",\n      transition: {\"transition-opacity ease-in duration-150\", \"opacity-100\", \"opacity-0\"}\n    )\n  end\nend\n",
       "path": "tooltip.ex"
     }
   ],
@@ -17,6 +18,10 @@
     "@floating-ui/dom"
   ],
   "registry_deps": [
-    "cn"
-  ]
+    "colocated_css"
+  ],
+  "styles": {
+    "nova": "@layer components {\n  [data-slot=\"tooltip-content\"] {\n    @apply z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) bg-foreground text-background data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 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 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"tooltip-content\"] {\n    @apply z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) bg-foreground text-background data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 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 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm;\n  }\n}\n"
+  }
 }
\ No newline at end of file
diff --git a/priv/styles/nova/accordion.css b/priv/styles/nova/accordion.css
new file mode 100644
index 0000000..d48189d
--- /dev/null
+++ b/priv/styles/nova/accordion.css
@@ -0,0 +1,21 @@
+@layer components {
+  [data-slot="accordion"] {
+    @apply flex w-full flex-col;
+  }
+
+  [data-slot="accordion-item"] {
+    @apply not-last:border-b;
+  }
+
+  [data-slot="accordion-trigger"] {
+    @apply group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
+  }
+
+  [data-slot="accordion-content"] {
+    @apply text-sm;
+  }
+
+  [data-slot="accordion-content-inner"] {
+    @apply pt-0 pb-2.5;
+  }
+}
diff --git a/priv/styles/nova/alert_dialog.css b/priv/styles/nova/alert_dialog.css
new file mode 100644
index 0000000..114d9e2
--- /dev/null
+++ b/priv/styles/nova/alert_dialog.css
@@ -0,0 +1,33 @@
+@layer components {
+  [data-slot="alert-dialog-overlay"] {
+    @apply fixed inset-0 z-50 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+  }
+
+  [data-slot="alert-dialog-content"] {
+    @apply fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm;
+  }
+
+  [data-slot="alert-dialog-header"] {
+    @apply grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr];
+  }
+
+  [data-slot="alert-dialog-footer"] {
+    @apply flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4;
+  }
+
+  [data-slot="alert-dialog-title"] {
+    @apply text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2;
+  }
+
+  [data-slot="alert-dialog-description"] {
+    @apply text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3;
+  }
+
+  [data-slot="alert-dialog-action"] {
+    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 bg-primary text-primary-foreground hover:bg-primary/80 h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+
+  [data-slot="alert-dialog-cancel"] {
+    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+}
diff --git a/priv/styles/nova/avatar.css b/priv/styles/nova/avatar.css
new file mode 100644
index 0000000..a3ef715
--- /dev/null
+++ b/priv/styles/nova/avatar.css
@@ -0,0 +1,13 @@
+@layer components {
+  [data-slot="avatar"] {
+    @apply relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6;
+  }
+
+  [data-slot="avatar-image"] {
+    @apply aspect-square size-full object-cover rounded-full;
+  }
+
+  [data-slot="avatar-fallback"] {
+    @apply flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs bg-muted text-muted-foreground rounded-full;
+  }
+}
diff --git a/priv/styles/nova/card.css b/priv/styles/nova/card.css
new file mode 100644
index 0000000..71d94a2
--- /dev/null
+++ b/priv/styles/nova/card.css
@@ -0,0 +1,29 @@
+@layer components {
+  [data-slot="card"] {
+    @apply flex flex-col ring-foreground/10 bg-card text-card-foreground gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl;
+  }
+
+  [data-slot="card-header"] {
+    @apply grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] gap-1 rounded-t-xl px-(--card-spacing) [.border-b]:pb-(--card-spacing);
+  }
+
+  [data-slot="card-title"] {
+    @apply text-base leading-snug font-medium group-data-[size=sm]/card:text-sm;
+  }
+
+  [data-slot="card-description"] {
+    @apply text-muted-foreground text-sm;
+  }
+
+  [data-slot="card-action"] {
+    @apply col-start-2 row-span-2 row-start-1 self-start justify-self-end;
+  }
+
+  [data-slot="card-content"] {
+    @apply px-(--card-spacing);
+  }
+
+  [data-slot="card-footer"] {
+    @apply flex items-center bg-muted/50 rounded-b-xl border-t p-(--card-spacing);
+  }
+}
diff --git a/priv/styles/nova/carousel.css b/priv/styles/nova/carousel.css
new file mode 100644
index 0000000..0f46d3f
--- /dev/null
+++ b/priv/styles/nova/carousel.css
@@ -0,0 +1,21 @@
+@layer components {
+  [data-slot="carousel"] {
+    @apply relative;
+  }
+
+  [data-slot="carousel-content"] {
+    @apply flex overflow-x-auto snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
+  }
+
+  [data-slot="carousel-item"] {
+    @apply min-w-0 shrink-0 grow-0 basis-full snap-start;
+  }
+
+  [data-slot="carousel-previous"] {
+    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg rounded-full absolute touch-manipulation top-1/2 -left-12 -translate-y-1/2;
+  }
+
+  [data-slot="carousel-next"] {
+    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg rounded-full absolute touch-manipulation top-1/2 -right-12 -translate-y-1/2;
+  }
+}
diff --git a/priv/styles/nova/checkbox.css b/priv/styles/nova/checkbox.css
new file mode 100644
index 0000000..9314fa5
--- /dev/null
+++ b/priv/styles/nova/checkbox.css
@@ -0,0 +1,9 @@
+@layer components {
+  [data-slot="checkbox"] {
+    @apply relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3;
+  }
+
+  [data-slot="checkbox-indicator"] {
+    @apply grid place-content-center text-current transition-none [&>svg]:size-3.5;
+  }
+}
diff --git a/priv/styles/nova/combobox.css b/priv/styles/nova/combobox.css
new file mode 100644
index 0000000..dc8d8fc
--- /dev/null
+++ b/priv/styles/nova/combobox.css
@@ -0,0 +1,21 @@
+@layer components {
+  [data-slot="combobox-trigger"] {
+    @apply flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="combobox-content"] {
+    @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none;
+  }
+
+  [data-slot="combobox-input"] {
+    @apply flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
+  [data-slot="combobox-item"] {
+    @apply relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground data-[active]:bg-accent data-[active]:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="combobox-empty"] {
+    @apply text-muted-foreground w-full py-2 text-center text-sm;
+  }
+}
diff --git a/priv/styles/nova/command.css b/priv/styles/nova/command.css
new file mode 100644
index 0000000..f99c193
--- /dev/null
+++ b/priv/styles/nova/command.css
@@ -0,0 +1,41 @@
+@layer components {
+  [data-slot="command"] {
+    @apply flex size-full flex-col overflow-hidden bg-popover text-popover-foreground rounded-xl! p-1;
+  }
+
+  [data-slot="command-input-wrapper"] {
+    @apply flex items-center gap-2 p-1 pb-0;
+  }
+
+  [data-slot="command-input"] {
+    @apply outline-hidden disabled:cursor-not-allowed disabled:opacity-50 w-full text-sm;
+  }
+
+  [data-slot="command-list"] {
+    @apply overflow-x-hidden overflow-y-auto no-scrollbar max-h-72 scroll-py-1 outline-none;
+  }
+
+  [data-slot="command-empty"] {
+    @apply py-6 text-center text-sm;
+  }
+
+  [data-slot="command-group"] {
+    @apply text-foreground overflow-hidden p-1;
+  }
+
+  [data-slot="command-group-heading"] {
+    @apply text-muted-foreground px-2 py-1.5 text-xs font-medium;
+  }
+
+  [data-slot="command-separator"] {
+    @apply bg-border -mx-1 h-px;
+  }
+
+  [data-slot="command-item"] {
+    @apply data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="command-shortcut"] {
+    @apply text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest;
+  }
+}
diff --git a/priv/styles/nova/context_menu.css b/priv/styles/nova/context_menu.css
new file mode 100644
index 0000000..903cc83
--- /dev/null
+++ b/priv/styles/nova/context_menu.css
@@ -0,0 +1,25 @@
+@layer components {
+  [data-slot="context-menu-trigger"] {
+    @apply block select-none;
+  }
+
+  [data-slot="context-menu-content"] {
+    @apply z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100;
+  }
+
+  [data-slot="context-menu-item"] {
+    @apply relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="context-menu-label"] {
+    @apply text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7;
+  }
+
+  [data-slot="context-menu-separator"] {
+    @apply bg-border -mx-1 my-1 h-px;
+  }
+
+  [data-slot="context-menu-shortcut"] {
+    @apply text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest;
+  }
+}
diff --git a/priv/styles/nova/dialog.css b/priv/styles/nova/dialog.css
new file mode 100644
index 0000000..973b417
--- /dev/null
+++ b/priv/styles/nova/dialog.css
@@ -0,0 +1,29 @@
+@layer components {
+  [data-slot="dialog-overlay"] {
+    @apply fixed inset-0 isolate z-50 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+  }
+
+  [data-slot="dialog-content"] {
+    @apply fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm;
+  }
+
+  [data-slot="dialog-close"] {
+    @apply absolute top-2 right-2;
+  }
+
+  [data-slot="dialog-header"] {
+    @apply flex flex-col gap-2;
+  }
+
+  [data-slot="dialog-footer"] {
+    @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4;
+  }
+
+  [data-slot="dialog-title"] {
+    @apply text-base leading-none font-medium;
+  }
+
+  [data-slot="dialog-description"] {
+    @apply text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3;
+  }
+}
diff --git a/priv/styles/nova/drawer.css b/priv/styles/nova/drawer.css
new file mode 100644
index 0000000..274f812
--- /dev/null
+++ b/priv/styles/nova/drawer.css
@@ -0,0 +1,25 @@
+@layer components {
+  [data-slot="drawer-content"] {
+    @apply fixed z-50 bg-popover text-popover-foreground flex h-auto flex-col text-sm inset-x-0 bottom-0 mt-24 max-h-[80vh] rounded-t-xl border-t;
+  }
+
+  [data-slot="drawer-handle"] {
+    @apply bg-muted mx-auto mt-4 h-1 w-[100px] shrink-0 rounded-full;
+  }
+
+  [data-slot="drawer-header"] {
+    @apply flex flex-col gap-0.5 p-4 text-center md:gap-0.5 md:text-left;
+  }
+
+  [data-slot="drawer-footer"] {
+    @apply mt-auto flex flex-col gap-2 p-4;
+  }
+
+  [data-slot="drawer-title"] {
+    @apply text-foreground text-base font-medium;
+  }
+
+  [data-slot="drawer-description"] {
+    @apply text-muted-foreground text-sm;
+  }
+}
diff --git a/priv/styles/nova/dropdown_menu.css b/priv/styles/nova/dropdown_menu.css
new file mode 100644
index 0000000..3a0d578
--- /dev/null
+++ b/priv/styles/nova/dropdown_menu.css
@@ -0,0 +1,21 @@
+@layer components {
+  [data-slot="dropdown-menu-content"] {
+    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100;
+  }
+
+  [data-slot="dropdown-menu-item"] {
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="dropdown-menu-label"] {
+    @apply text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7;
+  }
+
+  [data-slot="dropdown-menu-separator"] {
+    @apply bg-border -mx-1 my-1 h-px;
+  }
+
+  [data-slot="dropdown-menu-shortcut"] {
+    @apply text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest;
+  }
+}
diff --git a/priv/styles/nova/hover_card.css b/priv/styles/nova/hover_card.css
new file mode 100644
index 0000000..9cc3ba3
--- /dev/null
+++ b/priv/styles/nova/hover_card.css
@@ -0,0 +1,5 @@
+@layer components {
+  [data-slot="hover-card-content"] {
+    @apply z-50 origin-(--radix-hover-card-content-transform-origin) outline-hidden data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100;
+  }
+}
diff --git a/priv/styles/nova/input.css b/priv/styles/nova/input.css
new file mode 100644
index 0000000..a283e2b
--- /dev/null
+++ b/priv/styles/nova/input.css
@@ -0,0 +1,5 @@
+@layer components {
+  [data-slot="input"] {
+    @apply w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;
+  }
+}
diff --git a/priv/styles/nova/input_otp.css b/priv/styles/nova/input_otp.css
new file mode 100644
index 0000000..0bfb24a
--- /dev/null
+++ b/priv/styles/nova/input_otp.css
@@ -0,0 +1,19 @@
+@layer components {
+  /*
+   * Structural divergence from shadcn: shadcn's input-otp wraps the `input-otp`
+   * npm library, rendering a single hidden OTPInput plus per-character <div>
+   * slots whose "active" state is driven by the library via data-[active=true].
+   * Shadix renders one native <input> per character (focusable, roving
+   * tabindex), so the active state is real :focus-visible, not data-[active].
+   * The skin bodies below are copied verbatim from .cn-input-otp* with
+   * data-[active=true]: rewritten to focus-visible: and the native-input
+   * necessities (text-center, bg-transparent, disabled affordances) added.
+   */
+  [data-slot="input-otp"] {
+    @apply flex items-center has-disabled:opacity-50 gap-2;
+  }
+
+  [data-slot="input-otp-slot"] {
+    @apply relative flex items-center justify-center focus-visible:z-10 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:aria-invalid:ring-destructive/20 dark:focus-visible:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-visible:aria-invalid:border-destructive size-8 border-y border-r text-center text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg focus-visible:ring-3 bg-transparent disabled:cursor-not-allowed disabled:opacity-50;
+  }
+}
diff --git a/priv/styles/nova/menubar.css b/priv/styles/nova/menubar.css
new file mode 100644
index 0000000..ee504d6
--- /dev/null
+++ b/priv/styles/nova/menubar.css
@@ -0,0 +1,29 @@
+@layer components {
+  [data-slot="menubar"] {
+    @apply flex items-center h-8 gap-0.5 rounded-lg border p-[3px];
+  }
+
+  [data-slot="menubar-trigger"] {
+    @apply flex items-center outline-hidden select-none hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium;
+  }
+
+  [data-slot="menubar-content"] {
+    @apply bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 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 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100;
+  }
+
+  [data-slot="menubar-item"] {
+    @apply relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="menubar-label"] {
+    @apply px-1.5 py-1 text-sm font-medium data-inset:pl-7;
+  }
+
+  [data-slot="menubar-separator"] {
+    @apply -mx-1 my-1 h-px bg-border;
+  }
+
+  [data-slot="menubar-shortcut"] {
+    @apply ml-auto text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest;
+  }
+}
diff --git a/priv/styles/nova/navigation_menu.css b/priv/styles/nova/navigation_menu.css
new file mode 100644
index 0000000..0d0d4c9
--- /dev/null
+++ b/priv/styles/nova/navigation_menu.css
@@ -0,0 +1,29 @@
+@layer components {
+  [data-slot="navigation-menu"] {
+    @apply relative flex flex-1 items-center justify-center max-w-max;
+  }
+
+  [data-slot="navigation-menu-list"] {
+    @apply flex flex-1 list-none items-center justify-center gap-0;
+  }
+
+  [data-slot="navigation-menu-item"] {
+    @apply relative;
+  }
+
+  [data-slot="navigation-menu-trigger"] {
+    @apply inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50;
+  }
+
+  [data-slot="navigation-menu-trigger-icon"] {
+    @apply relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;
+  }
+
+  [data-slot="navigation-menu-content"] {
+    @apply data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300;
+  }
+
+  [data-slot="navigation-menu-link"] {
+    @apply data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4;
+  }
+}
diff --git a/priv/styles/nova/pagination.css b/priv/styles/nova/pagination.css
new file mode 100644
index 0000000..0286391
--- /dev/null
+++ b/priv/styles/nova/pagination.css
@@ -0,0 +1,49 @@
+@layer components {
+  [data-slot="pagination"] {
+    @apply mx-auto flex w-full justify-center;
+  }
+
+  [data-slot="pagination-content"] {
+    @apply flex items-center gap-0.5;
+  }
+
+  [data-slot="pagination-link"],
+  [data-slot="pagination-previous"],
+  [data-slot="pagination-next"] {
+    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="pagination-link"][data-active="true"],
+  [data-slot="pagination-previous"][data-active="true"],
+  [data-slot="pagination-next"][data-active="true"] {
+    @apply border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground;
+  }
+
+  [data-slot="pagination-link"][data-active="false"],
+  [data-slot="pagination-previous"][data-active="false"],
+  [data-slot="pagination-next"][data-active="false"] {
+    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
+  }
+
+  [data-slot="pagination-link"][data-size="default"],
+  [data-slot="pagination-previous"],
+  [data-slot="pagination-next"] {
+    @apply h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+
+  [data-slot="pagination-link"][data-size="icon"] {
+    @apply size-8;
+  }
+
+  [data-slot="pagination-previous"] {
+    @apply pl-1.5!;
+  }
+
+  [data-slot="pagination-next"] {
+    @apply pr-1.5!;
+  }
+
+  [data-slot="pagination-ellipsis"] {
+    @apply flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4;
+  }
+}
diff --git a/priv/styles/nova/popover.css b/priv/styles/nova/popover.css
new file mode 100644
index 0000000..b106aa8
--- /dev/null
+++ b/priv/styles/nova/popover.css
@@ -0,0 +1,17 @@
+@layer components {
+  [data-slot="popover-content"] {
+    @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100;
+  }
+
+  [data-slot="popover-header"] {
+    @apply flex flex-col gap-0.5 text-sm;
+  }
+
+  [data-slot="popover-title"] {
+    @apply font-medium;
+  }
+
+  [data-slot="popover-description"] {
+    @apply text-muted-foreground;
+  }
+}
diff --git a/priv/styles/nova/progress.css b/priv/styles/nova/progress.css
new file mode 100644
index 0000000..7c0de72
--- /dev/null
+++ b/priv/styles/nova/progress.css
@@ -0,0 +1,9 @@
+@layer components {
+  [data-slot="progress"] {
+    @apply relative flex w-full items-center overflow-x-hidden bg-muted h-1 rounded-full;
+  }
+
+  [data-slot="progress-indicator"] {
+    @apply size-full flex-1 transition-all bg-primary;
+  }
+}
diff --git a/priv/styles/nova/radio_group.css b/priv/styles/nova/radio_group.css
new file mode 100644
index 0000000..8d85746
--- /dev/null
+++ b/priv/styles/nova/radio_group.css
@@ -0,0 +1,9 @@
+@layer components {
+  [data-slot="radio-group"] {
+    @apply w-full grid gap-2;
+  }
+
+  [data-slot="radio-group-item"] {
+    @apply relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3;
+  }
+}
diff --git a/priv/styles/nova/resizable.css b/priv/styles/nova/resizable.css
new file mode 100644
index 0000000..87dc60a
--- /dev/null
+++ b/priv/styles/nova/resizable.css
@@ -0,0 +1,29 @@
+@layer components {
+  [data-slot="resizable"] {
+    @apply flex h-full w-full;
+  }
+
+  [data-slot="resizable"][data-direction="vertical"] {
+    @apply flex-col;
+  }
+
+  [data-slot="resizable-panel"] {
+    @apply min-h-0 min-w-0 overflow-auto;
+  }
+
+  [data-slot="resizable-handle"] {
+    @apply relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden cursor-col-resize;
+  }
+
+  [data-slot="resizable-handle"][aria-orientation="horizontal"] {
+    @apply h-px w-full after:left-0 after:h-1 after:w-full after:translate-x-0 after:-translate-y-1/2 cursor-row-resize;
+  }
+
+  [data-slot="resizable-handle-grip"] {
+    @apply bg-border h-6 w-1 rounded-lg z-10 flex shrink-0;
+  }
+
+  [data-slot="resizable-handle"][aria-orientation="horizontal"] > [data-slot="resizable-handle-grip"] {
+    @apply rotate-90;
+  }
+}
diff --git a/priv/styles/nova/scroll_area.css b/priv/styles/nova/scroll_area.css
new file mode 100644
index 0000000..b43d627
--- /dev/null
+++ b/priv/styles/nova/scroll_area.css
@@ -0,0 +1,18 @@
+@layer components {
+  [data-slot="scroll-area"] {
+    @apply relative overflow-hidden;
+  }
+
+  /*
+   * shadix divergence: the React/Radix original renders separate
+   * `scroll-area-scrollbar` / `scroll-area-thumb` slots driven by JS. This
+   * CSS-only port keeps the native scroll on the viewport and styles the
+   * native scrollbars instead. The shadcn structural base
+   * (`size-full rounded-[inherit] transition-[color,box-shadow] outline-none
+   * focus-visible:*`) is preserved verbatim; the `overflow-auto` and
+   * `::-webkit-scrollbar` rules are the native-scrollbar substitute.
+   */
+  [data-slot="scroll-area-viewport"] {
+    @apply size-full overflow-auto rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 [scrollbar-width:thin] [scrollbar-color:var(--border)_transparent] [&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border;
+  }
+}
diff --git a/priv/styles/nova/select.css b/priv/styles/nova/select.css
new file mode 100644
index 0000000..264c454
--- /dev/null
+++ b/priv/styles/nova/select.css
@@ -0,0 +1,21 @@
+@layer components {
+  [data-slot="select-trigger"] {
+    @apply flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0 border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="select-value"] {
+    @apply flex flex-1 text-left;
+  }
+
+  [data-slot="select-content"] {
+    @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100;
+  }
+
+  [data-slot="select-item"] {
+    @apply relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2;
+  }
+
+  [data-slot="select-item-indicator"] {
+    @apply pointer-events-none absolute right-2 flex size-4 items-center justify-center;
+  }
+}
diff --git a/priv/styles/nova/sheet.css b/priv/styles/nova/sheet.css
new file mode 100644
index 0000000..89ee565
--- /dev/null
+++ b/priv/styles/nova/sheet.css
@@ -0,0 +1,29 @@
+@layer components {
+  [data-slot="sheet-overlay"] {
+    @apply fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs;
+  }
+
+  [data-slot="sheet-content"] {
+    @apply bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;
+  }
+
+  [data-slot="sheet-close"] {
+    @apply absolute top-3 right-3;
+  }
+
+  [data-slot="sheet-header"] {
+    @apply flex flex-col gap-0.5 p-4;
+  }
+
+  [data-slot="sheet-footer"] {
+    @apply mt-auto flex flex-col gap-2 p-4;
+  }
+
+  [data-slot="sheet-title"] {
+    @apply text-foreground text-base font-medium;
+  }
+
+  [data-slot="sheet-description"] {
+    @apply text-muted-foreground text-sm;
+  }
+}
diff --git a/priv/styles/nova/sidebar.css b/priv/styles/nova/sidebar.css
new file mode 100644
index 0000000..5bd5b81
--- /dev/null
+++ b/priv/styles/nova/sidebar.css
@@ -0,0 +1,41 @@
+@layer components {
+  [data-slot="sidebar-provider"] {
+    @apply flex min-h-svh w-full;
+  }
+
+  [data-slot="sidebar"] {
+    @apply flex h-svh shrink-0 flex-col overflow-hidden border-r bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-linear motion-reduce:transition-none w-64 group-data-[state=collapsed]/sidebar:w-0;
+  }
+
+  [data-slot="sidebar-trigger"] {
+    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg;
+  }
+
+  [data-slot="sidebar-header"] {
+    @apply flex flex-col gap-2 p-2;
+  }
+
+  [data-slot="sidebar-content"] {
+    @apply flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden no-scrollbar gap-0;
+  }
+
+  [data-slot="sidebar-footer"] {
+    @apply flex flex-col gap-2 p-2;
+  }
+
+  [data-slot="sidebar-group"] {
+    @apply relative flex w-full min-w-0 flex-col p-2;
+  }
+
+  [data-slot="sidebar-group-label"] {
+    @apply flex shrink-0 items-center outline-hidden [&>svg]:shrink-0 text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4;
+  }
+
+  [data-slot="sidebar-menu"] {
+    @apply flex w-full min-w-0 flex-col gap-0;
+  }
+
+  [data-slot="sidebar-menu-button"] {
+    @apply flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm;
+  }
+}
diff --git a/priv/styles/nova/slider.css b/priv/styles/nova/slider.css
new file mode 100644
index 0000000..8b2191b
--- /dev/null
+++ b/priv/styles/nova/slider.css
@@ -0,0 +1,17 @@
+@layer components {
+  /*
+   * shadix renders the slider as a native <input type="range"> rather than the
+   * shadcn Radix track/range/thumb elements, so the cn-slider-track and
+   * cn-slider-thumb skins are mapped onto the browser slider pseudo-elements.
+   * There is no separate range fill element on a native input, so the
+   * cn-slider-range skin (bg-primary) has no target here.
+   */
+  [data-slot="slider"] {
+    @apply w-full cursor-pointer appearance-none bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none
+      [&::-webkit-slider-runnable-track]:w-full [&::-webkit-slider-runnable-track]:bg-muted [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:h-1
+      [&::-moz-range-track]:w-full [&::-moz-range-track]:bg-muted [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-1
+      [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-ring [&::-webkit-slider-thumb]:ring-ring/50 [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:transition-[color,box-shadow] hover:[&::-webkit-slider-thumb]:ring-3 focus-visible:[&::-webkit-slider-thumb]:ring-3 active:[&::-webkit-slider-thumb]:ring-3
+      [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-ring [&::-moz-range-thumb]:ring-ring/50 [&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:transition-[color,box-shadow] hover:[&::-moz-range-thumb]:ring-3 focus-visible:[&::-moz-range-thumb]:ring-3 active:[&::-moz-range-thumb]:ring-3
+      aria-invalid:[&::-webkit-slider-thumb]:border-destructive aria-invalid:[&::-moz-range-thumb]:border-destructive;
+  }
+}
diff --git a/priv/styles/nova/sonner.css b/priv/styles/nova/sonner.css
new file mode 100644
index 0000000..db453f2
--- /dev/null
+++ b/priv/styles/nova/sonner.css
@@ -0,0 +1,44 @@
+@layer components {
+  [data-slot="toaster-list"] {
+    @apply fixed bottom-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:bottom-4 sm:right-4 sm:top-auto sm:flex-col md:max-w-[420px];
+  }
+
+  [data-slot="toast"] {
+    @apply pointer-events-auto relative flex w-full list-none items-start gap-2 border p-4 pr-8 shadow-lg outline-none transition-all duration-200 ease-out motion-reduce:transition-none data-[state=open]:translate-y-0 data-[state=open]:opacity-100 data-[state=closed]:translate-y-2 data-[state=closed]:opacity-0 focus-visible:ring-[3px] focus-visible:ring-ring/50 rounded-2xl;
+  }
+
+  [data-slot="toast"][data-variant="default"] {
+    @apply bg-background text-foreground;
+  }
+
+  [data-slot="toast"][data-variant="success"] {
+    @apply bg-background text-foreground border-green-500/50;
+  }
+
+  [data-slot="toast"][data-variant="info"] {
+    @apply bg-background text-foreground border-blue-500/50;
+  }
+
+  [data-slot="toast"][data-variant="warning"] {
+    @apply bg-background text-foreground border-yellow-500/50;
+  }
+
+  /* White text on the destructive surface (matching the button's destructive
+     variant). The theme's `--destructive-foreground` is a dark red in dark mode,
+     which renders unreadably on the light-salmon dark-mode `--destructive`. */
+  [data-slot="toast"][data-variant="error"] {
+    @apply bg-destructive text-white border-destructive dark:bg-destructive/60;
+  }
+
+  [data-slot="toast-title"] {
+    @apply text-sm font-semibold;
+  }
+
+  [data-slot="toast-description"] {
+    @apply text-sm opacity-90;
+  }
+
+  [data-slot="toast-close"] {
+    @apply absolute right-2 top-2 rounded-md p-1 opacity-60 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none;
+  }
+}
diff --git a/priv/styles/nova/switch.css b/priv/styles/nova/switch.css
new file mode 100644
index 0000000..2f11b23
--- /dev/null
+++ b/priv/styles/nova/switch.css
@@ -0,0 +1,9 @@
+@layer components {
+  [data-slot="switch"] {
+    @apply relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];
+  }
+
+  [data-slot="switch-thumb"] {
+    @apply pointer-events-none block ring-0 transition-transform bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0;
+  }
+}
diff --git a/priv/styles/nova/table.css b/priv/styles/nova/table.css
new file mode 100644
index 0000000..d7c760f
--- /dev/null
+++ b/priv/styles/nova/table.css
@@ -0,0 +1,37 @@
+@layer components {
+  [data-slot="table-container"] {
+    @apply relative w-full overflow-x-auto;
+  }
+
+  [data-slot="table"] {
+    @apply w-full caption-bottom text-sm;
+  }
+
+  [data-slot="table-header"] {
+    @apply [&_tr]:border-b;
+  }
+
+  [data-slot="table-body"] {
+    @apply [&_tr:last-child]:border-0;
+  }
+
+  [data-slot="table-footer"] {
+    @apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;
+  }
+
+  [data-slot="table-row"] {
+    @apply hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50;
+  }
+
+  [data-slot="table-head"] {
+    @apply text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0;
+  }
+
+  [data-slot="table-cell"] {
+    @apply p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0;
+  }
+
+  [data-slot="table-caption"] {
+    @apply text-muted-foreground mt-4 text-sm;
+  }
+}
diff --git a/priv/styles/nova/tabs.css b/priv/styles/nova/tabs.css
new file mode 100644
index 0000000..81e3113
--- /dev/null
+++ b/priv/styles/nova/tabs.css
@@ -0,0 +1,17 @@
+@layer components {
+  [data-slot="tabs"] {
+    @apply flex flex-col gap-2;
+  }
+
+  [data-slot="tabs-list"] {
+    @apply inline-flex w-fit items-center justify-center text-muted-foreground bg-muted rounded-lg p-[3px] h-8;
+  }
+
+  [data-slot="tabs-trigger"] {
+    @apply relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="tabs-content"] {
+    @apply flex-1 outline-none text-sm;
+  }
+}
diff --git a/priv/styles/nova/textarea.css b/priv/styles/nova/textarea.css
new file mode 100644
index 0000000..7bb8cd5
--- /dev/null
+++ b/priv/styles/nova/textarea.css
@@ -0,0 +1,5 @@
+@layer components {
+  [data-slot="textarea"] {
+    @apply flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;
+  }
+}
diff --git a/priv/styles/nova/toggle.css b/priv/styles/nova/toggle.css
new file mode 100644
index 0000000..5c1b189
--- /dev/null
+++ b/priv/styles/nova/toggle.css
@@ -0,0 +1,25 @@
+@layer components {
+  [data-slot="toggle"] {
+    @apply inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="toggle"][data-variant="default"] {
+    @apply bg-transparent;
+  }
+
+  [data-slot="toggle"][data-variant="outline"] {
+    @apply border-input hover:bg-muted border bg-transparent;
+  }
+
+  [data-slot="toggle"][data-size="default"] {
+    @apply h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+
+  [data-slot="toggle"][data-size="sm"] {
+    @apply h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5;
+  }
+
+  [data-slot="toggle"][data-size="lg"] {
+    @apply h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+}
diff --git a/priv/styles/nova/toggle_group.css b/priv/styles/nova/toggle_group.css
new file mode 100644
index 0000000..b57d2f8
--- /dev/null
+++ b/priv/styles/nova/toggle_group.css
@@ -0,0 +1,29 @@
+@layer components {
+  [data-slot="toggle-group"] {
+    @apply flex w-fit flex-row items-center rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)];
+  }
+
+  [data-slot="toggle-group-item"] {
+    @apply inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 shrink-0 focus:z-10 focus-visible:z-10;
+  }
+
+  [data-slot="toggle-group-item"][data-variant="default"] {
+    @apply bg-transparent;
+  }
+
+  [data-slot="toggle-group-item"][data-variant="outline"] {
+    @apply border-input hover:bg-muted border bg-transparent;
+  }
+
+  [data-slot="toggle-group-item"][data-size="default"] {
+    @apply h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+
+  [data-slot="toggle-group-item"][data-size="sm"] {
+    @apply h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5;
+  }
+
+  [data-slot="toggle-group-item"][data-size="lg"] {
+    @apply h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+}
diff --git a/priv/styles/nova/tooltip.css b/priv/styles/nova/tooltip.css
new file mode 100644
index 0000000..c8748eb
--- /dev/null
+++ b/priv/styles/nova/tooltip.css
@@ -0,0 +1,5 @@
+@layer components {
+  [data-slot="tooltip-content"] {
+    @apply z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) bg-foreground text-background data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 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 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm;
+  }
+}
diff --git a/priv/styles/vega/accordion.css b/priv/styles/vega/accordion.css
new file mode 100644
index 0000000..0581928
--- /dev/null
+++ b/priv/styles/vega/accordion.css
@@ -0,0 +1,21 @@
+@layer components {
+  [data-slot="accordion"] {
+    @apply flex w-full flex-col;
+  }
+
+  [data-slot="accordion-item"] {
+    @apply not-last:border-b;
+  }
+
+  [data-slot="accordion-trigger"] {
+    @apply group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
+  }
+
+  [data-slot="accordion-content"] {
+    @apply text-sm;
+  }
+
+  [data-slot="accordion-content-inner"] {
+    @apply pt-0 pb-4;
+  }
+}
diff --git a/priv/styles/vega/alert_dialog.css b/priv/styles/vega/alert_dialog.css
new file mode 100644
index 0000000..3bf1af6
--- /dev/null
+++ b/priv/styles/vega/alert_dialog.css
@@ -0,0 +1,33 @@
+@layer components {
+  [data-slot="alert-dialog-overlay"] {
+    @apply fixed inset-0 z-50 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+  }
+
+  [data-slot="alert-dialog-content"] {
+    @apply fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-6 rounded-xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg;
+  }
+
+  [data-slot="alert-dialog-header"] {
+    @apply grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr];
+  }
+
+  [data-slot="alert-dialog-footer"] {
+    @apply flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end;
+  }
+
+  [data-slot="alert-dialog-title"] {
+    @apply text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2;
+  }
+
+  [data-slot="alert-dialog-description"] {
+    @apply text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3;
+  }
+
+  [data-slot="alert-dialog-action"] {
+    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 bg-primary text-primary-foreground hover:bg-primary/80 h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+
+  [data-slot="alert-dialog-cancel"] {
+    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+}
diff --git a/priv/styles/vega/avatar.css b/priv/styles/vega/avatar.css
new file mode 100644
index 0000000..a3ef715
--- /dev/null
+++ b/priv/styles/vega/avatar.css
@@ -0,0 +1,13 @@
+@layer components {
+  [data-slot="avatar"] {
+    @apply relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6;
+  }
+
+  [data-slot="avatar-image"] {
+    @apply aspect-square size-full object-cover rounded-full;
+  }
+
+  [data-slot="avatar-fallback"] {
+    @apply flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs bg-muted text-muted-foreground rounded-full;
+  }
+}
diff --git a/priv/styles/vega/card.css b/priv/styles/vega/card.css
new file mode 100644
index 0000000..20e8bda
--- /dev/null
+++ b/priv/styles/vega/card.css
@@ -0,0 +1,29 @@
+@layer components {
+  [data-slot="card"] {
+    @apply flex flex-col ring-foreground/10 bg-card text-card-foreground gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm shadow-xs ring-1 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl;
+  }
+
+  [data-slot="card-header"] {
+    @apply grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] gap-1 rounded-t-xl px-(--card-spacing) [.border-b]:pb-(--card-spacing);
+  }
+
+  [data-slot="card-title"] {
+    @apply text-base leading-normal font-medium group-data-[size=sm]/card:text-sm;
+  }
+
+  [data-slot="card-description"] {
+    @apply text-muted-foreground text-sm;
+  }
+
+  [data-slot="card-action"] {
+    @apply col-start-2 row-span-2 row-start-1 self-start justify-self-end;
+  }
+
+  [data-slot="card-content"] {
+    @apply px-(--card-spacing);
+  }
+
+  [data-slot="card-footer"] {
+    @apply flex items-center rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing);
+  }
+}
diff --git a/priv/styles/vega/carousel.css b/priv/styles/vega/carousel.css
new file mode 100644
index 0000000..3424fe5
--- /dev/null
+++ b/priv/styles/vega/carousel.css
@@ -0,0 +1,21 @@
+@layer components {
+  [data-slot="carousel"] {
+    @apply relative;
+  }
+
+  [data-slot="carousel-content"] {
+    @apply flex overflow-x-auto snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
+  }
+
+  [data-slot="carousel-item"] {
+    @apply min-w-0 shrink-0 grow-0 basis-full snap-start;
+  }
+
+  [data-slot="carousel-previous"] {
+    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md rounded-full absolute touch-manipulation top-1/2 -left-12 -translate-y-1/2;
+  }
+
+  [data-slot="carousel-next"] {
+    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md rounded-full absolute touch-manipulation top-1/2 -right-12 -translate-y-1/2;
+  }
+}
diff --git a/priv/styles/vega/checkbox.css b/priv/styles/vega/checkbox.css
new file mode 100644
index 0000000..2568c74
--- /dev/null
+++ b/priv/styles/vega/checkbox.css
@@ -0,0 +1,9 @@
+@layer components {
+  [data-slot="checkbox"] {
+    @apply relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3;
+  }
+
+  [data-slot="checkbox-indicator"] {
+    @apply grid place-content-center text-current transition-none [&>svg]:size-3.5;
+  }
+}
diff --git a/priv/styles/vega/combobox.css b/priv/styles/vega/combobox.css
new file mode 100644
index 0000000..239fcd1
--- /dev/null
+++ b/priv/styles/vega/combobox.css
@@ -0,0 +1,21 @@
+@layer components {
+  [data-slot="combobox-trigger"] {
+    @apply flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="combobox-content"] {
+    @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none;
+  }
+
+  [data-slot="combobox-input"] {
+    @apply flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50;
+  }
+
+  [data-slot="combobox-item"] {
+    @apply relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground data-[active]:bg-accent data-[active]:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="combobox-empty"] {
+    @apply text-muted-foreground w-full py-2 text-center text-sm;
+  }
+}
diff --git a/priv/styles/vega/command.css b/priv/styles/vega/command.css
new file mode 100644
index 0000000..4d64b14
--- /dev/null
+++ b/priv/styles/vega/command.css
@@ -0,0 +1,41 @@
+@layer components {
+  [data-slot="command"] {
+    @apply flex size-full flex-col overflow-hidden bg-popover text-popover-foreground rounded-xl! p-1;
+  }
+
+  [data-slot="command-input-wrapper"] {
+    @apply flex items-center gap-2 p-1 pb-0;
+  }
+
+  [data-slot="command-input"] {
+    @apply outline-hidden disabled:cursor-not-allowed disabled:opacity-50 w-full text-sm;
+  }
+
+  [data-slot="command-list"] {
+    @apply overflow-x-hidden overflow-y-auto no-scrollbar max-h-72 scroll-py-1 outline-none;
+  }
+
+  [data-slot="command-empty"] {
+    @apply py-6 text-center text-sm;
+  }
+
+  [data-slot="command-group"] {
+    @apply text-foreground overflow-hidden p-1;
+  }
+
+  [data-slot="command-group-heading"] {
+    @apply text-muted-foreground px-2 py-1.5 text-xs font-medium;
+  }
+
+  [data-slot="command-separator"] {
+    @apply bg-border -mx-1 h-px w-auto;
+  }
+
+  [data-slot="command-item"] {
+    @apply data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="command-shortcut"] {
+    @apply text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest;
+  }
+}
diff --git a/priv/styles/vega/context_menu.css b/priv/styles/vega/context_menu.css
new file mode 100644
index 0000000..8be362f
--- /dev/null
+++ b/priv/styles/vega/context_menu.css
@@ -0,0 +1,25 @@
+@layer components {
+  [data-slot="context-menu-trigger"] {
+    @apply block select-none;
+  }
+
+  [data-slot="context-menu-content"] {
+    @apply z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100;
+  }
+
+  [data-slot="context-menu-item"] {
+    @apply relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="context-menu-label"] {
+    @apply text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8;
+  }
+
+  [data-slot="context-menu-separator"] {
+    @apply bg-border -mx-1 my-1 h-px;
+  }
+
+  [data-slot="context-menu-shortcut"] {
+    @apply text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest;
+  }
+}
diff --git a/priv/styles/vega/dialog.css b/priv/styles/vega/dialog.css
new file mode 100644
index 0000000..e165f95
--- /dev/null
+++ b/priv/styles/vega/dialog.css
@@ -0,0 +1,29 @@
+@layer components {
+  [data-slot="dialog-overlay"] {
+    @apply fixed inset-0 isolate z-50 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+  }
+
+  [data-slot="dialog-content"] {
+    @apply fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md;
+  }
+
+  [data-slot="dialog-close"] {
+    @apply absolute top-4 right-4;
+  }
+
+  [data-slot="dialog-header"] {
+    @apply flex flex-col gap-2;
+  }
+
+  [data-slot="dialog-footer"] {
+    @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
+  }
+
+  [data-slot="dialog-title"] {
+    @apply leading-none font-medium;
+  }
+
+  [data-slot="dialog-description"] {
+    @apply text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3;
+  }
+}
diff --git a/priv/styles/vega/drawer.css b/priv/styles/vega/drawer.css
new file mode 100644
index 0000000..cfce59a
--- /dev/null
+++ b/priv/styles/vega/drawer.css
@@ -0,0 +1,25 @@
+@layer components {
+  [data-slot="drawer-content"] {
+    @apply fixed z-50 bg-popover text-popover-foreground flex h-auto flex-col text-sm inset-x-0 bottom-0 mt-24 max-h-[80vh] rounded-t-xl border-t;
+  }
+
+  [data-slot="drawer-handle"] {
+    @apply bg-muted mx-auto mt-4 h-1.5 w-[100px] shrink-0 rounded-full;
+  }
+
+  [data-slot="drawer-header"] {
+    @apply flex flex-col gap-0.5 p-4 text-center md:gap-1.5 md:text-left;
+  }
+
+  [data-slot="drawer-footer"] {
+    @apply mt-auto flex flex-col gap-2 p-4;
+  }
+
+  [data-slot="drawer-title"] {
+    @apply text-foreground font-medium;
+  }
+
+  [data-slot="drawer-description"] {
+    @apply text-muted-foreground text-sm;
+  }
+}
diff --git a/priv/styles/vega/dropdown_menu.css b/priv/styles/vega/dropdown_menu.css
new file mode 100644
index 0000000..17f4314
--- /dev/null
+++ b/priv/styles/vega/dropdown_menu.css
@@ -0,0 +1,21 @@
+@layer components {
+  [data-slot="dropdown-menu-content"] {
+    @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100;
+  }
+
+  [data-slot="dropdown-menu-item"] {
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="dropdown-menu-label"] {
+    @apply text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8;
+  }
+
+  [data-slot="dropdown-menu-separator"] {
+    @apply bg-border -mx-1 my-1 h-px;
+  }
+
+  [data-slot="dropdown-menu-shortcut"] {
+    @apply text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest;
+  }
+}
diff --git a/priv/styles/vega/hover_card.css b/priv/styles/vega/hover_card.css
new file mode 100644
index 0000000..abf52a8
--- /dev/null
+++ b/priv/styles/vega/hover_card.css
@@ -0,0 +1,5 @@
+@layer components {
+  [data-slot="hover-card-content"] {
+    @apply z-50 origin-(--radix-hover-card-content-transform-origin) outline-hidden data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-4 text-sm shadow-md ring-1 duration-100;
+  }
+}
diff --git a/priv/styles/vega/input.css b/priv/styles/vega/input.css
new file mode 100644
index 0000000..5997911
--- /dev/null
+++ b/priv/styles/vega/input.css
@@ -0,0 +1,5 @@
+@layer components {
+  [data-slot="input"] {
+    @apply w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;
+  }
+}
diff --git a/priv/styles/vega/input_otp.css b/priv/styles/vega/input_otp.css
new file mode 100644
index 0000000..32cb472
--- /dev/null
+++ b/priv/styles/vega/input_otp.css
@@ -0,0 +1,19 @@
+@layer components {
+  /*
+   * Structural divergence from shadcn: shadcn's input-otp wraps the `input-otp`
+   * npm library, rendering a single hidden OTPInput plus per-character <div>
+   * slots whose "active" state is driven by the library via data-[active=true].
+   * Shadix renders one native <input> per character (focusable, roving
+   * tabindex), so the active state is real :focus-visible, not data-[active].
+   * The skin bodies below are copied verbatim from .cn-input-otp* with
+   * data-[active=true]: rewritten to focus-visible: and the native-input
+   * necessities (text-center, bg-transparent, disabled affordances) added.
+   */
+  [data-slot="input-otp"] {
+    @apply flex items-center has-disabled:opacity-50 gap-2;
+  }
+
+  [data-slot="input-otp-slot"] {
+    @apply relative flex items-center justify-center focus-visible:z-10 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:aria-invalid:ring-destructive/20 dark:focus-visible:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-visible:aria-invalid:border-destructive size-9 border-y border-r text-center text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md focus-visible:ring-3 bg-transparent disabled:cursor-not-allowed disabled:opacity-50;
+  }
+}
diff --git a/priv/styles/vega/menubar.css b/priv/styles/vega/menubar.css
new file mode 100644
index 0000000..13ccaff
--- /dev/null
+++ b/priv/styles/vega/menubar.css
@@ -0,0 +1,29 @@
+@layer components {
+  [data-slot="menubar"] {
+    @apply flex items-center h-9 gap-1 rounded-md border p-1 shadow-xs;
+  }
+
+  [data-slot="menubar-trigger"] {
+    @apply flex items-center outline-hidden select-none hover:bg-muted aria-expanded:bg-muted rounded-sm px-2 py-1 text-sm font-medium;
+  }
+
+  [data-slot="menubar-content"] {
+    @apply bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 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 ring-foreground/10 min-w-36 rounded-md p-1 shadow-md ring-1 duration-100;
+  }
+
+  [data-slot="menubar-item"] {
+    @apply relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="menubar-label"] {
+    @apply px-2 py-1.5 text-sm font-medium data-inset:pl-8;
+  }
+
+  [data-slot="menubar-separator"] {
+    @apply -mx-1 my-1 h-px bg-border;
+  }
+
+  [data-slot="menubar-shortcut"] {
+    @apply ml-auto text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest;
+  }
+}
diff --git a/priv/styles/vega/navigation_menu.css b/priv/styles/vega/navigation_menu.css
new file mode 100644
index 0000000..769e527
--- /dev/null
+++ b/priv/styles/vega/navigation_menu.css
@@ -0,0 +1,29 @@
+@layer components {
+  [data-slot="navigation-menu"] {
+    @apply relative flex flex-1 items-center justify-center max-w-max;
+  }
+
+  [data-slot="navigation-menu-list"] {
+    @apply flex flex-1 list-none items-center justify-center gap-0;
+  }
+
+  [data-slot="navigation-menu-item"] {
+    @apply relative;
+  }
+
+  [data-slot="navigation-menu-trigger"] {
+    @apply inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50;
+  }
+
+  [data-slot="navigation-menu-trigger-icon"] {
+    @apply relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;
+  }
+
+  [data-slot="navigation-menu-content"] {
+    @apply data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-2 pr-2.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300;
+  }
+
+  [data-slot="navigation-menu-link"] {
+    @apply data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-md p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-sm;
+  }
+}
diff --git a/priv/styles/vega/pagination.css b/priv/styles/vega/pagination.css
new file mode 100644
index 0000000..e75c287
--- /dev/null
+++ b/priv/styles/vega/pagination.css
@@ -0,0 +1,49 @@
+@layer components {
+  [data-slot="pagination"] {
+    @apply mx-auto flex w-full justify-center;
+  }
+
+  [data-slot="pagination-content"] {
+    @apply flex items-center gap-1;
+  }
+
+  [data-slot="pagination-link"],
+  [data-slot="pagination-previous"],
+  [data-slot="pagination-next"] {
+    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="pagination-link"][data-active="true"],
+  [data-slot="pagination-previous"][data-active="true"],
+  [data-slot="pagination-next"][data-active="true"] {
+    @apply border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs;
+  }
+
+  [data-slot="pagination-link"][data-active="false"],
+  [data-slot="pagination-previous"][data-active="false"],
+  [data-slot="pagination-next"][data-active="false"] {
+    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
+  }
+
+  [data-slot="pagination-link"][data-size="default"],
+  [data-slot="pagination-previous"],
+  [data-slot="pagination-next"] {
+    @apply h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+
+  [data-slot="pagination-link"][data-size="icon"] {
+    @apply size-9;
+  }
+
+  [data-slot="pagination-previous"] {
+    @apply pl-2!;
+  }
+
+  [data-slot="pagination-next"] {
+    @apply pr-2!;
+  }
+
+  [data-slot="pagination-ellipsis"] {
+    @apply flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4;
+  }
+}
diff --git a/priv/styles/vega/popover.css b/priv/styles/vega/popover.css
new file mode 100644
index 0000000..0d5a8c8
--- /dev/null
+++ b/priv/styles/vega/popover.css
@@ -0,0 +1,17 @@
+@layer components {
+  [data-slot="popover-content"] {
+    @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 flex flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 duration-100;
+  }
+
+  [data-slot="popover-header"] {
+    @apply flex flex-col gap-1 text-sm;
+  }
+
+  [data-slot="popover-title"] {
+    @apply font-medium;
+  }
+
+  [data-slot="popover-description"] {
+    @apply text-muted-foreground;
+  }
+}
diff --git a/priv/styles/vega/progress.css b/priv/styles/vega/progress.css
new file mode 100644
index 0000000..a5f42f7
--- /dev/null
+++ b/priv/styles/vega/progress.css
@@ -0,0 +1,9 @@
+@layer components {
+  [data-slot="progress"] {
+    @apply relative flex w-full items-center overflow-x-hidden bg-muted h-1.5 rounded-full;
+  }
+
+  [data-slot="progress-indicator"] {
+    @apply size-full flex-1 transition-all bg-primary;
+  }
+}
diff --git a/priv/styles/vega/radio_group.css b/priv/styles/vega/radio_group.css
new file mode 100644
index 0000000..31a5b77
--- /dev/null
+++ b/priv/styles/vega/radio_group.css
@@ -0,0 +1,9 @@
+@layer components {
+  [data-slot="radio-group"] {
+    @apply w-full grid gap-3;
+  }
+
+  [data-slot="radio-group-item"] {
+    @apply relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3;
+  }
+}
diff --git a/priv/styles/vega/resizable.css b/priv/styles/vega/resizable.css
new file mode 100644
index 0000000..87dc60a
--- /dev/null
+++ b/priv/styles/vega/resizable.css
@@ -0,0 +1,29 @@
+@layer components {
+  [data-slot="resizable"] {
+    @apply flex h-full w-full;
+  }
+
+  [data-slot="resizable"][data-direction="vertical"] {
+    @apply flex-col;
+  }
+
+  [data-slot="resizable-panel"] {
+    @apply min-h-0 min-w-0 overflow-auto;
+  }
+
+  [data-slot="resizable-handle"] {
+    @apply relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden cursor-col-resize;
+  }
+
+  [data-slot="resizable-handle"][aria-orientation="horizontal"] {
+    @apply h-px w-full after:left-0 after:h-1 after:w-full after:translate-x-0 after:-translate-y-1/2 cursor-row-resize;
+  }
+
+  [data-slot="resizable-handle-grip"] {
+    @apply bg-border h-6 w-1 rounded-lg z-10 flex shrink-0;
+  }
+
+  [data-slot="resizable-handle"][aria-orientation="horizontal"] > [data-slot="resizable-handle-grip"] {
+    @apply rotate-90;
+  }
+}
diff --git a/priv/styles/vega/scroll_area.css b/priv/styles/vega/scroll_area.css
new file mode 100644
index 0000000..b43d627
--- /dev/null
+++ b/priv/styles/vega/scroll_area.css
@@ -0,0 +1,18 @@
+@layer components {
+  [data-slot="scroll-area"] {
+    @apply relative overflow-hidden;
+  }
+
+  /*
+   * shadix divergence: the React/Radix original renders separate
+   * `scroll-area-scrollbar` / `scroll-area-thumb` slots driven by JS. This
+   * CSS-only port keeps the native scroll on the viewport and styles the
+   * native scrollbars instead. The shadcn structural base
+   * (`size-full rounded-[inherit] transition-[color,box-shadow] outline-none
+   * focus-visible:*`) is preserved verbatim; the `overflow-auto` and
+   * `::-webkit-scrollbar` rules are the native-scrollbar substitute.
+   */
+  [data-slot="scroll-area-viewport"] {
+    @apply size-full overflow-auto rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 [scrollbar-width:thin] [scrollbar-color:var(--border)_transparent] [&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar]:h-2.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border;
+  }
+}
diff --git a/priv/styles/vega/select.css b/priv/styles/vega/select.css
new file mode 100644
index 0000000..d99703f
--- /dev/null
+++ b/priv/styles/vega/select.css
@@ -0,0 +1,21 @@
+@layer components {
+  [data-slot="select-trigger"] {
+    @apply flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0 border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="select-value"] {
+    @apply flex flex-1 text-left;
+  }
+
+  [data-slot="select-content"] {
+    @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 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 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100;
+  }
+
+  [data-slot="select-item"] {
+    @apply relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2;
+  }
+
+  [data-slot="select-item-indicator"] {
+    @apply pointer-events-none absolute right-2 flex size-4 items-center justify-center;
+  }
+}
diff --git a/priv/styles/vega/sheet.css b/priv/styles/vega/sheet.css
new file mode 100644
index 0000000..c77b9bf
--- /dev/null
+++ b/priv/styles/vega/sheet.css
@@ -0,0 +1,29 @@
+@layer components {
+  [data-slot="sheet-overlay"] {
+    @apply fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs;
+  }
+
+  [data-slot="sheet-content"] {
+    @apply bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;
+  }
+
+  [data-slot="sheet-close"] {
+    @apply absolute top-4 right-4;
+  }
+
+  [data-slot="sheet-header"] {
+    @apply flex flex-col gap-1.5 p-4;
+  }
+
+  [data-slot="sheet-footer"] {
+    @apply mt-auto flex flex-col gap-2 p-4;
+  }
+
+  [data-slot="sheet-title"] {
+    @apply text-foreground font-medium;
+  }
+
+  [data-slot="sheet-description"] {
+    @apply text-muted-foreground text-sm;
+  }
+}
diff --git a/priv/styles/vega/sidebar.css b/priv/styles/vega/sidebar.css
new file mode 100644
index 0000000..e162f1d
--- /dev/null
+++ b/priv/styles/vega/sidebar.css
@@ -0,0 +1,41 @@
+@layer components {
+  [data-slot="sidebar-provider"] {
+    @apply flex min-h-svh w-full;
+  }
+
+  [data-slot="sidebar"] {
+    @apply flex h-svh shrink-0 flex-col overflow-hidden border-r bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-linear motion-reduce:transition-none w-64 group-data-[state=collapsed]/sidebar:w-0;
+  }
+
+  [data-slot="sidebar-trigger"] {
+    @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md;
+  }
+
+  [data-slot="sidebar-header"] {
+    @apply flex flex-col gap-2 p-2;
+  }
+
+  [data-slot="sidebar-content"] {
+    @apply flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden no-scrollbar gap-2;
+  }
+
+  [data-slot="sidebar-footer"] {
+    @apply flex flex-col gap-2 p-2;
+  }
+
+  [data-slot="sidebar-group"] {
+    @apply relative flex w-full min-w-0 flex-col p-2;
+  }
+
+  [data-slot="sidebar-group-label"] {
+    @apply flex shrink-0 items-center outline-hidden [&>svg]:shrink-0 text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4;
+  }
+
+  [data-slot="sidebar-menu"] {
+    @apply flex w-full min-w-0 flex-col gap-1;
+  }
+
+  [data-slot="sidebar-menu-button"] {
+    @apply flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm;
+  }
+}
diff --git a/priv/styles/vega/slider.css b/priv/styles/vega/slider.css
new file mode 100644
index 0000000..a29257f
--- /dev/null
+++ b/priv/styles/vega/slider.css
@@ -0,0 +1,17 @@
+@layer components {
+  /*
+   * shadix renders the slider as a native <input type="range"> rather than the
+   * shadcn Radix track/range/thumb elements, so the cn-slider-track and
+   * cn-slider-thumb skins are mapped onto the browser slider pseudo-elements.
+   * There is no separate range fill element on a native input, so the
+   * cn-slider-range skin (bg-primary) has no target here.
+   */
+  [data-slot="slider"] {
+    @apply w-full cursor-pointer appearance-none bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none
+      [&::-webkit-slider-runnable-track]:w-full [&::-webkit-slider-runnable-track]:bg-muted [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:h-1.5
+      [&::-moz-range-track]:w-full [&::-moz-range-track]:bg-muted [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-1.5
+      [&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:ring-ring/50 [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:transition-[color,box-shadow] hover:[&::-webkit-slider-thumb]:ring-4 focus-visible:[&::-webkit-slider-thumb]:ring-4
+      [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-primary [&::-moz-range-thumb]:ring-ring/50 [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:shadow-sm [&::-moz-range-thumb]:transition-[color,box-shadow] hover:[&::-moz-range-thumb]:ring-4 focus-visible:[&::-moz-range-thumb]:ring-4
+      aria-invalid:[&::-webkit-slider-thumb]:border-destructive aria-invalid:[&::-moz-range-thumb]:border-destructive;
+  }
+}
diff --git a/priv/styles/vega/sonner.css b/priv/styles/vega/sonner.css
new file mode 100644
index 0000000..db453f2
--- /dev/null
+++ b/priv/styles/vega/sonner.css
@@ -0,0 +1,44 @@
+@layer components {
+  [data-slot="toaster-list"] {
+    @apply fixed bottom-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:bottom-4 sm:right-4 sm:top-auto sm:flex-col md:max-w-[420px];
+  }
+
+  [data-slot="toast"] {
+    @apply pointer-events-auto relative flex w-full list-none items-start gap-2 border p-4 pr-8 shadow-lg outline-none transition-all duration-200 ease-out motion-reduce:transition-none data-[state=open]:translate-y-0 data-[state=open]:opacity-100 data-[state=closed]:translate-y-2 data-[state=closed]:opacity-0 focus-visible:ring-[3px] focus-visible:ring-ring/50 rounded-2xl;
+  }
+
+  [data-slot="toast"][data-variant="default"] {
+    @apply bg-background text-foreground;
+  }
+
+  [data-slot="toast"][data-variant="success"] {
+    @apply bg-background text-foreground border-green-500/50;
+  }
+
+  [data-slot="toast"][data-variant="info"] {
+    @apply bg-background text-foreground border-blue-500/50;
+  }
+
+  [data-slot="toast"][data-variant="warning"] {
+    @apply bg-background text-foreground border-yellow-500/50;
+  }
+
+  /* White text on the destructive surface (matching the button's destructive
+     variant). The theme's `--destructive-foreground` is a dark red in dark mode,
+     which renders unreadably on the light-salmon dark-mode `--destructive`. */
+  [data-slot="toast"][data-variant="error"] {
+    @apply bg-destructive text-white border-destructive dark:bg-destructive/60;
+  }
+
+  [data-slot="toast-title"] {
+    @apply text-sm font-semibold;
+  }
+
+  [data-slot="toast-description"] {
+    @apply text-sm opacity-90;
+  }
+
+  [data-slot="toast-close"] {
+    @apply absolute right-2 top-2 rounded-md p-1 opacity-60 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none;
+  }
+}
diff --git a/priv/styles/vega/switch.css b/priv/styles/vega/switch.css
new file mode 100644
index 0000000..af52df1
--- /dev/null
+++ b/priv/styles/vega/switch.css
@@ -0,0 +1,9 @@
+@layer components {
+  [data-slot="switch"] {
+    @apply relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];
+  }
+
+  [data-slot="switch-thumb"] {
+    @apply pointer-events-none block ring-0 transition-transform bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0;
+  }
+}
diff --git a/priv/styles/vega/table.css b/priv/styles/vega/table.css
new file mode 100644
index 0000000..d7c760f
--- /dev/null
+++ b/priv/styles/vega/table.css
@@ -0,0 +1,37 @@
+@layer components {
+  [data-slot="table-container"] {
+    @apply relative w-full overflow-x-auto;
+  }
+
+  [data-slot="table"] {
+    @apply w-full caption-bottom text-sm;
+  }
+
+  [data-slot="table-header"] {
+    @apply [&_tr]:border-b;
+  }
+
+  [data-slot="table-body"] {
+    @apply [&_tr:last-child]:border-0;
+  }
+
+  [data-slot="table-footer"] {
+    @apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;
+  }
+
+  [data-slot="table-row"] {
+    @apply hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50;
+  }
+
+  [data-slot="table-head"] {
+    @apply text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0;
+  }
+
+  [data-slot="table-cell"] {
+    @apply p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0;
+  }
+
+  [data-slot="table-caption"] {
+    @apply text-muted-foreground mt-4 text-sm;
+  }
+}
diff --git a/priv/styles/vega/tabs.css b/priv/styles/vega/tabs.css
new file mode 100644
index 0000000..af3cb28
--- /dev/null
+++ b/priv/styles/vega/tabs.css
@@ -0,0 +1,17 @@
+@layer components {
+  [data-slot="tabs"] {
+    @apply flex flex-col gap-2;
+  }
+
+  [data-slot="tabs-list"] {
+    @apply inline-flex w-fit items-center justify-center text-muted-foreground bg-muted rounded-lg p-[3px] h-9;
+  }
+
+  [data-slot="tabs-trigger"] {
+    @apply relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="tabs-content"] {
+    @apply flex-1 outline-none text-sm;
+  }
+}
diff --git a/priv/styles/vega/textarea.css b/priv/styles/vega/textarea.css
new file mode 100644
index 0000000..a557ee4
--- /dev/null
+++ b/priv/styles/vega/textarea.css
@@ -0,0 +1,5 @@
+@layer components {
+  [data-slot="textarea"] {
+    @apply flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;
+  }
+}
diff --git a/priv/styles/vega/toggle.css b/priv/styles/vega/toggle.css
new file mode 100644
index 0000000..b0bedf7
--- /dev/null
+++ b/priv/styles/vega/toggle.css
@@ -0,0 +1,25 @@
+@layer components {
+  [data-slot="toggle"] {
+    @apply inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  [data-slot="toggle"][data-variant="default"] {
+    @apply bg-transparent;
+  }
+
+  [data-slot="toggle"][data-variant="outline"] {
+    @apply border-input hover:bg-muted border bg-transparent shadow-xs;
+  }
+
+  [data-slot="toggle"][data-size="default"] {
+    @apply h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+
+  [data-slot="toggle"][data-size="sm"] {
+    @apply h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5;
+  }
+
+  [data-slot="toggle"][data-size="lg"] {
+    @apply h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+}
diff --git a/priv/styles/vega/toggle_group.css b/priv/styles/vega/toggle_group.css
new file mode 100644
index 0000000..1db01ff
--- /dev/null
+++ b/priv/styles/vega/toggle_group.css
@@ -0,0 +1,29 @@
+@layer components {
+  [data-slot="toggle-group"] {
+    @apply flex w-fit flex-row items-center rounded-md;
+  }
+
+  [data-slot="toggle-group-item"] {
+    @apply inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 shrink-0 focus:z-10 focus-visible:z-10 data-[state=on]:bg-muted;
+  }
+
+  [data-slot="toggle-group-item"][data-variant="default"] {
+    @apply bg-transparent;
+  }
+
+  [data-slot="toggle-group-item"][data-variant="outline"] {
+    @apply border-input hover:bg-muted border bg-transparent shadow-xs;
+  }
+
+  [data-slot="toggle-group-item"][data-size="default"] {
+    @apply h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+
+  [data-slot="toggle-group-item"][data-size="sm"] {
+    @apply h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5;
+  }
+
+  [data-slot="toggle-group-item"][data-size="lg"] {
+    @apply h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+}
diff --git a/priv/styles/vega/tooltip.css b/priv/styles/vega/tooltip.css
new file mode 100644
index 0000000..c8748eb
--- /dev/null
+++ b/priv/styles/vega/tooltip.css
@@ -0,0 +1,5 @@
+@layer components {
+  [data-slot="tooltip-content"] {
+    @apply z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) bg-foreground text-background data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 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 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm;
+  }
+}
diff --git a/test/mix/tasks/shadix_add_test.exs b/test/mix/tasks/shadix_add_test.exs
index 6de26bf..f9f133e 100644
--- a/test/mix/tasks/shadix_add_test.exs
+++ b/test/mix/tasks/shadix_add_test.exs
@@ -94,26 +94,29 @@ defmodule Mix.Tasks.Shadix.AddTest do
     test "resolves and writes all requested components", %{tmp_dir: tmp_dir} do
       Mix.Tasks.Shadix.Add.run(["card", "button", "--namespace", "Demo.UI", "--dir", tmp_dir])
 
-      assert File.exists?(Path.join(tmp_dir, "cn.ex"))
+      # card + button are colocated-css components; they pull in colocated_css, not cn.
+      assert File.exists?(Path.join(tmp_dir, "colocated_css.ex"))
       assert File.exists?(Path.join(tmp_dir, "button.ex"))
       assert File.exists?(Path.join(tmp_dir, "card.ex"))
 
       card_content = File.read!(Path.join(tmp_dir, "card.ex"))
       assert card_content =~ "Demo.UI.Card"
-      assert card_content =~ "import Demo.UI.Cn"
+      assert card_content =~ ":type={Demo.UI.ColocatedCSS}"
     end
   end
 
   describe "run/1 with checkbox component" do
-    test "add checkbox pulls in cn and form, rewriting all namespaces", %{tmp_dir: tmp_dir} do
+    test "add checkbox pulls in colocated_css and form, rewriting all namespaces", %{
+      tmp_dir: tmp_dir
+    } do
       Mix.Tasks.Shadix.Add.run(["checkbox", "--namespace", "Demo.UI", "--dir", tmp_dir])
-      assert File.exists?(Path.join(tmp_dir, "cn.ex"))
+      assert File.exists?(Path.join(tmp_dir, "colocated_css.ex"))
       assert File.exists?(Path.join(tmp_dir, "form.ex"))
       assert File.exists?(Path.join(tmp_dir, "checkbox.ex"))
       checkbox = File.read!(Path.join(tmp_dir, "checkbox.ex"))
       assert checkbox =~ "Demo.UI.Checkbox"
       assert checkbox =~ "import Demo.UI.Form"
-      assert checkbox =~ "import Demo.UI.Cn"
+      assert checkbox =~ ":type={Demo.UI.ColocatedCSS}"
       refute checkbox =~ "Shadix."
     end
   end
@@ -133,11 +136,11 @@ defmodule Mix.Tasks.Shadix.AddTest do
       ])
 
       dialog_path = Path.join(tmp_dir, "dialog.ex")
-      cn_path = Path.join(tmp_dir, "cn.ex")
+      colocated_path = Path.join(tmp_dir, "colocated_css.ex")
       hook_path = Path.join(hooks_dir, "dialog.ts")
 
       assert File.exists?(dialog_path)
-      assert File.exists?(cn_path)
+      assert File.exists?(colocated_path)
       assert File.exists?(hook_path)
 
       dialog_content = File.read!(dialog_path)
@@ -180,7 +183,7 @@ defmodule Mix.Tasks.Shadix.AddTest do
         |> Enum.join("\n")
 
       assert File.exists?(Path.join(tmp_dir, "dropdown_menu.ex"))
-      assert File.exists?(Path.join(tmp_dir, "cn.ex"))
+      assert File.exists?(Path.join(tmp_dir, "colocated_css.ex"))
       assert File.exists?(Path.join(hooks_dir, "dropdown_menu.ts"))
 
       dropdown_content = File.read!(Path.join(tmp_dir, "dropdown_menu.ex"))
diff --git a/test/mix/tasks/shadix_gen_registry_test.exs b/test/mix/tasks/shadix_gen_registry_test.exs
index 051f8f7..776e93d 100644
--- a/test/mix/tasks/shadix_gen_registry_test.exs
+++ b/test/mix/tasks/shadix_gen_registry_test.exs
@@ -108,7 +108,7 @@ defmodule Mix.Tasks.Shadix.Gen.RegistryTest do
       Path.join(tmp_dir, "dropdown_menu.json") |> File.read!() |> Jason.decode!()
 
     assert manifest["name"] == "dropdown_menu"
-    assert manifest["registry_deps"] == ["cn"]
+    assert manifest["registry_deps"] == ["colocated_css"]
     assert manifest["npm_deps"] == ["@floating-ui/dom"]
 
     [hook] = manifest["hooks"]
diff --git a/test/shadix/components/accordion_test.exs b/test/shadix/components/accordion_test.exs
index 17c1b13..40ef8c7 100644
--- a/test/shadix/components/accordion_test.exs
+++ b/test/shadix/components/accordion_test.exs
@@ -68,8 +68,9 @@ defmodule Shadix.Components.AccordionTest do
     assert Floki.attribute(button, "data-state") == ["closed"]
     assert Floki.attribute(button, "phx-click") != []
 
-    # A chevron SVG is present for the rotate-on-open affordance.
-    assert Floki.find(button, "svg") != []
+    # A chevron SVG is present for the rotate-on-open affordance, carrying the
+    # trigger-icon data-slot the skin targets.
+    assert Floki.find(button, "svg[data-slot='accordion-trigger-icon']") != []
   end
 
   test "accordion_content is a collapsed, inert region wired to its trigger" do
@@ -88,14 +89,20 @@ defmodule Shadix.Components.AccordionTest do
     assert Floki.attribute(content, "aria-labelledby") == ["item-1-trigger"]
     assert Floki.attribute(content, "data-state") == ["closed"]
 
-    # Collapsed by default: starts as a zero-height grid row and is `inert` so it
-    # stays out of the tab order and a11y tree until opened. The CSS grid-rows
-    # transition (closed `0fr` → open `1fr`) drives the open/close animation.
+    # Collapsed by default: it is `inert` so it stays out of the tab order and the
+    # a11y tree until opened. The closed `0fr` → open `1fr` grid-rows transition
+    # that drives the open/close animation is load-bearing behavior and remains
+    # inline (shadix derives the height in CSS rather than via a Radix height var).
     assert Floki.attribute(content, "inert") != []
 
     class = Floki.attribute(content, "class") |> List.first() || ""
     assert class =~ "grid-rows-[0fr]"
     assert class =~ "data-[state=open]:grid-rows-[1fr]"
+
+    # The padded body carries its own data-slot for the colocated skin.
+    inner = Floki.find(content, "[data-slot='accordion-content-inner']")
+    assert inner != []
+    assert Floki.text(inner) =~ "Yes. It uses ARIA."
   end
 
   test "a full accordion composes item, trigger and content" do
diff --git a/test/shadix/components/alert_dialog_test.exs b/test/shadix/components/alert_dialog_test.exs
index 8e0ec94..633c70e 100644
--- a/test/shadix/components/alert_dialog_test.exs
+++ b/test/shadix/components/alert_dialog_test.exs
@@ -31,6 +31,12 @@ defmodule Shadix.Components.AlertDialogTest do
     # Escape closes via phx-window-keydown.
     assert Floki.attribute(content, "phx-key") == ["escape"]
 
+    # The content carries the group marker the colocated CSS targets, and stays
+    # hidden until opened via JS.
+    content_class = Floki.attribute(content, "class") |> hd()
+    assert content_class =~ "group/alert-dialog-content"
+    assert content_class =~ "hidden"
+
     # The hook lives on the root wrapper.
     assert Floki.attribute(doc, "#demo-root", "phx-hook") == ["ShadixAlertDialog"]
 
@@ -49,17 +55,28 @@ defmodule Shadix.Components.AlertDialogTest do
 
     html =
       rendered_to_string(~H"""
-      <AlertDialog.alert_dialog_header>
+      <AlertDialog.alert_dialog_header class="custom-header">
         <span>Head</span>
       </AlertDialog.alert_dialog_header>
-      <AlertDialog.alert_dialog_footer>
+      <AlertDialog.alert_dialog_footer class="custom-footer">
         <span>Foot</span>
       </AlertDialog.alert_dialog_footer>
       """)
 
     doc = parse(html)
-    assert Floki.find(doc, "[data-slot='alert-dialog-header']") != []
-    assert Floki.find(doc, "[data-slot='alert-dialog-footer']") != []
+
+    header = Floki.find(doc, "[data-slot='alert-dialog-header']")
+    footer = Floki.find(doc, "[data-slot='alert-dialog-footer']")
+    assert header != []
+    assert footer != []
+
+    # The caller's class is forwarded onto the slot element.
+    assert Floki.attribute(header, "class") == ["custom-header"]
+    assert Floki.attribute(footer, "class") == ["custom-footer"]
+
+    # Slot content renders inside.
+    assert Floki.text(header) =~ "Head"
+    assert Floki.text(footer) =~ "Foot"
   end
 
   test "alert_dialog_title renders an id derived from the dialog id" do
diff --git a/test/shadix/components/avatar_test.exs b/test/shadix/components/avatar_test.exs
index 57bf079..70dcb80 100644
--- a/test/shadix/components/avatar_test.exs
+++ b/test/shadix/components/avatar_test.exs
@@ -27,25 +27,6 @@ defmodule Shadix.Components.AvatarTest do
     assert Floki.find(wrapper, "[data-slot='avatar-fallback']") != []
   end
 
-  test "wrapper has the avatar sizing/shape classes" do
-    assigns = %{}
-
-    html =
-      rendered_to_string(~H"""
-      <Avatar.avatar>
-        <Avatar.avatar_image id="a" src="/x.png" />
-        <Avatar.avatar_fallback>X</Avatar.avatar_fallback>
-      </Avatar.avatar>
-      """)
-
-    class = parse(html) |> Floki.attribute("[data-slot='avatar']", "class") |> hd()
-    assert class =~ "relative"
-    assert class =~ "size-8"
-    assert class =~ "shrink-0"
-    assert class =~ "overflow-hidden"
-    assert class =~ "rounded-full"
-  end
-
   test "image carries the ShadixAvatar hook, id, src and alt" do
     assigns = %{}
 
@@ -61,7 +42,6 @@ defmodule Shadix.Components.AvatarTest do
     assert Floki.attribute(img, "id") == ["pic"]
     assert Floki.attribute(img, "src") == ["/avatar.png"]
     assert Floki.attribute(img, "alt") == ["Ada Lovelace"]
-    assert Floki.attribute(img, "class") == ["aspect-square size-full"]
   end
 
   test "fallback starts hidden so the image is shown until it fails to load" do
@@ -74,10 +54,6 @@ defmodule Shadix.Components.AvatarTest do
 
     class = parse(html) |> Floki.attribute("[data-slot='avatar-fallback']", "class") |> hd()
     assert class =~ "hidden"
-    assert class =~ "items-center"
-    assert class =~ "justify-center"
-    assert class =~ "rounded-full"
-    assert class =~ "bg-muted"
     assert parse(html) |> Floki.text() =~ "JD"
   end
 
@@ -93,7 +69,9 @@ defmodule Shadix.Components.AvatarTest do
       """)
 
     doc = parse(html)
-    assert parse(html) |> Floki.attribute("[data-slot='avatar']", "class") |> hd() =~ "ring-2"
+
+    wrapper_class = Floki.attribute(doc, "[data-slot='avatar']", "class") |> hd()
+    assert String.ends_with?(wrapper_class, "ring-2")
 
     img_class = Floki.attribute(doc, "[data-slot='avatar-image']", "class") |> hd()
     assert String.ends_with?(img_class, "grayscale")
diff --git a/test/shadix/components/card_test.exs b/test/shadix/components/card_test.exs
index fc2ba27..b985608 100644
--- a/test/shadix/components/card_test.exs
+++ b/test/shadix/components/card_test.exs
@@ -5,7 +5,7 @@ defmodule Shadix.Components.CardTest do
 
   defp parse(html), do: Floki.parse_fragment!(html)
 
-  test "card renders with data-slot and base classes" do
+  test "card renders with data-slot" do
     assigns = %{}
 
     html =
@@ -15,10 +15,7 @@ defmodule Shadix.Components.CardTest do
 
     doc = parse(html)
     assert Floki.attribute(doc, "div", "data-slot") == ["card"]
-    classes = Floki.attribute(doc, "div", "class") |> List.first()
-    assert classes =~ "rounded-xl"
-    assert classes =~ "bg-card"
-    assert classes =~ "shadow-sm"
+    assert Floki.text(doc) =~ "content"
   end
 
   test "subcomponents carry their own data-slot values" do
@@ -47,10 +44,28 @@ defmodule Shadix.Components.CardTest do
       """)
 
     classes = parse(html) |> Floki.attribute("div", "class") |> List.first()
-    assert classes =~ "rounded-xl"
     assert String.ends_with?(classes, "custom-class")
   end
 
+  test "card and card_header keep their non-@apply-able group/container markers" do
+    assigns = %{}
+
+    card =
+      rendered_to_string(~H"""
+      <Shadix.Components.Card.card>content</Shadix.Components.Card.card>
+      """)
+
+    header =
+      rendered_to_string(~H"""
+      <Shadix.Components.Card.card_header>h</Shadix.Components.Card.card_header>
+      """)
+
+    assert parse(card) |> Floki.attribute("div", "class") |> List.first() =~ "group/card"
+    header_class = parse(header) |> Floki.attribute("div", "class") |> List.first()
+    assert header_class =~ "group/card-header"
+    assert header_class =~ "@container/card-header"
+  end
+
   test "global attrs pass through" do
     assigns = %{}
 
diff --git a/test/shadix/components/carousel_test.exs b/test/shadix/components/carousel_test.exs
index 550e6a5..eda353d 100644
--- a/test/shadix/components/carousel_test.exs
+++ b/test/shadix/components/carousel_test.exs
@@ -41,11 +41,9 @@ defmodule Shadix.Components.CarouselTest do
     track = Floki.find(doc, "[data-slot='carousel-content']")
     assert track != []
     assert Floki.attribute(track, "data-carousel-content") != []
-
-    class = track |> Floki.attribute("class") |> List.first()
-    assert class =~ "overflow-x-auto"
-    assert class =~ "snap-x"
-    assert class =~ "snap-mandatory"
+    assert Floki.attribute(track, "role") == ["group"]
+    assert Floki.attribute(track, "aria-roledescription") == ["carousel slides"]
+    assert Floki.attribute(track, "tabindex") == ["0"]
   end
 
   test "carousel_item is a full-basis snapping slide" do
@@ -62,10 +60,30 @@ defmodule Shadix.Components.CarouselTest do
     assert item != []
     assert Floki.attribute(item, "role") == ["group"]
     assert Floki.attribute(item, "aria-roledescription") == ["slide"]
+    assert Floki.text(item) =~ "one"
+  end
+
+  test "components forward a caller class onto their data-slot element" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <Carousel.carousel id="demo" class="mine-root">
+        <Carousel.carousel_content class="mine-content">
+          <Carousel.carousel_item class="mine-item">x</Carousel.carousel_item>
+        </Carousel.carousel_content>
+        <Carousel.carousel_previous class="mine-prev" />
+        <Carousel.carousel_next class="mine-next" />
+      </Carousel.carousel>
+      """)
+
+    doc = parse(html)
 
-    class = item |> Floki.attribute("class") |> List.first()
-    assert class =~ "basis-full"
-    assert class =~ "snap-start"
+    assert Floki.find(doc, "[data-slot='carousel'].mine-root") != []
+    assert Floki.find(doc, "[data-slot='carousel-content'].mine-content") != []
+    assert Floki.find(doc, "[data-slot='carousel-item'].mine-item") != []
+    assert Floki.find(doc, "[data-slot='carousel-previous'].mine-prev") != []
+    assert Floki.find(doc, "[data-slot='carousel-next'].mine-next") != []
   end
 
   test "carousel_previous is a labelled round button marked for the hook" do
diff --git a/test/shadix/components/checkbox_test.exs b/test/shadix/components/checkbox_test.exs
index 5651f06..df880c5 100644
--- a/test/shadix/components/checkbox_test.exs
+++ b/test/shadix/components/checkbox_test.exs
@@ -32,6 +32,21 @@ defmodule Shadix.Components.CheckboxTest do
     assert Floki.attribute(doc, "input[type=checkbox]", "value") == ["true"]
   end
 
+  test "renders the check indicator overlay with its data-slot" do
+    assigns = %{f: field(value: true)}
+
+    html =
+      rendered_to_string(~H"""
+      <Shadix.Components.Checkbox.checkbox field={@f} />
+      """)
+
+    doc = parse(html)
+    assert Floki.attribute(doc, "svg", "data-slot") == ["checkbox-indicator"]
+    # The check mark is driven purely by CSS (peer-checked:visible), no JS.
+    [svg_class] = Floki.attribute(doc, "svg[data-slot=checkbox-indicator]", "class")
+    assert svg_class =~ "peer-checked:visible"
+  end
+
   test "emits a hidden false input before the checkbox" do
     assigns = %{f: field(value: false)}
 
@@ -100,6 +115,10 @@ defmodule Shadix.Components.CheckboxTest do
       """)
 
     [class] = Floki.attribute(parse(html), "input[type=checkbox]", "class")
+    # The caller class is appended last so the Tailwind cascade lets it win.
     assert String.ends_with?(class, "ml-2 my-custom")
+    # The `peer` marker (un-@apply-able; drives the indicator's peer-checked
+    # variant) stays inline on the element.
+    assert class =~ "peer"
   end
 end
diff --git a/test/shadix/components/combobox_test.exs b/test/shadix/components/combobox_test.exs
index a032e7f..46d71a4 100644
--- a/test/shadix/components/combobox_test.exs
+++ b/test/shadix/components/combobox_test.exs
@@ -79,6 +79,24 @@ defmodule Shadix.Components.ComboboxTest do
     assert Floki.text(item) =~ "Vue"
   end
 
+  test "forwards the caller class onto the trigger and item" do
+    assigns = %{field: field()}
+
+    html =
+      rendered_to_string(~H"""
+      <Combobox.combobox id="demo" field={@field} class="trigger-extra">
+        <Combobox.combobox_item value="vue" class="item-extra">Vue</Combobox.combobox_item>
+      </Combobox.combobox>
+      """)
+
+    doc = parse(html)
+
+    assert Floki.attribute(doc, "#demo-trigger", "class") == ["trigger-extra"]
+
+    item = Floki.find(doc, "[role='option']")
+    assert "item-extra" in (item |> Floki.attribute("class") |> List.first("") |> String.split())
+  end
+
   test "reflects the field value and renders an error message" do
     assigns = %{field: field("remix", [{"can't be blank", []}])}
 
diff --git a/test/shadix/components/command_test.exs b/test/shadix/components/command_test.exs
index 81e5034..7f4baaf 100644
--- a/test/shadix/components/command_test.exs
+++ b/test/shadix/components/command_test.exs
@@ -100,6 +100,8 @@ defmodule Shadix.Components.CommandTest do
     assert Floki.attribute(item, "data-slot") == ["command-item"]
     assert Floki.attribute(item, "data-value") == ["profile"]
     assert Floki.attribute(item, "phx-click") == ["select"]
+    # the group marker the command-shortcut CSS keys off must stay on the item
+    assert item |> Floki.attribute("class") |> hd() =~ "group/command-item"
   end
 
   test "command_empty is hidden by default via the hidden class" do
diff --git a/test/shadix/components/context_menu_test.exs b/test/shadix/components/context_menu_test.exs
index f815b33..3945d2f 100644
--- a/test/shadix/components/context_menu_test.exs
+++ b/test/shadix/components/context_menu_test.exs
@@ -45,7 +45,7 @@ defmodule Shadix.Components.ContextMenuTest do
     assert Floki.attribute(separator, "data-slot") == ["context-menu-separator"]
   end
 
-  test "content is hidden via the hidden class by default" do
+  test "content is hidden and pointer-positioned by default (behavioral markers)" do
     assigns = %{}
 
     html =
@@ -58,10 +58,38 @@ defmodule Shadix.Components.ContextMenuTest do
 
     doc = parse(html)
     classes = doc |> Floki.find("#demo-content") |> Floki.attribute("class") |> List.first()
+    # `hidden` is the initial state the JS hook toggles; `fixed`/`left-0`/`top-0`
+    # are load-bearing for pointer positioning, so they stay on the element.
     assert classes =~ "hidden"
     assert classes =~ "fixed"
   end
 
+  test "forwards caller classes and keeps the item group marker" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <ContextMenu.context_menu id="demo" class="my-content" trigger_class="my-trigger">
+        <:trigger>Area</:trigger>
+        <ContextMenu.context_menu_item id="demo" class="my-item">Item</ContextMenu.context_menu_item>
+      </ContextMenu.context_menu>
+      """)
+
+    doc = parse(html)
+
+    assert doc |> Floki.find("#demo-content") |> Floki.attribute("class") |> List.first() =~
+             "my-content"
+
+    assert doc |> Floki.find("#demo-trigger") |> Floki.attribute("class") |> List.first() =~
+             "my-trigger"
+
+    item_class =
+      doc |> Floki.find("[role='menuitem']") |> Floki.attribute("class") |> List.first()
+
+    assert item_class =~ "group/context-menu-item"
+    assert item_class =~ "my-item"
+  end
+
   test "context_menu_label renders the labelled slot" do
     assigns = %{}
 
diff --git a/test/shadix/components/dialog_test.exs b/test/shadix/components/dialog_test.exs
index 2592d77..c6c8c2a 100644
--- a/test/shadix/components/dialog_test.exs
+++ b/test/shadix/components/dialog_test.exs
@@ -30,12 +30,50 @@ defmodule Shadix.Components.DialogTest do
     # The hook lives on the root wrapper.
     assert Floki.attribute(doc, "#demo-root", "phx-hook") == ["ShadixDialog"]
 
-    # The overlay element exists.
-    assert Floki.find(doc, "#demo-overlay") != []
+    # The overlay element exists and carries its data-slot.
+    overlay = Floki.find(doc, "#demo-overlay")
+    assert overlay != []
+    assert Floki.attribute(overlay, "data-slot") == ["dialog-overlay"]
 
-    # The close button is labelled.
+    # The close button is labelled and carries its data-slot.
     close = Floki.find(doc, "button[aria-label='Close']")
     assert close != []
+    assert Floki.attribute(close, "data-slot") == ["dialog-close"]
+  end
+
+  test "forwards the caller class onto the content panel" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <Dialog.dialog id="demo" class="custom-class">
+        <:trigger>Open</:trigger>
+        <p>Body</p>
+      </Dialog.dialog>
+      """)
+
+    doc = parse(html)
+    content = Floki.find(doc, "[data-slot='dialog-content']")
+    assert "custom-class" in String.split(hd(Floki.attribute(content, "class")), " ")
+  end
+
+  test "header, footer, title, and description carry their data-slots" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <Dialog.dialog_header>
+        <Dialog.dialog_title id="x">Title</Dialog.dialog_title>
+        <Dialog.dialog_description id="x">Desc</Dialog.dialog_description>
+      </Dialog.dialog_header>
+      <Dialog.dialog_footer>Actions</Dialog.dialog_footer>
+      """)
+
+    doc = parse(html)
+    assert Floki.find(doc, "[data-slot='dialog-header']") != []
+    assert Floki.find(doc, "[data-slot='dialog-footer']") != []
+    assert Floki.find(doc, "[data-slot='dialog-title']") != []
+    assert Floki.find(doc, "[data-slot='dialog-description']") != []
   end
 
   test "dialog_title renders an id derived from the dialog id" do
diff --git a/test/shadix/components/drawer_test.exs b/test/shadix/components/drawer_test.exs
index a651dca..b2d1fc9 100644
--- a/test/shadix/components/drawer_test.exs
+++ b/test/shadix/components/drawer_test.exs
@@ -38,13 +38,10 @@ defmodule Shadix.Components.DrawerTest do
     # The grab handle is present near the top of the panel.
     handle = Floki.find(doc, "[data-slot='drawer-handle']")
     assert handle != []
-
-    assert Floki.attribute(handle, "class") == [
-             "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted"
-           ]
+    assert Floki.attribute(handle, "aria-hidden") == ["true"]
   end
 
-  test "content is fixed to the bottom edge with a slide-up panel" do
+  test "content starts hidden (JS toggles it open) and carries the content slot" do
     assigns = %{}
 
     html =
@@ -56,11 +53,16 @@ defmodule Shadix.Components.DrawerTest do
       """)
 
     doc = parse(html)
-    [class] = Floki.attribute(Floki.find(doc, "[data-slot='drawer-content']"), "class")
+    content = Floki.find(doc, "[data-slot='drawer-content']")
+    assert content != []
+
+    # The `hidden` toggle the JS show/hide commands rely on stays inline.
+    [class] = Floki.attribute(content, "class")
+    assert String.contains?(class, "hidden")
 
-    for cls <- ~w(fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-lg bg-background hidden) do
-      assert String.contains?(class, cls)
-    end
+    # The overlay also starts hidden.
+    [overlay_class] = Floki.attribute(Floki.find(doc, "#demo-overlay"), "class")
+    assert String.contains?(overlay_class, "hidden")
   end
 
   test "caller class is appended last on the content panel" do
diff --git a/test/shadix/components/dropdown_menu_test.exs b/test/shadix/components/dropdown_menu_test.exs
index 8b16357..10e550f 100644
--- a/test/shadix/components/dropdown_menu_test.exs
+++ b/test/shadix/components/dropdown_menu_test.exs
@@ -38,12 +38,29 @@ defmodule Shadix.Components.DropdownMenuTest do
     item = Floki.find(doc, "[role='menuitem']")
     assert item != []
     assert Floki.attribute(item, "data-slot") == ["dropdown-menu-item"]
+    # the group marker survives inline (drives the shortcut's group-focus styling)
+    assert Floki.attribute(item, "class") |> List.first() =~ "group/dropdown-menu-item"
 
     separator = Floki.find(doc, "[role='separator']")
     assert separator != []
     assert Floki.attribute(separator, "data-slot") == ["dropdown-menu-separator"]
   end
 
+  test "dropdown_menu_item forwards the caller class alongside the group marker" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <DropdownMenu.dropdown_menu_item id="demo" class="custom-item">Profile</DropdownMenu.dropdown_menu_item>
+      """)
+
+    doc = parse(html)
+    item = Floki.find(doc, "[role='menuitem']")
+    class = Floki.attribute(item, "class") |> List.first()
+    assert class =~ "group/dropdown-menu-item"
+    assert class =~ "custom-item"
+  end
+
   test "dropdown_menu_label renders the labelled slot" do
     assigns = %{}
 
diff --git a/test/shadix/components/input_otp_test.exs b/test/shadix/components/input_otp_test.exs
index c052c85..d903e14 100644
--- a/test/shadix/components/input_otp_test.exs
+++ b/test/shadix/components/input_otp_test.exs
@@ -44,7 +44,7 @@ defmodule Shadix.Components.InputOtpTest do
     assert length(slots) == 4
   end
 
-  test "slots carry numeric inputmode, maxlength, and shadcn styling" do
+  test "slots carry numeric inputmode, maxlength, and the slot data-slot" do
     assigns = %{}
 
     html =
@@ -55,10 +55,7 @@ defmodule Shadix.Components.InputOtpTest do
     doc = parse(html)
     assert Floki.attribute(doc, "[data-otp-index='0']", "inputmode") == ["numeric"]
     assert Floki.attribute(doc, "[data-otp-index='0']", "maxlength") == ["1"]
-    class = doc |> Floki.attribute("[data-otp-index='0']", "class") |> List.first()
-    assert class =~ "size-9"
-    assert class =~ "rounded-md"
-    assert class =~ "text-center"
+    assert Floki.attribute(doc, "[data-otp-index='0']", "data-slot") == ["input-otp-slot"]
   end
 
   test "each slot has an accessible label" do
@@ -97,7 +94,6 @@ defmodule Shadix.Components.InputOtpTest do
       """)
 
     class = parse(html) |> Floki.attribute("#otp", "class") |> List.first()
-    assert class =~ "flex"
-    assert String.ends_with?(class, "my-custom")
+    assert class =~ "my-custom"
   end
 end
diff --git a/test/shadix/components/input_test.exs b/test/shadix/components/input_test.exs
index 04f5f3a..7efa52a 100644
--- a/test/shadix/components/input_test.exs
+++ b/test/shadix/components/input_test.exs
@@ -16,7 +16,7 @@ defmodule Shadix.Components.InputTest do
     assert parse(html) |> Floki.attribute("input", "data-slot") == ["input"]
   end
 
-  test "defaults type to text and includes base classes" do
+  test "defaults type to text" do
     assigns = %{}
 
     html =
@@ -26,12 +26,10 @@ defmodule Shadix.Components.InputTest do
 
     doc = parse(html)
     assert Floki.attribute(doc, "input", "type") == ["text"]
-    class = doc |> Floki.attribute("input", "class") |> List.first()
-    assert class =~ "h-9"
-    assert class =~ "rounded-md"
+    assert Floki.attribute(doc, "input", "data-slot") == ["input"]
   end
 
-  test "caller class is appended last" do
+  test "caller class is forwarded onto the element" do
     assigns = %{}
 
     html =
@@ -41,7 +39,6 @@ defmodule Shadix.Components.InputTest do
 
     class = parse(html) |> Floki.attribute("input", "class") |> List.first()
     assert class =~ "custom-class"
-    assert String.ends_with?(class, "custom-class")
   end
 
   test "passes through global input attributes" do
diff --git a/test/shadix/components/menubar_test.exs b/test/shadix/components/menubar_test.exs
index c6a633c..719da17 100644
--- a/test/shadix/components/menubar_test.exs
+++ b/test/shadix/components/menubar_test.exs
@@ -29,6 +29,22 @@ defmodule Shadix.Components.MenubarTest do
     assert Floki.attribute(bar, "phx-hook") == ["ShadixMenubar"]
   end
 
+  test "menubar forwards a caller class onto the bar" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <Menubar.menubar id="app" class="custom-bar">
+        <Menubar.menubar_menu id="app-file" label="File">
+          <Menubar.menubar_item id="app-file">New</Menubar.menubar_item>
+        </Menubar.menubar_menu>
+      </Menubar.menubar>
+      """)
+
+    bar = Floki.find(parse(html), "#app")
+    assert "custom-bar" in (Floki.attribute(bar, "class") |> List.first() |> String.split(" "))
+  end
+
   test "menubar_menu renders a trigger button and a content menu wired together" do
     assigns = %{}
 
diff --git a/test/shadix/components/navigation_menu_test.exs b/test/shadix/components/navigation_menu_test.exs
index 7cb55b9..4fa12d0 100644
--- a/test/shadix/components/navigation_menu_test.exs
+++ b/test/shadix/components/navigation_menu_test.exs
@@ -46,7 +46,9 @@ defmodule Shadix.Components.NavigationMenuTest do
     assert Floki.attribute(trigger, "aria-controls") == ["docs-content"]
     assert Floki.attribute(trigger, "aria-expanded") == ["false"]
     assert Floki.attribute(trigger, "data-state") == ["closed"]
-    assert Floki.find(trigger, "svg") != []
+    icon = Floki.find(trigger, "svg")
+    assert icon != []
+    assert Floki.attribute(icon, "data-slot") == ["navigation-menu-trigger-icon"]
 
     content = Floki.find(doc, "#docs-content")
     assert content != []
@@ -72,6 +74,19 @@ defmodule Shadix.Components.NavigationMenuTest do
     assert Floki.text(link) =~ "About"
   end
 
+  test "forwards a caller class onto the element" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <NavigationMenu.navigation_menu_link href="/x" class="custom-class">x</NavigationMenu.navigation_menu_link>
+      """)
+
+    doc = parse(html)
+    link = Floki.find(doc, "a")
+    assert "custom-class" in String.split(hd(Floki.attribute(link, "class")))
+  end
+
   test "navigation_menu_list renders a ul with the list slot" do
     assigns = %{}
 
diff --git a/test/shadix/components/pagination_test.exs b/test/shadix/components/pagination_test.exs
index b1d971d..1e70b81 100644
--- a/test/shadix/components/pagination_test.exs
+++ b/test/shadix/components/pagination_test.exs
@@ -19,7 +19,31 @@ defmodule Shadix.Components.PaginationTest do
     assert Floki.attribute(tree, "nav", "aria-label") == ["pagination"]
   end
 
-  test "pagination_link active sets aria-current and outline classes" do
+  test "pagination_content renders ul with data-slot" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <Shadix.Components.Pagination.pagination_content>x</Shadix.Components.Pagination.pagination_content>
+      """)
+
+    tree = parse(html)
+    assert Floki.attribute(tree, "ul", "data-slot") == ["pagination-content"]
+  end
+
+  test "pagination_item renders li with data-slot" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <Shadix.Components.Pagination.pagination_item>x</Shadix.Components.Pagination.pagination_item>
+      """)
+
+    tree = parse(html)
+    assert Floki.attribute(tree, "li", "data-slot") == ["pagination-item"]
+  end
+
+  test "pagination_link active sets aria-current and data-active true" do
     assigns = %{}
 
     html =
@@ -31,11 +55,10 @@ defmodule Shadix.Components.PaginationTest do
     assert Floki.attribute(tree, "a", "data-slot") == ["pagination-link"]
     assert Floki.attribute(tree, "a", "aria-current") == ["page"]
     assert Floki.attribute(tree, "a", "data-active") == ["true"]
-    [class] = Floki.attribute(tree, "a", "class")
-    assert class =~ "border bg-background"
+    assert Floki.attribute(tree, "a", "data-size") == ["icon"]
   end
 
-  test "pagination_link inactive uses ghost variant and no aria-current" do
+  test "pagination_link inactive has data-active false and no aria-current" do
     assigns = %{}
 
     html =
@@ -46,9 +69,53 @@ defmodule Shadix.Components.PaginationTest do
     tree = parse(html)
     assert Floki.attribute(tree, "a", "aria-current") == []
     assert Floki.attribute(tree, "a", "data-active") == ["false"]
-    [class] = Floki.attribute(tree, "a", "class")
-    assert class =~ "hover:bg-accent"
-    refute class =~ "border bg-background"
+    assert Floki.attribute(tree, "a", "data-size") == ["icon"]
+  end
+
+  test "pagination_link forwards size as data-size" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <Shadix.Components.Pagination.pagination_link size="default">3</Shadix.Components.Pagination.pagination_link>
+      """)
+
+    tree = parse(html)
+    assert Floki.attribute(tree, "a", "data-size") == ["default"]
+  end
+
+  test "pagination_previous renders its data-slot with label and inline-start icon" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <Shadix.Components.Pagination.pagination_previous href="/p/1" />
+      """)
+
+    tree = parse(html)
+    assert Floki.attribute(tree, "a", "data-slot") == ["pagination-previous"]
+    assert Floki.attribute(tree, "a", "data-active") == ["false"]
+    assert Floki.attribute(tree, "a", "aria-label") == ["Go to previous page"]
+    assert Floki.attribute(tree, "a", "href") == ["/p/1"]
+    assert Floki.attribute(tree, "svg", "data-icon") == ["inline-start"]
+    assert Floki.text(tree) =~ "Previous"
+  end
+
+  test "pagination_next renders its data-slot with label and inline-end icon" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <Shadix.Components.Pagination.pagination_next href="/p/3" />
+      """)
+
+    tree = parse(html)
+    assert Floki.attribute(tree, "a", "data-slot") == ["pagination-next"]
+    assert Floki.attribute(tree, "a", "data-active") == ["false"]
+    assert Floki.attribute(tree, "a", "aria-label") == ["Go to next page"]
+    assert Floki.attribute(tree, "a", "href") == ["/p/3"]
+    assert Floki.attribute(tree, "svg", "data-icon") == ["inline-end"]
+    assert Floki.text(tree) =~ "Next"
   end
 
   test "caller class is appended last and global attrs pass through" do
diff --git a/test/shadix/components/popover_test.exs b/test/shadix/components/popover_test.exs
index bdc0342..2ad7194 100644
--- a/test/shadix/components/popover_test.exs
+++ b/test/shadix/components/popover_test.exs
@@ -45,6 +45,26 @@ defmodule Shadix.Components.PopoverTest do
            ]
   end
 
+  test "forwards a caller class onto the popover content element" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <Popover.popover id="demo" class="my-popover">
+        <:trigger>Open</:trigger>
+        Body
+      </Popover.popover>
+      """)
+
+    doc = parse(html)
+
+    assert "my-popover" in (doc
+                            |> Floki.find("#demo-content")
+                            |> Floki.attribute("class")
+                            |> List.first()
+                            |> String.split())
+  end
+
   test "popover_title renders the title slot" do
     assigns = %{}
 
diff --git a/test/shadix/components/progress_test.exs b/test/shadix/components/progress_test.exs
index 438dac9..3913703 100644
--- a/test/shadix/components/progress_test.exs
+++ b/test/shadix/components/progress_test.exs
@@ -72,8 +72,7 @@ defmodule Shadix.Components.ProgressTest do
 
     doc = parse(html)
     [class] = Floki.attribute(doc, "div[data-slot=progress]", "class")
-    assert String.contains?(class, "rounded-full")
-    assert String.ends_with?(class, "my-custom")
+    assert class == "my-custom"
     assert Floki.attribute(doc, "div[data-slot=progress]", "id") == ["bar"]
   end
 end
diff --git a/test/shadix/components/radio_group_test.exs b/test/shadix/components/radio_group_test.exs
index 20425cf..0e69646 100644
--- a/test/shadix/components/radio_group_test.exs
+++ b/test/shadix/components/radio_group_test.exs
@@ -16,7 +16,7 @@ defmodule Shadix.Components.RadioGroupTest do
     }
   end
 
-  test "container renders role=radiogroup, data-slot and grid classes" do
+  test "container renders role=radiogroup, data-slot and wraps its items" do
     assigns = %{f: field()}
 
     html =
@@ -29,9 +29,7 @@ defmodule Shadix.Components.RadioGroupTest do
     doc = parse(html)
     assert Floki.attribute(doc, "div", "role") == ["radiogroup"]
     assert Floki.attribute(doc, "div", "data-slot") == ["radio-group"]
-    [class] = Floki.attribute(doc, "div", "class")
-    assert class =~ "grid"
-    assert class =~ "gap-3"
+    assert Floki.attribute(doc, "div input[type=radio]", "data-slot") == ["radio-group-item"]
   end
 
   test "item renders native radio input with data-slot and field name" do
diff --git a/test/shadix/components/resizable_test.exs b/test/shadix/components/resizable_test.exs
index 57f1aae..70cbbc1 100644
--- a/test/shadix/components/resizable_test.exs
+++ b/test/shadix/components/resizable_test.exs
@@ -24,12 +24,11 @@ defmodule Shadix.Components.ResizableTest do
 
     group = Floki.find(doc, "#grp")
     assert Floki.attribute(group, "data-slot") == ["resizable"]
+    # the axis is driven by data-direction (styling lives in the colocated CSS)
     assert Floki.attribute(group, "data-direction") == ["horizontal"]
-    # horizontal groups are a plain row (no flex-col)
-    refute Floki.attribute(group, "class") |> List.first() =~ "flex-col"
   end
 
-  test "resizable vertical group adds flex-col and direction" do
+  test "resizable vertical group sets data-direction" do
     assigns = %{}
 
     html =
@@ -43,8 +42,8 @@ defmodule Shadix.Components.ResizableTest do
 
     doc = parse(html)
     group = Floki.find(doc, "#grp")
+    # the vertical axis is selected by data-direction (CSS applies flex-col)
     assert Floki.attribute(group, "data-direction") == ["vertical"]
-    assert Floki.attribute(group, "class") |> List.first() =~ "flex-col"
   end
 
   test "resizable_panel carries data-slot and a flex-basis style" do
diff --git a/test/shadix/components/scroll_area_test.exs b/test/shadix/components/scroll_area_test.exs
index 0d5fbf9..b944204 100644
--- a/test/shadix/components/scroll_area_test.exs
+++ b/test/shadix/components/scroll_area_test.exs
@@ -32,7 +32,7 @@ defmodule Shadix.Components.ScrollAreaTest do
     assert html =~ "Scrollable content"
   end
 
-  test "wrapper clips overflow and viewport scrolls with styled native scrollbars" do
+  test "viewport is focusable so it can be scrolled by keyboard" do
     assigns = %{}
 
     html =
@@ -41,16 +41,7 @@ defmodule Shadix.Components.ScrollAreaTest do
       """)
 
     doc = parse(html)
-
-    [wrapper_class] = Floki.attribute(doc, "[data-slot='scroll-area']", "class")
-    assert wrapper_class =~ "relative"
-    assert wrapper_class =~ "overflow-hidden"
-
-    [viewport_class] = Floki.attribute(doc, "[data-slot='scroll-area-viewport']", "class")
-    assert viewport_class =~ "overflow-auto"
-    assert viewport_class =~ "size-full"
-    assert viewport_class =~ "[scrollbar-width:thin]"
-    assert viewport_class =~ "[&::-webkit-scrollbar-thumb]:bg-border"
+    assert Floki.attribute(doc, "[data-slot='scroll-area-viewport']", "tabindex") == ["0"]
   end
 
   test "appends the caller class last on the wrapper" do
diff --git a/test/shadix/components/select_test.exs b/test/shadix/components/select_test.exs
index 950cea8..18eda33 100644
--- a/test/shadix/components/select_test.exs
+++ b/test/shadix/components/select_test.exs
@@ -46,6 +46,7 @@ defmodule Shadix.Components.SelectTest do
     assert Floki.attribute(doc, btn, "aria-expanded") == ["false"]
     assert Floki.attribute(doc, btn, "aria-controls") == ["country-content"]
     assert Floki.attribute(doc, btn, "id") == ["country-trigger"]
+    assert Floki.attribute(doc, btn, "data-size") == ["default"]
   end
 
   test "shows the placeholder in the trigger value slot when there is no value" do
@@ -96,6 +97,8 @@ defmodule Shadix.Components.SelectTest do
     assert Floki.attribute(items, "data-value") == ["us", "ca"]
     assert Floki.attribute(items, "aria-selected") == ["false", "false"]
     assert Floki.text(Enum.at(items, 0)) =~ "United States"
+    # each item carries its check indicator slot
+    assert length(Floki.find(items, "[data-slot=select-item-indicator]")) == 2
   end
 
   test "renders an error message when the field has errors" do
diff --git a/test/shadix/components/sheet_test.exs b/test/shadix/components/sheet_test.exs
index f128267..d67d5e1 100644
--- a/test/shadix/components/sheet_test.exs
+++ b/test/shadix/components/sheet_test.exs
@@ -35,8 +35,9 @@ defmodule Shadix.Components.SheetTest do
     # The hook lives on the root wrapper.
     assert Floki.attribute(doc, "#demo-root", "phx-hook") == ["ShadixSheet"]
 
-    # The overlay element exists.
+    # The overlay element exists and carries its data-slot.
     assert Floki.find(doc, "#demo-overlay") != []
+    assert Floki.attribute(doc, "#demo-overlay", "data-slot") == ["sheet-overlay"]
 
     # The X close button is present and labelled.
     close = Floki.find(doc, "[data-slot='sheet-close']")
@@ -60,6 +61,26 @@ defmodule Shadix.Components.SheetTest do
     assert Floki.attribute(content, "data-side") == ["left"]
   end
 
+  test "caller class is forwarded onto the content panel" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <Sheet.sheet id="demo" class="custom-content">
+        <:trigger>Open</:trigger>
+        <p>Body</p>
+      </Sheet.sheet>
+      """)
+
+    doc = parse(html)
+    content = Floki.find(doc, "[data-slot='sheet-content']")
+
+    assert "custom-content" in (content
+                                |> Floki.attribute("class")
+                                |> List.first()
+                                |> String.split())
+  end
+
   test "sheet_header and sheet_footer carry their data-slots" do
     assigns = %{}
 
diff --git a/test/shadix/components/sidebar_test.exs b/test/shadix/components/sidebar_test.exs
index 044864a..125f88e 100644
--- a/test/shadix/components/sidebar_test.exs
+++ b/test/shadix/components/sidebar_test.exs
@@ -25,27 +25,27 @@ defmodule Shadix.Components.SidebarTest do
     assert Floki.attribute(provider, "data-slot") == ["sidebar-provider"]
     assert Floki.attribute(provider, "phx-hook") == ["ShadixSidebar"]
     assert Floki.attribute(provider, "data-state") == ["expanded"]
+    # The Tailwind group marker is kept inline so descendants can react in CSS.
     assert ["group/sidebar" <> _] = Floki.attribute(provider, "class")
   end
 
-  test "sidebar is an aside with width transition classes" do
+  test "sidebar is an aside carrying the sidebar data-slot" do
     assigns = %{}
 
     html =
       rendered_to_string(~H"""
-      <Sidebar.sidebar>nav</Sidebar.sidebar>
+      <Sidebar.sidebar class="extra">nav</Sidebar.sidebar>
       """)
 
     doc = parse(html)
     aside = Floki.find(doc, "aside[data-slot='sidebar']")
 
     assert aside != []
+    assert Floki.attribute(aside, "data-slot") == ["sidebar"]
+    assert Floki.text(aside) =~ "nav"
+    # Caller-provided class is forwarded onto the element.
     [class] = Floki.attribute(aside, "class")
-    assert class =~ "w-64"
-    assert class =~ "group-data-[state=collapsed]/sidebar:w-0"
-    assert class =~ "bg-sidebar"
-    assert class =~ "text-sidebar-foreground"
-    assert class =~ "border-r"
+    assert class =~ "extra"
   end
 
   test "trigger is a button carrying the trigger data-slot and a default icon" do
diff --git a/test/shadix/components/slider_test.exs b/test/shadix/components/slider_test.exs
index 8018e51..9536f49 100644
--- a/test/shadix/components/slider_test.exs
+++ b/test/shadix/components/slider_test.exs
@@ -104,6 +104,6 @@ defmodule Shadix.Components.SliderTest do
 
     doc = parse(html)
     [class] = Floki.attribute(doc, "input[type=range]", "class")
-    assert String.ends_with?(class, "my-custom-class")
+    assert class =~ "my-custom-class"
   end
 end
diff --git a/test/shadix/components/sonner_test.exs b/test/shadix/components/sonner_test.exs
index 95e902d..6b01531 100644
--- a/test/shadix/components/sonner_test.exs
+++ b/test/shadix/components/sonner_test.exs
@@ -34,11 +34,9 @@ defmodule Shadix.Components.SonnerTest do
       end
     end
 
-    test "error toast uses high-contrast white text, not the dark-mode destructive-foreground" do
+    test "error toast carries its data-variant (styling lives in colocated CSS)" do
       doc = parse(render_basic_toast(%{id: "t", variant: "error", title: "T", message: "M"}))
-      [class] = Floki.attribute(Floki.find(doc, "#t"), "class")
-      assert class =~ "text-white"
-      refute class =~ "text-destructive-foreground"
+      assert Floki.attribute(Floki.find(doc, "#t"), "data-variant") == ["error"]
     end
 
     test "title and description are linked via aria-labelledby/describedby" do
@@ -69,10 +67,23 @@ defmodule Shadix.Components.SonnerTest do
       assert Floki.attribute(Floki.find(close, "svg"), "aria-hidden") == ["true"]
     end
 
-    test "respects reduced motion" do
+    test "exposes data-state for CSS-driven enter/exit animation" do
       doc = parse(render_basic_toast(%{id: "t5", variant: "default", title: "T", message: "M"}))
-      [class] = Floki.attribute(Floki.find(doc, "#t5"), "class")
-      assert class =~ "motion-reduce:transition-none"
+      assert Floki.attribute(Floki.find(doc, "#t5"), "data-state") == ["closed"]
+    end
+
+    test "forwards a caller-supplied class onto the toast element" do
+      assigns = %{}
+
+      doc =
+        parse(
+          rendered_to_string(~H"""
+          <Sonner.toast id="t6" variant="default" title="T" message="M" class="my-custom" />
+          """)
+        )
+
+      [class] = Floki.attribute(Floki.find(doc, "#t6"), "class")
+      assert class =~ "my-custom"
     end
   end
 
diff --git a/test/shadix/components/table_test.exs b/test/shadix/components/table_test.exs
index fef4b70..d097925 100644
--- a/test/shadix/components/table_test.exs
+++ b/test/shadix/components/table_test.exs
@@ -28,7 +28,7 @@ defmodule Shadix.Components.TableTest do
     assert Floki.attribute(doc, "td", "data-slot") == ["table-cell"]
   end
 
-  test "header, footer, head and caption carry verbatim base classes and data-slots" do
+  test "header, footer, head, row and caption carry their data-slots" do
     assigns = %{}
 
     html =
@@ -52,14 +52,14 @@ defmodule Shadix.Components.TableTest do
     assert Floki.attribute(doc, "thead", "data-slot") == ["table-header"]
     assert Floki.attribute(doc, "tfoot", "data-slot") == ["table-footer"]
     assert Floki.attribute(doc, "caption", "data-slot") == ["table-caption"]
-    assert Floki.attribute(doc, "thead", "class") == ["[&_tr]:border-b"]
-    assert Floki.attribute(doc, "caption", "class") == ["mt-4 text-sm text-muted-foreground"]
-
-    [head_class] = Floki.attribute(doc, "th", "class")
-    assert String.contains?(head_class, "h-10 px-2 text-left align-middle font-medium")
+    assert Floki.attribute(doc, "tr", "data-slot") == ["table-row", "table-row"]
+    assert Floki.attribute(doc, "th", "data-slot") == ["table-head"]
+    assert Floki.text(doc) =~ "cap"
+    assert Floki.text(doc) =~ "head"
+    assert Floki.text(doc) =~ "foot"
   end
 
-  test "caller class is appended last" do
+  test "caller class is forwarded onto the element" do
     assigns = %{}
 
     html =
@@ -68,7 +68,7 @@ defmodule Shadix.Components.TableTest do
       """)
 
     [class] = parse(html) |> Floki.attribute("table", "class")
-    assert class == "w-full caption-bottom text-sm my-table"
+    assert class == "my-table"
   end
 
   test "global attrs pass through" do
diff --git a/test/shadix/components/tabs_test.exs b/test/shadix/components/tabs_test.exs
index d1b2a15..92adeff 100644
--- a/test/shadix/components/tabs_test.exs
+++ b/test/shadix/components/tabs_test.exs
@@ -83,4 +83,43 @@ defmodule Shadix.Components.TabsTest do
 
     assert ids == ["t"]
   end
+
+  test "caller class is forwarded onto each slot element" do
+    assigns = %{}
+
+    doc =
+      parse(
+        rendered_to_string(~H"""
+        <Tabs.tabs id="t" default="account" class="root-x">
+          <Tabs.tabs_list id="t" class="list-x">
+            <Tabs.tabs_trigger id="t" value="account" default="account" class="trigger-x">
+              Account
+            </Tabs.tabs_trigger>
+          </Tabs.tabs_list>
+          <Tabs.tabs_content id="t" value="account" default="account" class="content-x">
+            Account panel
+          </Tabs.tabs_content>
+        </Tabs.tabs>
+        """)
+      )
+
+    assert doc |> Floki.find("[data-slot='tabs']") |> Floki.attribute("class") |> List.first() =~
+             "root-x"
+
+    assert doc
+           |> Floki.find("[data-slot='tabs-list']")
+           |> Floki.attribute("class")
+           |> List.first() =~
+             "list-x"
+
+    assert doc
+           |> Floki.find("[data-slot='tabs-trigger']")
+           |> Floki.attribute("class")
+           |> List.first() =~ "trigger-x"
+
+    assert doc
+           |> Floki.find("[data-slot='tabs-content']")
+           |> Floki.attribute("class")
+           |> List.first() =~ "content-x"
+  end
 end
diff --git a/test/shadix/components/textarea_test.exs b/test/shadix/components/textarea_test.exs
index e16a720..3c97ccc 100644
--- a/test/shadix/components/textarea_test.exs
+++ b/test/shadix/components/textarea_test.exs
@@ -16,20 +16,6 @@ defmodule Shadix.Components.TextareaTest do
     assert parse(html) |> Floki.attribute("textarea", "data-slot") == ["textarea"]
   end
 
-  test "renders base classes" do
-    assigns = %{}
-
-    html =
-      rendered_to_string(~H"""
-      <Shadix.Components.Textarea.textarea />
-      """)
-
-    [class] = parse(html) |> Floki.attribute("textarea", "class")
-    assert class =~ "field-sizing-content"
-    assert class =~ "min-h-16"
-    assert class =~ "w-full"
-  end
-
   test "appends caller class last" do
     assigns = %{}
 
diff --git a/test/shadix/components/toggle_group_test.exs b/test/shadix/components/toggle_group_test.exs
index f50832d..7fac3df 100644
--- a/test/shadix/components/toggle_group_test.exs
+++ b/test/shadix/components/toggle_group_test.exs
@@ -20,6 +20,10 @@ defmodule Shadix.Components.ToggleGroupTest do
     assert Floki.attribute(doc, "#tg", "data-slot") == ["toggle-group"]
     assert Floki.attribute(doc, "#tg", "phx-hook") == ["ShadixToggleGroup"]
     assert Floki.attribute(doc, "#tg", "data-type") == ["single"]
+    assert Floki.attribute(doc, "#tg", "data-variant") == ["default"]
+    assert Floki.attribute(doc, "#tg", "data-size") == ["default"]
+    [class] = Floki.attribute(doc, "#tg", "class")
+    assert class =~ "group/toggle-group"
   end
 
   test "group data-type can be multiple" do
@@ -52,7 +56,7 @@ defmodule Shadix.Components.ToggleGroupTest do
     assert Floki.attribute(doc, "button", "data-state") == ["off"]
   end
 
-  test "item reuses toggle classes keyed off data-state=on" do
+  test "item carries default variant and size data attrs" do
     assigns = %{}
 
     html =
@@ -61,12 +65,11 @@ defmodule Shadix.Components.ToggleGroupTest do
       """)
 
     doc = parse(html)
-    [class] = Floki.attribute(doc, "button", "class")
-    assert class =~ "data-[state=on]:bg-accent"
-    assert class =~ "inline-flex"
+    assert Floki.attribute(doc, "button", "data-variant") == ["default"]
+    assert Floki.attribute(doc, "button", "data-size") == ["default"]
   end
 
-  test "item variant and size emit data attrs and classes" do
+  test "item variant and size emit data attrs" do
     assigns = %{}
 
     html =
@@ -77,9 +80,6 @@ defmodule Shadix.Components.ToggleGroupTest do
     doc = parse(html)
     assert Floki.attribute(doc, "button", "data-variant") == ["outline"]
     assert Floki.attribute(doc, "button", "data-size") == ["lg"]
-    [class] = Floki.attribute(doc, "button", "class")
-    assert class =~ "border-input"
-    assert class =~ "h-10"
   end
 
   test "caller class is appended last on item" do
diff --git a/test/shadix/components/toggle_test.exs b/test/shadix/components/toggle_test.exs
index e11d88d..ca89065 100644
--- a/test/shadix/components/toggle_test.exs
+++ b/test/shadix/components/toggle_test.exs
@@ -35,7 +35,7 @@ defmodule Shadix.Components.ToggleTest do
     assert Floki.attribute(doc, "button", "data-state") == ["on"]
   end
 
-  test "default variant and size classes are applied" do
+  test "default variant and size are reflected on data attributes" do
     assigns = %{}
 
     html =
@@ -44,13 +44,11 @@ defmodule Shadix.Components.ToggleTest do
       """)
 
     doc = parse(html)
-    [class] = Floki.attribute(doc, "button", "class")
-    assert class =~ "bg-transparent"
-    assert class =~ "h-9"
-    assert class =~ "data-[state=on]:bg-accent"
+    assert Floki.attribute(doc, "button", "data-variant") == ["default"]
+    assert Floki.attribute(doc, "button", "data-size") == ["default"]
   end
 
-  test "outline variant and lg size classes are applied" do
+  test "outline variant and lg size are reflected on data attributes" do
     assigns = %{}
 
     html =
@@ -59,9 +57,8 @@ defmodule Shadix.Components.ToggleTest do
       """)
 
     doc = parse(html)
-    [class] = Floki.attribute(doc, "button", "class")
-    assert class =~ "border-input"
-    assert class =~ "h-10"
+    assert Floki.attribute(doc, "button", "data-variant") == ["outline"]
+    assert Floki.attribute(doc, "button", "data-size") == ["lg"]
   end
 
   test "appends caller class last" do
diff --git a/test/shadix/components/tooltip_test.exs b/test/shadix/components/tooltip_test.exs
index a4fc88c..d26d8de 100644
--- a/test/shadix/components/tooltip_test.exs
+++ b/test/shadix/components/tooltip_test.exs
@@ -34,6 +34,22 @@ defmodule Shadix.Components.TooltipTest do
     assert Floki.attribute(content, "data-slot") == ["tooltip-content"]
   end
 
+  test "forwards the caller class onto the content element" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <Tooltip.tooltip id="demo" class="custom-tooltip">
+        <:trigger>Hover me</:trigger>
+        Tooltip text
+      </Tooltip.tooltip>
+      """)
+
+    doc = parse(html)
+    [class] = Floki.attribute(Floki.find(doc, "#demo-content"), "class")
+    assert class =~ "custom-tooltip"
+  end
+
   test "show/hide builders target the content element" do
     assigns = %{}
 
diff --git a/test/shadix/registry_test.exs b/test/shadix/registry_test.exs
index d0aa086..311f3e7 100644
--- a/test/shadix/registry_test.exs
+++ b/test/shadix/registry_test.exs
@@ -43,17 +43,16 @@ defmodule Shadix.RegistryTest do
       assert names == ["cn"]
     end
 
-    test "resolve a list deduplicates cn" do
+    test "resolve a list deduplicates a shared dependency" do
+      # card and button both depend on colocated_css; it must appear once, first.
       manifests = Registry.resolve(["card", "button"])
       names = Enum.map(manifests, & &1["name"])
-      # cn appears exactly once
-      assert Enum.count(names, &(&1 == "cn")) == 1
-      # cn comes before both card and button
-      cn_idx = Enum.find_index(names, &(&1 == "cn"))
+      assert Enum.count(names, &(&1 == "colocated_css")) == 1
+      dep_idx = Enum.find_index(names, &(&1 == "colocated_css"))
       card_idx = Enum.find_index(names, &(&1 == "card"))
       button_idx = Enum.find_index(names, &(&1 == "button"))
-      assert cn_idx < card_idx
-      assert cn_idx < button_idx
+      assert dep_idx < card_idx
+      assert dep_idx < button_idx
     end
 
     test "resolve list with duplicates deduplicates the components too" do
-- 
2.51.2


From e864781198e0026711e42d663df3c871e187ba38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <git@btao.org>
Date: Sat, 20 Jun 2026 01:28:11 +0100
Subject: [PATCH 09/12] feat(shadix.init): install colocated_css, write :shadix
 config, colocated Tailwind wiring

--style flag; appends an idempotent config :shadix block (path overridable via
--config); prints the phoenix-colocated @import + @source wiring for LV 1.2.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 lib/mix/tasks/shadix.init.ex        | 60 +++++++++++++++---
 test/mix/tasks/shadix_init_test.exs | 94 ++++++++++++++---------------
 2 files changed, 97 insertions(+), 57 deletions(-)

diff --git a/lib/mix/tasks/shadix.init.ex b/lib/mix/tasks/shadix.init.ex
index f4ada18..8799d7c 100644
--- a/lib/mix/tasks/shadix.init.ex
+++ b/lib/mix/tasks/shadix.init.ex
@@ -31,11 +31,19 @@ defmodule Mix.Tasks.Shadix.Init do
   def run(args) do
     {opts, _rest, _invalid} =
       OptionParser.parse(args,
-        strict: [assets_dir: :string, namespace: :string, dir: :string, force: :boolean]
+        strict: [
+          assets_dir: :string,
+          namespace: :string,
+          dir: :string,
+          force: :boolean,
+          style: :string,
+          config: :string
+        ]
       )
 
-    namespace = Keyword.get(opts, :namespace) || Shadix.Generator.default_namespace()
-    dir = Keyword.get(opts, :dir) || Shadix.Generator.default_dir(namespace)
+    namespace = Shadix.Generator.configured_namespace(opts)
+    dir = Shadix.Generator.configured_dir(opts, namespace)
+    style = Shadix.Generator.configured_style(opts)
     assets_dir = Keyword.get(opts, :assets_dir, "assets/css")
     force = Keyword.get(opts, :force, false)
 
@@ -53,22 +61,58 @@ defmodule Mix.Tasks.Shadix.Init do
       Mix.shell().info("  write #{theme_dest}")
     end
 
-    # 2. Install cn helper via shadix.add
+    # 2. Install cn + colocated_css helpers via shadix.add
     Mix.Tasks.Shadix.Add.run(
-      ["cn", "--namespace", namespace, "--dir", dir] ++
+      ["cn", "colocated_css", "--namespace", namespace, "--dir", dir] ++
         if(force, do: ["--force"], else: [])
     )
 
+    # 2b. Persist config so later `mix shadix.add` is consistent (style/namespace/dir)
+    config_path = Keyword.get(opts, :config, "config/config.exs")
+    write_config(config_path, style, namespace, dir)
+
     # 3. Print Tailwind wiring instructions
+    app = Mix.Project.config()[:app]
+
     Mix.shell().info("""
 
-    Shadix initialised! Add this import to your app.css (or app entry):
+    Shadix initialised (style: #{style})! Wire up your app.css (or Tailwind entry):
 
         @import "./shadix.css";
+        @import "phoenix-colocated/#{app}/colocated.css";
+        /* dev: let Tailwind pick up colocated CSS changes */
+        @source "../../_build/dev/phoenix-colocated/#{app}/*/";
 
-    Then import the cn helper in your components:
+    Colocated CSS requires Tailwind v4.2.3+ and the :tailwind hex package 0.5+,
+    with NODE_PATH including Mix.Project.build_path() (default in Phoenix 1.8.8+).
 
-        import #{namespace}.Cn
+    Components are added in the "#{style}" style (configurable via `config :shadix`).
     """)
   end
+
+  # Appends a `config :shadix` block to config/config.exs if one isn't present
+  # (guarded by the `# shadix:config` marker so re-running init is idempotent).
+  defp write_config(path, style, namespace, dir) do
+    cond do
+      not File.exists?(path) ->
+        Mix.shell().info("""
+          note  #{path} not found — add this manually:
+
+            config :shadix, style: #{inspect(style)}, namespace: #{inspect(namespace)}, dir: #{inspect(dir)}
+        """)
+
+      File.read!(path) =~ "# shadix:config" ->
+        Mix.shell().info("  skip  #{path} (shadix config already present)")
+
+      true ->
+        block = """
+
+        # shadix:config — defaults for `mix shadix.add`
+        config :shadix, style: #{inspect(style)}, namespace: #{inspect(namespace)}, dir: #{inspect(dir)}
+        """
+
+        File.write!(path, File.read!(path) <> block)
+        Mix.shell().info("  update #{path} (added config :shadix)")
+    end
+  end
 end
diff --git a/test/mix/tasks/shadix_init_test.exs b/test/mix/tasks/shadix_init_test.exs
index 762b15e..1a281d8 100644
--- a/test/mix/tasks/shadix_init_test.exs
+++ b/test/mix/tasks/shadix_init_test.exs
@@ -8,73 +8,53 @@ defmodule Mix.Tasks.Shadix.InitTest do
     # Create an assets/css dir inside tmp to simulate a Phoenix app structure
     assets_dir = Path.join(tmp_dir, "assets/css")
     components_dir = Path.join(tmp_dir, "lib/demo/components/ui")
+    config_dir = Path.join(tmp_dir, "config")
     File.mkdir_p!(assets_dir)
     File.mkdir_p!(components_dir)
+    File.mkdir_p!(config_dir)
+    # Stub config.exs so write_config has a file to append to (instead of the repo's).
+    config_path = Path.join(config_dir, "config.exs")
+    File.write!(config_path, "import Config\n")
 
     on_exit(fn ->
       File.rm_rf!(tmp_dir)
     end)
 
-    {:ok, tmp_dir: tmp_dir, assets_dir: assets_dir, components_dir: components_dir}
+    {:ok,
+     tmp_dir: tmp_dir,
+     assets_dir: assets_dir,
+     components_dir: components_dir,
+     config_path: config_path}
+  end
+
+  # Standard args that isolate every filesystem side effect into the tmp dir.
+  defp init_args(%{assets_dir: a, components_dir: d, config_path: c}, extra \\ []) do
+    ["--assets-dir", a, "--namespace", "Demo.UI", "--dir", d, "--config", c] ++ extra
   end
 
   describe "run/1" do
-    test "copies theme.css to assets/css/shadix.css", %{
-      assets_dir: assets_dir,
-      components_dir: components_dir
-    } do
-      Mix.Tasks.Shadix.Init.run([
-        "--assets-dir",
-        assets_dir,
-        "--namespace",
-        "Demo.UI",
-        "--dir",
-        components_dir
-      ])
-
-      css_path = Path.join(assets_dir, "shadix.css")
-      assert File.exists?(css_path)
+    test "copies theme.css to assets/css/shadix.css", ctx do
+      Mix.Tasks.Shadix.Init.run(init_args(ctx))
 
-      css_content = File.read!(css_path)
-      assert css_content =~ "@import"
+      css_path = Path.join(ctx.assets_dir, "shadix.css")
+      assert File.exists?(css_path)
+      assert File.read!(css_path) =~ "@import"
     end
 
-    test "installs cn.ex into the components dir", %{
-      assets_dir: assets_dir,
-      components_dir: components_dir
-    } do
-      Mix.Tasks.Shadix.Init.run([
-        "--assets-dir",
-        assets_dir,
-        "--namespace",
-        "Demo.UI",
-        "--dir",
-        components_dir
-      ])
-
-      cn_path = Path.join(components_dir, "cn.ex")
-      assert File.exists?(cn_path)
-
-      cn_content = File.read!(cn_path)
-      assert cn_content =~ "defmodule Demo.UI.Cn"
+    test "installs cn.ex and colocated_css.ex into the components dir", ctx do
+      Mix.Tasks.Shadix.Init.run(init_args(ctx))
+
+      assert File.read!(Path.join(ctx.components_dir, "cn.ex")) =~ "defmodule Demo.UI.Cn"
+
+      assert File.read!(Path.join(ctx.components_dir, "colocated_css.ex")) =~
+               "defmodule Demo.UI.ColocatedCSS"
     end
 
-    test "prints Tailwind @import wiring instructions", %{
-      assets_dir: assets_dir,
-      components_dir: components_dir
-    } do
+    test "prints Tailwind @import wiring (theme + colocated)", ctx do
       Mix.shell(Mix.Shell.Process)
 
-      Mix.Tasks.Shadix.Init.run([
-        "--assets-dir",
-        assets_dir,
-        "--namespace",
-        "Demo.UI",
-        "--dir",
-        components_dir
-      ])
+      Mix.Tasks.Shadix.Init.run(init_args(ctx))
 
-      # Drain messages
       messages =
         Stream.repeatedly(fn ->
           receive do
@@ -88,6 +68,22 @@ defmodule Mix.Tasks.Shadix.InitTest do
       combined = Enum.join(messages, "\n")
       assert combined =~ "@import"
       assert combined =~ "shadix.css"
+      assert combined =~ "phoenix-colocated"
+    end
+
+    test "writes a config :shadix block and is idempotent", ctx do
+      Mix.Tasks.Shadix.Init.run(init_args(ctx, ["--style", "vega"]))
+
+      config = File.read!(ctx.config_path)
+      assert config =~ "# shadix:config"
+      assert config =~ "config :shadix"
+      assert config =~ ~s(style: "vega")
+      assert config =~ ~s(namespace: "Demo.UI")
+
+      # Second run must not append a duplicate block.
+      Mix.Tasks.Shadix.Init.run(init_args(ctx, ["--style", "vega"]))
+      after_second = File.read!(ctx.config_path)
+      assert length(String.split(after_second, "# shadix:config")) == 2
     end
   end
 end
-- 
2.51.2


From 061a0ff6bbf6cdb44cda956ea99c5353f458096e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <git@btao.org>
Date: Sat, 20 Jun 2026 01:38:39 +0100
Subject: [PATCH 10/12] feat(styles): docs-build rendering +
 tw-animate-css/no-scrollbar deps + dogfood test

- gen.registry emits priv/styles/<style>.css aggregators; app.css imports nova so
  the dev/docs build renders the (markerless-in-repo) components.
- Add tw-animate-css import + no-scrollbar @utility to theme.css (consumers) and
  app.css (docs); sync missing sidebar tokens into app.css. Tailwind build now clean.
- Fix accordion CSS: drop un-@apply-able group/accordion-trigger marker.
- Dogfood test for colocated <style> injection + per-component style coverage.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 assets/css/app.css                        | 42 +++++++++++++++++++++
 assets/package-lock.json                  | 13 +++++++
 assets/package.json                       |  3 ++
 lib/mix/tasks/shadix.gen.registry.ex      | 21 +++++++++++
 priv/registry/accordion.json              |  4 +-
 priv/styles/nova.css                      | 45 +++++++++++++++++++++++
 priv/styles/nova/accordion.css            |  2 +-
 priv/styles/vega.css                      | 45 +++++++++++++++++++++++
 priv/styles/vega/accordion.css            |  2 +-
 priv/templates/theme.css                  | 12 ++++++
 test/shadix/colocated_generation_test.exs | 37 +++++++++++++++++++
 11 files changed, 222 insertions(+), 4 deletions(-)
 create mode 100644 priv/styles/nova.css
 create mode 100644 priv/styles/vega.css
 create mode 100644 test/shadix/colocated_generation_test.exs

diff --git a/assets/css/app.css b/assets/css/app.css
index 767401b..1e743eb 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1,7 +1,25 @@
 @import "tailwindcss" source(none);
+/* Animation utilities (animate-in/out, fade, slide, zoom) used by ported component
+   skins — same dependency shadcn relies on. */
+@import "../node_modules/tw-animate-css/dist/tw-animate.css";
 @source "../../lib/shadix/components";
 @source "../../website";
 
+/* Custom utility shadcn defines in its base layer; used by ported sidebar/command skins. */
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* shadix components are markerless in-repo (colocated CSS only materialises in a
+   consumer's app via `mix shadix.add`), so import the default-style skin here to
+   render them in the dev/docs build. Generated by `mix shadix.gen.registry`. */
+@import "../../priv/styles/nova.css";
+
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
@@ -24,6 +42,14 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -51,6 +77,14 @@
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
 .dark {
@@ -73,6 +107,14 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 /* Flexoki syntax highlighting — https://stephango.com/flexoki
diff --git a/assets/package-lock.json b/assets/package-lock.json
index a1acedd..292fa9a 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -7,6 +7,9 @@
       "name": "shadix-assets",
       "dependencies": {
         "@floating-ui/dom": "^1.6.13"
+      },
+      "devDependencies": {
+        "tw-animate-css": "^1.4.0"
       }
     },
     "node_modules/@floating-ui/core": {
@@ -33,6 +36,16 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
       "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
+    },
+    "node_modules/tw-animate-css": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
+      "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Wombosvideo"
+      }
     }
   }
 }
diff --git a/assets/package.json b/assets/package.json
index 3eb0341..bd4b86b 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -3,5 +3,8 @@
   "private": true,
   "dependencies": {
     "@floating-ui/dom": "^1.6.13"
+  },
+  "devDependencies": {
+    "tw-animate-css": "^1.4.0"
   }
 }
diff --git a/lib/mix/tasks/shadix.gen.registry.ex b/lib/mix/tasks/shadix.gen.registry.ex
index 0c6bb25..23fb545 100644
--- a/lib/mix/tasks/shadix.gen.registry.ex
+++ b/lib/mix/tasks/shadix.gen.registry.ex
@@ -59,9 +59,30 @@ defmodule Mix.Tasks.Shadix.Gen.Registry do
       Mix.shell().info("Generated #{out_path}")
     end)
 
+    write_style_aggregators()
+
     Mix.shell().info("Done. #{length(sources)} manifest(s) written to #{out_dir}/")
   end
 
+  # Writes priv/styles/<style>.css aggregators that @import every component CSS for
+  # that style. Consumers use baked colocated CSS and never need these; they exist
+  # so shadix's own dev/docs Tailwind build can render the (markerless-in-repo)
+  # components by importing one style globally.
+  defp write_style_aggregators do
+    for style <- discovered_styles() do
+      files = Path.wildcard("priv/styles/#{style}/*.css") |> Enum.sort()
+
+      body =
+        files
+        |> Enum.map(fn path -> ~s(@import "./#{style}/#{Path.basename(path)}";) end)
+        |> Enum.join("\n")
+
+      out = "priv/styles/#{style}.css"
+      File.write!(out, "/* Generated by mix shadix.gen.registry. Do not edit. */\n#{body}\n")
+      Mix.shell().info("Generated #{out}")
+    end
+  end
+
   # The marker a converted component carries (first node of its template); its
   # presence switches the component into colocated-CSS mode.
   @marker "<%!-- shadix:colocated-css --%>"
diff --git a/priv/registry/accordion.json b/priv/registry/accordion.json
index ccc11e3..0ce527b 100644
--- a/priv/registry/accordion.json
+++ b/priv/registry/accordion.json
@@ -13,7 +13,7 @@
     "colocated_css"
   ],
   "styles": {
-    "nova": "@layer components {\n  [data-slot=\"accordion\"] {\n    @apply flex w-full flex-col;\n  }\n\n  [data-slot=\"accordion-item\"] {\n    @apply not-last:border-b;\n  }\n\n  [data-slot=\"accordion-trigger\"] {\n    @apply group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;\n  }\n\n  [data-slot=\"accordion-content\"] {\n    @apply text-sm;\n  }\n\n  [data-slot=\"accordion-content-inner\"] {\n    @apply pt-0 pb-2.5;\n  }\n}\n",
-    "vega": "@layer components {\n  [data-slot=\"accordion\"] {\n    @apply flex w-full flex-col;\n  }\n\n  [data-slot=\"accordion-item\"] {\n    @apply not-last:border-b;\n  }\n\n  [data-slot=\"accordion-trigger\"] {\n    @apply group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;\n  }\n\n  [data-slot=\"accordion-content\"] {\n    @apply text-sm;\n  }\n\n  [data-slot=\"accordion-content-inner\"] {\n    @apply pt-0 pb-4;\n  }\n}\n"
+    "nova": "@layer components {\n  [data-slot=\"accordion\"] {\n    @apply flex w-full flex-col;\n  }\n\n  [data-slot=\"accordion-item\"] {\n    @apply not-last:border-b;\n  }\n\n  [data-slot=\"accordion-trigger\"] {\n    @apply relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;\n  }\n\n  [data-slot=\"accordion-content\"] {\n    @apply text-sm;\n  }\n\n  [data-slot=\"accordion-content-inner\"] {\n    @apply pt-0 pb-2.5;\n  }\n}\n",
+    "vega": "@layer components {\n  [data-slot=\"accordion\"] {\n    @apply flex w-full flex-col;\n  }\n\n  [data-slot=\"accordion-item\"] {\n    @apply not-last:border-b;\n  }\n\n  [data-slot=\"accordion-trigger\"] {\n    @apply relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;\n  }\n\n  [data-slot=\"accordion-content\"] {\n    @apply text-sm;\n  }\n\n  [data-slot=\"accordion-content-inner\"] {\n    @apply pt-0 pb-4;\n  }\n}\n"
   }
 }
\ No newline at end of file
diff --git a/priv/styles/nova.css b/priv/styles/nova.css
new file mode 100644
index 0000000..614818f
--- /dev/null
+++ b/priv/styles/nova.css
@@ -0,0 +1,45 @@
+/* Generated by mix shadix.gen.registry. Do not edit. */
+@import "./nova/accordion.css";
+@import "./nova/alert.css";
+@import "./nova/alert_dialog.css";
+@import "./nova/avatar.css";
+@import "./nova/badge.css";
+@import "./nova/breadcrumb.css";
+@import "./nova/button.css";
+@import "./nova/card.css";
+@import "./nova/carousel.css";
+@import "./nova/checkbox.css";
+@import "./nova/combobox.css";
+@import "./nova/command.css";
+@import "./nova/context_menu.css";
+@import "./nova/dialog.css";
+@import "./nova/drawer.css";
+@import "./nova/dropdown_menu.css";
+@import "./nova/empty.css";
+@import "./nova/hover_card.css";
+@import "./nova/input.css";
+@import "./nova/input_otp.css";
+@import "./nova/kbd.css";
+@import "./nova/label.css";
+@import "./nova/menubar.css";
+@import "./nova/navigation_menu.css";
+@import "./nova/pagination.css";
+@import "./nova/popover.css";
+@import "./nova/progress.css";
+@import "./nova/radio_group.css";
+@import "./nova/resizable.css";
+@import "./nova/scroll_area.css";
+@import "./nova/select.css";
+@import "./nova/separator.css";
+@import "./nova/sheet.css";
+@import "./nova/sidebar.css";
+@import "./nova/skeleton.css";
+@import "./nova/slider.css";
+@import "./nova/sonner.css";
+@import "./nova/switch.css";
+@import "./nova/table.css";
+@import "./nova/tabs.css";
+@import "./nova/textarea.css";
+@import "./nova/toggle.css";
+@import "./nova/toggle_group.css";
+@import "./nova/tooltip.css";
diff --git a/priv/styles/nova/accordion.css b/priv/styles/nova/accordion.css
index d48189d..b065d57 100644
--- a/priv/styles/nova/accordion.css
+++ b/priv/styles/nova/accordion.css
@@ -8,7 +8,7 @@
   }
 
   [data-slot="accordion-trigger"] {
-    @apply group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
+    @apply relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
   }
 
   [data-slot="accordion-content"] {
diff --git a/priv/styles/vega.css b/priv/styles/vega.css
new file mode 100644
index 0000000..dafa823
--- /dev/null
+++ b/priv/styles/vega.css
@@ -0,0 +1,45 @@
+/* Generated by mix shadix.gen.registry. Do not edit. */
+@import "./vega/accordion.css";
+@import "./vega/alert.css";
+@import "./vega/alert_dialog.css";
+@import "./vega/avatar.css";
+@import "./vega/badge.css";
+@import "./vega/breadcrumb.css";
+@import "./vega/button.css";
+@import "./vega/card.css";
+@import "./vega/carousel.css";
+@import "./vega/checkbox.css";
+@import "./vega/combobox.css";
+@import "./vega/command.css";
+@import "./vega/context_menu.css";
+@import "./vega/dialog.css";
+@import "./vega/drawer.css";
+@import "./vega/dropdown_menu.css";
+@import "./vega/empty.css";
+@import "./vega/hover_card.css";
+@import "./vega/input.css";
+@import "./vega/input_otp.css";
+@import "./vega/kbd.css";
+@import "./vega/label.css";
+@import "./vega/menubar.css";
+@import "./vega/navigation_menu.css";
+@import "./vega/pagination.css";
+@import "./vega/popover.css";
+@import "./vega/progress.css";
+@import "./vega/radio_group.css";
+@import "./vega/resizable.css";
+@import "./vega/scroll_area.css";
+@import "./vega/select.css";
+@import "./vega/separator.css";
+@import "./vega/sheet.css";
+@import "./vega/sidebar.css";
+@import "./vega/skeleton.css";
+@import "./vega/slider.css";
+@import "./vega/sonner.css";
+@import "./vega/switch.css";
+@import "./vega/table.css";
+@import "./vega/tabs.css";
+@import "./vega/textarea.css";
+@import "./vega/toggle.css";
+@import "./vega/toggle_group.css";
+@import "./vega/tooltip.css";
diff --git a/priv/styles/vega/accordion.css b/priv/styles/vega/accordion.css
index 0581928..3acfcf2 100644
--- a/priv/styles/vega/accordion.css
+++ b/priv/styles/vega/accordion.css
@@ -8,7 +8,7 @@
   }
 
   [data-slot="accordion-trigger"] {
-    @apply group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
+    @apply relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
   }
 
   [data-slot="accordion-content"] {
diff --git a/priv/templates/theme.css b/priv/templates/theme.css
index eefdd79..1e94115 100644
--- a/priv/templates/theme.css
+++ b/priv/templates/theme.css
@@ -1,7 +1,19 @@
 @import "tailwindcss";
+/* Animation utilities used by shadix component skins. Install: npm i tw-animate-css */
+@import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
 
+/* Custom utility shadcn defines in its base layer; used by sidebar/command skins. */
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
diff --git a/test/shadix/colocated_generation_test.exs b/test/shadix/colocated_generation_test.exs
new file mode 100644
index 0000000..3aab9bd
--- /dev/null
+++ b/test/shadix/colocated_generation_test.exs
@@ -0,0 +1,37 @@
+defmodule Shadix.ColocatedGenerationTest do
+  @moduledoc """
+  Dogfoods the colocated-CSS generation path end to end (the dev/docs build renders
+  via a global style import instead, so this is where we exercise the real injection).
+  """
+  use ExUnit.Case, async: true
+
+  test "rendering a component injects a well-formed colocated <style> as the first node" do
+    manifest = Shadix.Registry.load!("button")
+    [file] = manifest["files"]
+    out = Shadix.Generator.render_file(file["content"], manifest["styles"], "nova", "Demo.UI")
+
+    assert out =~ ~s(<style :type={Demo.UI.ColocatedCSS}>)
+    assert out =~ "@layer components"
+    assert out =~ ~s([data-slot="button"])
+    refute out =~ "shadix:colocated-css"
+    # the <style> must be the first node of the template (LV 1.2 requirement)
+    assert out =~ ~r/~H"""\n\s*<style :type=/
+  end
+
+  test "every converted component manifest carries nova and vega styles" do
+    converted =
+      "lib/shadix/components/*.ex"
+      |> Path.wildcard()
+      |> Enum.map(&Path.basename(&1, ".ex"))
+      |> Enum.filter(&(File.read!("lib/shadix/components/#{&1}.ex") =~ "shadix:colocated-css"))
+
+    for name <- converted do
+      m = Shadix.Registry.load!(name)
+      assert Enum.sort(Map.keys(m["styles"])) == ["nova", "vega"], "#{name} missing a style"
+      assert m["default_style"] == "nova"
+    end
+
+    # the bulk port converted the large majority of the catalog
+    assert length(converted) >= 40
+  end
+end
-- 
2.51.2


From bdf313f13da34e5c65e501eee7a8bc36798e17a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <git@btao.org>
Date: Sat, 20 Jun 2026 01:40:04 +0100
Subject: [PATCH 11/12] docs(CLAUDE): document colocated per-style CSS system +
 tw-animate-css dep

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 CLAUDE.md | 44 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 479d0e8..719e78d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -65,13 +65,51 @@ wins over a component default regardless of order. Components carry stable `data
 (and often `data-variant`/`data-size`/`data-state`) attributes mirroring shadcn for
 styling/targeting.
 
+### Component styling: colocated per-style CSS (nova/vega)
+
+Most components carry **no inline style classes**. Their styling lives in colocated CSS,
+ported **verbatim** from shadcn's named styles, and is baked into the copied component at
+generation time:
+
+- **Source of truth:** `priv/styles/<style>/<component>.css` (e.g. `priv/styles/nova/button.css`).
+  Two styles ship: **`nova`** (compact, the default) and **`vega`** (classic/roomier). Each
+  file is `@layer components { [data-slot="…"] { @apply … } }`, targeting the component's
+  stable `data-slot`/`data-variant`/`data-size` attributes. `@layer components` is what makes
+  a caller `class` win (utilities are a later layer).
+- **The `.ex` carries only a marker:** the first node of the component template is the literal
+  `<%!-- shadix:colocated-css --%>` comment (exactly once per file — never repeat it in the
+  `@moduledoc`; `gen.registry` raises if it appears more than once). Tailwind `group/*` and
+  `peer` markers that can't be `@apply`'d stay as inline classes on the element.
+- **gen.registry** stores every style's CSS in the component's manifest (`"styles"` map +
+  `"default_style"`), and a component with the marker depends on `colocated_css` (not `cn`).
+- **`mix shadix.add <c> --style nova|vega`** replaces the marker with a
+  `<style :type={<ns>.ColocatedCSS}>…</style>` block for the chosen style (then namespace-rewrites),
+  so the consumer's component is self-contained with exactly one style. Style/namespace/dir are
+  persisted in a `config :shadix` block by `shadix.init` (the `components.json` analog); precedence
+  is `--style` flag > config > `default_style`.
+- **`Shadix.ColocatedCSS`** (`lib/shadix/colocated_css.ex`) is the LiveView 1.2 `:type` module;
+  it's installed into the consumer (namespace-rewritten) like the `cn` helper.
+- **Deps:** colocated CSS needs **LiveView ≥ 1.2** + **Tailwind ≥ 4.2.3**; the skins `@apply`
+  utilities from **`tw-animate-css`** (consumers `npm i tw-animate-css`) and a `no-scrollbar`
+  `@utility` — both wired by `theme.css`.
+- **Editing a component's look:** change `priv/styles/<style>/<component>.css`, then
+  `mix shadix.gen.registry`. A few components stay **legacy** (inline classes, no marker):
+  `aspect_ratio`, `collapsible`, `data_table` (no shadcn skin). Structural-gap components
+  (drawer/carousel/resizable/sidebar/sonner/select/combobox/command/navigation_menu/accordion)
+  match shadcn on their shared rendered surface only.
+- **Docs/dev build:** `gen.registry` also emits `priv/styles/<style>.css` aggregators; `app.css`
+  `@import`s `nova.css` so the repo's components render (they're markerless in-repo, so colocated
+  extraction doesn't fire here — the dogfood test exercises the real injection instead).
+
 ### Namespace rewriting on copy
 
 `Shadix.Generator` rewrites canonical `Shadix.*` module references to the consumer's
 namespace (default `<App>Web.Components.UI`): `Shadix.Components` → namespace, then
-`Shadix.Cn` → `namespace.Cn`, then `Shadix.Form` → `namespace.Form` (order matters so
-`Shadix.Cn` isn't matched inside `Shadix.Components.*`). Generator helpers are kept pure
-and separate from the Mix tasks so they're unit-testable.
+`Shadix.ColocatedCSS` → `namespace.ColocatedCSS`, then `Shadix.Cn` → `namespace.Cn`, then
+`Shadix.Form` → `namespace.Form` (order matters so `Shadix.Cn` isn't matched inside
+`Shadix.Components.*`). `Generator.render_file/4` does the style injection + namespace rewrite
+in one pass. Generator helpers are kept pure and separate from the Mix tasks so they're
+unit-testable.
 
 ### Self-contained components (intentional duplication)
 
-- 
2.51.2


From de105fc9fe8a56e992cf789f5bcd03ff9d022ea9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= <git@btao.org>
Date: Sat, 20 Jun 2026 01:49:40 +0100
Subject: [PATCH 12/12] fix(styles): revert native-input controls to legacy
 (switch/checkbox/radio_group)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Final review caught that shadcn's Radix data-checked CSS doesn't apply to shadix's
native <input> (which uses :checked/peer-checked) — switch/checkbox/radio_group were
visually broken by the verbatim port. Revert to their working main-branch form as
legacy components; native-selector colocated adaptation is a follow-up. Also fix
rewrite_namespace docstring (4 replacements) and a stale registry doctest.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 CLAUDE.md                                   |  5 ++++-
 lib/shadix/components/checkbox.ex           | 25 ++++++++++-----------
 lib/shadix/components/radio_group.ex        | 23 +++++++++++--------
 lib/shadix/components/switch.ex             | 17 ++++++++------
 lib/shadix/generator.ex                     |  7 +++---
 lib/shadix/registry.ex                      |  2 +-
 priv/registry/checkbox.json                 | 13 ++++-------
 priv/registry/radio_group.json              | 13 ++++-------
 priv/registry/switch.json                   | 13 ++++-------
 priv/styles/nova.css                        |  3 ---
 priv/styles/nova/checkbox.css               |  9 --------
 priv/styles/nova/radio_group.css            |  9 --------
 priv/styles/nova/switch.css                 |  9 --------
 priv/styles/vega.css                        |  3 ---
 priv/styles/vega/checkbox.css               |  9 --------
 priv/styles/vega/radio_group.css            |  9 --------
 priv/styles/vega/switch.css                 |  9 --------
 test/mix/tasks/shadix_add_test.exs          |  9 ++++----
 test/shadix/components/checkbox_test.exs    | 19 ----------------
 test/shadix/components/radio_group_test.exs |  6 +++--
 20 files changed, 65 insertions(+), 147 deletions(-)
 delete mode 100644 priv/styles/nova/checkbox.css
 delete mode 100644 priv/styles/nova/radio_group.css
 delete mode 100644 priv/styles/nova/switch.css
 delete mode 100644 priv/styles/vega/checkbox.css
 delete mode 100644 priv/styles/vega/radio_group.css
 delete mode 100644 priv/styles/vega/switch.css

diff --git a/CLAUDE.md b/CLAUDE.md
index 719e78d..f5c2347 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -94,7 +94,10 @@ generation time:
   `@utility` — both wired by `theme.css`.
 - **Editing a component's look:** change `priv/styles/<style>/<component>.css`, then
   `mix shadix.gen.registry`. A few components stay **legacy** (inline classes, no marker):
-  `aspect_ratio`, `collapsible`, `data_table` (no shadcn skin). Structural-gap components
+  `aspect_ratio`, `collapsible`, `data_table` (no shadcn skin), and the native-`<input>`
+  controls `switch`, `checkbox`, `radio_group` (shadcn's Radix `data-checked` CSS can't apply
+  to a native input's `:checked`; a colocated native-selector adaptation is a follow-up).
+  Structural-gap components
   (drawer/carousel/resizable/sidebar/sonner/select/combobox/command/navigation_menu/accordion)
   match shadcn on their shared rendered surface only.
 - **Docs/dev build:** `gen.registry` also emits `priv/styles/<style>.css` aggregators; `app.css`
diff --git a/lib/shadix/components/checkbox.ex b/lib/shadix/components/checkbox.ex
index 7c0dbe7..2097ccb 100644
--- a/lib/shadix/components/checkbox.ex
+++ b/lib/shadix/components/checkbox.ex
@@ -1,26 +1,26 @@
 defmodule Shadix.Components.Checkbox do
   @moduledoc """
-  Checkbox component adapted from shadcn/ui.
+  Checkbox component adapted from shadcn/ui (new-york-v4).
 
   Renders a native `<input type="checkbox">` (with a preceding hidden `"false"`
   input so an unchecked box still submits a value) and is field-aware: it derives
   its `id`, `name`, `value`, and `errors` from a `Phoenix.HTML.FormField`.
 
-  The box is the `appearance-none` input carrying `data-slot="checkbox"`; the
-  check mark is a sibling `<svg>` overlay (`data-slot="checkbox-indicator"`) shown
-  via `peer-checked:visible`. No JavaScript, no Radix.
+  The box is the `appearance-none` input; the check mark is a sibling `<svg>`
+  overlay shown via `peer-checked:visible`. It uses `text-primary-foreground`
+  (via `currentColor`) so the check contrasts correctly in both light and dark
+  mode — unlike a fixed-colour background-image. No JavaScript, no Radix.
 
-  All styling lives in the component's colocated CSS
-  (`priv/styles/<style>/checkbox.css`, ported verbatim from shadcn), keyed by the
-  `data-slot` attributes and wrapped in `@layer components` so a caller-supplied
-  `class` always wins. The colocated-css marker (the first node of the template)
-  is replaced by the chosen style's `<style>` block when the component is copied
-  into a consumer app via `mix shadix.add`.
+  Caller-supplied `class` is appended last (to the input); Tailwind cascade
+  layers ensure it wins over the defaults.
   """
   use Phoenix.Component
 
+  import Shadix.Cn
   import Shadix.Form
 
+  @base "peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-transparent shadow-xs transition-shadow outline-none checked:border-primary checked:bg-primary dark:checked:bg-primary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40"
+
   attr(:field, Phoenix.HTML.FormField, required: true)
   attr(:class, :string, default: nil)
   attr(:rest, :global, include: ~w(disabled required readonly autofocus))
@@ -29,9 +29,9 @@ defmodule Shadix.Components.Checkbox do
     %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)
     assigns = assign(assigns, id: id, name: name, value: value, errors: errors)
     assigns = assign(assigns, :checked, Phoenix.HTML.Form.normalize_value("checkbox", value))
+    assigns = assign(assigns, :computed_class, cn([@base, assigns.class]))
 
     ~H"""
-    <%!-- shadix:colocated-css --%>
     <input type="hidden" name={@name} value="false" />
     <span class="relative inline-grid size-4 shrink-0 *:[grid-area:1/1]">
       <input
@@ -41,13 +41,12 @@ defmodule Shadix.Components.Checkbox do
         name={@name}
         value="true"
         checked={@checked}
-        class={["peer", @class]}
+        class={@computed_class}
         aria-invalid={(@errors != [] && "true") || nil}
         aria-describedby={(@errors != [] && "#{@id}-error") || nil}
         {@rest}
       />
       <svg
-        data-slot="checkbox-indicator"
         class="pointer-events-none invisible size-3.5 place-self-center text-primary-foreground peer-checked:visible"
         viewBox="0 0 24 24"
         fill="none"
diff --git a/lib/shadix/components/radio_group.ex b/lib/shadix/components/radio_group.ex
index a54cc83..a786a14 100644
--- a/lib/shadix/components/radio_group.ex
+++ b/lib/shadix/components/radio_group.ex
@@ -1,6 +1,6 @@
 defmodule Shadix.Components.RadioGroup do
   @moduledoc """
-  Radio group component translated from shadcn/ui.
+  Radio group component translated from shadcn/ui (new-york-v4).
 
   Two function-components:
 
@@ -14,10 +14,6 @@ defmodule Shadix.Components.RadioGroup do
       item's `value`. The selected dot is drawn with CSS only (a `before:`
       pseudo-element shown via the `checked:` variant), no JavaScript.
 
-  Styling is delivered via colocated CSS keyed on the `data-slot` attributes
-  (`radio-group`, `radio-group-item`); the elements carry only structural
-  marker classes (`peer`, `group/radio-group-item`) plus the caller `class`.
-
   Radios are grouped, so an individual item does not render its own error
   message; surface validation alongside the group/label as appropriate. Each
   item still reflects the field's invalid state via `aria-invalid` so screen
@@ -25,16 +21,22 @@ defmodule Shadix.Components.RadioGroup do
   """
   use Phoenix.Component
 
+  import Shadix.Cn
   import Shadix.Form
 
+  @container_base "grid gap-3"
+
+  @item_base "peer relative flex aspect-square size-4 shrink-0 appearance-none items-center justify-center rounded-full border border-input bg-transparent text-primary shadow-xs transition-[color,box-shadow] outline-none before:size-2 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity before:content-[''] checked:before:opacity-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40"
+
   attr(:class, :string, default: nil)
   attr(:rest, :global)
   slot(:inner_block, required: true)
 
   def radio_group(assigns) do
+    assigns = assign(assigns, :computed_class, cn([@container_base, assigns.class]))
+
     ~H"""
-    <%!-- shadix:colocated-css --%>
-    <div role="radiogroup" data-slot="radio-group" class={@class} {@rest}>
+    <div role="radiogroup" data-slot="radio-group" class={@computed_class} {@rest}>
       {render_slot(@inner_block)}
     </div>
     """
@@ -48,7 +50,10 @@ defmodule Shadix.Components.RadioGroup do
   def radio_group_item(assigns) do
     %{name: name, value: value, errors: errors} = field_attrs(assigns.field)
 
-    assigns = assign(assigns, name: name, field_value: value, errors: errors)
+    assigns =
+      assigns
+      |> assign(name: name, field_value: value, errors: errors)
+      |> assign(:computed_class, cn([@item_base, assigns.class]))
 
     ~H"""
     <input
@@ -59,7 +64,7 @@ defmodule Shadix.Components.RadioGroup do
       checked={to_string(@field_value) == @value}
       aria-invalid={(@errors != [] && "true") || nil}
       data-slot="radio-group-item"
-      class={["peer group/radio-group-item", @class]}
+      class={@computed_class}
       {@rest}
     />
     """
diff --git a/lib/shadix/components/switch.ex b/lib/shadix/components/switch.ex
index 7969149..a1946ff 100644
--- a/lib/shadix/components/switch.ex
+++ b/lib/shadix/components/switch.ex
@@ -4,17 +4,20 @@ defmodule Shadix.Components.Switch do
 
   A field-aware boolean control rendered as a native checkbox styled into a
   pill-shaped switch. Like the checkbox control, it emits a hidden `"false"`
-  input first so an unchecked switch still submits a value — no JavaScript,
-  no `phx-*` bindings.
+  input first so an unchecked switch still submits a value. The thumb is drawn
+  with a `before:` pseudo-element and translated on `checked:` — no JavaScript,
+  no `phx-*` bindings, no Radix `data-state` behavior.
 
-  Styling is delivered by the colocated `priv/styles/<skin>/switch.css` skin
-  via the `data-slot="switch"` attribute. Caller-supplied `class` is appended
-  last; Tailwind cascade layers ensure it wins over the defaults.
+  Caller-supplied `class` is appended last; Tailwind cascade layers ensure it
+  wins over the defaults.
   """
   use Phoenix.Component
 
+  import Shadix.Cn
   import Shadix.Form
 
+  @base "peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer appearance-none items-center rounded-full border border-transparent bg-input shadow-xs transition-all motion-reduce:transition-none outline-none before:pointer-events-none before:absolute before:top-1/2 before:left-0.5 before:-translate-y-1/2 before:size-4 before:rounded-full before:bg-background before:transition-transform before:motion-reduce:transition-none before:content-[''] checked:bg-primary dark:checked:bg-primary checked:before:translate-x-4 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/80 dark:aria-invalid:ring-destructive/40"
+
   attr(:field, Phoenix.HTML.FormField, required: true)
   attr(:class, :string, default: nil)
   attr(:rest, :global, include: ~w(disabled required readonly autofocus))
@@ -23,9 +26,9 @@ defmodule Shadix.Components.Switch do
     %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)
     assigns = assign(assigns, id: id, name: name, value: value, errors: errors)
     assigns = assign(assigns, :checked, Phoenix.HTML.Form.normalize_value("checkbox", value))
+    assigns = assign(assigns, :computed_class, cn([@base, assigns.class]))
 
     ~H"""
-    <%!-- shadix:colocated-css --%>
     <input type="hidden" name={@name} value="false" />
     <input
       type="checkbox"
@@ -37,7 +40,7 @@ defmodule Shadix.Components.Switch do
       checked={@checked}
       aria-invalid={(@errors != [] && "true") || nil}
       aria-describedby={(@errors != [] && "#{@id}-error") || nil}
-      class={["group/switch peer", @class]}
+      class={@computed_class}
       {@rest}
     />
     <p
diff --git a/lib/shadix/generator.ex b/lib/shadix/generator.ex
index 0655b0d..460ec81 100644
--- a/lib/shadix/generator.ex
+++ b/lib/shadix/generator.ex
@@ -11,10 +11,11 @@ defmodule Shadix.Generator do
   Rewrites canonical `Shadix.*` module references in `source` to use `namespace`
   as the new base.
 
-  Three ordered replacements are applied:
+  Four ordered replacements are applied:
   1. `Shadix.Components` → `namespace`
-  2. `Shadix.Cn` → `namespace <> ".Cn"`
-  3. `Shadix.Form` → `namespace <> ".Form"`
+  2. `Shadix.ColocatedCSS` → `namespace <> ".ColocatedCSS"`
+  3. `Shadix.Cn` → `namespace <> ".Cn"`
+  4. `Shadix.Form` → `namespace <> ".Form"`
 
   The order matters: `Shadix.Components` is replaced first so the substring
   `Shadix.Cn` is never accidentally matched inside a `Shadix.Components.*` name.
diff --git a/lib/shadix/registry.ex b/lib/shadix/registry.ex
index 3635841..51d62a5 100644
--- a/lib/shadix/registry.ex
+++ b/lib/shadix/registry.ex
@@ -48,7 +48,7 @@ defmodule Shadix.Registry do
       ["colocated_css", "button"]
 
       iex> Shadix.Registry.resolve(["card", "button"]) |> Enum.map(& &1["name"])
-      ["cn", "card", "colocated_css", "button"]
+      ["colocated_css", "card", "button"]
   """
   @spec resolve(String.t() | [String.t()]) :: [map()]
   def resolve(name) when is_binary(name), do: resolve([name])
diff --git a/priv/registry/checkbox.json b/priv/registry/checkbox.json
index 5f7edc8..7809b09 100644
--- a/priv/registry/checkbox.json
+++ b/priv/registry/checkbox.json
@@ -1,8 +1,7 @@
 {
-  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Checkbox do\n  @moduledoc \"\"\"\n  Checkbox component adapted from shadcn/ui.\n\n  Renders a native `<input type=\"checkbox\">` (with a preceding hidden `\"false\"`\n  input so an unchecked box still submits a value) and is field-aware: it derives\n  its `id`, `name`, `value`, and `errors` from a `Phoenix.HTML.FormField`.\n\n  The box is the `appearance-none` input carrying `data-slot=\"checkbox\"`; the\n  check mark is a sibling `<svg>` overlay (`data-slot=\"checkbox-indicator\"`) shown\n  via `peer-checked:visible`. No JavaScript, no Radix.\n\n  All styling lives in the component's colocated CSS\n  (`priv/styles/<style>/checkbox.css`, ported verbatim from shadcn), keyed by the\n  `data-slot` attributes and wrapped in `@layer components` so a caller-supplied\n  `class` always wins. The colocated-css marker (the first node of the template)\n  is replaced by the chosen style's `<style>` block when the component is copied\n  into a consumer app via `mix shadix.add`.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Form\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled required readonly autofocus))\n\n  def checkbox(assigns) do\n    %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)\n    assigns = assign(assigns, id: id, name: name, value: value, errors: errors)\n    assigns = assign(assigns, :checked, Phoenix.HTML.Form.normalize_value(\"checkbox\", value))\n\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <input type=\"hidden\" name={@name} value=\"false\" />\n    <span class=\"relative inline-grid size-4 shrink-0 *:[grid-area:1/1]\">\n      <input\n        type=\"checkbox\"\n        data-slot=\"checkbox\"\n        id={@id}\n        name={@name}\n        value=\"true\"\n        checked={@checked}\n        class={[\"peer\", @class]}\n        aria-invalid={(@errors != [] && \"true\") || nil}\n        aria-describedby={(@errors != [] && \"#{@id}-error\") || nil}\n        {@rest}\n      />\n      <svg\n        data-slot=\"checkbox-indicator\"\n        class=\"pointer-events-none invisible size-3.5 place-self-center text-primary-foreground peer-checked:visible\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M20 6 9 17l-5-5\" />\n      </svg>\n    </span>\n    <p\n      :if={@errors != []}\n      id={\"#{@id}-error\"}\n      data-slot=\"form-message\"\n      class=\"text-destructive text-sm mt-1\"\n    >\n      {List.first(@errors)}\n    </p>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Checkbox do\n  @moduledoc \"\"\"\n  Checkbox component adapted from shadcn/ui (new-york-v4).\n\n  Renders a native `<input type=\"checkbox\">` (with a preceding hidden `\"false\"`\n  input so an unchecked box still submits a value) and is field-aware: it derives\n  its `id`, `name`, `value`, and `errors` from a `Phoenix.HTML.FormField`.\n\n  The box is the `appearance-none` input; the check mark is a sibling `<svg>`\n  overlay shown via `peer-checked:visible`. It uses `text-primary-foreground`\n  (via `currentColor`) so the check contrasts correctly in both light and dark\n  mode — unlike a fixed-colour background-image. No JavaScript, no Radix.\n\n  Caller-supplied `class` is appended last (to the input); Tailwind cascade\n  layers ensure it wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n  import Shadix.Form\n\n  @base \"peer size-4 shrink-0 appearance-none rounded-[4px] border border-input bg-transparent shadow-xs transition-shadow outline-none checked:border-primary checked:bg-primary dark:checked:bg-primary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40\"\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled required readonly autofocus))\n\n  def checkbox(assigns) do\n    %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)\n    assigns = assign(assigns, id: id, name: name, value: value, errors: errors)\n    assigns = assign(assigns, :checked, Phoenix.HTML.Form.normalize_value(\"checkbox\", value))\n    assigns = assign(assigns, :computed_class, cn([@base, assigns.class]))\n\n    ~H\"\"\"\n    <input type=\"hidden\" name={@name} value=\"false\" />\n    <span class=\"relative inline-grid size-4 shrink-0 *:[grid-area:1/1]\">\n      <input\n        type=\"checkbox\"\n        data-slot=\"checkbox\"\n        id={@id}\n        name={@name}\n        value=\"true\"\n        checked={@checked}\n        class={@computed_class}\n        aria-invalid={(@errors != [] && \"true\") || nil}\n        aria-describedby={(@errors != [] && \"#{@id}-error\") || nil}\n        {@rest}\n      />\n      <svg\n        class=\"pointer-events-none invisible size-3.5 place-self-center text-primary-foreground peer-checked:visible\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"3\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M20 6 9 17l-5-5\" />\n      </svg>\n    </span>\n    <p\n      :if={@errors != []}\n      id={\"#{@id}-error\"}\n      data-slot=\"form-message\"\n      class=\"text-destructive text-sm mt-1\"\n    >\n      {List.first(@errors)}\n    </p>\n    \"\"\"\n  end\nend\n",
       "path": "checkbox.ex"
     }
   ],
@@ -10,11 +9,7 @@
   "name": "checkbox",
   "npm_deps": [],
   "registry_deps": [
-    "form",
-    "colocated_css"
-  ],
-  "styles": {
-    "nova": "@layer components {\n  [data-slot=\"checkbox\"] {\n    @apply relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3;\n  }\n\n  [data-slot=\"checkbox-indicator\"] {\n    @apply grid place-content-center text-current transition-none [&>svg]:size-3.5;\n  }\n}\n",
-    "vega": "@layer components {\n  [data-slot=\"checkbox\"] {\n    @apply relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3;\n  }\n\n  [data-slot=\"checkbox-indicator\"] {\n    @apply grid place-content-center text-current transition-none [&>svg]:size-3.5;\n  }\n}\n"
-  }
+    "cn",
+    "form"
+  ]
 }
\ No newline at end of file
diff --git a/priv/registry/radio_group.json b/priv/registry/radio_group.json
index 0dfe182..47c4547 100644
--- a/priv/registry/radio_group.json
+++ b/priv/registry/radio_group.json
@@ -1,8 +1,7 @@
 {
-  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.RadioGroup do\n  @moduledoc \"\"\"\n  Radio group component translated from shadcn/ui.\n\n  Two function-components:\n\n    * `radio_group/1` — a presentational container (`role=\"radiogroup\"`,\n      `data-slot=\"radio-group\"`) that lays out the items in a grid. It is NOT\n      field-aware; it just renders its `inner_block`.\n\n    * `radio_group_item/1` — a field-aware native `<input type=\"radio\">`. Each\n      item shares the field's `name` (so the browser groups them) but renders a\n      unique `id`, and is `checked` when the field's current value matches the\n      item's `value`. The selected dot is drawn with CSS only (a `before:`\n      pseudo-element shown via the `checked:` variant), no JavaScript.\n\n  Styling is delivered via colocated CSS keyed on the `data-slot` attributes\n  (`radio-group`, `radio-group-item`); the elements carry only structural\n  marker classes (`peer`, `group/radio-group-item`) plus the caller `class`.\n\n  Radios are grouped, so an individual item does not render its own error\n  message; surface validation alongside the group/label as appropriate. Each\n  item still reflects the field's invalid state via `aria-invalid` so screen\n  readers and the destructive styling pick it up.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Form\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def radio_group(assigns) do\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <div role=\"radiogroup\" data-slot=\"radio-group\" class={@class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:value, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled required))\n\n  def radio_group_item(assigns) do\n    %{name: name, value: value, errors: errors} = field_attrs(assigns.field)\n\n    assigns = assign(assigns, name: name, field_value: value, errors: errors)\n\n    ~H\"\"\"\n    <input\n      type=\"radio\"\n      id={\"#{@name}_#{@value}\"}\n      name={@name}\n      value={@value}\n      checked={to_string(@field_value) == @value}\n      aria-invalid={(@errors != [] && \"true\") || nil}\n      data-slot=\"radio-group-item\"\n      class={[\"peer group/radio-group-item\", @class]}\n      {@rest}\n    />\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.RadioGroup do\n  @moduledoc \"\"\"\n  Radio group component translated from shadcn/ui (new-york-v4).\n\n  Two function-components:\n\n    * `radio_group/1` — a presentational container (`role=\"radiogroup\"`,\n      `data-slot=\"radio-group\"`) that lays out the items in a grid. It is NOT\n      field-aware; it just renders its `inner_block`.\n\n    * `radio_group_item/1` — a field-aware native `<input type=\"radio\">`. Each\n      item shares the field's `name` (so the browser groups them) but renders a\n      unique `id`, and is `checked` when the field's current value matches the\n      item's `value`. The selected dot is drawn with CSS only (a `before:`\n      pseudo-element shown via the `checked:` variant), no JavaScript.\n\n  Radios are grouped, so an individual item does not render its own error\n  message; surface validation alongside the group/label as appropriate. Each\n  item still reflects the field's invalid state via `aria-invalid` so screen\n  readers and the destructive styling pick it up.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n  import Shadix.Form\n\n  @container_base \"grid gap-3\"\n\n  @item_base \"peer relative flex aspect-square size-4 shrink-0 appearance-none items-center justify-center rounded-full border border-input bg-transparent text-primary shadow-xs transition-[color,box-shadow] outline-none before:size-2 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity before:content-[''] checked:before:opacity-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40\"\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def radio_group(assigns) do\n    assigns = assign(assigns, :computed_class, cn([@container_base, assigns.class]))\n\n    ~H\"\"\"\n    <div role=\"radiogroup\" data-slot=\"radio-group\" class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </div>\n    \"\"\"\n  end\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:value, :string, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled required))\n\n  def radio_group_item(assigns) do\n    %{name: name, value: value, errors: errors} = field_attrs(assigns.field)\n\n    assigns =\n      assigns\n      |> assign(name: name, field_value: value, errors: errors)\n      |> assign(:computed_class, cn([@item_base, assigns.class]))\n\n    ~H\"\"\"\n    <input\n      type=\"radio\"\n      id={\"#{@name}_#{@value}\"}\n      name={@name}\n      value={@value}\n      checked={to_string(@field_value) == @value}\n      aria-invalid={(@errors != [] && \"true\") || nil}\n      data-slot=\"radio-group-item\"\n      class={@computed_class}\n      {@rest}\n    />\n    \"\"\"\n  end\nend\n",
       "path": "radio_group.ex"
     }
   ],
@@ -10,11 +9,7 @@
   "name": "radio_group",
   "npm_deps": [],
   "registry_deps": [
-    "form",
-    "colocated_css"
-  ],
-  "styles": {
-    "nova": "@layer components {\n  [data-slot=\"radio-group\"] {\n    @apply w-full grid gap-2;\n  }\n\n  [data-slot=\"radio-group-item\"] {\n    @apply relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3;\n  }\n}\n",
-    "vega": "@layer components {\n  [data-slot=\"radio-group\"] {\n    @apply w-full grid gap-3;\n  }\n\n  [data-slot=\"radio-group-item\"] {\n    @apply relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3;\n  }\n}\n"
-  }
+    "cn",
+    "form"
+  ]
 }
\ No newline at end of file
diff --git a/priv/registry/switch.json b/priv/registry/switch.json
index 87da68a..5d5c2df 100644
--- a/priv/registry/switch.json
+++ b/priv/registry/switch.json
@@ -1,8 +1,7 @@
 {
-  "default_style": "nova",
   "files": [
     {
-      "content": "defmodule Shadix.Components.Switch do\n  @moduledoc \"\"\"\n  Switch component translated from shadcn/ui (new-york-v4).\n\n  A field-aware boolean control rendered as a native checkbox styled into a\n  pill-shaped switch. Like the checkbox control, it emits a hidden `\"false\"`\n  input first so an unchecked switch still submits a value — no JavaScript,\n  no `phx-*` bindings.\n\n  Styling is delivered by the colocated `priv/styles/<skin>/switch.css` skin\n  via the `data-slot=\"switch\"` attribute. Caller-supplied `class` is appended\n  last; Tailwind cascade layers ensure it wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Form\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled required readonly autofocus))\n\n  def switch(assigns) do\n    %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)\n    assigns = assign(assigns, id: id, name: name, value: value, errors: errors)\n    assigns = assign(assigns, :checked, Phoenix.HTML.Form.normalize_value(\"checkbox\", value))\n\n    ~H\"\"\"\n    <%!-- shadix:colocated-css --%>\n    <input type=\"hidden\" name={@name} value=\"false\" />\n    <input\n      type=\"checkbox\"\n      role=\"switch\"\n      data-slot=\"switch\"\n      id={@id}\n      name={@name}\n      value=\"true\"\n      checked={@checked}\n      aria-invalid={(@errors != [] && \"true\") || nil}\n      aria-describedby={(@errors != [] && \"#{@id}-error\") || nil}\n      class={[\"group/switch peer\", @class]}\n      {@rest}\n    />\n    <p\n      :if={@errors != []}\n      id={\"#{@id}-error\"}\n      data-slot=\"form-message\"\n      class=\"text-destructive text-sm mt-1\"\n    >\n      {List.first(@errors)}\n    </p>\n    \"\"\"\n  end\nend\n",
+      "content": "defmodule Shadix.Components.Switch do\n  @moduledoc \"\"\"\n  Switch component translated from shadcn/ui (new-york-v4).\n\n  A field-aware boolean control rendered as a native checkbox styled into a\n  pill-shaped switch. Like the checkbox control, it emits a hidden `\"false\"`\n  input first so an unchecked switch still submits a value. The thumb is drawn\n  with a `before:` pseudo-element and translated on `checked:` — no JavaScript,\n  no `phx-*` bindings, no Radix `data-state` behavior.\n\n  Caller-supplied `class` is appended last; Tailwind cascade layers ensure it\n  wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n  import Shadix.Form\n\n  @base \"peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer appearance-none items-center rounded-full border border-transparent bg-input shadow-xs transition-all motion-reduce:transition-none outline-none before:pointer-events-none before:absolute before:top-1/2 before:left-0.5 before:-translate-y-1/2 before:size-4 before:rounded-full before:bg-background before:transition-transform before:motion-reduce:transition-none before:content-[''] checked:bg-primary dark:checked:bg-primary checked:before:translate-x-4 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/80 dark:aria-invalid:ring-destructive/40\"\n\n  attr(:field, Phoenix.HTML.FormField, required: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(disabled required readonly autofocus))\n\n  def switch(assigns) do\n    %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)\n    assigns = assign(assigns, id: id, name: name, value: value, errors: errors)\n    assigns = assign(assigns, :checked, Phoenix.HTML.Form.normalize_value(\"checkbox\", value))\n    assigns = assign(assigns, :computed_class, cn([@base, assigns.class]))\n\n    ~H\"\"\"\n    <input type=\"hidden\" name={@name} value=\"false\" />\n    <input\n      type=\"checkbox\"\n      role=\"switch\"\n      data-slot=\"switch\"\n      id={@id}\n      name={@name}\n      value=\"true\"\n      checked={@checked}\n      aria-invalid={(@errors != [] && \"true\") || nil}\n      aria-describedby={(@errors != [] && \"#{@id}-error\") || nil}\n      class={@computed_class}\n      {@rest}\n    />\n    <p\n      :if={@errors != []}\n      id={\"#{@id}-error\"}\n      data-slot=\"form-message\"\n      class=\"text-destructive text-sm mt-1\"\n    >\n      {List.first(@errors)}\n    </p>\n    \"\"\"\n  end\nend\n",
       "path": "switch.ex"
     }
   ],
@@ -10,11 +9,7 @@
   "name": "switch",
   "npm_deps": [],
   "registry_deps": [
-    "form",
-    "colocated_css"
-  ],
-  "styles": {
-    "nova": "@layer components {\n  [data-slot=\"switch\"] {\n    @apply relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];\n  }\n\n  [data-slot=\"switch-thumb\"] {\n    @apply pointer-events-none block ring-0 transition-transform bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0;\n  }\n}\n",
-    "vega": "@layer components {\n  [data-slot=\"switch\"] {\n    @apply relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];\n  }\n\n  [data-slot=\"switch-thumb\"] {\n    @apply pointer-events-none block ring-0 transition-transform bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0;\n  }\n}\n"
-  }
+    "cn",
+    "form"
+  ]
 }
\ No newline at end of file
diff --git a/priv/styles/nova.css b/priv/styles/nova.css
index 614818f..0919ec2 100644
--- a/priv/styles/nova.css
+++ b/priv/styles/nova.css
@@ -8,7 +8,6 @@
 @import "./nova/button.css";
 @import "./nova/card.css";
 @import "./nova/carousel.css";
-@import "./nova/checkbox.css";
 @import "./nova/combobox.css";
 @import "./nova/command.css";
 @import "./nova/context_menu.css";
@@ -26,7 +25,6 @@
 @import "./nova/pagination.css";
 @import "./nova/popover.css";
 @import "./nova/progress.css";
-@import "./nova/radio_group.css";
 @import "./nova/resizable.css";
 @import "./nova/scroll_area.css";
 @import "./nova/select.css";
@@ -36,7 +34,6 @@
 @import "./nova/skeleton.css";
 @import "./nova/slider.css";
 @import "./nova/sonner.css";
-@import "./nova/switch.css";
 @import "./nova/table.css";
 @import "./nova/tabs.css";
 @import "./nova/textarea.css";
diff --git a/priv/styles/nova/checkbox.css b/priv/styles/nova/checkbox.css
deleted file mode 100644
index 9314fa5..0000000
--- a/priv/styles/nova/checkbox.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@layer components {
-  [data-slot="checkbox"] {
-    @apply relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3;
-  }
-
-  [data-slot="checkbox-indicator"] {
-    @apply grid place-content-center text-current transition-none [&>svg]:size-3.5;
-  }
-}
diff --git a/priv/styles/nova/radio_group.css b/priv/styles/nova/radio_group.css
deleted file mode 100644
index 8d85746..0000000
--- a/priv/styles/nova/radio_group.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@layer components {
-  [data-slot="radio-group"] {
-    @apply w-full grid gap-2;
-  }
-
-  [data-slot="radio-group-item"] {
-    @apply relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3;
-  }
-}
diff --git a/priv/styles/nova/switch.css b/priv/styles/nova/switch.css
deleted file mode 100644
index 2f11b23..0000000
--- a/priv/styles/nova/switch.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@layer components {
-  [data-slot="switch"] {
-    @apply relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];
-  }
-
-  [data-slot="switch-thumb"] {
-    @apply pointer-events-none block ring-0 transition-transform bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0;
-  }
-}
diff --git a/priv/styles/vega.css b/priv/styles/vega.css
index dafa823..011f115 100644
--- a/priv/styles/vega.css
+++ b/priv/styles/vega.css
@@ -8,7 +8,6 @@
 @import "./vega/button.css";
 @import "./vega/card.css";
 @import "./vega/carousel.css";
-@import "./vega/checkbox.css";
 @import "./vega/combobox.css";
 @import "./vega/command.css";
 @import "./vega/context_menu.css";
@@ -26,7 +25,6 @@
 @import "./vega/pagination.css";
 @import "./vega/popover.css";
 @import "./vega/progress.css";
-@import "./vega/radio_group.css";
 @import "./vega/resizable.css";
 @import "./vega/scroll_area.css";
 @import "./vega/select.css";
@@ -36,7 +34,6 @@
 @import "./vega/skeleton.css";
 @import "./vega/slider.css";
 @import "./vega/sonner.css";
-@import "./vega/switch.css";
 @import "./vega/table.css";
 @import "./vega/tabs.css";
 @import "./vega/textarea.css";
diff --git a/priv/styles/vega/checkbox.css b/priv/styles/vega/checkbox.css
deleted file mode 100644
index 2568c74..0000000
--- a/priv/styles/vega/checkbox.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@layer components {
-  [data-slot="checkbox"] {
-    @apply relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3;
-  }
-
-  [data-slot="checkbox-indicator"] {
-    @apply grid place-content-center text-current transition-none [&>svg]:size-3.5;
-  }
-}
diff --git a/priv/styles/vega/radio_group.css b/priv/styles/vega/radio_group.css
deleted file mode 100644
index 31a5b77..0000000
--- a/priv/styles/vega/radio_group.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@layer components {
-  [data-slot="radio-group"] {
-    @apply w-full grid gap-3;
-  }
-
-  [data-slot="radio-group-item"] {
-    @apply relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50 border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3;
-  }
-}
diff --git a/priv/styles/vega/switch.css b/priv/styles/vega/switch.css
deleted file mode 100644
index af52df1..0000000
--- a/priv/styles/vega/switch.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@layer components {
-  [data-slot="switch"] {
-    @apply relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];
-  }
-
-  [data-slot="switch-thumb"] {
-    @apply pointer-events-none block ring-0 transition-transform bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0;
-  }
-}
diff --git a/test/mix/tasks/shadix_add_test.exs b/test/mix/tasks/shadix_add_test.exs
index f9f133e..d4ea153 100644
--- a/test/mix/tasks/shadix_add_test.exs
+++ b/test/mix/tasks/shadix_add_test.exs
@@ -106,17 +106,16 @@ defmodule Mix.Tasks.Shadix.AddTest do
   end
 
   describe "run/1 with checkbox component" do
-    test "add checkbox pulls in colocated_css and form, rewriting all namespaces", %{
-      tmp_dir: tmp_dir
-    } do
+    test "add checkbox pulls in cn and form, rewriting all namespaces", %{tmp_dir: tmp_dir} do
+      # checkbox is a native-input legacy component (not colocated): it uses cn + form.
       Mix.Tasks.Shadix.Add.run(["checkbox", "--namespace", "Demo.UI", "--dir", tmp_dir])
-      assert File.exists?(Path.join(tmp_dir, "colocated_css.ex"))
+      assert File.exists?(Path.join(tmp_dir, "cn.ex"))
       assert File.exists?(Path.join(tmp_dir, "form.ex"))
       assert File.exists?(Path.join(tmp_dir, "checkbox.ex"))
       checkbox = File.read!(Path.join(tmp_dir, "checkbox.ex"))
       assert checkbox =~ "Demo.UI.Checkbox"
       assert checkbox =~ "import Demo.UI.Form"
-      assert checkbox =~ ":type={Demo.UI.ColocatedCSS}"
+      assert checkbox =~ "import Demo.UI.Cn"
       refute checkbox =~ "Shadix."
     end
   end
diff --git a/test/shadix/components/checkbox_test.exs b/test/shadix/components/checkbox_test.exs
index df880c5..5651f06 100644
--- a/test/shadix/components/checkbox_test.exs
+++ b/test/shadix/components/checkbox_test.exs
@@ -32,21 +32,6 @@ defmodule Shadix.Components.CheckboxTest do
     assert Floki.attribute(doc, "input[type=checkbox]", "value") == ["true"]
   end
 
-  test "renders the check indicator overlay with its data-slot" do
-    assigns = %{f: field(value: true)}
-
-    html =
-      rendered_to_string(~H"""
-      <Shadix.Components.Checkbox.checkbox field={@f} />
-      """)
-
-    doc = parse(html)
-    assert Floki.attribute(doc, "svg", "data-slot") == ["checkbox-indicator"]
-    # The check mark is driven purely by CSS (peer-checked:visible), no JS.
-    [svg_class] = Floki.attribute(doc, "svg[data-slot=checkbox-indicator]", "class")
-    assert svg_class =~ "peer-checked:visible"
-  end
-
   test "emits a hidden false input before the checkbox" do
     assigns = %{f: field(value: false)}
 
@@ -115,10 +100,6 @@ defmodule Shadix.Components.CheckboxTest do
       """)
 
     [class] = Floki.attribute(parse(html), "input[type=checkbox]", "class")
-    # The caller class is appended last so the Tailwind cascade lets it win.
     assert String.ends_with?(class, "ml-2 my-custom")
-    # The `peer` marker (un-@apply-able; drives the indicator's peer-checked
-    # variant) stays inline on the element.
-    assert class =~ "peer"
   end
 end
diff --git a/test/shadix/components/radio_group_test.exs b/test/shadix/components/radio_group_test.exs
index 0e69646..20425cf 100644
--- a/test/shadix/components/radio_group_test.exs
+++ b/test/shadix/components/radio_group_test.exs
@@ -16,7 +16,7 @@ defmodule Shadix.Components.RadioGroupTest do
     }
   end
 
-  test "container renders role=radiogroup, data-slot and wraps its items" do
+  test "container renders role=radiogroup, data-slot and grid classes" do
     assigns = %{f: field()}
 
     html =
@@ -29,7 +29,9 @@ defmodule Shadix.Components.RadioGroupTest do
     doc = parse(html)
     assert Floki.attribute(doc, "div", "role") == ["radiogroup"]
     assert Floki.attribute(doc, "div", "data-slot") == ["radio-group"]
-    assert Floki.attribute(doc, "div input[type=radio]", "data-slot") == ["radio-group-item"]
+    [class] = Floki.attribute(doc, "div", "class")
+    assert class =~ "grid"
+    assert class =~ "gap-3"
   end
 
   test "item renders native radio input with data-slot and field name" do