Give a connected segment M3's 48px target and width

An <x-group> segment is a plain label, 32px or 40px tall, with nothing reaching
past it, and nothing gave a connected <x-button-group> its 48dp minimum width
either — both numbers M3 names and tells you not to reduce. The segment now
carries the shared `touch-target` utility and a 48px floor, and groups.css puts
the floor on the buttons a caller nests in a connected group. <x-button> drops
its hand-rolled ::after for the same utility. Plan step 11, actions.md ACT-05.

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

resources/views/components/group.blade.php

@@ -10,7 +10,9 @@
      bind as on any input, the arrow keys move the choice, and a screen reader announces a group.
      The chosen segment rounds fully and takes the selected colour; `variant` is `tonal` (the
      default), `filled` or `outlined`, as for toggle buttons. The segments share the row unless
-     `inline`. An option with `'disabled' => true` greys its own segment.
+     `inline`. An option with `'disabled' => true` greys its own segment. At `xs` and `sm` a
+     segment carries `touch-target` and a 48px minimum width, which M3 asks for by name and tells
+     you never to reduce.
 
      ReStride's props, kept: `label`, `hint`, `hint-class`, `name` (needed with `x-model`, which
      names no property), `options`, `option-value`, `option-label`; plus `option-icon`, `size`,
@@ -43,6 +45,9 @@
     $errorKey = $model ?? (filled($attributes->get('name')) ? str_replace(['[]', '[', ']'], ['', '.', ''], (string) $attributes->get('name')) : null);
     $messages = $errorKey !== null && isset($errors) ? \Illuminate\Support\Arr::flatten($errors->get($errorKey)) : [];
     $size = in_array($size, ['xs', 'sm', 'md', 'lg', 'xl'], true) ? $size : 'sm';
+    // M3: an xs or sm connected segment keeps a 48px target and a 48px minimum width, whatever
+    // its 32px/40px container measures. From md the segment is wider than that on its own.
+    $small = in_array($size, ['xs', 'sm'], true);
 
     $segment = [
         'xs' => 'h-8 gap-2 px-3 type-label-lg',
@@ -75,7 +80,8 @@
             <label @class([
                 'state-layer relative flex cursor-pointer select-none items-center justify-center whitespace-nowrap',
                 'transition-[border-radius,background-color,color] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast',
-                'min-w-0 flex-1' => ! $inline,
+                'flex-1' => ! $inline,
+                $small ? 'touch-target min-w-12' : 'min-w-0',
                 $segment,
                 $colours,
                 'has-focus-visible:outline-3 has-focus-visible:outline-offset-2 has-focus-visible:outline-secondary',