@studiolxd/brand 49.28.0 → 51.0.0

package/src/tokens/molecules/sheet.css

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

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

@@ -28,15 +28,11 @@
   --sidebar-nav-item-border-radius: var(--border-radius-default); /** Radio de cada ítem */
   --sidebar-nav-item-font-weight: var(--font-weight-default); /** Peso de ítems */
   --sidebar-nav-item-color: var(--color-text-on-light); /** Color de ítems */
-  --sidebar-nav-item-active-color: var(--color-primary); /** Color de ítem activo */
   --sidebar-nav-item-active-font-weight: var(--font-weight-emphasis); /** Peso de ítem activo */
   --sidebar-nav-focus-ring-color: var(--color-primary); /** Color del focus ring */
   --sidebar-nav-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
-  --sidebar-nav-rail-active-bar-width: var(--border-width-focus); /** Barra al borde que marca la sección activa en rail */
   --sidebar-nav-item-empty-color: var(--color-text-muted-on-light); /** Tinta de una entrada vacía: sigue leyéndose, pero no invita a pulsarla */
   --sidebar-nav-item-empty-mark-color: var(--color-text-muted-on-light); /** Tinta de la marca «sin docs» */
-  --sidebar-nav-item-hover-line-width: var(--border-width-default); /** Grosor de la línea que marca el ítem bajo el puntero. El hover no pinta relleno (regla de Colores): deja una línea de tinta bajo el ítem, el mismo grafismo del subrayado de `Link` */
-  --sidebar-nav-item-hover-line-color: var(--color-primary); /** Color de la línea de hover — tinta de la superficie */
 }
 
 .surface-dark,
@@ -45,9 +41,7 @@
 html.dark {
   --sidebar-nav-group-label-color: var(--color-text-muted-on-dark); /** Color de la etiqueta de grupo — surface-dark. `group-label-color` (prussian) sería invisible sobre fondo oscuro. */
   --sidebar-nav-item-color: var(--color-text-on-dark); /** Color de ítems — surface-dark */
-  --sidebar-nav-item-active-color: var(--color-accent-1); /** Color de ítem activo — surface-dark. `item-active-color` (prussian) sería invisible; se usa accent-1 como acento de estado activo, igual que Switcher. */
   --sidebar-nav-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark. Deliberadamente blanco, no accent-1: el ring debe seguir el patrón estándar del sistema aunque el ítem activo use lavanda como acento. */
   --sidebar-nav-item-empty-color: var(--color-text-muted-on-dark); /** Tinta de una entrada vacía — surface-dark */
   --sidebar-nav-item-empty-mark-color: var(--color-text-muted-on-dark); /** Tinta de la marca «sin docs» — surface-dark */
-  --sidebar-nav-item-hover-line-color: var(--color-text-on-dark); /** Color de la línea de hover — surface-dark */
 }

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

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

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

@@ -3,12 +3,11 @@
  */
 
 :root {
-  --site-search-ghost-section-inline-size: 30%; /** Ancho de la barra fantasma del rastro de sección */
-  --site-search-ghost-title-inline-size: 70%; /** Ancho de la barra fantasma del título */
-  --site-search-ghost-url-inline-size: 45%; /** Ancho de la barra fantasma de la dirección */
-  --site-search-inline-size: var(--input-width); /** Anchura del buscador: la de su contenedor. Es la página de resultados entera, así que ocupa todo el hueco donde se monte — declarada y no heredada del flujo, para que tampoco se encoja dentro de una fila flex o una celda de retícula */
+  --site-search-ghost-section-width: 30%; /** Ancho de la barra fantasma del rastro de sección */
+  --site-search-ghost-title-width: 70%; /** Ancho de la barra fantasma del título */
+  --site-search-ghost-url-width: 45%; /** Ancho de la barra fantasma de la dirección */
+  --site-search-width: var(--input-width); /** Anchura del buscador: la de su contenedor. Es la página de resultados entera, así que ocupa todo el hueco donde se monte — declarada y no heredada del flujo, para que tampoco se encoja dentro de una fila flex o una celda de retícula */
   --site-search-gap: var(--spacing-5); /** Aire entre los bloques del buscador: el formulario, el aviso de estado, los resultados y el pie */
-  --site-search-block-gap: var(--spacing-3); /** Aire entre las líneas de un bloque de estado (reposo, escribiendo, carga) */
   --site-search-status-line-height: var(--line-height-normal); /** Interlineado del aviso de estado */
   --site-search-status-gap: var(--spacing-2); /** Aire entre el indicador de carga y su texto */
   --site-search-results-gap: var(--spacing-6); /** Aire entre dos resultados (32px). Sin filete que los separe, es el aire el que dice dónde acaba uno y empieza el siguiente: tiene que ser claramente mayor que el que hay entre las líneas de un mismo resultado */
@@ -20,7 +19,6 @@
   --site-search-skeleton-gap: var(--spacing-2); /** Aire entre las barras de un resultado fantasma */
   --site-search-status-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del aviso de estado: cuántos resultados hay, que se está buscando o que no hay nada */
   --site-search-status-color: var(--color-text-muted-on-light); /** Color del aviso de estado — atenuado: acompaña a los resultados, no compite con ellos */
-  --site-search-status-query-font-weight: var(--font-weight-emphasis); /** Peso de la consulta dentro del aviso: lo único que cambia de una búsqueda a otra */
   --site-search-result-title-font-size: var(--text-paragraph-large-font-size); /** Cuerpo del título del resultado: un peldaño por encima del cuerpo de la superficie, para que siga mandando ahora que el extracto y la dirección leen al cuerpo entero */
   --site-search-result-title-font-weight: var(--font-weight-emphasis); /** Peso del título del resultado */
   --site-search-result-title-color: var(--color-text-on-light); /** Color del título del resultado */

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

@@ -18,7 +18,6 @@
   --switcher-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) */
   --switcher-field-label-line-height: var(--text-line-height); /** Interlineado */
   --switcher-field-label-letter-spacing: var(--text-letter-spacing); /** Interletraje */
-  --switcher-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
   --switcher-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --switcher-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --switcher-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */

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

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

package/src/tokens/molecules/table.css

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

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

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

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

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

package/src/tokens/molecules/toast.css

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

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

@@ -23,6 +23,7 @@
 @import 'components/radio';
 @import 'components/menu-button';
 @import 'components/close-button';
+@import 'components/embed-frame';
 @import 'components/logo';
 @import 'components/logomark';
 @import 'components/app-header';
@@ -147,6 +148,7 @@
 @import 'molecules/docs-search';
 @import 'molecules/stat-tile';
 @import 'molecules/copy-button';
+@import 'molecules/floating-toolbar';
 @import 'molecules/confirm-dialog';
 @import 'molecules/search-form';
 @import 'molecules/input-phone-field';

package/src/tokens/scss/_index.scss

@@ -23,6 +23,7 @@
 @forward 'components/radio';
 @forward 'components/menu-button';
 @forward 'components/close-button';
+@forward 'components/embed-frame';
 @forward 'components/logo';
 @forward 'components/logomark';
 @forward 'components/app-header';
@@ -147,6 +148,7 @@
 @forward 'molecules/docs-search';
 @forward 'molecules/stat-tile';
 @forward 'molecules/copy-button';
+@forward 'molecules/floating-toolbar';
 @forward 'molecules/confirm-dialog';
 @forward 'molecules/search-form';
 @forward 'molecules/input-phone-field';

package/src/tokens/scss/components/_accordion.scss

@@ -10,7 +10,7 @@ $lxd-accordion-trigger-cursor: pointer; // Cursor del disparador
 $lxd-accordion-index-font-family: "Google Sans Code", ui-monospace, monospace; // Monoespaciada: los números del acordeón numerado se alinean en columna
 $lxd-accordion-index-font-size: 0.875rem; // Un peldaño por debajo del rótulo del apartado
 $lxd-accordion-index-color: #4a4a4a; // Color del número: texto secundario, para que no compita con el rótulo
-$lxd-accordion-index-min-inline-size: 1.5rem; // Ancho mínimo de la ranura del número (24px): mantiene la columna aunque pase de una a dos cifras
+$lxd-accordion-index-min-width: 1.5rem; // Ancho mínimo de la ranura del número (24px): mantiene la columna aunque pase de una a dos cifras
 $lxd-accordion-content-padding-block: 2rem; // Aire inferior del contenido
 $lxd-accordion-content-padding-inline: 2rem; // Aire horizontal del contenido
 $lxd-accordion-transition-duration: 400ms; // Duración de abrir/cerrar (cambio de contexto: el panel entra)
@@ -18,3 +18,6 @@ $lxd-accordion-transition-easing: ease-in-out; // Curva de abrir/cerrar
 $lxd-accordion-focus-ring-width: 2px; // Grosor del anillo de foco
 $lxd-accordion-focus-ring-offset: 2px; // Separación del anillo de foco (el rol focus gobierna ancho y separación)
 $lxd-accordion-focus-ring-color: #111e30; // Color del anillo de foco: la tinta de la superficie
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-accordion-index-min-inline-size: $lxd-accordion-index-min-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-accordion-index-min-width

package/src/tokens/scss/components/_async-multi-select.scss

@@ -7,6 +7,10 @@ $lxd-async-multi-select-border-radius: 0px; // Hereda de `multi-select.border-ra
 $lxd-async-multi-select-border-style: solid; // Hereda de `multi-select.border-style`: el buscador múltiple tiene la misma cara que el control síncrono
 $lxd-async-multi-select-border-width: 1px; // Hereda de `multi-select.border-width`: el buscador múltiple tiene la misma cara que el control síncrono
 $lxd-async-multi-select-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado: el de los campos
+$lxd-async-multi-select-disabled-opacity: 0.5; // Opacidad del control deshabilitado: la del buscador de selección única
+$lxd-async-multi-select-pill-remove-opacity: 0.7; // Opacidad del aspa de la píldora en reposo: presente pero en segundo plano
+$lxd-async-multi-select-pill-remove-hover-opacity: 1; // Opacidad del aspa de la píldora bajo el puntero
+$lxd-async-multi-select-input-min-width: 4rem; // Ancho mínimo del texto de búsqueda junto a las píldoras: lo justo para escribir sin que salte de línea a cada letra
 $lxd-async-multi-select-color: #111e30; // Hereda de `multi-select.color`: el buscador múltiple tiene la misma cara que el control síncrono
 $lxd-async-multi-select-content-bg: #ffffff; // Hereda de `multi-select.content-bg`: el buscador múltiple tiene la misma cara que el control síncrono
 $lxd-async-multi-select-content-border-color: #111e30; // Hereda de `multi-select.content-border-color`: el buscador múltiple tiene la misma cara que el control síncrono
@@ -50,3 +54,6 @@ $lxd-async-multi-select-empty-padding-inline: 1rem; // Aire horizontal del mensa
 $lxd-async-multi-select-empty-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía del mensaje de lista vacía
 $lxd-async-multi-select-empty-font-size: 1rem; // Tamaño del mensaje de lista vacía
 $lxd-async-multi-select-empty-color: #4a4a4a; // Tinta del mensaje de lista vacía: es texto secundario, no un valor
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-async-multi-select-input-min-inline-size: $lxd-async-multi-select-input-min-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-async-multi-select-input-min-width

package/src/tokens/scss/components/_async-select.scss

@@ -7,6 +7,9 @@ $lxd-async-select-border-radius: 0px; // Hereda de `select.border-radius`: el bu
 $lxd-async-select-border-style: solid; // Hereda de `select.border-style`: el buscador tiene la misma cara que el control síncrono
 $lxd-async-select-border-width: 1px; // Hereda de `select.border-width`: el buscador tiene la misma cara que el control síncrono
 $lxd-async-select-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado: el de los campos
+$lxd-async-select-disabled-opacity: 0.5; // Opacidad del control deshabilitado. 0.5 no está en la escala `opacity` (la más cercana, `opacity.disabled`, es 0.4): se conserva el valor de siempre
+$lxd-async-select-clear-opacity: 0.7; // Opacidad del botón de limpiar en reposo: presente pero en segundo plano
+$lxd-async-select-clear-hover-opacity: 1; // Opacidad del botón de limpiar bajo el puntero
 $lxd-async-select-color: #111e30; // Hereda de `select.color`: el buscador tiene la misma cara que el control síncrono
 $lxd-async-select-content-bg: #ffffff; // Hereda de `select.content-bg`: el buscador tiene la misma cara que el control síncrono
 $lxd-async-select-content-border-color: #111e30; // Hereda de `select.content-border-color`: el buscador tiene la misma cara que el control síncrono

package/src/tokens/scss/components/_autocomplete.scss

@@ -7,6 +7,7 @@ $lxd-autocomplete-border-radius: 0px; // Hereda de `async-select.border-radius`:
 $lxd-autocomplete-border-style: solid; // Hereda de `async-select.border-style`: el autocompletado tiene la misma cara que el buscador y el Select
 $lxd-autocomplete-border-width: 1px; // Hereda de `async-select.border-width`: el autocompletado tiene la misma cara que el buscador y el Select
 $lxd-autocomplete-disabled-cursor: not-allowed; // Hereda de `async-select.disabled-cursor`: el autocompletado tiene la misma cara que el buscador y el Select
+$lxd-autocomplete-disabled-opacity: 0.5; // Hereda de `async-select.disabled-opacity`: el autocompletado tiene la misma cara que el buscador y el Select
 $lxd-autocomplete-color: #111e30; // Hereda de `async-select.color`: el autocompletado tiene la misma cara que el buscador y el Select
 $lxd-autocomplete-content-bg: #ffffff; // Hereda de `async-select.content-bg`: el autocompletado tiene la misma cara que el buscador y el Select
 $lxd-autocomplete-content-border-color: #111e30; // Hereda de `async-select.content-border-color`: el autocompletado tiene la misma cara que el buscador y el Select

package/src/tokens/scss/components/_breadcrumb.scss

@@ -10,11 +10,12 @@ $lxd-breadcrumb-padding-block: 0.25rem; // Padding vertical del nav
 $lxd-breadcrumb-padding-inline: 0; // Sin padding lateral
 $lxd-breadcrumb-separator-color: #111e30; // Color del separador
 $lxd-breadcrumb-link-color: #111e30; // Color del link navegable
-$lxd-breadcrumb-link-color-hover: #111e30; // Color del link en hover
-$lxd-breadcrumb-link-text-decoration: none; // OBSOLETO — no viste nada. El subrayado de las migas es la línea del sistema, la misma de cualquier enlace, y no `text-decoration`. Se conserva en `none` para no romper a quien lo tenga referenciado; a retirar en el próximo major
-$lxd-breadcrumb-link-text-decoration-hover: none; // OBSOLETO — no viste nada. Valía `underline` y era la vía por la que el subrayado de `text-decoration` seguía entrando en el DS. A retirar en el próximo major
+$lxd-breadcrumb-link-hover-color: #111e30; // Color del link en hover
 $lxd-breadcrumb-current-color: #111e30; // Color del item activo (página actual)
 $lxd-breadcrumb-current-font-weight: 500; // Peso del item activo
 $lxd-breadcrumb-focus-ring-color: #111e30; // Color del focus ring
 $lxd-breadcrumb-focus-ring-width: 2px; // Grosor del focus ring
 $lxd-breadcrumb-focus-ring-offset: 1px; // Separación del focus ring
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-breadcrumb-link-color-hover: $lxd-breadcrumb-link-hover-color; // OBSOLETO (v51, se retira en la v52): usar $lxd-breadcrumb-link-hover-color

package/src/tokens/scss/components/_button.scss

@@ -4,7 +4,6 @@
 $lxd-button-border-radius: 0px; // Rectangular: el radio del sistema (0), como los campos
 $lxd-button-border-width: 1px; // Border width
 $lxd-button-border-style: solid; // Border style
-$lxd-button-border-color: rgba(0, 0, 0, 0); // Default border color — overridden by variants
 $lxd-button-justify-content: center; // Justify content
 $lxd-button-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
 $lxd-button-font-size: 1rem; // Font size
@@ -16,7 +15,6 @@ $lxd-button-text-decoration: none; // Text decoration
 $lxd-button-transition-duration: 150ms; // Transition duration
 $lxd-button-transition-easing: ease; // Transition easing
 $lxd-button-disabled-cursor: not-allowed; // Cursor when disabled
-$lxd-button-disabled-bg: #f2f2f2; // Background when disabled — only form button changes bg
 $lxd-button-disabled-color: #4a4a4a; // Text color when disabled — light surface
 $lxd-button-disabled-border: #4a4a4a; // Border color when disabled — light surface, matches text for contrast
 $lxd-button-height: 2.5rem; // Altura fija del botón (talla md): el contenido se centra, no se hace por padding
@@ -64,28 +62,7 @@ $lxd-button-primary-hover-border: #ffcd00; // Hover border color
 $lxd-button-primary-active-bg: #ffcd00; // Active background
 $lxd-button-primary-active-color: #111e30; // Active text color
 $lxd-button-primary-active-border: #ffcd00; // Active border color
-$lxd-button-destructive-border-radius: 0px; // Border radius
-$lxd-button-destructive-border-width: 1px; // Border width
-$lxd-button-destructive-border-style: solid; // Border style
-$lxd-button-destructive-justify-content: center; // Justify content
-$lxd-button-destructive-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
-$lxd-button-destructive-font-size: 1rem; // Font size
-$lxd-button-destructive-font-weight: 300; // Font weight
-$lxd-button-destructive-line-height: 1; // Line height
-$lxd-button-destructive-cursor: pointer; // Cursor
-$lxd-button-destructive-white-space: nowrap; // White space
-$lxd-button-destructive-text-decoration: none; // Text decoration
-$lxd-button-destructive-transition-duration: 150ms; // Transition duration
-$lxd-button-destructive-transition-easing: ease; // Transition easing
-$lxd-button-destructive-disabled-cursor: not-allowed; // Cursor when disabled
-$lxd-button-destructive-disabled-color: #4a4a4a; // Text color when disabled
-$lxd-button-destructive-disabled-border: #4a4a4a; // Border color when disabled
-$lxd-button-destructive-padding-inline: 2rem; // Inline (horizontal) padding
-$lxd-button-destructive-focus-ring-width: 2px; // Focus ring width
-$lxd-button-destructive-focus-ring-style: solid; // Focus ring border style
-$lxd-button-destructive-focus-ring-offset: 0.25rem; // Focus ring offset
 $lxd-button-destructive-focus-ring-color: #b30000; // Focus ring color
-$lxd-button-destructive-bg: #ffffff; // Background
 $lxd-button-destructive-color: #b30000; // Text color
 $lxd-button-destructive-border: #b30000; // Border color
 $lxd-button-destructive-hover-bg: #b30000; // Hover background
@@ -134,17 +111,22 @@ $lxd-button-text-font-weight: 300; // Font weight
 $lxd-button-text-line-height: 1; // Line height
 $lxd-button-text-cursor: pointer; // Cursor
 $lxd-button-text-white-space: nowrap; // White space
-$lxd-button-text-underline-width: 1px; // Grosor de la línea en reposo. La variante `text` se subraya con la misma técnica que `Link` —sombra interior, no `text-decoration`— porque `text-decoration` no cubre un SVG y un botón con icono quedaba con la línea cortada. Apunta al token de `Link` para que las dos piezas no puedan separarse
+$lxd-button-text-underline-width: 1px; // Grosor del subrayado en reposo (`text-decoration-thickness`). La variante `text` se subraya igual que `Link` —`text-decoration` con grosor y distancia de token (D64)—, y apunta a sus tokens para que las dos piezas no puedan separarse. El icono del botón no se subraya
 $lxd-button-text-hover-underline-width: 0px; // Grosor de la línea en hover y en activo — el de `Link`
+$lxd-button-text-decoration-line: underline; // Si se subraya en reposo — el de `Link`
+$lxd-button-text-hover-decoration-line: none; // Si se subraya en hover y en activo — el de `Link`
 $lxd-button-text-ink-color: #111e30; // tone=ink: la tinta de la superficie, como en Link
 $lxd-button-text-ink-underline-width: 1px; // tone=ink: grosor del subrayado en reposo
 $lxd-button-text-ink-hover-underline-width: 0px; // tone=ink: grosor del subrayado en hover
-$lxd-button-text-underline-offset: 0.25rem; // Separación entre el texto y su línea — la de `Link`. Va como `padding-block-end`, así que la línea cae por debajo del icono igual que del texto
+$lxd-button-text-ink-decoration-line: underline; // tone=ink: si se subraya en reposo
+$lxd-button-text-ink-hover-decoration-line: none; // tone=ink: si se subraya en hover
+$lxd-button-text-underline-offset: 0.25rem; // Separación entre el texto y su línea — la de `Link`. Se reserva como `padding-block-end` (la caja mide alto de línea más esta separación) y la línea cae en el borde inferior de ese hueco (`text-underline-offset: calc(<separación> - <grosor>)`)
 $lxd-button-text-transition-duration: 150ms; // Transition duration
 $lxd-button-text-transition-easing: ease; // Transition easing
 $lxd-button-text-disabled-cursor: not-allowed; // Cursor when disabled
 $lxd-button-text-disabled-color: #4a4a4a; // Text color when disabled — light surface
 $lxd-button-text-padding-inline: 0; // Inline (horizontal) padding — 0 para uso inline en texto
+$lxd-button-text-padding-block-start: 0; // Padding superior — 0. Anula el `padding-block` de 1px que el agente de usuario pone a `<button>`: sin él, la variante como botón medía 21px y como enlace (`href`) 20px. La caja es el alto de línea más la separación de la línea (`underline-offset`)
 $lxd-button-text-focus-ring-width: 2px; // Focus ring width
 $lxd-button-text-focus-ring-style: solid; // Focus ring border style
 $lxd-button-text-focus-ring-offset: 1px; // Focus ring offset

package/src/tokens/scss/components/_card.scss

@@ -12,7 +12,7 @@ $lxd-card-header-gap: 0.75rem; // Separación entre el bloque de texto y la acci
 $lxd-card-header-row-gap: 0.25rem; // Separación entre el título y la descripción en la cabecera
 $lxd-card-title-font-weight: 500; // Peso del título de la tarjeta
 $lxd-card-footer-gap: 0.5rem; // Separación entre acciones del pie
-$lxd-card-primary-bg: #baabff; // Variante primary — fondo lavanda. No es `color.primary` (prussian): coincidiría con `color.background.dark` y desaparecería sobre `.surface-dark`. Mismo patrón autocontenido que `button.primary` — un par que no depende de la superficie ambiente, igual en claro y oscuro
+$lxd-card-primary-bg: #baabff; // Variante primary — fondo lavanda. No es `color.primary` (prussian): coincidiría con `color.bg.dark` y desaparecería sobre `.surface-dark`. Mismo patrón autocontenido que `button.primary` — un par que no depende de la superficie ambiente, igual en claro y oscuro
 $lxd-card-primary-color: #111e30; // Variante primary — texto prussian sobre el fondo lavanda
 $lxd-card-accent-1-bg: #baabff; // Variante accent-1 — fondo lavanda
 $lxd-card-accent-1-color: #111e30; // Variante accent-1 — texto. Color saturado que ya contrasta en cualquier superficie: sin par surface-dark, como las variantes semánticas de Alert/Tag

package/src/tokens/scss/components/_checkbox.scss

@@ -9,7 +9,7 @@ $lxd-checkbox-border-width: 1px; // Border width
 $lxd-checkbox-border-style: solid; // Border style
 $lxd-checkbox-border-color: #111e30; // Color del borde
 $lxd-checkbox-bg: transparent; // Fondo sin marcar
-$lxd-checkbox-bg-checked: #111e30; // Fondo cuando está marcado
+$lxd-checkbox-checked-bg: #111e30; // Fondo cuando está marcado
 $lxd-checkbox-check-color: #ffffff; // Color del checkmark
 $lxd-checkbox-cursor: pointer; // Cursor
 $lxd-checkbox-transition-duration: 150ms; // Duración de transiciones
@@ -20,9 +20,13 @@ $lxd-checkbox-focus-ring-color: #111e30; // Color del anillo de foco
 $lxd-checkbox-error-border-color: #b30000; // Borde en error: el color de error (texto/borde, nunca fondo)
 $lxd-checkbox-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado
 $lxd-checkbox-disabled-border-color: #d0d0d0; // Color del borde cuando está deshabilitado
-$lxd-checkbox-disabled-bg-checked: #d0d0d0; // Fondo marcado/indeterminado cuando está deshabilitado
+$lxd-checkbox-checked-disabled-bg: #d0d0d0; // Fondo marcado/indeterminado cuando está deshabilitado
 $lxd-checkbox-check-rotate: 15deg; // Rotación del checkmark en animación de entrada/salida
 $lxd-checkbox-sm-size: 1rem; // Tamaño del checkbox — variante sm (16px)
 $lxd-checkbox-sm-check-size: 0.55rem; // Tamaño del checkmark interior — variante sm
 $lxd-checkbox-lg-size: 1.5rem; // Tamaño del checkbox — variante lg (24px)
 $lxd-checkbox-lg-check-size: 0.85rem; // Tamaño del checkmark interior — variante lg
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-checkbox-bg-checked: $lxd-checkbox-checked-bg; // OBSOLETO (v51, se retira en la v52): usar $lxd-checkbox-checked-bg
+$lxd-checkbox-disabled-bg-checked: $lxd-checkbox-checked-disabled-bg; // OBSOLETO (v51, se retira en la v52): usar $lxd-checkbox-checked-disabled-bg

package/src/tokens/scss/components/_collapsible.scss

@@ -6,6 +6,7 @@ $lxd-collapsible-trigger-padding-block: 0.5rem; // Aire vertical del disparador
 $lxd-collapsible-trigger-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica del disparador
 $lxd-collapsible-trigger-font-size: 1rem; // Tamaño de fuente del disparador
 $lxd-collapsible-trigger-font-weight: 300; // Peso tipográfico del disparador
+$lxd-collapsible-trigger-line-height: 1.5; // Interlineado del disparador: el del texto corriente. Con `all: unset` el botón lo heredaba de su padre; ahora es fijo y no depende de dónde se monte
 $lxd-collapsible-trigger-color: #111e30; // Tinta del disparador
 $lxd-collapsible-trigger-cursor: pointer; // Cursor del disparador
 $lxd-collapsible-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado

package/src/tokens/scss/components/_control.scss

@@ -9,10 +9,6 @@ $lxd-control-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia
 $lxd-control-font-size: 1rem; // Tamaño de fuente
 $lxd-control-font-weight: 300; // Peso tipográfico
 $lxd-control-line-height: 1; // Interlineado
-$lxd-control-cursor: text; // Cursor por defecto
-$lxd-control-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado
-$lxd-control-transition-duration: 150ms; // Duración de la transición
-$lxd-control-transition-easing: ease; // Curva de animación
 $lxd-control-focus-ring-width: 2px; // Grosor del anillo de foco
 $lxd-control-focus-ring-inset-offset: 1px; // Separación entre borde y anillo de foco
 $lxd-control-padding-inline: 1rem; // Padding inline — compartido por controles y elementos de formulario

package/src/tokens/scss/components/_embed-frame.scss

@@ -0,0 +1,9 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-embed-frame-device-mobile-width: 375px; // Ancho del marco con `device="mobile"`: el de un teléfono en vertical, el ancho de referencia contra el que el sistema comprueba que una maqueta cabe. No es un punto de corte —el primero, `breakpoint.sm`, es el teléfono apaisado—: es la pantalla que se simula
+$lxd-embed-frame-device-tablet-width: 768px; // Ancho del marco con `device="tablet"` (768px): la tableta. Apunta al breakpoint porque es justo lo que se simula —el ancho en el que el documento de dentro pasa de una columna a varias—
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-embed-frame-device-mobile-inline-size: $lxd-embed-frame-device-mobile-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-embed-frame-device-mobile-width
+$lxd-embed-frame-device-tablet-inline-size: $lxd-embed-frame-device-tablet-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-embed-frame-device-tablet-width

package/src/tokens/scss/components/_file-upload.scss

@@ -2,9 +2,7 @@
 // Do not edit directly, this file was auto-generated.
 
 $lxd-file-upload-border-color: #111e30; // Borde del dropzone por defecto
-$lxd-file-upload-border-style: dashed; // Estilo de borde del dropzone
 $lxd-file-upload-border-width: 1px; // Grosor del borde
-$lxd-file-upload-border-radius: 0px; // Radio de esquinas del dropzone
 $lxd-file-upload-bg: #f2f2f2; // Fondo del dropzone
 $lxd-file-upload-padding-inline: 1.5rem; // Padding horizontal del dropzone
 $lxd-file-upload-gap: 0.25rem; // Espacio entre elementos dentro del dropzone
@@ -14,10 +12,8 @@ $lxd-file-upload-icon-color: #111e30; // Color del icono upload
 $lxd-file-upload-transition-duration: 150ms; // Duración de transiciones de estado
 $lxd-file-upload-transition-easing: ease; // Easing de transiciones
 $lxd-file-upload-drag-border-color: #111e30; // Borde cuando hay drag activo
-$lxd-file-upload-drag-border-style: solid; // Estilo de borde en drag activo
 $lxd-file-upload-drag-bg: #ffffff; // Fondo en drag activo
 $lxd-file-upload-error-border-color: #b30000; // Borde en estado de error
-$lxd-file-upload-error-border-style: solid; // Estilo de borde en error
 $lxd-file-upload-error-bg: #f2f2f2; // Fondo en estado de error
 $lxd-file-upload-disabled-opacity: 0.5; // Opacidad cuando está deshabilitado
 $lxd-file-upload-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado: el de los campos
@@ -45,7 +41,7 @@ $lxd-file-upload-thumb-border-radius: 0px; // Radio del thumbnail
 $lxd-file-upload-thumb-bg: #f2f2f2; // Fondo del thumb para iconos (no imagen)
 $lxd-file-upload-thumb-icon-color: #6b6b6b; // Color del icono de archivo genérico
 $lxd-file-upload-remove-color: #4a4a4a; // Color del botón eliminar
-$lxd-file-upload-remove-color-hover: #b30000; // Color del botón eliminar al hacer hover
+$lxd-file-upload-remove-hover-color: #b30000; // Color del botón eliminar al hacer hover
 $lxd-file-upload-progress-margin-block-start: 0.75rem; // Margen superior de la barra de progreso
 $lxd-file-upload-padding-block: 3rem; // Aire vertical del dropzone — talla md
 $lxd-file-upload-sm-padding-block: 2rem; // Aire vertical del dropzone — talla sm
@@ -70,3 +66,6 @@ $lxd-file-upload-border-dash-length: 1rem; // Largo de cada trazo del borde disc
 $lxd-file-upload-border-dash-gap: 0.5rem; // Hueco entre trazos del borde discontinuo (antes 10px, fuera de la escala)
 $lxd-file-upload-remove-focus-ring-offset: 1px; // Separación del anillo de foco del aspa
 $lxd-file-upload-remove-border-radius: 0px; // Radio del aspa — recto, como toda esquina del sistema
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-file-upload-remove-color-hover: $lxd-file-upload-remove-hover-color; // OBSOLETO (v51, se retira en la v52): usar $lxd-file-upload-remove-hover-color

package/src/tokens/scss/components/_floating-dock.scss

@@ -10,8 +10,8 @@ $lxd-floating-dock-trigger-icon-size: 24px; // Glifo del lanzador (24px), la tal
 $lxd-floating-dock-badge-offset: 0.25rem; // Distancia del borde del lanzador a la esquina donde se centra el contador
 $lxd-floating-dock-badge-fill: #b30000; // El contador es rojo: el relleno de error del sistema, universal en claro y oscuro
 $lxd-floating-dock-badge-color: #ffffff; // Cifra sobre el relleno
-$lxd-floating-dock-panel-inline-size: 22rem; // Ancho del panel (352px). Medida de layout, como `modal.width-max`: no sale de la escala de espaciado
-$lxd-floating-dock-panel-block-size: 32rem; // Alto del panel (512px). Se recorta contra la ventana: nunca sobrepasa el alto disponible
+$lxd-floating-dock-panel-width: 22rem; // Ancho del panel (352px). Medida de layout, como `modal.max-width`: no sale de la escala de espaciado
+$lxd-floating-dock-panel-height: 32rem; // Alto del panel (512px). Se recorta contra la ventana: nunca sobrepasa el alto disponible
 $lxd-floating-dock-panel-bg: #ffffff; // Fondo del panel
 $lxd-floating-dock-panel-border-width: 1px; // Grosor del borde: es lo que separa el panel del contenido que tiene debajo
 $lxd-floating-dock-panel-border-color: #111e30; // Color del borde
@@ -38,3 +38,7 @@ $lxd-floating-dock-focus-ring-offset: 2px; // Separación del anillo de foco del
 $lxd-floating-dock-focus-ring-color: #111e30; // Color del anillo de foco del panel: la tinta de la superficie
 $lxd-floating-dock-transition-duration: 250ms; // Duración de la entrada y la salida del panel
 $lxd-floating-dock-transition-easing: ease-in-out; // Curva de la entrada y la salida del panel
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-floating-dock-panel-inline-size: $lxd-floating-dock-panel-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-floating-dock-panel-width
+$lxd-floating-dock-panel-block-size: $lxd-floating-dock-panel-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-floating-dock-panel-height

package/src/tokens/scss/components/_label.scss

@@ -9,3 +9,4 @@ $lxd-label-font-weight: 500; // Font weight
 $lxd-label-line-height: 1.5; // Line height
 $lxd-label-color: #111e30; // Text color
 $lxd-label-letter-spacing: 0em; // Letter spacing
+$lxd-label-optional-color: #4a4a4a; // Tinta de la marca « (opcional)» tras la etiqueta de un campo `optional` (D70): la apagada, mismo tamaño que la etiqueta

package/src/tokens/scss/components/_link.scss

@@ -3,9 +3,15 @@
 
 $lxd-link-color: #111e30; // El enlace no tiene color propio: es texto, y lo distingue el subrayado
 $lxd-link-hover-color: #111e30; // Color en hover
-$lxd-link-underline-width: 1px; // El subrayado es una línea bajo el enlace (borde, no text-decoration): cubre texto e icono y se separa del texto. Su grosor
-$lxd-link-hover-underline-width: 0px; // Grosor de la línea en hover (en claro desaparece)
-$lxd-link-underline-offset: 0.25rem; // Separación entre el texto y la línea
+$lxd-link-underline-width: 1px; // Grosor del subrayado (`text-decoration-thickness`). El subrayado es `text-decoration` con grosor y distancia de token (D64): se mantiene en alto contraste, se imprime y lo reconocen las herramientas de accesibilidad. Si se pinta o no lo dice `link.decoration-line`: un grosor 0 no oculta la línea (el navegador pinta como mínimo un píxel de dispositivo)
+$lxd-link-hover-underline-width: 0px; // Grosor del subrayado en hover (en claro no hay línea: la quita `link.hover-decoration-line`)
+$lxd-link-decoration-line: underline; // Si el enlace se subraya en reposo (`text-decoration-line`): `underline` o `none`. En claro, sí
+$lxd-link-hover-decoration-line: none; // Si el enlace se subraya en hover (`text-decoration-line`): en claro la línea desaparece
+$lxd-link-underline-offset: 0.25rem; // Separación entre el texto y la línea. Se reserva como `padding-block-end` (el hueco de la línea: nada se mueve al aparecer) y la línea se coloca con `text-underline-position: under` y `text-underline-offset: calc(<separación> - <grosor>)`, de modo que cae en el borde inferior de ese hueco
+$lxd-link-in-text-underline-width: 1px; // Enlace dentro de texto corrido (párrafo, etiqueta, Prose): línea en reposo, en las DOS superficies. Entre texto, el color no basta para distinguirlo (en oscuro, amarillo sobre blanco da 1,5:1; WCAG 1.4.1 pide 3:1 u otra marca), así que la marca es la línea (D41). Sin par oscuro a propósito
+$lxd-link-in-text-hover-underline-width: 0px; // Enlace dentro de texto corrido: sin línea en hover, en las dos superficies (D41)
+$lxd-link-in-text-decoration-line: underline; // Enlace dentro de texto corrido: subrayado en reposo, en las DOS superficies (D41). Sin par oscuro a propósito
+$lxd-link-in-text-hover-decoration-line: none; // Enlace dentro de texto corrido: sin subrayado en hover, en las dos superficies (D41)
 $lxd-link-icon-gap: 0.5rem; // Aire entre el icono y el texto del enlace
 $lxd-link-cursor: pointer; // Cursor
 $lxd-link-focus-ring-width: 2px; // Grosor del anillo de foco
@@ -14,7 +20,11 @@ $lxd-link-focus-ring-color: #111e30; // Anillo de foco
 $lxd-link-ink-color: #111e30; // Tono ink (enlaces utilitarios: legal, volver): tinta
 $lxd-link-ink-underline-width: 1px; // Tono ink: línea en reposo, en las dos superficies
 $lxd-link-ink-hover-underline-width: 0px; // Tono ink: sin línea en hover
-$lxd-link-accent-1-color: #baabff; // Tono accent-1 (lavanda): color saturado que ya contrasta en cualquier superficie, sin par surface-dark (mismo motivo que Card/Step/ProgressBar)
-$lxd-link-accent-1-hover-color: #baabff; // Tono accent-1: mismo color en hover, como accent — lo que cambia es la línea
-$lxd-link-accent-1-underline-width: 1px; // Tono accent-1: línea en reposo, igual en las dos superficies (el color no cambia)
+$lxd-link-ink-decoration-line: underline; // Tono ink: subrayado en reposo, en las dos superficies
+$lxd-link-ink-hover-decoration-line: none; // Tono ink: sin subrayado en hover
+$lxd-link-accent-1-color: #111e30; // Tono accent-1 (lavanda) en superficie clara: cae al tono por defecto. La lavanda sobre blanco da 2,02:1 (D41): el tono solo se ve en superficie oscura
+$lxd-link-accent-1-hover-color: #111e30; // Tono accent-1 en hover, superficie clara: el del tono por defecto
+$lxd-link-accent-1-underline-width: 1px; // Tono accent-1: línea en reposo, en las dos superficies
 $lxd-link-accent-1-hover-underline-width: 0px; // Tono accent-1: sin línea en hover, como accent
+$lxd-link-accent-1-decoration-line: underline; // Tono accent-1: subrayado en reposo, en las dos superficies
+$lxd-link-accent-1-hover-decoration-line: none; // Tono accent-1: sin subrayado en hover

package/src/tokens/scss/components/_logo.scss

@@ -5,5 +5,8 @@ $lxd-logo-height-sm: 2rem; // Alto del logotipo en barras compactas (Sidebar). E
 $lxd-logo-height-md: 2.5rem; // Alto por defecto: cabeceras y formularios de acceso
 $lxd-logo-height-lg: 3rem; // Alto destacado: pie de página
 $lxd-logo-height-xl: 64px; // Alto de marca: la cabecera del sitio. Es la talla ilustrativa de la escala de iconos (64px), no una talla de control
-$lxd-logo-height-xxl: calc(64px * 4 / 3); // Alto de marca mayor: la cabecera del sitio por defecto. Sigue la progresión de la escala —el mismo salto que hay de lg a xl (4/3)— sobre la talla xl: 85,33px
+$lxd-logo-height-2xl: calc(64px * 4 / 3); // Alto de marca mayor: la cabecera del sitio por defecto. Sigue la progresión de la escala —el mismo salto que hay de lg a xl (4/3)— sobre la talla xl: 85,33px
 $lxd-logo-color: #111e30; // Color del trazado sobre superficie clara
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-logo-height-xxl: $lxd-logo-height-2xl; // OBSOLETO (v51, se retira en la v52): usar $lxd-logo-height-2xl

package/src/tokens/scss/components/_number-badge.scss

@@ -18,9 +18,13 @@ $lxd-number-badge-support-1-bg: #20e38e; // Fondo support-1 (emerald)
 $lxd-number-badge-support-1-color: #111e30; // Texto sobre support-1
 $lxd-number-badge-support-2-bg: #f05e1c; // Fondo support-2 (cayenne)
 $lxd-number-badge-support-2-color: #111e30; // Texto sobre support-2
-$lxd-number-badge-danger-bg: #b30000; // Fondo danger (red)
-$lxd-number-badge-danger-color: #ffffff; // Texto sobre danger
+$lxd-number-badge-error-bg: #b30000; // Fondo error (rojo)
+$lxd-number-badge-error-color: #ffffff; // Texto sobre error
 $lxd-number-badge-success-bg: #006616; // Fondo success (green)
 $lxd-number-badge-success-color: #ffffff; // Texto sobre success
 $lxd-number-badge-neutral-bg: #4a4a4a; // Fondo neutral (dark grey)
 $lxd-number-badge-neutral-color: #ffffff; // Texto sobre neutral
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-number-badge-danger-bg: $lxd-number-badge-error-bg; // OBSOLETO (v51, se retira en la v52): usar $lxd-number-badge-error-bg
+$lxd-number-badge-danger-color: $lxd-number-badge-error-color; // OBSOLETO (v51, se retira en la v52): usar $lxd-number-badge-error-color

package/src/tokens/scss/components/_otp-input.scss

@@ -2,4 +2,7 @@
 // Do not edit directly, this file was auto-generated.
 
 $lxd-otp-input-gap: 0.5rem; // Separación entre celdas del código
-$lxd-otp-input-cell-inline-size: 3.5ch; // Anchura de una celda: medida en caracteres para que el dígito quepa centrado a cualquier talla de texto, sin recortarse con el texto ampliado (WCAG 1.4.4)
+$lxd-otp-input-cell-width: 3.5ch; // Anchura de una celda: medida en caracteres para que el dígito quepa centrado a cualquier talla de texto, sin recortarse con el texto ampliado (WCAG 1.4.4)
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-otp-input-cell-inline-size: $lxd-otp-input-cell-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-otp-input-cell-width