@studiolxd/brand 38.16.0 → 39.0.0

package/CHANGELOG.md

@@ -7,6 +7,122 @@ 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.
 
+## [39.0.0] — 2026-09-15
+
+> **Major.** `StarRating` deja de traer sus textos puestos: ahora se le pasan, y el
+> compilador lo exige. Además, la flecha de la tarjeta enlazada es opcional, el
+> `ConfirmDialog` sabe pedir una frase de confirmación y el término de una lista de
+> descripción deja de verse diminuto en superficie pública.
+
+### Breaking — `StarRating`: el componente recibe su texto
+
+Los cinco textos pasan a ser props **obligatorias y sin valor por defecto**, exigidas por
+el tipo en cuanto el componente puede emitirlas: `valueLabel` siempre en lectura;
+`countLabel` en cuanto se pasa `reviewCount`; `emptyLabel` en cuanto `value` puede ser
+`null`; `optionLabel` y `groupLabel` en modo entrada. El corte lo hace el tipo, no la
+documentación: si el valor de tu API es `number` no se te pide `emptyLabel`, y el día que
+pase a `number | null` el compilador te lo reclama en vez de dejarte pintar cinco estrellas
+vacías —que es el dibujo de «valorado con 0», una nota real y la peor de todas.
+
+Van con ello otros tres cambios incompatibles: **`value` pasa a obligatorio** en lectura
+(antes omitirlo pintaba cero estrellas, o sea un olvido disfrazado de valoración);
+**`locale` desaparece**, porque el componente ya no escribe ninguna cifra y quien compone
+la frase es quien la escribe; y el modo se elige con `readOnly` **literal**.
+
+Qué hacer al actualizar: `StarRating.mdx` § «Qué se rompe al actualizar» trae el código
+exacto de los textos que había, para copiarlos tal cual si tu app está en castellano.
+
+> La regla del repo sobre textos de componente —prop opcional con el castellano por
+> defecto— queda en revisión: hay ya cuatro piezas que no la cumplen, y lo que decida esa
+> revisión se escribirá en su sitio, no aquí.
+
+### `Card`: la flecha la manda `ctaLabel`
+
+En modo enlace, la flecha y el nombre accesible del CTA aparecen **con `ctaLabel` y solo
+con él**. Sin la prop no hay ninguno de los dos: una rejilla de catálogo donde cada tarjeta
+repite la misma flecha es ruido, no señal. No hay `showArrow`/`hideArrow` — una sola cosa
+que decidir, no dos que se puedan contradecir. Ningún consumidor del repo se ve afectado:
+los veinte usos del modo enlace ya pasaban `ctaLabel`.
+
+### `ConfirmDialog`: frase de confirmación
+
+Nueva prop `confirmPhrase` —la frase exacta que hay que teclear para que la acción se
+habilite— con `confirmPhraseLabel` y `confirmPhraseMismatch`, obligatorias en cuanto se usa
+la primera, porque el rótulo es donde el producto dice QUÉ hay que escribir y eso el diálogo
+no lo sabe. El botón de confirmar nace apagado; el error sale **tras un intento** —salir del
+campo con algo escrito, o pulsar Intro—, nunca mientras se teclea, y seguir escribiendo lo
+retira. Con la frase puesta, Intro confirma desde el propio campo. La comparación perdona
+los espacios de los extremos y nada más: ni caja ni acentos, que es de lo que vive la
+barrera. Con la frase, el foco entra en el campo y no en «Cancelar»: lo que la regla del
+foco evita es que un Intro de más caiga sobre la acción que destruye, y aquí el botón nace
+apagado.
+
+Existía porque faltaba: tres sitios de la suite resolvían este patrón de tres maneras
+distintas, dos dejando el botón vivo y lanzando desde `onConfirm` para que el diálogo no se
+cerrara, y otro saltándose el `ConfirmDialog` entero para montar un `Modal` a mano.
+
+### `DescriptionList`: el término, proporcionado en superficie pública
+
+El bloque `.site-shell` subía el valor a `--text-font-size` (20px) y **no tocaba el
+término**, que se quedaba en `--label-font-size` (14px): dentro de `AppShell` el par es
+14/16 y no canta, en superficie pública era 14/20 y el término se veía diminuto al lado de
+su valor. El término pasa a `{text.paragraph.small.font-size}`, que ES el peldaño
+inmediatamente por debajo del valor por definición: **la superficie de aplicación queda
+idéntica** (14/16) y la pública pasa a 16/20. Cambia el aspecto de toda ficha pública de la
+suite que monte una `DescriptionList` dentro de un `SiteShell`, incluidas las pantallas de
+conexión de conector.
+
+No había ninguna historia que montara una `DescriptionList` dentro de un `SiteShell` — por
+eso nadie lo había visto. Ahora la hay. Y `Typography.mdx` gana el escalón que le faltaba a
+la doctrina: **«hereda un peldaño por debajo»**, entre «hereda el cuerpo» y «talla propia»,
+donde encajan el término de la ficha, el Breadcrumb, el pie de `Figure`, la ayuda de
+formulario y el índice del `Accordion`.
+
+### Publicación
+
+`scripts/publish-npm.mjs` sube el paquete con `npm stage publish` en vez de publicarlo
+directo, y termina imprimiendo el identificador del stage: el segundo factor se difiere a
+una persona, que aprueba con su sesión. El camino del token «Automation» queda documentado
+como lo que es —npm está restringiendo los tokens que se saltan el 2FA— y el ritual de
+`release:check` + tag no cambia.
+
+## [38.17.0] — 2026-09-15
+
+> **Minor.** En `ChatShell`, el botón que despliega el cajón de conversaciones
+> deja de saltar: cerrado y abierto cae en el mismo punto exacto de la pantalla.
+
+**`ChatShell` — el disparador del cajón no se mueve al desplegar.** En pantalla
+estrecha hay dos botones gemelos con el mismo glifo: el de la cabecera, que abre
+el cajón, y el del propio cajón, que lo cierra. La v38.15.0 ya los dejó
+idénticos de forma —misma variante, misma talla, mismo icono— pero no de sitio,
+porque cada uno se medía contra un origen distinto: el de la cabecera contra el
+relleno que ponga quien monta el armazón (el armazón no tiene relleno propio: quien
+compone, espacia) y el del cajón contra el `padding-block`, el `padding-inline` y el
+`gap` del `Sheet`. Medido en `mobile1` con 24px de aire alrededor: cerrado caía en
+(24,24) y abierto en (56,72) — 48px más abajo y 32 a la derecha, con la misma caja
+de 32×32. Al plegar y desplegar, el glifo daba un salto.
+
+Ahora el cajón **repite la misma fila `chat-shell__header`** que la columna
+principal, con el botón dentro y la lista debajo en `chat-shell__drawer-list`;
+`.chat-shell__drawer` anula el relleno propio del `Sheet` para que esa fila nazca
+donde nace la cabecera, y no recorta (`overflow: visible`), que si no se comía dos
+lados del anillo de foco. El disparador gana además `align-self: flex-start`: sin
+eso el arreglo solo valía con cabeceras bajitas —con un título y un selector de
+modelo, la fila crece, el botón centrado baja con ella y el del cajón se queda
+arriba, y volvía a saltar 22px—. Anclado al arranque coinciden sea cual sea el alto
+de la cabecera, el mismo criterio con el que el aspa de un diálogo se alinea con la
+primera línea del título. Verificado en Chromium: (24,24,32,32) antes y después.
+
+**Token nuevo:** `chat-shell.drawer-gap`, en cascada desde
+`chat-shell.thread-padding-block` — la lista del cajón arranca donde arranca el
+hilo. Ningún color nuevo.
+
+**Para consumidores:** ninguna prop cambia. Dos efectos visibles: el disparador de
+la cabecera pasa a ir pegado al canto superior de su fila en vez de centrado, así
+que con cabeceras altas el glifo sube unos píxeles; y dentro del cajón hay marcado
+nuevo (`.chat-shell__header`, `.chat-shell__drawer-list`), que afecta a quien
+estuviera pintando a mano el interior de `.chat-shell__drawer`. `Sheet` no se toca.
+
 ## [38.16.0] — 2026-09-15
 
 > **Minor.** La barra de filtros deja de reorganizarse mientras escribes,

package/dist/_shared/tokens.js

@@ -1656,7 +1656,10 @@ var e = {
 	"--star-rating-star-size": "1.25em",
 	"--star-rating-sm-star-size": "1em",
 	"--star-rating-lg-star-size": "1.5em",
+	"--star-rating-count-gap": "0.5rem",
 	"--star-rating-track-color": "#6b6b6b",
+	"--star-rating-count-color": "#4a4a4a",
+	"--star-rating-empty-color": "#4a4a4a",
 	"--star-rating-fill-color": "#111e30",
 	"--star-rating-cursor": "pointer",
 	"--star-rating-disabled-cursor": "not-allowed",
@@ -2356,6 +2359,7 @@ var e = {
 	"--command-palette-item-highlighted-color": "#ffffff",
 	"--command-palette-item-icon-size": "1.5rem",
 	"--confirm-dialog-actions-space-before": "1.5rem",
+	"--confirm-dialog-phrase-space-before": "1rem",
 	"--consent-banner-bg": "#ffffff",
 	"--consent-banner-color": "#111e30",
 	"--consent-banner-border-color": "#111e30",
@@ -3183,6 +3187,7 @@ var e = {
 	"--chat-shell-list-width": "15rem",
 	"--chat-shell-gap": "2rem",
 	"--chat-shell-header-gap": "0.75rem",
+	"--chat-shell-drawer-gap": "1rem",
 	"--chat-shell-thread-padding-block": "1rem",
 	"--chat-shell-thread-padding-inline": "calc(0.75rem + 1px)",
 	"--chat-shell-bg": "#ffffff",

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

@@ -1,55 +1,112 @@
 import './StarRating.css';
-export interface StarRatingProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
-    /** Valoración mostrada. En lectura se redondea a media estrella. */
-    value?: number;
-    /** Valoración al montar, cuando la entrada no está controlada. */
-    defaultValue?: number;
-    /** Se llama con la valoración elegida. Solo en entrada (`readOnly={false}`). */
-    onValueChange?: (value: number) => void;
-    /** Cuántas estrellas tiene la escala. */
+/** Lo que no depende del modo ni de los textos. */
+export interface StarRatingCommonProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
+    /** Cuántas estrellas tiene la escala. Default: 5. */
     max?: number;
+    /** Talla de la estrella, relativa al texto que la rodea. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * El recuento de reseñas y su rótulo viajan juntos: sin `reviewCount` no hay
+ * nada que escribir, y con él hace falta saber cómo se escribe.
+ */
+export type StarRatingCountProps = {
+    /**
+     * Cuántas reseñas hay detrás de la media: se pinta a continuación («(24)»)
+     * y entra en el nombre accesible. **Sin él** la nota es la de UNA reseña
+     * suelta, donde un recuento no significa nada.
+     */
+    reviewCount?: undefined;
+    countLabel?: (reviewCount: number) => string;
+} | {
+    /** Cuántas reseñas hay detrás de la media. Obliga a pasar `countLabel`. */
+    reviewCount: number;
+    /**
+     * Cómo se escribe el recuento visible («(24)»). **Obligatorio** con
+     * `reviewCount`: el componente no escribe texto por su cuenta.
+     */
+    countLabel: (reviewCount: number) => string;
+};
+/**
+ * El valor y el texto del vacío, igual: `emptyLabel` solo se lee cuando `value`
+ * puede ser `null`, así que solo lo pide quien pueda pasarlo.
+ */
+export type StarRatingValueProps = {
+    /** Valoración mostrada. Se redondea a media estrella. */
+    value: number;
+    emptyLabel?: string;
+} | {
+    /**
+     * Valoración mostrada. Se redondea a media estrella.
+     *
+     * **`null` no es cero**: es «todavía sin reseñas». Con `null` la escala no
+     * se dibuja —cinco estrellas vacías son el dibujo de «valorado con 0», que
+     * es una nota de verdad y la peor— y en su lugar va `emptyLabel`.
+     */
+    value: number | null;
+    /**
+     * Qué se lee y se ve cuando `value` es `null`. **Obligatorio** en cuanto
+     * `value` pueda serlo: el componente no escribe «Todavía sin reseñas» por
+     * su cuenta.
+     */
+    emptyLabel: string;
+};
+/** Modo lectura (el de siempre): una imagen con su nombre accesible. */
+export type StarRatingReadProps = StarRatingCommonProps & StarRatingCountProps & StarRatingValueProps & {
     /**
      * Solo lectura (por defecto). El componente nace para **mostrar** una media;
      * para capturar una valoración hay que pedirlo con `readOnly={false}`.
      */
-    readOnly?: boolean;
+    readOnly?: true;
+    /**
+     * Nombre accesible de la valoración: recibe el valor ya redondeado a media
+     * estrella, el máximo y, si lo hay, el recuento. Es el nombre COMPLETO —el
+     * recuento visible queda dentro de la imagen y no se lee aparte—, p. ej.
+     * «4,5 de 5 estrellas, 24 reseñas». **Obligatorio**: el nombre accesible lo
+     * pasa el consumidor.
+     */
+    valueLabel: (value: number, max: number, reviewCount?: number) => string;
+};
+/** Modo entrada (`readOnly={false}`): un grupo de radios nativos. */
+export type StarRatingInputProps = StarRatingCommonProps & {
+    /** Modo entrada. */
+    readOnly: false;
+    /** Valoración elegida, cuando la entrada está controlada. */
+    value?: number;
+    /** Valoración al montar, cuando la entrada no está controlada. */
+    defaultValue?: number;
+    /** Se llama con la valoración elegida. */
+    onValueChange?: (value: number) => void;
     /** Deshabilita la entrada. */
     disabled?: boolean;
-    /** Talla de la estrella, relativa al texto que la rodea. */
-    size?: 'sm' | 'md' | 'lg';
     /** `name` de los radios que envían la valoración con el formulario. */
     name?: string;
-    /** Idioma con el que se escribe el número del nombre accesible. */
-    locale?: string;
-    /**
-     * Nombre accesible en lectura: recibe el valor ya redondeado a media estrella
-     * y el máximo. Default: «4,5 de 5 estrellas» (castellano). Una app
-     * multiidioma debe pasarlo traducido.
-     */
-    valueLabel?: (value: number, max: number) => string;
     /**
-     * Nombre accesible de cada estrella elegible. Default: «3 de 5 estrellas»
-     * (castellano). Una app multiidioma debe pasarlo traducido.
+     * Nombre accesible de cada estrella elegible, p. ej. «3 de 5 estrellas».
+     * **Obligatorio**: lo pasa el consumidor.
      */
-    optionLabel?: (value: number, max: number) => string;
+    optionLabel: (value: number, max: number) => string;
     /**
-     * Nombre accesible del grupo en modo entrada. Default: «Valoración»
-     * (castellano). Una app multiidioma debe pasarlo traducido.
+     * Nombre accesible del grupo, p. ej. «Valoración». **Obligatorio**, igual que
+     * `optionLabel`.
      */
-    groupLabel?: string;
-    /** Se añade DESPUÉS de las clases propias. */
-    className?: string;
-}
+    groupLabel: string;
+};
+export type StarRatingProps = StarRatingReadProps | StarRatingInputProps;
 /**
  * Valoración en estrellas, de lectura o de entrada.
  *
  * **En lectura** es una sola imagen: `role="img"` con el valor exacto en el
  * nombre accesible («4,5 de 5 estrellas»), no cinco iconos que el lector tenga
- * que contar. Admite **media estrella**, que es como se lee una media.
+ * que contar. Admite **media estrella**, que es como se lee una media, y
+ * **`value={null}`** para «todavía sin reseñas», que no se dibuja con estrellas
+ * porque las estrellas vacías ya significan otra cosa.
  *
  * **En entrada** (`readOnly={false}`) es un grupo de radios nativos —teclado,
  * envío de formulario y estado marcado vienen del navegador— con una estrella
  * por opción. La entrada va en pasos enteros: la media estrella describe una
  * media calculada, no algo que una persona elija.
  */
-export declare function StarRating({ value: valueProp, defaultValue, onValueChange, max, readOnly, disabled, size, name: nameProp, locale, valueLabel, optionLabel, groupLabel, className, ...rest }: StarRatingProps): import("react/jsx-runtime").JSX.Element;
+export declare function StarRating(props: StarRatingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -50,7 +50,18 @@ export interface CardProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
      * consumidor (varios párrafos, `<Tag>`, texto con formato…).
      */
     description?: React.ReactNode;
-    /** Texto accesible del CTA, visually-hidden (modo link — se espera junto a `href` o `render`). */
+    /**
+     * Texto accesible del CTA (modo link), *visually-hidden*. **Manda sobre la
+     * flecha**: con `ctaLabel` la tarjeta pinta la flecha Y su nombre accesible;
+     * sin `ctaLabel` no pinta ninguna de las dos cosas. Una sola decisión en vez
+     * de dos props que puedan contradecirse — no hay `showArrow`.
+     *
+     * Omitirlo es lo que se quiere en una rejilla de catálogo, donde la flecha
+     * repetida en cada tarjeta es ruido y el destino ya lo dice el título. Con
+     * él, en cambio, la tarjeta suelta de marketing gana la llamada visible y el
+     * enlace un nombre accesible completo («Ver más sobre plataformas LMS»)
+     * cuando lo único visible sería la flecha.
+     */
     ctaLabel?: string;
     /** Color de fondo. Default: `'outline'`. */
     color?: CardColor;

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

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import { type ModalProps } from '../Modal/Modal';
 import './ConfirmDialog.css';
-export interface ConfirmDialogProps {
+export interface ConfirmDialogBaseProps {
     open: boolean;
     /** Título del diálogo: la pregunta, no «Confirmar». */
     title: string;
@@ -67,6 +67,42 @@ export interface ConfirmDialogProps {
     /** Se añade DESPUÉS de las clases propias del pie del diálogo. */
     className?: string;
 }
+/**
+ * La frase de confirmación y sus dos textos viajan juntos: sin `confirmPhrase`
+ * no hay campo que rotular ni discrepancia que contar, y con ella los dos
+ * textos los pasa el producto —dicen QUÉ hay que teclear—, así que no llevan
+ * default castellano.
+ */
+export type ConfirmDialogPhraseProps = {
+    /**
+     * Exige teclear una frase exacta —el nombre de la organización, el del
+     * plugin— antes de poder confirmar. El botón de confirmar nace apagado y
+     * solo se enciende cuando lo tecleado coincide.
+     */
+    confirmPhrase?: undefined;
+    confirmPhraseLabel?: string;
+    confirmPhraseMismatch?: string;
+} | {
+    /**
+     * La frase exacta que hay que teclear para poder confirmar. Se compara
+     * sin los espacios de los extremos —un espacio pegado al pegar no es un
+     * error de la persona— pero sin tocar nada más: ni la caja ni los
+     * acentos, que es de lo que vive esta barrera.
+     */
+    confirmPhrase: string;
+    /**
+     * Rótulo del campo. **Obligatorio** con `confirmPhrase`, sin default: es
+     * donde el producto dice qué hay que teclear («Escribe *acme* para
+     * confirmar»), y eso el diálogo no lo sabe.
+     */
+    confirmPhraseLabel: string;
+    /**
+     * Mensaje cuando lo tecleado no coincide. **Obligatorio** con
+     * `confirmPhrase`, sin default, por lo mismo.
+     */
+    confirmPhraseMismatch: string;
+};
+export type ConfirmDialogProps = ConfirmDialogBaseProps & ConfirmDialogPhraseProps;
 /**
  * La pregunta antes de una acción que no se puede deshacer: borrar una
  * organización, revocar una clave, expulsar a alguien de un equipo.
@@ -80,5 +116,9 @@ export interface ConfirmDialogProps {
  * queda abierto y ocupado —no se cierra en falso ni deja pulsar dos veces— y
  * se cierra solo al resolver. Si rechaza, sigue abierto: el error lo cuenta el
  * consumidor, que es quien sabe qué ha pasado.
+ *
+ * Con `confirmPhrase` monta además la **barrera de teclear el identificador**
+ * —el patrón de «escribe el nombre de la organización para borrarla»—: un campo
+ * bajo la pregunta y el botón de confirmar apagado hasta que coincida.
  */
-export declare function ConfirmDialog({ open, title, description, children, onConfirm, onCancel, onConfirmError, secondaryActionLabel, onSecondaryAction, destructive, confirmLabel, cancelLabel, pendingLabel, closeLabel, container, className, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmDialog({ open, title, description, children, onConfirm, onCancel, onConfirmError, secondaryActionLabel, onSecondaryAction, destructive, confirmLabel, cancelLabel, pendingLabel, closeLabel, confirmPhrase, confirmPhraseLabel, confirmPhraseMismatch, container, className, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;