fix(date-range-picker): el overview hereda el velo, y su demo no lo enseña

Firma 3, cuarto componente. Los cuatro nav del overview llevan
`archetype: 'trigger'` y sus celdas `archetype: 'item'`: los dos reciben velo
de `archetypes.css`. Y los dos lo tenían cancelado por la misma causa que el
resto — `background: transparent` es el ATAJO y también fija
`background-image: none`, con (0,1,0) contra el `:where()` (0,0,0).

  reglas base   `background: transparent` → `background-color: transparent`
  reglas hover  fuera las dos; el velo las sustituye
  contrato      `hover-overview-nav-bg` y `hover-overview-cell-bg`, retiradas

**La verificación aquí es más floja que en los tres anteriores, y conviene
decirlo**: la demo monta UN picker sin `kind`, así que el overview de mes/año
no se renderiza nunca y la sonda no puede medir el pintado (2 nodos vistos).
El artefacto es la forma del CSS y el arquetipo leído del morfo, no un computed
antes/después. El mecanismo sí está medido tres veces (checkbox, splitter,
switch).

Queda anotado un hueco de demo: `kind='month'` y `kind='year'` son la mitad de
la API del picker (norma N-6) y la superficie de demo no los expone, así que
esas partes no se pueden ver ni medir. La demo es el producto.

  audit PASS · censo 40 % · suite 434 (1 rojo conocido) · rtl 0 · docs 0

Nota aparte: las celdas conservan `background:` (atajo) en `[data-in-range]` y
`[data-range-start/end]`. Son estado de rango con valencia, no hover neutro —
fuera del alcance de esta firma, pero cancelan el velo igual.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
alpha-0.1-background
dev 2 months ago
parent 3219a19c3c
commit 0c80a8efb8

@ -405,19 +405,18 @@
min-inline-size: var(--date-range-picker-overview-nav-size);
border-radius: var(--date-range-picker-overview-nav-radius);
border: var(--border-width) solid transparent;
background: transparent;
/* LONGHAND: even `background: transparent` resets `background-image`, and
* this rule (0,1,0) beats the `:where()` (0,0,0) of `archetypes.css` — the
* state-layer veil would never paint on these triggers. */
background-color: transparent;
color: var(--date-range-picker-overview-nav-fg);
cursor: pointer;
font: inherit;
font-size: var(--date-range-picker-overview-nav-font-size);
}
[data-date-range-picker-year-view-prev]:hover,
[data-date-range-picker-year-view-next]:hover,
[data-date-range-picker-month-view-prev]:hover,
[data-date-range-picker-month-view-next]:hover {
background: var(--date-range-picker-hover-overview-nav-bg);
}
/* The nav's neutral hover is the system's veil (§38): these parts carry
* `archetype: 'trigger'`. */
[data-date-range-picker-year-view-grid],
[data-date-range-picker-month-view-grid] {
@ -431,7 +430,9 @@
min-block-size: var(--date-range-picker-overview-cell-height);
border-radius: var(--date-range-picker-overview-cell-radius);
border: var(--border-width) solid transparent;
background: transparent;
/* LONGHAND — same reason as the nav above: the shorthand would cancel the
* state-layer veil these `item` cells get for free. */
background-color: transparent;
color: var(--date-range-picker-overview-cell-fg);
cursor: pointer;
font: inherit;
@ -441,10 +442,7 @@
color var(--duration-fast) var(--ease-default);
}
[data-date-range-picker-year-view-cell]:hover,
[data-date-range-picker-month-view-cell]:hover {
background: var(--date-range-picker-hover-overview-cell-bg);
}
/* The cells' neutral hover is the system's veil (§38): `archetype: 'item'`. */
/* Range stripe: in-range cells get a tinted background matching the
* day-grid pattern (track scale, scale-3). Start and end cells overlay

@ -1668,13 +1668,11 @@
--date-range-picker-overview-nav-radius: var(--radius-md);
--date-range-picker-overview-nav-fg: var(--color-content-primary);
--date-range-picker-overview-nav-font-size: var(--size-md-font-size);
--date-range-picker-hover-overview-nav-bg: var(--color-surface-overlay);
--date-range-picker-overview-grid-gap: var(--space-2);
--date-range-picker-overview-cell-height: var(--size-md-control-height);
--date-range-picker-overview-cell-radius: var(--radius-md);
--date-range-picker-overview-cell-fg: var(--color-content-primary);
--date-range-picker-overview-cell-font-size: var(--size-sm-font-size);
--date-range-picker-hover-overview-cell-bg: var(--color-surface-overlay);
--date-range-picker-in-range-overview-cell-bg: var(--color-primary-track);
--date-range-picker-in-range-overview-cell-fg: var(--color-primary-text);
--date-range-picker-endpoint-overview-cell-bg: var(--color-primary-solid);

@ -2004,13 +2004,11 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({
'overview-nav-radius': 'var(--radius-md)',
'overview-nav-fg': 'var(--color-content-primary)',
'overview-nav-font-size': 'var(--size-md-font-size)',
'hover-overview-nav-bg': 'var(--color-surface-overlay)',
'overview-grid-gap': 'var(--space-2)',
'overview-cell-height': 'var(--size-md-control-height)',
'overview-cell-radius': 'var(--radius-md)',
'overview-cell-fg': 'var(--color-content-primary)',
'overview-cell-font-size': 'var(--size-sm-font-size)',
'hover-overview-cell-bg': 'var(--color-surface-overlay)',
'in-range-overview-cell-bg': 'var(--color-primary-track)',
'in-range-overview-cell-fg': 'var(--color-primary-text)',
'endpoint-overview-cell-bg': 'var(--color-primary-solid)',

Loading…
Cancel
Save

Powered by TurnKey Linux.