Draw the radio group without Tailwind

<x-radio> renders data-md-radio (data-md-inline), its legend, options,
rows and support as data-md-* attributes, and its layout moves into
components/radio.css: the 16px stack, the inline row from 600px, the
legend and the hint on the type and spacing tokens (plan step 36). A
label-less ring wears md-touch-target; the caller's style now lands on
the fieldset with its class.

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

resources/css/components/radio.css

@@ -5,9 +5,20 @@
  * RadioButtonTokens (androidx Compose Material 3, Apache-2.0): a 20px ring with a 2px
  * on-surface-variant outline, primary once chosen, and a 10px primary dot that grows in on the fast
  * spatial spring; the state layer a 40px circle around it. With the server's error the ring and
- * the dot are error. Disabled, both are on-surface at 38%.
+ * the dot are error. Disabled, both are on-surface at 38%. Beside a hint the ring drops 2px, to sit
+ * on the label's first line.
  *
- *   [data-md-radio-button]   the ring: input, [data-md-radio-dot]
+ * The group is a <fieldset> whose legend (label-large, on-surface-variant, 12px above the options)
+ * is the question. The options stack 16px apart, as M3 lays radio buttons out; `data-md-inline`
+ * lays them in a wrapping row 24px apart from `medium` (600px), and compact always stacks. The
+ * hint, or the errors in its place, sits 8px under the options.
+ *
+ *   [data-md-radio]                 the <fieldset>; `class` and `style` land here; data-md-inline
+ *     [data-md-radio-legend]
+ *     [data-md-radio-options]
+ *       [data-md-selection-row]
+ *         [data-md-radio-button]    the ring: input, [data-md-radio-dot]
+ *     [data-md-selection-support]   the hint, or the errors
  */
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@@ -15,6 +26,45 @@
 @import './selection.css';
 
 @layer material.components {
+    [data-md-radio] {
+        min-width: 0;
+    }
+
+    [data-md-radio-legend] {
+        margin-bottom: 12px;
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-label-lg);
+        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
+        font-variation-settings: normal;
+    }
+
+    [data-md-radio-options] {
+        display: grid;
+        gap: var(--md-sys-measurement-space200);
+    }
+
+    /* M3 stacks radio buttons and cautions against a row at any width; `inline` is for two or three
+       short labels, and only from medium. */
+    @media (width >= 600px) {
+        [data-md-radio][data-md-inline] [data-md-radio-options] {
+            display: flex;
+            flex-wrap: wrap;
+            column-gap: var(--md-sys-measurement-space300);
+        }
+    }
+
+    [data-md-radio] [data-md-selection-support] {
+        margin-top: var(--md-sys-measurement-space100);
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-body-sm);
+        letter-spacing: var(--md-sys-typescale-body-sm-tracking);
+        font-variation-settings: normal;
+    }
+
+    [data-md-radio] [data-md-selection-support][role='alert'] {
+        color: var(--md-sys-color-error);
+    }
+
     [data-md-radio-button] {
         position: relative;
         display: grid;
@@ -28,6 +78,10 @@
         grid-area: 1 / 1;
     }
 
+    [data-md-selection-row]:has([data-md-selection-hint]) [data-md-radio-button] {
+        margin-top: var(--md-sys-measurement-space25);
+    }
+
     [data-md-radio-button]::before {
         inset: -10px;
     }

resources/views/components/radio.blade.php

@@ -35,28 +35,23 @@
 @endphp
 
 <fieldset
-    {{ $attributes->only(['class', 'wire:key'])->class(['min-w-0']) }}
+    data-md-radio
+    @if ($inline) data-md-inline @endif
+    {{ $attributes->only(['class', 'style', 'wire:key']) }}
     @if ($messages !== [] || filled($hint)) aria-describedby="{{ $id }}-support" @endif
 >
     @if (filled($label))
-        <legend class="mb-3 type-label-lg text-on-surface-variant">{{ $label }}</legend>
+        <legend data-md-radio-legend>{{ $label }}</legend>
     @endif
 
-    <div @class(['grid gap-4', 'medium:flex medium:flex-wrap medium:gap-x-6' => $inline])>
+    <div data-md-radio-options>
         @foreach ($options as $option)
             @php($optionHintText = data_get($option, $optionHint))
 
-            <label data-md-selection-row @if ($messages !== []) data-md-invalid @endif @class([
-                'flex gap-4',
-                'items-start' => filled($optionHintText),
-                'items-center' => blank($optionHintText),
-            ])>
-                <span data-md-radio-button @class([
-                    'mt-0.5' => filled($optionHintText),
-                    'touch-target' => blank(data_get($option, $optionLabel)) && blank($optionHintText),
-                ])>
+            <label data-md-selection-row @if ($messages !== []) data-md-invalid @endif>
+                <span data-md-radio-button @if (blank(data_get($option, $optionLabel)) && blank($optionHintText)) class="md-touch-target" @endif>
                     <input
-                        {{ $attributes->except(['class', 'wire:key', 'name', 'id']) }}
+                        {{ $attributes->except(['class', 'style', 'wire:key', 'name', 'id']) }}
                         type="radio"
                         name="{{ $name }}"
                         value="{{ data_get($option, $optionValue) }}"
@@ -67,10 +62,10 @@
                     <span data-md-radio-dot></span>
                 </span>
 
-                <span class="min-w-0">
-                    <span class="block type-body-lg text-on-surface" data-md-selection-label>{{ data_get($option, $optionLabel) }}</span>
+                <span data-md-selection-text>
+                    <span data-md-selection-label>{{ data_get($option, $optionLabel) }}</span>
                     @if (filled($optionHintText))
-                        <span class="mt-0.5 block type-body-sm text-on-surface-variant">{{ $optionHintText }}</span>
+                        <span data-md-selection-hint>{{ $optionHintText }}</span>
                     @endif
                 </span>
             </label>
@@ -78,12 +73,12 @@
     </div>
 
     @if ($messages !== [])
-        <div id="{{ $id }}-support" class="mt-2 type-body-sm text-error" role="alert">
+        <div id="{{ $id }}-support" data-md-selection-support role="alert">
             @foreach ($messages as $message)
                 <p>{{ $message }}</p>
             @endforeach
         </div>
     @elseif (filled($hint))
-        <p id="{{ $id }}-support" class="mt-2 type-body-sm text-on-surface-variant">{{ $hint }}</p>
+        <p id="{{ $id }}-support" data-md-selection-support>{{ $hint }}</p>
     @endif
 </fieldset>

tests/Feature/Components/SelectionTest.php

@@ -31,12 +31,12 @@ it('marks a checkbox that is partly ticked', function () {
 it('gives a selection control without a label a 48px target', function () {
     expect((string) $this->blade('<x-checkbox aria-label="Select all" />'))->toMatch('/<span data-md-checkbox-box\s+class="md-touch-target"\s*>/')
         ->and((string) $this->blade('<x-toggle aria-label="Public link" />'))->toContain('touch-target')
-        ->and((string) $this->blade('<x-radio :options="[[\'id\' => \'a\', \'name\' => \'\']]" />'))->toContain('touch-target');
+        ->and((string) $this->blade('<x-radio :options="[[\'id\' => \'a\', \'name\' => \'\']]" />'))->toMatch('/<span data-md-radio-button\\s+class="md-touch-target"\\s*>/');
 
     // A labelled control is pressed anywhere along its row, so it needs no extra target.
     expect((string) $this->blade('<x-checkbox label="Notify me" />'))->not->toContain('md-touch-target')
         ->and((string) $this->blade('<x-toggle label="Public link" />'))->not->toContain('touch-target')
-        ->and((string) $this->blade('<x-radio :options="[[\'id\' => \'a\', \'name\' => \'A\']]" />'))->not->toContain('touch-target');
+        ->and((string) $this->blade('<x-radio :options="[[\'id\' => \'a\', \'name\' => \'A\']]" />'))->not->toContain('md-touch-target');
 });
 
 it('leaves a checkbox group to the caller and says how M3 wants it laid out', function () {
@@ -89,8 +89,11 @@ it('draws radio buttons in a fieldset named by its question', function () {
         BLADE);
 
     expect($html)
-        ->toContain('<fieldset')
-        ->toContain('Who can open it</legend>')
+        ->toMatch('/<fieldset\\s+data-md-radio\\s/')
+        ->toContain('<legend data-md-radio-legend>Who can open it</legend>')
+        ->toContain('<div data-md-radio-options>')
+        ->toContain('<span data-md-selection-hint>Share it separately</span>')
+        ->not->toContain('class=')
         ->and(substr_count($html, 'type="radio"'))->toBe(3)
         ->and(substr_count($html, 'name="audience"'))->toBe(3)
         ->and(substr_count($html, 'wire:model.live="audience"'))->toBe(3)
@@ -103,7 +106,7 @@ it('names unbound radios after their group and checks the given value', function
     $html = (string) $this->blade('<x-radio name="theme" value="dark" inline :options="[[\'id\' => \'light\', \'name\' => \'Light\'], [\'id\' => \'dark\', \'name\' => \'Dark\']]" />');
 
     expect($html)
-        ->toContain('medium:flex')
+        ->toMatch('/<fieldset\\s+data-md-radio\\s+data-md-inline\\s/')
         ->and(substr_count($html, 'name="theme"'))->toBe(2)
         ->and($html)->toMatch('/value="dark"\s+checked/')
         ->not->toMatch('/value="light"\s+checked/');
@@ -113,6 +116,7 @@ it('shows the errors of a radio group', function () {
     expect((string) $this->withViewErrors(['audience' => ['Choose who can open it.']])
         ->blade('<x-radio wire:model="audience" :options="[[\'id\' => \'a\', \'name\' => \'A\']]" />'))
         ->toContain('data-md-invalid')
+        ->toMatch('/<div id="radio-[0-9a-f]{12}-support" data-md-selection-support role="alert">/')
         ->toContain('Choose who can open it.');
 });
 
@@ -148,3 +152,13 @@ it('draws the checkbox from its stylesheet, on the row the selection controls sh
         ->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/checkbox.css';")
         ->and((string) file_get_contents(__DIR__.'/../../../resources/css/tailwind.css'))->not->toContain('selection.css');
 });
+
+it('lays the radio group out from its stylesheet, inline only from 600px', function () {
+    $css = (string) file_get_contents(__DIR__.'/../../../resources/css/components/radio.css');
+
+    expect($css)->toContain("@import './selection.css';")
+        ->toMatch('/@media \\(width >= 600px\\) \\{\\s*\\[data-md-radio\\]\\[data-md-inline\\] \\[data-md-radio-options\\] \\{\\s*display: flex;/')
+        ->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/radio.css';")
+        ->and((string) $this->blade('<x-radio name="size" class="mt-4" style="order: 1" :options="[[\'id\' => \'s\', \'name\' => \'S\']]" />'))
+        ->toMatch('/data-md-radio\\s+class="mt-4" style="order: 1"/');
+});