@studiolxd/brand 47.0.0 → 47.1.0

package/CHANGELOG.md

@@ -7,6 +7,48 @@ 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.
 
+## [47.1.0] — 2026-09-15
+
+> **Minor.** La norma de puntuación de subtítulos y estados vacíos, fijada por escrito en
+> Foundations → Redacción, con el JSDoc de `Hero`, `PageIntro` y `EmptyState` remitiendo a
+> ella. Documentación y ejemplos, sin cambios de comportamiento ni de CSS de por sí — salvo
+> el `fix` suelto que viaja en la misma release: un `Link` dejaba de medir su texto al ser
+> ítem directo de un `Stack align="stretch"`.
+
+### `PageIntro` gana `eyebrow`: la ranura encima del título
+
+Prop nueva, `eyebrow?: ReactNode`: lo que va **encima** del título —una `Tag` de estado,
+una categoría, un `Breadcrumb` corto—, nunca un subtítulo ni una frase larga (para eso
+sigue estando `description`). Con `actions`, el eyebrow se queda en la **columna del
+título**, nunca en la de las acciones: el título y las acciones pasan a compartir fila
+dentro de una nueva `.page-intro__title-group` que agrupa eyebrow y título, y las reglas
+de la fila (ancho flexible, línea base, aire bajo el bloque) se mueven de `.heading` a
+ese grupo. El hueco entre eyebrow y título es `--page-intro-row-gap`, el mismo que ya
+separaba el título de las acciones apiladas — ningún token nuevo. Sin `eyebrow`, el
+marcado es exactamente el de siempre. Story «Con eyebrow» y su test de contrato en
+`Molecules/PageIntro`.
+
+### Redacción: subtítulo y estado vacío terminan en punto
+
+Página nueva, `Foundations/Redacción`: todo subtítulo (`Hero.description`,
+`PageIntro.description`) y toda `EmptyState.description` terminan en punto; el `title` de
+`EmptyState`, los rótulos, los botones y los tags, no. Sin puntos suspensivos ni
+exclamación; el signo de interrogación solo si la frase es una pregunta de verdad. El
+JSDoc de las tres props afectadas remite a la página. `dataTable.empty` del catálogo de
+Storybook (`.storybook/brandMessagesFixture.ts`) llevaba un punto de más: alimenta el
+`title` de `EmptyState` dentro de `DataTable`, y un título no lleva punto.
+
+### Fix: un `Link` directo de un `Stack align="stretch"` no se estira
+
+`Link` fijaba su color, su subrayado y su relleno pero no su ancho: como ítem de un flex en
+columna con `align-items: stretch`, ocupaba todo el ancho del `Stack` y la línea de su
+subrayado cruzaba la página entera —el caso de un «← Volver» sobre un `PageIntro`—. Ahora
+`inline-size: fit-content` en la cara base del enlace (`a:not(.button)`, `.link`): su caja
+vuelve a ser la de su texto, sin tocar el enlace suelto en un párrafo (donde `width` no
+aplica a una caja `inline`) ni el centrado vertical de `Inline` (`align-items: center`),
+que un `align-self` habría descuadrado. Story «El enlace dentro de una columna» en
+`Atoms/Link`, con su test de contrato.
+
 ## [47.0.0] — 2026-09-15
 
 > **Major.** Octava familia al proveedor de textos: el cromo de aplicación y la navegación.

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

@@ -5,7 +5,9 @@ export interface EmptyStateAction {
     href?: string;
 }
 export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** El rótulo del estado: sin punto (ver Foundations → Redacción). */
     title: string;
+    /** La frase que lo explica, opcional: termina en punto (ver Foundations → Redacción). */
     description?: string;
     icon?: React.ReactNode;
     action?: EmptyStateAction;

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

@@ -2,16 +2,21 @@ import type { ReactNode } from 'react';
 import { type HeadingProps } from '../../atoms/Heading/Heading';
 import './PageIntro.css';
 export interface PageIntroProps {
+    /**
+     * Encima del título: una `Tag` de estado, una categoría, un `Breadcrumb`
+     * corto. No es un subtítulo ni acepta una frase larga —para eso está
+     * `description`—, es una pieza pequeña que sitúa la página antes de
+     * nombrarla. Con `actions`, queda en la columna del título, nunca en la
+     * de las acciones.
+     */
+    eyebrow?: ReactNode;
     /** El título de la página: un `Heading` de nivel 1 (o el que diga `level`). */
     title: ReactNode;
     /**
      * La frase bajo el título, opcional: va como entradilla (`Paragraph
-     * size="large"`, un peldaño por encima del cuerpo).
-     *
-     * **Es una frase y termina con puntuación final** —un punto, o el signo que
-     * le toque—: no es un rótulo ni un subtítulo. Sin el punto, el párrafo se
-     * lee como un `Heading` menor y la jerarquía de la cabecera se deshace. Lo
-     * que no llegue a frase o cabe en el título, o va en `children`.
+     * size="large"`, un peldaño por encima del cuerpo). Termina en punto (ver
+     * Foundations → Redacción). Lo que no llegue a frase, o cabe en el título,
+     * o va en `children`.
      */
     description?: ReactNode;
     /** Más texto bajo la frase (otro `Paragraph`, una lista…): mismo aire. */
@@ -45,4 +50,4 @@ export interface PageIntroProps {
  * Con `actions` sirve además de cabecera de una sección dentro de la página
  * (`level={2}`): el título a la izquierda y la acción principal a la derecha.
  */
-export declare function PageIntro({ title, description, actions, level, size, as: Tag, className, children, }: PageIntroProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageIntro({ eyebrow, title, description, actions, level, size, as: Tag, className, children, }: PageIntroProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/sections/Hero/Hero.d.ts

@@ -4,7 +4,10 @@ import './Hero.css';
 export interface HeroProps {
     /** El título de la portada: un `Heading` de nivel 1 a talla 10 (display). */
     title: ReactNode;
-    /** La frase bajo el título, opcional: `Paragraph size="large"`. */
+    /**
+     * La frase bajo el título, opcional: `Paragraph size="large"`. Termina en
+     * punto (ver Foundations → Redacción).
+     */
     description?: ReactNode;
     /** Uno o varios botones (`Button`), en fila con envoltura (`Inline`), bajo el texto. Van a talla `lg`: la escala del Hero lo pide, y el consumidor no tiene que acordarse de pasarla. */
     actions?: ReactNode;