@studiolxd/brand 49.28.0 → 50.0.0

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-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 */
@@ -42,6 +43,9 @@
   --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 */
@@ -66,4 +70,5 @@ html.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/chart.css

@@ -8,7 +8,6 @@
   --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-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 */
@@ -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 */

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/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 */

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 */
 }

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

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

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

@@ -22,8 +22,6 @@
   --dropdown-field-font-size: var(--select-font-size); /** Cuerpo: el del Select */
   --dropdown-field-bg: var(--select-bg); /** Fondo del control */
   --dropdown-field-icon-transition: var(--select-icon-transition); /** Giro del chevron al abrir */
-  --dropdown-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
-  --dropdown-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --dropdown-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --dropdown-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
   --dropdown-field-padding-inline: var(--select-padding-inline); /** Padding inline del control: el del Select */
@@ -35,9 +33,6 @@
   --dropdown-field-focus-ring-width: var(--select-focus-ring-width); /** Anillo de foco */
   --dropdown-field-focus-ring-color: var(--select-focus-ring-color); /** Anillo de foco */
   --dropdown-field-error-border-color: var(--select-error-border-color); /** Borde en error: el mismo que el del Select */
-  --dropdown-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
-  --dropdown-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
-  --dropdown-field-error-color: var(--form-error-color); /** Color del mensaje de error */
   --dropdown-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
   --dropdown-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
   --dropdown-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
@@ -52,6 +47,5 @@ html.dark {
   --dropdown-field-bg: var(--color-background-dark); /** Fondo — surface-dark */
   --dropdown-field-border-color: var(--color-text-on-dark); /** Borde — surface-dark */
   --dropdown-field-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
-  --dropdown-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
   --dropdown-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
 }

package/src/tokens/molecules/file-upload-field.css

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

package/src/tokens/molecules/floating-toolbar.css

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --floating-toolbar-gap: var(--spacing-1); /** Separación entre los botones de un grupo y entre los dos grupos de la barra superior */
+  --floating-toolbar-offset: var(--spacing-2); /** Distancia entre la barra y el borde del elemento: por encima de él en la barra superior, a su lado en los raíles */
+  --floating-toolbar-padding-block: var(--spacing-1); /** Aire vertical del panel de la barra (o de cada raíl) */
+  --floating-toolbar-padding-inline: var(--spacing-1); /** Aire horizontal del panel de la barra (o de cada raíl) */
+  --floating-toolbar-transition-duration: var(--motion-duration-fast); /** Duración de la aparición y la desaparición. Con `prefers-reduced-motion: reduce` vale 0ms */
+  --floating-toolbar-transition-easing: var(--motion-easing-default); /** Curva de la aparición y la desaparición */
+  --floating-toolbar-button-size: var(--button-sm-height); /** Caja de cada botón de icono: la talla `sm` del botón. Es también lo que mide el raíl de ancho, y por eso el hueco que el elemento reserva a cada lado */
+  --floating-toolbar-bg: var(--floating-panel-bg); /** Fondo del panel: el de cualquier panel flotante, para que la barra se lea encima del contenido vecino */
+  --floating-toolbar-border-width: var(--floating-panel-border-width); /** Grosor del borde del panel */
+  --floating-toolbar-border-color: var(--floating-panel-border-color); /** Color del borde del panel */
+  --floating-toolbar-border-radius: var(--floating-panel-border-radius); /** Radio del panel */
+  --floating-toolbar-shadow: var(--floating-panel-shadow); /** Sombra del panel */
+}

package/src/tokens/molecules/floating-toolbar.ts

@@ -0,0 +1,4 @@
+import floatingToolbar from '../../../tokens/molecule/floating-toolbar.json';
+import { flattenTokens } from '../utils';
+
+export const floatingToolbarTokens = flattenTokens(floatingToolbar as never);

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

@@ -18,7 +18,6 @@
   --input-field-search-clear-focus-ring-color: var(--color-primary); /** Color del anillo de foco del aspa: la tinta de la superficie */
   --input-field-search-input-padding-inline-start: var(--input-field-search-slot-size); /** Padding izquierdo del campo — el texto empieza donde acaba la lupa */
   --input-field-search-input-padding-inline-end: var(--input-field-search-slot-size); /** Padding derecho del campo cuando ofrece borrado — el texto termina donde empieza el aspa */
-  --input-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
   --input-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --input-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --input-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */

package/src/tokens/molecules/input-phone-field.css

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

package/src/tokens/molecules/modal.css

@@ -5,6 +5,7 @@
 :root {
   --modal-border-color: rgba(0, 0, 0, 0); /** Sin borde en superficie clara: el velo y el fondo blanco ya separan el panel */
   --modal-width-max: 560px; /** Anchura máxima del panel. Medida de layout (como container.max-width-*), no de la escala de espaciado ni de tallas de componente */
+  --modal-inline-size: 90vw; /** Ancho del panel antes del tope de `width-max`: deja aire a los lados en pantallas estrechas. Medida de layout, igual que width-max */
   --modal-max-height: 90dvh; /** Altura máxima del panel modal (dvh para móviles con barra de navegador variable). Medida de layout, igual que width-max */
   --modal-z-index: var(--z-index-modal); /** z-index del panel modal */
   --modal-backdrop-z-index: var(--z-index-backdrop); /** z-index del backdrop */

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

@@ -4,13 +4,8 @@
 
 :root {
   --multi-select-field-gap: var(--spacing-2); /** Espacio entre label, multi-select, helper y error */
-  --multi-select-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
-  --multi-select-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --multi-select-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --multi-select-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
-  --multi-select-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
-  --multi-select-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
-  --multi-select-field-error-color: var(--form-error-color); /** Color del mensaje de error */
   --multi-select-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
   --multi-select-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
   --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 {
-  --multi-select-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
   --multi-select-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
 }

package/src/tokens/molecules/number-input-field.css

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

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

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

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

@@ -18,15 +18,10 @@
   --radio-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) */
   --radio-field-label-line-height: var(--text-line-height); /** Interlineado */
   --radio-field-label-letter-spacing: var(--text-letter-spacing); /** Interletraje */
-  --radio-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
-  --radio-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --radio-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --radio-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
   --radio-field-label-font-weight: var(--text-font-weight); /** Peso tipográfico */
   --radio-field-label-color: var(--text-color); /** Color del texto */
-  --radio-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
-  --radio-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
-  --radio-field-error-color: var(--form-error-color); /** Color del mensaje de error */
   --radio-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
   --radio-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
   --radio-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
@@ -37,6 +32,5 @@
 [data-theme="dark"],
 html.dark {
   --radio-field-label-color: var(--color-text-on-dark); /** Color del texto — surface-dark */
-  --radio-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
   --radio-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
 }

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

@@ -4,6 +4,7 @@
 
 :root {
   --recurrence-field-interval-width: 8rem; /** Ancho del campo de intervalo — cabe un número de dos cifras y sus flechas, no la fila entera */
+  --recurrence-field-end-flex-basis: 12rem; /** Base flexible del bloque de fin de la repetición: por debajo de ella pasa a otra línea */
   --recurrence-field-gap: var(--spacing-4); /** Separación entre los campos del editor de recurrencia */
   --recurrence-field-row-gap: var(--spacing-3); /** Separación entre los campos que comparten fila */
   --recurrence-field-weekdays-gap: var(--spacing-1); /** Separación entre los días de la semana */

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

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

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

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

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

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

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

@@ -18,7 +18,6 @@
   --switcher-field-label-font-size: var(--text-font-size); /** Es texto corriente: el cuerpo de la superficie (16px en aplicación, 20px en la pública) */
   --switcher-field-label-line-height: var(--text-line-height); /** Interlineado */
   --switcher-field-label-letter-spacing: var(--text-letter-spacing); /** Interletraje */
-  --switcher-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
   --switcher-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
   --switcher-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
   --switcher-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */

package/src/tokens/molecules/table.css

@@ -4,6 +4,7 @@
 
 :root {
   --table-bg: rgba(0, 0, 0, 0); /** Fondo de la tabla */
+  --table-actions-inline-size: 1px; /** Ancho de la cabecera de la columna de acciones. No fija un ancho: con `table-layout: auto` el sobrante se reparte entre las demás columnas y esta se encoge a su contenido */
   --table-font-family: var(--font-family-sans); /** Font family */
   --table-header-padding-block: var(--spacing-3); /** Padding block del encabezado */
   --table-header-padding-inline: var(--spacing-3); /** Padding inline del encabezado */

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

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

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

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

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

@@ -147,6 +147,7 @@
 @import 'molecules/docs-search';
 @import 'molecules/stat-tile';
 @import 'molecules/copy-button';
+@import 'molecules/floating-toolbar';
 @import 'molecules/confirm-dialog';
 @import 'molecules/search-form';
 @import 'molecules/input-phone-field';

package/src/tokens/scss/_index.scss

@@ -147,6 +147,7 @@
 @forward 'molecules/docs-search';
 @forward 'molecules/stat-tile';
 @forward 'molecules/copy-button';
+@forward 'molecules/floating-toolbar';
 @forward 'molecules/confirm-dialog';
 @forward 'molecules/search-form';
 @forward 'molecules/input-phone-field';

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

@@ -7,6 +7,10 @@ $lxd-async-multi-select-border-radius: 0px; // Hereda de `multi-select.border-ra
 $lxd-async-multi-select-border-style: solid; // Hereda de `multi-select.border-style`: el buscador múltiple tiene la misma cara que el control síncrono
 $lxd-async-multi-select-border-width: 1px; // Hereda de `multi-select.border-width`: el buscador múltiple tiene la misma cara que el control síncrono
 $lxd-async-multi-select-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado: el de los campos
+$lxd-async-multi-select-disabled-opacity: 0.5; // Opacidad del control deshabilitado: la del buscador de selección única
+$lxd-async-multi-select-pill-remove-opacity: 0.7; // Opacidad del aspa de la píldora en reposo: presente pero en segundo plano
+$lxd-async-multi-select-pill-remove-hover-opacity: 1; // Opacidad del aspa de la píldora bajo el puntero
+$lxd-async-multi-select-input-min-inline-size: 4rem; // Ancho mínimo del texto de búsqueda junto a las píldoras: lo justo para escribir sin que salte de línea a cada letra
 $lxd-async-multi-select-color: #111e30; // Hereda de `multi-select.color`: el buscador múltiple tiene la misma cara que el control síncrono
 $lxd-async-multi-select-content-bg: #ffffff; // Hereda de `multi-select.content-bg`: el buscador múltiple tiene la misma cara que el control síncrono
 $lxd-async-multi-select-content-border-color: #111e30; // Hereda de `multi-select.content-border-color`: el buscador múltiple tiene la misma cara que el control síncrono

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

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

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

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