Add the M3 date pickers

Docked, modal and modal input date pickers for single dates and ranges,
with locale month names, week start and typed format from Intl, min and
max, and the APG grid keyboard. Completes Phase 7.

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

docs/plans/livewire-material.md

@@ -493,6 +493,24 @@ tokens, `training-row`, `map-shell`, `map-chip`, `product-shot`, `star-rating`,
     app locale; `min`/`max`; single and range; `wire:model` stores `Y-m-d`), `timepicker`
     (dial and input; 12/24h from locale; stores `H:i`). APG grid keyboard for the calendar.
 
+**Phase 7 is done (2026-09-13).** Both pickers were built by separate agents in their own
+worktrees. What changed from the step above:
+
+- **`<x-datepicker>` is one `<dialog wire:ignore>` for every mode**: docked opens it as a
+  `popover="manual"` under the field (CSS anchor positioning, flipping above), modal and input
+  with `showModal()`, and docked becomes modal below `sm`. Dates are `Y-m-d` strings computed in
+  UTC; only "today" reads the browser's zone. The typed format is androidx's
+  `datePatternAsInputFormat` from `Intl` (`de` → `dd.MM.yyyy`). **A range binds one array**,
+  `['start' => …, 'end' => …]`, not two models: one update, so `after_or_equal:trip.start`
+  validates against the matching end, and all its errors land on one field. Docked values come from
+  material-web's docked tokens, which Compose lacks.
+- **`<x-timepicker>` follows current Compose, not older Android**: a 24-hour dial puts 00–11 outside
+  and 12–23 inside, and the period selector is two separate toggles. The selector angle is a
+  registered custom property, so one transition turns the line and moves the handle.
+- **Alpine's `x-show` reveals an element on the next animation frame**: focusing into it from
+  `$nextTick` failed in Firefox and Safari. Wait a frame, or switch views with an attribute and CSS.
+- **A Livewire public property named `$slot` renders empty** in the component's view.
+
 ### Phase 8 — Navigation
 
 28. `app-bar` (small, center-aligned, medium flexible, large flexible, search app bar; sticky,