@studiolxd/brand 49.9.0 → 49.11.0

package/CHANGELOG.md

@@ -7,6 +7,111 @@ 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.11.0] — 2026-09-19
+
+> **Minor.** Tres decisiones de maqueta sobre lo que la 49.10.0 dejó puesto: dónde va el
+> distintivo en el lanzador, que su panel crezca en vez de desplazarse, y que un grupo largo
+> del índice público quepa a dos columnas bajo un solo título.
+
+### El distintivo va encima del nombre, y su hueco se reserva siempre
+
+En `AppLauncher`, el distintivo de la baldosa se pinta **sobre** el nombre de la app, no a su
+lado. Y su fila se pinta **siempre**, lleve distintivo la baldosa o no: vacía es el hueco
+reservado que deja todos los nombres de la rejilla a la misma altura, de modo que una app que
+estrena píldora no empuja hacia abajo el nombre de su vecina.
+
+El alto de esa fila es el de una `Tag` y sale de sus tokens —
+`app-launcher.tile-badge-block-size` = `calc({tag.font-size} * {tag.line-height} + 2 *
+{tag.padding-block})` —, así que sigue cuadrando si la píldora cambia de talla. No hay medida
+escrita a mano.
+
+### El panel del lanzador crece con su contenido
+
+El panel **no tiene tope propio**: con las doce aplicaciones de la suite se ve entero. El único
+límite es el hueco que de verdad queda en la ventana (`--available-height`, que mide Base UI y
+que `app-launcher.content-max-height` no hace más que nombrar); solo cuando ni ese hueco da, el
+panel se recorta ahí y hace scroll. Un tope propio —una altura fija, «tantas filas»— recortaría
+la rejilla teniendo pantalla de sobra, y ahora lo impide un guardián sobre la hoja
+(`AppLauncher.panel.test.ts`).
+
+La rejilla pasa a **dos columnas en un panel estrecho** y tres desde `sm`
+(`app-launcher.content-columns-narrow`, nuevo, junto al `content-columns` de siempre): con tres
+columnas en móvil, doce baldosas dejaban los nombres partidos en tres líneas.
+
+### `SiteNav`: un grupo a dos columnas, bajo un solo título
+
+`SiteNavGroup` gana **`columns?: 1 | 2`** (por defecto `1`, el grupo de siempre). Con `2` el
+grupo ocupa en la rejilla el **ancho de dos** —doce tramos en `md`, ocho en `lg`, seis en `xl`—
+y reparte sus ítems en **dos columnas bajo un solo título**. Es lo que da sitio a un grupo largo
+—«Aplicaciones», con las diez o doce de la suite— sin partirlo en dos grupos con dos cabeceras,
+que sería otro índice.
+
+- El pasillo entre esas dos columnas es el mismo que separa dos grupos
+  (`site-nav.item-column-gap`, nuevo, que apunta a `group-gap`): más estrecho, el grupo ancho se
+  leería como dos grupos pegados.
+- Los ítems se leen **por filas**, en el orden del DOM.
+- **Por debajo de `md` vuelve a una columna**, como todo el índice.
+- El grupo ancho cuenta **por dos** en el tope de columnas (`site-nav.columns-max`) y queda
+  fuera del reparto de la última fila: ya ocupa lo que le toca y no tiene sobrante que recoger.
+- `disabled` y `badge` de la 49.10.0 siguen valiendo dentro de las dos columnas.
+
+El dato viaja en `data-group-columns`, nunca en un atributo `style` — el mismo motivo que
+`data-columns`.
+
+## [49.10.0] — 2026-09-18
+
+> **Minor.** La suite marca productos como «próximamente»: se ven en su sitio pero apagados,
+> sin navegación y con un distintivo. Ni la baldosa del `AppLauncher` ni el ítem del `SiteNav`
+> lo admitían.
+
+### La entrada apagada con distintivo, en el lanzador y en el índice del sitio
+
+`LauncherApp` y `SiteNavItem` ganan las mismas dos claves, `disabled` y `badge`.
+
+Con **`disabled`** la entrada se ve en su sitio pero **no navega**: deja de ser un `<a>` —en
+`SiteNav`, ni siquiera pasa por `renderLink`: no hay destino que dar—, se pinta como un enlace
+inactivo (`<span role="link" aria-disabled="true">`, donde el atributo sí es válido y el lector
+lo anuncia como no disponible) y **sin `tabIndex`**, así que el tabulador la salta. La tinta
+apagada es la de un control deshabilitado del sistema (`color.disabled.text-on-light|dark`), que
+no baja de 3:1 sobre la superficie — el mínimo de WCAG 1.4.11 para un componente inactivo, y el
+motivo de no inventar un gris más claro. Tampoco se rellena ni subraya bajo el puntero: el
+`:hover` alcanza también a un `<span>`, de ahí el `:not()` en las reglas de estado.
+
+**`badge`** es el distintivo, y su texto llega **ya traducido** desde la aplicación: es
+contenido —como el nombre de la app o el rótulo del ítem—, no cromo. Vale con `disabled`
+(«Próximamente») y sin él («Beta»), y sobre una entrada apagada va en `Tag neutral` en vez de
+`info`: una píldora de novedad sobre algo que no lleva a ningún sitio se leería como disponible.
+En `SiteNav` el distintivo es **hermano del enlace**, no hijo suyo — dentro, la línea de hover
+(que en el DS es una línea bajo el elemento, no `text-decoration`) cruzaría también la píldora,
+y el nombre accesible del enlace arrastraría el estado.
+
+`badge` **generaliza `isNew`** del lanzador, que es este mismo distintivo con el texto del
+catálogo (`appLauncher.new`). `isNew` **sigue funcionando y no se retira**; con los dos puestos,
+manda `badge`.
+
+### Los `exports` declaran `default`, para que un Node CommonJS pueda `require()`
+
+Las 170 subrutas condicionales de `package.json#exports` llevaban solo `types` e `import`.
+`import` casa únicamente con la condición de importación, así que un Node CommonJS —los
+workers de la suite empaquetados con esbuild en formato cjs, o un `tsx` cualquiera— que hiciera
+`require('@studiolxd/brand/email')` moría con `ERR_PACKAGE_PATH_NOT_EXPORTED`. Ahora cada
+subruta añade `default` apuntando **al mismo fichero ESM**, que es lo que Node necesita para
+cargarlo por `require(esm)`: no se publica una segunda copia en CJS ni cambia el formato de
+nada. Las subrutas que ya eran una cadena (CSS, SCSS, JSON, assets) no cambian — una cadena
+vale para toda condición.
+
+Lo vigilan dos guardianes, porque quedarse sin `default` no rompe ningún build: un test
+(`scripts/exports-default.test.ts`, en `pnpm test`) y un paso de `release:check`, ambos
+fallando si alguna subruta condicional se queda sin `default` o si `default` no apunta al mismo
+fichero que `import`.
+
+Tokens nuevos: `app-launcher.tile-disabled-color`, `site-nav.item-disabled-color`,
+`site-nav.item-badge-gap` y sus pares `surface-dark-*`, todos por referencia a
+`color.disabled.text-on-light|dark` — sin colores nuevos en la paleta.
+
+De paso, la doc del `AppLauncher` pierde el apartado «Color de dato», que describía una prop
+`accent` de `LauncherApp` retirada hace versiones.
+
 ## [49.9.0] — 2026-09-18
 
 > **Minor.** Tres huecos del sistema: la segunda línea del ítem de menú admite un nodo, el

package/dist/_shared/tokens.js

@@ -193,6 +193,7 @@ var e = {
 	"--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",
@@ -208,12 +209,14 @@ var e = {
 	"--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",
 	"--app-launcher-tile-name-line-height": "1.3",
 	"--app-launcher-tile-name-color": "#111e30",
 	"--app-launcher-tile-name-active-font-weight": "500",
+	"--app-launcher-tile-disabled-color": "#4a4a4a",
 	"--app-launcher-trigger-hover-bg": "#111e30",
 	"--app-launcher-trigger-hover-color": "#ffffff",
 	"--app-launcher-tile-highlighted-bg": "#111e30",
@@ -2888,6 +2891,9 @@ var e = {
 	"--site-nav-item-hover-color": "#111e30",
 	"--site-nav-item-underline-offset": "2px",
 	"--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",

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

@@ -23,7 +23,26 @@ export interface LauncherApp {
     id: string;
     name: string;
     url: string;
+    /**
+     * Marca de app nueva. **`badge` lo generaliza**: `isNew` es el mismo
+     * distintivo con un único texto, el del catálogo (`appLauncher.new`). Se
+     * mantiene por compatibilidad y sigue valiendo; con `badge` puesto, manda
+     * `badge`.
+     */
     isNew?: boolean;
+    /**
+     * Producto anunciado y todavía no disponible: la baldosa se ve en su sitio
+     * pero **apagada y sin navegación** — no es un `<a>`, no tiene `href` que
+     * seguir y el tabulador no se detiene en ella.
+     */
+    disabled?: boolean;
+    /**
+     * Texto del distintivo de la baldosa («Próximamente», «Nuevo», «Beta»…).
+     * Llega **ya traducido** desde la aplicación: es contenido de la suite, como
+     * el nombre de la app, no cromo del lanzador. Generaliza `isNew`, que es
+     * este mismo distintivo con el texto del catálogo.
+     */
+    badge?: string;
 }
 export interface AppLauncherLabels {
     /**

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

@@ -10,6 +10,18 @@ export interface SiteNavItem {
     target?: string;
     /** Relación del enlace. Con `target="_blank"` y sin valor, se aplica `noopener noreferrer`. */
     rel?: string;
+    /**
+     * Producto anunciado y todavía no disponible: el ítem se ve en su sitio pero
+     * **apagado y sin navegación** — no es un enlace, no pasa por `renderLink` y
+     * el tabulador no se detiene en él.
+     */
+    disabled?: boolean;
+    /**
+     * Texto del distintivo junto al rótulo («Próximamente», «Nuevo», «Beta»…).
+     * Llega **ya traducido**: es contenido de ESTE sitio, como el propio rótulo,
+     * no cromo del índice.
+     */
+    badge?: string;
 }
 export interface SiteNavGroup {
     id: string;
@@ -17,6 +29,16 @@ export interface SiteNavGroup {
     label: string;
     /** Si se indica, la cabecera es también un enlace (la portada de la sección). */
     href?: string;
+    /**
+     * En cuántas columnas se reparten los ítems de ESTE grupo, bajo **un solo
+     * título**. Por defecto `1`, el grupo de siempre. Con `2` —el caso de un
+     * grupo largo, como «Aplicaciones»— el grupo ocupa en la rejilla el ancho de
+     * dos y sus ítems se pintan en dos columnas dentro de él; por debajo de `md`
+     * vuelve a una, como todo lo demás. No es otro componente ni dos grupos: la
+     * cabecera sigue siendo una, y con ella el encabezado por el que se recorre
+     * el índice.
+     */
+    columns?: 1 | 2;
     items: SiteNavItem[];
 }
 export type SiteNavRenderLinkProps = {
@@ -48,6 +70,10 @@ export interface SiteNavProps {
  * en `data-columns`, no en un atributo `style`: una app con
  * `style-src 'self'` descarta el atributo sin avisar y el grupo de más caía
  * a la segunda fila.
+ *
+ * Un grupo puede valer por dos (`columns: 2`): ocupa el ancho de dos en la
+ * rejilla y reparte sus ítems en dos columnas bajo un solo título. El dato va
+ * también en un atributo, `data-group-columns`, por el mismo motivo.
  */
 /**
  * El único texto que el índice dice por su cuenta, y es **cromo**: el nombre de

package/dist/app-launcher.css

@@ -1 +1 @@
-.app-launcher__trigger{all:unset;box-sizing:border-box;width:var(--app-launcher-trigger-size);height:var(--app-launcher-trigger-size);border-radius:var(--app-launcher-trigger-border-radius);color:var(--app-launcher-trigger-color);cursor:pointer;transition:box-shadow var(--app-launcher-transition-duration) var(--app-launcher-transition-easing);justify-content:center;align-items:center;display:flex}.app-launcher__trigger:hover{background-color:var(--app-launcher-trigger-hover-bg);color:var(--app-launcher-trigger-hover-color)}.app-launcher__trigger:focus-visible{outline:var(--app-launcher-focus-ring-width) solid var(--app-launcher-focus-ring-color);outline-offset:var(--app-launcher-focus-ring-offset)}.app-launcher__trigger--label{gap:var(--app-launcher-trigger-label-gap);width:auto;height:auto;padding-block:var(--app-launcher-trigger-label-padding-block);padding-inline:var(--app-launcher-trigger-label-padding-inline);border-radius:var(--app-launcher-trigger-label-border-radius);color:var(--app-launcher-trigger-label-color)}.app-launcher__trigger-label{font-size:var(--app-launcher-trigger-label-font-size);font-weight:var(--app-launcher-trigger-label-font-weight);line-height:var(--app-launcher-trigger-label-line-height)}.app-launcher__trigger--label:hover{color:var(--app-launcher-trigger-label-color);background-color:#0000}.app-launcher__content{box-sizing:border-box;background-color:var(--app-launcher-content-bg);border-width:var(--app-launcher-content-border-width);border-style:solid;border-color:var(--app-launcher-content-border-color);border-radius:var(--app-launcher-content-border-radius);box-shadow:var(--app-launcher-content-shadow);padding-block:var(--app-launcher-content-padding-block);padding-inline:var(--app-launcher-content-padding-inline);min-width:var(--app-launcher-content-min-width);transform-origin:var(--transform-origin);animation-duration:var(--app-launcher-transition-duration);animation-timing-function:var(--app-launcher-transition-easing);max-height:var(--app-launcher-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;overflow-y:auto}.app-launcher__content[data-open]{animation-name:app-launcher-in}.app-launcher__content[data-closed]{animation-name:app-launcher-out}@keyframes app-launcher-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes app-launcher-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.app-launcher__grid{grid-template-columns:repeat(var(--app-launcher-content-columns), 1fr);gap:var(--app-launcher-content-gap);margin:0;padding:0;list-style:none;display:grid}.app-launcher__tile{box-sizing:border-box;align-items:center;gap:var(--app-launcher-tile-gap);padding-block:var(--app-launcher-tile-padding-block);padding-inline:var(--app-launcher-tile-padding-inline);border-radius:var(--app-launcher-tile-border-radius);box-shadow:none;text-align:start;cursor:pointer;transition:background-color var(--app-launcher-transition-duration) var(--app-launcher-transition-easing), box-shadow var(--app-launcher-transition-duration) var(--app-launcher-transition-easing);outline:none;text-decoration:none;display:flex}.app-launcher__tile:hover,.app-launcher__tile:focus-visible{background-color:var(--app-launcher-tile-highlighted-bg);color:var(--app-launcher-tile-highlighted-color)}.app-launcher__tile:hover .app-launcher__tile-name,.app-launcher__tile:focus-visible .app-launcher__tile-name{color:inherit}.app-launcher__tile:focus-visible{outline:var(--app-launcher-focus-ring-width) solid var(--app-launcher-focus-ring-color);outline-offset:var(--app-launcher-focus-ring-offset)}.app-launcher__tile--active .app-launcher__tile-name{font-weight:var(--app-launcher-tile-name-active-font-weight)}.app-launcher__tile-name{font-size:var(--app-launcher-tile-name-font-size);font-weight:var(--app-launcher-tile-name-font-weight);line-height:var(--app-launcher-tile-name-line-height);color:var(--app-launcher-tile-name-color)}.app-launcher__tile-badge{pointer-events:none}.app-launcher__tile:hover .app-launcher__tile-badge,.app-launcher__tile:focus-visible .app-launcher__tile-badge{--tag-info-bg:var(--app-launcher-tile-badge-hover-bg);--tag-info-color:var(--app-launcher-tile-badge-hover-color)}.app-launcher__positioner{z-index:var(--app-launcher-content-z-index)}
+.app-launcher__trigger{all:unset;box-sizing:border-box;width:var(--app-launcher-trigger-size);height:var(--app-launcher-trigger-size);border-radius:var(--app-launcher-trigger-border-radius);color:var(--app-launcher-trigger-color);cursor:pointer;transition:box-shadow var(--app-launcher-transition-duration) var(--app-launcher-transition-easing);justify-content:center;align-items:center;display:flex}.app-launcher__trigger:hover{background-color:var(--app-launcher-trigger-hover-bg);color:var(--app-launcher-trigger-hover-color)}.app-launcher__trigger:focus-visible{outline:var(--app-launcher-focus-ring-width) solid var(--app-launcher-focus-ring-color);outline-offset:var(--app-launcher-focus-ring-offset)}.app-launcher__trigger--label{gap:var(--app-launcher-trigger-label-gap);width:auto;height:auto;padding-block:var(--app-launcher-trigger-label-padding-block);padding-inline:var(--app-launcher-trigger-label-padding-inline);border-radius:var(--app-launcher-trigger-label-border-radius);color:var(--app-launcher-trigger-label-color)}.app-launcher__trigger-label{font-size:var(--app-launcher-trigger-label-font-size);font-weight:var(--app-launcher-trigger-label-font-weight);line-height:var(--app-launcher-trigger-label-line-height)}.app-launcher__trigger--label:hover{color:var(--app-launcher-trigger-label-color);background-color:#0000}.app-launcher__content{box-sizing:border-box;background-color:var(--app-launcher-content-bg);border-width:var(--app-launcher-content-border-width);border-style:solid;border-color:var(--app-launcher-content-border-color);border-radius:var(--app-launcher-content-border-radius);box-shadow:var(--app-launcher-content-shadow);padding-block:var(--app-launcher-content-padding-block);padding-inline:var(--app-launcher-content-padding-inline);min-width:var(--app-launcher-content-min-width);transform-origin:var(--transform-origin);animation-duration:var(--app-launcher-transition-duration);animation-timing-function:var(--app-launcher-transition-easing);max-height:var(--app-launcher-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;overflow-y:auto}.app-launcher__content[data-open]{animation-name:app-launcher-in}.app-launcher__content[data-closed]{animation-name:app-launcher-out}@keyframes app-launcher-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes app-launcher-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.app-launcher__grid{grid-template-columns:repeat(var(--app-launcher-content-columns-narrow), 1fr);gap:var(--app-launcher-content-gap);margin:0;padding:0;list-style:none;display:grid}@media (width>=480px){.app-launcher__grid{grid-template-columns:repeat(var(--app-launcher-content-columns), 1fr)}}.app-launcher__grid>li{min-inline-size:0}.app-launcher__tile{box-sizing:border-box;align-items:flex-start;gap:var(--app-launcher-tile-gap);padding-block:var(--app-launcher-tile-padding-block);padding-inline:var(--app-launcher-tile-padding-inline);border-radius:var(--app-launcher-tile-border-radius);box-shadow:none;text-align:start;cursor:pointer;transition:background-color var(--app-launcher-transition-duration) var(--app-launcher-transition-easing), box-shadow var(--app-launcher-transition-duration) var(--app-launcher-transition-easing);outline:none;flex-direction:column;text-decoration:none;display:flex}.app-launcher__tile:not(.app-launcher__tile--disabled):hover,.app-launcher__tile:focus-visible{background-color:var(--app-launcher-tile-highlighted-bg);color:var(--app-launcher-tile-highlighted-color)}.app-launcher__tile:not(.app-launcher__tile--disabled):hover .app-launcher__tile-name,.app-launcher__tile:focus-visible .app-launcher__tile-name{color:inherit}.app-launcher__tile:focus-visible{outline:var(--app-launcher-focus-ring-width) solid var(--app-launcher-focus-ring-color);outline-offset:var(--app-launcher-focus-ring-offset)}.app-launcher__tile--active .app-launcher__tile-name{font-weight:var(--app-launcher-tile-name-active-font-weight)}.app-launcher__tile.app-launcher__tile--disabled{cursor:default}.app-launcher__tile--disabled .app-launcher__tile-name{color:var(--app-launcher-tile-disabled-color)}.app-launcher__tile-badge-row{min-block-size:var(--app-launcher-tile-badge-block-size);align-items:center;display:flex}.app-launcher__tile-name{font-size:var(--app-launcher-tile-name-font-size);font-weight:var(--app-launcher-tile-name-font-weight);line-height:var(--app-launcher-tile-name-line-height);color:var(--app-launcher-tile-name-color)}.app-launcher__tile-badge{pointer-events:none}.app-launcher__tile:not(.app-launcher__tile--disabled):hover .app-launcher__tile-badge,.app-launcher__tile:focus-visible .app-launcher__tile-badge{--tag-info-bg:var(--app-launcher-tile-badge-hover-bg);--tag-info-color:var(--app-launcher-tile-badge-hover-color)}.app-launcher__positioner{z-index:var(--app-launcher-content-z-index)}

package/dist/app-launcher.js

@@ -10,19 +10,27 @@ import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 import { Popover as l } from "@base-ui/react/popover";
 //#region src/stories/molecules/AppLauncher/AppLauncher.tsx
 function u({ app: t, isCurrent: n, newLabel: i }) {
-	let a = e("appLauncher");
-	return /* @__PURE__ */ c("a", {
+	let a = e("appLauncher"), l = t.badge ?? (t.isNew ? a("new", i) : void 0), u = /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("span", {
+		className: "app-launcher__tile-badge-row",
+		children: l && /* @__PURE__ */ s(r, {
+			variant: t.disabled ? "neutral" : "info",
+			className: "app-launcher__tile-badge",
+			children: l
+		})
+	}), /* @__PURE__ */ s("span", {
+		className: "app-launcher__tile-name",
+		children: t.name
+	})] });
+	return t.disabled ? /* @__PURE__ */ s("span", {
+		className: "app-launcher__tile app-launcher__tile--disabled",
+		role: "link",
+		"aria-disabled": "true",
+		children: u
+	}) : /* @__PURE__ */ s("a", {
 		href: t.url,
 		className: `app-launcher__tile${n ? " app-launcher__tile--active" : ""}`,
 		"aria-current": n ? "page" : void 0,
-		children: [/* @__PURE__ */ s("span", {
-			className: "app-launcher__tile-name",
-			children: t.name
-		}), t.isNew && /* @__PURE__ */ s(r, {
-			variant: "info",
-			className: "app-launcher__tile-badge",
-			children: a("new", i)
-		})]
+		children: u
 	});
 }
 function d({ apps: e, currentAppId: t, newLabel: n }) {