@studiolxd/brand 50.0.0 → 51.0.1

package/src/tokens/components/otp-input.css

@@ -3,6 +3,6 @@
  */
 
 :root {
-  --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) */
+  --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) */
   --otp-input-gap: var(--spacing-2); /** Separación entre celdas del código */
 }

package/src/tokens/components/select.css

@@ -48,11 +48,11 @@
 [data-theme="dark"],
 html.dark {
   --select-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
-  --select-bg: var(--color-background-dark); /** Fondo del trigger — surface-dark */
+  --select-bg: var(--color-bg-dark); /** Fondo del trigger — surface-dark */
   --select-color: var(--color-text-on-dark); /** Color del texto — surface-dark */
   --select-border-color: var(--color-text-on-dark); /** Color del borde — surface-dark */
   --select-focus-ring-color: var(--color-text-on-dark); /** Color del anillo de foco — surface-dark */
-  --select-content-bg: var(--color-background-dark); /** Fondo del dropdown — surface-dark */
+  --select-content-bg: var(--color-bg-dark); /** Fondo del dropdown — surface-dark */
   --select-content-border-color: var(--color-text-on-dark); /** Borde del dropdown — surface-dark */
   --select-separator-color: var(--color-text-on-dark); /** Color del separador entre grupos — surface-dark */
   --select-item-highlighted-bg: var(--color-text-on-dark); /** Relleno de la opción resaltada — surface-dark: la misma inversión de marca, al revés */

package/src/tokens/components/sidebar.css

@@ -19,7 +19,7 @@
   --sidebar-group-padding-block: var(--spacing-2); /** Aire vertical de una sección del panel */
   --sidebar-group-gap: var(--spacing-1); /** Entre elementos de una sección */
   --sidebar-rail-width: calc(2 * var(--app-header-padding-inline) + var(--size-component-md)); /** Ancho del rail (72px): inset simétrico `1rem` (16px) a los dos lados — el izquierdo alinea el centro del icono con el centro del `MenuButton` del header — + caja de icono `2.5rem` (40px). Ver `rail-padding-inline-start` */
-  --sidebar-bg: var(--color-background-light); /** Fondo */
+  --sidebar-bg: var(--color-bg-light); /** Fondo */
   --sidebar-border-width: var(--border-width-default); /** Borde que separa la sidebar del contenido */
   --sidebar-border-color: var(--color-primary); /** Color del borde */
   --sidebar-rail-padding-inline-start: var(--app-header-padding-inline); /** Inset del rail (16px), igual a `--app-header-padding-inline`, a AMBOS lados (simétrico): alinea el centro del icono del rail con el centro del `MenuButton` del header (x=36px) y evita el aire desigual de una columna estrecha. Desacoplado del padding de desplegada (`padding-inline`) para no romper su alineación, ya correcta por composición de otros tokens */
@@ -35,7 +35,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --sidebar-bg: var(--color-background-dark); /** Fondo — surface-dark */
+  --sidebar-bg: var(--color-bg-dark); /** Fondo — surface-dark */
   --sidebar-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
   --sidebar-separator-color: var(--color-text-on-dark); /** Línea — surface-dark */
   --sidebar-resizer-hover-color: var(--color-text-on-dark); /** Asa de redimensionado bajo el puntero — surface-dark */

package/src/tokens/components/site-header.css

@@ -13,11 +13,11 @@
   --site-header-settings-gap: var(--spacing-5); /** Separación entre los ajustes del sitio: en fila en escritorio, apilados en móvil */
   --site-header-content-height-compact: var(--logo-height-lg); /** 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 */
   --site-header-content-height-narrow: var(--logo-height-md); /** 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ú */
-  --site-header-bg: var(--color-background-light); /** Fondo de la barra */
+  --site-header-bg: var(--color-bg-light); /** Fondo de la barra */
   --site-header-z-index: var(--app-header-z-index); /** Capa z — sobre el contenido, bajo los paneles flotantes */
-  --site-header-panel-bg: var(--color-background-light); /** Fondo del panel de navegación */
+  --site-header-panel-bg: var(--color-bg-light); /** Fondo del panel de navegación */
   --site-header-panel-padding-block: var(--section-padding-block-xl); /** Aire superior del panel, entre la barra y el índice */
-  --site-header-content-height: var(--logo-height-xxl); /** Lo más alto que lleva la barra: el logotipo a talla xxl (85px) */
+  --site-header-content-height: var(--logo-height-2xl); /** Lo más alto que lleva la barra: el logotipo a talla 2xl (85px) */
   --site-header-height-narrow: calc(var(--site-header-content-height-narrow) + 2 * var(--app-header-padding-block)); /** Alto de la barra en teléfono (56px, la misma que la barra de aplicación) */
   --site-header-height-compact: calc(var(--site-header-content-height-compact) + 2 * var(--app-header-padding-block)); /** Alto de la barra en móvil (64px) */
   --site-header-logo-margin-inline-start: calc(-1 * var(--container-padding-inline)); /** La marca sale del aire lateral del Container: el logotipo trae su propio espacio de seguridad en el trazado, y con el padding encima se veía descolgado del borde del contenido */
@@ -29,6 +29,6 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --site-header-bg: var(--color-background-dark); /** Fondo de la barra — surface-dark */
-  --site-header-panel-bg: var(--color-background-dark); /** Fondo del panel — surface-dark */
+  --site-header-bg: var(--color-bg-dark); /** Fondo de la barra — surface-dark */
+  --site-header-panel-bg: var(--color-bg-dark); /** Fondo del panel — surface-dark */
 }

package/src/tokens/components/slider.css

@@ -5,7 +5,7 @@
 :root {
   --slider-cursor: pointer; /** Cursor sobre la banda */
   --slider-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
-  --slider-control-block-size: var(--spacing-5); /** Alto de la zona sensible: la banda es fina, pero el objetivo de pulsación no */
+  --slider-control-height: var(--spacing-5); /** Alto de la zona sensible: la banda es fina, pero el objetivo de pulsación no */
   --slider-track-size: var(--spacing-1); /** Grosor del carril */
   --slider-thumb-size: var(--icon-size-sm); /** Lado del pulgar (cuadrado, como el resto de formas del sistema) */
   --slider-value-gap: var(--spacing-3); /** Separación entre la banda y el valor */

package/src/tokens/components/spinner.css

@@ -3,11 +3,11 @@
  */
 
 :root {
-  --spinner-border-width-sm: 2px; /** Grosor del trazo (stroke) para sm */
-  --spinner-border-width-md: 2px; /** Grosor del trazo (stroke) para md */
-  --spinner-border-width-lg: 2px; /** Grosor del trazo (stroke) para lg */
   --spinner-animation-duration: 2000ms; /** Un ciclo del bucle: dibujar el contorno (mitad) y desdibujarlo (mitad) */
   --spinner-size-sm: var(--spacing-4); /** 16px — compact spinner */
   --spinner-size-md: var(--spacing-5); /** 24px — default spinner */
   --spinner-size-lg: var(--spacing-8); /** 64px — large spinner */
+  --spinner-border-width-sm: var(--border-width-default); /** Grosor del trazo (stroke) para sm: el rol de todo borde del sistema (1px) */
+  --spinner-border-width-md: var(--border-width-default); /** Grosor del trazo (stroke) para md: el rol de todo borde del sistema (1px) */
+  --spinner-border-width-lg: var(--border-width-default); /** Grosor del trazo (stroke) para lg: el rol de todo borde del sistema (1px) */
 }

package/src/tokens/components/step.css

@@ -14,7 +14,7 @@
   --step-border-radius: var(--border-radius-default); /** Marca cuadrada, el radio del sistema — no `round`: la marca de un paso es identidad de marca, no un avatar ni una píldora */
   --step-border-width: var(--border-width-default); /** Filete de la marca hueca (estado `pending`). Todo borde del sistema mide lo mismo */
   --step-font-weight: var(--font-weight-default); /** Peso de la cifra: dentro de una marca rellena de otro color el peso no señala nada — el estado ya lo dicen el relleno y el filete */
-  --step-pending-bg: var(--color-background-light); /** Fondo de una marca hueca (`pending`): el lienzo de la página. Tiene que tapar el carril igual que una marca rellena — transparente, la línea lo cruzaría por la mitad */
+  --step-pending-bg: var(--color-bg-light); /** Fondo de una marca hueca (`pending`): el lienzo de la página. Tiene que tapar el carril igual que una marca rellena — transparente, la línea lo cruzaría por la mitad */
   --step-pending-border-color: var(--color-border-default-on-light); /** Filete de una marca hueca: el borde general del sistema */
   --step-pending-color: var(--color-text-muted-on-light); /** Cifra de una marca hueca: texto secundario */
   --step-tone-primary-bg: var(--color-primary); /** Relleno tono primary: la marca del sistema */
@@ -27,8 +27,8 @@
   --step-tone-support-1-color: var(--color-text-on-light); /** Tinta sobre support-1 */
   --step-tone-support-2-bg: var(--color-support-2); /** Relleno tono support-2 (cayenne) */
   --step-tone-support-2-color: var(--color-text-on-light); /** Tinta sobre support-2 */
-  --step-tone-danger-bg: var(--color-error-fill); /** Relleno tono danger */
-  --step-tone-danger-color: var(--color-error-fill-text); /** Tinta sobre danger */
+  --step-tone-error-bg: var(--color-error-fill); /** Relleno tono error */
+  --step-tone-error-color: var(--color-error-fill-text); /** Tinta sobre error */
   --step-tone-success-bg: var(--color-success-fill); /** Relleno tono success */
   --step-tone-success-color: var(--color-success-fill-text); /** Tinta sobre success */
   --step-tone-neutral-bg: var(--color-surface-inverse-on-light); /** Relleno tono neutral (gris oscuro) */
@@ -43,7 +43,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --step-pending-bg: var(--color-background-dark); /** Fondo de la marca hueca — surface-dark */
+  --step-pending-bg: var(--color-bg-dark); /** Fondo de la marca hueca — surface-dark */
   --step-pending-border-color: var(--color-text-on-dark); /** Filete de la marca hueca — surface-dark */
   --step-pending-color: var(--color-text-muted-on-dark); /** Cifra de la marca hueca — surface-dark */
   --step-tone-primary-bg: var(--color-accent-2); /** Relleno primary — surface-dark. El prusia es el lienzo; se aparta de la derivación (lavanda, el par de Button primary) a propósito, en amarillo, para que el progreso no se confunda con una acción — decisión heredada de Stepper */

package/src/tokens/components/switcher.css

@@ -12,7 +12,6 @@
   --switcher-sm-track-width: 2.25em; /** Ancho del track — variante sm */
   --switcher-sm-track-height: 1.25em; /** Alto del track — variante sm */
   --switcher-sm-thumb-size: 0.875em; /** Tamaño del thumb — variante sm */
-  --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 */
   --switcher-lg-track-height: 1.625rem; /** Alto del track — variante lg. En rem, ver lg-track-width */
   --switcher-lg-thumb-size: 1.25rem; /** Tamaño del thumb — variante lg. En rem, ver lg-track-width */
   --switcher-target-size: var(--size-target-min); /** Área sensible al puntero: 24×24 px como pide WCAG 2.5.8, aunque el track (sm) sea menor en bloque. Se extiende de forma invisible y centrada, sin mover la maqueta */
@@ -20,8 +19,9 @@
   --switcher-disabled-opacity: var(--opacity-disabled); /** Opacidad cuando está deshabilitado */
   --switcher-transition-duration: var(--motion-duration-fast); /** Duración de la transición */
   --switcher-transition-easing: var(--motion-easing-default); /** Easing de la transición */
+  --switcher-lg-track-width: var(--size-component-lg); /** 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 */
   --switcher-track-bg: var(--color-border-default-on-light); /** Fondo del track — estado off */
-  --switcher-track-bg-checked: var(--color-primary); /** Fondo del track — estado on */
+  --switcher-track-checked-bg: var(--color-primary); /** Fondo del track — estado on */
   --switcher-track-border-radius: var(--border-radius-round); /** Radio del track (pill) */
   --switcher-thumb-border-radius: var(--border-radius-round); /** Radio del thumb (circular) */
   --switcher-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
@@ -37,7 +37,7 @@
 [data-theme="dark"],
 html.dark {
   --switcher-error-ring-color: var(--color-error-text-on-dark); /** Anillo de error — surface-dark */
-  --switcher-track-bg-checked: var(--color-accent-1); /** Fondo del track (on) — surface-dark. `track-bg-checked` (prussian) coincide con el fondo de la superficie y quedaría invisible; se usa accent-1 en su lugar. */
+  --switcher-track-checked-bg: var(--color-accent-1); /** Fondo del track (on) — surface-dark. `track-checked-bg` (prussian) coincide con el fondo de la superficie y quedaría invisible; se usa accent-1 en su lugar. */
   --switcher-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark. `focus-ring-color` (prussian) sería invisible sobre fondo oscuro. */
   --switcher-track-bg: var(--color-text-on-dark); /** Fondo del track (off) — surface-dark. `track-bg` es un rol de borde (`color.border.default-on-light`) y la regla de derivación le da `color.text.on-dark`, igual que el carril sin recorrer del Slider. */
   --switcher-thumb-bg: var(--color-primary); /** Color del thumb — surface-dark. El thumb blanco desaparecería sobre el track claro del estado off; en prusia contrasta con los dos tracks oscuros (blanco en off, lavanda en on), como el pulgar lavanda del Slider sobre su carril blanco. */

package/src/tokens/components/tabs.css

@@ -3,11 +3,12 @@
  */
 
 :root {
+  --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 */
   --tabs-list-gap: var(--spacing-1); /** Gap entre triggers */
   --tabs-trigger-padding-block: var(--spacing-3); /** Padding vertical del trigger */
   --tabs-trigger-padding-inline: var(--spacing-4); /** Padding horizontal del trigger */
   --tabs-trigger-font-size: var(--font-size-2); /** Tamaño de fuente del trigger */
-  --tabs-trigger-pill-color-active: var(--color-white); /** Texto del trigger activo en variante pill */
+  --tabs-trigger-pill-active-color: var(--color-white); /** Texto del trigger activo en variante pill */
   --tabs-trigger-disabled-opacity: var(--opacity-disabled); /** Opacidad del trigger deshabilitado */
   --tabs-content-padding-block: var(--spacing-4); /** Padding vertical del panel de contenido */
   --tabs-transition-duration: var(--motion-duration-fast); /** Duración de la transición de color */
@@ -21,7 +22,7 @@
   --tabs-trigger-active-color: var(--color-text-on-light); /** Color del trigger activo */
   --tabs-trigger-indicator-width: var(--border-width-default); /** Grosor del indicador activo (underline) */
   --tabs-trigger-indicator-color: var(--color-primary); /** Color del indicador activo */
-  --tabs-trigger-pill-bg-active: var(--color-primary); /** Fondo del trigger activo en variante pill */
+  --tabs-trigger-pill-active-bg: var(--color-primary); /** Fondo del trigger activo en variante pill */
   --tabs-trigger-border-radius: var(--border-radius-default); /** Radio de borde del trigger (pill + focus ring) */
   --tabs-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
   --tabs-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
@@ -36,8 +37,8 @@ html.dark {
   --tabs-trigger-color: var(--color-text-muted-on-dark); /** Color del trigger inactivo — surface-dark */
   --tabs-trigger-hover-color: var(--color-text-on-dark); /** Color hover del trigger — surface-dark */
   --tabs-trigger-active-color: var(--color-text-on-dark); /** Color del trigger activo — surface-dark */
-  --tabs-trigger-pill-bg-active: var(--color-accent-1); /** Fondo del trigger activo, variante pill — surface-dark. `color.primary` coincide con el lienzo oscuro; toma el par de `Button primary` (lavanda con tinta prusia), la regla de derivación del sistema. Antes se invertía a blanco, que es el par de los componentes en los que `accent-1` ya es otra variante — no es el caso de Tabs */
-  --tabs-trigger-pill-color-active: var(--color-primary); /** Texto del trigger activo, variante pill — surface-dark */
+  --tabs-trigger-pill-active-bg: var(--color-accent-1); /** Fondo del trigger activo, variante pill — surface-dark. `color.primary` coincide con el lienzo oscuro; toma el par de `Button primary` (lavanda con tinta prusia), la regla de derivación del sistema. Antes se invertía a blanco, que es el par de los componentes en los que `accent-1` ya es otra variante — no es el caso de Tabs */
+  --tabs-trigger-pill-active-color: var(--color-primary); /** Texto del trigger activo, variante pill — surface-dark */
   --tabs-trigger-indicator-color: var(--color-text-on-dark); /** Indicador de pestaña activa (underline) — surface-dark: color.primary colisiona con el fondo */
   --tabs-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
 }

package/src/tokens/components/tag.css

@@ -27,8 +27,8 @@
   --tag-warning-bg: var(--color-warning-fill); /** Aviso — relleno universal del rol de feedback. Es el amarillo de siempre, pero llega por el rol, no por la marca */
   --tag-success-bg: var(--color-success-fill); /** Éxito — relleno universal del sistema */
   --tag-success-color: var(--color-success-fill-text); /** Éxito — contenido sobre el relleno */
-  --tag-danger-bg: var(--color-error-fill); /** Peligro — relleno universal del sistema */
-  --tag-danger-color: var(--color-error-fill-text); /** Peligro — contenido sobre el relleno */
+  --tag-error-bg: var(--color-error-fill); /** Error — relleno universal del sistema */
+  --tag-error-color: var(--color-error-fill-text); /** Error — contenido sobre el relleno */
   --tag-warning-color: var(--color-warning-fill-text); /** Aviso — contenido sobre el relleno: el prusia (11,17:1, AAA) */
 }
 
@@ -37,7 +37,7 @@
 [data-theme="dark"],
 html.dark {
   --tag-primary-bg: var(--color-text-on-dark); /** Marca primaria, relleno — surface-dark (invertido: el prusia es el fondo de la superficie y el tag desaparecería) */
-  --tag-primary-color: var(--color-background-dark); /** Marca primaria, texto — surface-dark (invertido) */
+  --tag-primary-color: var(--color-bg-dark); /** Marca primaria, texto — surface-dark (invertido) */
   --tag-info-bg: var(--color-text-on-dark); /** Información, relleno — surface-dark (invertido, misma razón que primary) */
-  --tag-info-color: var(--color-background-dark); /** Información, texto — surface-dark (invertido) */
+  --tag-info-color: var(--color-bg-dark); /** Información, texto — surface-dark (invertido) */
 }

package/src/tokens/components/text-inline.css

@@ -5,7 +5,8 @@
 :root {
   --text-inline-emphasis-font-weight: var(--font-weight-emphasis); /** Peso del énfasis fuerte en línea */
   --text-inline-muted-color: var(--color-text-muted-on-light); /** Texto secundario en línea: una aclaración, un metadato */
-  --text-inline-destructive-color: var(--color-destructive-text-on-light); /** Énfasis en línea con intención destructiva: la palabra que dice que algo se pierde. Es tinta sobre la superficie, nunca un relleno */
+  --text-inline-error-color: var(--color-error-text-on-light); /** Énfasis en línea de error: un estado que ha fallado («cupón rechazado»). Es tinta sobre la superficie, nunca un relleno */
+  --text-inline-destructive-color: var(--color-destructive-text-on-light); /** É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 */
   --text-inline-success-color: var(--color-success-text-on-light); /** Énfasis en línea con intención de logro */
   --text-inline-strikethrough-color: var(--color-text-muted-on-light); /** 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 */
   --text-inline-strikethrough-thickness: var(--border-width-default); /** Grosor de la línea del tachado: el de los demás trazos del sistema */
@@ -17,6 +18,7 @@
 html.dark {
   --text-inline-strikethrough-color: var(--color-text-muted-on-dark); /** Texto tachado — surface-dark */
   --text-inline-muted-color: var(--color-text-muted-on-dark); /** Texto secundario en línea — surface-dark */
+  --text-inline-error-color: var(--color-error-text-on-dark); /** Énfasis de error — surface-dark */
   --text-inline-destructive-color: var(--color-destructive-text-on-dark); /** Énfasis destructivo — surface-dark */
   --text-inline-success-color: var(--color-success-text-on-dark); /** Énfasis de logro — surface-dark */
 }

package/src/tokens/components/text.css

@@ -37,7 +37,7 @@
   --text-list-item-gap: var(--spacing-3); /** Aire entre el contenido de una fila y su accesorio final (trailing) (12px) */
   --text-font-weight: var(--font-weight-default); /** Default font weight */
   --text-color: var(--color-text-on-light); /** Default text color */
-  --text-background: var(--color-background-light); /** Fondo del lienzo de página (body) */
+  --text-bg: var(--color-bg-light); /** Fondo del lienzo de página (body) */
   --text-heading-font-weight: var(--font-weight-emphasis); /** Heading font weight */
   --text-heading-color: var(--color-text-on-light); /** Heading color */
   --text-h1-font-family: var(--text-heading-font-family); /** H1 font family */
@@ -87,7 +87,7 @@
 [data-theme="dark"],
 html.dark {
   --text-color: var(--color-text-on-dark); /** Color de texto por defecto — surface-dark */
-  --text-background: var(--color-background-dark); /** Fondo del lienzo de página — surface-dark */
+  --text-bg: var(--color-bg-dark); /** Fondo del lienzo de página — surface-dark */
   --text-h1-color: var(--color-text-on-dark); /** H1 color — surface-dark */
   --text-h2-color: var(--color-text-on-dark); /** H2 color — surface-dark */
   --text-h3-color: var(--color-text-on-dark); /** H3 color — surface-dark */

package/src/tokens/components/textarea.css

@@ -60,7 +60,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --textarea-bg: var(--color-background-dark); /** Background — surface-dark */
+  --textarea-bg: var(--color-bg-dark); /** Background — surface-dark */
   --textarea-color: var(--color-text-on-dark); /** Text color — surface-dark */
   --textarea-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
   --textarea-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder — surface-dark: blanco */
@@ -71,7 +71,7 @@ html.dark {
   --textarea-disabled-bg: var(--color-disabled-bg-on-dark); /** Fondo deshabilitado — surface-dark */
   --textarea-disabled-color: var(--color-disabled-text-on-dark); /** Texto deshabilitado — surface-dark */
   --textarea-disabled-border-color: var(--color-disabled-border-on-dark); /** Borde deshabilitado — surface-dark */
-  --textarea-error-bg: var(--color-background-dark); /** Fondo en error — surface-dark (el del lienzo, no blanco) */
+  --textarea-error-bg: var(--color-bg-dark); /** Fondo en error — surface-dark (el del lienzo, no blanco) */
   --textarea-error-color: var(--color-text-on-dark); /** Texto en error — surface-dark */
   --textarea-error-placeholder-color: var(--color-text-placeholder-on-dark); /** Placeholder en error — surface-dark */
   --textarea-error-focus-border-color: var(--color-error-text-on-dark); /** Borde en foco+error — surface-dark */

package/src/tokens/components/tooltip.css

@@ -10,7 +10,7 @@
   --tooltip-font-size: var(--font-size-1); /** Tamaño de texto del bocadillo */
   --tooltip-line-height: var(--line-height-snug); /** Interlineado del bocadillo */
   --tooltip-offset: var(--spacing-1); /** Separación entre disparador y bocadillo (4px). Fuente del sideOffset por defecto */
-  --tooltip-bg: var(--color-background-dark); /** Fondo del bocadillo — superficie invertida para máximo contraste */
+  --tooltip-bg: var(--color-bg-dark); /** Fondo del bocadillo — superficie invertida para máximo contraste */
   --tooltip-color: var(--color-text-on-dark); /** Color del texto del bocadillo */
   --tooltip-border-radius: var(--border-radius-default); /** Radio de esquinas del bocadillo */
   --tooltip-z-index: var(--floating-panel-z-index); /** Capa z — la misma que el resto de paneles flotantes */
@@ -22,6 +22,6 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --tooltip-bg: var(--color-background-light); /** Fondo del bocadillo — surface-dark. Mismo patrón de superficie invertida que en claro (ahí: fondo `background.dark`), pero simétrico para lienzo oscuro: fondo claro, texto oscuro. Sin acento de marca */
+  --tooltip-bg: var(--color-bg-light); /** Fondo del bocadillo — surface-dark. Mismo patrón de superficie invertida que en claro (ahí: fondo `background.dark`), pero simétrico para lienzo oscuro: fondo claro, texto oscuro. Sin acento de marca */
   --tooltip-color: var(--color-text-on-light); /** Texto del bocadillo — surface-dark, el par del fondo claro */
 }

package/src/tokens/components/typing-indicator.css

@@ -7,7 +7,7 @@
   --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 */
   --typing-indicator-dot-gap: var(--spacing-1); /** Separación entre puntos */
   --typing-indicator-dot-opacity-inactive: var(--opacity-disabled); /** Opacidad del punto en reposo */
-  --typing-indicator-dot-opacity-active: var(--opacity-full); /** Opacidad del punto en lo alto del salto */
+  --typing-indicator-dot-active-opacity: var(--opacity-full); /** Opacidad del punto en lo alto del salto */
   --typing-indicator-animation-duration: var(--motion-duration-slow); /** Duración del ciclo de animación */
   --typing-indicator-animation-easing: var(--motion-easing-in-out); /** Curva del salto: movimiento */
   --typing-indicator-dot-color: var(--color-text-on-light); /** Color de los puntos */

package/src/tokens/deprecated-aliases.css

@@ -0,0 +1,74 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * OBSOLETOS (v51): los nombres de token anteriores a la convención D9
+ * (`<componente>-<parte>-<estado>-<propiedad>-<talla>`). Cada uno lee el valor
+ * de su nombre nuevo; sobrescribirlo NO cambia el componente, que lee el nuevo.
+ * Se retiran en la v52.
+ */
+
+:root,
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark,
+.surface-light,
+.site-shell {
+  --color-background-light: var(--color-bg-light); /* obsoleto: usar --color-bg-light */
+  --color-background-dark: var(--color-bg-dark); /* obsoleto: usar --color-bg-dark */
+  --accordion-index-min-inline-size: var(--accordion-index-min-width); /* obsoleto: usar --accordion-index-min-width */
+  --app-launcher-tile-badge-block-size: var(--app-launcher-tile-badge-height); /* obsoleto: usar --app-launcher-tile-badge-height */
+  --async-multi-select-input-min-inline-size: var(--async-multi-select-input-min-width); /* obsoleto: usar --async-multi-select-input-min-width */
+  --breadcrumb-link-color-hover: var(--breadcrumb-link-hover-color); /* obsoleto: usar --breadcrumb-link-hover-color */
+  --checkbox-bg-checked: var(--checkbox-checked-bg); /* obsoleto: usar --checkbox-checked-bg */
+  --checkbox-disabled-bg-checked: var(--checkbox-checked-disabled-bg); /* obsoleto: usar --checkbox-checked-disabled-bg */
+  --embed-frame-device-mobile-inline-size: var(--embed-frame-device-mobile-width); /* obsoleto: usar --embed-frame-device-mobile-width */
+  --embed-frame-device-tablet-inline-size: var(--embed-frame-device-tablet-width); /* obsoleto: usar --embed-frame-device-tablet-width */
+  --file-upload-remove-color-hover: var(--file-upload-remove-hover-color); /* obsoleto: usar --file-upload-remove-hover-color */
+  --floating-dock-panel-inline-size: var(--floating-dock-panel-width); /* obsoleto: usar --floating-dock-panel-width */
+  --floating-dock-panel-block-size: var(--floating-dock-panel-height); /* obsoleto: usar --floating-dock-panel-height */
+  --loading-state-min-block-size: var(--loading-state-min-height); /* obsoleto: usar --loading-state-min-height */
+  --loading-state-sm-min-block-size: var(--loading-state-sm-min-height); /* obsoleto: usar --loading-state-sm-min-height */
+  --logo-height-xxl: var(--logo-height-2xl); /* obsoleto: usar --logo-height-2xl */
+  --modal-width-max: var(--modal-max-width); /* obsoleto: usar --modal-max-width */
+  --modal-inline-size: var(--modal-width); /* obsoleto: usar --modal-width */
+  --number-badge-danger-bg: var(--number-badge-error-bg); /* obsoleto: usar --number-badge-error-bg */
+  --number-badge-danger-color: var(--number-badge-error-color); /* obsoleto: usar --number-badge-error-color */
+  --otp-input-cell-inline-size: var(--otp-input-cell-width); /* obsoleto: usar --otp-input-cell-width */
+  --password-field-toggle-color-hover: var(--password-field-toggle-hover-color); /* obsoleto: usar --password-field-toggle-hover-color */
+  --slider-control-block-size: var(--slider-control-height); /* obsoleto: usar --slider-control-height */
+  --step-tone-danger-bg: var(--step-tone-error-bg); /* obsoleto: usar --step-tone-error-bg */
+  --step-tone-danger-color: var(--step-tone-error-color); /* obsoleto: usar --step-tone-error-color */
+  --switcher-track-bg-checked: var(--switcher-track-checked-bg); /* obsoleto: usar --switcher-track-checked-bg */
+  --table-actions-inline-size: var(--table-actions-width); /* obsoleto: usar --table-actions-width */
+  --tabs-trigger-pill-bg-active: var(--tabs-trigger-pill-active-bg); /* obsoleto: usar --tabs-trigger-pill-active-bg */
+  --tabs-trigger-pill-color-active: var(--tabs-trigger-pill-active-color); /* obsoleto: usar --tabs-trigger-pill-active-color */
+  --tag-danger-bg: var(--tag-error-bg); /* obsoleto: usar --tag-error-bg */
+  --tag-danger-color: var(--tag-error-color); /* obsoleto: usar --tag-error-color */
+  --text-background: var(--text-bg); /* obsoleto: usar --text-bg */
+  --typing-indicator-dot-opacity-active: var(--typing-indicator-dot-active-opacity); /* obsoleto: usar --typing-indicator-dot-active-opacity */
+  --calendar-year-grid-min-inline-size: var(--calendar-year-grid-min-width); /* obsoleto: usar --calendar-year-grid-min-width */
+  --calendar-sm-year-grid-min-inline-size: var(--calendar-sm-year-grid-min-width); /* obsoleto: usar --calendar-sm-year-grid-min-width */
+  --calendar-lg-year-grid-min-inline-size: var(--calendar-lg-year-grid-min-width); /* obsoleto: usar --calendar-lg-year-grid-min-width */
+  --carousel-indicator-inline-size: var(--carousel-indicator-width); /* obsoleto: usar --carousel-indicator-width */
+  --carousel-indicator-block-size: var(--carousel-indicator-height); /* obsoleto: usar --carousel-indicator-height */
+  --carousel-indicator-hit-block-size: var(--carousel-indicator-hit-height); /* obsoleto: usar --carousel-indicator-hit-height */
+  --color-picker-panel-inline-size: var(--color-picker-panel-width); /* obsoleto: usar --color-picker-panel-width */
+  --color-picker-area-block-size: var(--color-picker-area-height); /* obsoleto: usar --color-picker-area-height */
+  --consent-banner-max-inline-size: var(--consent-banner-max-width); /* obsoleto: usar --consent-banner-max-width */
+  --date-picker-inline-size: var(--date-picker-width); /* obsoleto: usar --date-picker-width */
+  --docs-search-results-max-block-size: var(--docs-search-results-max-height); /* obsoleto: usar --docs-search-results-max-height */
+  --filter-bar-control-block-size: var(--filter-bar-control-height); /* obsoleto: usar --filter-bar-control-height */
+  --notification-panel-inline-size: var(--notification-panel-width); /* obsoleto: usar --notification-panel-width */
+  --notification-panel-list-max-block-size: var(--notification-panel-list-max-height); /* obsoleto: usar --notification-panel-list-max-height */
+  --search-form-inline-size: var(--search-form-width); /* obsoleto: usar --search-form-width */
+  --sheet-inline-size: var(--sheet-width); /* obsoleto: usar --sheet-width */
+  --sheet-block-size: var(--sheet-height); /* obsoleto: usar --sheet-height */
+  --table-of-contents-sticky-max-block-size: var(--table-of-contents-sticky-max-height); /* obsoleto: usar --table-of-contents-sticky-max-height */
+  --org-chart-viewport-block-size: var(--org-chart-viewport-height); /* obsoleto: usar --org-chart-viewport-height */
+  --org-chart-card-inline-size: var(--org-chart-card-width); /* obsoleto: usar --org-chart-card-width */
+  --site-search-inline-size: var(--site-search-width); /* obsoleto: usar --site-search-width */
+  --site-search-ghost-section-inline-size: var(--site-search-ghost-section-width); /* obsoleto: usar --site-search-ghost-section-width */
+  --site-search-ghost-title-inline-size: var(--site-search-ghost-title-width); /* obsoleto: usar --site-search-ghost-title-width */
+  --site-search-ghost-url-inline-size: var(--site-search-ghost-url-width); /* obsoleto: usar --site-search-ghost-url-width */
+}

package/src/tokens/global/colors.css

@@ -84,8 +84,8 @@
   --color-text-placeholder-on-dark: var(--color-grey-light); /** Placeholder sobre superficie oscura. Mismo gris que el texto secundario */
   --color-text-muted-on-light: var(--color-grey-darkest); /** Texto secundario: ayudas, etiquetas, metadatos */
   --color-text-muted-on-dark: var(--color-grey-light); /** Muted text on dark backgrounds */
-  --color-background-light: var(--color-white); /** Light surface background */
-  --color-background-dark: var(--color-prussian); /** Dark surface background */
+  --color-bg-light: var(--color-white); /** Light surface background */
+  --color-bg-dark: var(--color-prussian); /** Dark surface background */
   --color-surface-secondary-on-light: var(--color-grey-lightest); /** Superficie clara secundaria sobre fondo claro: bloque de código, kbd, carril de progreso, pie de tabla */
   --color-surface-secondary-on-dark: var(--color-grey-darkest); /** Superficie clara secundaria — variante para superficie oscura */
   --color-surface-inverse-on-light: var(--color-grey-darkest); /** Superficie invertida sobre fondo claro: relleno neutral oscuro (Tag) */

package/src/tokens/global/shadow.css

@@ -4,9 +4,9 @@
 
 :root {
   --shadow-none: none; /** Escala. Valor del rol default */
-  --shadow-sm: 0 1px 2px rgba(17,30,48,0.08); /** Escala. El sistema no lo usa */
-  --shadow-md: 0 2px 8px rgba(17,30,48,0.10); /** Escala. El sistema no lo usa */
-  --shadow-lg: 0 4px 16px rgba(17,30,48,0.12); /** Escala. El sistema no lo usa */
-  --shadow-xl: 0 8px 32px rgba(17,30,48,0.16); /** Escala. El sistema no lo usa */
+  --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)) */
+  --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)) */
+  --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)) */
+  --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)) */
   --shadow-default: var(--shadow-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/index.css

@@ -35,6 +35,7 @@
 @import "./components/radio.css";
 @import "./components/menu-button.css";
 @import "./components/close-button.css";
+@import "./components/embed-frame.css";
 @import "./components/logo.css";
 @import "./components/logomark.css";
 @import "./components/app-header.css";
@@ -190,3 +191,8 @@
 /* Remapeo de la superficie pública (`.site-shell`) — va al final: los tokens
    que redefine tienen la misma especificidad que los `:root` de arriba. */
 @import "./surface-public.css";
+
+/* Alias obsoletos de la v51 (D9): los nombres de token anteriores a la
+   convención de nombres, cada uno leyendo su nombre nuevo. Generado; se retira
+   en la v52. */
+@import "./deprecated-aliases.css";

package/src/tokens/molecules/alert.css

@@ -32,6 +32,7 @@
   --alert-error-description-color: var(--color-error-fill-text); /** Descripción blanca sobre fondo error */
   --alert-warning-bg: var(--color-warning-fill); /** Fondo warning — el relleno del rol de aviso. Es el amarillo de siempre, pero la procedencia es el rol de feedback, no la marca */
   --alert-warning-border-color: var(--color-warning-fill); /** Borde igual al fondo warning */
+  --alert-title-letter-spacing: var(--text-h2-letter-spacing); /** 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 */
   --alert-warning-title-color: var(--color-warning-fill-text); /** Título prusia sobre fondo warning (11,17:1, AAA) */
   --alert-warning-description-color: var(--color-warning-fill-text); /** Descripción prusia sobre fondo warning */
   --alert-warning-close-color: var(--color-warning-fill-text); /** Aspa y su anillo de foco sobre el relleno de aviso. Es el único relleno claro del componente, así que el aspa no puede tomar la tinta ambiente: con `[data-theme="dark"]` en la raíz saldría blanca sobre amarillo (1,50:1). Va fijada a la tinta del rol, que es universal */

package/src/tokens/molecules/annotation-thread.css

@@ -12,8 +12,6 @@
   --annotation-thread-item-gap: var(--spacing-2); /** Separación entre la cabecera, el cuerpo y las acciones de una anotación */
   --annotation-thread-items-gap: var(--spacing-4); /** Separación entre anotaciones */
   --annotation-thread-header-gap: var(--spacing-2); /** Separación entre autor, fecha y marca de editada */
-  --annotation-thread-acknowledged-opacity: var(--opacity-muted); /** Un hilo atendido da un paso atrás: sigue vivo, pero ya no es lo primero que hay que mirar */
-  --annotation-thread-resolved-opacity: var(--opacity-disabled); /** Un hilo resuelto se retira: baja de intensidad sin desaparecer */
   --annotation-thread-border-width: var(--border-width-default); /** Grosor del borde del hilo */
   --annotation-thread-border-color: var(--color-border-default-on-light); /** Borde del hilo */
   --annotation-thread-reply-guide-width: var(--border-width-default); /** Grosor de la guía que acompaña a las respuestas */

package/src/tokens/molecules/app-launcher.css

@@ -28,7 +28,7 @@
   --app-launcher-transition-easing: var(--floating-panel-transition-easing); /** Easing de la animación */
   --app-launcher-tile-padding-block: var(--menu-item-padding-block); /** Padding vertical de cada tile — el de un ítem de Menu, para que la altura case con las listas de opciones del DS */
   --app-launcher-tile-padding-inline: var(--menu-item-padding-inline); /** Padding horizontal de cada tile — el de un ítem de Menu */
-  --app-launcher-tile-badge-block-size: calc(var(--tag-font-size) * var(--tag-line-height) + 2 * var(--tag-padding-block)); /** 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 */
+  --app-launcher-tile-badge-height: calc(var(--tag-font-size) * var(--tag-line-height) + 2 * var(--tag-padding-block)); /** 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 */
   --app-launcher-tile-border-radius: var(--border-radius-default); /** Radio de cada tile */
   --app-launcher-tile-name-font-weight: var(--font-weight-default); /** Peso del nombre de app */
   --app-launcher-tile-name-line-height: var(--menu-item-line-height); /** Interlineado del nombre de app — el de un ítem de Menu, para que la altura case con las listas de opciones del DS */

package/src/tokens/molecules/calendar-planner.css

@@ -17,6 +17,7 @@
   --calendar-planner-day-number-size: var(--spacing-5); /** Tamaño (ancho y alto) del badge con el número */
   --calendar-planner-items-gap: var(--spacing-1); /** Gap entre elementos/tags dentro de la celda */
   --calendar-planner-more-font-size: var(--font-size-1); /** Tamaño del texto '+N más' */
+  --calendar-planner-more-line-height: var(--line-height-none); /** 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 */
   --calendar-planner-weekday-gap: var(--spacing-1); /** Aire entre el nombre del día y su número en la cabecera de la vista de semana */
   --calendar-planner-event-time-font-size: var(--font-size-1); /** Tamaño de la hora del evento en la vista de semana */
   --calendar-planner-gap: var(--calendar-gap); /** Gap entre cabecera y cuadrícula — hereda de Calendar */
@@ -67,7 +68,7 @@ html.dark {
   --calendar-planner-cell-outside-bg: var(--color-surface-secondary-on-dark); /** Fondo de celdas fuera de mes — surface-dark */
   --calendar-planner-cell-focus-ring-color: var(--color-text-on-dark); /** Focus ring de la celda — surface-dark */
   --calendar-planner-cell-today-number-bg: var(--color-text-on-dark); /** Fondo del número de hoy — surface-dark */
-  --calendar-planner-cell-today-number-color: var(--color-background-dark); /** Texto del número de hoy — surface-dark */
+  --calendar-planner-cell-today-number-color: var(--color-bg-dark); /** Texto del número de hoy — surface-dark */
   --calendar-planner-day-number-color: var(--color-text-on-dark); /** Color del número de día — surface-dark */
   --calendar-planner-day-number-outside-color: var(--color-text-muted-on-dark); /** Número fuera de mes — surface-dark */
   --calendar-planner-more-color: var(--color-text-muted-on-dark); /** Texto '+N más' — surface-dark */

package/src/tokens/molecules/calendar-roster.css

@@ -29,16 +29,16 @@
   --calendar-roster-border-width: var(--border-width-default); /** Grosor de los bordes del grid */
   --calendar-roster-th-name-font-weight: var(--font-weight-emphasis); /** Peso del encabezado de nombre */
   --calendar-roster-th-name-color: var(--color-text-muted-on-light); /** Color del encabezado de nombre */
-  --calendar-roster-th-name-bg: var(--color-background-light); /** Fondo sticky de la columna de nombre */
+  --calendar-roster-th-name-bg: var(--color-bg-light); /** Fondo sticky de la columna de nombre */
   --calendar-roster-th-day-color: var(--color-text-on-light); /** Color del encabezado de día */
-  --calendar-roster-th-day-bg: var(--color-background-light); /** Fondo del encabezado de día */
-  --calendar-roster-th-day-today-color: var(--color-background-light); /** Texto del encabezado del día de hoy */
+  --calendar-roster-th-day-bg: var(--color-bg-light); /** Fondo del encabezado de día */
+  --calendar-roster-th-day-today-color: var(--color-bg-light); /** Texto del encabezado del día de hoy */
   --calendar-roster-th-day-today-bg: var(--color-primary); /** Fondo del encabezado del día de hoy */
   --calendar-roster-th-day-today-radius: var(--border-radius-default); /** Radio del badge del día de hoy */
   --calendar-roster-td-name-color: var(--color-text-on-light); /** Color del nombre del empleado */
   --calendar-roster-td-name-font-weight: var(--font-weight-default); /** Peso del nombre del empleado (la celda es th: el agente de usuario la pondría en negrita) */
-  --calendar-roster-td-name-bg: var(--color-background-light); /** Fondo sticky de la celda de nombre */
-  --calendar-roster-cell-bg: var(--color-background-light); /** Fondo de celdas de día laborable */
+  --calendar-roster-td-name-bg: var(--color-bg-light); /** Fondo sticky de la celda de nombre */
+  --calendar-roster-cell-bg: var(--color-bg-light); /** Fondo de celdas de día laborable */
   --calendar-roster-cell-weekend-bg: var(--color-surface-secondary-on-light); /** Fondo de celdas de fin de semana — superficie secundaria, la misma para todo día no laborable: lo que los distingue es el chip, no el gris */
   --calendar-roster-cell-holiday-bg: var(--color-surface-secondary-on-light); /** Fondo de celdas festivas — misma superficie secundaria; el festivo se nombra con su chip */
   --calendar-roster-cell-non-working-bg: var(--color-surface-secondary-on-light); /** Fondo de celdas no laborables (laborable sin turno asignado) */
@@ -57,13 +57,13 @@
 html.dark {
   --calendar-roster-cell-bg: rgba(0, 0, 0, 0); /** Fondo de celdas — surface-dark */
   --calendar-roster-border-color: var(--color-text-on-dark); /** Color de bordes del grid — surface-dark */
-  --calendar-roster-th-name-bg: var(--color-background-dark); /** Fondo columna de nombre — surface-dark */
+  --calendar-roster-th-name-bg: var(--color-bg-dark); /** Fondo columna de nombre — surface-dark */
   --calendar-roster-th-name-color: var(--color-text-muted-on-dark); /** Color columna de nombre — surface-dark */
   --calendar-roster-th-day-color: var(--color-text-on-dark); /** Color encabezado de día — surface-dark */
-  --calendar-roster-th-day-bg: var(--color-background-dark); /** Fondo encabezado de día — surface-dark */
+  --calendar-roster-th-day-bg: var(--color-bg-dark); /** Fondo encabezado de día — surface-dark */
   --calendar-roster-th-day-today-bg: var(--color-text-on-dark); /** Fondo del día de hoy — surface-dark */
-  --calendar-roster-th-day-today-color: var(--color-background-dark); /** Texto del día de hoy — surface-dark */
-  --calendar-roster-td-name-bg: var(--color-background-dark); /** Fondo celda de nombre — surface-dark */
+  --calendar-roster-th-day-today-color: var(--color-bg-dark); /** Texto del día de hoy — surface-dark */
+  --calendar-roster-td-name-bg: var(--color-bg-dark); /** Fondo celda de nombre — surface-dark */
   --calendar-roster-td-name-color: var(--color-text-on-dark); /** Color celda de nombre — surface-dark */
   --calendar-roster-cell-weekend-bg: var(--color-surface-secondary-on-dark); /** Fondo fin de semana — surface-dark */
   --calendar-roster-cell-holiday-bg: var(--color-surface-secondary-on-dark); /** Fondo festivo — surface-dark */

package/src/tokens/molecules/calendar.css

@@ -37,6 +37,7 @@
   --calendar-title-color: var(--color-text-on-light); /** Color del título del mes */
   --calendar-weekday-color: var(--color-text-muted-on-light); /** Color de las cabeceras de día de semana */
   --calendar-day-font-weight: var(--font-weight-default); /** Peso de fuente de los días */
+  --calendar-day-line-height: var(--control-line-height); /** 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 */
   --calendar-day-radius: var(--border-radius-default); /** Radio de borde de los botones de día */
   --calendar-day-color: var(--color-text-on-light); /** Color de texto de los días */
   --calendar-day-focus-ring-color: var(--color-primary); /** Color del focus ring de los días */
@@ -53,9 +54,9 @@
   --calendar-year-height: var(--calendar-day-size); /** Alto de la celda de año — md: el del día, para que la vista de años no cambie la altura del panel */
   --calendar-year-padding-inline: var(--calendar-grid-gap); /** Aire a los lados de la celda de año: el año lleva cuatro cifras y no cabe en el cuadrado del día */
   --calendar-year-font-size: var(--calendar-day-font-size); /** Cuerpo de letra del año */
-  --calendar-year-grid-min-inline-size: calc(7 * var(--calendar-day-size) + 6 * var(--calendar-grid-gap)); /** 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 */
-  --calendar-sm-year-grid-min-inline-size: calc(7 * var(--calendar-sm-day-size) + 6 * var(--calendar-grid-gap)); /** Ancho mínimo de la rejilla de años — sm */
-  --calendar-lg-year-grid-min-inline-size: calc(7 * var(--calendar-lg-day-size) + 6 * var(--calendar-grid-gap)); /** Ancho mínimo de la rejilla de años — lg */
+  --calendar-year-grid-min-width: calc(7 * var(--calendar-day-size) + 6 * var(--calendar-grid-gap)); /** 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 */
+  --calendar-sm-year-grid-min-width: calc(7 * var(--calendar-sm-day-size) + 6 * var(--calendar-grid-gap)); /** Ancho mínimo de la rejilla de años — sm */
+  --calendar-lg-year-grid-min-width: calc(7 * var(--calendar-lg-day-size) + 6 * var(--calendar-grid-gap)); /** Ancho mínimo de la rejilla de años — lg */
   --calendar-sm-year-height: var(--calendar-sm-day-size); /** Alto de la celda de año — sm */
   --calendar-lg-year-height: var(--calendar-lg-day-size); /** Alto de la celda de año — lg */
   --calendar-lg-year-font-size: var(--calendar-lg-day-font-size); /** Cuerpo de letra del año — lg */
@@ -83,7 +84,7 @@ html.dark {
   --calendar-today-color: var(--color-text-on-dark); /** Color del día de hoy — surface-dark */
   --calendar-today-marker-color: var(--color-text-on-dark); /** Marcador del día de hoy — surface-dark */
   --calendar-selected-bg: var(--color-text-on-dark); /** Fondo del día seleccionado — surface-dark */
-  --calendar-selected-color: var(--color-background-dark); /** Texto del día seleccionado — surface-dark */
+  --calendar-selected-color: var(--color-bg-dark); /** Texto del día seleccionado — surface-dark */
   --calendar-outside-color: var(--color-text-muted-on-dark); /** Días fuera de mes — surface-dark */
   --calendar-disabled-color: var(--color-text-muted-on-dark); /** Días deshabilitados — surface-dark */
   --calendar-hover-line-color: var(--color-text-on-dark); /** Color de la línea de hover — surface-dark */

package/src/tokens/molecules/carousel.css

@@ -7,9 +7,9 @@
   --carousel-gap: var(--spacing-4); /** Aire entre diapositivas */
   --carousel-controls-gap: var(--spacing-2); /** Aire entre los botones de la barra de control */
   --carousel-controls-space-before: var(--spacing-4); /** Aire entre la pista y la barra de control */
-  --carousel-indicator-inline-size: var(--spacing-6); /** Largo de la barra indicadora (32px) */
-  --carousel-indicator-hit-block-size: var(--spacing-4); /** Alto del área pulsable del indicador: la barra es fina, el objetivo táctil no */
-  --carousel-indicator-block-size: var(--border-width-focus); /** Grosor de la barra indicadora — el mismo peso que la barra de activo del sistema */
+  --carousel-indicator-width: var(--spacing-6); /** Largo de la barra indicadora (32px) */
+  --carousel-indicator-hit-height: var(--spacing-4); /** Alto del área pulsable del indicador: la barra es fina, el objetivo táctil no */
+  --carousel-indicator-height: var(--border-width-focus); /** Grosor de la barra indicadora — el mismo peso que la barra de activo del sistema */
   --carousel-indicator-color: var(--color-text-muted-on-light); /** Barra de una diapositiva que no está a la vista */
   --carousel-indicator-current-color: var(--color-text-on-light); /** 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 */
   --carousel-focus-ring-color: var(--color-primary); /** Color del anillo de foco de los indicadores */