Draw the group segment's state layer from the foundation class

Plan step 36 ("Interaction is the shared classes", the user, 2026-09-14).
A segment's hover and press opacities were group.css's own copy of
md-state-layer's declarations; the label now renders md-state-layer
(and, below medium's two smallest sizes, md-touch-target) and the
stylesheet keeps only what the class cannot draw: focus and disabled read
off the real radio or checkbox inside with :has(), not the label itself,
so the focus ring's layer tint and the disabled hide are kept as a
refinement (the latter a real gap the old rule left open). button-group.css,
which only shapes corners and spacing, needed no change.

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

@@ -60,6 +60,8 @@
 
     // A 20px glyph comes from M3's 20px cut, which the icon component picks from the size.
     $iconSize = ['xs' => 20, 'sm' => 20, 'md' => 24, 'lg' => 32, 'xl' => 40][$size];
+    // Below `medium` a segment draws under 48px, so it needs the foundation's touch target too.
+    $segmentNeedsTouchTarget = in_array($size, ['xs', 'sm'], true);
 
     $root = $attributes->only(['class', 'wire:key'])->merge(array_filter([
         'data-md-group' => true,
@@ -78,7 +80,7 @@
 
     <div data-md-button-group="connected" data-md-size="{{ $size }}" data-md-shape="{{ $shape }}">
         @foreach ($options as $option)
-            <label data-md-group-segment>
+            <label data-md-group-segment class="md-state-layer @if ($segmentNeedsTouchTarget) md-touch-target @endif">
                 <input
                     {{ $attributes->whereStartsWith(['wire:model', 'x-model']) }}
                     type="{{ $multiple ? 'checkbox' : 'radio' }}"