@studiolxd/brand 49.24.1 → 49.26.0

package/CHANGELOG.md

@@ -7,6 +7,81 @@ 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.
 
+## [49.26.0] — 2026-10-05
+
+> **Minor (49.26.0).** `LoadingState` puede pintar su texto en esperas largas con pasos. Sin cambios
+> incompatibles: por defecto sigue mostrándose solo el girador.
+
+### `LoadingState` — `labelVisible`
+
+- Prop nueva **`labelVisible`** (por defecto `false`): pinta el `label` bajo el girador, centrado, con el
+  estilo de la descripción de `EmptyState`. Para esperas largas con pasos («Procesando el documento:
+  paso 2 de 5…»); en esperas cortas no se usa.
+- Es el mismo nodo que da el nombre accesible (no se duplica el anuncio). La caja lleva
+  `aria-live="polite"` y `aria-atomic="false"`: al cambiar el `label` se anuncia solo el texto nuevo.
+- Sin `label` propio no pinta el texto genérico del catálogo: la espera sigue con el texto oculto (no es error).
+- Tokens nuevos: `loading-state.label-font-family`, `label-font-size`, `sm-label-font-size`, `label-color`
+  (apuntan a los de la descripción de `EmptyState`; el par oscuro llega por el fichero derivado).
+
+### `FileUpload` / `FileUploadField` — estado de subida (`uploading`)
+
+- Props nuevas: **`uploading`** (el girador va dentro de la zona; la zona no admite otro fichero —clic,
+  selector, soltar y quitar quedan inertes— pero conserva el foco: no es `disabled`; el control lleva
+  `aria-busy` y `aria-disabled`), **`uploadingLabel`** (texto de la espera; sin él, `spinner.label` del
+  catálogo, sin texto cableado nuevo) y **`uploadingLabelVisible`** (lo pinta en la zona, con el mismo criterio
+  que `LoadingState labelVisible`: sin `uploadingLabel` propio no pinta nada).
+- La espera se anuncia con cortesía (`role="status"`, `aria-live="polite"`, `aria-atomic="false"`).
+- Sin tokens nuevos. `FileUploadField` las hereda del átomo. Sin ficha de paridad nativa (el componente no la tiene).
+
+## [49.25.0] — 2026-10-05
+
+> **Minor.** Las esperas pasan a ser piezas del sistema: las aplicaciones dejan de
+> componerlas a mano (`LoadingRegion`/`SkeletonLines`/`SkeletonTable` de lmsmcp, `LoadingState`/
+> `LoadingList`/`LoadingGrid` de creator, los botones con `Spinner` metido a mano). Criterio de la
+> suite: esqueleto cuando se conoce la forma de lo que llega, girador cuando no o cuando se espera
+> una acción, y la espera la anuncia el contenedor. Sin cambios incompatibles.
+
+### `LoadingState` — la espera de un bloque sin forma conocida (`@studiolxd/brand/loading-state`)
+
+- Un girador centrado en los dos ejes, en una caja que reserva alto: nunca un `Spinner` suelto.
+- **Solo se ve el girador.** El texto de la espera es el nombre accesible de la caja (`role="status"`,
+  `aria-busy`, `aria-labelledby` al texto oculto) y no se pinta. `label` lo cambia; sin él sale de
+  `spinner.label` del `BrandMessagesProvider` (sin espacio de textos nuevo). Fuera del proveedor hay
+  que pasar `label`: sin él ni catálogo, el error explícito de siempre.
+- Tallas `md` (página o zona) y `sm` (diálogo, hoja, popover); `action` opcional (p. ej. «Cancelar»),
+  con el mismo `EmptyStateAction` que `EmptyState`.
+- El alto: en una zona con alto definido la ocupa entera; en un flujo sin alto reserva el mínimo de
+  la talla; con **`fill`**, a página completa, toma el alto visible bajo la cabecera del `AppShell` y
+  centra sin provocar desplazamiento (para el `loading.tsx` de una ruta).
+
+### `LoadingRegion` y los esqueletos compuestos (`@studiolxd/brand/loading-region`)
+
+- `LoadingRegion` envuelve esqueletos y anuncia la espera (`role="status"`, `aria-busy`, texto oculto
+  de `label` o `spinner.label`). `announce={false}` la deja solo a la vista, con `aria-hidden`, cuando
+  ya anuncia otra región viva.
+- `SkeletonText` (`lines`, la última más corta), `SkeletonList` (`rows`), `SkeletonTable` (`rows`,
+  más la cabecera) y `SkeletonGrid` (`columns` 2|3|4, `rows`). Decorativos, sin atributo `style`: el
+  alto de cada barra sale de su token.
+
+### `Button loading`
+
+- El girador entra delante del texto, que se queda; mide `1em`, como el icono que acompaña al
+  texto. Con `iconOnly` sustituye al icono y el botón no cambia de ancho.
+- Inactivo y dicho: `aria-busy="true"` + `aria-disabled="true"`, **sin** `disabled` nativo (no
+  pierde el foco); el clic y el envío del formulario se cortan en el manejador. Con `href` quita el
+  `href`, como `disabled`. Con `render={<Link />}` corta el clic normal; el `href` del `Link` sigue
+  ahí (clic con modificador). No cambia dónde se puede usar `render` (solo desde cliente).
+- Nativo: `loading` entra en `excluded` de la ficha de paridad de `Button` hasta que una app nativa
+  lo pida.
+
+### Tokens nuevos
+
+- `loading-state.*`: `min-block-size`, `sm-min-block-size`, `gap`, `padding-block`, `padding-inline`,
+  `sm-padding-block`, `spinner-color` (en cascada desde `empty-state.*`).
+- `loading-region.*`: `gap`, `text-gap`, `text-last-line-width`, `list-gap`, `list-row-height`,
+  `table-gap`, `table-header-height`, `table-row-height`, `grid-gap`, `grid-item-height`.
+- `button.loading-gap`, `button.loading-spinner-size`.
+
 ## [49.24.1] — 2026-10-04
 
 > **Patch.** `AppShell` y `ChatShell` ya no rompen la hidratación por debajo del punto de ruptura de

package/dist/_shared/tokens.js

@@ -407,6 +407,8 @@ var e = {
 	"--button-height": "2.5rem",
 	"--button-sm-height": "2rem",
 	"--button-lg-height": "3rem",
+	"--button-loading-gap": "0.5rem",
+	"--button-loading-spinner-size": "1em",
 	"--button-padding-inline": "2rem",
 	"--button-focus-ring-width": "2px",
 	"--button-focus-ring-style": "solid",
@@ -1103,6 +1105,27 @@ var e = {
 	"--link-accent-1-hover-color": "#baabff",
 	"--link-accent-1-underline-width": "1px",
 	"--link-accent-1-hover-underline-width": "0px",
+	"--loading-region-gap": "1.5rem",
+	"--loading-region-text-gap": "0.5rem",
+	"--loading-region-text-last-line-width": "60%",
+	"--loading-region-list-gap": "0.5rem",
+	"--loading-region-list-row-height": "2.5rem",
+	"--loading-region-table-gap": "0.5rem",
+	"--loading-region-table-header-height": "2.5rem",
+	"--loading-region-table-row-height": "2rem",
+	"--loading-region-grid-gap": "1rem",
+	"--loading-region-grid-item-height": "6rem",
+	"--loading-state-min-block-size": "16rem",
+	"--loading-state-sm-min-block-size": "8rem",
+	"--loading-state-gap": "1rem",
+	"--loading-state-padding-block": "3rem",
+	"--loading-state-padding-inline": "1.5rem",
+	"--loading-state-sm-padding-block": "1.5rem",
+	"--loading-state-spinner-color": "#6b6b6b",
+	"--loading-state-label-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+	"--loading-state-label-font-size": "1rem",
+	"--loading-state-sm-label-font-size": "0.875rem",
+	"--loading-state-label-color": "#4a4a4a",
 	"--logo-height-sm": "2rem",
 	"--logo-height-md": "2.5rem",
 	"--logo-height-lg": "3rem",

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

@@ -60,6 +60,20 @@ export interface ButtonBaseProps extends Omit<React.ComponentPropsWithoutRef<'bu
      */
     type?: 'button' | 'submit' | 'reset';
     onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    /**
+     * La acción está en marcha: el girador entra delante del texto (que se queda
+     * a la vista) y el botón queda inactivo y lo dice — `aria-busy="true"` y
+     * `aria-disabled="true"`. No usa `disabled` nativo a propósito: un botón que
+     * se deshabilita justo después del clic pierde el foco, y el lector de
+     * pantalla con él. El clic (y el envío del formulario, si es `submit`) se
+     * corta en el manejador.
+     *
+     * Con texto, el botón crece lo que ocupan el girador y su aire; con
+     * `iconOnly` el girador **sustituye** al icono y el botón no cambia de ancho.
+     * El resultado de la acción no lo anuncia el botón: lo anuncia quien lo
+     * enseña (el `Toast`, el error del campo).
+     */
+    loading?: boolean;
     /** Renders as <a> when provided */
     href?: string;
     /** Adds target="_blank" rel="noopener noreferrer" (solo con href) */

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

@@ -44,6 +44,28 @@ export interface FileUploadProps {
     defaultValue?: File[];
     onChange?: (files: File[]) => void;
     progress?: number;
+    /**
+     * La subida está en curso. El girador sustituye al icono **dentro de la
+     * zona**, que deja de admitir ficheros (clic, selector y soltar quedan
+     * inertes, también el aspa de quitar) pero **conserva el foco**: no es
+     * `disabled`, así que quien estaba en el campo no lo pierde. El control
+     * lleva `aria-busy` y `aria-disabled`, y la espera se anuncia con cortesía
+     * (`role="status"`). Es distinto de `progress`, que dibuja una barra con un
+     * porcentaje conocido: pueden convivir.
+     */
+    uploading?: boolean;
+    /**
+     * Texto de la subida en curso («Subiendo 2 de 5…»). **No se ve** salvo con
+     * `uploadingLabelVisible`: es lo que anuncia el lector de pantalla. **Sin
+     * default**: sin él, sale de `spinner.label` del `BrandMessagesProvider`.
+     */
+    uploadingLabel?: string;
+    /**
+     * Pinta `uploadingLabel` en la zona, bajo el girador, para subidas largas con
+     * progreso por pasos. **Sin `uploadingLabel` propio no pinta nada**: el
+     * texto genérico del catálogo no se ve nunca. Default `false`.
+     */
+    uploadingLabelVisible?: boolean;
     disabled?: boolean;
     error?: boolean;
     id?: string;

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

@@ -0,0 +1,53 @@
+import './LoadingRegion.css';
+export interface LoadingRegionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> {
+    /**
+     * Lo que se espera, con puntos suspensivos («Cargando bancos…»). Se anuncia,
+     * no se ve. **Sin default**: sin él, sale de `spinner.label` del
+     * `BrandMessagesProvider`. No se lee cuando `announce` es `false`.
+     */
+    label?: string;
+    /**
+     * `false` cuando la espera ya la anuncia una región viva que existe antes y
+     * después de cargar: la región queda solo a la vista (`aria-hidden`), para
+     * no anunciarla dos veces.
+     */
+    announce?: boolean;
+    /** Los esqueletos: `SkeletonText`, `SkeletonList`, `SkeletonTable`, `SkeletonGrid` o `Skeleton` sueltos. */
+    children: React.ReactNode;
+}
+/**
+ * La espera de un contenido cuya forma se conoce: reserva su sitio con
+ * esqueletos y la página no salta al llegar. El `Skeleton` es decorativo; quien
+ * anuncia es esta región, con `role="status"`, `aria-busy` y el texto de la
+ * espera oculto a la vista. Apila sus hijos con aire entre bloques.
+ */
+export declare function LoadingRegion({ label, announce, children, className, ...rest }: LoadingRegionProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonTextProps {
+    /** Líneas del párrafo; la última sale más corta. */
+    lines?: number;
+}
+/** Un bloque de texto —un párrafo, una lista de definiciones— que aún no llegó. Decorativo. */
+export declare function SkeletonText({ lines }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonListProps {
+    /** Filas de la lista. */
+    rows?: number;
+}
+/** Una lista que aún no llegó: una barra por fila, del alto de un control. Decorativo. */
+export declare function SkeletonList({ rows }: SkeletonListProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonTableProps {
+    /** Filas de cuerpo, sin contar la cabecera. */
+    rows?: number;
+}
+/**
+ * Una tabla que aún no llegó: la cabecera y sus filas. No calca el diseño —no
+ * hace falta—, solo ocupa un sitio parecido. Decorativo.
+ */
+export declare function SkeletonTable({ rows }: SkeletonTableProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonGridProps {
+    /** Columnas de la rejilla. */
+    columns?: 2 | 3 | 4;
+    /** Filas de la rejilla: se pintan `columns × rows` celdas. */
+    rows?: number;
+}
+/** Una rejilla de tarjetas o miniaturas que aún no llegó. Decorativo. */
+export declare function SkeletonGrid({ columns, rows }: SkeletonGridProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,50 @@
+import type { EmptyStateAction } from '../EmptyState/EmptyState';
+import './LoadingState.css';
+export interface LoadingStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
+    /**
+     * Lo que se espera, con puntos suspensivos («Cargando revisión…»: ver
+     * Foundations → Redacción). **No se ve**: es el nombre accesible de la
+     * espera y lo que anuncian los lectores de pantalla. **Sin default**: sin
+     * él, sale de `spinner.label` del `BrandMessagesProvider` — el mismo texto
+     * que el `Spinner`.
+     */
+    label?: string;
+    /**
+     * Pinta el `label` bajo el girador, centrado, con el texto atenuado de la
+     * descripción de `EmptyState`. Para esperas **largas con pasos** («Procesando
+     * el documento: paso 2 de 5…»), donde el texto informa de por dónde va. Es el
+     * mismo nodo que da el nombre accesible: no se anuncia dos veces, y cuando
+     * `label` cambia la región lo anuncia con cortesía (`polite`). **Sin `label`
+     * propio no pinta nada**: el texto genérico del catálogo («Cargando…») no se
+     * ve nunca. Por defecto `false`: en una espera corta el texto es ruido.
+     */
+    labelVisible?: boolean;
+    /**
+     * `md` para una página o una zona; `sm` para el cuerpo de un diálogo, una
+     * hoja, un popover o una barra lateral.
+     */
+    size?: 'sm' | 'md';
+    /**
+     * A página completa: la caja toma el alto visible bajo la cabecera del
+     * `AppShell` (la ventana menos el cromo del armazón y el relleno del
+     * contenido) y centra el girador en él, sin provocar desplazamiento. Para el
+     * `loading.tsx` de una ruta cuya forma no se conoce. Sin `fill`, la caja ya
+     * ocupa el alto de una zona que lo tenga definido y, si no, reserva el
+     * mínimo de su talla.
+     */
+    fill?: boolean;
+    /** Una salida mientras se espera (cancelar un proceso largo). */
+    action?: EmptyStateAction;
+}
+/**
+ * La espera de un bloque cuya forma no se conoce: un girador centrado en una
+ * caja que **reserva alto** y, si hace falta, una salida. A la vista solo está
+ * el girador; el texto de la espera es solo para los lectores de pantalla,
+ * salvo con `labelVisible` (esperas largas con pasos). Cuando la forma sí se conoce (tabla, lista, ficha), la respuesta es
+ * `LoadingRegion` con esqueletos.
+ *
+ * Anuncia: la caja es `role="status"` con `aria-busy`, y su nombre es el texto
+ * de la espera, oculto a la vista. El girador va decorativo, para no
+ * anunciarla dos veces.
+ */
+export declare function LoadingState({ label, labelVisible, size, fill, action, className, ...rest }: LoadingStateProps): import("react/jsx-runtime").JSX.Element;