@studiolxd/brand 40.1.0 → 41.1.0

package/CHANGELOG.md

@@ -7,6 +7,101 @@ 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
+> textos castellano por defecto.
+
+### Las tablas leen del proveedor
+
+Mismo mecanismo que estrenó `Pagination` en la v40.0.0 y mismo orden —**prop → proveedor →
+error**—, ahora en la familia que más superficie ocupa en una aplicación. `BrandMessages`
+gana dos espacios:
+
+- **`table`** — `actions`, `sortable`, `sortedAscending`, `sortedDescending`.
+- **`dataTable`** — `empty`, `search`.
+
+Los cinco calcan clave a clave el catálogo de la suite, así que montarlos es mapear y no
+traducir de nuevo. Es incompatible **en tiempo de compilación**, que es justo lo que se
+busca: el contrato exige los dos espacios, así que ninguna aplicación compila hasta
+añadirlos — nadie se entera en producción de que le falta un texto.
+
+### Lo que NO se fue al proveedor, y por qué
+
+La distinción que gobierna toda la campaña: al catálogo común va lo que el componente emite
+**por su cuenta** e igual en toda la suite; se queda como prop lo que es **contenido de esa
+pantalla**.
+
+- `Table.caption` y `TableRow.label` nombran ESA tabla y ESA fila.
+- `DataTable.ariaLabel` nombra ESA lista.
+- `DataTable.emptyMessage` **sobrevive como anulación**: el catálogo pone el aviso genérico,
+  y la prop queda para el que explica algo del dominio —«todavía no has invitado a nadie»—.
+  No es una concesión: en la suite ya hay pantallas que dan un vacío distinto según haya
+  filtros o no, y eso ningún catálogo común puede saberlo.
+
+`DataTable.searchClearLabel` se queda como **reenvío puro**: ese texto no lo emite la tabla,
+lo emite el `InputField` que lleva dentro, y ese átomo todavía no está migrado.
+
+### Lo que esta ola enseña sobre las que vienen
+
+Una familia no queda limpia del todo mientras reenvíe texto a un componente sin migrar, y
+eso **no se ve desde dentro de la familia**. De ahí que las olas siguientes se ordenen para
+que los átomos de formulario caigan pronto: medio catálogo termina reenviando a ellos.
+
 ## [40.1.0] — 2026-09-15
 
 > **Minor.** `AnnotationThread` gana un tercer estado y una ranura para la coordenada de

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/messages/BrandMessages.d.ts

@@ -1,4 +1,6 @@
 import type { PaginationMessages } from '../molecules/Pagination/Pagination';
+import type { TableMessages } from '../molecules/Table/Table';
+import type { DataTableMessages } from '../organisms/DataTable/DataTable';
 /**
  * El contrato de textos de la librería: un espacio por componente, y dentro
  * de cada espacio **todas las claves obligatorias**.
@@ -22,5 +24,7 @@ import type { PaginationMessages } from '../molecules/Pagination/Pagination';
  */
 export interface BrandMessages {
     pagination: PaginationMessages;
+    table: TableMessages;
+    dataTable: DataTableMessages;
 }
-export type { PaginationMessages };
+export type { PaginationMessages, TableMessages, DataTableMessages };

package/dist/_types/messages/index.d.ts

@@ -2,4 +2,4 @@ export { BrandMessagesProvider } from './BrandMessagesProvider';
 export type { BrandMessagesProviderProps } from './BrandMessagesProvider';
 export { useBrandMessages } from './BrandMessagesContext';
 export type { BrandMessagesReader } from './BrandMessagesContext';
-export type { BrandMessages, PaginationMessages } from './BrandMessages';
+export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, } from './BrandMessages';

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/molecules/Table/Table.d.ts

@@ -1,5 +1,25 @@
 import type { ReactNode } from 'react';
 import './Table.css';
+/**
+ * Los textos que la tabla emite por su cuenta: el cromo de la cabecera —el
+ * estado de ordenación y el rótulo de la columna de acciones—, igual en toda
+ * la suite. Los nombres calcan el espacio `table` del catálogo, así que
+ * montarlo es mapear clave a clave y no traducir de nuevo.
+ *
+ * Lo que NO está aquí es deliberado: el `caption` de una tabla y el `label`
+ * de una fila son contenido de ESA pantalla, no cromo del componente, y
+ * siguen siendo props sin valor por defecto.
+ */
+export interface TableMessages {
+    /** Rótulo oculto de la cabecera de la columna de acciones. */
+    actions: string;
+    /** Texto oculto de una columna ordenable que todavía no ordena. */
+    sortable: string;
+    /** Texto oculto de la columna ordenada de forma ascendente. */
+    sortedAscending: string;
+    /** Texto oculto de la columna ordenada de forma descendente. */
+    sortedDescending: string;
+}
 export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
     /**
      * Texto de `<caption>` (se oculta visualmente). **Opcional**: sin `caption` no se
@@ -19,7 +39,10 @@ export interface TableHeaderProps extends React.ThHTMLAttributes<HTMLTableCellEl
     onSort?: () => void;
     /** Marca esta columna como columna de acciones: ancho mínimo y cabecera oculta visualmente */
     actions?: boolean;
-    /** Texto accesible de la cabecera de acciones. Default: «Acciones» (castellano). Una app multiidioma debe pasarlo traducido. */
+    /**
+     * Texto accesible de la cabecera de acciones. Sin default: cuando no se
+     * pasa, sale de `table.actions` del `BrandMessagesProvider`.
+     */
     actionsLabel?: string;
     /**
      * Pega la columna al borde final (`inset-inline-end: 0`) cuando la tabla
@@ -29,13 +52,13 @@ export interface TableHeaderProps extends React.ThHTMLAttributes<HTMLTableCellEl
      */
     sticky?: 'end';
     /**
-     * Texto accesible del estado de ordenación ascendente. Default: "Ordenado ascendente"
-     * (castellano). Una app multiidioma debe pasarlo traducido.
+     * Texto accesible del estado de ordenación ascendente. Sin default:
+     * `table.sortedAscending`.
      */
     sortedAscLabel?: string;
-    /** Texto accesible del estado descendente. Default: «Ordenado descendente» (castellano). Una app multiidioma debe pasarlo traducido. */
+    /** Texto accesible del estado descendente. Sin default: `table.sortedDescending`. */
     sortedDescLabel?: string;
-    /** Texto accesible de la columna ordenable sin ordenar. Default: «Activar ordenación» (castellano). Una app multiidioma debe pasarlo traducido. */
+    /** Texto accesible de la columna ordenable sin ordenar. Sin default: `table.sortable`. */
     sortableLabel?: string;
     /**
      * Impide que el rótulo de esta columna se parta en dos líneas. Mismo valor
@@ -55,8 +78,8 @@ export interface TableRowProps extends Omit<React.HTMLAttributes<HTMLTableRowEle
     /**
      * Nombre accesible de la fila. Por defecto el rol `row` toma su nombre del
      * contenido de sus celdas; pásalo solo cuando ese texto no identifique la
-     * fila (celdas de solo iconos, datos crípticos). Default: castellano — no
-     * hay texto por defecto, es el consumidor quien lo escribe.
+     * fila (celdas de solo iconos, datos crípticos). No sale del catálogo
+     * común: identifica a ESTA fila, así que lo escribe el consumidor.
      */
     label?: string;
     children: ReactNode;

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/_types/organisms/DataTable/DataTable.d.ts

@@ -3,6 +3,18 @@ import { type ColumnDef, type RowData } from '@tanstack/react-table';
 import { type PaginationProps } from '../../molecules/Pagination/Pagination';
 import { type TableHeaderProps } from '../../molecules/Table/Table';
 import './DataTable.css';
+/**
+ * Los textos que la tabla de datos emite por su cuenta. Son dos, y los dos son
+ * cromo: el rótulo del buscador y el aviso de que no hay filas. El resto de su
+ * texto o llega por props de contenido (`ariaLabel`) o lo ponen sus piezas
+ * (`Table`, `Pagination`), cada una desde su propio espacio.
+ */
+export interface DataTableMessages {
+    /** Aviso del estado vacío cuando no hay filas que pintar. */
+    empty: string;
+    /** Rótulo —oculto a la vista— y placeholder del buscador. */
+    search: string;
+}
 /** Alineación del contenido de una columna. `start` es el default. */
 export type DataTableAlign = 'start' | 'center' | 'end';
 declare module '@tanstack/react-table' {
@@ -66,9 +78,15 @@ export interface DataTableProps<TData, TValue> {
         value: string;
         onChange: (value: string) => void;
     };
-    /** Placeholder y nombre accesible del buscador. */
+    /**
+     * Placeholder y nombre accesible del buscador. Sin default: cuando no se
+     * pasa, sale de `dataTable.search` del `BrandMessagesProvider`.
+     */
     searchPlaceholder?: string;
-    /** Nombre accesible del botón que vacía el buscador. Default castellano. */
+    /**
+     * Nombre accesible del botón que vacía el buscador. `DataTable` no le pone
+     * ninguno: sin esta prop manda el de `InputField`.
+     */
     searchClearLabel?: string;
     /** Se renderiza a la derecha del buscador. */
     toolbar?: ReactNode;
@@ -81,7 +99,11 @@ export interface DataTableProps<TData, TValue> {
     footerActions?: ReactNode;
     /** Filas por página cuando la tabla pagina en cliente. */
     pageSize?: number;
-    /** Texto del estado vacío. */
+    /**
+     * Texto del estado vacío. Sin default: sale de `dataTable.empty`. Pásalo
+     * cuando esta pantalla tenga algo propio que decir («Aún no has invitado a
+     * nadie»), que un catálogo común no puede saber.
+     */
     emptyMessage?: string;
     isLoading?: boolean;
     pagination?: DataTableServerPagination;
@@ -94,8 +116,8 @@ export interface DataTableProps<TData, TValue> {
  * paginación (en cliente o en servidor) sobre el `Table` y el `Pagination` del
  * DS. El comportamiento lo aporta TanStack Table.
  *
- * Los textos accesibles llegan por props (el DS no habla de i18n): los de
- * `Table` caen a sus castellanos por defecto, y los de `Pagination` —que ya no
- * tiene ninguno— al `BrandMessagesProvider` que la aplicación monta en su raíz.
+ * Ningún texto viene puesto: los propios salen del espacio `dataTable` del
+ * `BrandMessagesProvider`, y los de sus piezas de los suyos (`table`,
+ * `pagination`). Las props de texto siguen ahí como anulación puntual.
  */
 export declare function DataTable<TData, TValue>({ columns, data, ariaLabel, ariaLabelledBy, searchColumnId, search, searchPlaceholder, searchClearLabel, toolbar, footerActions, pageSize, emptyMessage, isLoading, pagination, headerLabels, paginationLabels, className, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

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%}