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

resources/js/timepicker.js

@@ -380,6 +380,21 @@ document.addEventListener('alpine:init', () => {
             this.aim()
         },
 
+        /**
+         * AM and PM are a radio group, which M3's labelling table asks for: an arrow key moves to
+         * the other option and selects it, and focus follows, as WAI-ARIA's radio group does.
+         */
+        movePeriod(event) {
+            const pm = !this.isPm
+
+            if (!this.periodAllowed(pm)) {
+                return
+            }
+
+            this.setPeriod(pm)
+            event.currentTarget.querySelector(`[data-timepicker-period-option="${pm ? 'pm' : 'am'}"]`)?.focus()
+        },
+
         /** The allowed time in a period nearest to `time` (periodAllowed has said there is one). */
         nearestInPeriod(pm, time) {
             let best = null