Draw the button group without Tailwind

Plan step 36. <x-button-group> renders data-md-button-group (standard or
connected), data-md-size, data-md-shape and, with a selection,
data-md-selection and data-md-selection-required. button-group.css now
also draws the standard group: its gaps per size, the square corner scale
it hands its buttons, and the press expansion that widens a pressed label
button while its neighbours give way. groups.css keeps only the split
button until that is rewritten too.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/components/button-group.blade.php

@@ -45,7 +45,7 @@
      smaller `size` or fewer buttons, or two groups stacked.
 
      Spacing from the M3 Expressive spec (ButtonGroupSmallTokens: 12px at the small size). The
-     shapes are resources/css/components/groups.css. --}}
+     spacing, shapes and press expansion are resources/css/components/button-group.css. --}}
 
 @props([
     'connected' => false,
@@ -71,12 +71,12 @@
 <div
     role="group"
     @if ($label) aria-label="{{ $label }}" @endif
-    data-button-group="{{ $connected ? 'connected' : 'standard' }}"
-    data-size="{{ $size }}"
-    data-shape="{{ $shape }}"
+    data-md-button-group="{{ $connected ? 'connected' : 'standard' }}"
+    data-md-size="{{ $size }}"
+    data-md-shape="{{ $shape }}"
     @if ($selection !== null)
-        data-selection="{{ $selection }}"
-        @if ($required) data-selection-required @endif
+        data-md-selection="{{ $selection }}"
+        @if ($required) data-md-selection-required @endif
         x-data="{
             multiple: {{ $multiple ? 'true' : 'false' }},
             required: {{ $required ? 'true' : 'false' }},
@@ -129,13 +129,7 @@
         x-on:click="press($event)"
         @unless ($model) x-modelable="value" @endunless
     @endif
-    {{ $attributes->class([
-        'inline-flex items-center',
-        'gap-0.5' => $connected,
-        'gap-[18px]' => ! $connected && $size === 'xs',
-        'gap-3' => ! $connected && $size === 'sm',
-        'gap-2' => ! $connected && in_array($size, ['md', 'lg', 'xl'], true),
-    ]) }}
+    {{ $attributes }}
 >
     {{ $slot }}
 </div>