@studiolxd/brand 49.9.0 → 49.10.0

package/CHANGELOG.md

@@ -7,6 +7,60 @@ 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.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

@@ -214,6 +214,7 @@ var e = {
 	"--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 +2889,8 @@ 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-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;

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), 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: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-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,24 @@ 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-name",
+		children: t.name
+	}), l && /* @__PURE__ */ s(r, {
+		variant: t.disabled ? "neutral" : "info",
+		className: "app-launcher__tile-badge",
+		children: l
+	})] });
+	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 }) {