Button Group
分段控制风格，将多个按钮/链接束在一起。包装器自动去除中间子元素的 border-radius 并合并相邻边框。悬停时由包装器统一应用柔和色调，组件不显得厚重（v0.3.3 改进）。方向：水平（默认）/ 垂直。子元素无需添加 `class="join-item"`（v0.3.3 起不再需要）。
default orientation=horizontal — 3 つの button を横並びで結合、hover で soft tint
orientation=vertical — 縦並びで結合
with toggle state — Alpine.js で segmented control を構成 (active は primary fill + !important で hover override より上に出す)
選択中:
icon-only buttons — 正方形 icon button を束ねる (ツールバー風)
使い方
{{-- 最小 (orientation=horizontal がデフォルト、join-item は不要) --}}
<x-button-group>
<x-button appearance="outline" color="neutral">Left</x-button>
<x-button appearance="outline" color="neutral">Center</x-button>
<x-button appearance="outline" color="neutral">Right</x-button>
</x-button-group>
{{-- orientation=vertical で縦並び --}}
<x-button-group orientation="vertical">
<x-button appearance="outline" color="neutral">Top</x-button>
<x-button appearance="outline" color="neutral">Middle</x-button>
<x-button appearance="outline" color="neutral">Bottom</x-button>
</x-button-group>
{{-- segmented control (Alpine で active state を管理、active 側は !important で hover override より上) --}}
<div x-data="{ active: 'center' }">
<x-button-group>
<x-button appearance="outline" color="neutral"
x-bind:class="active === 'left' && '!bg-primary !text-primary-content !border-primary'"
x-on:click="active = 'left'">Left</x-button>
...
</x-button-group>
</div>
{{-- icon-only ツールバー --}}
<x-button-group>
<x-button class="w-10 h-10 !p-0" appearance="outline" color="neutral" aria-label="bold">
<x-i type="text-bold" variant="linear" class="w-4 h-4" />
</x-button>
...
</x-button-group>