@studiolxd/brand 41.0.0 → 41.1.0

package/CHANGELOG.md

@@ -7,6 +7,60 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
 regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
 para breaking changes.
 
+## [41.1.0] — 2026-09-15
+
+> **Minor.** El interruptor de la barra de filtros se centra con el campo que tiene al
+> lado, el pie de una tarjeta cumple la norma de las acciones por sí solo, y `block` queda
+> escrito como lo que es: la excepción.
+
+### `FilterBar`: un control sin rótulo, a la altura del que sí lo lleva
+
+Un interruptor no lleva rótulo encima y un campo sí, así que en la rejilla el interruptor
+se pegaba arriba, a la altura de los **rótulos** en vez de a la de los **campos**. Ahora la
+barra le reserva a esa celda el renglón del rótulo —medido por token, no a ojo— y, en el
+espacio que queda, abre una caja de **la altura de un campo** y centra el control dentro.
+
+Medido en Chromium: los centros de la caja del campo, del interruptor y del botón de las
+acciones caen en el mismo píxel. La referencia es la **talla estándar del campo**, no el
+alto real del renglón, y eso es lo que permite tener las dos cosas a la vez: un control que
+crece hacia abajo —un selector múltiple con fichas— sigue creciendo sin mover a nadie, y
+los rótulos siguen todos en su línea. Donde ningún filtro lleva rótulo no se reserva nada,
+y apilado, por debajo del punto de ruptura, tampoco.
+
+### `CardFooter` cumple la norma solo
+
+Era la única ranura de acciones del sistema que no lo hacía: siempre una fila, con la
+columna a pedir a mano — la prop de escape que la norma vino a quitar, mudada del botón al
+contenedor. Ahora, por debajo de `md`, sus acciones ocupan la línea como en las otras once
+ranuras.
+
+`direction="column"` **se queda**, y con un significado más limpio: ya no es «acuérdate de
+apilar en móvil», sino «apila **siempre**, también donde hay sitio» — el pie con una línea
+de texto sobre el botón, o la tarjeta que se sabe estrecha en escritorio.
+
+**Por qué por ventana y no por contenedor**, que es el hallazgo que merece quedar escrito:
+se intentó como el pie de un diálogo y se midió antes de darlo por bueno. Declarar la
+tarjeta como contenedor (`container-type: inline-size`) le quita el ancho que saca de su
+contenido: dos tarjetas dentro de un `Inline` pasan de medir lo que mide su texto a 34px,
+solo su propio aire. **Una tarjeta no puede ser contenedor** porque se usa de las dos
+maneras —unas veces la estira su hueco, otras la mide su contenido—; un diálogo sí, porque
+su ancho siempre viene de fuera. Queda en `Foundations › Puntos de ruptura` como el primer
+límite documentado de la técnica.
+
+### `Button.block`, escrito al derecho
+
+Su documentación decía que era «lo que quiere un botón suelto dentro de una página», que es
+justo la invitación a usarlo en vez de buscar la ranura. Ahora dice lo contrario, y la
+norma tiene su mitad negativa escrita:
+
+> Todo botón vive en una ranura de acciones. Si no hay ranura que le encaje, eso es un
+> hueco del sistema que se reporta — no un `block` que se añade.
+
+Con la lista de las ranuras que dan la línea entera y de las que no la dan a propósito
+—las que viven dentro de una fila, donde estirar rompería la fila que les da sentido—.
+`AnnotationThread` sale de la lista de dudosos: vive en un panel estrecho también en
+escritorio, así que sus acciones ocupan la línea **siempre**, sin punto de ruptura.
+
 ## [41.0.0] — 2026-09-15
 
 > **Major.** Segunda familia al proveedor de textos: `Table` y `DataTable` pierden sus

package/dist/_shared/tokens.js

@@ -2539,6 +2539,8 @@ var e = {
 	"--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",
@@ -3093,6 +3095,7 @@ var e = {
 	"--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",

package/dist/_types/atoms/Button/Button.d.ts

@@ -28,10 +28,23 @@ export interface ButtonBaseProps extends Omit<React.ComponentPropsWithoutRef<'bu
     /** Size of the button */
     size?: 'sm' | 'md' | 'lg';
     /**
-     * Estira el botón hasta el ancho de su contenedor. `'mobile'` lo hace solo
-     * por debajo de `md`: es lo que quiere un botón suelto dentro de una página
-     * —una acción que en escritorio se lee bien con su ancho natural y en una
-     * pantalla estrecha queda mejor ocupando la línea entera.
+     * Estira el botón hasta el ancho de su contenedor (`'mobile'`, solo por
+     * debajo de `md`). **Es la excepción marcada, no el camino normal.**
+     *
+     * Todo botón vive en una **ranura de acciones**: el pie de un `Form` o de un
+     * diálogo, las `actions` de un `Alert`, de una `FilterBar`, de un `Hero`, de
+     * un `PageIntro`… Y el ancho lo decide la ranura, no el botón: la norma del
+     * sistema (Fundamentos › **Puntos de ruptura**) hace que en móvil las
+     * acciones tomen la línea entera desde el CSS del contenedor, sin prop que
+     * acordarse de pasar. Dentro de una ranura del sistema `block` no hace falta,
+     * y pasarlo es pelearse con ella.
+     *
+     * **Si no hay ranura que le encaje, eso es un hueco del sistema y se
+     * reporta** — no un `block` que se añade.
+     *
+     * Queda, entonces, para el botón que de verdad NO está en una ranura de
+     * acciones: la llamada a la acción dentro de un texto, o la fila que un
+     * producto monta a mano mientras el sistema no tiene su ranura.
      */
     block?: boolean | 'mobile';
     /**

package/dist/_types/molecules/Card/Card.d.ts

@@ -142,11 +142,20 @@ export declare const CardAction: import("react").ForwardRefExoticComponent<Omit<
 export declare const CardContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export interface CardFooterProps extends CardPartProps {
     /**
-     * `row` (por defecto): las acciones en fila. `column`: apiladas y a todo
-     * el ancho — para un pie con una línea de texto sobre el botón (una nota
-     * de prueba, una condición) que debe quedar pegada a él.
+     * `row` (por defecto): las acciones en fila **en escritorio**; por debajo de
+     * `md` apilan y ocupan la línea entera solas, que es la norma del sistema
+     * (Fundamentos › Puntos de ruptura) — no hay que pedirlo.
+     *
+     * `column`: apiladas y a todo el ancho **siempre, también donde hay sitio**.
+     * Es la excepción declarada, para un pie con una línea de texto sobre el
+     * botón (una nota de prueba, una condición) que debe quedar pegada a él, y
+     * para una tarjeta que se sabe estrecha en escritorio —una rejilla de tres
+     * columnas—, porque el pie mide su hueco y no la ventana.
      */
     direction?: 'row' | 'column';
 }
-/** Pie de la tarjeta: sus acciones, en fila o apiladas. */
+/**
+ * Pie de la tarjeta: sus acciones. En móvil apila y da la línea entera a cada
+ * una; en escritorio, fila —salvo `direction="column"`—.
+ */
 export declare const CardFooter: import("react").ForwardRefExoticComponent<CardFooterProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/_types/organisms/AnnotationThread/AnnotationThread.d.ts

@@ -43,7 +43,16 @@ export interface AnnotationThreadProps extends React.ComponentPropsWithoutRef<'a
      * `resolved` se retira visualmente sin desaparecer.
      */
     status?: AnnotationThreadStatus;
-    /** Acciones del hilo entero: resolver, reabrir, seguir. Van al pie. */
+    /**
+     * Acciones del hilo entero: resolver, reabrir, seguir. Van al pie, **una por
+     * línea y a la línea entera**, siempre: el hilo vive en un panel de revisión
+     * —una columna estrecha también en escritorio—, así que el ancho de la
+     * ventana no dice nada de lo que mide este hueco.
+     *
+     * Se pasan sueltas (`<><Button/><Button/></>`), sin envolverlas en un
+     * `Inline`: el envoltorio se llevaría la línea y los botones se quedarían a
+     * su ancho natural dentro de él.
+     */
     actions?: ReactNode;
     /** Con qué se responde: un `MessageComposer`, un `TextareaField`, un `Button`. */
     reply?: ReactNode;

package/dist/annotation-thread.css

@@ -1 +1 @@
-.annotation-thread{gap:var(--annotation-thread-gap);padding-block:var(--annotation-thread-padding-block);padding-inline:var(--annotation-thread-padding-inline);border:var(--annotation-thread-border-width) var(--annotation-thread-border-style) var(--annotation-thread-border-color);flex-direction:column;display:flex}.annotation-thread.annotation-thread--acknowledged{opacity:var(--annotation-thread-acknowledged-opacity)}.annotation-thread.annotation-thread--resolved{opacity:var(--annotation-thread-resolved-opacity)}.annotation-thread__status{display:flex}.annotation-thread__item{gap:var(--annotation-thread-item-gap);flex-direction:column;display:flex}.annotation-thread__header{align-items:center;gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__avatar{flex-shrink:0;display:inline-flex}.annotation-thread__author{font-family:var(--annotation-thread-author-font-family);font-size:var(--annotation-thread-author-font-size);font-weight:var(--annotation-thread-author-font-weight);color:var(--annotation-thread-author-color)}.annotation-thread__date,.annotation-thread__edited{font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color)}.annotation-thread__meta{align-items:center;gap:var(--annotation-thread-header-gap);overflow-wrap:anywhere;min-inline-size:0;font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color);flex-wrap:wrap;display:inline-flex}.annotation-thread__body{font-size:var(--annotation-thread-body-font-size);line-height:var(--annotation-thread-body-line-height);color:var(--annotation-thread-body-color)}.annotation-thread__item-actions{gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__replies{gap:var(--annotation-thread-items-gap);border-inline-start:var(--annotation-thread-reply-guide-width) var(--annotation-thread-reply-guide-style) var(--annotation-thread-reply-guide-color);flex-direction:column;padding-inline-start:var(--annotation-thread-reply-indent);display:flex}.annotation-thread__replies-label{font-size:var(--annotation-thread-replies-label-font-size);color:var(--annotation-thread-replies-label-color);margin-block:0}.annotation-thread__actions{gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}
+.annotation-thread{gap:var(--annotation-thread-gap);padding-block:var(--annotation-thread-padding-block);padding-inline:var(--annotation-thread-padding-inline);border:var(--annotation-thread-border-width) var(--annotation-thread-border-style) var(--annotation-thread-border-color);flex-direction:column;display:flex}.annotation-thread.annotation-thread--acknowledged{opacity:var(--annotation-thread-acknowledged-opacity)}.annotation-thread.annotation-thread--resolved{opacity:var(--annotation-thread-resolved-opacity)}.annotation-thread__status{display:flex}.annotation-thread__item{gap:var(--annotation-thread-item-gap);flex-direction:column;display:flex}.annotation-thread__header{align-items:center;gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__avatar{flex-shrink:0;display:inline-flex}.annotation-thread__author{font-family:var(--annotation-thread-author-font-family);font-size:var(--annotation-thread-author-font-size);font-weight:var(--annotation-thread-author-font-weight);color:var(--annotation-thread-author-color)}.annotation-thread__date,.annotation-thread__edited{font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color)}.annotation-thread__meta{align-items:center;gap:var(--annotation-thread-header-gap);overflow-wrap:anywhere;min-inline-size:0;font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color);flex-wrap:wrap;display:inline-flex}.annotation-thread__body{font-size:var(--annotation-thread-body-font-size);line-height:var(--annotation-thread-body-line-height);color:var(--annotation-thread-body-color)}.annotation-thread__item-actions{gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__replies{gap:var(--annotation-thread-items-gap);border-inline-start:var(--annotation-thread-reply-guide-width) var(--annotation-thread-reply-guide-style) var(--annotation-thread-reply-guide-color);flex-direction:column;padding-inline-start:var(--annotation-thread-reply-indent);display:flex}.annotation-thread__replies-label{font-size:var(--annotation-thread-replies-label-font-size);color:var(--annotation-thread-replies-label-color);margin-block:0}.annotation-thread__actions{align-items:stretch;gap:var(--annotation-thread-actions-gap);flex-direction:column;display:flex}.annotation-thread__actions>*{inline-size:100%}