@studiolxd/brand 49.5.0 → 49.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -7,6 +7,62 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
7
7
  regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
8
8
  para breaking changes.
9
9
 
10
+ ## [49.7.0] — 2026-09-18
11
+
12
+ > **Minor.** El legend de `Fieldset` gana aire por debajo, igual que un `Heading` suelto.
13
+
14
+ ### El legend ya no queda pegado al primer campo
15
+
16
+ `Fieldset` pintaba el `legend` con tipografía de heading pero sin separación con lo que
17
+ venía debajo: el título quedaba pegado al primer campo. `.fieldset__legend` gana
18
+ `margin-block-end: var(--fieldset-legend-space-after)` (`fieldset.legend-space-after` →
19
+ `{text.heading.space-after}`, el mismo `em` que deja un `Heading` suelto, así que crece con
20
+ el nivel/tamaño del legend en lugar de ser una cifra fija). El aire entre los campos del
21
+ grupo sigue siendo cosa del consumidor, como hasta ahora.
22
+
23
+ ## [49.6.0] — 2026-09-18
24
+
25
+ > **Minor.** El icono deja de tener talla propia dentro de un enlace y de un botón: mide el texto
26
+ > que acompaña, y sube y baja con él.
27
+
28
+ ### `Icon size="text"` — el glifo que mide lo que el texto
29
+
30
+ Las cinco tallas de icono (8/16/24/48/64) son medidas fijas, y junto a un texto eso se nota: el
31
+ 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
32
+ primero y diminuto en el tercero. La talla nueva, `text`, no es una medida sino una relación — el
33
+ icono vale `1em`, o sea el cuerpo de letra que lo rodea. No trae token ni color: `1em` ya **es** el
34
+ tamaño del texto ambiente, y no hay valor de diseño que elegir. Las cinco tallas fijas se quedan
35
+ exactamente donde estaban; esto solo añade una sexta opción.
36
+
37
+ ### El icono de `Link` sigue al texto del enlace
38
+
39
+ El glifo de `icon` estaba clavado en `sm` (16px), de modo que un «← Volver» dentro de un título
40
+ llevaba una flecha de letra pequeña. Ahora usa `size="text"`: mide el texto del enlace, delante
41
+ (`iconPosition="start"`) y detrás (`end`). El aire entre icono y texto sigue siendo
42
+ `--link-icon-gap`, espaciado del sistema, y no escala con la tipografía a propósito: es
43
+ separación, no cuerpo de letra.
44
+
45
+ ### El icono de `Button` sigue al cuerpo de letra del control
46
+
47
+ Un icono pasado como hijo de un `Button` ya no necesita `size`: dentro del botón mide `1em`, que es
48
+ el `font-size` que cada talla fija (14, 16 y 20px en `sm`, `md` y `lg`), así que el glifo acompaña
49
+ al control en los tres tamaños y también cuando quien sube la talla es la superficie pública. Lo
50
+ hace una regla acotada en la hoja del botón, sin `data-slot` ni prop nueva.
51
+
52
+ **`iconOnly` queda fuera de esa regla, a propósito.** Ahí el glifo no acompaña a un texto —no hay
53
+ texto— sino que **es** el contenido del botón: su medida la decide la caja cuadrada (32/40/48), no
54
+ la tipografía, y con `1em` un botón de 40px se habría quedado con un glifo de 16 flotando en el
55
+ centro. En un botón de solo icono la talla la sigue poniendo el `Icon`.
56
+
57
+ Cambio visible para quien ya ponía un icono dentro de un botón con texto: ese glifo pasa de su
58
+ talla fija a la del texto (en un botón `lg`, de 16 a 20px). Es el efecto buscado y no cambia el
59
+ marcado ni la API.
60
+
61
+ Stories nuevas para verlo: «El icono sigue al texto» en `Link` (el mismo enlace en tres
62
+ tipografías, y el caso de «Ver en la plataforma de origen» con el icono detrás) y en `Button` (el
63
+ mismo botón en `sm`, `md` y `lg`), cada una con su test de contrato. Documentado en Foundations →
64
+ Iconografía § «El icono que sigue al texto», con remisión desde `Icon`, `Link` y `Button`.
65
+
10
66
  ## [49.5.0] — 2026-09-18
11
67
 
12
68
  > **Minor.** La cuenta se lee en dos líneas: el ítem de menú acepta una segunda línea bajo la
@@ -787,6 +787,7 @@ var e = {
787
787
  "--empty-state-description-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
788
788
  "--empty-state-description-font-size": "1rem",
789
789
  "--empty-state-description-color": "#4a4a4a",
790
+ "--fieldset-legend-space-after": "0.5em",
790
791
  "--figure-media-bg": "#f2f2f2",
791
792
  "--figure-caption-font-size": "0.875rem",
792
793
  "--figure-caption-line-height": "1.5",
@@ -328,7 +328,13 @@ export type IconName = keyof typeof ICONS;
328
328
  export declare const ICON_NAMES: IconName[];
329
329
  export interface IconProps {
330
330
  name: IconName;
331
- size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
331
+ /**
332
+ * Talla del glifo. Las cinco fijas del sistema (`xs`…`xl`) o `text`, que no
333
+ * es una talla sino una instrucción: el icono mide `1em`, o sea el tamaño
334
+ * de la tipografía que lo rodea, y sube y baja con ella. Es la que usan el
335
+ * enlace y el botón para que el glifo acompañe a su texto.
336
+ */
337
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'text';
332
338
  className?: string;
333
339
  }
334
340
  export declare function Icon({ name, size, className }: IconProps): import("react/jsx-runtime").JSX.Element;
@@ -16,7 +16,7 @@ export interface LinkProps extends React.ComponentPropsWithoutRef<'a'> {
16
16
  * desaparece en hover, igual en las dos.
17
17
  */
18
18
  tone?: 'accent' | 'ink' | 'accent-1';
19
- /** Un icono junto al texto («← Volver», «Descargar ↓»). Decorativo: el texto ya lo dice. */
19
+ /** 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. */
20
20
  icon?: IconName;
21
21
  /** Dónde va el icono: delante (`start`, por defecto) o detrás del texto. */
22
22
  iconPosition?: 'start' | 'end';