Size the timepicker in px, as its landscape queries already are

Plan step 36 review of d46b07c1. The landscape queries moved from rem
to px (560/364/346, equal at the default 16px) while every size they
make room for stayed in rem, so with a larger browser text size the
dial grew past a threshold that no longer moved with it. The sizes are
px now, as M3 gives them in dp, spacing the measurement tokens, the
selected period corner corner-md, and disabled the 38% and 12% state
tokens; the supporting text's two-line room stays in rem, being text.
The header's arithmetic is in px, and its note on targets says why the
period halves render no md-touch-target instead of claiming nothing
here reaches 48px.

The landscape browser test expected the display and the dial to share a
top edge, but the display is centred in the dial's 256px row, 61px
lower; it now checks the display sits inside that row with the dial
36px after it. Feature tests pin the classes and the three queries.

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

resources/css/components/timepicker.css

@@ -36,18 +36,23 @@
  * The switch is orientation and viewport *height*, never a width breakpoint: M3 says the picker
  * "swaps orientation/variant based on device orientation and viewport height"
  * (docs/reference/m3/components-navigation-selection-inputs.md § Time pickers/Behaviour), and no
- * window size class applies — so the two landscape media queries below are the one place in this
+ * window size class applies — so the media queries below name a viewport height and never a width.
- * file a length is not one of M3's four breakpoints. 560px is what the upright dial needs — 528px of
+ * 560px is what the upright dial needs — 528px of surface (48 padding, 36 title, 116 display, 280
- * surface (3 padding, 2.25 title, 7.25 display, 17.5 dial, 3 actions in rem, ×16) inside the
+ * dial, 48 actions) inside the dialog's `100dvh - 32px` — so a landscape phone lies the dial down
- * dialog's `100dvh - 32px` — so a landscape phone lies the dial down and a landscape tablet or
+ * and a landscape tablet or desktop, which has the height, leaves it standing. The queries and the
- * desktop, which has the height, leaves it standing.
+ * sizes they make room for are both px (M3 gives the sizes in dp), so a larger text size moves
+ * neither.
  *
  * The hour and minute boxes and the period buttons render the foundation's `md-state-layer` and
  * `md-focus-ring` (foundation/interaction.css) — each is its own interactive box with nothing drawn
  * smaller inside it, so the classes need no refinement. The dial renders `md-focus-ring` alone (it
  * draws no state layer of its own); nothing here copies its outline rule. Cancel, OK and the mode
- * toggle are <x-button>, which draws from the classes already. No element here reaches a 48px target
+ * toggle are <x-button>, which draws from the classes already. `md-touch-target` is not rendered:
- * of its own accord, so `md-touch-target` is never rendered.
+ * the boxes, the dial and the inputs are well over 48px, and the period buttons are the two halves
+ * of M3's 52×80 (72 in the input variant, 216×38 lying down) selector, where a 48px target on each
+ * would reach over its neighbour.
+ *
+ * Disabled is on-surface at M3's 38% content and 12% container opacities (tokens/state.css).
  *
  * The selector's angle is a registered property, so a single transition turns the line, carries the
  * handle round and moves the clip that inks the number under it, on the default spatial spring. The
@@ -74,8 +79,8 @@
 
     /* The dialog: M3's spatial-fast pop, a 32%-scrim backdrop, no default border or padding. */
     [data-md-timepicker-dialog] {
-        max-width: calc(100vw - 2rem);
+        max-width: calc(100vw - var(--md-sys-measurement-space400));
-        max-height: calc(100dvh - 2rem);
+        max-height: calc(100dvh - var(--md-sys-measurement-space400));
         margin: auto;
         padding: 0;
         overflow: visible;
@@ -104,7 +109,7 @@
         display: grid;
         grid-template-columns: max-content;
         justify-content: center;
-        padding: 1.5rem;
+        padding: var(--md-sys-measurement-space300);
         border-radius: var(--md-sys-shape-corner-xl);
         background-color: var(--md-sys-color-surface-container-high);
         box-shadow: var(--md-sys-elevation-3);
@@ -112,7 +117,7 @@
     }
 
     [data-md-timepicker-title] {
-        padding-bottom: 1.25rem;
+        padding-bottom: 20px;
         color: var(--md-sys-color-on-surface-variant);
         font: var(--md-sys-typescale-label-md);
         letter-spacing: var(--md-sys-typescale-label-md-tracking);
@@ -139,7 +144,7 @@
 
     [data-md-timepicker-display] {
         display: flex;
-        margin-bottom: 2.25rem;
+        margin-bottom: 36px;
     }
 
     [data-md-timepicker-numbers],
@@ -152,8 +157,8 @@
     [data-md-timepicker-box] {
         display: grid;
         place-items: center;
-        width: 6rem;
+        width: 96px;
-        height: 5rem;
+        height: 80px;
         border-radius: var(--md-sys-shape-corner-sm);
         background-color: var(--md-sys-color-surface-container-highest);
         color: var(--md-sys-color-on-surface);
@@ -175,27 +180,27 @@
        (TimePickerTokens.TimeSelector24HVerticalContainerWidth = 114dp). Landscape keeps 96px: the
        display is a 216px column there. */
     [data-md-timepicker-display][data-md-cycle='24'] [data-md-timepicker-box] {
-        width: 7.125rem;
+        width: 114px;
     }
 
     [data-md-timepicker-separator] {
         display: grid;
         place-items: center;
-        width: 1.5rem;
+        width: 24px;
-        height: 5rem;
+        height: 80px;
         color: var(--md-sys-color-on-surface);
         font: var(--md-sys-typescale-display-lg);
-        translate: 0 -0.25rem;
+        translate: 0 -4px;
         user-select: none;
     }
 
     [data-md-timepicker-period] {
         display: flex;
         flex-direction: column;
-        gap: 0.25rem;
+        gap: var(--md-sys-measurement-space50);
-        width: 3.25rem;
+        width: 52px;
-        height: 5rem;
+        height: 80px;
-        margin-inline-start: 0.25rem;
+        margin-inline-start: var(--md-sys-measurement-space50);
     }
 
     [data-md-timepicker-period] > button {
@@ -214,7 +219,7 @@
 
     [data-md-timepicker-period] > button:active,
     [data-md-timepicker-period] > button[aria-checked='true'] {
-        border-radius: 0.75rem;
+        border-radius: var(--md-sys-shape-corner-md);
     }
 
     /* Tertiary, not the primary the hour and minute boxes take: M3 gives the two selectors different
@@ -227,14 +232,14 @@
 
     [data-md-timepicker-period] > button:disabled {
         cursor: default;
-        color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+        color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
-        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
     }
 
     /* ---- The dial ----------------------------------------------------------------------------- */
 
     [data-md-timepicker-dial] {
-        --dial: 16rem;
+        --dial: 256px;
         --unit: calc(var(--dial) / 256);
         --outer: calc(101 * var(--unit));
         --inner: calc(69 * var(--unit));
@@ -245,7 +250,7 @@
         flex: none;
         width: var(--dial);
         height: var(--dial);
-        margin-bottom: 1.5rem;
+        margin-bottom: var(--md-sys-measurement-space300);
         border-radius: var(--md-sys-shape-corner-full);
         background-color: var(--md-sys-color-surface-container-highest);
         color: var(--md-sys-color-on-surface);
@@ -301,8 +306,8 @@
         top: calc(50% + var(--y) * var(--ring));
         display: grid;
         place-items: center;
-        width: 3rem;
+        width: 48px;
-        height: 3rem;
+        height: 48px;
         translate: -50% -50%;
         border-radius: var(--md-sys-shape-corner-full);
         font-variant-numeric: tabular-nums;
@@ -313,7 +318,7 @@
     }
 
     [data-md-timepicker-set] > span[data-md-disabled] {
-        color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+        color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
     }
 
     /* The selector: the line from the centre to the handle's edge, the centre dot, the handle. */
@@ -345,8 +350,8 @@
     [data-md-timepicker-centre] {
         left: 50%;
         top: 50%;
-        width: 0.5rem;
+        width: 8px;
-        height: 0.5rem;
+        height: 8px;
     }
 
     [data-md-timepicker-handle] {
@@ -370,21 +375,21 @@
     /* ---- The input variant -------------------------------------------------------------------- */
 
     [data-md-timepicker-inputs] [data-md-timepicker-separator] {
-        height: 4.5rem;
+        height: 72px;
     }
 
     [data-md-timepicker-inputs] [data-md-timepicker-period] {
-        height: 4.5rem;
+        height: 72px;
     }
 
     [data-md-timepicker-column] {
-        width: 6rem;
+        width: 96px;
     }
 
     [data-md-timepicker-input] {
         display: block;
-        width: 6rem;
+        width: 96px;
-        height: 4.5rem;
+        height: 72px;
         padding: 0;
         border: 0;
         border-radius: var(--md-sys-shape-corner-sm);
@@ -418,10 +423,11 @@
         box-shadow: inset 0 0 0 2px var(--md-sys-color-error);
     }
 
-    /* SupportingText: two lines' room, 7px under the field; the error in its place. */
+    /* SupportingText: two lines' room, 7px under the field; the error in its place. The room is two
+       body-small lines (1rem each), so it stays in rem and grows with the text. */
     [data-md-timepicker-support] {
         min-height: 2rem;
-        padding-top: 0.4375rem;
+        padding-top: 7px;
         color: var(--md-sys-color-on-surface-variant);
         font: var(--md-sys-typescale-body-sm);
         letter-spacing: var(--md-sys-typescale-body-sm-tracking);
@@ -433,8 +439,8 @@
     }
 
     [data-md-timepicker-range-error] {
-        max-width: 17rem;
+        max-width: 272px;
-        padding-bottom: 0.5rem;
+        padding-bottom: var(--md-sys-measurement-space100);
         font: var(--md-sys-typescale-body-sm);
         letter-spacing: var(--md-sys-typescale-body-sm-tracking);
     }
@@ -442,8 +448,8 @@
     [data-md-timepicker-actions] {
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: var(--md-sys-measurement-space100);
-        min-height: 3rem;
+        min-height: 48px;
     }
 
     [data-md-timepicker-actions] > [data-md-timepicker-spacer] {
@@ -454,18 +460,18 @@
 
     @media (orientation: landscape) and (height < 560px) {
         [data-md-timepicker-surface][data-md-mode='dial'] {
-            grid-template-columns: 13.5rem auto;
+            grid-template-columns: 216px auto;
             grid-template-areas:
                 'display dial'
                 'actions actions';
-            column-gap: 2.25rem;
+            column-gap: 36px;
-            padding: 1rem 1.5rem 0.5rem;
+            padding: var(--md-sys-measurement-space200) var(--md-sys-measurement-space300) var(--md-sys-measurement-space100);
         }
 
         [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-title] {
             grid-area: display;
             align-self: start;
-            margin-top: 0.5rem;
+            margin-top: var(--md-sys-measurement-space100);
             padding: 0;
         }
 
@@ -481,14 +487,14 @@
         }
 
         [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-display][data-md-cycle='24'] [data-md-timepicker-box] {
-            width: 6rem;
+            width: 96px;
         }
 
         [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-display] [data-md-timepicker-period] {
             flex-direction: row;
-            width: 13.5rem;
+            width: 216px;
-            height: 2.375rem;
+            height: 38px;
-            margin: 1rem 0 0;
+            margin: var(--md-sys-measurement-space200) 0 0;
         }
 
         [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial] {
@@ -498,19 +504,19 @@
 
         [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-actions] {
             grid-area: actions;
-            margin-top: 0.25rem;
+            margin-top: var(--md-sys-measurement-space50);
         }
     }
 
     @media (orientation: landscape) and (height <= 364px) {
         [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial] {
-            --dial: 14.875rem;
+            --dial: 238px;
         }
     }
 
     @media (orientation: landscape) and (height <= 346px) {
         [data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial] {
-            --dial: 12.5rem;
+            --dial: 200px;
         }
     }
 }

tests/Browser/TimepickerTest.php

@@ -370,14 +370,15 @@ it('lies the dial on its side in a short landscape window', function () {
         ->click('#meeting')
         ->assertScript("document.querySelector('#meeting-dialog').open");
 
-    // Side by side rather than stacked: the display and the dial share a top edge, the dial to
+    // Side by side rather than stacked: the display (216px wide) sits centred in the dial's row,
-    // the display's end, and the picker's own layout (flex column) gives way to the grid areas.
+    // inside its height, with the dial 36px after it, and the picker's own layout (flex column)
+    // gives way to the grid areas.
     $page->assertScript(<<<'JS'
         (() => {
             const display = document.querySelector('#meeting-dialog [data-md-timepicker-display]').getBoundingClientRect();
             const dial = document.querySelector('#meeting-dialog [data-md-timepicker-dial]').getBoundingClientRect();
 
-            return Math.abs(display.top - dial.top) < 4 && dial.left >= display.right;
+            return display.top > dial.top && display.bottom < dial.bottom && Math.abs(dial.left - display.right - 36) < 1 && Math.round(display.width) === 216;
         })()
         JS)
         ->assertScript("getComputedStyle(document.querySelector('#meeting-dialog [data-md-timepicker-picker]')).display === 'contents'");

tests/Feature/Components/TimepickerTest.php

@@ -2,6 +2,7 @@
 
 use Livewire\Component;
 use Livewire\Livewire;
+use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
 
 /**
  * The JSON the component hands its Alpine data as its second argument.
@@ -87,6 +88,34 @@ it('offers the input variant, the period selector and the actions', function ()
         ->toContain('>OK</span>');
 });
 
+it('draws the boxes, the period and the dial from the interaction classes', function () {
+    $html = (string) $this->blade('<x-timepicker id="pickup" label="Pickup" />');
+    $css = ComponentStylesheet::read('timepicker');
+
+    // Two boxes and two period selectors of two radios each; the dial takes the ring alone.
+    expect(substr_count($html, 'class="md-state-layer md-focus-ring"'))->toBe(6)
+        ->and($html)->toMatch('/class="md-focus-ring"\s+data-md-timepicker-dial/')
+        ->and($css->declarations('[data-md-timepicker-dial]'))->not->toHaveKey('outline')
+        ->and($css->declarations('[data-md-timepicker-box]'))->not->toHaveKeys(['outline', 'position', 'isolation'])
+        ->and($css->declarations('[data-md-timepicker-period] > button:disabled'))->toMatchArray([
+            'color' => 'color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent)',
+            'background-color' => 'color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent)',
+        ]);
+});
+
+it('lies the dial down by orientation and viewport height alone, at the px the upright dial needs', function () {
+    $css = ComponentStylesheet::read('timepicker');
+
+    expect($css->mediaQueries())->toBe([
+        '(orientation: landscape) and (height < 560px)',
+        '(orientation: landscape) and (height <= 364px)',
+        '(orientation: landscape) and (height <= 346px)',
+    ])
+        ->and($css->declarations('[data-md-timepicker-dial]'))->toMatchArray(['--dial' => '256px'])
+        ->and($css->declarations("[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial]", ['@media (orientation: landscape) and (height <= 364px)']))->toBe(['--dial' => '238px'])
+        ->and($css->declarations("[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial]", ['@media (orientation: landscape) and (height <= 346px)']))->toBe(['--dial' => '200px']);
+});
+
 it('passes the format, locale, limits and step to the picker, and drops what it cannot use', function () {
     app()->setLocale('de_CH');