@studiolxd/brand 49.10.0 → 49.11.0

package/CHANGELOG.md

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

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,6 +209,7 @@ 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",
@@ -2891,6 +2893,7 @@ var e = {
 	"--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/SiteNav/SiteNav.d.ts

@@ -29,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 = {
@@ -60,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: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)}
+.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

@@ -11,12 +11,15 @@ 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"), 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
-	}), 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",