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] 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