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,

resources/views/components/group.blade.php

@@ -15,9 +15,14 @@
      you never to reduce. Corners move on the spatial spring and colours on the effects one
      (`state-transition-fast`).
 
+     `shape` is M3's "Default shape | Round, square" configuration: `square` squares the two ends
+     of the group to the corner its inner edges take (M3's square table, 4/8/8/16/20dp by size),
+     and the chosen segment still rounds fully, so selection reads the same either way.
+
      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`,
-     `variant`, `multiple`, `inline`. A validation message for the bound property replaces the hint.
+     `variant`, `shape`, `multiple`, `inline`. A validation message for the bound property replaces
+     the hint.
 
      `hint-class` adds classes to the hint, as on `<x-field>`: a colour there paints it
      (`hint-class="text-warning"` for a hint that warns). The hint's own colour then carries no
@@ -35,6 +40,7 @@
     'optionIcon' => 'icon',
     'size' => 'sm',
     'variant' => 'tonal',
+    'shape' => 'round',
     'multiple' => false,
     'inline' => false,
 ])
@@ -46,6 +52,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's "Default shape | Round, square": a square group's ends take the corner its inner edges
+    // take; the chosen segment still rounds fully, which is the cue selection has always carried.
+    $shape = $shape === 'square' ? 'square' : 'round';
     // 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);
@@ -78,7 +87,7 @@
         <legend class="mb-2 type-label-lg text-on-surface-variant">{{ $label }}</legend>
     @endif
 
-    <div data-button-group="connected" data-size="{{ $size }}" @class(['flex gap-0.5', 'w-full' => ! $inline, 'w-fit' => $inline])>
+    <div data-button-group="connected" data-size="{{ $size }}" data-shape="{{ $shape }}" @class(['flex gap-0.5', 'w-full' => ! $inline, 'w-fit' => $inline])>
         @foreach ($options as $option)
             <label @class([
                 'state-layer relative flex cursor-pointer select-none items-center justify-center whitespace-nowrap',