Draw the datepicker's controls from the shared classes, in px

Plan step 36 review of 72d9dbfc. The year, the three menu buttons and
the docked lists' options hand-rolled md-state-layer and md-focus-ring
on themselves, in their own ink, on the claim that each was a bigger box
than an indicator inside it; only the day is. They now render the
classes, with the option's inset ring as the one refinement. The day
keeps its own layer on the 40px indicator, now at M3's state-opacity
tokens, gone from a disabled or blank day (a focused disabled day still
showed it), and in its own stacking context so it lies over a chosen
day's primary fill instead of under it.

The month announcement is md-visually-hidden again, not a hook with a
copy of its clip. The stylesheet kept every length in rem although the
commit said px: sizes are now px, spacing the measurement tokens, and
disabled ink the 38% state token, as search and slider were drawn. The
view header's "below sm" is 600px, medium.

Six browser assertions still read the old unprefixed hooks
(dataset.presentation, data-selected, data-between, data-start,
data-end); one of them would have passed vacuously.

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

resources/views/components/datepicker.blade.php

@@ -5,7 +5,8 @@
      - `docked` (the default): a text field that takes a typed date in the locale's numeric format
        (`13.09.2026` in `de`, `09/13/2026` in `en-US`), with the calendar dropping open under it —
        on a press of the field, its calendar button, or ArrowDown. On a compact window (below
-       `sm`) the calendar opens as the modal picker instead, where a docked one would not fit.
+       600px, `medium`) the calendar opens as the modal picker instead, where a docked one would not
+       fit.
      - `modal`: the field only shows the date; pressing it (or Enter, Space, ArrowDown) opens the
        calendar in a dialog, with a pencil to switch to typing.
      - `input`: the same dialog, opened on its text field, with a calendar icon to switch back.
@@ -47,7 +48,9 @@
      material-web's md-comp-date-picker-docked tokens, v0_192, as Compose has none; all Apache-2.0):
      surface-container-high at elevation 3, 360px wide, the extra-large corner (modal) or large
      (docked), 40px days in 48px cells, today outlined in primary, the chosen day in primary and a
-     range's middle in secondary-container. The styles are resources/css/components/datepicker.css. --}}
+     range's middle in secondary-container. The styles are resources/css/components/datepicker.css;
+     the year, the menu buttons and the list options render `md-state-layer md-focus-ring`, the
+     month's announcement `md-visually-hidden`, and nothing else here writes a class. --}}
 
 @props([
     'label' => null,
@@ -314,11 +317,12 @@
             </div>
 
             <div x-show="! typing" x-on:scroll="extendMonths($event)" data-md-datepicker-calendar>
-                <span id="{{ $id }}-month" aria-live="polite" x-text="monthYear" data-md-datepicker-month-live></span>
+                <span id="{{ $id }}-month" class="md-visually-hidden" aria-live="polite" x-text="monthYear"></span>
 
                 <div data-md-datepicker-nav x-show="presentation === 'modal'">
                     <button
                         type="button"
+                        class="md-state-layer md-focus-ring"
                         data-md-datepicker-menu-button="years"
                         x-on:click="toggleView('years')"
                         x-bind:aria-expanded="(view === 'years').toString()"
@@ -341,6 +345,7 @@
                         </span>
                         <button
                             type="button"
+                            class="md-state-layer md-focus-ring"
                             data-md-datepicker-menu-button="months"
                             x-on:click="toggleView('months')"
                             x-bind:aria-expanded="(view === 'months').toString()"
@@ -360,6 +365,7 @@
                         </span>
                         <button
                             type="button"
+                            class="md-state-layer md-focus-ring"
                             data-md-datepicker-menu-button="years"
                             x-on:click="toggleView('years')"
                             x-bind:aria-expanded="(view === 'years').toString()"
@@ -425,6 +431,7 @@
                             x-bind:data-md-current="year.current ? '' : null"
                             x-on:click="showMonthOf(year.value, +shown.slice(5, 7))"
                             x-text="year.label"
+                            class="md-state-layer md-focus-ring"
                             data-md-datepicker-year
                         ></button>
                     </template>
@@ -439,6 +446,7 @@
                             x-bind:aria-disabled="month.disabled ? 'true' : null"
                             x-bind:tabindex="month.selected ? 0 : -1"
                             x-on:click="month.disabled || showMonthOf(+shown.slice(0, 4), month.value)"
+                            class="md-state-layer md-focus-ring"
                             data-md-datepicker-option
                         >
                             <x-livewire-material::icon name="check" data-md-datepicker-check />
@@ -455,6 +463,7 @@
                             x-bind:aria-selected="year.selected.toString()"
                             x-bind:tabindex="year.selected ? 0 : -1"
                             x-on:click="showMonthOf(year.value, +shown.slice(5, 7))"
+                            class="md-state-layer md-focus-ring"
                             data-md-datepicker-option
                         >
                             <x-livewire-material::icon name="check" data-md-datepicker-check />