@studiolxd/brand 46.0.0 → 47.1.0

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

@@ -16,10 +16,14 @@ export interface PrevNextNavProps {
     /**
      * Rótulo del control anterior. Sin `prevTitle` es el `aria-label` del
      * chevron; con `prevTitle` es el rótulo **visible** que lo encabeza.
-     * Default: "Anterior"
+     * **Sin default**: sin él, sale de `prevNextNav.previous` del
+     * `BrandMessagesProvider`.
      */
     prevLabel?: string;
-    /** Rótulo del control siguiente. Mismo contrato que `prevLabel`. Default: "Siguiente" */
+    /**
+     * Rótulo del control siguiente. Mismo contrato que `prevLabel`. **Sin
+     * default**: sale de `prevNextNav.next`.
+     */
     nextLabel?: string;
     /**
      * Título visible del destino anterior (el de la página, el capítulo…). Con
@@ -47,4 +51,15 @@ export interface PrevNextNavProps {
     /** Variante de densidad. Default: "md" */
     size?: 'sm' | 'md';
 }
+/**
+ * Los dos textos del par, y los dos son **cromo**: «anterior» y «siguiente»
+ * dicen la dirección, no el destino. El destino —`prevTitle`, `nextTitle`, el
+ * rótulo del medio— es **contenido** y lo escribe la página.
+ */
+export interface PrevNextNavMessages {
+    /** Rótulo del control anterior. */
+    previous: string;
+    /** Rótulo del control siguiente. */
+    next: string;
+}
 export declare function PrevNextNav({ prevHref, nextHref, prevOnClick, nextOnClick, prevLabel, nextLabel, prevTitle, nextTitle, label, labelId, linkComponent, size, }: PrevNextNavProps): import("react/jsx-runtime").JSX.Element;

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

@@ -39,13 +39,14 @@ export interface SheetProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
     /** Elemento que abre el panel. Sin él, la apertura la controla el consumidor. */
     trigger?: ReactNode;
     /**
-     * Nodo DOM donde montar el portal del panel (reenviado a Base UI
-     * `Portal.container`). Por defecto se monta en `document.body`, que
-     * hereda el tema activado a nivel raíz (`html.dark`/`[data-theme="dark"]`)
-     * sin configuración adicional. Solo hace falta pasarlo cuando el Sheet
-     * vive dentro de una superficie **anidada** (un `.surface-dark` que no está
-     * en la raíz, o dentro de `SiteShell`/`.site-shell`), ya que ese contexto
-     * no llega a `document.body` por la cascada.
+     * Nodo DOM donde montar el portal del panel (reenviado a Base UI `Portal.container`).
+     * Por defecto, el nodo de la superficie que llegue por contexto:
+     * `SiteShell` publica el suyo, de modo que la capa hereda la talla de la
+     * superficie pública en vez de abrirse a la de aplicación. Si no hay
+     * superficie, `document.body` — que ya hereda el tema activado en la raíz
+     * (`html.dark`/`[data-theme="dark"]`) sin configuración adicional. Pásalo
+     * solo para llevar la capa a otro sitio: un `.surface-dark` **anidado**, el
+     * cajón de un shell propio. Gana siempre.
      */
     container?: React.ComponentPropsWithoutRef<typeof Dialog.Portal>['container'];
     /**

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

@@ -41,11 +41,14 @@ export type SidebarNavRenderLinkProps = React.AnchorHTMLAttributes<HTMLAnchorEle
     'aria-current'?: 'page';
 };
 export interface SidebarNavProps {
-    /** Nombre accesible del `nav`. */
+    /**
+     * Nombre accesible del `nav`. **Sin default**: sin él, sale de
+     * `sidebarNav.label` del `BrandMessagesProvider`.
+     */
     label?: string;
     /**
-     * Marca de las entradas vacías (`empty`). Por defecto, en castellano:
-     * «sin docs».
+     * Marca de las entradas vacías (`empty`). **Sin default**: sale de
+     * `sidebarNav.empty`. Solo se lee cuando hay alguna entrada vacía.
      */
     emptyLabel?: string;
     /** Solo iconos: los enlaces con tooltip, los grupos como menú. Sin él, lo decide la `Sidebar` (rail). */
@@ -56,4 +59,16 @@ export interface SidebarNavProps {
     onValueChange?: (value: string[]) => void;
     renderLink?: (props: SidebarNavRenderLinkProps) => ReactNode;
 }
+/**
+ * Los dos textos de la navegación, los dos **cromo**: el nombre de la región
+ * («Principal», el mismo en toda la suite) y la marca que se pone a una entrada
+ * sin contenido. Los rótulos de las entradas son **contenido** y siguen
+ * viniendo en `entries`.
+ */
+export interface SidebarNavMessages {
+    /** Nombre accesible del `nav`. */
+    label: string;
+    /** Marca de las entradas sin contenido. */
+    empty: string;
+}
 export declare function SidebarNav({ label, emptyLabel, rail, entries, defaultValue, value, onValueChange, renderLink, }: SidebarNavProps): import("react/jsx-runtime").JSX.Element;

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

@@ -49,4 +49,13 @@ export interface SiteNavProps {
  * `style-src 'self'` descarta el atributo sin avisar y el grupo de más caía
  * a la segunda fila.
  */
+/**
+ * El único texto que el índice dice por su cuenta, y es **cromo**: el nombre de
+ * la región de navegación. Los grupos y sus enlaces son **contenido** y vienen
+ * en `groups`.
+ */
+export interface SiteNavMessages {
+    /** Nombre accesible del `nav`. */
+    label: string;
+}
 export declare function SiteNav({ groups, label, renderLink, className, }: SiteNavProps): import("react/jsx-runtime").JSX.Element;

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

@@ -17,8 +17,8 @@ export interface TableOfContentsProps extends Omit<React.ComponentPropsWithoutRe
      */
     activeId?: string;
     /**
-     * Nombre accesible del `nav`. Por defecto, en castellano.
-     * @default 'En esta página'
+     * Nombre accesible del `nav`. **Sin default**: sin él, sale de
+     * `tableOfContents.label` del `BrandMessagesProvider`.
      */
     ariaLabel?: string;
     /** Rótulo visible sobre la lista. Sin él, no se pinta ninguno. */
@@ -46,4 +46,13 @@ export interface TableOfContentsProps extends Omit<React.ComponentPropsWithoutRe
  * `{...rest}` (`id`, `data-*`, `role`…) se reenvía al `<nav>`. El nombre
  * accesible sigue siendo `ariaLabel`.
  */
+/**
+ * El único texto que el índice dice por su cuenta, y es **cromo**: «En esta
+ * página» nombra la región, no la página. El rótulo visible (`title`) y los
+ * encabezados (`items`) son **contenido**.
+ */
+export interface TableOfContentsMessages {
+    /** Nombre accesible del `nav`. */
+    label: string;
+}
 export declare const TableOfContents: import("react").ForwardRefExoticComponent<TableOfContentsProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,11 +1,26 @@
 import type { ReactNode } from 'react';
 import type { MenuItem, MenuRenderLinkProps } from '../Menu/Menu';
 import './UserMenu.css';
+/**
+ * Lo que el menú de cuenta dice por su cuenta, y es **cromo**: cómo se nombra
+ * su botón y cómo se cuentan las notificaciones sin leer. Los dos interpolan un
+ * dato —el nombre, el número—, así que son funciones. El nombre, el correo y
+ * los ítems son **contenido** y siguen viniendo por props.
+ */
+export interface UserMenuMessages {
+    /** Nombre accesible del botón, a partir del nombre del usuario. */
+    trigger: (name: string) => string;
+    /** Nombre accesible del contador de notificaciones sin leer. */
+    unread: (count: number) => string;
+}
 export interface UserMenuProps {
     name: string;
     email: string;
     avatarUrl?: string;
-    /** Nombre accesible del botón. Por defecto, «Cuenta de ‹nombre›». */
+    /**
+     * Nombre accesible del botón. **Sin default**: sin él, sale de
+     * `userMenu.trigger` del `BrandMessagesProvider`, que recibe el nombre.
+     */
     label?: string;
     /** Sin nombre — avatar, badge y chevron: para la barra del AppHeader. El nombre sigue en el panel y en el nombre accesible. */
     compact?: boolean;

package/dist/_types/sections/AppHeader/AppHeader.d.ts

@@ -7,9 +7,15 @@ export interface AppHeaderProps {
     notifications?: ReactNode;
     /** Al final, siempre: el `UserMenu` (compacto). */
     end?: ReactNode;
-    /** Texto accesible del botón de menú. */
+    /**
+     * Texto accesible del botón de menú. **Reenvío puro** al `MenuButton`: sin
+     * él, el botón lee `menuButton.open` del `BrandMessagesProvider`.
+     */
     menuLabel?: string;
-    /** Texto accesible del botón cuando la sidebar está abierta («Cerrar menú»). */
+    /**
+     * Texto accesible del botón con la sidebar abierta. **Reenvío puro** al
+     * `MenuButton`: sin él, lee `menuButton.close`.
+     */
     menuCloseLabel?: string;
     /** id de la sidebar que gobierna el botón (`aria-controls`). */
     sidebarId?: string;

package/dist/_types/sections/AppRoot/AppRoot.d.ts

@@ -1,6 +1,17 @@
 import type { ReactNode } from 'react';
-export interface AppRootProps {
+/**
+ * El único texto de la raíz, y es **cromo**: el enlace de salto al contenido
+ * dice lo mismo en todo el documento y en todos los productos.
+ */
+export interface AppRootMessages {
     /** Texto del enlace de salto al contenido. */
+    skipToContent: string;
+}
+export interface AppRootProps {
+    /**
+     * Texto del enlace de salto al contenido. **Sin default**: sin él, sale de
+     * `appRoot.skipToContent` del `BrandMessagesProvider`.
+     */
     skipLabel?: string;
     /** Destino del salto: el `id` del contenido principal de la página. */
     skipHref?: string;

package/dist/_types/sections/AppShell/AppShell.d.ts

@@ -17,9 +17,22 @@ export interface AppShellProps {
     /** Ancho inicial de la sidebar desplegada (px). Sin él, el token `sidebar.width`. */
     defaultSidebarWidth?: number;
     onSidebarWidthChange?: (width: number) => void;
-    /** Texto del enlace de salto al contenido (`SkipLink`). Default: castellano. */
+    /**
+     * Texto del enlace de salto al contenido (`SkipLink`). **Sin default**: sin
+     * él, sale de `appShell.skipToContent` del `BrandMessagesProvider`.
+     */
     skipLabel?: string;
 }
+/**
+ * El único texto que el armazón dice por su cuenta, y es **cromo**: el enlace
+ * de salto al contenido dice lo mismo en todas las pantallas de todas las
+ * aplicaciones. Lo que hay dentro del armazón —la barra, la navegación, la
+ * página— lo escribe el producto.
+ */
+export interface AppShellMessages {
+    /** Texto del enlace de salto al contenido. */
+    skipToContent: string;
+}
 /**
  * El armazón de una aplicación: barra superior, barra lateral y contenido.
  * Lleva el estado de la sidebar (abierta, rail o cerrada; su ancho) y lo

package/dist/_types/sections/Hero/Hero.d.ts

@@ -4,7 +4,10 @@ import './Hero.css';
 export interface HeroProps {
     /** El título de la portada: un `Heading` de nivel 1 a talla 10 (display). */
     title: ReactNode;
-    /** La frase bajo el título, opcional: `Paragraph size="large"`. */
+    /**
+     * La frase bajo el título, opcional: `Paragraph size="large"`. Termina en
+     * punto (ver Foundations → Redacción).
+     */
     description?: ReactNode;
     /** Uno o varios botones (`Button`), en fila con envoltura (`Inline`), bajo el texto. Van a talla `lg`: la escala del Hero lo pide, y el consumidor no tiene que acordarse de pasarla. */
     actions?: ReactNode;

package/dist/_types/sections/Sidebar/Sidebar.d.ts

@@ -1,6 +1,20 @@
 import { type ReactNode } from 'react';
 import './Sidebar.css';
 export { useSidebar } from './SidebarContext';
+/**
+ * Lo que la barra dice por su cuenta, y todo es **cromo**: su nombre de región,
+ * el nombre del asa que la ensancha y cómo se lee su ancho. Ninguno depende de
+ * qué haya dentro —eso lo escribe el producto en `children`—, así que los tres
+ * van al catálogo.
+ */
+export interface SidebarMessages {
+    /** Nombre accesible del `aside`. */
+    label: string;
+    /** Nombre accesible del asa de redimensión. */
+    resizer: string;
+    /** Valor hablado del asa: el ancho con su unidad. */
+    resizerValue: (width: number) => string;
+}
 export interface SidebarProps {
     /** Arriba del todo (un `Logo`). */
     logo?: ReactNode;
@@ -9,11 +23,21 @@ export interface SidebarProps {
     /** Pie fijo, fuera del scroll del panel. */
     footer?: ReactNode;
     id?: string;
-    /** Nombre accesible del `aside`. Default: «Barra lateral» (castellano). Una app multiidioma debe pasarlo traducido. */
+    /**
+     * Nombre accesible del `aside`. **Sin default**: sin él, sale de
+     * `sidebar.label` del `BrandMessagesProvider`.
+     */
     label?: string;
-    /** Texto accesible del asa de redimensión. Default: «Ancho de la barra lateral» (castellano). Una app multiidioma debe pasarlo traducido. */
+    /**
+     * Nombre accesible del asa de redimensión. **Sin default**: sale de
+     * `sidebar.resizer`. Solo se lee cuando el asa existe (escritorio, dentro de
+     * un `AppShell`, con la barra no cerrada).
+     */
     resizerLabel?: string;
-    /** Valor hablado del asa: el ancho con su unidad. Default: «N píxeles» (castellano). Una app multiidioma debe pasarlo traducido. */
+    /**
+     * Valor hablado del asa: el ancho con su unidad. **Sin default**: sale de
+     * `sidebar.resizerValue`. Interpola el ancho, así que es una función.
+     */
     resizerValueText?: (width: number) => string;
     /** Fuerza el modo sin `AppShell` (Storybook, pruebas). Con shell, lo decide el shell. */
     mode?: 'open' | 'rail';

package/dist/_types/sections/SiteHeader/SiteHeader.d.ts

@@ -11,11 +11,20 @@ export type SiteHeaderLogoLinkProps = {
 export interface SiteHeaderProps {
     /** Destino del logotipo. */
     logoHref?: string;
-    /** Texto accesible del enlace del logotipo. */
+    /**
+     * Texto accesible del enlace del logotipo. **Sin default**: sin él, sale de
+     * `siteHeader.logo` del `BrandMessagesProvider`.
+     */
     logoLabel?: string;
-    /** aria-label del botón de menú. */
+    /**
+     * aria-label del botón de menú. **Reenvío puro** al `MenuButton`: sin él, el
+     * botón lee `menuButton.open`.
+     */
     menuLabel?: string;
-    /** aria-label del botón de menú cuando está abierto («Cerrar menú»). */
+    /**
+     * aria-label del botón de menú abierto. **Reenvío puro** al `MenuButton`:
+     * sin él, lee `menuButton.close`.
+     */
     menuCloseLabel?: string;
     /** La marca. Por defecto el `Logo` de Studio LXD a `logoSize`; un producto de la suite pone la suya. */
     logo?: ReactNode;
@@ -55,4 +64,14 @@ export interface SiteHeaderProps {
  * El enlace de salto al contenido no va aquí: lo pone `AppRoot`, una vez por
  * documento.
  */
+/**
+ * El único texto propio de la cabecera, y es **cromo**: qué hace el logotipo
+ * («ir al inicio»), no qué marca es. Lo que dice el botón de menú no se repite
+ * aquí —es un reenvío puro al `MenuButton`—, y los enlaces de `actions` y del
+ * panel son **contenido** del producto.
+ */
+export interface SiteHeaderMessages {
+    /** Texto accesible del enlace del logotipo. */
+    logo: string;
+}
 export declare function SiteHeader({ logoHref, logoLabel, menuLabel, menuCloseLabel, logoSize, logo, menuButtonSize, renderLogoLink, width, open, onOpenChange, children, settings, panelId, actions, language, }: SiteHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/sections/SiteShell/SiteShell.d.ts

@@ -17,10 +17,16 @@ export interface SiteShellProps {
  * Para las aplicaciones con barra y sidebar está `AppShell`.
  */
 /**
- * Reenvía el `ref` al nodo raíz (`.site-shell`): un `Modal`/`Sheet` abierto
- * desde dentro necesita apuntar su `container` aquí para heredar los tokens
- * de la superficie pública — el portal por defecto monta en `document.body`,
- * que no es descendiente de `.site-shell` (a diferencia del tema oscuro, que
- * se activa en `<html>` y sí llega a cualquier portal sin configuración).
+ * **Los portales que se abran dentro heredan la superficie.** El shell publica
+ * su nodo raíz por `PortalContainerContext`, y todo componente con portal
+ * —`Select`, `MultiSelect`, `DatePicker`, `Popover`, `Tooltip`, `Menu`,
+ * `Modal`, `Sheet`, `Toaster`…— lo toma como destino cuando no recibe
+ * `container`. Sin eso, la lista de un `Select` montaba en `document.body`,
+ * fuera de `.site-shell`, y se abría a la talla de aplicación mientras su
+ * campo iba a la pública. No hay nada que pasar en cada uso; la prop
+ * `container` sigue ahí para quien quiera otro destino y gana siempre.
+ *
+ * Reenvía además el `ref` al nodo raíz (`.site-shell`), para quien necesite
+ * apuntar ahí a mano.
  */
 export declare const SiteShell: import("react").ForwardRefExoticComponent<SiteShellProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/_types/templates/OnboardingShell/OnboardingShell.d.ts

@@ -29,7 +29,10 @@ export interface OnboardingShellProps {
      * @deprecated Usa `preferences`.
      */
     switchers?: ReactNode;
-    /** Nombre accesible de la banda de preferencias. Default: «Preferencias» (castellano). */
+    /**
+     * Nombre accesible de la banda de preferencias. **Reenvío puro** al
+     * `PublicPageShell`: sin él, la banda lee `publicPageShell.preferences`.
+     */
     preferencesLabel?: string;
     /**
      * El progreso: un `Stepper`. La ranura se monta siempre; es el `Stepper`
@@ -47,7 +50,11 @@ export interface OnboardingShellProps {
      * escritorio, y debajo y centrada en móvil.
      */
     exitAction?: ReactNode;
-    /** Nombre accesible del grupo de acciones del pie. Default: «Acciones del paso» (castellano). */
+    /**
+     * Nombre accesible del grupo de acciones del pie. **Sin default**: sin él,
+     * sale de `onboardingShell.actions` del `BrandMessagesProvider`. Solo se lee
+     * cuando el paso trae alguna acción.
+     */
     actionsLabel?: string;
     /** `id` del `main` (`main-content` por defecto, destino del `SkipLink`). */
     id?: string;
@@ -101,4 +108,14 @@ export interface OnboardingShellProps {
  * dentro —un `Form`, un campo suelto, un `AvatarUpload`— sale a la talla que
  * le toca sin que la aplicación tenga que acordarse de pedirla.
  */
+/**
+ * El único texto propio de la plantilla, y es **cromo**: el nombre del grupo de
+ * acciones del pie. Lo que digan los botones —«Continuar», «Atrás», «Omitir por
+ * ahora»— es **contenido** y viene en las ranuras. El nombre de la banda de
+ * preferencias tampoco está aquí: es un reenvío puro al `PublicPageShell`.
+ */
+export interface OnboardingShellMessages {
+    /** Nombre accesible del grupo de acciones del pie. */
+    actions: string;
+}
 export declare function OnboardingShell({ children, brand, preferences, switchers, preferencesLabel, stepper, primaryAction, backAction, exitAction, actionsLabel, id, shell, width, className, }: OnboardingShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/templates/PublicPageShell/PublicPageShell.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type ContainerSpace, type ContainerWidth } from '../../atoms/Container/Container';
 import './PublicPageShell.css';
 export interface PublicPageShellProps {
     /** El contenido de la página: lo que va dentro del `main`. */
@@ -19,8 +20,31 @@ export interface PublicPageShellProps {
      * pie, igual que `header` y `footer`.
      */
     preferences?: ReactNode;
-    /** Nombre accesible de la banda de preferencias. Default: «Preferencias» (castellano). */
+    /**
+     * Nombre accesible de la banda de preferencias. **Sin default**: sin él,
+     * sale de `publicPageShell.preferences` del `BrandMessagesProvider`. Solo se
+     * lee cuando hay banda.
+     */
     preferencesLabel?: string;
+    /**
+     * Medida del contenido del `main`, tal cual la de `Container`. Por defecto
+     * `'xl'` (1280px), el ancho de las páginas públicas; `'full'` para que el
+     * contenido llegue tan lejos como la banda, que es lo que necesita una
+     * portada que abre con un `Hero` de lado a lado.
+     */
+    mainWidth?: ContainerWidth;
+    /**
+     * Aire vertical del `main`. Por defecto `'xl'`, el de una página pública
+     * corriente; `'none'` cuando lo que va dentro son secciones que ya traen su
+     * propio aire (ver `Container` § «Las secciones traen su aire»).
+     */
+    mainSpace?: ContainerSpace;
+    /**
+     * Quita el aire lateral del `main`, para contenido que debe tocar el borde
+     * de la pantalla. Por defecto `false`. Va con `mainWidth="full"`: sin él, el
+     * contenido seguiría acotado y solo se perdería el margen.
+     */
+    mainFlush?: boolean;
     /** `id` del `main` (`main-content` por defecto, destino del `SkipLink`). */
     id?: string;
     /**
@@ -50,10 +74,22 @@ export interface PublicPageShellProps {
  * flotante abierto desde la página —`ConsentPreferences`, un `Modal`, un
  * `Sheet`—: su portal monta por defecto en `document.body`, que no es
  * descendiente de `.site-shell` y por tanto no hereda el remapeo de superficie
- * pública. Apuntarlo al `main` no serviría: el `main` es un `Container`
- * acotado y con su aire, así que el panel quedaría metido dentro de la columna
- * de contenido en vez de flotar sobre la página. Con `shell={false}` no hay
- * marco y el `ref` se queda sin asignar: ahí el contenedor es el `AppShell` de
- * la app.
+ * pública. Apuntarlo al `main` no serviría: el `main` es un `Container` —por
+ * defecto acotado y con su aire—, así que el panel quedaría metido dentro de
+ * la columna de contenido en vez de flotar sobre la página. Con `shell={false}`
+ * no hay marco y el `ref` se queda sin asignar: ahí el contenedor es el
+ * `AppShell` de la app.
+ *
+ * **El `main` lleva los mismos mandos que un `Container`** (`mainWidth`,
+ * `mainSpace`, `mainFlush`), con los defaults de siempre. Es lo que permite que
+ * una portada abra con un `Hero` de lado a lado sin salirse del marco.
  */
+/**
+ * El único texto del marco, y es **cromo**: el nombre de la banda donde viven
+ * el idioma y el tema. Lo que se ponga dentro es **contenido**.
+ */
+export interface PublicPageShellMessages {
+    /** Nombre accesible de la banda de preferencias. */
+    preferences: string;
+}
 export declare const PublicPageShell: import("react").ForwardRefExoticComponent<PublicPageShellProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/app-header.js

@@ -5,7 +5,7 @@ import { t } from "./_shared/appshellcontext.js";
 import { useContext as n, useState as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/stories/sections/AppHeader/AppHeader.tsx
-function o({ start: o, notifications: s, end: c, menuLabel: l = "Menú de navegación", menuCloseLabel: u, sidebarId: d }) {
+function o({ start: o, notifications: s, end: c, menuLabel: l, menuCloseLabel: u, sidebarId: d }) {
 	let f = n(t), [p, m] = r(!1), h = f ? f.sidebar === "open" : p;
 	return /* @__PURE__ */ a("header", {
 		className: "app-header",