Button Group
多個 button / link 捆綁為分段控制風格的包裝器。中央子元素的 border-radius 由包裝器自動設為 0，相鄰邊框合併為 1 條。hover 在包裝器層級以軟色調覆蓋，群組內容不顯重 (v0.3.3 改善)。orientation 為 horizontal (預設) / vertical。子項無需附加 `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>