refactor(date-range-picker): thread size to endpoints + de-alias the field CSS

Closes the two remaining date-range-picker cleanups after the composition refactor:

- Size threading (functional): the eidos `<DateRangePicker.Input>` now reads the
  picker's visual context and forwards data-size/variant/color to soma's Input
  (= the composed DateRangeField.Input), so each endpoint's composed <DateField>
  self-themes at the picker size. Verified reactive (md → lg resizes both endpoints).

- De-alias / prune (no-token-alias hygiene): removed the orphaned
  `--_date-field-padding-inline` / `--_date-field-segment-padding-inline`
  re-declarations (their consumers — the endpoint box + segment rules — are gone);
  reduced the shared label rule to layout-only (colour/size come from
  date-range-field.css); RETARGETED the endpoint-invalid rule from the now-borderless
  endpoint wrapper to each inner `[data-field-control]` with Field's
  `--field-control-border-invalid` (it was a no-op post-composition — invalid now
  paints again); and re-based the embedded trigger on the Field `--field-segment-height`
  token + shared segment-active tokens + foundation radius (no date-field aliases).

Residual (coupled to the pending date-field recipe-token pruning): the UNUSED
standalone trigger + the root wrap-stack still reference date-field recipe tokens
(height/gap/font-size/accent); they resolve correctly and retire with that pass.

Baseline unchanged (59). Verified: two boxes, embedded trigger sized/rounded,
invalid paints, size reactive.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/uix/eidos/components/date-range-picker/date-range-picker-input.svelte

@@ -1,11 +1,26 @@
 <script lang="ts">
+	/**
+	 * Eidos `<DateRangePicker.Input>`. Reads the picker's visual context (size /
+	 * variant / color) and threads it to soma's Input (= the composed
+	 * DateRangeField.Input) as `data-*` attrs, so each endpoint's composed
+	 * `<DateField>` self-themes at the picker's size — exactly like a standalone
+	 * DateRangeField. Snippet args come from soma unchanged.
+	 */
 	import * as DateRangePicker from '$soma/components/date-range-picker';
+	import { getDateRangePickerVisualContext } from './context.svelte';
 	import type { DateRangePickerInputProps, DateRangePickerInputSnippetProps } from './types';
 
 	let { children: bodyContent, ...rest }: DateRangePickerInputProps = $props();
+
+	const visual = getDateRangePickerVisualContext();
 </script>
 
-<DateRangePicker.Input {...rest}>
+<DateRangePicker.Input
+	{...rest}
+	data-size={visual?.getSize()}
+	data-variant={visual?.getVariant()}
+	data-color={visual?.getColor()}
+>
 	{#snippet children(args: DateRangePickerInputSnippetProps)}
 		{@render bodyContent?.(args)}
 	{/snippet}

src/uix/eidos/components/date-range-picker/date-range-picker.css

@@ -1,8 +1,13 @@
 [data-date-range-picker] {
+	/* Trigger + wrap-layout tokens (calendar tokens below). The endpoints are
+	   composed <DateField>s that self-theme via field.css, so only the STANDALONE
+	   trigger + the root's wrap gap/font read these. height/gap/font-size still
+	   reference the date-field recipe tokens — they retire with the recipe-token
+	   pruning pass (they resolve correctly meanwhile). Orphaned padding-inline /
+	   segment-padding-inline (their consumers — the endpoint box + segment rules —
+	   are gone) removed. */
 	--_date-field-height: var(--date-field-height-md);
-	--_date-field-padding-inline: var(--date-field-padding-inline-md);
 	--_date-field-gap: var(--date-field-gap-md);
-	--_date-field-segment-padding-inline: var(--date-field-segment-padding-inline-md);
 	--_date-field-font-size: var(--date-field-font-size-md);
 	--_date-field-accent-border: var(--color-primary-border);
 	--_date-field-accent-track: var(--color-primary-track);
@@ -30,20 +35,15 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: end;
-	gap: var(--date-field-stack-gap) var(--_date-field-gap);
+	gap: var(--space-1-5) var(--_date-field-gap);
 	inline-size: 100%;
 	min-inline-size: 0;
-	color: var(--date-field-color);
-	font-family: var(--date-field-font-family);
 	font-size: var(--_date-field-font-size);
-	line-height: var(--date-field-line-height);
 }
 
 [data-date-range-picker][data-size='xs'] {
 	--_date-field-height: var(--date-field-height-xs);
-	--_date-field-padding-inline: var(--date-field-padding-inline-xs);
 	--_date-field-gap: var(--date-field-gap-xs);
-	--_date-field-segment-padding-inline: var(--date-field-segment-padding-inline-xs);
 	--_date-field-font-size: var(--date-field-font-size-xs);
 	--_calendar-padding: var(--calendar-padding-xs);
 	--_calendar-control-size: var(--calendar-control-size-xs);
@@ -53,9 +53,7 @@
 
 [data-date-range-picker][data-size='sm'] {
 	--_date-field-height: var(--date-field-height-sm);
-	--_date-field-padding-inline: var(--date-field-padding-inline-sm);
 	--_date-field-gap: var(--date-field-gap-sm);
-	--_date-field-segment-padding-inline: var(--date-field-segment-padding-inline-sm);
 	--_date-field-font-size: var(--date-field-font-size-sm);
 	--_calendar-padding: var(--calendar-padding-sm);
 	--_calendar-control-size: var(--calendar-control-size-sm);
@@ -65,9 +63,7 @@
 
 [data-date-range-picker][data-size='lg'] {
 	--_date-field-height: var(--date-field-height-lg);
-	--_date-field-padding-inline: var(--date-field-padding-inline-lg);
 	--_date-field-gap: var(--date-field-gap-lg);
-	--_date-field-segment-padding-inline: var(--date-field-segment-padding-inline-lg);
 	--_date-field-font-size: var(--date-field-font-size-lg);
 	--_calendar-padding: var(--calendar-padding-lg);
 	--_calendar-control-size: var(--calendar-control-size-lg);
@@ -164,10 +160,9 @@
 }
 
 [data-date-range-field-label] {
+	/* Layout only: full-row in the picker's flex-wrap. Color / size / weight come
+	   from date-range-field.css `[data-date-range-field-label]` (imported first). */
 	flex: 1 0 100%;
-	color: var(--date-field-label-color);
-	font: inherit;
-	font-weight: var(--date-field-label-font-weight);
 }
 
 /* Each endpoint is now a COMPOSED <DateField> (soma DateRangeField.Input renders
@@ -186,14 +181,16 @@
    on each DateField, never on a wrapper above them. The former CSS-only
    `[data-date-range-field-group]` single-box hook was unused and is removed. */
 
-[data-date-range-picker][data-invalid] [data-date-range-field-input],
-[data-date-range-field-input][data-invalid] {
-	border-color: var(--date-field-border-invalid);
+/* Endpoint invalid: the composed DateFields don't self-validate (range-level
+   validation lives on the range provider), so when the PICKER is invalid we colour
+   each endpoint's inner [data-field-control] border with Field's invalid token.
+   (Was targeting the now-borderless endpoint wrapper — a no-op post-composition.) */
+[data-date-range-picker][data-invalid] [data-field-control] {
+	border-color: var(--field-control-border-invalid);
 }
 
-[data-date-range-picker][data-disabled],
-[data-date-range-field-input][data-disabled] {
-	opacity: var(--date-field-disabled-opacity);
+[data-date-range-picker][data-disabled] {
+	opacity: var(--opacity-disabled);
 }
 
 /* Segment box + states (literal / placeholder / focus highlight / invalid /
@@ -251,28 +248,23 @@
 
 [data-date-range-field-input] [data-date-range-picker-trigger] {
 	flex: 0 0 auto;
-	/* Sized from the picker-local `--_date-field-height` (scales per size); the
-	   field-family segment-height token is registered design pending the Field
-	   composition (docs/next-features.md, audit B.1). `font: inherit` so the
-	   `1em` icon tracks the field font. */
-	inline-size: calc(var(--_date-field-height) - var(--space-2));
-	block-size: calc(var(--_date-field-height) - var(--space-2));
+	/* Square icon button sized from the Field family `--field-segment-height`
+	   (registered on the endpoint's own `[data-field]`, size-scaled) — the B.1
+	   token that the Field composition made available. `font: inherit` so the 1em
+	   icon tracks the field font; colours inherit the control. */
+	inline-size: var(--field-segment-height);
+	block-size: var(--field-segment-height);
 	margin-inline-start: auto;
 	padding: 0;
 	border: none;
-	border-radius: var(--date-field-segment-radius);
+	border-radius: var(--radius-sm);
 	background: transparent;
-	color: var(--date-field-segment-color);
+	color: inherit;
 	box-shadow: none;
 	font: inherit;
 }
 
-[data-date-range-field-input] [data-date-range-picker-trigger]:hover {
-	border: none;
-	background: var(--_date-field-accent-track);
-	color: var(--_date-field-accent-text);
-}
-
+[data-date-range-field-input] [data-date-range-picker-trigger]:hover,
 [data-date-range-field-input] [data-date-range-picker-trigger]:focus-visible {
 	outline: none;
 	border: none;