@studiolxd/brand 38.16.0 → 39.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "38.16.0",
+  "version": "39.0.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",

package/src/tokens/components/description-list.css

@@ -8,7 +8,7 @@
   --description-list-cell-padding-inline: var(--spacing-4); /** Aire horizontal de cada celda */
   --description-list-border-color: var(--color-primary); /** Color del borde: tinta de la superficie */
   --description-list-term-font-family: var(--label-font-family); /** Tipografía del término (dt): la de las etiquetas */
-  --description-list-term-font-size: var(--label-font-size); /** Cuerpo del término: el de las etiquetas, no el de la prosa */
+  --description-list-term-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del término: un peldaño por debajo del valor, la misma relación en las dos superficies (14/16 en aplicación, 16/20 en la pública). Es el mismo 14px que daba 0.875rem en aplicación, pero atado al cuerpo de la superficie: dentro de un SiteShell el valor sube a 20px y el término tenía que subir con él */
   --description-list-term-line-height: var(--label-line-height); /** Interlineado del término */
   --description-list-term-letter-spacing: var(--label-letter-spacing); /** Tracking del término */
   --description-list-term-color: var(--color-text-on-light); /** Color del término */

package/src/tokens/components/star-rating.css

@@ -9,10 +9,13 @@
   --star-rating-cursor: pointer; /** Cursor sobre una estrella elegible */
   --star-rating-disabled-cursor: not-allowed; /** Cursor cuando la entrada está deshabilitada */
   --star-rating-gap: var(--spacing-1); /** Separación entre estrellas */
+  --star-rating-count-gap: var(--spacing-2); /** Separación entre las estrellas y el recuento de reseñas: más aire que entre estrella y estrella, para que el recuento se lea como otra cosa */
   --star-rating-disabled-opacity: var(--opacity-disabled); /** Opacidad cuando la entrada está deshabilitada */
   --star-rating-transition-duration: var(--motion-duration-fast); /** Duración del cambio de relleno */
   --star-rating-transition-easing: var(--motion-easing-default); /** Easing del cambio de relleno */
   --star-rating-track-color: var(--color-icon-secondary-on-light); /** Contorno de la estrella sin ganar */
+  --star-rating-count-color: var(--color-text-muted-on-light); /** Tinta del recuento de reseñas: texto secundario, es un metadato junto a la valoración */
+  --star-rating-empty-color: var(--color-text-muted-on-light); /** Tinta del «todavía sin reseñas»: texto secundario, igual que el recuento */
   --star-rating-fill-color: var(--color-primary); /** Relleno y contorno de la estrella ganada */
   --star-rating-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
   --star-rating-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
@@ -24,6 +27,8 @@
 [data-theme="dark"],
 html.dark {
   --star-rating-track-color: var(--color-text-on-dark); /** Contorno de la estrella sin ganar — surface-dark */
+  --star-rating-count-color: var(--color-text-muted-on-dark); /** Tinta del recuento — surface-dark */
+  --star-rating-empty-color: var(--color-text-muted-on-dark); /** Tinta del «todavía sin reseñas» — surface-dark */
   --star-rating-fill-color: var(--color-accent-1); /** Relleno de la estrella ganada — surface-dark. `fill-color` (prussian) coincide con el fondo de la superficie y quedaría invisible. */
   --star-rating-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
 }

package/src/tokens/molecules/chat-shell.css

@@ -8,6 +8,7 @@
   --chat-shell-header-gap: var(--spacing-3); /** Separación entre lo que va en la cabecera del hilo */
   --chat-shell-thread-padding-block: var(--spacing-4); /** Aire del hilo por arriba y por abajo, en la ranura del armazón. Arriba separa el primer globo de la cabecera —el selector de modelo— y abajo el último de la caja de escribir: la columna del chat no tiene `gap`, así que sin esta medida los tres bloques se tocan. Va en el envoltorio y no dentro del hilo a propósito: ahí queda fuera del desplazamiento y el pasillo no se va con el scroll, que es lo que deja la cabecera siempre despejada */
   --chat-shell-breakpoint: var(--breakpoint-lg); /** Donde el armazón pasa de dos columnas a una. El mismo punto en el que el chrome de aplicación pasa de barra superior a barra lateral */
+  --chat-shell-drawer-gap: var(--chat-shell-thread-padding-block); /** Dentro del cajón de pantalla estrecha, el aire entre la fila del disparador y la lista. Cascada desde el aire de la ranura del hilo porque el cajón repite la maqueta de la columna principal: la lista tiene que arrancar donde arranca el hilo, para que al desplegar no se mueva más que el contenido. El cajón anula el relleno propio del `Sheet` (ver ChatShell.css), así que esta es la única medida que el armazón pone dentro de él */
   --chat-shell-thread-padding-inline: calc(var(--message-bubble-tail-size) + var(--message-bubble-border-width)); /** Pasillo lateral del hilo: exactamente lo que sobresale la cola del globo, que nace FUERA de su caja (el lado del triángulo más su contorno). Sin él la cola se corta contra el canto del desplazamiento. No es un margen de página —el aire alrededor del chat sigue poniéndolo quien lo monta—: es la anchura justa para que el pico respire */
   --chat-shell-bg: var(--color-background-light); /** Fondo del armazón */
 }

package/src/tokens/molecules/confirm-dialog.css

@@ -4,4 +4,5 @@
 
 :root {
   --confirm-dialog-actions-space-before: var(--spacing-5); /** Aire entre el cuerpo del diálogo y su fila de acciones: separa la pregunta de la respuesta. El aire ENTRE los dos botones es el de `Inline` en su paso compacto */
+  --confirm-dialog-phrase-space-before: var(--spacing-4); /** Aire entre el cuerpo del diálogo y el campo de la frase de confirmación: menos que el del pie, porque el campo todavía es parte de la pregunta */
 }

package/src/tokens/scss/components/_description-list.scss

@@ -7,7 +7,7 @@ $lxd-description-list-border-color: #111e30; // Color del borde: tinta de la sup
 $lxd-description-list-cell-padding-block: 0.75rem; // Aire vertical de cada celda
 $lxd-description-list-cell-padding-inline: 1rem; // Aire horizontal de cada celda
 $lxd-description-list-term-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía del término (dt): la de las etiquetas
-$lxd-description-list-term-font-size: 0.875rem; // Cuerpo del término: el de las etiquetas, no el de la prosa
+$lxd-description-list-term-font-size: 0.875rem; // Cuerpo del término: un peldaño por debajo del valor, la misma relación en las dos superficies (14/16 en aplicación, 16/20 en la pública). Es el mismo 14px que daba 0.875rem en aplicación, pero atado al cuerpo de la superficie: dentro de un SiteShell el valor sube a 20px y el término tenía que subir con él
 $lxd-description-list-term-font-weight: 500; // Peso del término
 $lxd-description-list-term-line-height: 1.5; // Interlineado del término
 $lxd-description-list-term-letter-spacing: 0em; // Tracking del término

package/src/tokens/scss/components/_star-rating.scss

@@ -5,7 +5,10 @@ $lxd-star-rating-gap: 0.25rem; // Separación entre estrellas
 $lxd-star-rating-star-size: 1.25em; // Tamaño de la estrella — relativo al texto que la rodea, como el resto de marcas en línea
 $lxd-star-rating-sm-star-size: 1em; // Tamaño de la estrella — talla sm
 $lxd-star-rating-lg-star-size: 1.5em; // Tamaño de la estrella — talla lg
+$lxd-star-rating-count-gap: 0.5rem; // Separación entre las estrellas y el recuento de reseñas: más aire que entre estrella y estrella, para que el recuento se lea como otra cosa
 $lxd-star-rating-track-color: #6b6b6b; // Contorno de la estrella sin ganar
+$lxd-star-rating-count-color: #4a4a4a; // Tinta del recuento de reseñas: texto secundario, es un metadato junto a la valoración
+$lxd-star-rating-empty-color: #4a4a4a; // Tinta del «todavía sin reseñas»: texto secundario, igual que el recuento
 $lxd-star-rating-fill-color: #111e30; // Relleno y contorno de la estrella ganada
 $lxd-star-rating-cursor: pointer; // Cursor sobre una estrella elegible
 $lxd-star-rating-disabled-cursor: not-allowed; // Cursor cuando la entrada está deshabilitada

package/src/tokens/scss/molecules/_chat-shell.scss

@@ -4,6 +4,7 @@
 $lxd-chat-shell-list-width: 15rem; // Ancho de la columna de conversaciones — cascada desde `sidebar`, que es donde suele vivir esa columna dentro de una aplicación
 $lxd-chat-shell-gap: 2rem; // El aire entre la columna de conversaciones y el hilo. Lo pone el contenedor, no los hijos: el armazón no tiene ningún relleno propio, así que esta es la única medida de espaciado que aporta y la única que separa las dos columnas — ya no hay línea ni pasillo que lo haga
 $lxd-chat-shell-header-gap: 0.75rem; // Separación entre lo que va en la cabecera del hilo
+$lxd-chat-shell-drawer-gap: 1rem; // Dentro del cajón de pantalla estrecha, el aire entre la fila del disparador y la lista. Cascada desde el aire de la ranura del hilo porque el cajón repite la maqueta de la columna principal: la lista tiene que arrancar donde arranca el hilo, para que al desplegar no se mueva más que el contenido. El cajón anula el relleno propio del `Sheet` (ver ChatShell.css), así que esta es la única medida que el armazón pone dentro de él
 $lxd-chat-shell-thread-padding-block: 1rem; // Aire del hilo por arriba y por abajo, en la ranura del armazón. Arriba separa el primer globo de la cabecera —el selector de modelo— y abajo el último de la caja de escribir: la columna del chat no tiene `gap`, así que sin esta medida los tres bloques se tocan. Va en el envoltorio y no dentro del hilo a propósito: ahí queda fuera del desplazamiento y el pasillo no se va con el scroll, que es lo que deja la cabecera siempre despejada
 $lxd-chat-shell-thread-padding-inline: calc(0.75rem + 1px); // Pasillo lateral del hilo: exactamente lo que sobresale la cola del globo, que nace FUERA de su caja (el lado del triángulo más su contorno). Sin él la cola se corta contra el canto del desplazamiento. No es un margen de página —el aire alrededor del chat sigue poniéndolo quien lo monta—: es la anchura justa para que el pico respire
 $lxd-chat-shell-bg: #ffffff; // Fondo del armazón

package/src/tokens/scss/molecules/_confirm-dialog.scss

@@ -2,3 +2,4 @@
 // Do not edit directly, this file was auto-generated.
 
 $lxd-confirm-dialog-actions-space-before: 1.5rem; // Aire entre el cuerpo del diálogo y su fila de acciones: separa la pregunta de la respuesta. El aire ENTRE los dos botones es el de `Inline` en su paso compacto
+$lxd-confirm-dialog-phrase-space-before: 1rem; // Aire entre el cuerpo del diálogo y el campo de la frase de confirmación: menos que el del pie, porque el campo todavía es parte de la pregunta

package/src/tokens/surface-invert.css

@@ -336,6 +336,8 @@ html.dark .surface-invert {
   --sparkline-accent-color: var(--chart-series-1);
   --sparkline-baseline-color: var(--chart-axis-color);
   --star-rating-track-color: var(--color-icon-secondary-on-light);
+  --star-rating-count-color: var(--color-text-muted-on-light);
+  --star-rating-empty-color: var(--color-text-muted-on-light);
   --star-rating-fill-color: var(--color-primary);
   --star-rating-focus-ring-color: var(--color-primary);
   --step-pending-bg: var(--color-background-light);

package/src/tokens/surface-public.css

@@ -31,6 +31,7 @@
   --breadcrumb-font-size: var(--text-paragraph-small-font-size);
   --code-block-font-size: var(--text-paragraph-small-font-size);
   --code-font-size: var(--code-block-font-size);
+  --description-list-term-font-size: var(--text-paragraph-small-font-size);
   --description-list-value-font-size: var(--text-font-size);
   --description-list-value-line-height: var(--text-line-height);
   --empty-state-description-font-size: var(--text-font-size);

package/src/tokens/tokens.json

@@ -1654,7 +1654,10 @@
   "--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",
@@ -2354,6 +2357,7 @@
   "--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",
@@ -3181,6 +3185,7 @@
   "--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",