@studiolxd/brand 49.10.0 → 49.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.10.0",
+  "version": "49.11.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/molecules/app-launcher.css

@@ -4,13 +4,14 @@
 
 :root {
   --app-launcher-content-min-width: 20rem; /** Ancho mínimo del popover */
-  --app-launcher-content-columns: 3; /** Número de columnas de la rejilla de apps */
-  --app-launcher-content-max-height: var(--available-height); /** Altura máxima del panel (por defecto, el espacio disponible en viewport que expone Base UI) — con muchas apps, el panel hace scroll en vez de salirse de la pantalla */
+  --app-launcher-content-columns: 3; /** Número de columnas de la rejilla de apps a partir de `sm` */
+  --app-launcher-content-columns-narrow: 2; /** Columnas de la rejilla por debajo de `sm`: dos. Con tres, doce baldosas en un panel estrecho dejaban el nombre de una app partido en tres líneas; con dos, la rejilla crece a lo alto lo justo y el panel sigue cabiendo entero */
+  --app-launcher-content-max-height: var(--available-height); /** Único tope del panel: el hueco que de verdad queda en la ventana, que Base UI mide y publica en `--available-height`. El panel NO tiene tope propio —crece con su contenido, y con doce apps se ve entero—; solo cuando ni ese hueco da, se recorta aquí y hace scroll */
   --app-launcher-trigger-size: var(--size-component-md); /** Tamaño (cuadrado) del botón de rejilla */
   --app-launcher-content-gap: var(--spacing-1); /** Espacio entre tiles */
   --app-launcher-content-padding-block: var(--spacing-3); /** Padding vertical del panel */
   --app-launcher-content-padding-inline: var(--spacing-3); /** Padding horizontal del panel */
-  --app-launcher-tile-gap: var(--spacing-1); /** Espacio entre el nombre y el badge «nuevo» dentro del tile */
+  --app-launcher-tile-gap: var(--spacing-1); /** Espacio entre el distintivo y el nombre dentro del tile */
   --app-launcher-tile-name-font-size: var(--font-size-1); /** Tamaño de texto del nombre de app */
   --app-launcher-trigger-border-radius: var(--border-radius-default); /** Radio del trigger */
   --app-launcher-trigger-color: var(--color-text-on-light); /** Color del icono de rejilla */
@@ -27,6 +28,7 @@
   --app-launcher-transition-easing: var(--floating-panel-transition-easing); /** Easing de la animación */
   --app-launcher-tile-padding-block: var(--menu-item-padding-block); /** Padding vertical de cada tile — el de un ítem de Menu, para que la altura case con las listas de opciones del DS */
   --app-launcher-tile-padding-inline: var(--menu-item-padding-inline); /** Padding horizontal de cada tile — el de un ítem de Menu */
+  --app-launcher-tile-badge-block-size: calc(var(--tag-font-size) * var(--tag-line-height) + 2 * var(--tag-padding-block)); /** Alto de la fila del distintivo, que va ENCIMA del nombre. Es la caja de una `Tag` (cuerpo por interlineado más su aire) y se reserva SIEMPRE, lleve distintivo la baldosa o no: de ahí que todos los nombres de la rejilla queden a la misma altura. Sale de los tokens de `Tag`, así que sigue cuadrando si la píldora cambia de talla */
   --app-launcher-tile-border-radius: var(--border-radius-default); /** Radio de cada tile */
   --app-launcher-tile-name-font-weight: var(--font-weight-default); /** Peso del nombre de app */
   --app-launcher-tile-name-line-height: var(--menu-item-line-height); /** Interlineado del nombre de app — el de un ítem de Menu, para que la altura case con las listas de opciones del DS */

package/src/tokens/molecules/site-nav.css

@@ -15,6 +15,7 @@
   --site-nav-item-hover-color: var(--color-text-on-light); /** Enlaces en hover: en claro no cambia el color, aparece la línea */
   --site-nav-item-underline-offset: var(--border-width-focus); /** Separación entre el texto y la línea de hover (2px, más pegada que en los enlaces de texto). Se reserva siempre: la línea no desplaza nada al aparecer */
   --site-nav-item-disabled-color: var(--color-disabled-text-on-light); /** Ítem apagado («próximamente»): la tinta de un control deshabilitado sobre superficie clara. No baja de 3:1 sobre el lienzo —el mínimo de WCAG 1.4.11 para un componente inactivo—, que es el suelo de esta tinta */
+  --site-nav-item-column-gap: var(--site-nav-group-gap); /** Pasillo entre las dos columnas de un grupo ancho (`columns: 2`). Es el mismo que separa dos grupos: las columnas de dentro tienen que leerse con el mismo aire que las de fuera, o el grupo ancho parecería dos grupos pegados */
   --site-nav-item-current-font-weight: var(--font-weight-default); /** Página actual: mismo peso que el resto (la marca aria-current y, si hace falta, el producto la resalta) */
   --site-nav-focus-ring-width: var(--border-width-focus); /** Anillo de foco */
   --site-nav-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco */

package/src/tokens/scss/molecules/_app-launcher.scss

@@ -16,7 +16,8 @@ $lxd-app-launcher-trigger-label-font-weight: 300; // Peso de texto del disparado
 $lxd-app-launcher-trigger-label-line-height: 1.3; // Interlineado del disparador con texto — el de un ítem de SidebarNav
 $lxd-app-launcher-trigger-label-color: #111e30; // Color del disparador con texto (icono y texto, por `currentColor`/herencia) — el de un ítem de SidebarNav
 $lxd-app-launcher-content-min-width: 20rem; // Ancho mínimo del popover
-$lxd-app-launcher-content-columns: 3; // Número de columnas de la rejilla de apps
+$lxd-app-launcher-content-columns: 3; // Número de columnas de la rejilla de apps a partir de `sm`
+$lxd-app-launcher-content-columns-narrow: 2; // Columnas de la rejilla por debajo de `sm`: dos. Con tres, doce baldosas en un panel estrecho dejaban el nombre de una app partido en tres líneas; con dos, la rejilla crece a lo alto lo justo y el panel sigue cabiendo entero
 $lxd-app-launcher-content-gap: 0.25rem; // Espacio entre tiles
 $lxd-app-launcher-content-bg: #ffffff; // Fondo del panel
 $lxd-app-launcher-content-border-width: 1px; // Borde del panel
@@ -24,14 +25,15 @@ $lxd-app-launcher-content-border-color: #111e30; // Color del borde del panel
 $lxd-app-launcher-content-border-radius: 0px; // Radio del panel
 $lxd-app-launcher-content-shadow: none; // Sombra del panel
 $lxd-app-launcher-content-z-index: 400; // Z-index del popover
-$lxd-app-launcher-content-max-height: var(--available-height); // Altura máxima del panel (por defecto, el espacio disponible en viewport que expone Base UI) — con muchas apps, el panel hace scroll en vez de salirse de la pantalla
+$lxd-app-launcher-content-max-height: var(--available-height); // Único tope del panel: el hueco que de verdad queda en la ventana, que Base UI mide y publica en `--available-height`. El panel NO tiene tope propio —crece con su contenido, y con doce apps se ve entero—; solo cuando ni ese hueco da, se recorta aquí y hace scroll
 $lxd-app-launcher-content-padding-block: 0.75rem; // Padding vertical del panel
 $lxd-app-launcher-content-padding-inline: 0.75rem; // Padding horizontal del panel
 $lxd-app-launcher-transition-duration: 150ms; // Duración de la animación de entrada/salida
 $lxd-app-launcher-transition-easing: ease; // Easing de la animación
 $lxd-app-launcher-tile-padding-block: 0.5rem; // Padding vertical de cada tile — el de un ítem de Menu, para que la altura case con las listas de opciones del DS
 $lxd-app-launcher-tile-padding-inline: 1rem; // Padding horizontal de cada tile — el de un ítem de Menu
-$lxd-app-launcher-tile-gap: 0.25rem; // Espacio entre el nombre y el badge «nuevo» dentro del tile
+$lxd-app-launcher-tile-gap: 0.25rem; // Espacio entre el distintivo y el nombre dentro del tile
+$lxd-app-launcher-tile-badge-block-size: calc(0.875rem * 1 + 2 * 0.25rem); // Alto de la fila del distintivo, que va ENCIMA del nombre. Es la caja de una `Tag` (cuerpo por interlineado más su aire) y se reserva SIEMPRE, lleve distintivo la baldosa o no: de ahí que todos los nombres de la rejilla queden a la misma altura. Sale de los tokens de `Tag`, así que sigue cuadrando si la píldora cambia de talla
 $lxd-app-launcher-tile-border-radius: 0px; // Radio de cada tile
 $lxd-app-launcher-tile-name-font-size: 0.875rem; // Tamaño de texto del nombre de app
 $lxd-app-launcher-tile-name-font-weight: 300; // Peso del nombre de app

package/src/tokens/scss/molecules/_site-nav.scss

@@ -14,6 +14,7 @@ $lxd-site-nav-item-underline-offset: 2px; // Separación entre el texto y la lí
 $lxd-site-nav-item-hover-line-width: 1px; // Enlaces en hover: la línea bajo el enlace (como los enlaces de texto), en claro
 $lxd-site-nav-item-disabled-color: #4a4a4a; // Ítem apagado («próximamente»): la tinta de un control deshabilitado sobre superficie clara. No baja de 3:1 sobre el lienzo —el mínimo de WCAG 1.4.11 para un componente inactivo—, que es el suelo de esta tinta
 $lxd-site-nav-item-badge-gap: 0.5rem; // Aire entre el rótulo del ítem y su distintivo
+$lxd-site-nav-item-column-gap: 2rem; // Pasillo entre las dos columnas de un grupo ancho (`columns: 2`). Es el mismo que separa dos grupos: las columnas de dentro tienen que leerse con el mismo aire que las de fuera, o el grupo ancho parecería dos grupos pegados
 $lxd-site-nav-item-current-font-weight: 300; // Página actual: mismo peso que el resto (la marca aria-current y, si hace falta, el producto la resalta)
 $lxd-site-nav-focus-ring-width: 2px; // Anillo de foco
 $lxd-site-nav-focus-ring-offset: 2px; // Separación del anillo de foco

package/src/tokens/tokens.json

@@ -191,6 +191,7 @@
   "--app-launcher-trigger-label-color": "#111e30",
   "--app-launcher-content-min-width": "20rem",
   "--app-launcher-content-columns": "3",
+  "--app-launcher-content-columns-narrow": "2",
   "--app-launcher-content-gap": "0.25rem",
   "--app-launcher-content-bg": "#ffffff",
   "--app-launcher-content-border-width": "1px",
@@ -206,6 +207,7 @@
   "--app-launcher-tile-padding-block": "0.5rem",
   "--app-launcher-tile-padding-inline": "1rem",
   "--app-launcher-tile-gap": "0.25rem",
+  "--app-launcher-tile-badge-block-size": "calc(0.875rem * 1 + 2 * 0.25rem)",
   "--app-launcher-tile-border-radius": "0px",
   "--app-launcher-tile-name-font-size": "0.875rem",
   "--app-launcher-tile-name-font-weight": "300",
@@ -2889,6 +2891,7 @@
   "--site-nav-item-hover-line-width": "1px",
   "--site-nav-item-disabled-color": "#4a4a4a",
   "--site-nav-item-badge-gap": "0.5rem",
+  "--site-nav-item-column-gap": "2rem",
   "--site-nav-item-current-font-weight": "300",
   "--site-nav-focus-ring-width": "2px",
   "--site-nav-focus-ring-offset": "2px",