Readonly slider vertical alignment broken for default and large size variants

[coderabbitai]

Summary

In readonly state, .switch gains a 1px dashed border with box-sizing: border-box, which reduces the inner track height by 2px (1px top + 1px bottom). The :host([readonly]) .slider rule keeps top: 1px, meaning the slider knob is not vertically centred for the default and large sizes.

Root Cause

The correct top offset in readonly state must account for the 1px border:

correct_top = (switch_height - 2px_border - slider_height) / 2

Expected vs Current Behaviour

Size	Switch H	Slider H	Correct readonly top	Current top: 1px
Default / medium	24px	18px	2px	❌ 1px (1px too high)
Small	18px	14px	1px	✅ correct
Large	32px	24px	3px	❌ 1px (2px too high)
Longswipe + small	18px	14px	1px	✅ correct
Longswipe + large	32px	24px	3px	❌ 1px (2px too high)

Proposed Fix

Set the base readonly rule to the correct default value and add per-size overrides for large:

:host([readonly]) .slider {
 top: 2px; /* default & medium: (22 - 18) / 2 = 2px */
 left: 1px;
 box-shadow: none;
 background-color: var(--lumo-contrast-40pct, var(--vaadin-background-container-strong));
}

/* small inner height = 16px → (16 - 14) / 2 = 1px */
:host([readonly][theme~="small"]) .slider,
:host([readonly][theme~="longswipe"][theme~="small"]) .slider {
 top: 1px;
}

/* large inner height = 30px → (30 - 24) / 2 = 3px */
:host([readonly][theme~="large"]) .slider,
:host([readonly][theme~="longswipe"][theme~="large"]) .slider {
 top: 3px;
}

Context

Identified during review of PR #4 (#4) — specifically the discussion at #4 (comment).

The top: 2px fix attempted in PR #4 was reverted because it exposed the missing per-size overrides for large. This issue tracks the complete fix covering all size variants.

Reported by @paodb.