@studiolxd/brand 49.28.0 → 51.0.0

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/date-time-field.css

@@ -5,13 +5,8 @@
 :root {
   --date-time-field-gap: var(--spacing-2); /** Espacio entre label, controles, helper y error */
   --date-time-field-controls-gap: var(--spacing-2); /** Espacio entre DatePickerField y TimeField */
-  --date-time-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
-  --date-time-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --date-time-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --date-time-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
-  --date-time-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
-  --date-time-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
-  --date-time-field-error-color: var(--form-error-color); /** Color del mensaje de error */
   --date-time-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
   --date-time-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
   --date-time-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
@@ -21,6 +16,5 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --date-time-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
   --date-time-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
 }

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

@@ -22,12 +22,11 @@
   --dropdown-field-font-size: var(--select-font-size); /** Cuerpo: el del Select */
   --dropdown-field-bg: var(--select-bg); /** Fondo del control */
   --dropdown-field-icon-transition: var(--select-icon-transition); /** Giro del chevron al abrir */
-  --dropdown-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
-  --dropdown-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --dropdown-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --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 */
@@ -35,9 +34,6 @@
   --dropdown-field-focus-ring-width: var(--select-focus-ring-width); /** Anillo de foco */
   --dropdown-field-focus-ring-color: var(--select-focus-ring-color); /** Anillo de foco */
   --dropdown-field-error-border-color: var(--select-error-border-color); /** Borde en error: el mismo que el del Select */
-  --dropdown-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
-  --dropdown-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
-  --dropdown-field-error-color: var(--form-error-color); /** Color del mensaje de error */
   --dropdown-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
   --dropdown-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
   --dropdown-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
@@ -49,9 +45,8 @@
 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-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
   --dropdown-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
 }

package/src/tokens/molecules/file-upload-field.css

@@ -4,13 +4,8 @@
 
 :root {
   --file-upload-field-gap: var(--spacing-2); /** Espacio entre label, control, helper y error */
-  --file-upload-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
-  --file-upload-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --file-upload-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --file-upload-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
-  --file-upload-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
-  --file-upload-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
-  --file-upload-field-error-color: var(--form-error-color); /** Color del mensaje de error */
   --file-upload-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
   --file-upload-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
   --file-upload-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
@@ -20,6 +15,5 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --file-upload-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
   --file-upload-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/floating-toolbar.css

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --floating-toolbar-gap: var(--spacing-1); /** Separación entre los botones de un grupo y entre los dos grupos de la barra superior */
+  --floating-toolbar-offset: var(--spacing-2); /** Distancia entre la barra y el borde del elemento: por encima de él en la barra superior, a su lado en los raíles */
+  --floating-toolbar-padding-block: var(--spacing-1); /** Aire vertical del panel de la barra (o de cada raíl) */
+  --floating-toolbar-padding-inline: var(--spacing-1); /** Aire horizontal del panel de la barra (o de cada raíl) */
+  --floating-toolbar-transition-duration: var(--motion-duration-fast); /** Duración de la aparición y la desaparición. Con `prefers-reduced-motion: reduce` vale 0ms */
+  --floating-toolbar-transition-easing: var(--motion-easing-default); /** Curva de la aparición y la desaparición */
+  --floating-toolbar-button-size: var(--button-sm-height); /** Caja de cada botón de icono: la talla `sm` del botón. Es también lo que mide el raíl de ancho, y por eso el hueco que el elemento reserva a cada lado */
+  --floating-toolbar-bg: var(--floating-panel-bg); /** Fondo del panel: el de cualquier panel flotante, para que la barra se lea encima del contenido vecino */
+  --floating-toolbar-border-width: var(--floating-panel-border-width); /** Grosor del borde del panel */
+  --floating-toolbar-border-color: var(--floating-panel-border-color); /** Color del borde del panel */
+  --floating-toolbar-border-radius: var(--floating-panel-border-radius); /** Radio del panel */
+  --floating-toolbar-shadow: var(--floating-panel-shadow); /** Sombra del panel */
+}

package/src/tokens/molecules/floating-toolbar.ts

@@ -0,0 +1,4 @@
+import floatingToolbar from '../../../tokens/molecule/floating-toolbar.json';
+import { flattenTokens } from '../utils';
+
+export const floatingToolbarTokens = flattenTokens(floatingToolbar as never);

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/input-field.css

@@ -18,7 +18,6 @@
   --input-field-search-clear-focus-ring-color: var(--color-primary); /** Color del anillo de foco del aspa: la tinta de la superficie */
   --input-field-search-input-padding-inline-start: var(--input-field-search-slot-size); /** Padding izquierdo del campo — el texto empieza donde acaba la lupa */
   --input-field-search-input-padding-inline-end: var(--input-field-search-slot-size); /** Padding derecho del campo cuando ofrece borrado — el texto termina donde empieza el aspa */
-  --input-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
   --input-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --input-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --input-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */

package/src/tokens/molecules/input-phone-field.css

@@ -4,13 +4,8 @@
 
 :root {
   --input-phone-field-gap: var(--spacing-2); /** Espacio entre label, control, helper y error */
-  --input-phone-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
-  --input-phone-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --input-phone-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --input-phone-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
-  --input-phone-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
-  --input-phone-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
-  --input-phone-field-error-color: var(--form-error-color); /** Color del mensaje de error */
   --input-phone-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
   --input-phone-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
   --input-phone-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
@@ -20,6 +15,5 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --input-phone-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
   --input-phone-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — 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,8 +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-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 */
@@ -21,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 */
@@ -41,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/multi-select-field.css

@@ -4,13 +4,8 @@
 
 :root {
   --multi-select-field-gap: var(--spacing-2); /** Espacio entre label, multi-select, helper y error */
-  --multi-select-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
-  --multi-select-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --multi-select-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --multi-select-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
-  --multi-select-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
-  --multi-select-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
-  --multi-select-field-error-color: var(--form-error-color); /** Color del mensaje de error */
   --multi-select-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
   --multi-select-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
   --multi-select-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
@@ -20,6 +15,5 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --multi-select-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
   --multi-select-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — 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/number-input-field.css

@@ -4,13 +4,8 @@
 
 :root {
   --number-input-field-gap: var(--spacing-2); /** Espacio entre label, input, helper y error */
-  --number-input-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
-  --number-input-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --number-input-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --number-input-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
-  --number-input-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
-  --number-input-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
-  --number-input-field-error-color: var(--form-error-color); /** Color del mensaje de error */
   --number-input-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
   --number-input-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
   --number-input-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
@@ -20,6 +15,5 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --number-input-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
   --number-input-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
 }

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/otp-field.css

@@ -4,13 +4,8 @@
 
 :root {
   --otp-field-gap: var(--spacing-2); /** Espacio entre label, celdas, helper y error */
-  --otp-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
-  --otp-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --otp-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --otp-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
-  --otp-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
-  --otp-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
-  --otp-field-error-color: var(--form-error-color); /** Color del mensaje de error */
   --otp-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
   --otp-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
   --otp-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
@@ -20,6 +15,5 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --otp-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
   --otp-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — 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/radio-field.css

@@ -18,15 +18,10 @@
   --radio-field-label-font-size: var(--text-font-size); /** Es texto corriente: el cuerpo de la superficie (16px en aplicación, 20px en la pública) */
   --radio-field-label-line-height: var(--text-line-height); /** Interlineado */
   --radio-field-label-letter-spacing: var(--text-letter-spacing); /** Interletraje */
-  --radio-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
-  --radio-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --radio-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --radio-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
   --radio-field-label-font-weight: var(--text-font-weight); /** Peso tipográfico */
   --radio-field-label-color: var(--text-color); /** Color del texto */
-  --radio-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
-  --radio-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
-  --radio-field-error-color: var(--form-error-color); /** Color del mensaje de error */
   --radio-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
   --radio-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
   --radio-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
@@ -37,6 +32,5 @@
 [data-theme="dark"],
 html.dark {
   --radio-field-label-color: var(--color-text-on-dark); /** Color del texto — surface-dark */
-  --radio-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
   --radio-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
 }

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

@@ -4,13 +4,19 @@
 
 :root {
   --recurrence-field-interval-width: 8rem; /** Ancho del campo de intervalo — cabe un número de dos cifras y sus flechas, no la fila entera */
+  --recurrence-field-end-flex-basis: 12rem; /** Base flexible del bloque de fin de la repetición: por debajo de ella pasa a otra línea */
   --recurrence-field-gap: var(--spacing-4); /** Separación entre los campos del editor de recurrencia */
   --recurrence-field-row-gap: var(--spacing-3); /** Separación entre los campos que comparten fila */
   --recurrence-field-weekdays-gap: var(--spacing-1); /** Separación entre los días de la semana */
   --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/select-field.css

@@ -4,13 +4,8 @@
 
 :root {
   --select-field-gap: var(--spacing-2); /** Espacio entre label, select, helper y error */
-  --select-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
-  --select-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --select-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --select-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
-  --select-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
-  --select-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
-  --select-field-error-color: var(--form-error-color); /** Color del mensaje de error */
   --select-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
   --select-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
   --select-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
@@ -20,6 +15,5 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --select-field-error-color: var(--color-error-text-on-dark); /** Mensaje de error — surface-dark */
   --select-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
 }