Hold the time picker's two selectors apart

The 24-hour clock has no period selector beside the hour and minute
boxes, so M3 widens them to 114px; AM/PM takes its own
tertiary-container rather than borrowing the boxes' primary-container;
a disabled period button uses M3's 12% disabled container, not 10%; and
the pair is a radio group, which is what M3's labelling table asks for,
so the arrows move between AM and PM.

Plan step 20, findings IN-10, IN-11, IN-26 and IN-27.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

tests/Feature/Components/TimepickerTest.php

@@ -73,6 +73,12 @@ it('offers the input variant, the period selector and the actions', function ()
         ->toContain('data-timepicker-period-option="am"')
         ->toContain('data-timepicker-period-option="pm"')
         ->toContain('aria-label="Select AM or PM"')
+        // M3's labelling table: AM and PM are radios in a list, not toggle buttons.
+        ->toContain('role="radiogroup"')
+        ->toContain('role="radio"')
+        ->toContain('x-on:keydown.arrow-right.prevent="movePeriod($event)"')
+        // The 24-hour selector widens into the room the period selector leaves.
+        ->toContain('data-timepicker-display x-bind:data-cycle="is24 ? \'24\' : \'12\'"')
         ->toContain('aria-label="Switch to text input mode"')
         ->toContain('aria-label="Switch to clock mode"')
         ->toContain('data-timepicker-cancel')