@studiolxd/brand 40.1.0 → 41.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "40.1.0",
+  "version": "41.1.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",

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

@@ -18,6 +18,7 @@
   --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 */
   --annotation-thread-reply-guide-color: var(--color-border-default-on-light); /** Color de la guía de respuestas */
+  --annotation-thread-actions-gap: var(--form-actions-gap); /** Aire entre las acciones del pie del hilo — el de los botones de un formulario: la fila de acciones del sistema es una sola */
   --annotation-thread-author-font-family: var(--control-font-family); /** Familia del autor */
   --annotation-thread-author-font-size: var(--text-paragraph-small-font-size); /** Tamaño del autor: la letra menor del texto corriente */
   --annotation-thread-author-font-weight: var(--font-weight-emphasis); /** Peso del autor */

package/src/tokens/molecules/filter-bar.css

@@ -8,4 +8,6 @@
   --filter-bar-column-gap: var(--field-row-column-gap); /** Aire entre las columnas de filtros — el de las celdas de una fila de campos */
   --filter-bar-row-gap: var(--field-row-row-gap); /** Aire entre las filas de filtros cuando la rejilla envuelve, y entre los filtros apilados en móvil */
   --filter-bar-actions-gap: var(--form-actions-gap); /** Aire entre las acciones de la barra — el de los botones de un formulario: la fila de acciones del sistema es una sola */
+  --filter-bar-label-offset: calc(var(--label-font-size) * var(--label-line-height) + var(--input-field-gap)); /** El renglón que ocupa un rótulo sobre su control: cuerpo × interlineado del `Label` más el aire que los separa en un campo (29px). Es lo que la barra reserva sobre lo que NO lleva rótulo —un interruptor, el botón de limpiar— para que no se suba a la línea de las etiquetas */
+  --filter-bar-control-block-size: var(--control-height); /** La caja de un campo de una línea (40px, la talla md del sistema). Es la referencia contra la que se centra lo que no lleva rótulo: el interruptor queda a la altura óptica del recuadro que tiene al lado, no del renglón entero —que con un control alto al lado sería otra altura cada vez— */
 }

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

@@ -14,6 +14,7 @@ $lxd-annotation-thread-reply-guide-color: #d0d0d0; // Color de la guía de respu
 $lxd-annotation-thread-item-gap: 0.5rem; // Separación entre la cabecera, el cuerpo y las acciones de una anotación
 $lxd-annotation-thread-items-gap: 1rem; // Separación entre anotaciones
 $lxd-annotation-thread-header-gap: 0.5rem; // Separación entre autor, fecha y marca de editada
+$lxd-annotation-thread-actions-gap: 0.75rem; // Aire entre las acciones del pie del hilo — el de los botones de un formulario: la fila de acciones del sistema es una sola
 $lxd-annotation-thread-author-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia del autor
 $lxd-annotation-thread-author-font-size: 0.875rem; // Tamaño del autor: la letra menor del texto corriente
 $lxd-annotation-thread-author-font-weight: 500; // Peso del autor

package/src/tokens/scss/molecules/_filter-bar.scss

@@ -6,3 +6,5 @@ $lxd-filter-bar-column-gap: 1rem; // Aire entre las columnas de filtros — el d
 $lxd-filter-bar-row-gap: 0.75rem; // Aire entre las filas de filtros cuando la rejilla envuelve, y entre los filtros apilados en móvil
 $lxd-filter-bar-column-min-inline-size: 12rem; // Ancho mínimo de una columna de filtros (192px, el de una celda normal de `FieldRow`): es lo que decide cuántas caben por fila —tres o cuatro en una tabla de administración— antes de apilarse
 $lxd-filter-bar-actions-gap: 0.75rem; // Aire entre las acciones de la barra — el de los botones de un formulario: la fila de acciones del sistema es una sola
+$lxd-filter-bar-label-offset: calc(0.875rem * 1.5 + 0.5rem); // El renglón que ocupa un rótulo sobre su control: cuerpo × interlineado del `Label` más el aire que los separa en un campo (29px). Es lo que la barra reserva sobre lo que NO lleva rótulo —un interruptor, el botón de limpiar— para que no se suba a la línea de las etiquetas
+$lxd-filter-bar-control-block-size: 2.5rem; // La caja de un campo de una línea (40px, la talla md del sistema). Es la referencia contra la que se centra lo que no lleva rótulo: el interruptor queda a la altura óptica del recuadro que tiene al lado, no del renglón entero —que con un control alto al lado sería otra altura cada vez—

package/src/tokens/tokens.json

@@ -2537,6 +2537,8 @@
   "--filter-bar-row-gap": "0.75rem",
   "--filter-bar-column-min-inline-size": "12rem",
   "--filter-bar-actions-gap": "0.75rem",
+  "--filter-bar-label-offset": "calc(0.875rem * 1.5 + 0.5rem)",
+  "--filter-bar-control-block-size": "2.5rem",
   "--form-field-gap": "0.25rem",
   "--image-crop-dialog-gap": "1rem",
   "--image-crop-dialog-area-max-height": "60vh",
@@ -3091,6 +3093,7 @@
   "--annotation-thread-item-gap": "0.5rem",
   "--annotation-thread-items-gap": "1rem",
   "--annotation-thread-header-gap": "0.5rem",
+  "--annotation-thread-actions-gap": "0.75rem",
   "--annotation-thread-author-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
   "--annotation-thread-author-font-size": "0.875rem",
   "--annotation-thread-author-font-weight": "500",