@studiolxd/brand 50.0.0 → 51.0.0

package/src/tokens/scss/molecules/_color-picker.scss

@@ -22,8 +22,8 @@ $lxd-color-picker-trigger-disabled-border-color: #d0d0d0; // Borde deshabilitado
 $lxd-color-picker-trigger-disabled-cursor: not-allowed; // Cursor deshabilitado
 $lxd-color-picker-trigger-disabled-opacity: 0.4; // Opacidad de la muestra con el disparador deshabilitado: el color sigue ahí, atenuado
 $lxd-color-picker-panel-gap: 0.75rem; // Separación entre las partes del panel: área, bandas, campo hex, predefinidos
-$lxd-color-picker-panel-inline-size: calc(8 * 24px + 7 * 0.5rem); // Ancho del panel: ocho predefinidos por fila y sus siete huecos. El área y las bandas lo ocupan entero
-$lxd-color-picker-area-block-size: calc(6 * 24px + 5 * 0.5rem); // Alto del área de saturación y brillo: seis filas de la misma rejilla que mide el ancho
+$lxd-color-picker-panel-width: calc(8 * 24px + 7 * 0.5rem); // Ancho del panel: ocho predefinidos por fila y sus siete huecos. El área y las bandas lo ocupan entero
+$lxd-color-picker-area-height: calc(6 * 24px + 5 * 0.5rem); // Alto del área de saturación y brillo: seis filas de la misma rejilla que mide el ancho
 $lxd-color-picker-area-border-width: 1px; // Borde del área y de las bandas
 $lxd-color-picker-area-border-color: #d0d0d0; // Color del borde del área y de las bandas: el separador neutro
 $lxd-color-picker-area-saturation-start: #ffffff; // Origen del degradado de saturación: sin saturación, el tono se lava hacia el blanco. Es el modelo HSV, no una decisión de marca
@@ -48,3 +48,7 @@ $lxd-color-picker-preset-focus-ring-color: #111e30; // Color del anillo de foco
 $lxd-color-picker-preset-selected-ring-width: 2px; // Marca del predefinido que coincide con el valor: un aro por fuera
 $lxd-color-picker-preset-selected-ring-offset: 1px; // Separación de la marca
 $lxd-color-picker-preset-selected-ring-color: #111e30; // Color de la marca del seleccionado
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-color-picker-panel-inline-size: $lxd-color-picker-panel-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-color-picker-panel-width
+$lxd-color-picker-area-block-size: $lxd-color-picker-area-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-color-picker-area-height

package/src/tokens/scss/molecules/_command-palette.scss

@@ -5,6 +5,7 @@ $lxd-command-palette-max-height: min(24rem, 60vh); // Alto máximo de la paleta
 $lxd-command-palette-input-padding-block: 0.75rem; // Padding vertical del buscador
 $lxd-command-palette-input-padding-inline: 0.5rem; // Padding horizontal del buscador
 $lxd-command-palette-input-font-size: 1.25rem; // Tamaño de texto del buscador
+$lxd-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
 $lxd-command-palette-input-border-width: 1px; // Grosor de la línea bajo el buscador
 $lxd-command-palette-input-border-color: #111e30; // Color de la línea bajo el buscador
 $lxd-command-palette-input-placeholder-color: #4a4a4a; // Color del placeholder del buscador

package/src/tokens/scss/molecules/_consent.scss

@@ -11,9 +11,12 @@ $lxd-consent-banner-gap: 0.75rem; // Separación entre el texto y la fila de bot
 $lxd-consent-banner-text-gap: 0.25rem; // Separación entre el título y el texto
 $lxd-consent-banner-text-flex-basis: 20rem; // Base flexible del texto: encoge antes que la fila de botones, que nunca se parte
 $lxd-consent-banner-actions-gap: 0.5rem; // Separación entre botones
-$lxd-consent-banner-max-inline-size: 1280px; // Ancho máximo del contenido dentro de la banda: el mismo del contenido de una página pública
+$lxd-consent-banner-max-width: 1280px; // Ancho máximo del contenido dentro de la banda: el mismo del contenido de una página pública
 $lxd-consent-banner-z-index: 100; // Capa: la de las barras fijas de la aplicación. Por debajo del velo de un modal — el banner no bloquea nada
 $lxd-consent-banner-title-font-size: 1rem; // Cuerpo del título de la banda
 $lxd-consent-banner-description-font-size: 1rem; // Cuerpo del texto de la banda: el cuerpo de texto de la superficie, sin reducir (decisión del 2026-08-28)
 $lxd-consent-preferences-gap: 1rem; // Separación entre los bloques del panel
 $lxd-consent-preferences-category-gap: 0.75rem; // Separación entre categorías de la lista
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-consent-banner-max-inline-size: $lxd-consent-banner-max-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-consent-banner-max-width

package/src/tokens/scss/molecules/_conversation-list.scss

@@ -9,6 +9,7 @@ $lxd-conversation-list-item-padding-inline: 0.75rem; // Aire horizontal de cada
 $lxd-conversation-list-item-border-radius: 0px; // Radio de cada conversación: recto, como todo el sistema
 $lxd-conversation-list-item-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica del título de la conversación
 $lxd-conversation-list-item-font-size: 1rem; // El título es texto corriente: hereda el cuerpo de la superficie
+$lxd-conversation-list-item-line-height: 1; // 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
 $lxd-conversation-list-item-color: #4a4a4a; // Tinta de una conversación en reposo: el gris de texto secundario del sistema, no `grey-dark` (que no es un color de texto)
 $lxd-conversation-list-item-hover-color: #111e30; // Tinta de la conversación bajo el puntero: el hover no pinta relleno (regla de Colores), sube del gris de texto secundario a tinta plena
 $lxd-conversation-list-item-active-color: #111e30; // Tinta de la conversación abierta: tinta plena. La conversación abierta se dice con tinta y peso, no con un fondo

package/src/tokens/scss/molecules/_date-picker.scss

@@ -1,7 +1,7 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$lxd-date-picker-inline-size: 100%; // Anchura del control: la del campo, que siempre ocupa su contenedor
+$lxd-date-picker-width: 100%; // Anchura del control: la del campo, que siempre ocupa su contenedor
 $lxd-date-picker-border-width: 1px; // Grosor del borde del campo: el del sistema. Lo usa el anillo de foco del botón, que va justo por dentro de esa línea
 $lxd-date-picker-disabled-cursor: not-allowed; // Cursor con el control deshabilitado
 $lxd-date-picker-transition-duration: 150ms; // Duración de la transición de tinta del botón
@@ -24,3 +24,6 @@ $lxd-date-picker-message-font-size: 0.875rem; // Cuerpo del aviso
 $lxd-date-picker-message-font-weight: 300; // Peso del aviso
 $lxd-date-picker-message-line-height: 1.5; // Interlineado del aviso
 $lxd-date-picker-message-color: #b30000; // Color del aviso: el del error de formulario — lo que se escribió no es una fecha
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-date-picker-inline-size: $lxd-date-picker-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-date-picker-width

package/src/tokens/scss/molecules/_docs-search.scss

@@ -3,7 +3,7 @@
 
 $lxd-docs-search-gap: 0.75rem; // Aire entre el campo de búsqueda y la lista de resultados
 $lxd-docs-search-results-gap: 0.25rem; // Aire entre dos resultados
-$lxd-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
+$lxd-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
 $lxd-docs-search-result-padding-block: 0.75rem; // Padding vertical de un resultado
 $lxd-docs-search-result-padding-inline: 0.75rem; // Padding horizontal de un resultado
 $lxd-docs-search-result-border-radius: 0px; // Radio de un resultado
@@ -25,3 +25,6 @@ $lxd-docs-search-status-padding-inline: 0.75rem; // Padding horizontal del aviso
 $lxd-docs-search-status-gap: 0.5rem; // Aire entre el indicador de carga y su texto
 $lxd-docs-search-status-font-size: 0.875rem; // Cuerpo del aviso de estado
 $lxd-docs-search-status-color: #4a4a4a; // Color del aviso de estado — atenuado
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-docs-search-results-max-block-size: $lxd-docs-search-results-max-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-docs-search-results-max-height

package/src/tokens/scss/molecules/_dropdown-field.scss

@@ -17,6 +17,7 @@ $lxd-dropdown-field-content-gap: 0.5rem; // Entre el contenido del control y el
 $lxd-dropdown-field-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica: la del Select
 $lxd-dropdown-field-font-size: 1rem; // Cuerpo: el del Select
 $lxd-dropdown-field-font-weight: 300; // Peso: el del Select
+$lxd-dropdown-field-line-height: 1; // Interlineado del control: el del Select. Sin él, el botón heredaba el 1,15 de normalize.css
 $lxd-dropdown-field-color: #111e30; // Texto del control
 $lxd-dropdown-field-bg: #ffffff; // Fondo del control
 $lxd-dropdown-field-border-width: 1px; // Borde rectangular, como el Select

package/src/tokens/scss/molecules/_filter-bar.scss

@@ -6,4 +6,7 @@ $lxd-filter-bar-column-gap: 1rem; // Aire entre las columnas de filtros — el d
 $lxd-filter-bar-row-gap: 0.75rem; // 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
 $lxd-filter-bar-actions-gap: 0.75rem; // Aire entre las acciones de la barra — el de los botones de un formulario: la fila de acciones del sistema es una sola
 $lxd-filter-bar-label-offset: calc(0.875rem * 1.5 + 0.5rem); // 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
-$lxd-filter-bar-control-block-size: 2.5rem; // 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—
+$lxd-filter-bar-control-height: 2.5rem; // 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—
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-filter-bar-control-block-size: $lxd-filter-bar-control-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-filter-bar-control-height

package/src/tokens/scss/molecules/_heatmap.scss

@@ -31,8 +31,7 @@ $lxd-heatmap-empty-pattern-width: 0.25rem; // Ancho de la trama de la celda sin
 $lxd-heatmap-legend-gap: 0.5rem; // Separación entre los elementos de la leyenda
 $lxd-heatmap-legend-font-size: 0.875rem; // Tamaño del texto de la leyenda
 $lxd-heatmap-legend-color: #4a4a4a; // Color del texto de la leyenda
-$lxd-heatmap-legend-swatch-size: 0.75rem; // Lado del cuadradito de la leyenda
-$lxd-heatmap-legend-swatch-gap: 0.25rem; // Separación entre cuadraditos de la leyenda
+$lxd-heatmap-legend-swatch-size: 0.75rem; // Alto de la tira de la leyenda y ancho de cada uno de sus peldaños, que van pegados
 $lxd-heatmap-margin-block-start: 0.75rem; // Aire entre la matriz y su leyenda
 $lxd-heatmap-step-1-bg: #dce9fc; // Paso 1 de la rampa de la matriz — sequential-100 de la rampa secuencial del sistema
 $lxd-heatmap-step-1-color: #111e30; // Tinta sobre el paso 1 — la que llega a 4,5:1 sobre ese relleno
@@ -46,3 +45,17 @@ $lxd-heatmap-step-5-bg: #236ac5; // Paso 5 de la rampa de la matriz — sequenti
 $lxd-heatmap-step-5-color: #ffffff; // Tinta sobre el paso 5 — la que llega a 4,5:1 sobre ese relleno
 $lxd-heatmap-step-6-bg: #164b90; // Paso 6 de la rampa de la matriz — sequential-700 de la rampa secuencial del sistema
 $lxd-heatmap-step-6-color: #ffffff; // Tinta sobre el paso 6 — la que llega a 4,5:1 sobre ese relleno
+$lxd-heatmap-diverging-warm-3-bg: #9f431f; // Escala divergente, peldaño warm-3 — diverging-warm-3 (#9F431F), extremo del brazo cálido
+$lxd-heatmap-diverging-warm-3-color: #ffffff; // 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)
+$lxd-heatmap-diverging-warm-2-bg: #e26330; // Escala divergente, peldaño warm-2 — diverging-warm-2-on-dark (#E26330): ver la tinta
+$lxd-heatmap-diverging-warm-2-color: #111e30; // 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)
+$lxd-heatmap-diverging-warm-1-bg: #f37f54; // Escala divergente, peldaño warm-1 — diverging-warm-1 (#F37F54), junto al neutro
+$lxd-heatmap-diverging-warm-1-color: #111e30; // 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)
+$lxd-heatmap-diverging-neutral-bg: #f2f2f2; // 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
+$lxd-heatmap-diverging-neutral-color: #111e30; // 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
+$lxd-heatmap-diverging-cool-1-bg: #70a6f2; // Escala divergente, peldaño cool-1 — diverging-cool-1 (#70A6F2), junto al neutro
+$lxd-heatmap-diverging-cool-1-color: #111e30; // 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)
+$lxd-heatmap-diverging-cool-2-bg: #3484ee; // Escala divergente, peldaño cool-2 — diverging-cool-2 (#3484EE), intermedio
+$lxd-heatmap-diverging-cool-2-color: #111e30; // Tinta sobre el peldaño divergente cool-2 — diverging-cool-2 (#3484EE), intermedio. Prusia: 4,54:1 (blanco daría 3,70:1)
+$lxd-heatmap-diverging-cool-3-bg: #1f61b6; // Escala divergente, peldaño cool-3 — diverging-cool-3 (#1F61B6), extremo del brazo frío
+$lxd-heatmap-diverging-cool-3-color: #ffffff; // 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)

package/src/tokens/scss/molecules/_loading-state.scss

@@ -1,8 +1,8 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$lxd-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
-$lxd-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
+$lxd-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
+$lxd-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
 $lxd-loading-state-gap: 1rem; // Aire entre el girador y la acción — el mismo que EmptyState, porque ocupa su sitio
 $lxd-loading-state-padding-block: 3rem; // Padding vertical — el de EmptyState
 $lxd-loading-state-padding-inline: 1.5rem; // Padding horizontal — el de EmptyState
@@ -12,3 +12,7 @@ $lxd-loading-state-label-font-family: "Google Sans Flex", system-ui, sans-serif;
 $lxd-loading-state-label-font-size: 1rem; // Tamaño del texto visible de la espera — el de la descripción de EmptyState (cuerpo de la superficie)
 $lxd-loading-state-sm-label-font-size: 0.875rem; // Tamaño del texto visible en talla sm — el de la descripción de EmptyState sm
 $lxd-loading-state-label-color: #4a4a4a; // Color del texto visible de la espera — el de la descripción de EmptyState (texto atenuado, nunca grey-dark)
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-loading-state-min-block-size: $lxd-loading-state-min-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-loading-state-min-height
+$lxd-loading-state-sm-min-block-size: $lxd-loading-state-sm-min-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-loading-state-sm-min-height

package/src/tokens/scss/molecules/_menu.scss

@@ -34,7 +34,8 @@ $lxd-menu-item-destructive-color: #b30000; // Color de texto de ítem destructiv
 $lxd-menu-item-destructive-highlighted-bg: #b30000; // Relleno del ítem destructivo resaltado: el rojo sólido, universal en las dos superficies
 $lxd-menu-item-destructive-highlighted-color: #ffffff; // Texto del ítem destructivo resaltado
 $lxd-menu-label-padding-block: 0.5rem; // Padding vertical del rótulo de sección
-$lxd-menu-label-padding-inline: 1rem; // Padding horizontal del rótulo de sección
+$lxd-menu-label-margin-inline: 0.5rem; // 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
+$lxd-menu-label-padding-inline: 1rem; // 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)
 $lxd-menu-label-font-size: 0.875rem; // Tamaño de texto del rótulo de sección
 $lxd-menu-label-font-weight: 500; // Peso del rótulo de sección
 $lxd-menu-label-color: #4a4a4a; // Color del rótulo de sección

package/src/tokens/scss/molecules/_modal.scss

@@ -19,9 +19,9 @@ $lxd-modal-title-font-size: 2rem; // Tamaño del título (2rem)
 $lxd-modal-title-font-weight: 500; // Peso del título
 $lxd-modal-title-line-height: 1.1; // Interlineado del título — el de un título grande. Con el cuerpo del título da la altura de su primera línea, que es sobre la que se centra el aspa de cerrar
 $lxd-modal-title-color: #111e30; // Color del título
-$lxd-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
-$lxd-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
-$lxd-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
+$lxd-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
+$lxd-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`
+$lxd-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`
 $lxd-modal-transition-duration: 250ms; // Duración de la animación entrada/salida
 $lxd-modal-transition-easing: ease-in-out; // Easing de la animación
 $lxd-modal-content-enter-offset: 0.5rem; // Desplazamiento vertical del panel al entrar/salir (8px)
@@ -34,3 +34,7 @@ $lxd-modal-close-color: #111e30; // Color del glifo: la tinta de la superficie,
 $lxd-modal-close-focus-ring-width: 2px; // Grosor del anillo de foco
 $lxd-modal-close-focus-ring-offset: 2px; // Separación del anillo de foco (el rol focus gobierna ancho y separación)
 $lxd-modal-close-focus-ring-color: #111e30; // Color del anillo de foco: la tinta de la superficie
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-modal-width-max: $lxd-modal-max-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-modal-max-width
+$lxd-modal-inline-size: $lxd-modal-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-modal-width

package/src/tokens/scss/molecules/_notification-panel.scss

@@ -1,11 +1,11 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$lxd-notification-panel-inline-size: min(22.5rem, calc(100vw - 2 * 1.5rem)); // 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
+$lxd-notification-panel-width: min(22.5rem, calc(100vw - 2 * 1.5rem)); // 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
 $lxd-notification-panel-offset: 0.25rem; // Separación entre la campana y el panel: el desplazamiento compartido de los flotantes de la cabecera
 $lxd-notification-panel-padding-inline: 1rem; // Aire lateral de las filas, del bloque de marcar todas y del pie: el mismo, para que todo alinee en una sola columna
 $lxd-notification-panel-mark-all-padding-block: 0.75rem; // Aire vertical del bloque de «Marcar todas», entre la lista y el pie
-$lxd-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
+$lxd-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
 $lxd-notification-panel-list-padding-block: 0.5rem; // Aire vertical de la lista dentro del panel
 $lxd-notification-panel-list-gap: 0.25rem; // Separación entre notificaciones. Las filas no llevan línea: se separan con aire
 $lxd-notification-panel-item-padding-block: 0.5rem; // Aire vertical de cada notificación
@@ -29,3 +29,7 @@ $lxd-notification-panel-footer-gap: 0.5rem; // Aire entre los enlaces del pie
 $lxd-notification-panel-footer-font-size: 0.875rem; // Tamaño de los enlaces del pie: letra menor
 $lxd-notification-panel-focus-ring-width: 2px; // Grosor del anillo de foco de una fila
 $lxd-notification-panel-focus-ring-color: #111e30; // Color del anillo de foco de una fila
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-notification-panel-inline-size: $lxd-notification-panel-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-notification-panel-width
+$lxd-notification-panel-list-max-block-size: $lxd-notification-panel-list-max-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-notification-panel-list-max-height

package/src/tokens/scss/molecules/_org-chart.scss

@@ -3,7 +3,7 @@
 
 $lxd-org-chart-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica del organigrama
 $lxd-org-chart-gap: 0.75rem; // Separación entre el lienzo y sus controles
-$lxd-org-chart-viewport-block-size: 32rem; // Alto del lienzo con desplazamiento
+$lxd-org-chart-viewport-height: 32rem; // Alto del lienzo con desplazamiento
 $lxd-org-chart-viewport-padding: 1.5rem; // Aire alrededor del árbol dentro del lienzo
 $lxd-org-chart-viewport-bg: #f2f2f2; // Fondo del lienzo — superficie secundaria: lo que separa el organigrama de la página
 $lxd-org-chart-viewport-radius: 0px; // Radio del lienzo
@@ -16,7 +16,7 @@ $lxd-org-chart-sibling-gap: 1rem; // Separación horizontal entre dos nodos herm
 $lxd-org-chart-connector-length: 2rem; // Alto del tramo de líneas entre un nodo y sus hijos
 $lxd-org-chart-connector-color: #d0d0d0; // Color de las líneas que unen los nodos
 $lxd-org-chart-connector-width: 1px; // Grosor de las líneas que unen los nodos
-$lxd-org-chart-card-inline-size: 14rem; // Ancho de la tarjeta de un departamento
+$lxd-org-chart-card-width: 14rem; // Ancho de la tarjeta de un departamento
 $lxd-org-chart-card-bg: #ffffff; // Fondo de la tarjeta
 $lxd-org-chart-card-border-color: #111e30; // Borde de la tarjeta
 $lxd-org-chart-card-border-width: 1px; // Grosor del borde de la tarjeta
@@ -37,3 +37,7 @@ $lxd-org-chart-person-role-font-size: 0.75rem; // Tamaño del puesto de una pers
 $lxd-org-chart-person-role-color: #4a4a4a; // Color del puesto de una persona
 $lxd-org-chart-person-gap: 0.25rem; // Separación entre personas
 $lxd-org-chart-empty-color: #4a4a4a; // Color del «sin responsable» / «sin equipo»
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-org-chart-viewport-block-size: $lxd-org-chart-viewport-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-org-chart-viewport-height
+$lxd-org-chart-card-inline-size: $lxd-org-chart-card-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-org-chart-card-width

package/src/tokens/scss/molecules/_pagination.scss

@@ -12,6 +12,7 @@ $lxd-pagination-padding-inline: 0; // Sin padding lateral
 $lxd-pagination-summary-color: #111e30; // Color del texto de total de resultados
 $lxd-pagination-btn-height: 2.5rem; // Altura del botón de página — la del `Button md` (40px). También su lado mínimo: la caja es cuadrada
 $lxd-pagination-btn-font-size: 1rem; // Tipografía del botón de página — la del `Button md`
+$lxd-pagination-btn-line-height: 1; // Interlineado del botón de página — el del `Button`. Sin él, heredaba el 1,15 de normalize.css
 $lxd-pagination-btn-padding-inline: 0.5rem; // Padding horizontal del botón: el inset interior del control, no el del rótulo de un `Button` (aquí el rótulo es una cifra y la caja ya es cuadrada por `btn-height`); solo entra en juego cuando el número tiene tres o más dígitos
 $lxd-pagination-btn-radius: 0px; // Radio de borde del botón — el del `Button`
 $lxd-pagination-btn-border-width: 1px; // Grosor del borde del botón (1px) — el del `Button`

package/src/tokens/scss/molecules/_password-field.scss

@@ -7,7 +7,7 @@ $lxd-password-field-toggle-icon-size: 1.25rem; // Tamaño del icono del toggle
 $lxd-password-field-sm-toggle-icon-size: 16px; // Tamaño del icono del toggle — sm (16px)
 $lxd-password-field-lg-toggle-icon-size: 24px; // Tamaño del icono del toggle — lg (24px)
 $lxd-password-field-toggle-color: #111e30; // Color del icono toggle: tinta, prusia sobre claro
-$lxd-password-field-toggle-color-hover: #111e30; // Color del icono toggle en hover (sin cambio: la tinta no se atenúa; el foco se marca con el anillo)
+$lxd-password-field-toggle-hover-color: #111e30; // Color del icono toggle en hover (sin cambio: la tinta no se atenúa; el foco se marca con el anillo)
 $lxd-password-field-toggle-focus-ring-width: 2px; // Grosor del anillo de foco del toggle
 $lxd-password-field-toggle-focus-ring-offset: 2px; // Separación del anillo de foco del toggle (se dibuja hacia dentro de la caja: el toggle va a ras del borde del campo)
 $lxd-password-field-toggle-focus-ring-color: #111e30; // Color del anillo de foco del toggle: la tinta de la superficie
@@ -15,3 +15,6 @@ $lxd-password-field-sm-toggle-size: 2rem; // Lado del toggle — sm
 $lxd-password-field-lg-toggle-size: 3rem; // Lado del toggle — lg
 $lxd-password-field-action-margin-block-start: 0.5rem; // Aire extra sobre la acción bajo el campo («¿Olvidaste tu contraseña?»), además del gap del campo
 $lxd-password-field-input-padding-inline-end: 2.5rem; // Padding derecho del input — el texto termina donde empieza el toggle
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-password-field-toggle-color-hover: $lxd-password-field-toggle-hover-color; // OBSOLETO (v51, se retira en la v52): usar $lxd-password-field-toggle-hover-color

package/src/tokens/scss/molecules/_planning-grid.scss

@@ -32,5 +32,6 @@ $lxd-planning-grid-cell-input-width: 4.5rem; // Ancho del campo de horas dentro
 $lxd-planning-grid-footer-bg: #f2f2f2; // Fondo de las filas de totales
 $lxd-planning-grid-footer-font-weight: 500; // Peso de las filas de totales
 $lxd-planning-grid-footer-color: #111e30; // Color de las filas de totales
-$lxd-planning-grid-over-color: #b30000; // Color de un resto negativo: hay más horas asignadas que disponibles
-$lxd-planning-grid-pending-opacity: 0.4; // Opacidad de una celda cuyo cambio está en vuelo
+$lxd-planning-grid-over-bg: #b30000; // Relleno de un resto negativo: hay más horas asignadas que disponibles. Relleno universal, igual en las dos superficies (sin par oscuro)
+$lxd-planning-grid-over-color: #ffffff; // Tinta de un resto negativo, sobre su relleno de error
+$lxd-planning-grid-saving-gap: 0.25rem; // Aire entre el campo de un cruce en vuelo y su marca de guardado (el Spinner sm)

package/src/tokens/scss/molecules/_recurrence-field.scss

@@ -10,3 +10,8 @@ $lxd-recurrence-field-legend-font-size: 0.875rem; // Tamaño de la etiqueta del
 $lxd-recurrence-field-legend-color: #111e30; // Color de la etiqueta del grupo de días
 $lxd-recurrence-field-legend-font-weight: 500; // Peso de la etiqueta del grupo de días — el de una etiqueta de campo
 $lxd-recurrence-field-legend-margin-block-end: 0.25rem; // Aire entre la etiqueta del grupo de días y los días
+$lxd-recurrence-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda del editor
+$lxd-recurrence-field-helper-font-size: 0.875rem; // Font size del texto de ayuda del editor
+$lxd-recurrence-field-helper-font-weight: 300; // Font weight del texto de ayuda del editor
+$lxd-recurrence-field-helper-line-height: 1.5; // Line height del texto de ayuda del editor
+$lxd-recurrence-field-helper-color: #111e30; // Color del texto de ayuda del editor

package/src/tokens/scss/molecules/_search-form.scss

@@ -1,7 +1,7 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$lxd-search-form-inline-size: 100%; // Anchura del formulario: la del campo, que siempre ocupa su contenedor. El buscador vive dentro del panel del menú y se estira con él
+$lxd-search-form-width: 100%; // Anchura del formulario: la del campo, que siempre ocupa su contenedor. El buscador vive dentro del panel del menú y se estira con él
 $lxd-search-form-xl-height: 4rem; // 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
 $lxd-search-form-xl-padding-inline: 2rem; // Aire horizontal del campo — xl: el peldaño de espaciado siguiente al de lg
 $lxd-search-form-xl-font-size: 1.75rem; // 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
@@ -19,3 +19,6 @@ $lxd-search-form-submit-disabled-color: #4a4a4a; // Color de la flecha con el ca
 $lxd-search-form-submit-focus-ring-width: 2px; // Grosor del anillo de foco de la flecha: el del sistema. Es lo único que marca el foco, porque el adorno no tiene fondo
 $lxd-search-form-submit-focus-ring-color: #111e30; // Color del anillo de foco de la flecha: el del borde del campo en foco
 $lxd-search-form-submit-input-padding-inline-end: 2.5rem; // Padding derecho del campo — el texto termina donde empieza la flecha, que va dentro del borde
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-search-form-inline-size: $lxd-search-form-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-search-form-width

package/src/tokens/scss/molecules/_sheet.scss

@@ -7,8 +7,8 @@ $lxd-sheet-z-index: 300; // Capa z del panel
 $lxd-sheet-padding-block: 2rem; // Padding vertical del panel
 $lxd-sheet-padding-inline: 2rem; // Padding horizontal del panel
 $lxd-sheet-gap: 1rem; // Separación entre bloques del panel
-$lxd-sheet-inline-size: min(20rem, 85vw); // Ancho cuando entra por un lateral
-$lxd-sheet-block-size: 85vh; // Alto máximo cuando entra por arriba o abajo
+$lxd-sheet-width: min(20rem, 85vw); // Ancho cuando entra por un lateral
+$lxd-sheet-height: 85vh; // Alto máximo cuando entra por arriba o abajo
 $lxd-sheet-backdrop-bg: #000000; // Color del velo
 $lxd-sheet-backdrop-opacity: 0.6; // Opacidad del velo
 $lxd-sheet-backdrop-z-index: 200; // Capa z del velo
@@ -28,3 +28,7 @@ $lxd-sheet-close-focus-ring-offset: 2px; // Separación del anillo de foco
 $lxd-sheet-close-focus-ring-color: #111e30; // Color del anillo de foco
 $lxd-sheet-transition-duration: 250ms; // Duración de la animación de entrada/salida
 $lxd-sheet-transition-easing: ease-in-out; // Easing de la animación
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-sheet-inline-size: $lxd-sheet-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-sheet-width
+$lxd-sheet-block-size: $lxd-sheet-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-sheet-height

package/src/tokens/scss/molecules/_site-nav.scss

@@ -11,7 +11,8 @@ $lxd-site-nav-item-line-height: 1.3; // Enlaces
 $lxd-site-nav-item-color: #111e30; // Enlaces
 $lxd-site-nav-item-hover-color: #111e30; // Enlaces en hover: en claro no cambia el color, aparece la línea
 $lxd-site-nav-item-underline-offset: 2px; // Separación entre el texto y la línea de hover (2px, más pegada que en los enlaces de texto). Se reserva siempre: la línea no desplaza nada al aparecer
-$lxd-site-nav-item-hover-line-width: 1px; // Enlaces en hover: la línea bajo el enlace (como los enlaces de texto), en claro
+$lxd-site-nav-item-hover-line-width: 1px; // Enlaces en hover: grosor del subrayado (`text-decoration-thickness`), el de los enlaces de texto
+$lxd-site-nav-item-hover-decoration-line: underline; // Enlaces en hover: subrayados en claro (`text-decoration-line`), como los enlaces de texto en reposo
 $lxd-site-nav-item-disabled-color: #4a4a4a; // Ítem apagado («próximamente»): la tinta de un control deshabilitado sobre superficie clara. No baja de 3:1 sobre el lienzo —el mínimo de WCAG 1.4.11 para un componente inactivo—, que es el suelo de esta tinta
 $lxd-site-nav-item-badge-gap: 0.5rem; // Aire entre el rótulo del ítem y su distintivo
 $lxd-site-nav-item-column-gap: 2rem; // Pasillo entre las dos columnas de un grupo ancho (`columns: 2`). Es el mismo que separa dos grupos: las columnas de dentro tienen que leerse con el mismo aire que las de fuera, o el grupo ancho parecería dos grupos pegados

package/src/tokens/scss/molecules/_site-search.scss

@@ -1,7 +1,7 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$lxd-site-search-inline-size: 100%; // 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
+$lxd-site-search-width: 100%; // 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
 $lxd-site-search-gap: 1.5rem; // Aire entre los bloques del buscador: el formulario, el aviso de estado, los resultados y el pie
 $lxd-site-search-status-font-size: 0.875rem; // Cuerpo del aviso de estado: cuántos resultados hay, que se está buscando o que no hay nada
 $lxd-site-search-status-line-height: 1.5; // Interlineado del aviso de estado
@@ -33,7 +33,13 @@ $lxd-site-search-result-mark-color: #111e30; // Tinta del resaltado sobre el ama
 $lxd-site-search-suggestions-gap: 0.5rem; // Aire entre las sugerencias de búsqueda
 $lxd-site-search-suggestions-label-font-size: 0.75rem; // Cuerpo del rótulo de las sugerencias
 $lxd-site-search-suggestions-label-color: #4a4a4a; // Color del rótulo de las sugerencias — atenuado
-$lxd-site-search-ghost-section-inline-size: 30%; // Ancho de la barra fantasma del rastro de sección
-$lxd-site-search-ghost-title-inline-size: 70%; // Ancho de la barra fantasma del título
-$lxd-site-search-ghost-url-inline-size: 45%; // Ancho de la barra fantasma de la dirección
+$lxd-site-search-ghost-section-width: 30%; // Ancho de la barra fantasma del rastro de sección
+$lxd-site-search-ghost-title-width: 70%; // Ancho de la barra fantasma del título
+$lxd-site-search-ghost-url-width: 45%; // Ancho de la barra fantasma de la dirección
 $lxd-site-search-skeleton-gap: 0.5rem; // Aire entre las barras de un resultado fantasma
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-site-search-inline-size: $lxd-site-search-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-site-search-width
+$lxd-site-search-ghost-section-inline-size: $lxd-site-search-ghost-section-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-site-search-ghost-section-width
+$lxd-site-search-ghost-title-inline-size: $lxd-site-search-ghost-title-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-site-search-ghost-title-width
+$lxd-site-search-ghost-url-inline-size: $lxd-site-search-ghost-url-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-site-search-ghost-url-width

package/src/tokens/scss/molecules/_table-of-contents.scss

@@ -22,6 +22,9 @@ $lxd-table-of-contents-focus-ring-width: 2px; // Grosor del anillo de foco de un
 $lxd-table-of-contents-focus-ring-offset: 1px; // Separación del anillo de foco
 $lxd-table-of-contents-focus-ring-color: #111e30; // Color del anillo de foco
 $lxd-table-of-contents-sticky-offset: 1.5rem; // Distancia al borde superior cuando el índice queda fijo (`sticky`). El consumidor la sube si tiene una cabecera fija más alta
-$lxd-table-of-contents-sticky-max-block-size: calc(100vh - (2 * 1.5rem)); // Alto máximo del índice fijo: el alto de la ventana menos su aire arriba y abajo. Un índice largo scrollea dentro
+$lxd-table-of-contents-sticky-max-height: calc(100vh - (2 * 1.5rem)); // Alto máximo del índice fijo: el alto de la ventana menos su aire arriba y abajo. Un índice largo scrollea dentro
 $lxd-table-of-contents-transition-duration: 150ms; // Duración de la transición de hover
 $lxd-table-of-contents-transition-easing: ease; // Easing de la transición de hover
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-table-of-contents-sticky-max-block-size: $lxd-table-of-contents-sticky-max-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-table-of-contents-sticky-max-height

package/src/tokens/scss/molecules/_table.scss

@@ -12,7 +12,7 @@ $lxd-table-header-padding-block: 0.75rem; // Padding block del encabezado
 $lxd-table-header-padding-inline: 0.75rem; // Padding inline del encabezado
 $lxd-table-header-font-weight: 500; // Peso tipográfico del encabezado
 $lxd-table-header-border-width: 1px; // Borde inferior del thead — 1px, como todo borde del sistema; la cabecera se lee por peso, no por grosor
-$lxd-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
+$lxd-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
 $lxd-table-header-content-gap: 0.5rem; // Separación entre el rótulo de la columna y el icono de ordenación
 $lxd-table-header-border-color: #111e30; // Color del borde inferior del thead
 $lxd-table-sort-icon-color: #4a4a4a; // Icono de ordenación en reposo, tinta plana; el hover lo lleva al color activo
@@ -39,3 +39,6 @@ $lxd-table-sm-header-padding-block: 0.5rem; // Padding block del encabezado —
 $lxd-table-sm-header-padding-inline: 0.5rem; // Padding inline del encabezado — variante sm
 $lxd-table-sm-cell-padding-block: 0.5rem; // Padding block de celda — variante sm
 $lxd-table-sm-cell-padding-inline: 0.5rem; // Padding inline de celda — variante sm
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-table-actions-inline-size: $lxd-table-actions-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-table-actions-width

package/src/tokens/scss/molecules/_toast.scss

@@ -5,6 +5,7 @@ $lxd-toast-z-index: 500; // Capa de la pila — `toast` (500): por encima de mod
 $lxd-toast-max-width: 360px; // Ancho máximo de la pila. En pantallas estrechas cede al ancho de la ventana menos el aire lateral
 $lxd-toast-inset-block: 1.5rem; // Distancia de la pila al borde superior o inferior de la ventana (24px)
 $lxd-toast-inset-inline: 1.5rem; // Distancia de la pila al borde izquierdo o derecho de la ventana (24px)
+$lxd-toast-title-letter-spacing: -0.02em; // 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`
 $lxd-toast-gap: 0.5rem; // Aire entre avisos cuando la pila está desplegada (8px). El `Toaster` lo puede sobreescribir con su prop `gap`
 $lxd-toast-stack-offset: 0.75rem; // Cuánto asoma cada aviso por detrás del de delante con la pila recogida (12px)
 $lxd-toast-stack-scale: 0.05; // Cuánto encoge cada aviso por peldaño de profundidad con la pila recogida (5%)

package/src/tokens/surface-dark-derived.css

@@ -99,6 +99,7 @@ html.dark {
   --prose-table-border-color: var(--table-row-border-color);
   --prose-table-header-border-color: var(--table-header-border-color);
   --prose-rule-color: var(--separator-color);
+  --recurrence-field-helper-color: var(--form-helper-color);
   --sheet-bg: var(--modal-bg);
   --sheet-title-color: var(--modal-title-color);
   --sheet-description-color: var(--modal-description-color);