@studiolxd/brand 49.0.0 → 49.1.0

package/CHANGELOG.md

@@ -7,6 +7,67 @@ 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.1.0] — 2026-09-16
+
+> **Minor.** Regla visual nueva, sin cambios de API: **un enlace dentro de un `Alert` o de un
+> toast del `Toaster` se pinta siempre en tinta (`tone="ink"`), nunca en acento.** El acento
+> compite con el color de estado del propio aviso (el amarillo de `warning`, el rojo de
+> `error`) y con la acción principal del aviso.
+
+### El porqué
+
+Hasta ahora un `<Link>` embebido en el título o la descripción de un aviso salía con el tono
+que le pasara el consumidor — normalmente el acento por defecto, pensado para leer sobre la
+página, no sobre un relleno de estado.
+
+### El arreglo
+
+Lo garantiza el CSS del `Alert`, no la disciplina de quien lo usa. Dentro de `.alert` (clase
+que también lleva cada toast del `Toaster`, que comparte su cara) todo `.link` y todo `<a>`
+suelto se pinta con el mismo token que ya usa el título y la descripción del aviso
+(`--alert-title-ink`/`--alert-description-ink`, iguales entre sí, y ya resueltos por
+intención y por superficie) en vez de con `--link-color`. Gana incluso un `tone="accent"`
+explícito, por especificidad de contenedor (`.alert .link` pesa más que la clase de tono
+sola) y sin `!important`.
+
+Documentado en `Alert` § «Los enlaces van en tinta», en `Toast` § «Los enlaces van en tinta»
+(remite al `Alert`, comparten CSS) y en Fundamentos › Colores § «Un enlace dentro de un
+aviso lee en tinta, no en acento». Contrato cubierto por una story de test en cada
+componente (`Molecules/Alert` y `Molecules/Toast`), que mide el color computado del enlace
+contra el del título del aviso en las variantes `default`/`warning`/`error`.
+
+## [49.0.1] — 2026-09-16
+
+> **Patch.** Arregla una regresión de la v47.1.0: `Link.css` colgaba `inline-size:
+> fit-content` de TODO `<a>` del documento (`a:where(:not(.button))`), no solo del enlace
+> del sistema (`.link`). Cualquier `<a>` que fuera pieza de OTRO componente con su propia
+> clase BEM y que no fijara su propio ancho se encogía a su texto: el ítem `link` de `Menu`
+> (`<a class="menu__item">`, en `ContextMenu`/`UserMenu`) quedaba como una cajita junto a un
+> ítem `button` que sí ocupaba la fila, y una `Card` con `href` (o `render={<a/>}`) dentro de
+> una rejilla (`Columns align="stretch"`) se encogía a su título en vez de ocupar la celda —
+> más visible cuanto más corto el título, porque el texto largo ya llenaba el hueco y
+> disimulaba el bug.
+
+### El arreglo
+
+`inline-size: fit-content` sale del selector combinado y pasa a una regla aparte con
+`:where(.link)` en solitario: solo el enlace del sistema (el átomo `Link`, o cualquier cosa
+que lleve `class="link"`) se resiste a estirarse en un `Stack`/`Inline`. El `<a>` pelado
+sigue vistiéndose (color, subrayado, foco) desde el selector de siempre, sin el
+`inline-size`: lo que necesita su ancho de layout —`menu__item`, `card`, y cualquier otro
+`<a>` con clase propia que no lo pise ya con su propio `width`/`inline-size`/`flex`— deja de
+perderlo por una regla que no era la suya. Barrido el árbol de `src/`: ningún otro `<a>` de
+componente (`sidebar-nav__link`, `breadcrumb__link`, `pagination__link`, `tabs__tab`,
+`site-nav__link`, `project-card__link`…) dependía del `inline-size` que se retira — todos o
+fijan su propio ancho o son enlaces de una sola palabra donde `fit-content` nunca actuaba.
+
+Dos stories de contrato nuevas (`tags: ['!dev']`, corren en `test:stories`):
+`Molecules/Menu` → «el ítem enlace ocupa el mismo ancho que el ítem botón», y
+`Molecules/Card` → «cards enlazadas en rejilla ocupan su celda» (título corto y largo, mismo
+ancho de celda). La story de `Atoms/Link` → «no se estira dentro de un Stack
+`align="stretch"`» sigue en verde: sigue siendo `.link`, así que conserva su ancho de
+contenido.
+
 ## [49.0.0] — 2026-09-16
 
 > **Major.** La **última ola** del proveedor de textos, y la más distinta: el chat y las

package/dist/alert.css

@@ -1 +1 @@
-:root{--alert-padding-block:var(--spacing-4);--alert-padding-inline:var(--spacing-5);--alert-gap:var(--spacing-3);--alert-content-gap:var(--spacing-2);--alert-actions-margin-block-start:var(--spacing-3);--alert-title-line-height:var(--line-height-snug);--alert-close-size:var(--size-component-sm);--alert-close-inset:var(--spacing-2);--alert-border-radius:var(--border-radius-default);--alert-border-width:var(--border-width-default);--alert-actions-gap:var(--form-actions-gap);--alert-bg:var(--color-primary);--alert-border-color:var(--color-text-on-dark);--alert-title-font-size:var(--text-font-size);--alert-title-font-weight:var(--font-weight-emphasis);--alert-title-color:var(--color-text-on-dark);--alert-description-font-size:var(--text-font-size);--alert-description-line-height:var(--text-line-height);--alert-description-color:var(--color-text-on-dark);--alert-success-bg:var(--color-success-fill);--alert-success-border-color:var(--color-success-fill);--alert-success-title-color:var(--color-success-fill-text);--alert-success-description-color:var(--color-success-fill-text);--alert-error-bg:var(--color-error-fill);--alert-error-border-color:var(--color-error-fill);--alert-error-title-color:var(--color-error-fill-text);--alert-error-description-color:var(--color-error-fill-text);--alert-warning-bg:var(--color-warning-fill);--alert-warning-border-color:var(--color-warning-fill);--alert-warning-title-color:var(--color-warning-fill-text);--alert-warning-description-color:var(--color-warning-fill-text);--alert-warning-close-color:var(--color-warning-fill-text)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--alert-bg:var(--color-text-on-dark);--alert-border-color:var(--color-text-on-dark);--alert-title-color:var(--color-primary);--alert-description-color:var(--color-primary)}.alert{background-color:var(--alert-bg);border:var(--alert-border-width) solid var(--alert-border-color);border-radius:var(--alert-border-radius);padding-block:var(--alert-padding-block);padding-inline:var(--alert-padding-inline);align-items:flex-start;gap:var(--alert-gap);box-sizing:border-box;--alert-title-ink:var(--alert-title-color);--alert-description-ink:var(--alert-description-color);display:flex;position:relative}.alert.alert--dismissible{padding-inline-end:calc(var(--alert-close-inset) * 2 + var(--alert-close-size))}.alert__content{flex:1;min-width:0}.alert__title{font-size:var(--alert-title-font-size);font-weight:var(--alert-title-font-weight);color:var(--alert-title-ink);line-height:var(--alert-title-line-height);margin:0}.alert__description{font-size:var(--alert-description-font-size);color:var(--alert-description-ink);line-height:var(--alert-description-line-height);margin:0;align-items:start;gap:var(--alert-content-gap);flex-direction:column;margin-block-start:var(--alert-content-gap);display:flex}.alert__actions{align-items:stretch;gap:var(--alert-actions-gap);flex-direction:column;margin-block-start:var(--alert-actions-margin-block-start);display:flex}.alert__actions>*{inline-size:100%}@media (width>=768px){.alert__actions{flex-flow:wrap;align-items:center}.alert__actions>*{inline-size:auto}}.alert .alert__close{--close-button-size:var(--alert-close-size);position:absolute;inset-block-start:var(--alert-close-inset);inset-inline-end:var(--alert-close-inset)}.alert.alert--success{--alert-bg:var(--alert-success-bg);--alert-border-color:var(--alert-success-border-color);--alert-title-color:var(--alert-success-title-color);--alert-description-color:var(--alert-success-description-color)}.alert.alert--error{--alert-bg:var(--alert-error-bg);--alert-border-color:var(--alert-error-border-color);--alert-title-color:var(--alert-error-title-color);--alert-description-color:var(--alert-error-description-color)}.alert.alert--warning{--alert-bg:var(--alert-warning-bg);--alert-border-color:var(--alert-warning-border-color);--alert-title-color:var(--alert-warning-title-color);--alert-description-color:var(--alert-warning-description-color);--close-button-color:var(--alert-warning-close-color);--close-button-focus-ring-color:var(--alert-warning-close-color)}
+:root{--alert-padding-block:var(--spacing-4);--alert-padding-inline:var(--spacing-5);--alert-gap:var(--spacing-3);--alert-content-gap:var(--spacing-2);--alert-actions-margin-block-start:var(--spacing-3);--alert-title-line-height:var(--line-height-snug);--alert-close-size:var(--size-component-sm);--alert-close-inset:var(--spacing-2);--alert-border-radius:var(--border-radius-default);--alert-border-width:var(--border-width-default);--alert-actions-gap:var(--form-actions-gap);--alert-bg:var(--color-primary);--alert-border-color:var(--color-text-on-dark);--alert-title-font-size:var(--text-font-size);--alert-title-font-weight:var(--font-weight-emphasis);--alert-title-color:var(--color-text-on-dark);--alert-description-font-size:var(--text-font-size);--alert-description-line-height:var(--text-line-height);--alert-description-color:var(--color-text-on-dark);--alert-success-bg:var(--color-success-fill);--alert-success-border-color:var(--color-success-fill);--alert-success-title-color:var(--color-success-fill-text);--alert-success-description-color:var(--color-success-fill-text);--alert-error-bg:var(--color-error-fill);--alert-error-border-color:var(--color-error-fill);--alert-error-title-color:var(--color-error-fill-text);--alert-error-description-color:var(--color-error-fill-text);--alert-warning-bg:var(--color-warning-fill);--alert-warning-border-color:var(--color-warning-fill);--alert-warning-title-color:var(--color-warning-fill-text);--alert-warning-description-color:var(--color-warning-fill-text);--alert-warning-close-color:var(--color-warning-fill-text)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--alert-bg:var(--color-text-on-dark);--alert-border-color:var(--color-text-on-dark);--alert-title-color:var(--color-primary);--alert-description-color:var(--color-primary)}.alert{background-color:var(--alert-bg);border:var(--alert-border-width) solid var(--alert-border-color);border-radius:var(--alert-border-radius);padding-block:var(--alert-padding-block);padding-inline:var(--alert-padding-inline);align-items:flex-start;gap:var(--alert-gap);box-sizing:border-box;--alert-title-ink:var(--alert-title-color);--alert-description-ink:var(--alert-description-color);display:flex;position:relative}.alert.alert--dismissible{padding-inline-end:calc(var(--alert-close-inset) * 2 + var(--alert-close-size))}.alert__content{flex:1;min-width:0}.alert__title{font-size:var(--alert-title-font-size);font-weight:var(--alert-title-font-weight);color:var(--alert-title-ink);line-height:var(--alert-title-line-height);margin:0}.alert__description{font-size:var(--alert-description-font-size);color:var(--alert-description-ink);line-height:var(--alert-description-line-height);margin:0;align-items:start;gap:var(--alert-content-gap);flex-direction:column;margin-block-start:var(--alert-content-gap);display:flex}.alert__actions{align-items:stretch;gap:var(--alert-actions-gap);flex-direction:column;margin-block-start:var(--alert-actions-margin-block-start);display:flex}.alert__actions>*{inline-size:100%}@media (width>=768px){.alert__actions{flex-flow:wrap;align-items:center}.alert__actions>*{inline-size:auto}}.alert .link,.alert a:not(.button){color:var(--alert-description-ink);box-shadow:inset 0 calc(-1 * var(--link-ink-underline-width)) 0 0 currentColor}.alert .link:hover,.alert a:not(.button):hover{color:var(--alert-description-ink);box-shadow:inset 0 calc(-1 * var(--link-ink-hover-underline-width)) 0 0 currentColor}.alert .link:focus-visible,.alert a:not(.button):focus-visible{outline-color:var(--alert-description-ink)}.alert .alert__close{--close-button-size:var(--alert-close-size);position:absolute;inset-block-start:var(--alert-close-inset);inset-inline-end:var(--alert-close-inset)}.alert.alert--success{--alert-bg:var(--alert-success-bg);--alert-border-color:var(--alert-success-border-color);--alert-title-color:var(--alert-success-title-color);--alert-description-color:var(--alert-success-description-color)}.alert.alert--error{--alert-bg:var(--alert-error-bg);--alert-border-color:var(--alert-error-border-color);--alert-title-color:var(--alert-error-title-color);--alert-description-color:var(--alert-error-description-color)}.alert.alert--warning{--alert-bg:var(--alert-warning-bg);--alert-border-color:var(--alert-warning-border-color);--alert-title-color:var(--alert-warning-title-color);--alert-description-color:var(--alert-warning-description-color);--close-button-color:var(--alert-warning-close-color);--close-button-focus-ring-color:var(--alert-warning-close-color)}