svelte-kit-vice/docs/audit/theming/toast.md

toast — alcance de tema: análisis y propuesta

Generado por node --import tsx/esm scripts/theming-census.ts --report. Lo medido y la propuesta se regeneran; el Veredicto (§5) se conserva. Vista de conjunto: README · método y protocolo: PLAN-theming.md §1, §2, §7.

• Medido: 2026-08-24 · Alcance: 100% — 45 de 45 knobs por token público
• Knobs de apariencia: 45 — público 45 · privado 0 · global 0 · literal 0 · sistema 0 · excepción 1 (los dos últimos, fuera del ratio)
• Contrato hoy (lib/recipes/base.ts): 85 pública(s) — toaster-z, toaster-inset, toaster-gap, toaster-width, provider-min-width, provider-max-width, provider-gap, provider-stack-gap, provider-padding-inline, provider-padding-block, provider-border-width, provider-radius, provider-shadow, accent-width, transition-duration, transition-ease, closed-offset, closed-scale, status-size, status-radius, title-font-family, title-font-size, title-font-weight, title-line-height, title-fg, message-fg, description-font-family, description-font-size, description-line-height, description-fg, action-gap, action-padding-inline, action-padding-block, action-margin-top, action-border-width, action-radius, action-font-family, action-font-size, action-font-weight, action-line-height, action-focus-ring-offset, action-focus-ring-width, action-focus-ring-color, default-surface, default-border, default-accent, default-status-bg, default-status-fg, default-action-fg, default-action-hover-bg, affirm-surface, affirm-border, affirm-accent, affirm-status-bg, affirm-status-fg, affirm-action-fg, affirm-action-hover-bg, fulfill-surface, fulfill-border, fulfill-accent, fulfill-status-bg, fulfill-status-fg, fulfill-action-fg, fulfill-action-hover-bg, risk-surface, risk-border, risk-accent, risk-status-bg, risk-status-fg, risk-action-fg, risk-action-hover-bg, threat-surface, threat-border, threat-accent, threat-status-bg, threat-status-fg, threat-action-fg, threat-action-hover-bg, loss-surface, loss-border, loss-accent, loss-status-bg, loss-status-fg, loss-action-fg, loss-action-hover-bg
• Eje size: no · ficheros: toast.css

1. Knobs fuera de alcance

1.1 Directo a primitivo global (0)

Ninguno.

1.2 A través de un privado (0)

Ninguno.

1.3 Literales (0)

Ninguno.

1.4 Excepciones firmadas (1) — fuera del ratio

Literales que llevan su anotación /* literal: <razón> */ en la propia declaración: la válvula de recipe-contract §3, la misma que honra component-audit. Una desviación firmada no es deuda — se listan para que la razón se lea, no para acuñarlas.

#	fichero:línea	selector	propiedad	valor
1	toast.css:101	[data-toast-item]	opacity	1

2. Sistema transversal (0) — informativo, fuera del ratio

Un tema los alcanza a nivel de sistema, por diseño (recipe-contract §2).

Ninguno.

3. Privados de la receta — ¿de dónde sale su valor?

privado	declaraciones	valor(es)	origen	¿deriva de un público?
--_toast-surface	6	var(--toast-default-surface), var(--toast-affirm-surface), var(--toast-fulfill-surface), var(--toast-risk-surface), var(--toast-threat-surface), var(--toast-loss-surface)	public	sí
--_toast-border	6	var(--toast-default-border), var(--toast-affirm-border), var(--toast-fulfill-border), var(--toast-risk-border), var(--toast-threat-border), var(--toast-loss-border)	public	sí
--_toast-accent	6	var(--toast-default-accent), var(--toast-affirm-accent), var(--toast-fulfill-accent), var(--toast-risk-accent), var(--toast-threat-accent), var(--toast-loss-accent)	public	sí
--_toast-status-bg	6	var(--toast-default-status-bg), var(--toast-affirm-status-bg), var(--toast-fulfill-status-bg), var(--toast-risk-status-bg), var(--toast-threat-status-bg), var(--toast-loss-status-bg)	public	sí
--_toast-status-color	6	var(--toast-default-status-fg), var(--toast-affirm-status-fg), var(--toast-fulfill-status-fg), var(--toast-risk-status-fg), var(--toast-threat-status-fg), var(--toast-loss-status-fg)	public	sí
--_toast-action-color	6	var(--toast-default-action-fg), var(--toast-affirm-action-fg), var(--toast-fulfill-action-fg), var(--toast-risk-action-fg), var(--toast-threat-action-fg), var(--toast-loss-action-fg)	public	sí
--_toast-action-hover-bg	6	var(--toast-default-action-hover-bg), var(--toast-affirm-action-hover-bg), var(--toast-fulfill-action-hover-bg), var(--toast-risk-action-hover-bg), var(--toast-threat-action-hover-bg), var(--toast-loss-action-hover-bg)	public	sí

4. Propuesta de corrección

4.1 Tokens a declarar en lib/recipes/base.ts (0)

Valor verbatim del CSS de hoy: el default no se mueve, sólo cambia quién puede moverlo. Nombres derivados de recipe-contract §1 (ejes lógicos, talla al final) y theming §6.7 (slots de color, modificador delante). Un token con DOS valores distintos es una colisión de nombre: son dos knobs, o el nombre no distingue lo que debería — se marca ⚠.

token (--toast-…)	scope TSC	valor propuesto	usos

4.4 Lo que hay que comprobar a mano (PLAN-theming §1.3 · §7.4)

• Privado que no deriva de un público — §3 lo marca; el privado debe leer el público o desaparecer.
• Velo o acento en el nodo equivocado (archetype: 'item' en un envoltorio, un background en shorthand que mata la capa de estado) — se mide desde el píxel hacia arriba.
• Doble animación al mover un sello a una superficie con animación propia — registro de animationstart/animationend.
• Diff de computed = 0 en reposo · hover · abierto · disabled · foco, por talla, antes y después.
• Centinela por token nuevo: valor imposible en el root → el nodo lo sigue. Si no, el token miente.

5. Veredicto

Medido y cerrado el 2026-08-24 — 98 % → 100 %, con UNA firma y cero claves acuñadas. El contrato ya tenía sus 85 y no había nada que coser: global era cero antes de empezar y el único knob fuera de alcance era un literal.

El literal es identidad, no deuda. opacity: 1 en [data-toast-item] es el polo EN REPOSO del par abierto/cerrado, y el que lleva tokens es el otro ([data-state='closed'] → closed-offset, closed-scale). «Presente del todo» no tiene un segundo valor que sostener. Firmado con su anotación literal: (recipe-contract §3), sale del ratio. La propuesta §4.2 lo insinuaba y aquí se resuelve con la válvula del canon, no con una clave.

El hallazgo del componente es §12.9 con una cara nueva: en una tarjeta PORTALADA el plano overlay no se lleva sólo la tipografía — se lleva la TARJETA ENTERA. toast-item.svelte sella data-depth='overlay', y [data-depth='overlay'] declara background, el ATAJO border y box-shadow con la misma especificidad (0,1,0) y más tarde en la cascada. Medido el 2026-08-24 sobre la tarjeta real con las transiciones congeladas (scripts/__dbg-toast-plane.mjs): escribir --toast-risk-surface, --toast-*-border, --toast-provider-border-width, --toast-accent-width o --toast-provider-shadow no mueve nada (el fondo se queda en oklch(0.931 0 0), el borde en oklch(0.8853 0 0) 1px); escribir --depth-overlay-surface / -border / -shadow y --border-width en la misma raíz lo repinta todo (rgb(4, 5, 6), 999px, el anillo de 9px). Son 21 claves de 85, y a diferencia de tooltip esto TIENE consecuencia visible: un toast risk y uno fulfill visten la misma tarjeta gris — sólo el disco de estado y la tinta de la acción llevan la intención, y la franja de acento (border-inline-start, un longhand que el atajo posterior pisa en los cuatro lados) no se ve en reposo. Es la incidencia §12.9, pendiente de firma: se mide, se adjudica con la constante PLANE_SUPERSEDED del ledger y no se toca desde este eje — arreglarla mueve píxel en veinte componentes.

Matiz que sólo aparece midiendo: los seis {tono}-accent NO están muertos. El plano los tapa en reposo, pero bajo [data-toast-item][data-loading] la regla del pulso es (0,2,0) y su @keyframes gana a cualquier declaración normal. Medido sobre 100 fotogramas del pulso real: sin escribir, el color interpolado del borde corre en oklab L 0.5032..0.8514; con --toast-default-accent: rgb(1, 2, 3), 0.0823..0.5032.

Guard R-5.4: 51/85 mueven, 34 adjudicados, ninguno retirado. Además de las 21 del plano: la pareja de transición (el guard congela transition), closed-offset / closed-scale (estado de salida + transform, que el guard no fotografía), los tres del anillo de foco de la acción (el guard hace blur), los cinco {tono}-action-hover-bg (el guard estampa el tono en su pasada estática y no en la de hover) y provider-max-width, cuyo valor centinela de 1234px se capa contra el min(100%, …) — medido desde el otro lado, 120px encoge la tarjeta de 420 a 280.

Y una lección de instrumento: este componente es el primero donde poner openMarker EMPEORA la medición. Una tarjeta se auto-descarta a los 5 s, así que «¿ya está abierta?» no tiene respuesta útil: con openMarker tres corridas sobre código idéntico discreparon en QUÉ token leía muerto. Sin él, el guard cae al marcador por defecto ([data-toast-content], una parte que este componente no tiene) y dispara una tarjeta nueva antes de CADA token — 51/85 en tres corridas seguidas, determinista.

Techo: 100 %. Toast.Close no aporta claves porque compone el IconButton canónico — ceder el cromo al compuesto sale gratis, el precedente toolbar.