@studiolxd/brand 49.28.0 → 51.0.0

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";
@@ -169,6 +170,7 @@
 @import "./molecules/org-chart.css";
 @import "./molecules/site-search.css";
 @import "./molecules/copy-button.css";
+@import "./molecules/floating-toolbar.css";
 @import "./molecules/confirm-dialog.css";
 @import "./molecules/avatar-upload.css";
 @import "./molecules/recovery-codes.css";
@@ -180,15 +182,17 @@
 @import "./surface-dark-derived.css";
 
 /* Superficie invertida dentro de una oscura: devuelve a claro los tokens que el
-   modo oscuro voltea. Va después del bloque de arriba, aunque gane por
-   especificidad, para que se lea en el orden en que actúa. */
+   modo oscuro voltea. En el mismo bloque va la superficie siempre clara
+   (`.surface-light`, el interior del amarillo del aviso), que necesita los
+   mismos tokens con los mismos valores. Va después del bloque de arriba, aunque
+   gane por especificidad, para que se lea en el orden en que actúa. */
 @import "./surface-invert.css";
 
-/* Superficie siempre clara: el contrapunto de `.surface-dark`, para el interior
-   de un relleno claro universal (el amarillo del aviso). Solo actúa dentro de
-   una superficie oscura, que es donde hay algo que devolver a claro. */
-@import "./surface-light.css";
-
 /* 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/async-multi-select-field.css

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

package/src/tokens/molecules/async-select-field.css

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

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

@@ -4,13 +4,8 @@
 
 :root {
   --autocomplete-field-gap: var(--async-select-field-gap); /** Espacio entre label, control, helper y error */
-  --autocomplete-field-error-font-family: var(--async-select-field-error-font-family); /** Font family del mensaje de error */
-  --autocomplete-field-error-line-height: var(--async-select-field-error-line-height); /** Line height del mensaje de error */
   --autocomplete-field-helper-font-family: var(--async-select-field-helper-font-family); /** Font family del texto de ayuda */
   --autocomplete-field-helper-line-height: var(--async-select-field-helper-line-height); /** Line height del texto de ayuda */
-  --autocomplete-field-error-font-size: var(--async-select-field-error-font-size); /** Font size del mensaje de error */
-  --autocomplete-field-error-font-weight: var(--async-select-field-error-font-weight); /** Font weight del mensaje de error */
-  --autocomplete-field-error-color: var(--async-select-field-error-color); /** Color del mensaje de error */
   --autocomplete-field-helper-font-size: var(--async-select-field-helper-font-size); /** Font size del texto de ayuda */
   --autocomplete-field-helper-font-weight: var(--async-select-field-helper-font-weight); /** Font weight del texto de ayuda */
   --autocomplete-field-helper-color: var(--async-select-field-helper-color); /** Color del texto de ayuda */

package/src/tokens/molecules/avatar-upload.css

@@ -15,14 +15,9 @@
   --avatar-upload-overlay-icon-color: var(--color-text-on-dark); /** Icono de subida sobre el velo — tinta sobre oscuro */
   --avatar-upload-hint-font-family: var(--form-helper-font-family); /** Tipografía de la pista de arrastre — la del texto de ayuda de los campos */
   --avatar-upload-hint-line-height: var(--form-helper-line-height); /** Interlineado de la pista de arrastre — el del texto de ayuda de los campos */
-  --avatar-upload-error-font-family: var(--form-error-font-family); /** Tipografía del mensaje de error — la de los campos */
-  --avatar-upload-error-line-height: var(--form-error-line-height); /** Interlineado del mensaje de error — el de los campos */
   --avatar-upload-hint-font-size: var(--form-helper-font-size); /** Cuerpo de la pista de arrastre — el del texto de ayuda de los campos */
   --avatar-upload-hint-font-weight: var(--form-helper-font-weight); /** Peso de la pista de arrastre — el del texto de ayuda de los campos */
   --avatar-upload-hint-color: var(--form-helper-color); /** Color de la pista de arrastre — el del texto de ayuda de los campos */
-  --avatar-upload-error-font-size: var(--form-error-font-size); /** Cuerpo del mensaje de error — el de los campos */
-  --avatar-upload-error-font-weight: var(--form-error-font-weight); /** Peso del mensaje de error — el de los campos */
-  --avatar-upload-error-color: var(--form-error-color); /** Color del mensaje de error — el de los campos */
 }
 
 .surface-dark,
@@ -30,6 +25,5 @@
 [data-theme="dark"],
 html.dark {
   --avatar-upload-hint-color: var(--color-text-on-dark); /** Color de la pista de arrastre — surface-dark */
-  --avatar-upload-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
   --avatar-upload-ring-color: var(--color-text-on-dark); /** Anillo de la diana — surface-dark: la tinta de la superficie, como el borde del FileUpload */
 }

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

@@ -5,6 +5,7 @@
 :root {
   --calendar-roster-th-name-width: 10rem; /** Ancho de la columna de nombre */
   --calendar-roster-th-day-width: 2.5rem; /** Ancho mínimo de cada columna de día */
+  --calendar-roster-th-day-line-height: 1.2; /** Interlineado del número de día. 1.2 no está en la escala `line-height` (entre `tight` 1.1 y `snug` 1.3): se conserva el valor de siempre */
   --calendar-roster-font-family: var(--font-family-sans); /** Familia tipográfica base */
   --calendar-roster-th-name-font-size: var(--font-size-1); /** Tamaño del encabezado de nombre */
   --calendar-roster-th-name-padding-block: var(--spacing-2); /** Padding vertical del encabezado de nombre */
@@ -28,20 +29,23 @@
   --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) */
   --calendar-roster-cell-today-outline-width: var(--border-width-focus); /** Grosor del recuadro de la columna de hoy */
+  --calendar-roster-focus-ring-color: var(--color-primary); /** Anillo de foco del cuadrante cuando desborda y entra en el tabulador */
+  --calendar-roster-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --calendar-roster-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
   --calendar-roster-schedule-color: var(--color-text-on-light); /** Color del texto de horario */
   --calendar-roster-legend-color: var(--color-text-muted-on-light); /** Color del texto de la leyenda */
   --calendar-roster-legend-swatch-radius: var(--border-radius-default); /** Radio del cuadradito de color */
@@ -53,17 +57,18 @@
 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 */
   --calendar-roster-cell-non-working-bg: var(--color-surface-secondary-on-dark); /** Fondo no laborable — surface-dark */
   --calendar-roster-schedule-color: var(--color-text-muted-on-dark); /** Color del texto de horario — surface-dark */
   --calendar-roster-legend-color: var(--color-text-muted-on-dark); /** Color de la leyenda — surface-dark */
+  --calendar-roster-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — 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 */

package/src/tokens/molecules/chart.css

@@ -7,8 +7,8 @@
   --chart-bar-radius: 0.25rem; /** 4px — extremo de dato redondeado; el extremo de la línea base queda recto */
   --chart-area-fill-opacity: 0.1; /** El área es un velo del tono de la serie, nunca un bloque saturado */
   --chart-donut-thickness: 0.55; /** Fracción del radio que ocupa el anillo del donut */
+  --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 */
   --chart-radar-fill-opacity: 0.15; /** El polígono del radar es un velo del tono de la serie, como el área */
-  --chart-height: 16rem; /** 256px — alto por defecto del área de dibujo. La banda del eje X va aparte: el contenedor crece con ella y nunca aparece un scroll anidado */
   --chart-hover-opacity: 0.75; /** Atenuación de las marcas que no son la activa mientras el puntero está encima */
   --chart-series-1: var(--color-chart-series-1); /** Ranura categórica 1. El orden de las ranuras es el mecanismo de seguridad para daltonismo: se asignan en orden, nunca se ciclan */
   --chart-series-2: var(--color-chart-series-2); /** Ranura categórica 2 */
@@ -37,7 +37,6 @@
   --chart-marker-size: var(--spacing-2); /** 8px de diámetro — punto de serie y marcador de extremo */
   --chart-funnel-gap: var(--spacing-1); /** 4px — hueco de superficie entre tramos del embudo */
   --chart-radial-bar-gap: var(--spacing-1); /** 4px — hueco entre anillos de la barra radial */
-  --chart-dot-size: var(--spacing-3); /** 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 */
   --chart-tile-label-color-1: var(--color-black); /** 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 */
   --chart-tile-label-color-2: var(--color-black); /** Rótulo sobre la baldosa de la ranura 2 */
   --chart-tile-label-color-3: var(--color-black); /** Rótulo sobre la baldosa de la ranura 3 */
@@ -56,7 +55,7 @@
   --chart-transition-duration: var(--motion-duration-fast); /** Respuesta de la marca al puntero. Con `prefers-reduced-motion` no hay transición */
   --chart-transition-easing: var(--motion-easing-out); /** Curva de la respuesta al puntero */
   --chart-diverging-neutral: var(--color-surface-secondary-on-light); /** Punto medio divergente: gris neutro. Nunca un tono — el medio tiene que leerse como «nada». Es el único dato que se viste con un rol de SUPERFICIE, y a propósito: el cero es el punto de MENOR saliencia de la rampa, así que su trabajo es retirarse hacia el lienzo, no contrastar con él. Sobre blanco queda en 1,12:1, por debajo de los seis pasos de los dos brazos (2,49:1 el más flojo) */
-  --chart-surface: var(--color-background-light); /** Color del hueco de 2px entre marcas contiguas y del anillo de 2px de los puntos. Es la superficie, no un borde: separar con trazo añadiría tinta que no es dato */
+  --chart-surface: var(--color-bg-light); /** Color del hueco de 2px entre marcas contiguas y del anillo de 2px de los puntos. Es la superficie, no un borde: separar con trazo añadiría tinta que no es dato */
   --chart-grid-color: var(--color-border-default-on-light); /** Rejilla: filete de 1px a un paso de la superficie. Cromo recesivo */
   --chart-grid-width: var(--border-width-default); /** Grosor de la rejilla. Sólida siempre: una rejilla discontinua se lee como umbral */
   --chart-axis-color: var(--color-icon-secondary-on-light); /** Línea base y eje: un paso más firme que la rejilla, porque es el ancla del cero */
@@ -72,7 +71,6 @@
   --chart-tile-label-color: var(--color-text-on-dark); /** 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 */
   --chart-tile-label-color-5: var(--color-text-on-dark); /** Rótulo sobre la baldosa de la ranura 5 — el magenta es lo bastante oscuro para llevar tinta clara */
   --chart-tile-label-color-7: var(--color-text-on-dark); /** Rótulo sobre la baldosa de la ranura 7 — la lavanda de gráfico es la más oscura de las ocho */
-  --chart-tile-label-color-muted: var(--color-text-on-dark); /** Rótulo sobre la baldosa gris de «Otros» (pasada la octava ranura) */
   --chart-tooltip-padding-block: var(--tooltip-padding-block); /** Padding vertical del bocadillo */
   --chart-tooltip-padding-inline: var(--tooltip-padding-inline); /** Padding horizontal del bocadillo */
   --chart-tooltip-font-size: var(--tooltip-font-size); /** Tamaño de texto del bocadillo */
@@ -88,7 +86,6 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --chart-tile-label-color-muted: var(--color-black); /** Rótulo de «Otros» — surface-dark: el gris de atenuación en oscuro es claro */
   --chart-tile-label-color-5: var(--color-black); /** Rótulo de la ranura 5 — surface-dark: el paso de serie para superficie oscura es más claro y ya no aguanta tinta blanca */
   --chart-tile-label-color-7: var(--color-black); /** Rótulo de la ranura 7 — surface-dark */
   --chart-series-1: var(--color-chart-series-1-on-dark); /** Ranura 1 — surface-dark */
@@ -113,7 +110,7 @@ html.dark {
   --chart-diverging-cool-2: var(--color-chart-diverging-cool-2-on-dark); /** Divergente frío 2 — surface-dark */
   --chart-diverging-cool-3: var(--color-chart-diverging-cool-3-on-dark); /** Divergente frío 3 — surface-dark */
   --chart-radial-track-color: var(--color-disabled-border-on-dark); /** Carril del anillo — surface-dark. La misma tinta que el eje en oscuro, por el mismo motivo */
-  --chart-surface: var(--color-background-dark); /** Hueco y anillo — surface-dark */
+  --chart-surface: var(--color-bg-dark); /** Hueco y anillo — surface-dark */
   --chart-grid-color: var(--color-border-recessive-on-dark); /** Rejilla — surface-dark. Excepción declarada a la regla de derivación (borde → `text.on-dark`): la rejilla es cromo recesivo, no un borde con peso de dato; en blanco sobre prusia se leería como tinta. Procedencia corregida: apuntaba a `color.surface.secondary-on-dark`, un token de SUPERFICIE (el mismo defecto de origen que hizo invisible el carril del Stepper) — ahora apunta a `color.border.recessive-on-dark`, un token de LÍNEA, con el mismo `grey-darkest` y por tanto el mismo valor visual */
   --chart-axis-color: var(--color-disabled-border-on-dark); /** Eje — surface-dark: un paso por encima de la rejilla, igual que en claro. Excepción declarada como `grid-color`: mismo `grey-dark` que en claro, no el `text.muted-on-dark` de `axis-color` */
   --chart-label-color: var(--color-text-muted-on-dark); /** Rótulos — surface-dark */

package/src/tokens/molecules/chat-shell.css

@@ -10,12 +10,12 @@
   --chat-shell-breakpoint: var(--breakpoint-lg); /** Donde el armazón pasa de dos columnas a una. El mismo punto en el que el chrome de aplicación pasa de barra superior a barra lateral */
   --chat-shell-drawer-gap: var(--chat-shell-thread-padding-block); /** Dentro del cajón de pantalla estrecha, el aire entre la fila del disparador y la lista. Cascada desde el aire de la ranura del hilo porque el cajón repite la maqueta de la columna principal: la lista tiene que arrancar donde arranca el hilo, para que al desplegar no se mueva más que el contenido. El cajón anula el relleno propio del `Sheet` (ver ChatShell.css), así que esta es la única medida que el armazón pone dentro de él */
   --chat-shell-thread-padding-inline: calc(var(--message-bubble-tail-size) + var(--message-bubble-border-width)); /** Pasillo lateral del hilo: exactamente lo que sobresale la cola del globo, que nace FUERA de su caja (el lado del triángulo más su contorno). Sin él la cola se corta contra el canto del desplazamiento. No es un margen de página —el aire alrededor del chat sigue poniéndolo quien lo monta—: es la anchura justa para que el pico respire */
-  --chat-shell-bg: var(--color-background-light); /** Fondo del armazón */
+  --chat-shell-bg: var(--color-bg-light); /** Fondo del armazón */
 }
 
 .surface-dark,
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --chat-shell-bg: var(--color-background-dark); /** Fondo del armazón — superficie oscura */
+  --chat-shell-bg: var(--color-bg-dark); /** Fondo del armazón — superficie oscura */
 }

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

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

package/src/tokens/molecules/color-picker.css

@@ -47,8 +47,8 @@
   --color-picker-trigger-error-focus-ring-color: var(--input-error-focus-ring-color); /** Anillo de foco en error */
   --color-picker-trigger-disabled-bg: var(--input-disabled-bg); /** Fondo deshabilitado */
   --color-picker-trigger-disabled-border-color: var(--input-disabled-border-color); /** Borde deshabilitado */
-  --color-picker-panel-inline-size: calc(8 * var(--color-picker-preset-size) + 7 * var(--color-picker-preset-gap)); /** Ancho del panel: ocho predefinidos por fila y sus siete huecos. El área y las bandas lo ocupan entero */
-  --color-picker-area-block-size: calc(6 * var(--color-picker-preset-size) + 5 * var(--color-picker-preset-gap)); /** Alto del área de saturación y brillo: seis filas de la misma rejilla que mide el ancho */
+  --color-picker-panel-width: calc(8 * var(--color-picker-preset-size) + 7 * var(--color-picker-preset-gap)); /** Ancho del panel: ocho predefinidos por fila y sus siete huecos. El área y las bandas lo ocupan entero */
+  --color-picker-area-height: calc(6 * var(--color-picker-preset-size) + 5 * var(--color-picker-preset-gap)); /** Alto del área de saturación y brillo: seis filas de la misma rejilla que mide el ancho */
   --color-picker-trigger-focus-ring-width: var(--input-focus-ring-width); /** Grosor del anillo de foco, por dentro del borde como en un campo */
 }
 

package/src/tokens/molecules/command-palette.css

@@ -4,6 +4,7 @@
 
 :root {
   --command-palette-max-height: min(24rem, 60vh); /** Alto máximo de la paleta — la lista scrollea dentro */
+  --command-palette-input-line-height: 1.15; /** Interlineado del buscador: el 1,15 que heredaba de normalize.css, ahora declarado. No es `1` (1): Chromium no deja que un `<input>` baje de su interlineado `normal`, y a 20px el buscador crecía de 48 a 50px */
   --command-palette-input-padding-block: var(--spacing-3); /** Padding vertical del buscador */
   --command-palette-input-padding-inline: var(--spacing-2); /** Padding horizontal del buscador */
   --command-palette-input-font-size: var(--font-size-3); /** Tamaño de texto del buscador */

package/src/tokens/molecules/consent.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+  --consent-banner-text-flex-basis: 20rem; /** Base flexible del texto: encoge antes que la fila de botones, que nunca se parte */
   --consent-banner-padding-block: var(--spacing-4); /** Aire vertical de la banda */
   --consent-banner-padding-inline: var(--spacing-4); /** Aire horizontal de la banda */
   --consent-banner-gap: var(--spacing-3); /** Separación entre el texto y la fila de botones */
@@ -11,11 +12,11 @@
   --consent-banner-z-index: var(--z-index-bar); /** Capa: la de las barras fijas de la aplicación. Por debajo del velo de un modal — el banner no bloquea nada */
   --consent-preferences-gap: var(--spacing-4); /** Separación entre los bloques del panel */
   --consent-preferences-category-gap: var(--spacing-3); /** Separación entre categorías de la lista */
-  --consent-banner-bg: var(--color-background-light); /** Fondo de la banda */
+  --consent-banner-bg: var(--color-bg-light); /** Fondo de la banda */
   --consent-banner-color: var(--color-text-on-light); /** Texto de la banda */
   --consent-banner-border-color: var(--color-primary); /** Línea superior que separa la banda de la página */
   --consent-banner-border-width: var(--border-width-default); /** Grosor de la línea superior */
-  --consent-banner-max-inline-size: var(--container-max-width-xl); /** Ancho máximo del contenido dentro de la banda: el mismo del contenido de una página pública */
+  --consent-banner-max-width: var(--container-max-width-xl); /** Ancho máximo del contenido dentro de la banda: el mismo del contenido de una página pública */
   --consent-banner-title-font-size: var(--text-size-3); /** Cuerpo del título de la banda */
   --consent-banner-description-font-size: var(--text-font-size); /** Cuerpo del texto de la banda: el cuerpo de texto de la superficie, sin reducir (decisión del 2026-08-28) */
 }
@@ -24,7 +25,7 @@
 .surface-invert,
 [data-theme="dark"],
 html.dark {
-  --consent-banner-bg: var(--color-background-dark); /** Fondo de la banda — surface-dark */
+  --consent-banner-bg: var(--color-bg-dark); /** Fondo de la banda — surface-dark */
   --consent-banner-color: var(--color-text-on-dark); /** Texto de la banda — surface-dark */
   --consent-banner-border-color: var(--color-text-on-dark); /** Línea superior — surface-dark */
 }

package/src/tokens/molecules/conversation-list.css

@@ -10,6 +10,7 @@
   --conversation-list-item-padding-block: var(--spacing-2); /** Aire vertical de cada conversación */
   --conversation-list-item-padding-inline: var(--spacing-3); /** Aire horizontal de cada conversación */
   --conversation-list-item-font-family: var(--font-family-sans); /** Familia tipográfica del título de la conversación */
+  --conversation-list-item-line-height: var(--line-height-none); /** Interlineado del título: una línea justa (el título no parte, va con elipsis), para que el alto de la fila lo marque su padding y no un interlineado heredado. Sin él, el botón heredaba el 1,15 de normalize.css */
   --conversation-list-transition-duration: var(--motion-duration-fast); /** Duración de la transición de color */
   --conversation-list-transition-easing: var(--motion-easing-default); /** Curva de la transición de color */
   --conversation-list-item-border-radius: var(--border-radius-default); /** Radio de cada conversación: recto, como todo el sistema */

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

@@ -4,4 +4,14 @@
 
 :root {
   --conversation-thread-gap: var(--spacing-4); /** Separación vertical entre mensajes. Es la única medida de espaciado del hilo: el relleno se retiró —quien compone, espacia—, así que el aire alrededor de los globos lo pone quien monta el hilo */
+  --conversation-thread-focus-ring-color: var(--color-primary); /** Anillo de foco del hilo, que entra en el tabulador para poder desplazarlo con el teclado */
+  --conversation-thread-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --conversation-thread-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --conversation-thread-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
 }

package/src/tokens/molecules/date-picker-field.css

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