@studiolxd/brand 45.1.0 → 47.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/CHANGELOG.md +168 -0
  2. package/dist/_shared/portal-container.js +9 -0
  3. package/dist/_types/atoms/AsyncMultiSelect/AsyncMultiSelect.d.ts +8 -7
  4. package/dist/_types/atoms/AsyncSelect/AsyncSelect.d.ts +8 -6
  5. package/dist/_types/atoms/InputPhone/InputPhone.d.ts +8 -5
  6. package/dist/_types/atoms/MenuButton/MenuButton.d.ts +22 -2
  7. package/dist/_types/atoms/MultiSelect/MultiSelect.d.ts +8 -6
  8. package/dist/_types/atoms/Popover/Popover.d.ts +8 -1
  9. package/dist/_types/atoms/Select/Select.d.ts +8 -7
  10. package/dist/_types/atoms/Tooltip/Tooltip.d.ts +7 -0
  11. package/dist/_types/constants/portal-container.d.ts +42 -0
  12. package/dist/_types/messages/BrandMessages.d.ts +41 -1
  13. package/dist/_types/messages/index.d.ts +1 -1
  14. package/dist/_types/molecules/AppLauncher/AppLauncher.d.ts +43 -8
  15. package/dist/_types/molecules/Breadcrumb/Breadcrumb.d.ts +10 -2
  16. package/dist/_types/molecules/CommandPalette/CommandPalette.d.ts +43 -8
  17. package/dist/_types/molecules/Consent/Consent.d.ts +93 -20
  18. package/dist/_types/molecules/Menu/Menu.d.ts +8 -1
  19. package/dist/_types/molecules/Modal/Modal.d.ts +8 -6
  20. package/dist/_types/molecules/NotificationButton/NotificationButton.d.ts +17 -4
  21. package/dist/_types/molecules/NotificationPanel/NotificationPanel.d.ts +54 -8
  22. package/dist/_types/molecules/OrgSwitcher/OrgSwitcher.d.ts +15 -1
  23. package/dist/_types/molecules/PrevNextNav/PrevNextNav.d.ts +17 -2
  24. package/dist/_types/molecules/Sheet/Sheet.d.ts +8 -7
  25. package/dist/_types/molecules/SidebarNav/SidebarNav.d.ts +18 -3
  26. package/dist/_types/molecules/SiteNav/SiteNav.d.ts +9 -0
  27. package/dist/_types/molecules/TableOfContents/TableOfContents.d.ts +11 -2
  28. package/dist/_types/molecules/UserMenu/UserMenu.d.ts +16 -1
  29. package/dist/_types/sections/AppHeader/AppHeader.d.ts +8 -2
  30. package/dist/_types/sections/AppRoot/AppRoot.d.ts +12 -1
  31. package/dist/_types/sections/AppShell/AppShell.d.ts +14 -1
  32. package/dist/_types/sections/FloatingDock/FloatingDock.d.ts +33 -3
  33. package/dist/_types/sections/Sidebar/Sidebar.d.ts +27 -3
  34. package/dist/_types/sections/SiteHeader/SiteHeader.d.ts +22 -3
  35. package/dist/_types/sections/SiteShell/SiteShell.d.ts +11 -5
  36. package/dist/_types/templates/OnboardingShell/OnboardingShell.d.ts +19 -2
  37. package/dist/_types/templates/PublicPageShell/PublicPageShell.d.ts +42 -6
  38. package/dist/app-header.js +1 -1
  39. package/dist/app-launcher.js +73 -63
  40. package/dist/app-root.js +10 -8
  41. package/dist/app-shell.js +51 -50
  42. package/dist/async-multi-select.js +65 -64
  43. package/dist/async-select.js +49 -48
  44. package/dist/breadcrumb.js +24 -21
  45. package/dist/command-palette.js +38 -36
  46. package/dist/consent.js +75 -73
  47. package/dist/floating-dock.js +42 -41
  48. package/dist/input-phone.js +38 -37
  49. package/dist/menu-button.js +16 -14
  50. package/dist/menu.js +44 -40
  51. package/dist/modal.js +32 -31
  52. package/dist/multi-select.js +106 -105
  53. package/dist/notification-button.js +18 -17
  54. package/dist/notification-panel.js +81 -80
  55. package/dist/onboarding-shell.js +36 -35
  56. package/dist/org-switcher.js +64 -59
  57. package/dist/popover.js +27 -22
  58. package/dist/prev-next-nav.js +38 -36
  59. package/dist/public-page-shell.js +24 -20
  60. package/dist/select.js +70 -69
  61. package/dist/sheet.js +30 -29
  62. package/dist/sidebar-nav.js +91 -90
  63. package/dist/sidebar.js +72 -71
  64. package/dist/site-header.js +44 -43
  65. package/dist/site-nav.js +27 -25
  66. package/dist/site-shell.js +23 -15
  67. package/dist/table-of-contents.js +30 -27
  68. package/dist/toaster.js +57 -53
  69. package/dist/tooltip.js +45 -41
  70. package/dist/user-menu.js +58 -52
  71. package/package.json +1 -1
@@ -1,5 +1,27 @@
1
1
  import { type ReactNode } from 'react';
2
2
  import './CommandPalette.css';
3
+ /**
4
+ * El cromo de la paleta, y **solo el cromo**: las cuatro cosas que la paleta
5
+ * dice por su cuenta, sin que se las pase nadie.
6
+ *
7
+ * Ninguna nombra un comando: la paleta se llama igual en todas las pantallas
8
+ * («Buscar un comando»), el buscador pide lo mismo, el vacío dice que no hay
9
+ * nada y la lista solo necesita un nombre para el lector. Lo que sí cambia
10
+ * —los grupos y sus ítems— viaja en `groups` y lo escribe la aplicación.
11
+ *
12
+ * El aspa **no está aquí**: es un reenvío puro al `Modal`, y sin `closeLabel`
13
+ * lee `modal.close` como cualquier otro diálogo.
14
+ */
15
+ export interface CommandPaletteMessages {
16
+ /** Título accesible y visible del diálogo. */
17
+ title: string;
18
+ /** Marcador del buscador. */
19
+ placeholder: string;
20
+ /** Texto del estado «sin resultados». */
21
+ empty: string;
22
+ /** Nombre accesible de la lista de resultados (`role="listbox"`). */
23
+ list: string;
24
+ }
3
25
  export interface CommandPaletteItem {
4
26
  /** Clave estable del ítem. */
5
27
  id: string;
@@ -24,17 +46,30 @@ export interface CommandPaletteProps {
24
46
  * filtrar no se renderizan — el call-site no necesita condicionarlos.
25
47
  */
26
48
  groups: CommandPaletteGroup[];
27
- /** Título accesible y visible del diálogo. */
28
- title: string;
29
- placeholder: string;
30
- /** Texto del estado "sin resultados". */
31
- emptyLabel: string;
32
49
  /**
33
- * Etiqueta accesible de la lista de resultados (`role="listbox"`). Sin ella
34
- * el listbox se queda sin nombre: pásala siempre en apps multiidioma.
50
+ * Título accesible y visible del diálogo. **Sin default**: sin él, sale de
51
+ * `commandPalette.title` del `BrandMessagesProvider`.
52
+ */
53
+ title?: string;
54
+ /**
55
+ * Marcador del buscador. **Sin default**: sin él, sale de
56
+ * `commandPalette.placeholder` del proveedor.
57
+ */
58
+ placeholder?: string;
59
+ /**
60
+ * Texto del estado «sin resultados». **Sin default**: sin él, sale de
61
+ * `commandPalette.empty` del proveedor.
62
+ */
63
+ emptyLabel?: string;
64
+ /**
65
+ * Nombre accesible de la lista de resultados (`role="listbox"`). **Sin
66
+ * default**: sin ella, sale de `commandPalette.list` del proveedor.
35
67
  */
36
68
  listLabel?: string;
37
- /** Etiqueta del botón de cierre del diálogo. */
69
+ /**
70
+ * Nombre accesible del aspa del diálogo. **Reenvío puro** al `Modal`: sin
71
+ * él, el aspa lee `modal.close` del proveedor.
72
+ */
38
73
  closeLabel?: string;
39
74
  /**
40
75
  * Tecla del atajo global (con ⌘ o Ctrl) que abre y cierra la paleta.
@@ -1,6 +1,43 @@
1
1
  import { type ReactNode } from 'react';
2
2
  import './Consent.css';
3
3
  import { Modal } from '../Modal/Modal';
4
+ /**
5
+ * El cromo del consentimiento, y **solo el cromo**: lo que la banda y el
6
+ * panel dicen por su cuenta y vale igual en cualquier sitio que los monte.
7
+ *
8
+ * La línea cae aquí en medio de una pieza legal, así que conviene decirla
9
+ * entera:
10
+ *
11
+ * - **Los botones son cromo.** «Aceptar todas», «Rechazar» y «Preferencias»
12
+ * nombran las tres salidas que la ePrivacy pide, y son las mismas en todos
13
+ * los sitios: no describen qué se guarda, describen qué hace el botón.
14
+ * - **El título y el nombre de la región son cromo.** «Cookies» nombra el
15
+ * mecanismo, no la política de nadie.
16
+ * - **`description` y `policyLabel` NO están aquí y son obligatorias.** El
17
+ * texto legal depende de la jurisdicción y de lo que cada producto guarde
18
+ * de verdad: un default de catálogo lo haría decir lo mismo en todas partes
19
+ * —que es exactamente lo que un texto legal no puede hacer— y, siendo
20
+ * opcional, nadie llegaría a escribir el bueno. Como el `confirmLabel` del
21
+ * `ConfirmDialog`.
22
+ * - **Las categorías tampoco.** Su nombre y su descripción son contenido: qué
23
+ * guarda cada una lo sabe el producto.
24
+ */
25
+ export interface ConsentMessages {
26
+ /** Título de la banda. */
27
+ title: string;
28
+ /** Nombre accesible de la región de la banda (`role="region"`). */
29
+ regionLabel: string;
30
+ /** Rótulo del botón que acepta todas las categorías. */
31
+ acceptAll: string;
32
+ /** Rótulo del botón que rechaza las opcionales. */
33
+ rejectAll: string;
34
+ /** Rótulo del botón que abre el panel de preferencias. */
35
+ preferences: string;
36
+ /** Título del panel de preferencias. */
37
+ preferencesTitle: string;
38
+ /** Marca, solo para lectores de pantalla, de una categoría necesaria. */
39
+ alwaysOn: string;
40
+ }
4
41
  /** Una categoría de tecnologías sobre la que se pide (o no) consentimiento. */
5
42
  export interface ConsentCategory {
6
43
  /** Identificador de la categoría. Es la clave dentro de `value`. */
@@ -18,7 +55,25 @@ export interface ConsentCategory {
18
55
  }
19
56
  /** La decisión: qué categorías están aceptadas, por `id`. */
20
57
  export type ConsentValue = Record<string, boolean>;
21
- export interface ConsentBannerProps extends Omit<React.ComponentPropsWithoutRef<'aside'>, 'title' | 'children' | 'onChange'> {
58
+ /**
59
+ * El enlace a la política: o no está, o está **entero**. El texto del enlace
60
+ * es contenido —lo escribe la app y depende de la jurisdicción—, así que no
61
+ * sale del catálogo, y una `policyHref` sin `policyLabel` dejaría un enlace
62
+ * sin nombre. El tipo lo impide en compilación.
63
+ */
64
+ export type ConsentPolicyProps = {
65
+ policyHref?: undefined;
66
+ policyLabel?: undefined;
67
+ policyExternal?: undefined;
68
+ } | {
69
+ /** URL de la política de cookies. */
70
+ policyHref: string;
71
+ /** Texto del enlace a la política. **Obligatorio con `policyHref`**: es contenido, no sale del catálogo. */
72
+ policyLabel: string;
73
+ /** Abre la política en otra pestaña (la política suele vivir en la web pública). */
74
+ policyExternal?: boolean;
75
+ };
76
+ export interface ConsentBannerBaseProps extends Omit<React.ComponentPropsWithoutRef<'aside'>, 'title' | 'children' | 'onChange'> {
22
77
  /**
23
78
  * Muestra la banda. Es la primera visita, o la decisión ha caducado: quién lo
24
79
  * sabe es el consumidor, que es también quien guarda la cookie. Default: `true`.
@@ -30,28 +85,41 @@ export interface ConsentBannerProps extends Omit<React.ComponentPropsWithoutRef<
30
85
  onRejectAll: () => void;
31
86
  /** Abre el panel de preferencias. Sin ella no se pinta el botón. */
32
87
  onOpenPreferences?: () => void;
33
- /** Título de la banda. Default castellano: `'Cookies'`. */
88
+ /**
89
+ * Título de la banda. **Sin default**: sin él, sale de `consent.title` del
90
+ * `BrandMessagesProvider`.
91
+ */
34
92
  title?: ReactNode;
35
- /** Texto de la banda. Default castellano. */
36
- description?: ReactNode;
37
- /** URL de la política de cookies. Sin ella no se pinta el enlace. */
38
- policyHref?: string;
39
- /** Texto del enlace a la política. Default castellano: `'Política de cookies'`. */
40
- policyLabel?: string;
41
- /** Abre la política en otra pestaña (la política suele vivir en la web pública). */
42
- policyExternal?: boolean;
43
- /** Etiqueta del botón de aceptar. Default castellano: `'Aceptar todas'`. */
93
+ /**
94
+ * Texto de la banda: qué se guarda y por qué. **Obligatorio y sin default**
95
+ * — es el texto legal, depende de la jurisdicción y de lo que el producto
96
+ * guarde de verdad, así que no sale del catálogo. Ver `ConsentMessages`.
97
+ */
98
+ description: ReactNode;
99
+ /**
100
+ * Etiqueta del botón de aceptar. **Sin default**: sin ella, sale de
101
+ * `consent.acceptAll` del proveedor.
102
+ */
44
103
  acceptAllLabel?: string;
45
- /** Etiqueta del botón de rechazar. Default castellano: `'Rechazar'`. */
104
+ /**
105
+ * Etiqueta del botón de rechazar. **Sin default**: sin ella, sale de
106
+ * `consent.rejectAll` del proveedor.
107
+ */
46
108
  rejectAllLabel?: string;
47
- /** Etiqueta del botón de preferencias. Default castellano: `'Preferencias'`. */
109
+ /**
110
+ * Etiqueta del botón de preferencias. **Sin default**: sin ella, sale de
111
+ * `consent.preferences` del proveedor. Solo se lee si hay
112
+ * `onOpenPreferences`: sin botón no se exige su texto.
113
+ */
48
114
  preferencesLabel?: string;
49
115
  /**
50
- * Nombre accesible de la región. Default: el propio `title` cuando es texto;
51
- * si el título lleva JSX, pásalo. Default castellano: `'Consentimiento de cookies'`.
116
+ * Nombre accesible de la región. **Sin default**: sin él, sale de
117
+ * `consent.regionLabel` del proveedor. Pásalo cuando el título lleve JSX y
118
+ * quieras que la región se nombre con otra cosa.
52
119
  */
53
120
  regionLabel?: string;
54
121
  }
122
+ export type ConsentBannerProps = ConsentBannerBaseProps & ConsentPolicyProps;
55
123
  /**
56
124
  * La banda de consentimiento: qué se quiere guardar y tres salidas —aceptar,
57
125
  * rechazar, decidir por categorías—. **No es un diálogo**: no atrapa el foco, no
@@ -91,17 +159,22 @@ export interface ConsentPreferencesProps {
91
159
  surface?: 'sheet' | 'modal';
92
160
  /** Borde por el que entra el panel (solo con `surface="sheet"`, la alternativa lateral que el sistema conserva para otros usos). Default: `'right'`. */
93
161
  side?: 'top' | 'right' | 'bottom' | 'left';
94
- /** Título del panel. Default castellano: `'Preferencias de cookies'`. */
162
+ /**
163
+ * Título del panel. **Sin default**: sin él, sale de
164
+ * `consent.preferencesTitle` del `BrandMessagesProvider`.
165
+ */
95
166
  title?: ReactNode;
96
167
  /**
97
168
  * Nombre accesible del botón de cerrar. **Reenvío puro** al `Modal` o al
98
169
  * `Sheet` sobre el que se abre el panel: sin él, el aspa lee `modal.close`
99
- * o `sheet.close` del `BrandMessagesProvider`. El resto de los textos de
100
- * `Consent` sigue con su default castellano — este componente todavía no
101
- * está migrado al proveedor.
170
+ * o `sheet.close` del `BrandMessagesProvider`. El espacio `consent` no
171
+ * repite la clave.
102
172
  */
103
173
  closeLabel?: string;
104
- /** Marca de una categoría necesaria. Default castellano: `'Siempre activa'`. */
174
+ /**
175
+ * Marca de una categoría necesaria, solo para lectores de pantalla. **Sin
176
+ * default**: sin ella, sale de `consent.alwaysOn` del proveedor.
177
+ */
105
178
  alwaysOnLabel?: string;
106
179
  /**
107
180
  * Nodo DOM donde montar el portal del panel, reenviado a `Modal`/`Sheet`.
@@ -29,6 +29,13 @@ export interface MenuProps {
29
29
  maxWidth?: string;
30
30
  /** Talla de los ítems, la del disparador (32/40/48): el panel desplegado casa con el control plegado, como en el Select. */
31
31
  size?: 'sm' | 'md' | 'lg';
32
+ /**
33
+ * Nodo DOM donde montar el portal. Por defecto, el nodo de la superficie que
34
+ * llegue por contexto —`SiteShell` publica el suyo, para que la capa herede
35
+ * la talla de la superficie pública— y, si no hay ninguna, `document.body`.
36
+ * Pásalo solo para llevar la capa a otro sitio: gana siempre.
37
+ */
38
+ container?: HTMLElement | null;
32
39
  className?: string;
33
40
  }
34
41
  /**
@@ -36,4 +43,4 @@ export interface MenuProps {
36
43
  * (tokens `menu.*`) de todos los menús; `ContextMenu`, `UserMenu`,
37
44
  * `OrgSwitcher` o `DropdownField` son este menú con un disparador concreto.
38
45
  */
39
- export declare function Menu({ trigger, items, value, onValueChange, renderLink, open, defaultOpen, onOpenChange, openOnHover, hoverDelay, side, align, sideOffset, minWidth, maxWidth, size, className, }: MenuProps): import("react/jsx-runtime").JSX.Element;
46
+ export declare function Menu({ trigger, items, value, onValueChange, renderLink, open, defaultOpen, onOpenChange, openOnHover, hoverDelay, side, align, sideOffset, minWidth, maxWidth, size, container, className, }: MenuProps): import("react/jsx-runtime").JSX.Element;
@@ -33,12 +33,14 @@ export interface ModalProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
33
33
  */
34
34
  fallbackTitle?: string;
35
35
  /**
36
- * Nodo DOM donde montar el portal del modal (reenviado a Base UI
37
- * `Portal.container`). Por defecto se monta en `document.body`, que
38
- * hereda el tema activado a nivel raíz (`html.dark`/`[data-theme="dark"]`)
39
- * sin configuración adicional. Solo hace falta pasarlo cuando el Modal
40
- * vive dentro de un `.surface-dark` **anidado** (no en la raíz), ya que
41
- * ese contexto no llega a `document.body` por la cascada.
36
+ * Nodo DOM donde montar el portal del modal (reenviado a Base UI `Portal.container`).
37
+ * Por defecto, el nodo de la superficie que llegue por contexto:
38
+ * `SiteShell` publica el suyo, de modo que la capa hereda la talla de la
39
+ * superficie pública en vez de abrirse a la de aplicación. Si no hay
40
+ * superficie, `document.body` — que ya hereda el tema activado en la raíz
41
+ * (`html.dark`/`[data-theme="dark"]`) sin configuración adicional. Pásalo
42
+ * solo para llevar la capa a otro sitio: un `.surface-dark` **anidado**, el
43
+ * cajón de un shell propio. Gana siempre.
42
44
  */
43
45
  container?: React.ComponentPropsWithoutRef<typeof Dialog.Portal>['container'];
44
46
  /**
@@ -1,19 +1,32 @@
1
1
  import { type ButtonBaseProps } from '../../atoms/Button/Button';
2
2
  import './NotificationButton.css';
3
+ /**
4
+ * El cromo de la campana, y **solo el cromo**: cómo se llama el botón, con
5
+ * contador y sin él. La campana no dice nada más —el número lo pinta el
6
+ * `NumberBadge` y las notificaciones viven en otro sitio—, así que los dos
7
+ * textos son todo lo que emite por su cuenta, y ninguno cambia de pantalla a
8
+ * pantalla.
9
+ */
10
+ export interface NotificationButtonMessages {
11
+ /** Nombre accesible cuando no hay contador. */
12
+ label: string;
13
+ /** Nombre accesible cuando hay contador. Recibe el número. */
14
+ countLabel: (count: number) => string;
15
+ }
3
16
  export interface NotificationButtonProps extends Omit<ButtonBaseProps, 'variant' | 'iconOnly' | 'children' | 'href' | 'size'> {
4
17
  /** Notificaciones sin leer. Con 0 (o sin él) no hay contador. */
5
18
  count?: number;
6
19
  /** Tope del contador («99+»). */
7
20
  max?: number;
8
21
  /**
9
- * Nombre accesible cuando no hay contador. Default: «Notificaciones»
10
- * (castellano). Una app multiidioma debe pasarla traducida.
22
+ * Nombre accesible cuando no hay contador. **Sin default**: sin ella, sale
23
+ * de `notificationButton.label` del `BrandMessagesProvider`.
11
24
  */
12
25
  label?: string;
13
26
  /**
14
27
  * Nombre accesible cuando hay contador: recibe el número, para que la frase
15
- * se pueda rehacer en cualquier idioma. Default: «Notificaciones: N sin
16
- * leer» (castellano).
28
+ * se pueda rehacer en cualquier idioma. **Sin default**: sin ella, sale de
29
+ * `notificationButton.countLabel` del proveedor.
17
30
  */
18
31
  countLabel?: (count: number) => string;
19
32
  }
@@ -1,6 +1,30 @@
1
1
  import { type ReactNode } from 'react';
2
2
  import { type PopoverChangeDetails } from '../../atoms/Popover/Popover';
3
3
  import './NotificationPanel.css';
4
+ /**
5
+ * El cromo del panel, y **solo el cromo**: cómo se llama el panel, la marca de
6
+ * una fila sin leer, el vacío, los dos destinos del pie y la acción sobre el
7
+ * conjunto. Ninguno nombra una notificación: eso viaja en `items` y lo escribe
8
+ * el producto —título, cuerpo y la hora, ya formateada por el consumidor—.
9
+ *
10
+ * Los textos de la campana **no están aquí**: `label` y `countLabel` son un
11
+ * reenvío puro al `NotificationButton`, que tiene su propio espacio. El panel
12
+ * no repite la clave.
13
+ */
14
+ export interface NotificationPanelMessages {
15
+ /** Nombre del panel (`role="dialog"`) y de la lista. No se pinta. */
16
+ panel: string;
17
+ /** Texto, solo para lectores de pantalla, que marca una fila sin leer. */
18
+ unread: string;
19
+ /** Mensaje cuando no hay notificaciones. */
20
+ empty: string;
21
+ /** Rótulo del enlace a la bandeja. */
22
+ all: string;
23
+ /** Rótulo del enlace a las preferencias. */
24
+ preferences: string;
25
+ /** Rótulo del botón de marcar todas como leídas. */
26
+ markAllRead: string;
27
+ }
4
28
  /** Una notificación tal y como la enseña el panel: ya resuelta, sin datos crudos. */
5
29
  export interface NotificationPanelItem {
6
30
  id: string;
@@ -56,24 +80,46 @@ export interface NotificationPanelProps {
56
80
  * `<a>` corriente.
57
81
  */
58
82
  renderLink?: RenderNotificationPanelLink;
59
- /** Nombre accesible de la campana sin contador. Default castellano. */
83
+ /**
84
+ * Nombre accesible de la campana sin contador. **Reenvío puro** al
85
+ * `NotificationButton`: sin ella, sale de `notificationButton.label`.
86
+ */
60
87
  label?: string;
61
- /** Nombre accesible de la campana con contador. Recibe el número. Default castellano. */
88
+ /**
89
+ * Nombre accesible de la campana con contador. **Reenvío puro** al
90
+ * `NotificationButton`: sin ella, sale de `notificationButton.countLabel`.
91
+ */
62
92
  countLabel?: (count: number) => string;
63
93
  /**
64
94
  * Nombre del panel (`role="dialog"`) y de la lista. **No se pinta**: el
65
- * panel no lleva cabecera visible. Default «Notificaciones».
95
+ * panel no lleva cabecera visible. **Sin default**: sin él, sale de
96
+ * `notificationPanel.panel` del `BrandMessagesProvider`.
66
97
  */
67
98
  panelLabel?: string;
68
- /** Texto solo para lectores de pantalla que marca una fila sin leer. Default «Sin leer». */
99
+ /**
100
+ * Texto solo para lectores de pantalla que marca una fila sin leer. **Sin
101
+ * default**: sin él, sale de `notificationPanel.unread`.
102
+ */
69
103
  unreadLabel?: string;
70
- /** Mensaje cuando no hay notificaciones. Default «Estás al día». */
104
+ /**
105
+ * Mensaje cuando no hay notificaciones. **Sin default**: sin él, sale de
106
+ * `notificationPanel.empty`.
107
+ */
71
108
  emptyLabel?: string;
72
- /** Rótulo del enlace a la bandeja. Default «Ver todas las notificaciones». */
109
+ /**
110
+ * Rótulo del enlace a la bandeja. **Sin default**: sin él, sale de
111
+ * `notificationPanel.all`.
112
+ */
73
113
  allLabel?: string;
74
- /** Rótulo del enlace a las preferencias. Default «Preferencias de notificaciones». */
114
+ /**
115
+ * Rótulo del enlace a las preferencias. **Sin default**: sin él, sale de
116
+ * `notificationPanel.preferences`.
117
+ */
75
118
  preferencesLabel?: string;
76
- /** Rótulo del botón de marcar todas. Default «Marcar todas como leídas». */
119
+ /**
120
+ * Rótulo del botón de marcar todas. **Sin default**: sin él, sale de
121
+ * `notificationPanel.markAllRead`. Solo se lee cuando el botón se pinta.
122
+ */
77
123
  markAllReadLabel?: string;
78
124
  open?: boolean;
79
125
  defaultOpen?: boolean;
@@ -6,8 +6,22 @@ export interface OrgOption {
6
6
  name: string;
7
7
  logoUrl?: string;
8
8
  }
9
+ /**
10
+ * El único texto que el conmutador dice por su cuenta, y es **cromo**: cómo se
11
+ * nombra su botón. Interpola la organización activa, así que es una función.
12
+ * Los nombres de las organizaciones son **contenido** y vienen en
13
+ * `organizations`.
14
+ */
15
+ export interface OrgSwitcherMessages {
16
+ /** Nombre accesible del botón, a partir del nombre de la organización. */
17
+ trigger: (name: string) => string;
18
+ }
9
19
  export interface OrgSwitcherProps {
10
- /** Nombre accesible del botón. Por defecto, «Organización: ‹nombre›». */
20
+ /**
21
+ * Nombre accesible del botón. **Sin default**: sin él, sale de
22
+ * `orgSwitcher.trigger` del `BrandMessagesProvider`, que recibe el nombre de
23
+ * la organización activa.
24
+ */
11
25
  label?: string;
12
26
  /** Ocupa todo el ancho disponible (en la Sidebar). Por defecto mide lo que su contenido. */
13
27
  block?: boolean;
@@ -16,10 +16,14 @@ export interface PrevNextNavProps {
16
16
  /**
17
17
  * Rótulo del control anterior. Sin `prevTitle` es el `aria-label` del
18
18
  * chevron; con `prevTitle` es el rótulo **visible** que lo encabeza.
19
- * Default: "Anterior"
19
+ * **Sin default**: sin él, sale de `prevNextNav.previous` del
20
+ * `BrandMessagesProvider`.
20
21
  */
21
22
  prevLabel?: string;
22
- /** Rótulo del control siguiente. Mismo contrato que `prevLabel`. Default: "Siguiente" */
23
+ /**
24
+ * Rótulo del control siguiente. Mismo contrato que `prevLabel`. **Sin
25
+ * default**: sale de `prevNextNav.next`.
26
+ */
23
27
  nextLabel?: string;
24
28
  /**
25
29
  * Título visible del destino anterior (el de la página, el capítulo…). Con
@@ -47,4 +51,15 @@ export interface PrevNextNavProps {
47
51
  /** Variante de densidad. Default: "md" */
48
52
  size?: 'sm' | 'md';
49
53
  }
54
+ /**
55
+ * Los dos textos del par, y los dos son **cromo**: «anterior» y «siguiente»
56
+ * dicen la dirección, no el destino. El destino —`prevTitle`, `nextTitle`, el
57
+ * rótulo del medio— es **contenido** y lo escribe la página.
58
+ */
59
+ export interface PrevNextNavMessages {
60
+ /** Rótulo del control anterior. */
61
+ previous: string;
62
+ /** Rótulo del control siguiente. */
63
+ next: string;
64
+ }
50
65
  export declare function PrevNextNav({ prevHref, nextHref, prevOnClick, nextOnClick, prevLabel, nextLabel, prevTitle, nextTitle, label, labelId, linkComponent, size, }: PrevNextNavProps): import("react/jsx-runtime").JSX.Element;
@@ -39,13 +39,14 @@ export interface SheetProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
39
39
  /** Elemento que abre el panel. Sin él, la apertura la controla el consumidor. */
40
40
  trigger?: ReactNode;
41
41
  /**
42
- * Nodo DOM donde montar el portal del panel (reenviado a Base UI
43
- * `Portal.container`). Por defecto se monta en `document.body`, que
44
- * hereda el tema activado a nivel raíz (`html.dark`/`[data-theme="dark"]`)
45
- * sin configuración adicional. Solo hace falta pasarlo cuando el Sheet
46
- * vive dentro de una superficie **anidada** (un `.surface-dark` que no está
47
- * en la raíz, o dentro de `SiteShell`/`.site-shell`), ya que ese contexto
48
- * no llega a `document.body` por la cascada.
42
+ * Nodo DOM donde montar el portal del panel (reenviado a Base UI `Portal.container`).
43
+ * Por defecto, el nodo de la superficie que llegue por contexto:
44
+ * `SiteShell` publica el suyo, de modo que la capa hereda la talla de la
45
+ * superficie pública en vez de abrirse a la de aplicación. Si no hay
46
+ * superficie, `document.body` — que ya hereda el tema activado en la raíz
47
+ * (`html.dark`/`[data-theme="dark"]`) sin configuración adicional. Pásalo
48
+ * solo para llevar la capa a otro sitio: un `.surface-dark` **anidado**, el
49
+ * cajón de un shell propio. Gana siempre.
49
50
  */
50
51
  container?: React.ComponentPropsWithoutRef<typeof Dialog.Portal>['container'];
51
52
  /**
@@ -41,11 +41,14 @@ export type SidebarNavRenderLinkProps = React.AnchorHTMLAttributes<HTMLAnchorEle
41
41
  'aria-current'?: 'page';
42
42
  };
43
43
  export interface SidebarNavProps {
44
- /** Nombre accesible del `nav`. */
44
+ /**
45
+ * Nombre accesible del `nav`. **Sin default**: sin él, sale de
46
+ * `sidebarNav.label` del `BrandMessagesProvider`.
47
+ */
45
48
  label?: string;
46
49
  /**
47
- * Marca de las entradas vacías (`empty`). Por defecto, en castellano:
48
- * «sin docs».
50
+ * Marca de las entradas vacías (`empty`). **Sin default**: sale de
51
+ * `sidebarNav.empty`. Solo se lee cuando hay alguna entrada vacía.
49
52
  */
50
53
  emptyLabel?: string;
51
54
  /** Solo iconos: los enlaces con tooltip, los grupos como menú. Sin él, lo decide la `Sidebar` (rail). */
@@ -56,4 +59,16 @@ export interface SidebarNavProps {
56
59
  onValueChange?: (value: string[]) => void;
57
60
  renderLink?: (props: SidebarNavRenderLinkProps) => ReactNode;
58
61
  }
62
+ /**
63
+ * Los dos textos de la navegación, los dos **cromo**: el nombre de la región
64
+ * («Principal», el mismo en toda la suite) y la marca que se pone a una entrada
65
+ * sin contenido. Los rótulos de las entradas son **contenido** y siguen
66
+ * viniendo en `entries`.
67
+ */
68
+ export interface SidebarNavMessages {
69
+ /** Nombre accesible del `nav`. */
70
+ label: string;
71
+ /** Marca de las entradas sin contenido. */
72
+ empty: string;
73
+ }
59
74
  export declare function SidebarNav({ label, emptyLabel, rail, entries, defaultValue, value, onValueChange, renderLink, }: SidebarNavProps): import("react/jsx-runtime").JSX.Element;
@@ -49,4 +49,13 @@ export interface SiteNavProps {
49
49
  * `style-src 'self'` descarta el atributo sin avisar y el grupo de más caía
50
50
  * a la segunda fila.
51
51
  */
52
+ /**
53
+ * El único texto que el índice dice por su cuenta, y es **cromo**: el nombre de
54
+ * la región de navegación. Los grupos y sus enlaces son **contenido** y vienen
55
+ * en `groups`.
56
+ */
57
+ export interface SiteNavMessages {
58
+ /** Nombre accesible del `nav`. */
59
+ label: string;
60
+ }
52
61
  export declare function SiteNav({ groups, label, renderLink, className, }: SiteNavProps): import("react/jsx-runtime").JSX.Element;
@@ -17,8 +17,8 @@ export interface TableOfContentsProps extends Omit<React.ComponentPropsWithoutRe
17
17
  */
18
18
  activeId?: string;
19
19
  /**
20
- * Nombre accesible del `nav`. Por defecto, en castellano.
21
- * @default 'En esta página'
20
+ * Nombre accesible del `nav`. **Sin default**: sin él, sale de
21
+ * `tableOfContents.label` del `BrandMessagesProvider`.
22
22
  */
23
23
  ariaLabel?: string;
24
24
  /** Rótulo visible sobre la lista. Sin él, no se pinta ninguno. */
@@ -46,4 +46,13 @@ export interface TableOfContentsProps extends Omit<React.ComponentPropsWithoutRe
46
46
  * `{...rest}` (`id`, `data-*`, `role`…) se reenvía al `<nav>`. El nombre
47
47
  * accesible sigue siendo `ariaLabel`.
48
48
  */
49
+ /**
50
+ * El único texto que el índice dice por su cuenta, y es **cromo**: «En esta
51
+ * página» nombra la región, no la página. El rótulo visible (`title`) y los
52
+ * encabezados (`items`) son **contenido**.
53
+ */
54
+ export interface TableOfContentsMessages {
55
+ /** Nombre accesible del `nav`. */
56
+ label: string;
57
+ }
49
58
  export declare const TableOfContents: import("react").ForwardRefExoticComponent<TableOfContentsProps & import("react").RefAttributes<HTMLElement>>;
@@ -1,11 +1,26 @@
1
1
  import type { ReactNode } from 'react';
2
2
  import type { MenuItem, MenuRenderLinkProps } from '../Menu/Menu';
3
3
  import './UserMenu.css';
4
+ /**
5
+ * Lo que el menú de cuenta dice por su cuenta, y es **cromo**: cómo se nombra
6
+ * su botón y cómo se cuentan las notificaciones sin leer. Los dos interpolan un
7
+ * dato —el nombre, el número—, así que son funciones. El nombre, el correo y
8
+ * los ítems son **contenido** y siguen viniendo por props.
9
+ */
10
+ export interface UserMenuMessages {
11
+ /** Nombre accesible del botón, a partir del nombre del usuario. */
12
+ trigger: (name: string) => string;
13
+ /** Nombre accesible del contador de notificaciones sin leer. */
14
+ unread: (count: number) => string;
15
+ }
4
16
  export interface UserMenuProps {
5
17
  name: string;
6
18
  email: string;
7
19
  avatarUrl?: string;
8
- /** Nombre accesible del botón. Por defecto, «Cuenta de ‹nombre›». */
20
+ /**
21
+ * Nombre accesible del botón. **Sin default**: sin él, sale de
22
+ * `userMenu.trigger` del `BrandMessagesProvider`, que recibe el nombre.
23
+ */
9
24
  label?: string;
10
25
  /** Sin nombre — avatar, badge y chevron: para la barra del AppHeader. El nombre sigue en el panel y en el nombre accesible. */
11
26
  compact?: boolean;
@@ -7,9 +7,15 @@ export interface AppHeaderProps {
7
7
  notifications?: ReactNode;
8
8
  /** Al final, siempre: el `UserMenu` (compacto). */
9
9
  end?: ReactNode;
10
- /** Texto accesible del botón de menú. */
10
+ /**
11
+ * Texto accesible del botón de menú. **Reenvío puro** al `MenuButton`: sin
12
+ * él, el botón lee `menuButton.open` del `BrandMessagesProvider`.
13
+ */
11
14
  menuLabel?: string;
12
- /** Texto accesible del botón cuando la sidebar está abierta («Cerrar menú»). */
15
+ /**
16
+ * Texto accesible del botón con la sidebar abierta. **Reenvío puro** al
17
+ * `MenuButton`: sin él, lee `menuButton.close`.
18
+ */
13
19
  menuCloseLabel?: string;
14
20
  /** id de la sidebar que gobierna el botón (`aria-controls`). */
15
21
  sidebarId?: string;
@@ -1,6 +1,17 @@
1
1
  import type { ReactNode } from 'react';
2
- export interface AppRootProps {
2
+ /**
3
+ * El único texto de la raíz, y es **cromo**: el enlace de salto al contenido
4
+ * dice lo mismo en todo el documento y en todos los productos.
5
+ */
6
+ export interface AppRootMessages {
3
7
  /** Texto del enlace de salto al contenido. */
8
+ skipToContent: string;
9
+ }
10
+ export interface AppRootProps {
11
+ /**
12
+ * Texto del enlace de salto al contenido. **Sin default**: sin él, sale de
13
+ * `appRoot.skipToContent` del `BrandMessagesProvider`.
14
+ */
4
15
  skipLabel?: string;
5
16
  /** Destino del salto: el `id` del contenido principal de la página. */
6
17
  skipHref?: string;
@@ -17,9 +17,22 @@ export interface AppShellProps {
17
17
  /** Ancho inicial de la sidebar desplegada (px). Sin él, el token `sidebar.width`. */
18
18
  defaultSidebarWidth?: number;
19
19
  onSidebarWidthChange?: (width: number) => void;
20
- /** Texto del enlace de salto al contenido (`SkipLink`). Default: castellano. */
20
+ /**
21
+ * Texto del enlace de salto al contenido (`SkipLink`). **Sin default**: sin
22
+ * él, sale de `appShell.skipToContent` del `BrandMessagesProvider`.
23
+ */
21
24
  skipLabel?: string;
22
25
  }
26
+ /**
27
+ * El único texto que el armazón dice por su cuenta, y es **cromo**: el enlace
28
+ * de salto al contenido dice lo mismo en todas las pantallas de todas las
29
+ * aplicaciones. Lo que hay dentro del armazón —la barra, la navegación, la
30
+ * página— lo escribe el producto.
31
+ */
32
+ export interface AppShellMessages {
33
+ /** Texto del enlace de salto al contenido. */
34
+ skipToContent: string;
35
+ }
23
36
  /**
24
37
  * El armazón de una aplicación: barra superior, barra lateral y contenido.
25
38
  * Lleva el estado de la sidebar (abierta, rail o cerrada; su ancho) y lo