Seccion 9.6: cierre de metrics / bar-segment / chart-legend, el defecto del
preset `grow-x` con sus medidas, y el renombrado de `placement`.
Lo que merece quedar escrito: los tres se dieron por sanos en 7.2 mirando el
CSS, y el CSS ERA correcto en los tres. Lo que fallaba era la ANIMACION, que
no vive en el recipe sino en un preset compartido. Revisar una grafica en RTL
no es solo leer su recipe — hay que disparar su entrada y mirar de donde
crece.
Y el tercer punto ciego de RTL-1, tras el transform inline del 6.7: un
`transform-origin` en un preset de TypeScript. El guard lee CSS estatico; los
presets y lo que pinta el JS siguen necesitando el ojo.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
base** · 32/32 en motion + metrics · `rtl:check` = 1, el de siempre.
| pieza | veredicto |
| --- | --- |
| `chart-legend` | **Correcto.** No renderiza nada — es un config child; el marcado lo pinta el frame con flex lógico, y §6.14 ya midió que `legendDir` voltea |
| `metrics` | **CSS correcto**: `icon-start` va al borde derecho en RTL y la sparkline espeja (`M0,31` → `M304,31`). Problema de VOCABULARIO |
| `bar-segment` | Layout, leyenda y tooltip correctos. **Defecto real en la animación de entrada** |
**El defecto no era de `bar-segment`, era del preset `grow-x`**, que clavaba
`transform-origin: 0% 50%` — el borde FÍSICO izquierdo. En RTL la barra se
dispone contra el borde derecho, así que crecía **desde su punta de vuelta a
su base**, despegándose de su ancla. Medido en los dos consumidores:
```
bar-segment borde izq. clavado en 296, el derecho avanza 108 → 0
bar-list borde izq. clavado en 239, y el de ANCLAJE se aleja 65 → 3
```
`transform-origin`**no tiene forma lógica en CSS**, así que el preset lee
ahora `--motion-origin-inline-start`, que `render-css.ts` emite por `:dir()`.
Es el patrón que el propio sistema ya usaba en `scale-fade` con
`--floating-transform-origin`. La var **HEREDA** —al revés que el índice de
stagger, que es `inherits: false`— porque es lo que permite que un `:dir()`
de un ancestro alcance al nodo animado; y se declaran las DOS direcciones,
por la misma razón que `[dir='rtl']` está prohibido (§6.3).
⚠️ **PUNTO CIEGO DE RTL-1, el tercero** (tras el `transform` inline del §6.7):
esto vive en un preset de TypeScript, ni siquiera en CSS estático. El guard
lee CSS; los presets y lo que pinta el JS siguen necesitando el ojo.
**`metrics`: renombrado `placement: 'right'` → `'end'`** (BREAKING, sin shim).
El CSS siempre fue lógico, así que `right` ya ponía el chart a la izquierda en
RTL: el comportamiento era el bueno, mentía el nombre. Y era una **isla** —
`layout: 'icon-start'`, `align: 'start'` y el resto del vocabulario del
componente son lógicos. NO es el caso legítimo del `toast` (§6.10), que es
físico y coherente **consigo mismo**; aquí la incoherencia estaba dentro.
**MÉTODO**: los tres se dieron por sanos en §7.2 mirando el CSS, y el CSS
**era** correcto en los tres. Lo que fallaba era la ANIMACIÓN, que no está en
el recipe sino en un preset compartido. Revisar una gráfica en RTL no es sólo
leer su recipe: hay que **disparar su entrada** y mirar de dónde crece.
📌 No tocado y señalado: el token `--metrics-chart-right-width` conserva el
nombre físico. Describe un ANCHO, no un lado, y es superficie pública de
theming — su renombrado es otra decisión.
### 9.7 · Suelto
- **`-0`**: negar un `scrollLeft` en reposo da `-0`. Es inocuo en el DOM
(`String(-0)` es `"0"`, medido), pero un matcher estricto lo distingue — de
