@studiolxd/brand 50.0.0 → 51.0.1

package/src/tokens/molecules/chart.css

@@ -7,6 +7,7 @@
   --chart-bar-radius: 0.25rem; /** 4px — extremo de dato redondeado; el extremo de la línea base queda recto */
   --chart-area-fill-opacity: 0.1; /** El área es un velo del tono de la serie, nunca un bloque saturado */
   --chart-donut-thickness: 0.55; /** Fracción del radio que ocupa el anillo del donut */
+  --chart-dot-size: 10px; /** 10px de diámetro — medida propia del componente (no hay peldaño de 10 en `spacing.*`). Punto de la nube de dispersión, mayor que el marcador de línea porque aquí el punto es la marca, no un remate */
   --chart-radar-fill-opacity: 0.15; /** El polígono del radar es un velo del tono de la serie, como el área */
   --chart-hover-opacity: 0.75; /** Atenuación de las marcas que no son la activa mientras el puntero está encima */
   --chart-series-1: var(--color-chart-series-1); /** Ranura categórica 1. El orden de las ranuras es el mecanismo de seguridad para daltonismo: se asignan en orden, nunca se ciclan */
@@ -36,7 +37,6 @@
   --chart-marker-size: var(--spacing-2); /** 8px de diámetro — punto de serie y marcador de extremo */
   --chart-funnel-gap: var(--spacing-1); /** 4px — hueco de superficie entre tramos del embudo */
   --chart-radial-bar-gap: var(--spacing-1); /** 4px — hueco entre anillos de la barra radial */
-  --chart-dot-size: var(--spacing-3); /** 10px de diámetro nominal — punto de la nube de dispersión, mayor que el marcador de línea porque aquí el punto es la marca, no un remate */
   --chart-tile-label-color-1: var(--color-black); /** Rótulo sobre la baldosa de la ranura 1. La tinta se elige por ranura: ninguna de las dos (blanco o negro) llega a 4.5:1 sobre las ocho series, así que cada una lleva la que cumple. Negro, no prusia: el prusia es un casi-negro entintado y se queda corto sobre el azul de la ranura 1 */
   --chart-tile-label-color-2: var(--color-black); /** Rótulo sobre la baldosa de la ranura 2 */
   --chart-tile-label-color-3: var(--color-black); /** Rótulo sobre la baldosa de la ranura 3 */
@@ -55,7 +55,7 @@
   --chart-transition-duration: var(--motion-duration-fast); /** Respuesta de la marca al puntero. Con `prefers-reduced-motion` no hay transición */
   --chart-transition-easing: var(--motion-easing-out); /** Curva de la respuesta al puntero */
   --chart-diverging-neutral: var(--color-surface-secondary-on-light); /** Punto medio divergente: gris neutro. Nunca un tono — el medio tiene que leerse como «nada». Es el único dato que se viste con un rol de SUPERFICIE, y a propósito: el cero es el punto de MENOR saliencia de la rampa, así que su trabajo es retirarse hacia el lienzo, no contrastar con él. Sobre blanco queda en 1,12:1, por debajo de los seis pasos de los dos brazos (2,49:1 el más flojo) */
-  --chart-surface: var(--color-background-light); /** Color del hueco de 2px entre marcas contiguas y del anillo de 2px de los puntos. Es la superficie, no un borde: separar con trazo añadiría tinta que no es dato */
+  --chart-surface: var(--color-bg-light); /** Color del hueco de 2px entre marcas contiguas y del anillo de 2px de los puntos. Es la superficie, no un borde: separar con trazo añadiría tinta que no es dato */
   --chart-grid-color: var(--color-border-default-on-light); /** Rejilla: filete de 1px a un paso de la superficie. Cromo recesivo */
   --chart-grid-width: var(--border-width-default); /** Grosor de la rejilla. Sólida siempre: una rejilla discontinua se lee como umbral */
   --chart-axis-color: var(--color-icon-secondary-on-light); /** Línea base y eje: un paso más firme que la rejilla, porque es el ancla del cero */
@@ -110,7 +110,7 @@ html.dark {
   --chart-diverging-cool-2: var(--color-chart-diverging-cool-2-on-dark); /** Divergente frío 2 — surface-dark */
   --chart-diverging-cool-3: var(--color-chart-diverging-cool-3-on-dark); /** Divergente frío 3 — surface-dark */
   --chart-radial-track-color: var(--color-disabled-border-on-dark); /** Carril del anillo — surface-dark. La misma tinta que el eje en oscuro, por el mismo motivo */
-  --chart-surface: var(--color-background-dark); /** Hueco y anillo — surface-dark */
+  --chart-surface: var(--color-bg-dark); /** Hueco y anillo — surface-dark */
   --chart-grid-color: var(--color-border-recessive-on-dark); /** Rejilla — surface-dark. Excepción declarada a la regla de derivación (borde → `text.on-dark`): la rejilla es cromo recesivo, no un borde con peso de dato; en blanco sobre prusia se leería como tinta. Procedencia corregida: apuntaba a `color.surface.secondary-on-dark`, un token de SUPERFICIE (el mismo defecto de origen que hizo invisible el carril del Stepper) — ahora apunta a `color.border.recessive-on-dark`, un token de LÍNEA, con el mismo `grey-darkest` y por tanto el mismo valor visual */
   --chart-axis-color: var(--color-disabled-border-on-dark); /** Eje — surface-dark: un paso por encima de la rejilla, igual que en claro. Excepción declarada como `grid-color`: mismo `grey-dark` que en claro, no el `text.muted-on-dark` de `axis-color` */
   --chart-label-color: var(--color-text-muted-on-dark); /** Rótulos — surface-dark */

package/src/tokens/molecules/chat-shell.css

@@ -10,12 +10,12 @@
   --chat-shell-breakpoint: var(--breakpoint-lg); /** Donde el armazón pasa de dos columnas a una. El mismo punto en el que el chrome de aplicación pasa de barra superior a barra lateral */
   --chat-shell-drawer-gap: var(--chat-shell-thread-padding-block); /** Dentro del cajón de pantalla estrecha, el aire entre la fila del disparador y la lista. Cascada desde el aire de la ranura del hilo porque el cajón repite la maqueta de la columna principal: la lista tiene que arrancar donde arranca el hilo, para que al desplegar no se mueva más que el contenido. El cajón anula el relleno propio del `Sheet` (ver ChatShell.css), así que esta es la única medida que el armazón pone dentro de él */
   --chat-shell-thread-padding-inline: calc(var(--message-bubble-tail-size) + var(--message-bubble-border-width)); /** Pasillo lateral del hilo: exactamente lo que sobresale la cola del globo, que nace FUERA de su caja (el lado del triángulo más su contorno). Sin él la cola se corta contra el canto del desplazamiento. No es un margen de página —el aire alrededor del chat sigue poniéndolo quien lo monta—: es la anchura justa para que el pico respire */
-  --chat-shell-bg: var(--color-background-light); /** Fondo del armazón */
+  --chat-shell-bg: var(--color-bg-light); /** Fondo del armazón */
 }
 
 .surface-dark,
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --chat-shell-bg: var(--color-background-dark); /** Fondo del armazón — superficie oscura */
+  --chat-shell-bg: var(--color-bg-dark); /** Fondo del armazón — superficie oscura */
 }

package/src/tokens/molecules/color-picker.css

@@ -47,8 +47,8 @@
   --color-picker-trigger-error-focus-ring-color: var(--input-error-focus-ring-color); /** Anillo de foco en error */
   --color-picker-trigger-disabled-bg: var(--input-disabled-bg); /** Fondo deshabilitado */
   --color-picker-trigger-disabled-border-color: var(--input-disabled-border-color); /** Borde deshabilitado */
-  --color-picker-panel-inline-size: calc(8 * var(--color-picker-preset-size) + 7 * var(--color-picker-preset-gap)); /** Ancho del panel: ocho predefinidos por fila y sus siete huecos. El área y las bandas lo ocupan entero */
-  --color-picker-area-block-size: calc(6 * var(--color-picker-preset-size) + 5 * var(--color-picker-preset-gap)); /** Alto del área de saturación y brillo: seis filas de la misma rejilla que mide el ancho */
+  --color-picker-panel-width: calc(8 * var(--color-picker-preset-size) + 7 * var(--color-picker-preset-gap)); /** Ancho del panel: ocho predefinidos por fila y sus siete huecos. El área y las bandas lo ocupan entero */
+  --color-picker-area-height: calc(6 * var(--color-picker-preset-size) + 5 * var(--color-picker-preset-gap)); /** Alto del área de saturación y brillo: seis filas de la misma rejilla que mide el ancho */
   --color-picker-trigger-focus-ring-width: var(--input-focus-ring-width); /** Grosor del anillo de foco, por dentro del borde como en un campo */
 }
 

package/src/tokens/molecules/command-palette.css

@@ -4,6 +4,7 @@
 
 :root {
   --command-palette-max-height: min(24rem, 60vh); /** Alto máximo de la paleta — la lista scrollea dentro */
+  --command-palette-input-line-height: 1.15; /** Interlineado del buscador: el 1,15 que heredaba de normalize.css, ahora declarado. No es `1` (1): Chromium no deja que un `<input>` baje de su interlineado `normal`, y a 20px el buscador crecía de 48 a 50px */
   --command-palette-input-padding-block: var(--spacing-3); /** Padding vertical del buscador */
   --command-palette-input-padding-inline: var(--spacing-2); /** Padding horizontal del buscador */
   --command-palette-input-font-size: var(--font-size-3); /** Tamaño de texto del buscador */

package/src/tokens/molecules/consent.css

@@ -12,11 +12,11 @@
   --consent-banner-z-index: var(--z-index-bar); /** Capa: la de las barras fijas de la aplicación. Por debajo del velo de un modal — el banner no bloquea nada */
   --consent-preferences-gap: var(--spacing-4); /** Separación entre los bloques del panel */
   --consent-preferences-category-gap: var(--spacing-3); /** Separación entre categorías de la lista */
-  --consent-banner-bg: var(--color-background-light); /** Fondo de la banda */
+  --consent-banner-bg: var(--color-bg-light); /** Fondo de la banda */
   --consent-banner-color: var(--color-text-on-light); /** Texto de la banda */
   --consent-banner-border-color: var(--color-primary); /** Línea superior que separa la banda de la página */
   --consent-banner-border-width: var(--border-width-default); /** Grosor de la línea superior */
-  --consent-banner-max-inline-size: var(--container-max-width-xl); /** Ancho máximo del contenido dentro de la banda: el mismo del contenido de una página pública */
+  --consent-banner-max-width: var(--container-max-width-xl); /** Ancho máximo del contenido dentro de la banda: el mismo del contenido de una página pública */
   --consent-banner-title-font-size: var(--text-size-3); /** Cuerpo del título de la banda */
   --consent-banner-description-font-size: var(--text-font-size); /** Cuerpo del texto de la banda: el cuerpo de texto de la superficie, sin reducir (decisión del 2026-08-28) */
 }
@@ -25,7 +25,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --consent-banner-bg: var(--color-background-dark); /** Fondo de la banda — surface-dark */
+  --consent-banner-bg: var(--color-bg-dark); /** Fondo de la banda — surface-dark */
   --consent-banner-color: var(--color-text-on-dark); /** Texto de la banda — surface-dark */
   --consent-banner-border-color: var(--color-text-on-dark); /** Línea superior — surface-dark */
 }

package/src/tokens/molecules/conversation-list.css

@@ -10,6 +10,7 @@
   --conversation-list-item-padding-block: var(--spacing-2); /** Aire vertical de cada conversación */
   --conversation-list-item-padding-inline: var(--spacing-3); /** Aire horizontal de cada conversación */
   --conversation-list-item-font-family: var(--font-family-sans); /** Familia tipográfica del título de la conversación */
+  --conversation-list-item-line-height: var(--line-height-none); /** Interlineado del título: una línea justa (el título no parte, va con elipsis), para que el alto de la fila lo marque su padding y no un interlineado heredado. Sin él, el botón heredaba el 1,15 de normalize.css */
   --conversation-list-transition-duration: var(--motion-duration-fast); /** Duración de la transición de color */
   --conversation-list-transition-easing: var(--motion-easing-default); /** Curva de la transición de color */
   --conversation-list-item-border-radius: var(--border-radius-default); /** Radio de cada conversación: recto, como todo el sistema */

package/src/tokens/molecules/date-picker.css

@@ -4,7 +4,7 @@
 
 :root {
   --date-picker-button-cursor: pointer; /** Cursor del botón: abre el calendario, no se escribe en él */
-  --date-picker-inline-size: var(--input-width); /** Anchura del control: la del campo, que siempre ocupa su contenedor */
+  --date-picker-width: var(--input-width); /** Anchura del control: la del campo, que siempre ocupa su contenedor */
   --date-picker-disabled-cursor: var(--input-disabled-cursor); /** Cursor con el control deshabilitado */
   --date-picker-button-slot-size: var(--size-component-md); /** Lado del hueco que ocupa el botón del calendario dentro del campo: la talla md, la misma que el campo — así el adorno queda cuadrado sobre el control y su borde inferior coincide con el del campo */
   --date-picker-button-sm-slot-size: var(--size-component-sm); /** Lado del hueco — sm */

package/src/tokens/molecules/docs-search.css

@@ -3,7 +3,7 @@
  */
 
 :root {
-  --docs-search-results-max-block-size: min(28rem, 60vh); /** Alto máximo de la lista: a partir de ahí scrollea dentro en vez de empujar la página */
+  --docs-search-results-max-height: min(28rem, 60vh); /** Alto máximo de la lista: a partir de ahí scrollea dentro en vez de empujar la página */
   --docs-search-gap: var(--spacing-3); /** Aire entre el campo de búsqueda y la lista de resultados */
   --docs-search-results-gap: var(--spacing-1); /** Aire entre dos resultados */
   --docs-search-result-padding-block: var(--spacing-3); /** Padding vertical de un resultado */

package/src/tokens/molecules/dropdown-field.css

@@ -26,6 +26,7 @@
   --dropdown-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
   --dropdown-field-padding-inline: var(--select-padding-inline); /** Padding inline del control: el del Select */
   --dropdown-field-font-weight: var(--select-font-weight); /** Peso: el del Select */
+  --dropdown-field-line-height: var(--select-line-height); /** Interlineado del control: el del Select. Sin él, el botón heredaba el 1,15 de normalize.css */
   --dropdown-field-color: var(--select-color); /** Texto del control */
   --dropdown-field-border-width: var(--select-border-width); /** Borde rectangular, como el Select */
   --dropdown-field-border-color: var(--select-border-color); /** Color del borde */
@@ -44,7 +45,7 @@
 html.dark {
   --dropdown-field-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
   --dropdown-field-color: var(--color-text-on-dark); /** Texto — surface-dark */
-  --dropdown-field-bg: var(--color-background-dark); /** Fondo — surface-dark */
+  --dropdown-field-bg: var(--color-bg-dark); /** Fondo — surface-dark */
   --dropdown-field-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
   --dropdown-field-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
   --dropdown-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */

package/src/tokens/molecules/filter-bar.css

@@ -8,5 +8,5 @@
   --filter-bar-row-gap: var(--field-row-row-gap); /** Aire entre las filas de filtros cuando hay más de las que caben por punto de corte, y entre los filtros apilados en móvil */
   --filter-bar-actions-gap: var(--form-actions-gap); /** Aire entre las acciones de la barra — el de los botones de un formulario: la fila de acciones del sistema es una sola */
   --filter-bar-label-offset: calc(var(--label-font-size) * var(--label-line-height) + var(--input-field-gap)); /** El renglón que ocupa un rótulo sobre su control: cuerpo × interlineado del `Label` más el aire que los separa en un campo (29px en la aplicación; en la superficie pública el rótulo es mayor y el renglón sube con él). Es lo que la barra reserva sobre lo que NO lleva rótulo —un interruptor, el botón de limpiar— para que no se suba a la línea de las etiquetas */
-  --filter-bar-control-block-size: var(--control-height); /** La caja de un campo de una línea (40px, la talla md del sistema; 48px en la superficie pública, que parte de lg). Es la referencia contra la que se centra lo que no lleva rótulo: el interruptor queda a la altura óptica del recuadro que tiene al lado, no del renglón entero —que con un control alto al lado sería otra altura cada vez— */
+  --filter-bar-control-height: var(--control-height); /** La caja de un campo de una línea (40px, la talla md del sistema; 48px en la superficie pública, que parte de lg). Es la referencia contra la que se centra lo que no lleva rótulo: el interruptor queda a la altura óptica del recuadro que tiene al lado, no del renglón entero —que con un control alto al lado sería otra altura cada vez— */
 }

package/src/tokens/molecules/heatmap.css

@@ -19,8 +19,7 @@
   --heatmap-empty-pattern-width: var(--spacing-1); /** Ancho de la trama de la celda sin dato */
   --heatmap-legend-gap: var(--spacing-2); /** Separación entre los elementos de la leyenda */
   --heatmap-legend-font-size: var(--font-size-1); /** Tamaño del texto de la leyenda */
-  --heatmap-legend-swatch-size: var(--spacing-3); /** Lado del cuadradito de la leyenda */
-  --heatmap-legend-swatch-gap: var(--spacing-1); /** Separación entre cuadraditos de la leyenda */
+  --heatmap-legend-swatch-size: var(--spacing-3); /** Alto de la tira de la leyenda y ancho de cada uno de sus peldaños, que van pegados */
   --heatmap-margin-block-start: var(--spacing-3); /** Aire entre la matriz y su leyenda */
   --heatmap-step-1-bg: var(--color-chart-sequential-100); /** Paso 1 de la rampa de la matriz — sequential-100 de la rampa secuencial del sistema */
   --heatmap-step-2-bg: var(--color-chart-sequential-200); /** Paso 2 de la rampa de la matriz — sequential-200 de la rampa secuencial del sistema */
@@ -28,15 +27,21 @@
   --heatmap-step-4-bg: var(--color-chart-sequential-500); /** Paso 4 de la rampa de la matriz — sequential-500 de la rampa secuencial del sistema */
   --heatmap-step-5-bg: var(--color-chart-sequential-600); /** Paso 5 de la rampa de la matriz — sequential-600 de la rampa secuencial del sistema */
   --heatmap-step-6-bg: var(--color-chart-sequential-700); /** Paso 6 de la rampa de la matriz — sequential-700 de la rampa secuencial del sistema */
+  --heatmap-diverging-warm-3-bg: var(--color-chart-diverging-warm-3); /** Escala divergente, peldaño warm-3 — diverging-warm-3 (#9F431F), extremo del brazo cálido */
+  --heatmap-diverging-warm-2-bg: var(--color-chart-diverging-warm-2-on-dark); /** Escala divergente, peldaño warm-2 — diverging-warm-2-on-dark (#E26330): ver la tinta */
+  --heatmap-diverging-warm-1-bg: var(--color-chart-diverging-warm-1); /** Escala divergente, peldaño warm-1 — diverging-warm-1 (#F37F54), junto al neutro */
+  --heatmap-diverging-cool-1-bg: var(--color-chart-diverging-cool-1); /** Escala divergente, peldaño cool-1 — diverging-cool-1 (#70A6F2), junto al neutro */
+  --heatmap-diverging-cool-2-bg: var(--color-chart-diverging-cool-2); /** Escala divergente, peldaño cool-2 — diverging-cool-2 (#3484EE), intermedio */
+  --heatmap-diverging-cool-3-bg: var(--color-chart-diverging-cool-3); /** Escala divergente, peldaño cool-3 — diverging-cool-3 (#1F61B6), extremo del brazo frío */
   --heatmap-radius: var(--border-radius-default); /** Radio del marco de la matriz */
   --heatmap-border-color: var(--color-primary); /** Color de la rejilla */
   --heatmap-border-width: var(--border-width-default); /** Grosor de la rejilla */
   --heatmap-row-header-color: var(--color-text-on-light); /** Color del nombre de la fila */
   --heatmap-row-header-font-weight: var(--font-weight-default); /** Peso del nombre de la fila (la celda es th: el agente de usuario la pondría en negrita) */
-  --heatmap-row-header-bg: var(--color-background-light); /** Fondo sticky de la columna de filas */
+  --heatmap-row-header-bg: var(--color-bg-light); /** Fondo sticky de la columna de filas */
   --heatmap-column-header-font-weight: var(--font-weight-emphasis); /** Peso del nombre de la columna */
   --heatmap-column-header-color: var(--color-text-muted-on-light); /** Color del nombre de la columna */
-  --heatmap-column-header-bg: var(--color-background-light); /** Fondo del encabezado de columna */
+  --heatmap-column-header-bg: var(--color-bg-light); /** Fondo del encabezado de columna */
   --heatmap-group-header-color: var(--color-text-muted-on-light); /** Color del nombre del grupo de columnas */
   --heatmap-cell-font-weight: var(--font-weight-emphasis); /** Peso de la cifra de la celda */
   --heatmap-empty-bg: var(--color-surface-secondary-on-light); /** Fondo de una celda sin dato — superficie secundaria, no un paso de la rampa */
@@ -48,6 +53,14 @@
   --heatmap-step-4-color: var(--color-text-on-light); /** Tinta sobre el paso 4 — la que llega a 4,5:1 sobre ese relleno */
   --heatmap-step-5-color: var(--color-text-on-dark); /** Tinta sobre el paso 5 — la que llega a 4,5:1 sobre ese relleno */
   --heatmap-step-6-color: var(--color-text-on-dark); /** Tinta sobre el paso 6 — la que llega a 4,5:1 sobre ese relleno */
+  --heatmap-diverging-warm-3-color: var(--color-text-on-dark); /** Tinta sobre el peldaño divergente warm-3 — diverging-warm-3 (#9F431F), extremo del brazo cálido. Blanco: 6,37:1 (prusia daría 2,63:1) */
+  --heatmap-diverging-warm-2-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente warm-2 — diverging-warm-2-on-dark (#E26330), NO diverging-warm-2. El intermedio cálido del sistema (#D45C2C) no admite cifra con ninguna de las dos tintas: 4,29:1 con prusia y 3,91:1 con blanco. Su par de superficie oscura, ya en la paleta, sí: 4,84:1 con prusia, y queda entre sus dos vecinos (1,32:1 con warm-1, 1,84:1 con warm-3). Sin color nuevo (regla 9) */
+  --heatmap-diverging-warm-1-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente warm-1 — diverging-warm-1 (#F37F54), junto al neutro. Prusia: 6,37:1 (blanco daría 2,63:1) */
+  --heatmap-diverging-neutral-bg: var(--color-surface-secondary-on-light); /** Escala divergente, peldaño neutral — el centro: el mismo gris que chart.diverging-neutral (#F2F2F2), un rol de superficie porque el centro se retira hacia el lienzo */
+  --heatmap-diverging-neutral-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente neutral — el centro: el mismo gris que chart.diverging-neutral (#F2F2F2), un rol de superficie porque el centro se retira hacia el lienzo. Prusia: 14,98:1. Comparte relleno con la casilla sin dato, que se distingue por su trama y por no llevar cifra */
+  --heatmap-diverging-cool-1-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente cool-1 — diverging-cool-1 (#70A6F2), junto al neutro. Prusia: 6,73:1 (blanco daría 2,49:1) */
+  --heatmap-diverging-cool-2-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente cool-2 — diverging-cool-2 (#3484EE), intermedio. Prusia: 4,54:1 (blanco daría 3,70:1) */
+  --heatmap-diverging-cool-3-color: var(--color-text-on-dark); /** Tinta sobre el peldaño divergente cool-3 — diverging-cool-3 (#1F61B6), extremo del brazo frío. Blanco: 6,10:1 (prusia daría 2,75:1) */
 }
 
 .surface-dark,
@@ -60,16 +73,30 @@ html.dark {
   --heatmap-step-4-bg: var(--color-chart-sequential-500-on-dark); /** Paso 4 de la rampa — surface-dark */
   --heatmap-step-5-bg: var(--color-chart-sequential-600-on-dark); /** Paso 5 de la rampa — surface-dark */
   --heatmap-step-6-bg: var(--color-chart-sequential-700-on-dark); /** Paso 6 de la rampa — surface-dark */
+  --heatmap-diverging-warm-3-bg: var(--color-chart-diverging-warm-3-on-dark); /** Peldaño divergente warm-3 — surface-dark: el par -on-dark del sistema */
+  --heatmap-diverging-warm-2-bg: var(--color-chart-diverging-warm-2-on-dark); /** Peldaño divergente warm-2 — surface-dark: el par -on-dark del sistema */
+  --heatmap-diverging-warm-1-bg: var(--color-chart-diverging-warm-1-on-dark); /** Peldaño divergente warm-1 — surface-dark: el par -on-dark del sistema */
+  --heatmap-diverging-cool-1-bg: var(--color-chart-diverging-cool-1-on-dark); /** Peldaño divergente cool-1 — surface-dark: el par -on-dark del sistema */
+  --heatmap-diverging-cool-2-bg: var(--color-chart-diverging-cool-2-on-dark); /** Peldaño divergente cool-2 — surface-dark: el par -on-dark del sistema */
+  --heatmap-diverging-cool-3-bg: var(--color-chart-diverging-cool-3-on-dark); /** Peldaño divergente cool-3 — surface-dark: el par -on-dark del sistema */
   --heatmap-step-1-color: var(--color-text-on-dark); /** Tinta sobre el paso 1 — surface-dark */
   --heatmap-step-2-color: var(--color-text-on-dark); /** Tinta sobre el paso 2 — surface-dark */
   --heatmap-step-3-color: var(--color-text-on-dark); /** Tinta sobre el paso 3 — surface-dark */
   --heatmap-step-4-color: var(--color-text-on-light); /** Tinta sobre el paso 4 — surface-dark */
   --heatmap-step-5-color: var(--color-text-on-light); /** Tinta sobre el paso 5 — surface-dark */
   --heatmap-step-6-color: var(--color-text-on-light); /** Tinta sobre el paso 6 — surface-dark */
+  --heatmap-diverging-warm-3-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente warm-3 — surface-dark. #F48F6A. Prusia: 7,17:1 (blanco daría 2,34:1) */
+  --heatmap-diverging-warm-2-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente warm-2 — surface-dark. #E26330. Prusia: 4,84:1 (blanco daría 3,46:1) */
+  --heatmap-diverging-warm-1-color: var(--color-text-on-dark); /** Tinta sobre el peldaño divergente warm-1 — surface-dark. #B54E24. Blanco: 5,15:1 (prusia daría 3,26:1) */
+  --heatmap-diverging-neutral-bg: var(--color-surface-secondary-on-dark); /** Peldaño divergente neutral — surface-dark: el par -on-dark del sistema */
+  --heatmap-diverging-neutral-color: var(--color-text-on-dark); /** Tinta sobre el peldaño divergente neutral — surface-dark. el mismo gris que surface-dark-diverging-neutral de Chart (#4A4A4A). Blanco: 8,86:1 (prusia daría 1,89:1) */
+  --heatmap-diverging-cool-1-color: var(--color-text-on-dark); /** Tinta sobre el peldaño divergente cool-1 — surface-dark. #256FCF. Blanco: 4,94:1 (prusia daría 3,40:1) */
+  --heatmap-diverging-cool-2-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente cool-2 — surface-dark. #488FEF. Prusia: 5,15:1 (blanco daría 3,26:1) */
+  --heatmap-diverging-cool-3-color: var(--color-text-on-light); /** Tinta sobre el peldaño divergente cool-3 — surface-dark. #80B0F3. Prusia: 7,52:1 (blanco daría 2,23:1) */
   --heatmap-border-color: var(--color-text-on-dark); /** Color de la rejilla — surface-dark */
-  --heatmap-row-header-bg: var(--color-background-dark); /** Fondo de la columna de filas — surface-dark */
+  --heatmap-row-header-bg: var(--color-bg-dark); /** Fondo de la columna de filas — surface-dark */
   --heatmap-row-header-color: var(--color-text-on-dark); /** Color del nombre de la fila — surface-dark */
-  --heatmap-column-header-bg: var(--color-background-dark); /** Fondo del encabezado de columna — surface-dark */
+  --heatmap-column-header-bg: var(--color-bg-dark); /** Fondo del encabezado de columna — surface-dark */
   --heatmap-column-header-color: var(--color-text-muted-on-dark); /** Color del encabezado de columna — surface-dark */
   --heatmap-group-header-color: var(--color-text-muted-on-dark); /** Color del nombre del grupo — surface-dark */
   --heatmap-empty-bg: var(--color-surface-secondary-on-dark); /** Fondo de una celda sin dato — surface-dark */

package/src/tokens/molecules/loading-state.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --loading-state-min-block-size: 16rem; /** Alto que reserva la espera de una página o una zona: la caja no colapsa a la altura del girador mientras el contenido no llega */
-  --loading-state-sm-min-block-size: 8rem; /** Alto que reserva la espera en talla sm — el cuerpo de un diálogo, una hoja o un popover */
+  --loading-state-min-height: 16rem; /** Alto que reserva la espera de una página o una zona: la caja no colapsa a la altura del girador mientras el contenido no llega */
+  --loading-state-sm-min-height: 8rem; /** Alto que reserva la espera en talla sm — el cuerpo de un diálogo, una hoja o un popover */
   --loading-state-sm-padding-block: var(--spacing-5); /** Padding vertical en talla sm: dentro de un diálogo el aire ya lo pone el diálogo */
   --loading-state-gap: var(--empty-state-gap); /** Aire entre el girador y la acción — el mismo que EmptyState, porque ocupa su sitio */
   --loading-state-padding-block: var(--empty-state-padding-block); /** Padding vertical — el de EmptyState */

package/src/tokens/molecules/menu.css

@@ -17,7 +17,6 @@
   --menu-item-font-size: var(--font-size-2); /** Tamaño de texto de ítems */
   --menu-item-line-height: var(--line-height-snug); /** Interlineado de ítems */
   --menu-label-padding-block: var(--spacing-2); /** Padding vertical del rótulo de sección */
-  --menu-label-padding-inline: var(--spacing-4); /** Padding horizontal del rótulo de sección */
   --menu-label-font-size: var(--font-size-1); /** Tamaño de texto del rótulo de sección */
   --menu-disabled-opacity: var(--opacity-disabled); /** Opacidad de ítems deshabilitados */
   --menu-z-index: var(--floating-panel-z-index); /** Capa z del panel flotante */
@@ -34,6 +33,8 @@
   --menu-item-destructive-color: var(--color-destructive-text-on-light); /** Color de texto de ítem destructivo */
   --menu-item-destructive-highlighted-bg: var(--color-destructive-fill); /** Relleno del ítem destructivo resaltado: el rojo sólido, universal en las dos superficies */
   --menu-item-destructive-highlighted-color: var(--color-destructive-fill-text); /** Texto del ítem destructivo resaltado */
+  --menu-label-margin-inline: var(--menu-padding-inline); /** Margen lateral del rótulo de sección: el mismo `margin-inline` que el ítem (`menu.padding-inline`), para que su texto quede alineado con el del ítem por construcción */
+  --menu-label-padding-inline: var(--menu-item-padding-inline); /** Padding horizontal del rótulo de sección: el mismo que el del ítem (`menu.item-padding-inline`). Con `label-margin-inline`, el texto del rótulo arranca donde arranca el contenido del ítem (su texto o, si lo lleva, su icono) */
   --menu-label-font-weight: var(--font-weight-emphasis); /** Peso del rótulo de sección */
   --menu-label-color: var(--color-text-muted-on-light); /** Color del rótulo de sección */
   --menu-separator-margin-block: var(--separator-spacing-md); /** Margen vertical del separador — el aire md de la línea del sistema */

package/src/tokens/molecules/message-composer.css

@@ -27,7 +27,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --message-composer-bg: var(--color-background-dark); /** Fondo del marco — superficie oscura */
+  --message-composer-bg: var(--color-bg-dark); /** Fondo del marco — superficie oscura */
   --message-composer-border-color: var(--color-text-on-dark); /** Color del marco — superficie oscura */
   --message-composer-focus-border-color: var(--color-text-on-dark); /** Color del marco con el foco dentro — superficie oscura */
   --message-composer-focus-ring-color: var(--color-text-on-dark); /** Color del anillo de foco — superficie oscura */

package/src/tokens/molecules/modal.css

@@ -4,9 +4,9 @@
 
 :root {
   --modal-border-color: rgba(0, 0, 0, 0); /** Sin borde en superficie clara: el velo y el fondo blanco ya separan el panel */
-  --modal-width-max: 560px; /** Anchura máxima del panel. Medida de layout (como container.max-width-*), no de la escala de espaciado ni de tallas de componente */
-  --modal-inline-size: 90vw; /** Ancho del panel antes del tope de `width-max`: deja aire a los lados en pantallas estrechas. Medida de layout, igual que width-max */
-  --modal-max-height: 90dvh; /** Altura máxima del panel modal (dvh para móviles con barra de navegador variable). Medida de layout, igual que width-max */
+  --modal-max-width: 560px; /** Anchura máxima del panel. Medida de layout (como container.max-width-*), no de la escala de espaciado ni de tallas de componente */
+  --modal-width: 90vw; /** Ancho del panel antes del tope de `max-width`: deja aire a los lados en pantallas estrechas. Medida de layout, igual que `max-width` */
+  --modal-max-height: 90dvh; /** Altura máxima del panel modal (dvh para móviles con barra de navegador variable). Medida de layout, igual que `max-width` */
   --modal-z-index: var(--z-index-modal); /** z-index del panel modal */
   --modal-backdrop-z-index: var(--z-index-backdrop); /** z-index del backdrop */
   --modal-backdrop-bg: var(--color-black); /** Color del backdrop/scrim */
@@ -22,7 +22,7 @@
   --modal-description-margin-block-end: var(--spacing-4); /** Separación entre la descripción y el cuerpo del modal */
   --modal-close-size: var(--size-component-md); /** Caja del botón de cerrar (40px). En la superficie pública (SiteShell) remapea a size-component.lg */
   --modal-close-icon-size: var(--icon-size-md); /** Glifo del botón de cerrar (24px), la talla por defecto de icono-botón. En la superficie pública remapea igualmente a icon.size-md */
-  --modal-bg: var(--color-background-light); /** Fondo del panel modal */
+  --modal-bg: var(--color-bg-light); /** Fondo del panel modal */
   --modal-border-width: var(--border-width-default); /** Grosor del borde del panel */
   --modal-border-radius: var(--border-radius-default); /** Radio del panel */
   --modal-shadow: var(--shadow-default); /** Sombra de elevación */
@@ -42,7 +42,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --modal-bg: var(--color-background-dark); /** Fondo del panel — surface-dark */
+  --modal-bg: var(--color-bg-dark); /** Fondo del panel — surface-dark */
   --modal-title-color: var(--color-text-on-dark); /** Color del título — surface-dark */
   --modal-border-color: var(--color-text-on-dark); /** Borde 1px — surface-dark: separa el panel del velo, que también es oscuro */
   --modal-description-color: var(--color-text-muted-on-dark); /** Color de la descripción — surface-dark */

package/src/tokens/molecules/notification-panel.css

@@ -3,9 +3,9 @@
  */
 
 :root {
-  --notification-panel-list-max-block-size: 21rem; /** Alto máximo de la lista (336px): pasado ese alto la lista hace scroll y la cabecera y el pie se quedan quietos. Medida de maqueta */
+  --notification-panel-list-max-height: 21rem; /** Alto máximo de la lista (336px): pasado ese alto la lista hace scroll y la cabecera y el pie se quedan quietos. Medida de maqueta */
   --notification-panel-item-body-line-clamp: 2; /** Cuántas líneas del cuerpo se ven antes de recortar con elipsis. El panel es un adelanto: el texto entero está en la bandeja */
-  --notification-panel-inline-size: min(22.5rem, calc(100vw - 2 * var(--spacing-5))); /** Ancho del panel (360px), con tope para que no se salga en una pantalla estrecha. Medida de maqueta, como la de la Sidebar: no pertenece a la escala de tallas */
+  --notification-panel-width: min(22.5rem, calc(100vw - 2 * var(--spacing-5))); /** Ancho del panel (360px), con tope para que no se salga en una pantalla estrecha. Medida de maqueta, como la de la Sidebar: no pertenece a la escala de tallas */
   --notification-panel-padding-inline: var(--spacing-4); /** Aire lateral de las filas, del bloque de marcar todas y del pie: el mismo, para que todo alinee en una sola columna */
   --notification-panel-mark-all-padding-block: var(--spacing-3); /** Aire vertical del bloque de «Marcar todas», entre la lista y el pie */
   --notification-panel-list-padding-block: var(--spacing-2); /** Aire vertical de la lista dentro del panel */

package/src/tokens/molecules/org-chart.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --org-chart-viewport-block-size: 32rem; /** Alto del lienzo con desplazamiento */
-  --org-chart-card-inline-size: 14rem; /** Ancho de la tarjeta de un departamento */
+  --org-chart-viewport-height: 32rem; /** Alto del lienzo con desplazamiento */
+  --org-chart-card-width: 14rem; /** Ancho de la tarjeta de un departamento */
   --org-chart-font-family: var(--font-family-sans); /** Familia tipográfica del organigrama */
   --org-chart-gap: var(--spacing-3); /** Separación entre el lienzo y sus controles */
   --org-chart-viewport-padding: var(--spacing-5); /** Aire alrededor del árbol dentro del lienzo */
@@ -29,7 +29,7 @@
   --org-chart-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */
   --org-chart-connector-color: var(--color-border-default-on-light); /** Color de las líneas que unen los nodos */
   --org-chart-connector-width: var(--border-width-default); /** Grosor de las líneas que unen los nodos */
-  --org-chart-card-bg: var(--color-background-light); /** Fondo de la tarjeta */
+  --org-chart-card-bg: var(--color-bg-light); /** Fondo de la tarjeta */
   --org-chart-card-border-color: var(--color-primary); /** Borde de la tarjeta */
   --org-chart-card-border-width: var(--border-width-default); /** Grosor del borde de la tarjeta */
   --org-chart-card-radius: var(--border-radius-default); /** Radio de la tarjeta */
@@ -49,7 +49,7 @@ html.dark {
   --org-chart-viewport-border-color: var(--color-text-on-dark); /** Borde del lienzo — surface-dark */
   --org-chart-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
   --org-chart-connector-color: var(--color-text-on-dark); /** Color de las líneas — surface-dark */
-  --org-chart-card-bg: var(--color-background-dark); /** Fondo de la tarjeta — surface-dark */
+  --org-chart-card-bg: var(--color-bg-dark); /** Fondo de la tarjeta — surface-dark */
   --org-chart-card-border-color: var(--color-text-on-dark); /** Borde de la tarjeta — surface-dark */
   --org-chart-name-color: var(--color-text-on-dark); /** Color del nombre del departamento — surface-dark */
   --org-chart-group-color: var(--color-text-muted-on-dark); /** Color del rótulo de grupo — surface-dark */

package/src/tokens/molecules/pagination.css

@@ -25,6 +25,7 @@
   --pagination-summary-color: var(--color-text-on-light); /** Color del texto de total de resultados */
   --pagination-btn-height: var(--button-height); /** Altura del botón de página — la del `Button md` (40px). También su lado mínimo: la caja es cuadrada */
   --pagination-btn-font-size: var(--button-font-size); /** Tipografía del botón de página — la del `Button md` */
+  --pagination-btn-line-height: var(--button-line-height); /** Interlineado del botón de página — el del `Button`. Sin él, heredaba el 1,15 de normalize.css */
   --pagination-btn-color: var(--color-primary); /** Tinta del botón en reposo */
   --pagination-btn-border-color: var(--color-primary); /** Borde del botón en reposo */
   --pagination-btn-hover-bg: var(--color-primary); /** Relleno en hover — el outline se invierte, sin subrayado */

package/src/tokens/molecules/password-field.css

@@ -12,7 +12,7 @@
   --password-field-lg-toggle-size: var(--size-component-lg); /** Lado del toggle — lg */
   --password-field-action-margin-block-start: var(--spacing-2); /** Aire extra sobre la acción bajo el campo («¿Olvidaste tu contraseña?»), además del gap del campo */
   --password-field-toggle-color: var(--color-primary); /** Color del icono toggle: tinta, prusia sobre claro */
-  --password-field-toggle-color-hover: var(--color-primary); /** Color del icono toggle en hover (sin cambio: la tinta no se atenúa; el foco se marca con el anillo) */
+  --password-field-toggle-hover-color: var(--color-primary); /** Color del icono toggle en hover (sin cambio: la tinta no se atenúa; el foco se marca con el anillo) */
   --password-field-toggle-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco del toggle */
   --password-field-toggle-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco del toggle (se dibuja hacia dentro de la caja: el toggle va a ras del borde del campo) */
   --password-field-toggle-focus-ring-color: var(--color-primary); /** Color del anillo de foco del toggle: la tinta de la superficie */
@@ -24,6 +24,6 @@
 [data-theme="dark"],
 html.dark {
   --password-field-toggle-color: var(--color-text-on-dark); /** Color del icono toggle — surface-dark (blanco) */
-  --password-field-toggle-color-hover: var(--color-text-on-dark); /** Color del icono toggle en hover — surface-dark */
+  --password-field-toggle-hover-color: var(--color-text-on-dark); /** Color del icono toggle en hover — surface-dark */
   --password-field-toggle-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco del toggle — surface-dark */
 }

package/src/tokens/molecules/planning-grid.css

@@ -16,17 +16,17 @@
   --planning-grid-cell-padding-block: var(--spacing-1); /** Padding vertical de una celda */
   --planning-grid-cell-padding-inline: var(--spacing-1); /** Padding horizontal de una celda */
   --planning-grid-cell-font-size: var(--font-size-1); /** Tamaño de la cifra de una celda de solo lectura */
-  --planning-grid-pending-opacity: var(--opacity-disabled); /** Opacidad de una celda cuyo cambio está en vuelo */
+  --planning-grid-saving-gap: var(--spacing-1); /** Aire entre el campo de un cruce en vuelo y su marca de guardado (el Spinner sm) */
   --planning-grid-radius: var(--border-radius-default); /** Radio del marco de la rejilla */
   --planning-grid-border-color: var(--color-primary); /** Color de la rejilla */
   --planning-grid-border-width: var(--border-width-default); /** Grosor de la rejilla */
   --planning-grid-row-header-font-weight: var(--font-weight-default); /** Peso del nombre de la fila (la celda es th: el agente de usuario la pondría en negrita) */
   --planning-grid-row-header-color: var(--color-text-on-light); /** Color del nombre de la fila */
-  --planning-grid-row-header-bg: var(--color-background-light); /** Fondo sticky de la columna de filas */
+  --planning-grid-row-header-bg: var(--color-bg-light); /** Fondo sticky de la columna de filas */
   --planning-grid-column-header-font-weight: var(--font-weight-emphasis); /** Peso del nombre de la columna */
   --planning-grid-column-header-color: var(--color-text-on-light); /** Color del nombre de la columna */
   --planning-grid-column-header-sub-color: var(--color-text-muted-on-light); /** Color de la segunda línea del encabezado */
-  --planning-grid-column-header-bg: var(--color-background-light); /** Fondo del encabezado de columna */
+  --planning-grid-column-header-bg: var(--color-bg-light); /** Fondo del encabezado de columna */
   --planning-grid-current-outline-color: var(--color-primary); /** Recuadro de la columna en curso */
   --planning-grid-current-outline-width: var(--border-width-focus); /** Grosor del recuadro de la columna en curso */
   --planning-grid-cell-color: var(--color-text-on-light); /** Color de la cifra de una celda */
@@ -35,7 +35,8 @@
   --planning-grid-footer-bg: var(--color-surface-secondary-on-light); /** Fondo de las filas de totales */
   --planning-grid-footer-font-weight: var(--font-weight-emphasis); /** Peso de las filas de totales */
   --planning-grid-footer-color: var(--color-text-on-light); /** Color de las filas de totales */
-  --planning-grid-over-color: var(--color-error-text-on-light); /** Color de un resto negativo: hay más horas asignadas que disponibles */
+  --planning-grid-over-bg: var(--color-error-fill); /** Relleno de un resto negativo: hay más horas asignadas que disponibles. Relleno universal, igual en las dos superficies (sin par oscuro) */
+  --planning-grid-over-color: var(--color-error-fill-text); /** Tinta de un resto negativo, sobre su relleno de error */
 }
 
 .surface-dark,
@@ -43,9 +44,9 @@
 [data-theme="dark"],
 html.dark {
   --planning-grid-border-color: var(--color-text-on-dark); /** Color de la rejilla — surface-dark */
-  --planning-grid-row-header-bg: var(--color-background-dark); /** Fondo de la columna de filas — surface-dark */
+  --planning-grid-row-header-bg: var(--color-bg-dark); /** Fondo de la columna de filas — surface-dark */
   --planning-grid-row-header-color: var(--color-text-on-dark); /** Color del nombre de la fila — surface-dark */
-  --planning-grid-column-header-bg: var(--color-background-dark); /** Fondo del encabezado de columna — surface-dark */
+  --planning-grid-column-header-bg: var(--color-bg-dark); /** Fondo del encabezado de columna — surface-dark */
   --planning-grid-column-header-color: var(--color-text-on-dark); /** Color del encabezado de columna — surface-dark */
   --planning-grid-column-header-sub-color: var(--color-text-muted-on-dark); /** Color de la segunda línea del encabezado — surface-dark */
   --planning-grid-current-outline-color: var(--color-text-on-dark); /** Recuadro de la columna en curso — surface-dark */
@@ -54,5 +55,4 @@ html.dark {
   --planning-grid-cell-readonly-bg: var(--color-surface-secondary-on-dark); /** Fondo de una celda que no se edita — surface-dark */
   --planning-grid-footer-bg: var(--color-surface-secondary-on-dark); /** Fondo de las filas de totales — surface-dark */
   --planning-grid-footer-color: var(--color-text-on-dark); /** Color de las filas de totales — surface-dark */
-  --planning-grid-over-color: var(--color-error-text-on-dark); /** Color de un resto negativo — surface-dark */
 }

package/src/tokens/molecules/recurrence-field.css

@@ -11,7 +11,12 @@
   --recurrence-field-legend-margin-block-end: var(--spacing-1); /** Aire entre la etiqueta del grupo de días y los días */
   --recurrence-field-legend-font-size: var(--label-font-size); /** Tamaño de la etiqueta del grupo de días — el de una etiqueta de campo */
   --recurrence-field-legend-color: var(--color-text-on-light); /** Color de la etiqueta del grupo de días */
+  --recurrence-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda del editor */
+  --recurrence-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda del editor */
   --recurrence-field-legend-font-weight: var(--label-font-weight); /** Peso de la etiqueta del grupo de días — el de una etiqueta de campo */
+  --recurrence-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda del editor */
+  --recurrence-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda del editor */
+  --recurrence-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda del editor */
 }
 
 .surface-dark,

package/src/tokens/molecules/search-form.css

@@ -3,7 +3,7 @@
  */
 
 :root {
-  --search-form-inline-size: var(--input-width); /** Anchura del formulario: la del campo, que siempre ocupa su contenedor. El buscador vive dentro del panel del menú y se estira con él */
+  --search-form-width: var(--input-width); /** Anchura del formulario: la del campo, que siempre ocupa su contenedor. El buscador vive dentro del panel del menú y se estira con él */
   --search-form-xl-height: var(--spacing-8); /** Altura del campo — xl (64px, el peldaño de espaciado que sigue a los 48 de lg). No es una talla de control del sistema: solo existe aquí, para el buscador del menú del sitio */
   --search-form-xl-padding-inline: var(--spacing-6); /** Aire horizontal del campo — xl: el peldaño de espaciado siguiente al de lg */
   --search-form-xl-font-size: var(--font-size-5); /** Cuerpo de letra del campo — xl (28px): la escala de títulos pequeños, no la del cuerpo de texto. A esta talla el buscador se lee como un titular */

package/src/tokens/molecules/sheet.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --sheet-inline-size: min(20rem, 85vw); /** Ancho cuando entra por un lateral */
-  --sheet-block-size: 85vh; /** Alto máximo cuando entra por arriba o abajo */
+  --sheet-width: min(20rem, 85vw); /** Ancho cuando entra por un lateral */
+  --sheet-height: 85vh; /** Alto máximo cuando entra por arriba o abajo */
   --sheet-gap: var(--spacing-4); /** Separación entre bloques del panel */
   --sheet-footer-gap: var(--spacing-2); /** Separación entre acciones del pie */
   --sheet-close-inset: var(--spacing-3); /** Distancia del botón de cierre a la esquina */

package/src/tokens/molecules/site-nav.css

@@ -9,6 +9,7 @@
   --site-nav-item-gap: var(--spacing-3); /** Separación entre enlaces de un grupo */
   --site-nav-item-font-size: var(--font-size-4); /** Enlaces: un punto por debajo de la cabecera del grupo (Heading talla 6 = font-size.5) */
   --site-nav-item-line-height: var(--line-height-snug); /** Enlaces */
+  --site-nav-item-hover-decoration-line: var(--link-decoration-line); /** Enlaces en hover: subrayados en claro (`text-decoration-line`), como los enlaces de texto en reposo */
   --site-nav-item-badge-gap: var(--spacing-2); /** Aire entre el rótulo del ítem y su distintivo */
   --site-nav-item-font-weight: var(--font-weight-default); /** Enlaces */
   --site-nav-item-color: var(--color-text-on-light); /** Enlaces */
@@ -20,7 +21,7 @@
   --site-nav-focus-ring-width: var(--border-width-focus); /** Anillo de foco */
   --site-nav-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */
   --site-nav-focus-ring-color: var(--color-primary); /** Anillo de foco */
-  --site-nav-item-hover-line-width: var(--link-underline-width); /** Enlaces en hover: la línea bajo el enlace (como los enlaces de texto), en claro */
+  --site-nav-item-hover-line-width: var(--link-underline-width); /** Enlaces en hover: grosor del subrayado (`text-decoration-thickness`), el de los enlaces de texto */
 }
 
 .surface-dark,
@@ -28,6 +29,7 @@
 [data-theme="dark"],
 html.dark {
   --site-nav-item-hover-line-width: 0px; /** Enlaces en hover — surface-dark: sin línea, cambia el color */
+  --site-nav-item-hover-decoration-line: none; /** Enlaces en hover — surface-dark: sin subrayado, cambia el color (un grosor 0 no basta: el navegador pinta como mínimo un píxel) */
   --site-nav-item-color: var(--color-text-on-dark); /** Enlaces — surface-dark */
   --site-nav-item-disabled-color: var(--color-disabled-text-on-dark); /** Ítem apagado — surface-dark */
   --site-nav-item-hover-color: var(--color-accent-2); /** Enlaces en hover — surface-dark: amarillo (accent-2) en vez de línea */

package/src/tokens/molecules/site-search.css

@@ -3,10 +3,10 @@
  */
 
 :root {
-  --site-search-ghost-section-inline-size: 30%; /** Ancho de la barra fantasma del rastro de sección */
-  --site-search-ghost-title-inline-size: 70%; /** Ancho de la barra fantasma del título */
-  --site-search-ghost-url-inline-size: 45%; /** Ancho de la barra fantasma de la dirección */
-  --site-search-inline-size: var(--input-width); /** Anchura del buscador: la de su contenedor. Es la página de resultados entera, así que ocupa todo el hueco donde se monte — declarada y no heredada del flujo, para que tampoco se encoja dentro de una fila flex o una celda de retícula */
+  --site-search-ghost-section-width: 30%; /** Ancho de la barra fantasma del rastro de sección */
+  --site-search-ghost-title-width: 70%; /** Ancho de la barra fantasma del título */
+  --site-search-ghost-url-width: 45%; /** Ancho de la barra fantasma de la dirección */
+  --site-search-width: var(--input-width); /** Anchura del buscador: la de su contenedor. Es la página de resultados entera, así que ocupa todo el hueco donde se monte — declarada y no heredada del flujo, para que tampoco se encoja dentro de una fila flex o una celda de retícula */
   --site-search-gap: var(--spacing-5); /** Aire entre los bloques del buscador: el formulario, el aviso de estado, los resultados y el pie */
   --site-search-status-line-height: var(--line-height-normal); /** Interlineado del aviso de estado */
   --site-search-status-gap: var(--spacing-2); /** Aire entre el indicador de carga y su texto */

package/src/tokens/molecules/table-of-contents.css

@@ -11,7 +11,7 @@
   --table-of-contents-item-padding-inline-start: var(--spacing-3); /** Sangría base de una entrada, que deja sitio a la barra de la entrada actual */
   --table-of-contents-item-indent: var(--spacing-3); /** Sangría que suma cada nivel de profundidad respecto al título más alto del índice */
   --table-of-contents-sticky-offset: var(--spacing-5); /** Distancia al borde superior cuando el índice queda fijo (`sticky`). El consumidor la sube si tiene una cabecera fija más alta */
-  --table-of-contents-sticky-max-block-size: calc(100vh - (2 * var(--spacing-5))); /** Alto máximo del índice fijo: el alto de la ventana menos su aire arriba y abajo. Un índice largo scrollea dentro */
+  --table-of-contents-sticky-max-height: calc(100vh - (2 * var(--spacing-5))); /** Alto máximo del índice fijo: el alto de la ventana menos su aire arriba y abajo. Un índice largo scrollea dentro */
   --table-of-contents-transition-duration: var(--motion-duration-fast); /** Duración de la transición de hover */
   --table-of-contents-transition-easing: var(--motion-easing-default); /** Easing de la transición de hover */
   --table-of-contents-title-font-weight: var(--font-weight-emphasis); /** Peso del rótulo del índice */

package/src/tokens/molecules/table.css

@@ -4,7 +4,7 @@
 
 :root {
   --table-bg: rgba(0, 0, 0, 0); /** Fondo de la tabla */
-  --table-actions-inline-size: 1px; /** Ancho de la cabecera de la columna de acciones. No fija un ancho: con `table-layout: auto` el sobrante se reparte entre las demás columnas y esta se encoge a su contenido */
+  --table-actions-width: 1px; /** Ancho de la cabecera de la columna de acciones. No fija un ancho: con `table-layout: auto` el sobrante se reparte entre las demás columnas y esta se encoge a su contenido */
   --table-font-family: var(--font-family-sans); /** Font family */
   --table-header-padding-block: var(--spacing-3); /** Padding block del encabezado */
   --table-header-padding-inline: var(--spacing-3); /** Padding inline del encabezado */
@@ -33,7 +33,7 @@
   --table-row-hover-marker-width: var(--border-width-focus); /** Grosor de la barra que marca la fila bajo el puntero. El hover no pinta relleno (regla de Colores): la fila se señala con una barra de tinta en su borde de inicio, el mismo grafismo que la sección activa del SidebarNav en rail */
   --table-row-hover-marker-color: var(--color-primary); /** Color de la barra de hover — tinta de la superficie */
   --table-row-selected-font-weight: var(--font-weight-emphasis); /** Peso de la fila seleccionada */
-  --table-sticky-bg: var(--color-background-light); /** Fondo de la columna de acciones pegajosa (cabecera y celda): opaco, para tapar el resto de columnas que se deslizan debajo al hacer scroll horizontal */
+  --table-sticky-bg: var(--color-bg-light); /** Fondo de la columna de acciones pegajosa (cabecera y celda): opaco, para tapar el resto de columnas que se deslizan debajo al hacer scroll horizontal */
   --table-footer-bg: var(--color-surface-secondary-on-light); /** Fondo del tfoot: superficie clara secundaria, no un fondo de estado */
   --table-footer-border-width: var(--border-width-default); /** Borde superior del tfoot — 1px, como el del thead */
   --table-footer-border-color: var(--color-text-on-light); /** Color del borde superior del tfoot */
@@ -53,7 +53,7 @@ html.dark {
   --table-sort-icon-active-color: var(--color-text-on-dark); /** Icono de sort activo — surface-dark */
   --table-row-border-color: var(--color-text-on-dark); /** Separador entre filas — surface-dark */
   --table-row-selected-color: var(--color-accent-1); /** Tinta de la fila seleccionada — surface-dark: lavanda, como en el SidebarNav */
-  --table-sticky-bg: var(--color-background-dark); /** Fondo de la columna pegajosa — surface-dark */
+  --table-sticky-bg: var(--color-bg-dark); /** Fondo de la columna pegajosa — surface-dark */
   --table-footer-bg: var(--color-surface-secondary-on-dark); /** Fondo del tfoot — surface-dark */
   --table-footer-border-color: var(--color-text-on-dark); /** Borde superior del tfoot — surface-dark */
   --table-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */

package/src/tokens/molecules/toast.css

@@ -14,4 +14,5 @@
   --toast-duration-in: var(--motion-duration-base); /** Duración de la entrada. Con `prefers-reduced-motion: reduce` vale 0ms y el aviso aparece sin animación */
   --toast-duration-out: var(--motion-duration-base); /** Duración de la salida. Con `prefers-reduced-motion: reduce` vale 0ms */
   --toast-easing: var(--motion-easing-out); /** Curva de entrada y salida — lo que aparece y desaparece frena al final */
+  --toast-title-letter-spacing: var(--alert-title-letter-spacing); /** Tracking del título del aviso (−0,02em): hereda el del `Alert` (`alert.title-letter-spacing`, el de un `<h2>`), así que los dos avisos pintan el título igual. El token lo fija en la tarjeta para que no dependa de la herencia de `base.css` ni del nivel de encabezado del `Toast.Title` */
 }

package/src/tokens/scss/_index.legacy.scss

@@ -23,6 +23,7 @@
 @import 'components/radio';
 @import 'components/menu-button';
 @import 'components/close-button';
+@import 'components/embed-frame';
 @import 'components/logo';
 @import 'components/logomark';
 @import 'components/app-header';