@studiolxd/brand 49.4.0 → 49.6.0

package/CHANGELOG.md

@@ -7,6 +7,82 @@ 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.6.0] — 2026-09-18
+
+> **Minor.** El icono deja de tener talla propia dentro de un enlace y de un botón: mide el texto
+> que acompaña, y sube y baja con él.
+
+### `Icon size="text"` — el glifo que mide lo que el texto
+
+Las cinco tallas de icono (8/16/24/48/64) son medidas fijas, y junto a un texto eso se nota: el
+mismo enlace vive en un pie, en un párrafo y en un título, y un glifo de 16px se ve enorme en el
+primero y diminuto en el tercero. La talla nueva, `text`, no es una medida sino una relación — el
+icono vale `1em`, o sea el cuerpo de letra que lo rodea. No trae token ni color: `1em` ya **es** el
+tamaño del texto ambiente, y no hay valor de diseño que elegir. Las cinco tallas fijas se quedan
+exactamente donde estaban; esto solo añade una sexta opción.
+
+### El icono de `Link` sigue al texto del enlace
+
+El glifo de `icon` estaba clavado en `sm` (16px), de modo que un «← Volver» dentro de un título
+llevaba una flecha de letra pequeña. Ahora usa `size="text"`: mide el texto del enlace, delante
+(`iconPosition="start"`) y detrás (`end`). El aire entre icono y texto sigue siendo
+`--link-icon-gap`, espaciado del sistema, y no escala con la tipografía a propósito: es
+separación, no cuerpo de letra.
+
+### El icono de `Button` sigue al cuerpo de letra del control
+
+Un icono pasado como hijo de un `Button` ya no necesita `size`: dentro del botón mide `1em`, que es
+el `font-size` que cada talla fija (14, 16 y 20px en `sm`, `md` y `lg`), así que el glifo acompaña
+al control en los tres tamaños y también cuando quien sube la talla es la superficie pública. Lo
+hace una regla acotada en la hoja del botón, sin `data-slot` ni prop nueva.
+
+**`iconOnly` queda fuera de esa regla, a propósito.** Ahí el glifo no acompaña a un texto —no hay
+texto— sino que **es** el contenido del botón: su medida la decide la caja cuadrada (32/40/48), no
+la tipografía, y con `1em` un botón de 40px se habría quedado con un glifo de 16 flotando en el
+centro. En un botón de solo icono la talla la sigue poniendo el `Icon`.
+
+Cambio visible para quien ya ponía un icono dentro de un botón con texto: ese glifo pasa de su
+talla fija a la del texto (en un botón `lg`, de 16 a 20px). Es el efecto buscado y no cambia el
+marcado ni la API.
+
+Stories nuevas para verlo: «El icono sigue al texto» en `Link` (el mismo enlace en tres
+tipografías, y el caso de «Ver en la plataforma de origen» con el icono detrás) y en `Button` (el
+mismo botón en `sm`, `md` y `lg`), cada una con su test de contrato. Documentado en Foundations →
+Iconografía § «El icono que sigue al texto», con remisión desde `Icon`, `Link` y `Button`.
+
+## [49.5.0] — 2026-09-18
+
+> **Minor.** La cuenta se lee en dos líneas: el ítem de menú acepta una segunda línea bajo la
+> etiqueta, y la cabecera del menú de cuenta enseña la foto de la cuenta activa.
+
+### `MenuItem description` — el ítem de dos líneas
+
+Un ítem de menú solo sabía decir una cosa: icono y una línea. El selector de varias cuentas del
+shell tenía que apretar ahí nombre y correo —«Ana García · ana@…»— con el avatar haciendo de
+icono, que es justo la información que se lee peor cuando hay tres cuentas parecidas.
+
+`description` (opcional, en los ítems `button` y `link`) pinta esa segunda línea debajo de la
+etiqueta, más tenue, y centra el icono —el avatar— contra el bloque de las dos. Cada línea se
+recorta con puntos suspensivos, así que un correo largo no ensancha el panel. Es **aditivo**: sin
+`description` el ítem sale con el marcado de siempre —ni envoltorio de texto ni segunda línea—, y
+los menús de una línea que ya existen no cambian ni un píxel.
+
+No hay tokens nuevos. La segunda línea toma la letra y la tinta del rótulo de sección
+(`menu.label-font-size`, `menu.label-color`), que es el papel que ya cumplen en este menú, y bajo
+el puntero o el teclado va con la tinta del ítem resaltado en vez de con la suya, para no quedarse
+gris sobre el relleno de marca. Las clases son `menu__item-icon`, `-text`, `-label` y
+`-description`; el `UserMenu` las tiene con su prefijo y su propia tinta (la del correo de la
+cabecera), para que una lista de cuentas dentro de ese panel se lea igual.
+
+### `UserMenu` — la cabecera enseña a quién pertenece la cuenta
+
+La cabecera del panel decía el nombre y el correo, pero no enseñaba la foto: el avatar solo
+estaba en el disparador, y al abrir el menú desaparecía justo cuando hace falta confirmar en qué
+cuenta estás. Ahora la cabecera es una fila: el `Avatar` de siempre a la izquierda (foto o, sin
+`avatarUrl`, las iniciales) y, al lado, nombre y correo en columna. Decorativo (`alt=""`), porque
+el nombre va escrito al lado. El aire entre foto y texto es el mismo que en el disparador
+(`user-menu.trigger-gap`): es la misma pareja. Sin tokens nuevos.
+
 ## [49.4.0] — 2026-09-17
 
 > **Minor.** Cuatro huecos que dejó al descubierto la campaña de crudos de bricks: un bocadillo

package/dist/_shared/dropdownitems.js

@@ -7,11 +7,22 @@ function i({ children: e, ...n }) {
 		children: e
 	});
 }
-function a(r, i) {
+function a(r, i, a, o) {
+	let s = a && o ? /* @__PURE__ */ n("span", {
+		className: `${o}__item-text`,
+		children: [/* @__PURE__ */ t("span", {
+			className: `${o}__item-label`,
+			children: r
+		}), /* @__PURE__ */ t("span", {
+			className: `${o}__item-description`,
+			children: a
+		})]
+	}) : r;
 	return i ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("span", {
 		"aria-hidden": "true",
+		className: o ? `${o}__item-icon` : void 0,
 		children: i
-	}), r] }) : /* @__PURE__ */ t(e, { children: r });
+	}), s] }) : /* @__PURE__ */ t(e, { children: s });
 }
 function o(e) {
 	return e.reduce((e, t) => {
@@ -22,8 +33,8 @@ function o(e) {
 		}), e;
 	}, []);
 }
-function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClass: c, radioValue: l, onRadioValueChange: u }) {
-	let d = (e, o) => {
+function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClass: c, blockClass: l, radioValue: u, onRadioValueChange: d }) {
+	let f = (e, o) => {
 		if (e.type === "separator") return /* @__PURE__ */ t(r.Separator, { className: i }, o);
 		if (e.type === "label") return c ? /* @__PURE__ */ t(r.Group, { children: /* @__PURE__ */ t(r.GroupLabel, {
 			className: c,
@@ -34,20 +45,20 @@ function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClas
 			value: e.value,
 			disabled: e.disabled,
 			closeOnClick: e.closeOnSelect !== !1,
-			children: a(e.label, e.icon)
+			children: a(e.label, e.icon, void 0, l)
 		}, o);
-		let l = a(e.label, e.icon);
+		let u = a(e.label, e.icon, e.description, l);
 		return e.type === "link" ? e.disabled ? /* @__PURE__ */ t(r.Item, {
 			className: n(e.destructive),
 			disabled: !0,
-			children: l
+			children: u
 		}, o) : /* @__PURE__ */ t(r.Item, {
 			className: n(e.destructive),
 			render: (t) => s({
 				...t,
 				href: e.href,
 				className: t.className ?? n(e.destructive),
-				children: l
+				children: u
 			})
 		}, o) : /* @__PURE__ */ t(r.Item, {
 			className: n(e.destructive),
@@ -60,18 +71,18 @@ function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClas
 				}
 				setTimeout(() => e.onClick(), 0);
 			},
-			children: l
+			children: u
 		}, o);
-	}, f = e;
-	if (!f.some((e) => e.type === "radio")) return f.map(d);
-	let p = 0;
-	return o(f).map((e, n) => {
-		let i = p;
-		p += e.items.length;
-		let a = e.items.map((e, t) => d(e, i + t));
+	}, p = e;
+	if (!p.some((e) => e.type === "radio")) return p.map(f);
+	let m = 0;
+	return o(p).map((e, n) => {
+		let i = m;
+		m += e.items.length;
+		let a = e.items.map((e, t) => f(e, i + t));
 		return e.radio ? /* @__PURE__ */ t(r.RadioGroup, {
-			value: l,
-			onValueChange: (e) => u?.(String(e)),
+			value: u,
+			onValueChange: (e) => d?.(String(e)),
 			children: a
 		}, `radio-${n}`) : a;
 	});

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

@@ -328,7 +328,13 @@ export type IconName = keyof typeof ICONS;
 export declare const ICON_NAMES: IconName[];
 export interface IconProps {
     name: IconName;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Talla del glifo. Las cinco fijas del sistema (`xs`…`xl`) o `text`, que no
+     * es una talla sino una instrucción: el icono mide `1em`, o sea el tamaño
+     * de la tipografía que lo rodea, y sube y baja con ella. Es la que usan el
+     * enlace y el botón para que el glifo acompañe a su texto.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'text';
     className?: string;
 }
 export declare function Icon({ name, size, className }: IconProps): import("react/jsx-runtime").JSX.Element;

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

@@ -16,7 +16,7 @@ export interface LinkProps extends React.ComponentPropsWithoutRef<'a'> {
      * desaparece en hover, igual en las dos.
      */
     tone?: 'accent' | 'ink' | 'accent-1';
-    /** Un icono junto al texto («← Volver», «Descargar ↓»). Decorativo: el texto ya lo dice. */
+    /** Un icono junto al texto («← Volver», «Descargar ↓»). Decorativo: el texto ya lo dice. Mide lo que el texto del enlace (`1em`) y sube y baja con él. */
     icon?: IconName;
     /** Dónde va el icono: delante (`start`, por defecto) o detrás del texto. */
     iconPosition?: 'start' | 'end';

package/dist/_types/molecules/_shared/dropdownItems.d.ts

@@ -2,6 +2,13 @@ import type { ReactNode } from 'react';
 export type MenuButtonItem = {
     type: 'button';
     label: string;
+    /**
+     * Segunda línea del ítem, más tenue: el correo de una cuenta, el detalle de
+     * una acción. Con ella el ítem se pinta a dos líneas —`label` arriba,
+     * `description` debajo— y el icono se alinea al bloque entero. Sin ella, el
+     * ítem se pinta a una línea, exactamente igual que siempre.
+     */
+    description?: string;
     icon?: ReactNode;
     onClick: () => void;
     disabled?: boolean;
@@ -16,6 +23,8 @@ export type MenuButtonItem = {
 export type MenuLinkItem = {
     type: 'link';
     label: string;
+    /** Segunda línea del ítem, más tenue. Igual que en el ítem `button`. */
+    description?: string;
     icon?: ReactNode;
     href: string;
     disabled?: boolean;
@@ -63,9 +72,17 @@ interface RenderDropdownItemsOptions {
     renderLink: (props: MenuRenderLinkProps) => ReactNode;
     /** Clase del rótulo de sección (ítems `label`). Sin ella, no se renderizan. */
     labelClass?: string;
+    /**
+     * Bloque BEM del menú que renderiza (`menu`, `user-menu`…): de él salen las
+     * clases del icono y de las dos líneas del ítem (`<bloque>__item-icon`,
+     * `-text`, `-label`, `-description`). Sin él, el ítem se pinta como siempre
+     * —una línea y el icono sin clase— y `description` se ignora: un menú que no
+     * viste la segunda línea no la dibuja a medias.
+     */
+    blockClass?: string;
     /** Valor activo del grupo de radio. */
     radioValue?: string;
     onRadioValueChange?: (value: string) => void;
 }
-export declare function renderDropdownItems({ items, itemClass, separatorClass, renderLink, labelClass, radioValue, onRadioValueChange, }: RenderDropdownItemsOptions): ReactNode;
+export declare function renderDropdownItems({ items, itemClass, separatorClass, renderLink, labelClass, blockClass, radioValue, onRadioValueChange, }: RenderDropdownItemsOptions): ReactNode;
 export {};