diff --git a/audit/component_map/toggle_group.yml b/audit/component_map/toggle_group.yml
new file mode 100644
index 000000000..57e25cf2b
--- /dev/null
+++ b/audit/component_map/toggle_group.yml
@@ -0,0 +1,36 @@
+shadcn: toggle-group
+shadcn_sha: 8a3536678a528cc012b9e62484290e79d0be410f
+kind: form_control
+docs_view: toggle_group
+parts:
+  ToggleGroup: toggle-group
+  ToggleGroupItem: toggle-group-item
+selectors:
+  ToggleGroup: '[data-slot="toggle-group"]'
+  ToggleGroupItem: '[data-slot="toggle-group-item"]'
+props:
+  # shadcn's own props (variant, size, spacing, orientation) + Base UI ToggleGroup.Props.
+  ToggleGroup:
+    variant: variant
+    size: size
+    spacing: spacing
+    orientation: orientation
+    multiple: type
+    # Base UI defaultValue is always an array; RubyUI value is a scalar for type: :single
+    # and an array for :multiple.
+    defaultValue: value
+    value: null
+    onValueChange: null
+    disabled: disabled
+    loopFocus: loop_focus
+  # shadcn's variant/size + Base UI Toggle.Props.
+  ToggleGroupItem:
+    variant: variant
+    size: size
+    value: value
+    disabled: disabled # item kwarg reaches Toggle and overrides the group value
+    pressed: null
+    defaultPressed: null
+    onPressedChange: null
+rubyui_only:
+  ToggleGroup: [name]
diff --git a/audit/divergences/toggle_group.yml b/audit/divergences/toggle_group.yml
new file mode 100644
index 000000000..fc951ee56
--- /dev/null
+++ b/audit/divergences/toggle_group.yml
@@ -0,0 +1,12 @@
+- component: toggle_group
+  dimension: Behavior
+  rubyui: "With a selection, Tab enters the group on the first pressed item"
+  shadcn: "Base UI makes the first item the tab stop whatever is pressed"
+  reason: "Landing on the current choice tells keyboard users the group's value at once and saves arrow presses; with no selection both enter on the first item."
+  since: "2026-11-04"
+- component: toggle_group
+  dimension: Props
+  rubyui: "value sets the initial state; the state reaches forms through hidden inputs (name)"
+  shadcn: "value/onValueChange, and pressed/defaultPressed/onPressedChange on items (controlled React state)"
+  reason: "Server-rendered Phlex has no controlled state or JS callbacks; listen to clicks on the items or read the hidden inputs."
+  since: "2026-11-04"
diff --git a/audit/fixtures/toggle_group/content.yml b/audit/fixtures/toggle_group/content.yml
new file mode 100644
index 000000000..667e2e021
--- /dev/null
+++ b/audit/fixtures/toggle_group/content.yml
@@ -0,0 +1,12 @@
+# Four groups, same strings and options on both sides:
+# - Alignment: single, outline, spacing 0 (joined), nothing pressed. data-audit-trigger
+#   sits on Left: with no selection both libraries make the first item the tab stop
+#   (with a selection RubyUI picks the pressed item, Base UI the first one).
+# - Formatting: multiple, default variant, spacing 1, Bold pressed.
+# - Size: single, vertical, outline, size sm, spacing 0, Medium pressed.
+# - Range: multiple, outline, spacing 2, whole group disabled.
+groups: [Alignment, Formatting, Size, Range]
+alignment: [Left, Center, Right]
+formatting: [Bold, Italic, Underline]
+size: [Small, Medium, Large]
+range: [Day, Week]
diff --git a/audit/fixtures/toggle_group/rubyui.rb b/audit/fixtures/toggle_group/rubyui.rb
new file mode 100644
index 000000000..850557b8e
--- /dev/null
+++ b/audit/fixtures/toggle_group/rubyui.rb
@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module ShadcnAuditFixtures
+  # RubyUI side of audit/fixtures/toggle_group (strings in content.yml).
+  class ToggleGroup < Phlex::HTML
+    include RubyUI
+
+    def view_template
+      div(id: "toggle-group-fixture", class: "flex flex-col items-start gap-6") do
+        ToggleGroup(type: :single, name: "alignment", variant: :outline, spacing: 0, aria: {label: "Alignment"}) do |g|
+          g.ToggleGroupItem(value: "left", data: {audit_trigger: true}) { "Left" }
+          g.ToggleGroupItem(value: "center") { "Center" }
+          g.ToggleGroupItem(value: "right") { "Right" }
+        end
+        ToggleGroup(type: :multiple, name: "formatting", value: %w[bold], spacing: 1, aria: {label: "Formatting"}) do |g|
+          g.ToggleGroupItem(value: "bold") { "Bold" }
+          g.ToggleGroupItem(value: "italic") { "Italic" }
+          g.ToggleGroupItem(value: "underline") { "Underline" }
+        end
+        ToggleGroup(type: :single, name: "size", value: "medium", variant: :outline, size: :sm, spacing: 0, orientation: :vertical, aria: {label: "Size"}) do |g|
+          g.ToggleGroupItem(value: "small") { "Small" }
+          g.ToggleGroupItem(value: "medium") { "Medium" }
+          g.ToggleGroupItem(value: "large") { "Large" }
+        end
+        ToggleGroup(type: :multiple, name: "range", variant: :outline, spacing: 2, disabled: true, aria: {label: "Range"}) do |g|
+          g.ToggleGroupItem(value: "day") { "Day" }
+          g.ToggleGroupItem(value: "week") { "Week" }
+        end
+      end
+    end
+  end
+end
diff --git a/audit/fixtures/toggle_group/shadcn.tsx b/audit/fixtures/toggle_group/shadcn.tsx
new file mode 100644
index 000000000..5708ce851
--- /dev/null
+++ b/audit/fixtures/toggle_group/shadcn.tsx
@@ -0,0 +1,27 @@
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+
+export default function ToggleGroupFixture() {
+  return (
+    <div id="toggle-group-fixture" className="flex flex-col items-start gap-6">
+      <ToggleGroup aria-label="Alignment" variant="outline" spacing={0}>
+        <ToggleGroupItem value="left" data-audit-trigger="">Left</ToggleGroupItem>
+        <ToggleGroupItem value="center">Center</ToggleGroupItem>
+        <ToggleGroupItem value="right">Right</ToggleGroupItem>
+      </ToggleGroup>
+      <ToggleGroup aria-label="Formatting" multiple spacing={1} defaultValue={["bold"]}>
+        <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+        <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+        <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
+      </ToggleGroup>
+      <ToggleGroup aria-label="Size" variant="outline" size="sm" spacing={0} orientation="vertical" defaultValue={["medium"]}>
+        <ToggleGroupItem value="small">Small</ToggleGroupItem>
+        <ToggleGroupItem value="medium">Medium</ToggleGroupItem>
+        <ToggleGroupItem value="large">Large</ToggleGroupItem>
+      </ToggleGroup>
+      <ToggleGroup aria-label="Range" multiple variant="outline" spacing={2} disabled>
+        <ToggleGroupItem value="day">Day</ToggleGroupItem>
+        <ToggleGroupItem value="week">Week</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}
diff --git a/docs/app/views/docs/toggle_group.rb b/docs/app/views/docs/toggle_group.rb
index 77f15edfa..cccd8aa15 100644
--- a/docs/app/views/docs/toggle_group.rb
+++ b/docs/app/views/docs/toggle_group.rb
@@ -7,7 +7,7 @@ def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(
         title: "Toggle Group",
-        description: "A set of two-state buttons that can be toggled on or off, with single or multiple selection. Mirrors shadcn/ui ToggleGroup."
+        description: "A set of two-state buttons that can be toggled on or off, with single or multiple selection. Arrow keys move between items (loop_focus: false stops at the ends); pressing the pressed item of a single group clears it. Mirrors shadcn/ui ToggleGroup."
       )
 
       Heading(level: 2) { "Usage" }
@@ -75,11 +75,21 @@ def view_template
 
       render Docs::VisualCodeExample.new(title: "Spacing", context: self) do
         <<~RUBY
-          ToggleGroup(type: :single, name: "align", value: "top", variant: :outline, spacing: 2) do |g|
-            g.ToggleGroupItem(value: "top") { "Top" }
-            g.ToggleGroupItem(value: "bottom") { "Bottom" }
-            g.ToggleGroupItem(value: "left") { "Left" }
-            g.ToggleGroupItem(value: "right") { "Right" }
+          div(class: "flex flex-col gap-4") do
+            # spacing: 0 joins the items into one segmented control
+            ToggleGroup(type: :single, name: "align_joined", value: "top", variant: :outline, spacing: 0) do |g|
+              g.ToggleGroupItem(value: "top") { "Top" }
+              g.ToggleGroupItem(value: "bottom") { "Bottom" }
+              g.ToggleGroupItem(value: "left") { "Left" }
+              g.ToggleGroupItem(value: "right") { "Right" }
+            end
+            # spacing defaults to 2 (gap-2); any Integer 0..4 works
+            ToggleGroup(type: :single, name: "align", value: "top", variant: :outline) do |g|
+              g.ToggleGroupItem(value: "top") { "Top" }
+              g.ToggleGroupItem(value: "bottom") { "Bottom" }
+              g.ToggleGroupItem(value: "left") { "Left" }
+              g.ToggleGroupItem(value: "right") { "Right" }
+            end
           end
         RUBY
       end
diff --git a/gem/lib/ruby_ui/toggle/toggle.rb b/gem/lib/ruby_ui/toggle/toggle.rb
index accb0677a..b3d5436e5 100644
--- a/gem/lib/ruby_ui/toggle/toggle.rb
+++ b/gem/lib/ruby_ui/toggle/toggle.rb
@@ -8,10 +8,6 @@ class Toggle < Base
       "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap",
       "transition-[color,box-shadow] outline-none",
       "hover:bg-muted hover:text-foreground aria-pressed:bg-muted",
-      # ToggleGroupItem in single mode is role=radio + aria-checked with data-state,
-      # so aria-pressed misses it. Kept here so an app that updates only Toggle
-      # keeps its existing ToggleGroup's pressed style.
-      "data-[state=on]:bg-muted",
       "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",
diff --git a/gem/lib/ruby_ui/toggle_group/toggle_group.rb b/gem/lib/ruby_ui/toggle_group/toggle_group.rb
index e2c6f574a..9fd97e45d 100644
--- a/gem/lib/ruby_ui/toggle_group/toggle_group.rb
+++ b/gem/lib/ruby_ui/toggle_group/toggle_group.rb
@@ -13,8 +13,9 @@ def initialize(
       variant: :default,
       size: :default,
       disabled: false,
-      spacing: 0,
+      spacing: 2,
       orientation: :horizontal,
+      loop_focus: true,
       **attrs
     )
       @type = type.to_sym
@@ -31,6 +32,9 @@ def initialize(
       @size = size.to_sym
       @disabled = disabled
       @spacing = spacing
+      raise ArgumentError, "loop_focus must be true or false" unless [true, false].include?(loop_focus)
+
+      @loop_focus = loop_focus
       super(**attrs)
     end
 
@@ -54,11 +58,22 @@ def item_context
     end
 
     def ToggleGroupItem(**kwargs, &block)
-      render RubyUI::ToggleGroupItem.new(group_context: item_context, **kwargs), &block
+      context = item_context.merge(tab_stop: claim_tab_stop?(kwargs))
+      render RubyUI::ToggleGroupItem.new(group_context: context, **kwargs), &block
     end
 
     private
 
+    # One tab stop in the server HTML: the first pressed enabled item, else the
+    # first enabled item. The controller keeps it in sync afterwards.
+    def claim_tab_stop?(kwargs)
+      return false if @tab_stop_claimed
+      return false if kwargs.fetch(:disabled, @disabled)
+      return false if selected_values.any? && !selected_values.include?(kwargs[:value].to_s)
+
+      @tab_stop_claimed = true
+    end
+
     def selected_values
       case @type
       when :single then @value.nil? ? [] : [@value.to_s]
@@ -89,24 +104,29 @@ def render_hidden_inputs
     end
 
     def default_attrs
-      {
-        role: (@type == :single) ? "radiogroup" : "group",
-        data: {
-          controller: "ruby-ui--toggle-group",
-          "ruby-ui--toggle-group-type-value": @type.to_s,
-          "ruby-ui--toggle-group-name-value": @name.to_s,
-          orientation: @orientation.to_s,
-          spacing: @spacing.to_s
-        },
-        class: container_classes
+      data = {
+        slot: "toggle-group",
+        variant: @variant.to_s,
+        size: @size.to_s,
+        spacing: @spacing.to_s,
+        orientation: @orientation.to_s,
+        controller: "ruby-ui--toggle-group",
+        "ruby-ui--toggle-group-type-value": @type.to_s,
+        "ruby-ui--toggle-group-name-value": @name.to_s,
+        "ruby-ui--toggle-group-orientation-value": @orientation.to_s,
+        "ruby-ui--toggle-group-loop-focus-value": @loop_focus.to_s
       }
+      data[:multiple] = "" if @type == :multiple
+      data[:disabled] = "" if @disabled
+
+      {role: "group", data: data, class: container_classes}
     end
 
     def container_classes
       base = if @orientation == :vertical
         "flex w-fit flex-col items-stretch rounded-md"
       else
-        "flex w-fit items-center rounded-md"
+        "flex w-fit flex-row items-center rounded-md"
       end
 
       [
diff --git a/gem/lib/ruby_ui/toggle_group/toggle_group_controller.js b/gem/lib/ruby_ui/toggle_group/toggle_group_controller.js
index 00121ec0b..149165f21 100644
--- a/gem/lib/ruby_ui/toggle_group/toggle_group_controller.js
+++ b/gem/lib/ruby_ui/toggle_group/toggle_group_controller.js
@@ -3,95 +3,130 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="ruby-ui--toggle-group"
 export default class extends Controller {
   static targets = ["item", "input"]
-  static values = { type: String, name: String }
+  static values = {
+    type: String,
+    name: String,
+    orientation: { type: String, default: "horizontal" },
+    loopFocus: { type: Boolean, default: true }
+  }
 
   connect() {
     this.reconcile()
+    // Keep one tab stop when an item gets disabled or enabled later.
+    this.observer = new MutationObserver(() => this.ensureTabStop())
+    this.observer.observe(this.element, { subtree: true, attributes: true, attributeFilter: ["disabled"] })
+  }
+
+  disconnect() {
+    this.observer?.disconnect()
+    this.observer = null
+  }
+
+  // Items added or removed after connect: keep one tab stop and the hidden
+  // inputs in sync with what is pressed.
+  itemTargetConnected() {
+    this.ensureTabStop()
+    this.rebuildInputs()
   }
 
+  itemTargetDisconnected() {
+    this.ensureTabStop()
+    this.rebuildInputs()
+  }
+
+  // Native <button> activation (click, Enter, Space) lands here.
   select(event) {
     const item = event.currentTarget
     if (item.disabled) return
 
     if (this.typeValue === "single") {
-      this.itemTargets.forEach(el => this.setPressed(el, el === item))
+      // Like Base UI: pressing the pressed item clears the value.
+      const pressed = !this.isPressed(item)
+      this.itemTargets.forEach(el => this.setPressed(el, el === item && pressed))
     } else {
       this.setPressed(item, !this.isPressed(item))
     }
 
     this.rebuildInputs()
-    this.updateRovingTabindex(item)
+    this.setTabStop(item)
   }
 
   navigate(event) {
-    if (this.typeValue !== "single") return
     const items = this.enabledItems()
-    if (items.length === 0) return
-
-    const isRtl = document.documentElement.dir === "rtl"
     const currentIndex = items.indexOf(event.currentTarget)
-    let nextIndex = currentIndex
-
-    switch (event.key) {
-      case "ArrowRight":
-      case "ArrowDown":
-        nextIndex = (currentIndex + (isRtl && event.key === "ArrowRight" ? -1 : 1) + items.length) % items.length
-        break
-      case "ArrowLeft":
-      case "ArrowUp":
-        nextIndex = (currentIndex + (isRtl && event.key === "ArrowLeft" ? 1 : -1) + items.length) % items.length
-        break
-      case "Home":
-        nextIndex = 0
-        break
-      case "End":
-        nextIndex = items.length - 1
-        break
-      case " ":
-      case "Enter":
-        event.preventDefault()
-        event.currentTarget.click()
-        return
-      default:
-        return
+    if (currentIndex === -1) return
+
+    const step = this.stepFor(event.key)
+    let nextIndex
+
+    if (event.key === "Home") {
+      nextIndex = 0
+    } else if (event.key === "End") {
+      nextIndex = items.length - 1
+    } else if (step) {
+      nextIndex = currentIndex + step
+      if (nextIndex < 0 || nextIndex >= items.length) {
+        // At an end with loop_focus: false the key is still ours: don't scroll the page.
+        if (!this.loopFocusValue) return event.preventDefault()
+        nextIndex = (nextIndex + items.length) % items.length
+      }
+    } else {
+      return
     }
 
     event.preventDefault()
     const next = items[nextIndex]
-    this.updateRovingTabindex(next)
+    this.setTabStop(next)
     next.focus()
   }
 
-  reconcile() {
-    if (this.typeValue === "single") {
-      const pressed = this.itemTargets.find(el => this.isPressed(el))
-      const first = pressed || this.enabledItems()[0]
-      this.itemTargets.forEach(el => {
-        el.setAttribute("tabindex", el === first ? "0" : "-1")
-      })
-    } else {
-      this.itemTargets.forEach(el => el.setAttribute("tabindex", "0"))
+  // Arrow keys follow the orientation: Left/Right when horizontal (flipped in
+  // RTL), Up/Down when vertical.
+  stepFor(key) {
+    if (this.orientationValue === "vertical") {
+      if (key === "ArrowDown") return 1
+      if (key === "ArrowUp") return -1
+      return 0
     }
+
+    const rtl = getComputedStyle(this.element).direction === "rtl"
+    if (key === "ArrowRight") return rtl ? -1 : 1
+    if (key === "ArrowLeft") return rtl ? 1 : -1
+    return 0
+  }
+
+  // One tab stop per group: the first pressed enabled item, else the first
+  // enabled item.
+  reconcile() {
+    const enabled = this.enabledItems()
+    this.setTabStop(enabled.find(el => this.isPressed(el)) || enabled[0])
     this.rebuildInputs()
   }
 
+  // Keeps exactly one tab stop: the current one if it is still enabled, else
+  // the first pressed enabled item, else the first enabled item.
+  ensureTabStop() {
+    const enabled = this.enabledItems()
+    this.setTabStop(
+      enabled.find(el => el.getAttribute("tabindex") === "0") ||
+        enabled.find(el => this.isPressed(el)) ||
+        enabled[0]
+    )
+  }
+
   isPressed(item) {
     return item.dataset.state === "on"
   }
 
   setPressed(item, pressed) {
     item.dataset.state = pressed ? "on" : "off"
-    if (this.typeValue === "single") {
-      item.setAttribute("aria-checked", pressed ? "true" : "false")
-    } else {
-      item.setAttribute("aria-pressed", pressed ? "true" : "false")
-    }
+    item.setAttribute("aria-pressed", pressed ? "true" : "false")
+    item.toggleAttribute("data-pressed", pressed)
   }
 
-  updateRovingTabindex(focusedItem) {
-    if (this.typeValue !== "single") return
+  setTabStop(stop) {
     this.itemTargets.forEach(el => {
-      el.setAttribute("tabindex", el === focusedItem ? "0" : "-1")
+      el.setAttribute("tabindex", el === stop ? "0" : "-1")
     })
   }
 
diff --git a/gem/lib/ruby_ui/toggle_group/toggle_group_item.rb b/gem/lib/ruby_ui/toggle_group/toggle_group_item.rb
index 2a654f196..486fb7562 100644
--- a/gem/lib/ruby_ui/toggle_group/toggle_group_item.rb
+++ b/gem/lib/ruby_ui/toggle_group/toggle_group_item.rb
@@ -2,7 +2,9 @@
 
 module RubyUI
   class ToggleGroupItem < Toggle
-    JOIN_BASE = "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10"
+    JOIN_BASE = "shrink-0 focus:z-10 focus-visible:z-10 data-[state=on]:bg-muted"
+    # Joined groups (spacing 0): vega's cn-toggle-group-item padding and corners.
+    JOINED = "rounded-none shadow-none px-2 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5"
 
     def initialize(value:, group_context:, variant: nil, size: nil, **attrs)
       @item_value = value.to_s
@@ -27,39 +29,42 @@ def view_template(&block)
     private
 
     def default_attrs
-      attrs = {type: "button"}
+      attrs = {type: "button", aria: {pressed: @pressed.to_s}, tabindex: initial_tabindex}
       attrs[:disabled] = true if @disabled
-      attrs[:data] = {
+
+      data = {
+        slot: "toggle-group-item",
+        variant: @variant.to_s,
+        size: @size.to_s,
+        spacing: @group_context[:spacing].to_s,
         state: @pressed ? "on" : "off",
         value: @item_value,
         "ruby-ui--toggle-group-target": "item",
         action: "click->ruby-ui--toggle-group#select keydown->ruby-ui--toggle-group#navigate"
       }
+      data[:pressed] = "" if @pressed
+      data[:disabled] = "" if @disabled
+      attrs[:data] = data
       attrs[:class] = [Toggle.classes_for(variant: @variant, size: @size), join_classes]
-
-      if @group_context[:type] == :single
-        attrs[:role] = "radio"
-        attrs[:aria] = {checked: @pressed.to_s}
-        attrs[:tabindex] = @pressed ? "0" : "-1"
-      else
-        attrs[:aria] = {pressed: @pressed.to_s}
-        attrs[:tabindex] = "0"
-      end
-
       attrs
     end
 
+    # The group picks the single tab stop (see ToggleGroup#claim_tab_stop?).
+    def initial_tabindex
+      @group_context[:tab_stop] ? "0" : "-1"
+    end
+
     def join_classes
       classes = [JOIN_BASE]
       return classes unless @group_context[:spacing] == 0
 
-      classes << "rounded-none shadow-none"
+      classes << JOINED
       if @group_context[:orientation] == :vertical
         classes << "first-of-type:rounded-t-md last-of-type:rounded-b-md"
-        classes << "border-t-0 first-of-type:border-t" if @group_context[:variant] == :outline
+        classes << "border-t-0 first-of-type:border-t" if @variant == :outline
       else
         classes << "first-of-type:rounded-l-md last-of-type:rounded-r-md"
-        classes << "border-l-0 first-of-type:border-l" if @group_context[:variant] == :outline
+        classes << "border-l-0 first-of-type:border-l" if @variant == :outline
       end
       classes
     end
diff --git a/gem/test/ruby_ui/toggle_group_test.rb b/gem/test/ruby_ui/toggle_group_test.rb
index 8ff12d3da..94e4fe4ea 100644
--- a/gem/test/ruby_ui/toggle_group_test.rb
+++ b/gem/test/ruby_ui/toggle_group_test.rb
@@ -3,15 +3,89 @@
 require "test_helper"
 
 class RubyUI::ToggleGroupTest < ComponentTest
-  def test_single_uses_radiogroup_role
+  def test_single_uses_group_role_with_aria_pressed
     output = phlex do
-      RubyUI.ToggleGroup(type: :single, name: "align") do |g|
+      RubyUI.ToggleGroup(type: :single, name: "align", value: "left") do |g|
         g.ToggleGroupItem(value: "left") { "L" }
         g.ToggleGroupItem(value: "right") { "R" }
       end
     end
-    assert_match(/role="radiogroup"/, output)
-    assert_match(/role="radio"/, output)
+    assert_match(/role="group"/, output)
+    refute_match(/radio/, output)
+    refute_match(/aria-checked/, output)
+    assert_match(/<button[^>]*aria-pressed="true"[^>]*data-value="left"/, output)
+    assert_match(/<button[^>]*aria-pressed="false"[^>]*data-value="right"/, output)
+  end
+
+  def test_emits_shadcn_data_attributes
+    output = phlex do
+      RubyUI.ToggleGroup(type: :multiple, variant: :outline, size: :sm, value: %w[a]) do |g|
+        g.ToggleGroupItem(value: "a") { "A" }
+        g.ToggleGroupItem(value: "b") { "B" }
+      end
+    end
+    assert_match(/<div[^>]*data-slot="toggle-group"/, output)
+    assert_match(/<div[^>]*data-variant="outline"[^>]*data-size="sm"[^>]*data-spacing="2"[^>]*data-orientation="horizontal"/, output)
+    assert_match(/<div[^>]*data-multiple/, output)
+    assert_equal 2, output.scan('data-slot="toggle-group-item"').size
+    assert_match(/<button[^>]*data-variant="outline"[^>]*data-size="sm"[^>]*data-spacing="2"/, output)
+    # data-action contains "->", so count attributes instead of matching across the tag
+    assert_equal 1, output.scan('data-pressed=""').size
+  end
+
+  def test_disabled_group_and_items_carry_data_disabled
+    output = phlex do
+      RubyUI.ToggleGroup(type: :single, disabled: true) do |g|
+        g.ToggleGroupItem(value: "a") { "A" }
+      end
+    end
+    assert_match(/<div[^>]*data-disabled/, output)
+    assert_equal 2, output.scan('data-disabled=""').size
+  end
+
+  def test_item_level_disabled
+    output = phlex do
+      RubyUI.ToggleGroup(type: :single) do |g|
+        g.ToggleGroupItem(value: "a", disabled: true) { "A" }
+        g.ToggleGroupItem(value: "b") { "B" }
+      end
+    end
+    assert_equal 1, output.scan(/<button[^>]*\sdisabled(?:=|\s|>)/).size
+    # the disabled first item can't be the tab stop
+    assert_match(/tabindex="0"[^>]*data-value="b"/, output)
+  end
+
+  def test_default_spacing_is_two
+    output = phlex do
+      RubyUI.ToggleGroup(type: :single) do |g|
+        g.ToggleGroupItem(value: "a") { "A" }
+      end
+    end
+    assert_match(/data-spacing="2"/, output)
+    assert_match(/gap-2/, output)
+    refute_match(/rounded-none/, output)
+  end
+
+  def test_renders_loop_focus_and_orientation_stimulus_values
+    output = phlex do
+      RubyUI.ToggleGroup(type: :single, orientation: :vertical, loop_focus: false) do |g|
+        g.ToggleGroupItem(value: "a") { "A" }
+      end
+    end
+    assert_match(/data-ruby-ui--toggle-group-loop-focus-value="false"/, output)
+    assert_match(/data-ruby-ui--toggle-group-orientation-value="vertical"/, output)
+  end
+
+  def test_items_keep_size_min_width_and_padding
+    output = phlex do
+      RubyUI.ToggleGroup(type: :single) do |g|
+        g.ToggleGroupItem(value: "a") { "A" }
+      end
+    end
+    assert_match(/min-w-9/, output)
+    refute_match(/min-w-0/, output)
+    refute_match(/px-3/, output)
+    assert_match(/data-\[state=on\]:bg-muted/, output)
   end
 
   def test_multiple_uses_group_role_with_aria_pressed
@@ -35,7 +109,7 @@ def test_single_initial_value_sets_pressed_item
     end
     # right item is pressed — assert both attributes appear (they are on the same button element)
     assert_match(/data-value="right"/, output)
-    assert_match(/aria-checked="true"/, output)
+    assert_match(/aria-pressed="true"/, output)
     assert_match(/data-state="on"[^>]*data-value="right"|data-value="right"[^>]*data-state="on"/, output)
     # exactly one hidden input with selected value
     assert_match(/<input[^>]*type="hidden"[^>]*name="align"[^>]*value="right"/, output)
@@ -54,6 +128,17 @@ def test_multiple_initial_value_array_pressed
     refute_match(/<input[^>]*name="fmt\[\]"[^>]*value="underline"/, output)
   end
 
+  def test_multiple_roving_tabindex
+    output = phlex do
+      RubyUI.ToggleGroup(type: :multiple, value: %w[b]) do |g|
+        g.ToggleGroupItem(value: "a") { "A" }
+        g.ToggleGroupItem(value: "b") { "B" }
+      end
+    end
+    assert_equal 1, output.scan('tabindex="0"').size
+    assert_match(/tabindex="0"[^>]*data-value="b"|data-value="b"[^>]*tabindex="0"/, output)
+  end
+
   def test_single_roving_tabindex
     output = phlex do
       RubyUI.ToggleGroup(type: :single, name: "align", value: "left") do |g|
@@ -98,12 +183,13 @@ def test_group_items_dont_have_standalone_toggle_controller
 
   def test_joined_items_have_first_last_rounded
     output = phlex do
-      RubyUI.ToggleGroup(type: :single, name: "x") do |g|
+      RubyUI.ToggleGroup(type: :single, name: "x", spacing: 0) do |g|
         g.ToggleGroupItem(value: "a") { "A" }
         g.ToggleGroupItem(value: "b") { "B" }
       end
     end
     assert_match(/rounded-none/, output)
+    assert_match(/px-2/, output)
     assert_match(/first-of-type:rounded-l-md/, output)
     assert_match(/last-of-type:rounded-r-md/, output)
   end
@@ -121,7 +207,7 @@ def test_spacing_adds_gap_class
 
   def test_vertical_orientation
     output = phlex do
-      RubyUI.ToggleGroup(type: :single, name: "x", orientation: :vertical) do |g|
+      RubyUI.ToggleGroup(type: :single, name: "x", orientation: :vertical, spacing: 0) do |g|
         g.ToggleGroupItem(value: "a") { "A" }
         g.ToggleGroupItem(value: "b") { "B" }
       end
@@ -132,7 +218,7 @@ def test_vertical_orientation
 
   def test_outline_joined_adds_shadow_xs
     output = phlex do
-      RubyUI.ToggleGroup(type: :single, name: "x", variant: :outline) do |g|
+      RubyUI.ToggleGroup(type: :single, name: "x", variant: :outline, spacing: 0) do |g|
         g.ToggleGroupItem(value: "a") { "A" }
       end
     end
@@ -141,6 +227,35 @@ def test_outline_joined_adds_shadow_xs
     assert_match(/first-of-type:border-l/, output)
   end
 
+  def test_one_server_tab_stop_without_selection
+    output = phlex do
+      RubyUI.ToggleGroup(type: :multiple) do |g|
+        g.ToggleGroupItem(value: "a") { "A" }
+        g.ToggleGroupItem(value: "b") { "B" }
+      end
+    end
+    assert_equal 1, output.scan('tabindex="0"').size
+    assert_match(/tabindex="0"[^>]*data-value="a"/, output)
+  end
+
+  def test_one_server_tab_stop_with_several_selected
+    output = phlex do
+      RubyUI.ToggleGroup(type: :multiple, value: %w[c b]) do |g|
+        g.ToggleGroupItem(value: "a") { "A" }
+        g.ToggleGroupItem(value: "b") { "B" }
+        g.ToggleGroupItem(value: "c") { "C" }
+      end
+    end
+    assert_equal 1, output.scan('tabindex="0"').size
+    assert_match(/tabindex="0"[^>]*data-value="b"/, output)
+  end
+
+  def test_invalid_loop_focus_raises
+    assert_raises(ArgumentError) do
+      phlex { RubyUI.ToggleGroup(loop_focus: nil) { |g| g.ToggleGroupItem(value: "a") { "A" } } }
+    end
+  end
+
   def test_invalid_orientation_raises
     assert_raises(ArgumentError) do
       phlex do
@@ -159,7 +274,7 @@ def test_single_pressed_item_keeps_pressed_style
       end
     end
     pressed = output.split("<button").find { |b| b.include?(%(data-value="right")) }
-    assert_match(/data-state="on"/, pressed)
-    assert_match(/data-\[state=on\]:bg-muted/, pressed)
+    assert_match(/aria-pressed="true"/, pressed)
+    assert_match(/aria-pressed:bg-muted/, pressed)
   end
 end
diff --git a/mcp/data/registry/components/toggle.json b/mcp/data/registry/components/toggle.json
index 5f0090aab..7670656af 100644
--- a/mcp/data/registry/components/toggle.json
+++ b/mcp/data/registry/components/toggle.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "toggle.rb",
-      "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class Toggle < Base\n    # Matches shadcn Base UI + vega (cn-toggle). A child marked\n    # data-icon=\"inline-start\" or \"inline-end\" tightens the padding on that side.\n    BASE_CLASSES = [\n      \"group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap\",\n      \"transition-[color,box-shadow] outline-none\",\n      \"hover:bg-muted hover:text-foreground aria-pressed:bg-muted\",\n      # ToggleGroupItem in single mode is role=radio + aria-checked with data-state,\n      # so aria-pressed misses it. Kept here so an app that updates only Toggle\n      # keeps its existing ToggleGroup's pressed style.\n      \"data-[state=on]:bg-muted\",\n      \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n      \"disabled:pointer-events-none disabled:opacity-50\",\n      \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n      \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n    ].freeze\n\n    VARIANT_CLASSES = {\n      default: \"bg-transparent\",\n      outline: \"border border-input bg-transparent shadow-xs hover:bg-muted\"\n    }.freeze\n\n    SIZE_CLASSES = {\n      sm: \"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      default: \"h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n      lg: \"h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\"\n    }.freeze\n\n    def self.classes_for(variant:, size:)\n      [BASE_CLASSES, VARIANT_CLASSES.fetch(variant, VARIANT_CLASSES[:default]), SIZE_CLASSES.fetch(size, SIZE_CLASSES[:default])]\n    end\n\n    def initialize(\n      pressed: false,\n      name: nil,\n      value: \"1\",\n      unpressed_value: nil,\n      variant: :default,\n      size: :default,\n      disabled: false,\n      wrapper: {},\n      **attrs\n    )\n      @pressed = pressed\n      @name = name\n      @value = value\n      @unpressed_value = unpressed_value\n      @variant = variant.to_sym\n      @size = size.to_sym\n      @disabled = disabled\n      @wrapper = wrapper\n      super(**attrs)\n    end\n\n    def view_template(&block)\n      span(**wrapper_attrs) do\n        button(**attrs, &block)\n        render_hidden_input if @name\n      end\n    end\n\n    private\n\n    def wrapper_attrs\n      mix(wrapper_default_attrs, @wrapper)\n    end\n\n    def wrapper_default_attrs\n      {\n        class: \"contents\",\n        data: {\n          controller: \"ruby-ui--toggle\",\n          action: \"click->ruby-ui--toggle#toggle\",\n          \"ruby-ui--toggle-pressed-value\": @pressed.to_s,\n          \"ruby-ui--toggle-value-value\": @value.to_s,\n          \"ruby-ui--toggle-unpressed-value-value\": @unpressed_value.to_s\n        }\n      }\n    end\n\n    def render_hidden_input\n      input(\n        type: \"hidden\",\n        name: @name,\n        value: @pressed ? @value : @unpressed_value.to_s,\n        data: {\"ruby-ui--toggle-target\": \"input\"}\n      )\n    end\n\n    def default_attrs\n      base = {type: \"button\"}\n      base[:disabled] = true if @disabled\n      base.merge(\n        aria: {pressed: @pressed.to_s},\n        data: {\n          slot: \"toggle\",\n          pressed: @pressed || nil,\n          disabled: @disabled || nil,\n          \"ruby-ui--toggle-target\": \"button\"\n        },\n        class: self.class.classes_for(variant: @variant, size: @size)\n      )\n    end\n  end\nend\n"
+      "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class Toggle < Base\n    # Matches shadcn Base UI + vega (cn-toggle). A child marked\n    # data-icon=\"inline-start\" or \"inline-end\" tightens the padding on that side.\n    BASE_CLASSES = [\n      \"group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap\",\n      \"transition-[color,box-shadow] outline-none\",\n      \"hover:bg-muted hover:text-foreground aria-pressed:bg-muted\",\n      \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n      \"disabled:pointer-events-none disabled:opacity-50\",\n      \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n      \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n    ].freeze\n\n    VARIANT_CLASSES = {\n      default: \"bg-transparent\",\n      outline: \"border border-input bg-transparent shadow-xs hover:bg-muted\"\n    }.freeze\n\n    SIZE_CLASSES = {\n      sm: \"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      default: \"h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n      lg: \"h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\"\n    }.freeze\n\n    def self.classes_for(variant:, size:)\n      [BASE_CLASSES, VARIANT_CLASSES.fetch(variant, VARIANT_CLASSES[:default]), SIZE_CLASSES.fetch(size, SIZE_CLASSES[:default])]\n    end\n\n    def initialize(\n      pressed: false,\n      name: nil,\n      value: \"1\",\n      unpressed_value: nil,\n      variant: :default,\n      size: :default,\n      disabled: false,\n      wrapper: {},\n      **attrs\n    )\n      @pressed = pressed\n      @name = name\n      @value = value\n      @unpressed_value = unpressed_value\n      @variant = variant.to_sym\n      @size = size.to_sym\n      @disabled = disabled\n      @wrapper = wrapper\n      super(**attrs)\n    end\n\n    def view_template(&block)\n      span(**wrapper_attrs) do\n        button(**attrs, &block)\n        render_hidden_input if @name\n      end\n    end\n\n    private\n\n    def wrapper_attrs\n      mix(wrapper_default_attrs, @wrapper)\n    end\n\n    def wrapper_default_attrs\n      {\n        class: \"contents\",\n        data: {\n          controller: \"ruby-ui--toggle\",\n          action: \"click->ruby-ui--toggle#toggle\",\n          \"ruby-ui--toggle-pressed-value\": @pressed.to_s,\n          \"ruby-ui--toggle-value-value\": @value.to_s,\n          \"ruby-ui--toggle-unpressed-value-value\": @unpressed_value.to_s\n        }\n      }\n    end\n\n    def render_hidden_input\n      input(\n        type: \"hidden\",\n        name: @name,\n        value: @pressed ? @value : @unpressed_value.to_s,\n        data: {\"ruby-ui--toggle-target\": \"input\"}\n      )\n    end\n\n    def default_attrs\n      base = {type: \"button\"}\n      base[:disabled] = true if @disabled\n      base.merge(\n        aria: {pressed: @pressed.to_s},\n        data: {\n          slot: \"toggle\",\n          pressed: @pressed || nil,\n          disabled: @disabled || nil,\n          \"ruby-ui--toggle-target\": \"button\"\n        },\n        class: self.class.classes_for(variant: @variant, size: @size)\n      )\n    end\n  end\nend\n"
     },
     {
       "path": "toggle_controller.js",
diff --git a/mcp/data/registry/components/toggle_group.json b/mcp/data/registry/components/toggle_group.json
index 03db2626b..b3d54a2ab 100644
--- a/mcp/data/registry/components/toggle_group.json
+++ b/mcp/data/registry/components/toggle_group.json
@@ -4,15 +4,15 @@
   "files": [
     {
       "path": "toggle_group.rb",
-      "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class ToggleGroup < Base\n    SPACING_GAP = {0 => nil, 1 => \"gap-1\", 2 => \"gap-2\", 3 => \"gap-3\", 4 => \"gap-4\"}.freeze\n    VALID_TYPES = [:single, :multiple].freeze\n    VALID_ORIENTATIONS = [:horizontal, :vertical].freeze\n\n    def initialize(\n      type: :single,\n      name: nil,\n      value: nil,\n      variant: :default,\n      size: :default,\n      disabled: false,\n      spacing: 0,\n      orientation: :horizontal,\n      **attrs\n    )\n      @type = type.to_sym\n      raise ArgumentError, \"type must be :single or :multiple\" unless VALID_TYPES.include?(@type)\n\n      @orientation = orientation.to_sym\n      raise ArgumentError, \"orientation must be :horizontal or :vertical\" unless VALID_ORIENTATIONS.include?(@orientation)\n\n      raise ArgumentError, \"spacing must be an Integer 0..4\" unless spacing.is_a?(Integer) && (0..4).cover?(spacing)\n\n      @name = name\n      @value = value\n      @variant = variant.to_sym\n      @size = size.to_sym\n      @disabled = disabled\n      @spacing = spacing\n      super(**attrs)\n    end\n\n    def view_template(&block)\n      div(**attrs) do\n        yield(self)\n        render_hidden_inputs\n      end\n    end\n\n    def item_context\n      {\n        type: @type,\n        variant: @variant,\n        size: @size,\n        disabled: @disabled,\n        selected_values: selected_values,\n        spacing: @spacing,\n        orientation: @orientation\n      }\n    end\n\n    def ToggleGroupItem(**kwargs, &block)\n      render RubyUI::ToggleGroupItem.new(group_context: item_context, **kwargs), &block\n    end\n\n    private\n\n    def selected_values\n      case @type\n      when :single then @value.nil? ? [] : [@value.to_s]\n      when :multiple then Array(@value).map(&:to_s)\n      end\n    end\n\n    def render_hidden_inputs\n      return unless @name\n\n      if @type == :single\n        input(\n          type: \"hidden\",\n          name: @name,\n          value: selected_values.first.to_s,\n          data: {\"ruby-ui--toggle-group-target\": \"input\"}\n        )\n      else\n        selected_values.each do |v|\n          input(\n            type: \"hidden\",\n            name: \"#{@name}[]\",\n            value: v,\n            data: {\"ruby-ui--toggle-group-target\": \"input\"}\n          )\n        end\n      end\n    end\n\n    def default_attrs\n      {\n        role: (@type == :single) ? \"radiogroup\" : \"group\",\n        data: {\n          controller: \"ruby-ui--toggle-group\",\n          \"ruby-ui--toggle-group-type-value\": @type.to_s,\n          \"ruby-ui--toggle-group-name-value\": @name.to_s,\n          orientation: @orientation.to_s,\n          spacing: @spacing.to_s\n        },\n        class: container_classes\n      }\n    end\n\n    def container_classes\n      base = if @orientation == :vertical\n        \"flex w-fit flex-col items-stretch rounded-md\"\n      else\n        \"flex w-fit items-center rounded-md\"\n      end\n\n      [\n        base,\n        SPACING_GAP[@spacing],\n        (@spacing == 0 && @variant == :outline) ? \"shadow-xs\" : nil\n      ].compact\n    end\n  end\nend\n"
+      "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class ToggleGroup < Base\n    SPACING_GAP = {0 => nil, 1 => \"gap-1\", 2 => \"gap-2\", 3 => \"gap-3\", 4 => \"gap-4\"}.freeze\n    VALID_TYPES = [:single, :multiple].freeze\n    VALID_ORIENTATIONS = [:horizontal, :vertical].freeze\n\n    def initialize(\n      type: :single,\n      name: nil,\n      value: nil,\n      variant: :default,\n      size: :default,\n      disabled: false,\n      spacing: 2,\n      orientation: :horizontal,\n      loop_focus: true,\n      **attrs\n    )\n      @type = type.to_sym\n      raise ArgumentError, \"type must be :single or :multiple\" unless VALID_TYPES.include?(@type)\n\n      @orientation = orientation.to_sym\n      raise ArgumentError, \"orientation must be :horizontal or :vertical\" unless VALID_ORIENTATIONS.include?(@orientation)\n\n      raise ArgumentError, \"spacing must be an Integer 0..4\" unless spacing.is_a?(Integer) && (0..4).cover?(spacing)\n\n      @name = name\n      @value = value\n      @variant = variant.to_sym\n      @size = size.to_sym\n      @disabled = disabled\n      @spacing = spacing\n      raise ArgumentError, \"loop_focus must be true or false\" unless [true, false].include?(loop_focus)\n\n      @loop_focus = loop_focus\n      super(**attrs)\n    end\n\n    def view_template(&block)\n      div(**attrs) do\n        yield(self)\n        render_hidden_inputs\n      end\n    end\n\n    def item_context\n      {\n        type: @type,\n        variant: @variant,\n        size: @size,\n        disabled: @disabled,\n        selected_values: selected_values,\n        spacing: @spacing,\n        orientation: @orientation\n      }\n    end\n\n    def ToggleGroupItem(**kwargs, &block)\n      context = item_context.merge(tab_stop: claim_tab_stop?(kwargs))\n      render RubyUI::ToggleGroupItem.new(group_context: context, **kwargs), &block\n    end\n\n    private\n\n    # One tab stop in the server HTML: the first pressed enabled item, else the\n    # first enabled item. The controller keeps it in sync afterwards.\n    def claim_tab_stop?(kwargs)\n      return false if @tab_stop_claimed\n      return false if kwargs.fetch(:disabled, @disabled)\n      return false if selected_values.any? && !selected_values.include?(kwargs[:value].to_s)\n\n      @tab_stop_claimed = true\n    end\n\n    def selected_values\n      case @type\n      when :single then @value.nil? ? [] : [@value.to_s]\n      when :multiple then Array(@value).map(&:to_s)\n      end\n    end\n\n    def render_hidden_inputs\n      return unless @name\n\n      if @type == :single\n        input(\n          type: \"hidden\",\n          name: @name,\n          value: selected_values.first.to_s,\n          data: {\"ruby-ui--toggle-group-target\": \"input\"}\n        )\n      else\n        selected_values.each do |v|\n          input(\n            type: \"hidden\",\n            name: \"#{@name}[]\",\n            value: v,\n            data: {\"ruby-ui--toggle-group-target\": \"input\"}\n          )\n        end\n      end\n    end\n\n    def default_attrs\n      data = {\n        slot: \"toggle-group\",\n        variant: @variant.to_s,\n        size: @size.to_s,\n        spacing: @spacing.to_s,\n        orientation: @orientation.to_s,\n        controller: \"ruby-ui--toggle-group\",\n        \"ruby-ui--toggle-group-type-value\": @type.to_s,\n        \"ruby-ui--toggle-group-name-value\": @name.to_s,\n        \"ruby-ui--toggle-group-orientation-value\": @orientation.to_s,\n        \"ruby-ui--toggle-group-loop-focus-value\": @loop_focus.to_s\n      }\n      data[:multiple] = \"\" if @type == :multiple\n      data[:disabled] = \"\" if @disabled\n\n      {role: \"group\", data: data, class: container_classes}\n    end\n\n    def container_classes\n      base = if @orientation == :vertical\n        \"flex w-fit flex-col items-stretch rounded-md\"\n      else\n        \"flex w-fit flex-row items-center rounded-md\"\n      end\n\n      [\n        base,\n        SPACING_GAP[@spacing],\n        (@spacing == 0 && @variant == :outline) ? \"shadow-xs\" : nil\n      ].compact\n    end\n  end\nend\n"
     },
     {
       "path": "toggle_group_controller.js",
-      "content": "import { Controller } from \"@hotwired/stimulus\"\n\n// Connects to data-controller=\"ruby-ui--toggle-group\"\nexport default class extends Controller {\n  static targets = [\"item\", \"input\"]\n  static values = { type: String, name: String }\n\n  connect() {\n    this.reconcile()\n  }\n\n  select(event) {\n    const item = event.currentTarget\n    if (item.disabled) return\n\n    if (this.typeValue === \"single\") {\n      this.itemTargets.forEach(el => this.setPressed(el, el === item))\n    } else {\n      this.setPressed(item, !this.isPressed(item))\n    }\n\n    this.rebuildInputs()\n    this.updateRovingTabindex(item)\n  }\n\n  navigate(event) {\n    if (this.typeValue !== \"single\") return\n    const items = this.enabledItems()\n    if (items.length === 0) return\n\n    const isRtl = document.documentElement.dir === \"rtl\"\n    const currentIndex = items.indexOf(event.currentTarget)\n    let nextIndex = currentIndex\n\n    switch (event.key) {\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        nextIndex = (currentIndex + (isRtl && event.key === \"ArrowRight\" ? -1 : 1) + items.length) % items.length\n        break\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        nextIndex = (currentIndex + (isRtl && event.key === \"ArrowLeft\" ? 1 : -1) + items.length) % items.length\n        break\n      case \"Home\":\n        nextIndex = 0\n        break\n      case \"End\":\n        nextIndex = items.length - 1\n        break\n      case \" \":\n      case \"Enter\":\n        event.preventDefault()\n        event.currentTarget.click()\n        return\n      default:\n        return\n    }\n\n    event.preventDefault()\n    const next = items[nextIndex]\n    this.updateRovingTabindex(next)\n    next.focus()\n  }\n\n  reconcile() {\n    if (this.typeValue === \"single\") {\n      const pressed = this.itemTargets.find(el => this.isPressed(el))\n      const first = pressed || this.enabledItems()[0]\n      this.itemTargets.forEach(el => {\n        el.setAttribute(\"tabindex\", el === first ? \"0\" : \"-1\")\n      })\n    } else {\n      this.itemTargets.forEach(el => el.setAttribute(\"tabindex\", \"0\"))\n    }\n    this.rebuildInputs()\n  }\n\n  isPressed(item) {\n    return item.dataset.state === \"on\"\n  }\n\n  setPressed(item, pressed) {\n    item.dataset.state = pressed ? \"on\" : \"off\"\n    if (this.typeValue === \"single\") {\n      item.setAttribute(\"aria-checked\", pressed ? \"true\" : \"false\")\n    } else {\n      item.setAttribute(\"aria-pressed\", pressed ? \"true\" : \"false\")\n    }\n  }\n\n  updateRovingTabindex(focusedItem) {\n    if (this.typeValue !== \"single\") return\n    this.itemTargets.forEach(el => {\n      el.setAttribute(\"tabindex\", el === focusedItem ? \"0\" : \"-1\")\n    })\n  }\n\n  enabledItems() {\n    return this.itemTargets.filter(el => !el.disabled)\n  }\n\n  rebuildInputs() {\n    if (!this.nameValue) return\n    this.inputTargets.forEach(el => el.remove())\n\n    const pressed = this.itemTargets.filter(el => this.isPressed(el))\n\n    if (this.typeValue === \"single\") {\n      const val = pressed[0]?.dataset.value || \"\"\n      this.element.appendChild(this.buildInput(this.nameValue, val))\n    } else {\n      pressed.forEach(item => {\n        this.element.appendChild(this.buildInput(`${this.nameValue}[]`, item.dataset.value))\n      })\n    }\n  }\n\n  buildInput(name, value) {\n    const input = document.createElement(\"input\")\n    input.type = \"hidden\"\n    input.name = name\n    input.value = value\n    input.setAttribute(\"data-ruby-ui--toggle-group-target\", \"input\")\n    return input\n  }\n}\n"
+      "content": "import { Controller } from \"@hotwired/stimulus\"\n\n// Connects to data-controller=\"ruby-ui--toggle-group\"\nexport default class extends Controller {\n  static targets = [\"item\", \"input\"]\n  static values = {\n    type: String,\n    name: String,\n    orientation: { type: String, default: \"horizontal\" },\n    loopFocus: { type: Boolean, default: true }\n  }\n\n  connect() {\n    this.reconcile()\n    // Keep one tab stop when an item gets disabled or enabled later.\n    this.observer = new MutationObserver(() => this.ensureTabStop())\n    this.observer.observe(this.element, { subtree: true, attributes: true, attributeFilter: [\"disabled\"] })\n  }\n\n  disconnect() {\n    this.observer?.disconnect()\n    this.observer = null\n  }\n\n  // Items added or removed after connect: keep one tab stop and the hidden\n  // inputs in sync with what is pressed.\n  itemTargetConnected() {\n    this.ensureTabStop()\n    this.rebuildInputs()\n  }\n\n  itemTargetDisconnected() {\n    this.ensureTabStop()\n    this.rebuildInputs()\n  }\n\n  // Native <button> activation (click, Enter, Space) lands here.\n  select(event) {\n    const item = event.currentTarget\n    if (item.disabled) return\n\n    if (this.typeValue === \"single\") {\n      // Like Base UI: pressing the pressed item clears the value.\n      const pressed = !this.isPressed(item)\n      this.itemTargets.forEach(el => this.setPressed(el, el === item && pressed))\n    } else {\n      this.setPressed(item, !this.isPressed(item))\n    }\n\n    this.rebuildInputs()\n    this.setTabStop(item)\n  }\n\n  navigate(event) {\n    const items = this.enabledItems()\n    const currentIndex = items.indexOf(event.currentTarget)\n    if (currentIndex === -1) return\n\n    const step = this.stepFor(event.key)\n    let nextIndex\n\n    if (event.key === \"Home\") {\n      nextIndex = 0\n    } else if (event.key === \"End\") {\n      nextIndex = items.length - 1\n    } else if (step) {\n      nextIndex = currentIndex + step\n      if (nextIndex < 0 || nextIndex >= items.length) {\n        // At an end with loop_focus: false the key is still ours: don't scroll the page.\n        if (!this.loopFocusValue) return event.preventDefault()\n        nextIndex = (nextIndex + items.length) % items.length\n      }\n    } else {\n      return\n    }\n\n    event.preventDefault()\n    const next = items[nextIndex]\n    this.setTabStop(next)\n    next.focus()\n  }\n\n  // Arrow keys follow the orientation: Left/Right when horizontal (flipped in\n  // RTL), Up/Down when vertical.\n  stepFor(key) {\n    if (this.orientationValue === \"vertical\") {\n      if (key === \"ArrowDown\") return 1\n      if (key === \"ArrowUp\") return -1\n      return 0\n    }\n\n    const rtl = getComputedStyle(this.element).direction === \"rtl\"\n    if (key === \"ArrowRight\") return rtl ? -1 : 1\n    if (key === \"ArrowLeft\") return rtl ? 1 : -1\n    return 0\n  }\n\n  // One tab stop per group: the first pressed enabled item, else the first\n  // enabled item.\n  reconcile() {\n    const enabled = this.enabledItems()\n    this.setTabStop(enabled.find(el => this.isPressed(el)) || enabled[0])\n    this.rebuildInputs()\n  }\n\n  // Keeps exactly one tab stop: the current one if it is still enabled, else\n  // the first pressed enabled item, else the first enabled item.\n  ensureTabStop() {\n    const enabled = this.enabledItems()\n    this.setTabStop(\n      enabled.find(el => el.getAttribute(\"tabindex\") === \"0\") ||\n        enabled.find(el => this.isPressed(el)) ||\n        enabled[0]\n    )\n  }\n\n  isPressed(item) {\n    return item.dataset.state === \"on\"\n  }\n\n  setPressed(item, pressed) {\n    item.dataset.state = pressed ? \"on\" : \"off\"\n    item.setAttribute(\"aria-pressed\", pressed ? \"true\" : \"false\")\n    item.toggleAttribute(\"data-pressed\", pressed)\n  }\n\n  setTabStop(stop) {\n    this.itemTargets.forEach(el => {\n      el.setAttribute(\"tabindex\", el === stop ? \"0\" : \"-1\")\n    })\n  }\n\n  enabledItems() {\n    return this.itemTargets.filter(el => !el.disabled)\n  }\n\n  rebuildInputs() {\n    if (!this.nameValue) return\n    this.inputTargets.forEach(el => el.remove())\n\n    const pressed = this.itemTargets.filter(el => this.isPressed(el))\n\n    if (this.typeValue === \"single\") {\n      const val = pressed[0]?.dataset.value || \"\"\n      this.element.appendChild(this.buildInput(this.nameValue, val))\n    } else {\n      pressed.forEach(item => {\n        this.element.appendChild(this.buildInput(`${this.nameValue}[]`, item.dataset.value))\n      })\n    }\n  }\n\n  buildInput(name, value) {\n    const input = document.createElement(\"input\")\n    input.type = \"hidden\"\n    input.name = name\n    input.value = value\n    input.setAttribute(\"data-ruby-ui--toggle-group-target\", \"input\")\n    return input\n  }\n}\n"
     },
     {
       "path": "toggle_group_item.rb",
-      "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class ToggleGroupItem < Toggle\n    JOIN_BASE = \"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10\"\n\n    def initialize(value:, group_context:, variant: nil, size: nil, **attrs)\n      @item_value = value.to_s\n      @group_context = group_context\n\n      pressed = group_context[:selected_values].include?(@item_value)\n      super(\n        pressed: pressed,\n        name: nil,\n        value: @item_value,\n        variant: variant || group_context[:variant],\n        size: size || group_context[:size],\n        disabled: group_context[:disabled],\n        **attrs\n      )\n    end\n\n    def view_template(&block)\n      button(**attrs, &block)\n    end\n\n    private\n\n    def default_attrs\n      attrs = {type: \"button\"}\n      attrs[:disabled] = true if @disabled\n      attrs[:data] = {\n        state: @pressed ? \"on\" : \"off\",\n        value: @item_value,\n        \"ruby-ui--toggle-group-target\": \"item\",\n        action: \"click->ruby-ui--toggle-group#select keydown->ruby-ui--toggle-group#navigate\"\n      }\n      attrs[:class] = [Toggle.classes_for(variant: @variant, size: @size), join_classes]\n\n      if @group_context[:type] == :single\n        attrs[:role] = \"radio\"\n        attrs[:aria] = {checked: @pressed.to_s}\n        attrs[:tabindex] = @pressed ? \"0\" : \"-1\"\n      else\n        attrs[:aria] = {pressed: @pressed.to_s}\n        attrs[:tabindex] = \"0\"\n      end\n\n      attrs\n    end\n\n    def join_classes\n      classes = [JOIN_BASE]\n      return classes unless @group_context[:spacing] == 0\n\n      classes << \"rounded-none shadow-none\"\n      if @group_context[:orientation] == :vertical\n        classes << \"first-of-type:rounded-t-md last-of-type:rounded-b-md\"\n        classes << \"border-t-0 first-of-type:border-t\" if @group_context[:variant] == :outline\n      else\n        classes << \"first-of-type:rounded-l-md last-of-type:rounded-r-md\"\n        classes << \"border-l-0 first-of-type:border-l\" if @group_context[:variant] == :outline\n      end\n      classes\n    end\n  end\nend\n"
+      "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class ToggleGroupItem < Toggle\n    JOIN_BASE = \"shrink-0 focus:z-10 focus-visible:z-10 data-[state=on]:bg-muted\"\n    # Joined groups (spacing 0): vega's cn-toggle-group-item padding and corners.\n    JOINED = \"rounded-none shadow-none px-2 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\"\n\n    def initialize(value:, group_context:, variant: nil, size: nil, **attrs)\n      @item_value = value.to_s\n      @group_context = group_context\n\n      pressed = group_context[:selected_values].include?(@item_value)\n      super(\n        pressed: pressed,\n        name: nil,\n        value: @item_value,\n        variant: variant || group_context[:variant],\n        size: size || group_context[:size],\n        disabled: group_context[:disabled],\n        **attrs\n      )\n    end\n\n    def view_template(&block)\n      button(**attrs, &block)\n    end\n\n    private\n\n    def default_attrs\n      attrs = {type: \"button\", aria: {pressed: @pressed.to_s}, tabindex: initial_tabindex}\n      attrs[:disabled] = true if @disabled\n\n      data = {\n        slot: \"toggle-group-item\",\n        variant: @variant.to_s,\n        size: @size.to_s,\n        spacing: @group_context[:spacing].to_s,\n        state: @pressed ? \"on\" : \"off\",\n        value: @item_value,\n        \"ruby-ui--toggle-group-target\": \"item\",\n        action: \"click->ruby-ui--toggle-group#select keydown->ruby-ui--toggle-group#navigate\"\n      }\n      data[:pressed] = \"\" if @pressed\n      data[:disabled] = \"\" if @disabled\n      attrs[:data] = data\n      attrs[:class] = [Toggle.classes_for(variant: @variant, size: @size), join_classes]\n      attrs\n    end\n\n    # The group picks the single tab stop (see ToggleGroup#claim_tab_stop?).\n    def initial_tabindex\n      @group_context[:tab_stop] ? \"0\" : \"-1\"\n    end\n\n    def join_classes\n      classes = [JOIN_BASE]\n      return classes unless @group_context[:spacing] == 0\n\n      classes << JOINED\n      if @group_context[:orientation] == :vertical\n        classes << \"first-of-type:rounded-t-md last-of-type:rounded-b-md\"\n        classes << \"border-t-0 first-of-type:border-t\" if @variant == :outline\n      else\n        classes << \"first-of-type:rounded-l-md last-of-type:rounded-r-md\"\n        classes << \"border-l-0 first-of-type:border-l\" if @variant == :outline\n      end\n      classes\n    end\n  end\nend\n"
     }
   ],
   "dependencies": {