@studiolxd/brand 50.0.0 → 51.0.0

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';

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

@@ -10,7 +10,7 @@ $lxd-async-multi-select-disabled-cursor: not-allowed; // Cursor cuando está des
 $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-inline-size: 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-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
@@ -54,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/_breadcrumb.scss

@@ -10,9 +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-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

@@ -111,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/_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

@@ -41,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
@@ -66,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

package/src/tokens/scss/components/_site-header.scss

@@ -1,7 +1,7 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$lxd-site-header-content-height: calc(64px * 4 / 3); // Lo más alto que lleva la barra: el logotipo a talla xxl (85px)
+$lxd-site-header-content-height: calc(64px * 4 / 3); // Lo más alto que lleva la barra: el logotipo a talla 2xl (85px)
 $lxd-site-header-content-height-compact: 3rem; // Lo más alto que lleva la barra en móvil (por debajo de md): el logotipo a talla lg (48px), para que quepa con los controles
 $lxd-site-header-content-height-narrow: 2.5rem; // Lo más alto que lleva la barra en teléfono (por debajo de sm): el logotipo a talla md (40px), para caber en 360px con idioma y menú
 $lxd-site-header-height-narrow: calc(2.5rem + 2 * 0.5rem); // Alto de la barra en teléfono (56px, la misma que la barra de aplicación)

package/src/tokens/scss/components/_slider.scss

@@ -1,7 +1,7 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$lxd-slider-control-block-size: 1.5rem; // Alto de la zona sensible: la banda es fina, pero el objetivo de pulsación no
+$lxd-slider-control-height: 1.5rem; // Alto de la zona sensible: la banda es fina, pero el objetivo de pulsación no
 $lxd-slider-track-size: 0.25rem; // Grosor del carril
 $lxd-slider-track-bg: #d0d0d0; // Carril sin recorrer
 $lxd-slider-track-border-radius: 0px; // Radio del carril (recto, como el resto del sistema)
@@ -23,3 +23,6 @@ $lxd-slider-transition-easing: ease; // Easing de la transición del pulgar
 $lxd-slider-focus-ring-width: 2px; // Grosor del anillo de foco
 $lxd-slider-focus-ring-offset: 0.25rem; // Separación del anillo de foco
 $lxd-slider-focus-ring-color: #111e30; // Color del anillo de foco
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-slider-control-block-size: $lxd-slider-control-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-slider-control-height

package/src/tokens/scss/components/_spinner.scss

@@ -4,7 +4,7 @@
 $lxd-spinner-size-sm: 1rem; // 16px — compact spinner
 $lxd-spinner-size-md: 1.5rem; // 24px — default spinner
 $lxd-spinner-size-lg: 4rem; // 64px — large spinner
-$lxd-spinner-border-width-sm: 2px; // Grosor del trazo (stroke) para sm
-$lxd-spinner-border-width-md: 2px; // Grosor del trazo (stroke) para md
-$lxd-spinner-border-width-lg: 2px; // Grosor del trazo (stroke) para lg
+$lxd-spinner-border-width-sm: 1px; // Grosor del trazo (stroke) para sm: el rol de todo borde del sistema (1px)
+$lxd-spinner-border-width-md: 1px; // Grosor del trazo (stroke) para md: el rol de todo borde del sistema (1px)
+$lxd-spinner-border-width-lg: 1px; // Grosor del trazo (stroke) para lg: el rol de todo borde del sistema (1px)
 $lxd-spinner-animation-duration: 2000ms; // Un ciclo del bucle: dibujar el contorno (mitad) y desdibujarlo (mitad)

package/src/tokens/scss/components/_step.scss

@@ -23,8 +23,8 @@ $lxd-step-tone-support-1-bg: #20e38e; // Relleno tono support-1 (emerald)
 $lxd-step-tone-support-1-color: #111e30; // Tinta sobre support-1
 $lxd-step-tone-support-2-bg: #f05e1c; // Relleno tono support-2 (cayenne)
 $lxd-step-tone-support-2-color: #111e30; // Tinta sobre support-2
-$lxd-step-tone-danger-bg: #b30000; // Relleno tono danger
-$lxd-step-tone-danger-color: #ffffff; // Tinta sobre danger
+$lxd-step-tone-error-bg: #b30000; // Relleno tono error
+$lxd-step-tone-error-color: #ffffff; // Tinta sobre error
 $lxd-step-tone-success-bg: #006616; // Relleno tono success
 $lxd-step-tone-success-color: #ffffff; // Tinta sobre success
 $lxd-step-tone-neutral-bg: #4a4a4a; // Relleno tono neutral (gris oscuro)
@@ -35,3 +35,7 @@ $lxd-step-connector-done-color: #111e30; // Tramo recorrido (solo Stepper, que t
 $lxd-step-description-color: #4a4a4a; // Línea de detalle bajo una marca: texto secundario. La usan la descripción de Stepper y la de Steps, para que digan lo mismo con el mismo color
 $lxd-step-transition-duration: 150ms; // Duración del cambio de fondo de la marca (un paso que pasa a completado, o vuelve a pendiente)
 $lxd-step-transition-easing: ease; // Curva del cambio de fondo
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-step-tone-danger-bg: $lxd-step-tone-error-bg; // OBSOLETO (v51, se retira en la v52): usar $lxd-step-tone-error-bg
+$lxd-step-tone-danger-color: $lxd-step-tone-error-color; // OBSOLETO (v51, se retira en la v52): usar $lxd-step-tone-error-color

package/src/tokens/scss/components/_switcher.scss

@@ -5,7 +5,7 @@ $lxd-switcher-target-size: 1.5rem; // Área sensible al puntero: 24×24 px como
 $lxd-switcher-track-width: 2.75em; // Ancho del track
 $lxd-switcher-track-height: 1.5em; // Alto del track
 $lxd-switcher-track-bg: #d0d0d0; // Fondo del track — estado off
-$lxd-switcher-track-bg-checked: #111e30; // Fondo del track — estado on
+$lxd-switcher-track-checked-bg: #111e30; // Fondo del track — estado on
 $lxd-switcher-track-border-radius: 9999px; // Radio del track (pill)
 $lxd-switcher-track-padding: 0.1875em; // Padding interior del track — separa el thumb de los bordes
 $lxd-switcher-thumb-size: 1.125em; // Tamaño del thumb (cuadrado)
@@ -25,6 +25,9 @@ $lxd-switcher-error-ring-color: #b30000; // Color del anillo de error
 $lxd-switcher-sm-track-width: 2.25em; // Ancho del track — variante sm
 $lxd-switcher-sm-track-height: 1.25em; // Alto del track — variante sm
 $lxd-switcher-sm-thumb-size: 0.875em; // Tamaño del thumb — variante sm
-$lxd-switcher-lg-track-width: 3rem; // Ancho del track — variante lg (48px, alineado con la talla lg del sistema, size-component.lg). En rem, no en em: como el resto de campos en lg, no se escala además con la fuente del párrafo large del campo
+$lxd-switcher-lg-track-width: 3rem; // Ancho del track — variante lg: la talla lg del sistema (48px). En rem, no en em: como el resto de campos en lg, no se escala además con la fuente del párrafo large del campo
 $lxd-switcher-lg-track-height: 1.625rem; // Alto del track — variante lg. En rem, ver lg-track-width
 $lxd-switcher-lg-thumb-size: 1.25rem; // Tamaño del thumb — variante lg. En rem, ver lg-track-width
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-switcher-track-bg-checked: $lxd-switcher-track-checked-bg; // OBSOLETO (v51, se retira en la v52): usar $lxd-switcher-track-checked-bg

package/src/tokens/scss/components/_tabs.scss

@@ -7,6 +7,7 @@ $lxd-tabs-list-gap: 0.25rem; // Gap entre triggers
 $lxd-tabs-trigger-padding-block: 0.75rem; // Padding vertical del trigger
 $lxd-tabs-trigger-padding-inline: 1rem; // Padding horizontal del trigger
 $lxd-tabs-trigger-font-size: 1rem; // Tamaño de fuente del trigger
+$lxd-tabs-trigger-line-height: 1.15; // Interlineado del trigger (1,15). Es el que el `<button>` heredaba de `normalize.css` sin declararlo; el token lo fija para que no dependa de la hoja de terceros. No hay primitivo de 1,15 en `line-height.*`: es medida propia del componente
 $lxd-tabs-trigger-font-weight: 300; // Peso de fuente por defecto
 $lxd-tabs-trigger-active-weight: 500; // Peso de fuente del tab activo
 $lxd-tabs-trigger-color: #4a4a4a; // Color del trigger inactivo — es texto, nunca grey-dark
@@ -14,8 +15,8 @@ $lxd-tabs-trigger-hover-color: #111e30; // Color del trigger en hover
 $lxd-tabs-trigger-active-color: #111e30; // Color del trigger activo
 $lxd-tabs-trigger-indicator-width: 1px; // Grosor del indicador activo (underline)
 $lxd-tabs-trigger-indicator-color: #111e30; // Color del indicador activo
-$lxd-tabs-trigger-pill-bg-active: #111e30; // Fondo del trigger activo en variante pill
-$lxd-tabs-trigger-pill-color-active: #ffffff; // Texto del trigger activo en variante pill
+$lxd-tabs-trigger-pill-active-bg: #111e30; // Fondo del trigger activo en variante pill
+$lxd-tabs-trigger-pill-active-color: #ffffff; // Texto del trigger activo en variante pill
 $lxd-tabs-trigger-border-radius: 0px; // Radio de borde del trigger (pill + focus ring)
 $lxd-tabs-trigger-disabled-opacity: 0.4; // Opacidad del trigger deshabilitado
 $lxd-tabs-focus-ring-color: #111e30; // Color del anillo de foco
@@ -24,3 +25,7 @@ $lxd-tabs-focus-ring-offset: 1px; // Separación del anillo de foco
 $lxd-tabs-content-padding-block: 1rem; // Padding vertical del panel de contenido
 $lxd-tabs-transition-duration: 150ms; // Duración de la transición de color
 $lxd-tabs-transition-easing: ease-in-out; // Easing de la transición
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-tabs-trigger-pill-bg-active: $lxd-tabs-trigger-pill-active-bg; // OBSOLETO (v51, se retira en la v52): usar $lxd-tabs-trigger-pill-active-bg
+$lxd-tabs-trigger-pill-color-active: $lxd-tabs-trigger-pill-active-color; // OBSOLETO (v51, se retira en la v52): usar $lxd-tabs-trigger-pill-active-color

package/src/tokens/scss/components/_tag.scss

@@ -26,5 +26,9 @@ $lxd-tag-warning-bg: #ffcd00; // Aviso — relleno universal del rol de feedback
 $lxd-tag-warning-color: #111e30; // Aviso — contenido sobre el relleno: el prusia (11,17:1, AAA)
 $lxd-tag-success-bg: #006616; // Éxito — relleno universal del sistema
 $lxd-tag-success-color: #ffffff; // Éxito — contenido sobre el relleno
-$lxd-tag-danger-bg: #b30000; // Peligro — relleno universal del sistema
-$lxd-tag-danger-color: #ffffff; // Peligro — contenido sobre el relleno
+$lxd-tag-error-bg: #b30000; // Error — relleno universal del sistema
+$lxd-tag-error-color: #ffffff; // Error — contenido sobre el relleno
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-tag-danger-bg: $lxd-tag-error-bg; // OBSOLETO (v51, se retira en la v52): usar $lxd-tag-error-bg
+$lxd-tag-danger-color: $lxd-tag-error-color; // OBSOLETO (v51, se retira en la v52): usar $lxd-tag-error-color

package/src/tokens/scss/components/_text-inline.scss

@@ -3,7 +3,8 @@
 
 $lxd-text-inline-emphasis-font-weight: 500; // Peso del énfasis fuerte en línea
 $lxd-text-inline-muted-color: #4a4a4a; // Texto secundario en línea: una aclaración, un metadato
-$lxd-text-inline-destructive-color: #b30000; // Énfasis en línea con intención destructiva: la palabra que dice que algo se pierde. Es tinta sobre la superficie, nunca un relleno
+$lxd-text-inline-error-color: #b30000; // Énfasis en línea de error: un estado que ha fallado («cupón rechazado»). Es tinta sobre la superficie, nunca un relleno
+$lxd-text-inline-destructive-color: #b30000; // Énfasis en línea con intención destructiva: la palabra que avisa de que una acción hace perder algo («esta acción **borra** el curso»). Es tinta sobre la superficie, nunca un relleno
 $lxd-text-inline-success-color: #006616; // Énfasis en línea con intención de logro
 $lxd-text-inline-strikethrough-color: #4a4a4a; // Texto tachado: lo que ya está hecho (un producto en el carrito) o ya no vale. Atenuado como el texto secundario; con un `tone` manda el tono
 $lxd-text-inline-strikethrough-thickness: 1px; // Grosor de la línea del tachado: el de los demás trazos del sistema

package/src/tokens/scss/components/_text.scss

@@ -6,7 +6,7 @@ $lxd-text-font-size: 1rem; // Cuerpo base (16px). Es el cuerpo de la superficie
 $lxd-text-font-weight: 300; // Default font weight
 $lxd-text-line-height: 1.5; // Default line height
 $lxd-text-color: #111e30; // Default text color
-$lxd-text-background: #ffffff; // Fondo del lienzo de página (body)
+$lxd-text-bg: #ffffff; // Fondo del lienzo de página (body)
 $lxd-text-letter-spacing: 0em; // Default letter spacing
 $lxd-text-size-1: 0.875rem; // Paso 1 de la escala de títulos (14px)
 $lxd-text-size-2: 1rem; // Paso 2 de la escala de títulos (16px)
@@ -78,3 +78,6 @@ $lxd-text-list-secondary-color: #4a4a4a; // Color atenuado de la línea secundar
 $lxd-text-list-separator-color: #111e30; // Línea entre filas de una lista con separadores
 $lxd-text-list-separator-thickness: 1px; // Grosor de la línea entre filas
 $lxd-text-list-separator-spacing: 0.5rem; // Aire a cada lado de la línea entre filas
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-text-background: $lxd-text-bg; // OBSOLETO (v51, se retira en la v52): usar $lxd-text-bg

package/src/tokens/scss/components/_typing-indicator.scss

@@ -5,7 +5,10 @@ $lxd-typing-indicator-dot-size: 0.375rem; // Lado de cada punto cuadrado (6px)
 $lxd-typing-indicator-dot-gap: 0.25rem; // Separación entre puntos
 $lxd-typing-indicator-dot-color: #111e30; // Color de los puntos
 $lxd-typing-indicator-dot-opacity-inactive: 0.4; // Opacidad del punto en reposo
-$lxd-typing-indicator-dot-opacity-active: 1; // Opacidad del punto en lo alto del salto
+$lxd-typing-indicator-dot-active-opacity: 1; // Opacidad del punto en lo alto del salto
 $lxd-typing-indicator-dot-rise: 0.25rem; // Cuánto sube el punto en lo alto del salto (4px): una fracción del propio punto, no un desplazamiento de maqueta
 $lxd-typing-indicator-animation-duration: 400ms; // Duración del ciclo de animación
 $lxd-typing-indicator-animation-easing: ease-in-out; // Curva del salto: movimiento
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-typing-indicator-dot-opacity-active: $lxd-typing-indicator-dot-active-opacity; // OBSOLETO (v51, se retira en la v52): usar $lxd-typing-indicator-dot-active-opacity

package/src/tokens/scss/global/_colors.scss

@@ -79,8 +79,8 @@ $lxd-color-text-placeholder-on-light: #4a4a4a; // Placeholder sobre superficie c
 $lxd-color-text-placeholder-on-dark: #d0d0d0; // Placeholder sobre superficie oscura. Mismo gris que el texto secundario
 $lxd-color-text-muted-on-light: #4a4a4a; // Texto secundario: ayudas, etiquetas, metadatos
 $lxd-color-text-muted-on-dark: #d0d0d0; // Muted text on dark backgrounds
-$lxd-color-background-light: #ffffff; // Light surface background
-$lxd-color-background-dark: #111e30; // Dark surface background
+$lxd-color-bg-light: #ffffff; // Light surface background
+$lxd-color-bg-dark: #111e30; // Dark surface background
 $lxd-color-surface-secondary-on-light: #f2f2f2; // Superficie clara secundaria sobre fondo claro: bloque de código, kbd, carril de progreso, pie de tabla
 $lxd-color-surface-secondary-on-dark: #4a4a4a; // Superficie clara secundaria — variante para superficie oscura
 $lxd-color-surface-inverse-on-light: #4a4a4a; // Superficie invertida sobre fondo claro: relleno neutral oscuro (Tag)
@@ -100,3 +100,7 @@ $lxd-color-red: #b30000; // System red — base (AAA sobre blanco; fill universa
 $lxd-color-red-light: #ff8585; // System red light — SOLO texto/icono/borde sobre prussian, nunca como fondo
 $lxd-color-green: #006616; // System green — base (AAA sobre blanco; fill universal de success)
 $lxd-color-green-light: #00cc2c; // System green light — SOLO texto/icono/borde sobre prussian, nunca como fondo
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-color-background-light: $lxd-color-bg-light; // OBSOLETO (v51, se retira en la v52): usar $lxd-color-bg-light
+$lxd-color-background-dark: $lxd-color-bg-dark; // OBSOLETO (v51, se retira en la v52): usar $lxd-color-bg-dark

package/src/tokens/scss/global/_shadow.scss

@@ -2,8 +2,8 @@
 // Do not edit directly, this file was auto-generated.
 
 $lxd-shadow-none: none; // Escala. Valor del rol default
-$lxd-shadow-sm: 0 1px 2px rgba(17,30,48,0.08); // Escala. El sistema no lo usa
-$lxd-shadow-md: 0 2px 8px rgba(17,30,48,0.10); // Escala. El sistema no lo usa
-$lxd-shadow-lg: 0 4px 16px rgba(17,30,48,0.12); // Escala. El sistema no lo usa
-$lxd-shadow-xl: 0 8px 32px rgba(17,30,48,0.16); // Escala. El sistema no lo usa
+$lxd-shadow-sm: 0 1px 2px rgba(17,30,48,0.08); // Escala. El sistema no lo usa. El color es el prusia de la paleta con opacidad 0.08 (sale como rgba(17,30,48,0.08))
+$lxd-shadow-md: 0 2px 8px rgba(17,30,48,0.10); // Escala. El sistema no lo usa. El color es el prusia de la paleta con opacidad 0.10 (sale como rgba(17,30,48,0.10))
+$lxd-shadow-lg: 0 4px 16px rgba(17,30,48,0.12); // Escala. El sistema no lo usa. El color es el prusia de la paleta con opacidad 0.12 (sale como rgba(17,30,48,0.12))
+$lxd-shadow-xl: 0 8px 32px rgba(17,30,48,0.16); // Escala. El sistema no lo usa. El color es el prusia de la paleta con opacidad 0.16 (sale como rgba(17,30,48,0.16))
 $lxd-shadow-default: none; // Rol: ningún elemento del sistema proyecta sombra. La elevación se expresa con borde y con el fondo del panel

package/src/tokens/scss/molecules/_alert.scss

@@ -14,6 +14,7 @@ $lxd-alert-border-color: #ffffff; // Borde por defecto — blanco. Sobre página
 $lxd-alert-title-font-size: 1rem; // El título hereda el cuerpo de la superficie (16px en aplicación, 20px en la pública)
 $lxd-alert-title-font-weight: 500; // Peso del título
 $lxd-alert-title-line-height: 1.3; // Interlineado del título — el de un rótulo corto
+$lxd-alert-title-letter-spacing: -0.02em; // Tracking del título (−0,02em): el de los títulos (`text.h2.letter-spacing`), aunque el título del `Alert` sea un `<p>`. Es el mismo que el del `Toast` (`toast.title-letter-spacing` hereda de aquí), para que los dos avisos pinten el título igual; el token lo fija para que no dependa del elemento
 $lxd-alert-title-color: #ffffff; // Texto blanco sobre el relleno prusia
 $lxd-alert-description-font-size: 1rem; // La descripción hereda el cuerpo de la superficie (16px en aplicación, 20px en la pública)
 $lxd-alert-description-line-height: 1.5; // Interlineado de la descripción — el del cuerpo

package/src/tokens/scss/molecules/_annotation-thread.scss

@@ -26,5 +26,3 @@ $lxd-annotation-thread-body-line-height: 1.5; // Interlineado del cuerpo
 $lxd-annotation-thread-body-color: #111e30; // Tinta del cuerpo
 $lxd-annotation-thread-replies-label-font-size: 0.875rem; // Tamaño del rótulo que cuenta las respuestas
 $lxd-annotation-thread-replies-label-color: #4a4a4a; // Tinta del rótulo que cuenta las respuestas
-$lxd-annotation-thread-acknowledged-opacity: 0.7; // Un hilo atendido da un paso atrás: sigue vivo, pero ya no es lo primero que hay que mirar
-$lxd-annotation-thread-resolved-opacity: 0.4; // Un hilo resuelto se retira: baja de intensidad sin desaparecer

package/src/tokens/scss/molecules/_app-launcher.scss

@@ -33,7 +33,7 @@ $lxd-app-launcher-transition-easing: ease; // Easing de la animación
 $lxd-app-launcher-tile-padding-block: 0.5rem; // Padding vertical de cada tile — el de un ítem de Menu, para que la altura case con las listas de opciones del DS
 $lxd-app-launcher-tile-padding-inline: 1rem; // Padding horizontal de cada tile — el de un ítem de Menu
 $lxd-app-launcher-tile-gap: 0.25rem; // Espacio entre el distintivo y el nombre dentro del tile
-$lxd-app-launcher-tile-badge-block-size: calc(0.875rem * 1 + 2 * 0.25rem); // Alto de la fila del distintivo, que va ENCIMA del nombre. Es la caja de una `Tag` (cuerpo por interlineado más su aire) y se reserva SIEMPRE, lleve distintivo la baldosa o no: de ahí que todos los nombres de la rejilla queden a la misma altura. Sale de los tokens de `Tag`, así que sigue cuadrando si la píldora cambia de talla
+$lxd-app-launcher-tile-badge-height: calc(0.875rem * 1 + 2 * 0.25rem); // Alto de la fila del distintivo, que va ENCIMA del nombre. Es la caja de una `Tag` (cuerpo por interlineado más su aire) y se reserva SIEMPRE, lleve distintivo la baldosa o no: de ahí que todos los nombres de la rejilla queden a la misma altura. Sale de los tokens de `Tag`, así que sigue cuadrando si la píldora cambia de talla
 $lxd-app-launcher-tile-border-radius: 0px; // Radio de cada tile
 $lxd-app-launcher-tile-name-font-size: 0.875rem; // Tamaño de texto del nombre de app
 $lxd-app-launcher-tile-name-font-weight: 300; // Peso del nombre de app
@@ -47,3 +47,6 @@ $lxd-app-launcher-tile-highlighted-bg: #111e30; // Relleno del tile bajo el punt
 $lxd-app-launcher-tile-highlighted-color: #ffffff; // Texto del tile resaltado — el del Menu: nombre e inicial invierten con el relleno
 $lxd-app-launcher-tile-badge-hover-bg: #ffffff; // Fondo de la Tag «nuevo» cuando su tile está resaltado — invertido respecto al tile (`tile-highlighted-color`) para seguir leyéndose como una píldora de contraste sobre el relleno
 $lxd-app-launcher-tile-badge-hover-color: #111e30; // Texto de la Tag «nuevo» cuando su tile está resaltado — el mismo par invertido que `tile-badge-hover-bg`
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-app-launcher-tile-badge-block-size: $lxd-app-launcher-tile-badge-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-app-launcher-tile-badge-height

package/src/tokens/scss/molecules/_calendar-planner.scss

@@ -35,6 +35,7 @@ $lxd-calendar-planner-day-number-radius: 0px; // Radio del badge del número
 $lxd-calendar-planner-day-number-outside-color: #4a4a4a; // Color del número en días fuera del mes — hereda de Calendar
 $lxd-calendar-planner-items-gap: 0.25rem; // Gap entre elementos/tags dentro de la celda
 $lxd-calendar-planner-more-font-size: 0.875rem; // Tamaño del texto '+N más'
+$lxd-calendar-planner-more-line-height: 1; // Interlineado del texto '+N más': una línea justa. No es un control con talla (no tiene alto propio: es un rótulo pulsable dentro de la casilla), así que no bebe de control.line-height. Sin él, el botón heredaba el 1,15 de normalize.css
 $lxd-calendar-planner-more-color: #4a4a4a; // Color del texto '+N más'
 $lxd-calendar-planner-more-hover-color: #111e30; // Color hover del texto '+N más'
 $lxd-calendar-planner-more-focus-ring-color: #111e30; // Color del focus ring del botón '+N más'

package/src/tokens/scss/molecules/_calendar.scss

@@ -20,6 +20,7 @@ $lxd-calendar-weekday-color: #4a4a4a; // Color de las cabeceras de día de seman
 $lxd-calendar-day-size: 2rem; // Tamaño (ancho y alto) de los botones de día — md
 $lxd-calendar-day-font-size: 0.875rem; // Tamaño de fuente de los días
 $lxd-calendar-day-font-weight: 300; // Peso de fuente de los días
+$lxd-calendar-day-line-height: 1; // Interlineado de los días y de los años: el de los controles. Sin él, el botón heredaba el 1,15 de normalize.css
 $lxd-calendar-day-radius: 0px; // Radio de borde de los botones de día
 $lxd-calendar-day-color: #111e30; // Color de texto de los días
 $lxd-calendar-day-bg: rgba(0, 0, 0, 0); // Fondo base de los días
@@ -57,11 +58,16 @@ $lxd-calendar-year-current-font-weight: 500; // Peso del año en curso
 $lxd-calendar-year-selected-bg: #111e30; // Fondo del año de la fecha elegida
 $lxd-calendar-year-selected-color: #ffffff; // Texto del año de la fecha elegida
 $lxd-calendar-year-disabled-color: #6b6b6b; // Color de los años fuera de rango
-$lxd-calendar-year-grid-min-inline-size: calc(7 * 2rem + 6 * 0.25rem); // Ancho mínimo de la rejilla de años — md: el de la semana (siete días y sus seis huecos), para que el panel no encoja al pasar de los días a los años
-$lxd-calendar-sm-year-grid-min-inline-size: calc(7 * 1.5rem + 6 * 0.25rem); // Ancho mínimo de la rejilla de años — sm
-$lxd-calendar-lg-year-grid-min-inline-size: calc(7 * 3rem + 6 * 0.25rem); // Ancho mínimo de la rejilla de años — lg
+$lxd-calendar-year-grid-min-width: calc(7 * 2rem + 6 * 0.25rem); // Ancho mínimo de la rejilla de años — md: el de la semana (siete días y sus seis huecos), para que el panel no encoja al pasar de los días a los años
+$lxd-calendar-sm-year-grid-min-width: calc(7 * 1.5rem + 6 * 0.25rem); // Ancho mínimo de la rejilla de años — sm
+$lxd-calendar-lg-year-grid-min-width: calc(7 * 3rem + 6 * 0.25rem); // Ancho mínimo de la rejilla de años — lg
 $lxd-calendar-sm-year-height: 1.5rem; // Alto de la celda de año — sm
 $lxd-calendar-lg-year-height: 3rem; // Alto de la celda de año — lg
 $lxd-calendar-lg-year-font-size: 1rem; // Cuerpo de letra del año — lg
 $lxd-calendar-hover-line-width: 1px; // Grosor de la línea de hover del día, del año y del título. Nada se rellena bajo el puntero (regla de Colores): lo que se puede pulsar y es texto deja una línea de tinta debajo. Las flechas no la llevan: son un glifo, y la línea del sistema subraya texto
 $lxd-calendar-hover-line-color: #111e30; // Color de la línea de hover — tinta de la superficie
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-calendar-year-grid-min-inline-size: $lxd-calendar-year-grid-min-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-calendar-year-grid-min-width
+$lxd-calendar-sm-year-grid-min-inline-size: $lxd-calendar-sm-year-grid-min-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-calendar-sm-year-grid-min-width
+$lxd-calendar-lg-year-grid-min-inline-size: $lxd-calendar-lg-year-grid-min-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-calendar-lg-year-grid-min-width

package/src/tokens/scss/molecules/_carousel.scss

@@ -5,11 +5,16 @@ $lxd-carousel-gap: 1rem; // Aire entre diapositivas
 $lxd-carousel-slide-size: 100%; // Ancho de una diapositiva (`flex-basis`). Por defecto la pista entera: una diapositiva a la vista. Se sobreescribe con la prop `slideSize`
 $lxd-carousel-controls-gap: 0.5rem; // Aire entre los botones de la barra de control
 $lxd-carousel-controls-space-before: 1rem; // Aire entre la pista y la barra de control
-$lxd-carousel-indicator-inline-size: 2rem; // Largo de la barra indicadora (32px)
-$lxd-carousel-indicator-block-size: 2px; // Grosor de la barra indicadora — el mismo peso que la barra de activo del sistema
-$lxd-carousel-indicator-hit-block-size: 1rem; // Alto del área pulsable del indicador: la barra es fina, el objetivo táctil no
+$lxd-carousel-indicator-width: 2rem; // Largo de la barra indicadora (32px)
+$lxd-carousel-indicator-height: 2px; // Grosor de la barra indicadora — el mismo peso que la barra de activo del sistema
+$lxd-carousel-indicator-hit-height: 1rem; // Alto del área pulsable del indicador: la barra es fina, el objetivo táctil no
 $lxd-carousel-indicator-color: #4a4a4a; // Barra de una diapositiva que no está a la vista
 $lxd-carousel-indicator-current-color: #111e30; // Barra de la diapositiva a la vista. Es una barra de tinta, no un relleno: la posición no es un estado que se pinte de marca
 $lxd-carousel-focus-ring-color: #111e30; // Color del anillo de foco de los indicadores
 $lxd-carousel-focus-ring-width: 2px; // Grosor del anillo de foco
 $lxd-carousel-focus-ring-offset: 1px; // Separación del anillo de foco
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-carousel-indicator-inline-size: $lxd-carousel-indicator-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-carousel-indicator-width
+$lxd-carousel-indicator-block-size: $lxd-carousel-indicator-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-carousel-indicator-height
+$lxd-carousel-indicator-hit-block-size: $lxd-carousel-indicator-hit-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-carousel-indicator-hit-height

package/src/tokens/scss/molecules/_chart.scss

@@ -46,7 +46,7 @@ $lxd-chart-funnel-gap: 0.25rem; // 4px — hueco de superficie entre tramos del
 $lxd-chart-treemap-gap: 2px; // 2px — hueco entre baldosas del treemap
 $lxd-chart-radial-bar-gap: 0.25rem; // 4px — hueco entre anillos de la barra radial
 $lxd-chart-radial-track-color: #6b6b6b; // Carril del anillo sin recorrer en la barra radial: es la geometría de referencia del dato, como el eje, así que lleva su misma tinta (≥3:1 contra la superficie, WCAG 1.4.11)
-$lxd-chart-dot-size: 0.75rem; // 10px de diámetro nominal — punto de la nube de dispersión, mayor que el marcador de línea porque aquí el punto es la marca, no un remate
+$lxd-chart-dot-size: 10px; // 10px de diámetro — medida propia del componente (no hay peldaño de 10 en `spacing.*`). Punto de la nube de dispersión, mayor que el marcador de línea porque aquí el punto es la marca, no un remate
 $lxd-chart-radar-fill-opacity: 0.15; // El polígono del radar es un velo del tono de la serie, como el área
 $lxd-chart-tile-label-color: #ffffff; // Rótulo sobre una baldosa del treemap cuando el relleno lo elige el producto (`color`/`colors`): va encima del relleno de la serie, no de la superficie, y con un color desconocido el sistema no puede elegir la tinta
 $lxd-chart-tile-label-color-1: #000000; // Rótulo sobre la baldosa de la ranura 1. La tinta se elige por ranura: ninguna de las dos (blanco o negro) llega a 4.5:1 sobre las ocho series, así que cada una lleva la que cumple. Negro, no prusia: el prusia es un casi-negro entintado y se queda corto sobre el azul de la ranura 1