Square a button group and the choice drawn as one

Plan step 22, actions.md § Missing (Square-by-default button groups): M3
lists "Default shape | Round, square" as a button-group configuration and
neither `<x-button-group>` nor `<x-group>` had a `shape` prop, so a group
of square buttons still drew round outer corners.

`shape="square"` passes the square corner scale to every child through
`data-shape` and two new variables in groups.css: `--group-outer` is what
the two ends of a group round to (half the height when round, the corner
its inner edges take when square — M3's square table, 4/8/8/16/20dp), and
`--group-square`/`--group-square-pressed` give a standard group's buttons
the scale `<x-button shape="square">` draws. The selected rules keep
`--group-full`, so a selected button in a square group rounds: M3 has a
toggle inside a group swap shape on selection either way.

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

@@ -11,6 +11,13 @@
      the size of the buttons inside, so the spacing and corners match. For a choice bound to a
      property, `<x-group>` draws a connected group of radios.
 
+     `shape` is M3's "Default shape | Round, square" configuration, and covers every button in the
+     group so it need not be written on each one: `square` squares a connected group's two ends to
+     the corner its inner edges take (M3's square table, 4/8/8/16/20dp by size) and gives a
+     standard group's buttons the square corner scale `<x-button shape="square">` draws. Selection
+     still morphs the other way — M3 has a toggle inside a group "swap shape square/round on
+     selection" — so a selected button in a square group rounds.
+
      A group never wraps to a second line — M3's rule, and the press expansion only reaches a
      neighbour on the same line anyway. Where a row is too long for its window the answer is a
      smaller `size` or fewer buttons, or two groups stacked.
@@ -22,10 +29,12 @@
     'connected' => false,
     'size' => 'sm',
     'label' => null,
+    'shape' => 'round',
 ])
 
 @php
     $size = in_array($size, ['xs', 'sm', 'md', 'lg', 'xl'], true) ? $size : 'sm';
+    $shape = $shape === 'square' ? 'square' : 'round';
 @endphp
 
 <div
@@ -33,6 +42,7 @@
     @if ($label) aria-label="{{ $label }}" @endif
     data-button-group="{{ $connected ? 'connected' : 'standard' }}"
     data-size="{{ $size }}"
+    data-shape="{{ $shape }}"
     {{ $attributes->class([
         'inline-flex items-center',
         'gap-0.5' => $connected,