@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/docs/sui-notification/README.md

@@ -0,0 +1,284 @@
+---
+name: sui-notification
+selector: sui-notification
+resumen: Fila de la bandeja de notificaciones, con quién, qué pasó, hace cuánto y si ya se leyó
+alternativas: [sui-toast (aviso efímero, incluido el «notification» de esquina de la guía), sui-alert (aviso que se queda en su contexto), sui-banner (toda la app)]
+---
+
+# sui-notification
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-notification`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+>
+> **La API de aquí no es igual a la de Angular.** Lo que el texto nombre y figure en «Diferencias con
+> el SUI Angular» (dentro de API) aquí no existe.
+
+Story: [Molecules/Feedback/Notification](https://sui-design-system.web.app/?path=/docs/molecules-feedback-notification--docs)
+
+## Primero: dos cosas distintas con el mismo nombre
+
+- **En la guía del DS**, una «notification» es un aviso **temporal en una esquina** con título,
+  descripción y una acción (un pago, una actualización). En SUI ese caso **es un `sui-toast`** con
+  `description` y `action`.
+- **En SUI**, `sui-notification` es la **fila de la bandeja**: el panel de la campana del Figma del
+  DS (foto, título, descripción, hora, punto de no leída). Este README es sobre eso.
+
+El componente además arrastra un tercer uso: un aviso con tipo y relleno (`variant`, `variantStyle`)
+igual al de `sui-alert`. Ese uso no va: para eso está el alert.
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para cada aviso de una **bandeja** que la persona revisa cuando quiere: «Tu pedido llegó»,
+«Nuevo pedido de Pollería El Dorado», «Recarga aprobada». Lleva **la hora**, se marca como leído y
+se puede volver a abrir.
+
+**No lo uses** para:
+
+- Avisar algo en el momento: `sui-toast` (aunque tenga título, descripción y acción).
+- Un aviso dentro de una pantalla: `sui-alert`.
+- Una lista de actividad sin leído/no leído (el historial de un pedido): `sui-activity-feed`.
+
+Regla corta (canon, la misma del alert): **contexto → alert · toda la app → banner · efímero →
+toast · bandeja → notification.**
+
+## Qué variante usar
+
+> La guía del DS no tiene esta fila (su «notification» es otra cosa, ver arriba). Lo de abajo sale
+> del Figma del DS y del componente («según el componente»), de lo ya aprobado («canon») o es
+> **propuesta**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. La bandeja de la app
+> (`pages/notifications/notifications.html:98`, la misma pantalla en las rutas de los 4 roles) dibuja
+> sus filas a mano.
+
+### Qué lleva cada fila
+
+| prop | valor | cuándo | fuente |
+|---|---|---|---|
+| `avatar` | `src` con la foto | **Siempre**: la cara o el logo de quien generó el aviso (el local del pedido, el repartidor que lo lleva). Una foto se reconoce antes que un texto. | propuesta |
+| `avatar` | `{ initials }` | Solo si no hay foto. Ojo: sale en un círculo negro, **no** con el color por rol (ver Trampas). | según el componente |
+| `avatar` | el isotipo de la app | Avisos **del sistema** sin una persona detrás («Tu plan vence en 3 días»): así toda la bandeja queda en filas iguales. | propuesta |
+| `title` | frase corta | Qué pasó: «Tu pedido llegó». Sentence case, sin punto final. | canon (copy de la app) |
+| `description` | una o dos frases | El detalle que decide si abrirla: «Pollería El Dorado · S/ 42.50». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `timestamp` | texto ya formateado | **Siempre**: la hora es lo que hace bandeja a la bandeja. «Hace 5 min», «Ayer 18:40». | canon (bandeja con hora) · formato relativo: canon (CANON-SUI §5.5, «hace 4 min», nunca «4 min atrás») · «Ayer 18:40»: propuesta |
+| `unread` | `true` | Hasta que la persona la abre. El punto es naranja (el primario de la app). | según el componente |
+| `showMore` | `true` | No usar hoy: el botón ⋮ solo aparece con el mouse encima. **Cuándo sí:** en web, acciones por fila (marcar como leída, archivar). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `active` | `true` | No usar hoy: pinta la fila como si tuviera el mouse encima. **Cuándo sí:** navegar la bandeja con las flechas del teclado (ver `sui-notification-footer`). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `dismissible` | `true` | No usar hoy: los avisos de la bandeja se leen, no se cierran. **Cuándo sí:** una bandeja donde se borran avisos uno por uno. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+
+### `type` — el cuerpo de la fila
+
+| type | cuándo | fuente |
+|---|---|---|
+| `basic` (default) | Todas las de hoy: título, descripción y hora. | según el componente |
+| `button` | No usar hoy. **Cuándo sí:** una solicitud que se resuelve desde la misma bandeja, con «Rechazar» / «Aprobar» en `slot="actions"` (por ejemplo, una invitación a un equipo). Secundario a la izquierda, primario a la derecha. | canon (aprobado por el dueño, 05-10-2026, bloque B2) · orden: canon |
+| `message` | No usar hoy. **Cuándo sí:** el aviso trae lo que escribió otra persona (la nota del cliente, un mensaje del repartidor), en la burbuja. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `file` | No usar hoy: la app no manda adjuntos. **Cuándo sí:** un comprobante o una boleta adjunta. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+
+### `variant` y `variantStyle` — el modelo de alert
+
+| prop | valor | cuándo | fuente |
+|---|---|---|---|
+| `variant` | `default` (default) | **Siempre** en la bandeja: el tipo lo dice la foto y el texto, no un color. | propuesta |
+| `variant` | `info` · `success` · `warning` · `error` · `feature` | No usar: con tipo y sin foto, la fila se vuelve un alert con borde y sombra. **Cuándo sí:** ninguno; ese aviso es un `sui-alert`. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `variantStyle` | `stroke` (default) | Siempre. Con foto, la fila es plana: sin borde ni sombra. | según el componente |
+| `variantStyle` | `filled` · `light` · `lighter` | No usar: pintan la fila de color, que es lo que hace el alert. **Cuándo sí:** ninguno. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `showIcon` | `true` (default) | No cambia nada con foto; el ícono de tipo solo sale en el modelo de alert. | según el componente |
+
+### Slots
+
+| slot | cuándo | fuente |
+|---|---|---|
+| `slot="company-logo"` | Logo de 16 px antes de la descripción: el local, cuando la foto es la del repartidor. | propuesta |
+| `slot="actions"` | Los dos botones de `type="button"`. | según el componente |
+| `slot="message"` · `slot="file"` | El cuerpo de `type="message"` y `type="file"`. | según el componente |
+
+### Usos de hoy que romperían la regla
+
+- **La bandeja dibuja sus filas a mano — 1 pantalla, 4 rutas:** `pages/notifications/notifications.html:98`
+  (ícono de color por tipo, fila teñida si no se leyó, punto a la derecha). **A discutir**: no es un
+  cambio 1:1. Con el componente, el tipo se ve en la foto y no en un ícono de color, y la no leída
+  lleva solo el punto, sin teñir la fila.
+
+## Tamaño en mobile y en web
+
+La fila **no tiene `size`**: foto de 40 px, 12 px de relleno, texto de 14.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| la fila | toda la fila se toca para abrirla: mide 64 px o más | igual | según el componente |
+| ⋮ (`showMore`) | se ve de 24 y se toca en 44 × 44 cuando está visible (foco o fila activa); oculto no recibe toques | 24 px | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| la X (`dismissible`) | se ve de 20 px; **se toca en 44 × 44** | se ve de 20; se toca en 40 × 40 | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (antes 40, pedido del dueño 03-10-2026): área táctil invisible, extensión SUI |
+| botones de `type="button"` | los pone quien la usa: `size={bp.sizeControl()}` (`large`, también en la tablet táctil) | `medium` | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44) · web `medium` y tablet táctil `large`: D16, dueño 05-10-2026 (reemplaza el `xsmall` del bloque B1 y el `bp.isMobile()`, que dejaba la tablet en `medium`) |
+
+### Por dispositivo (D16)
+
+Fila `notification` (botones) de la tabla D16 (dueño, 05-10-2026). La fila no tiene `size`: lo que
+cambia por dispositivo son los `sui-button` de `slot="actions"` (`type="button"`), que se tocan.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (48) | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino) |
+| celular (380–767 px) | `large` (48) | la X y el ⋮ se tocan en 44 × 44 |
+| tablet táctil (`pointer: coarse`) | `large` (48) | la X queda en 40 × 40 y el ⋮ en 24: su área de 44 se prende solo con `max-width: 767px`. **Pendiente**: el mixin `sui-tactil` (`pointer: coarse`) espera el sí del dueño |
+| computadora (`pointer: fine`) | `medium` (40) | `small`, `xsmall` y `2xsmall` no se usan |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`.
+
+En master-pedidos: `size={bp.sizeControl()}` en los `sui-button` de `slot="actions"`.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| el modelo de alert (`variant` ≠ `default`, rellenos de color) | duplica a `sui-alert` | ninguno: es un alert |
+| `type="button"` | nada se resuelve desde la bandeja | aceptar o rechazar una solicitud (una invitación a un equipo) desde la bandeja |
+| `type="message"` | los avisos no traen texto de otra persona | la nota del cliente o un mensaje del repartidor |
+| `type="file"` | no hay adjuntos | un comprobante o una boleta |
+| `showMore` | solo se ve con mouse | acciones por fila en web |
+| `active` | no se navega con teclado | bandeja con flechas del teclado |
+| `dismissible` | se leen, no se cierran | una bandeja donde se borra aviso por aviso |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `active` | `active` | `boolean` | `false` |
+| `avatar` | `avatar` | `SuiNotificationAvatar \| null \| string` | `null` |
+| `closeLabel` | `close-label` | `string` | `'Cerrar'` |
+| `description` | `description` | `null \| string` | `null` |
+| `dismissible` | `dismissible` | `boolean` | `false` |
+| `heading` | `heading` | `null \| string` | `null` |
+| `moreLabel` | `more-label` | `string` | `'Más opciones'` |
+| `showIcon` | `show-icon` | `boolean` | `true` |
+| `showMore` | `show-more` | `boolean` | `false` |
+| `timestamp` | `timestamp` | `null \| string` | `null` |
+| `type` | `type` | `"basic" \| "button" \| "file" \| "message"` | `'basic'` |
+| `unread` | `unread` | `boolean` | `false` |
+| `unreadLabel` | `unread-label` | `string` | `'No leído'` |
+| `variant` | `variant` | `"default" \| "error" \| "feature" \| "info" \| "success" \| "warning"` | `'default'` |
+| `variantStyle` | `variant-style` | `"filled" \| "light" \| "lighter" \| "stroke"` | `'stroke'` |
+
+| evento | `event.detail` |
+|---|---|
+| `dismissed` | `void` |
+| `moreClicked` | `MouseEvent` |
+
+Slots: `company-logo`, `file`, `message`, `(por defecto)`, `actions`.
+
+### Diferencias con el SUI Angular
+
+- **Props de Angular que aquí no existen:** `title`
+- **Props solo de aquí:** `closeLabel`, `heading`, `moreLabel`, `unreadLabel`
+<!-- api:fin -->
+
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `notificacion.noLeido` | No leído | — |
+| `comun.masOpciones` | Más opciones | — |
+| `comun.cerrar` | Cerrar | — |
+<!-- textos:fin -->
+
+Slots: `[slot=company-logo]`, `[slot=file]`, `[slot=message]`, el contenido libre, `[slot=actions]`.
+
+## Trampas
+
+- **La X se toca en 44 × 44 en el teléfono** (40 × 40 en web) aunque se vea de 20 (un `::before`
+  invisible sobre su `<button>`; 44 desde el 04-10-2026): en una fila que se toca entera, el toque a
+  12 px de la X la cierra en vez de abrirla. La X y el ⋮ comparten la esquina: no se usan juntos.
+- **Es el avatar el que decide el modelo**: con `avatar` es una fila plana (`role="article"`); sin
+  `avatar` es un alert con borde y sombra (`role="status"`, que el lector de pantalla anuncia).
+- **El avatar no es `sui-avatar`**: lo dibuja la fila, en un círculo **negro** con iniciales.
+  Ignora `color`, así que no respeta el color por rol de la app (local naranja, repartidor verde,
+  cliente azul). Con foto no se nota; sin foto, sí.
+- **La hora cambia de lugar**: sin avatar va a la derecha del título; con avatar, delante de la
+  descripción («Hace 5 min ∙ …»).
+- `timestamp` es texto: el formato («Hace 5 min») lo arma quien la usa.
+- `feature` usa `sparkling-fill` aquí y en el alert, y `magic-fill` en el banner.
+- `dismissible` solo emite `dismissed`: la fila **no se esconde sola** (a diferencia de alert y
+  banner). La saca quien la usa.
+- El ⋮ de `showMore` se ve solo con el mouse encima, con `active` o cuando le llega el foco de
+  teclado: en mobile no aparece. **Mientras está oculto no recibe toques** (desde el 04-10-2026;
+  antes un toque en la esquina disparaba `moreClicked` sin que se viera nada).
+- **`showMore` y `dismissible` juntos se pisan**: el ⋮ y la X van los dos arriba a la derecha.
+- Con avatar (o con `type` distinto de `basic`) y **sin `description`**, queda un «∙» colgando
+  después de la hora («Hace 8 min ∙»).
+- Borra el `title` nativo del host.
+
+## Bien y mal
+
+Botones de una solicitud (`type="button"`)
+
+```html
+<!-- ❌ mal: xsmall (32) no llega al dedo y D16 no usa chicos (vitrina: pages/super-admin/master-preview/_guia-moleculas/avisos.ts:242) -->
+<sui-notification avatar={{ initials: 'MR' }} type="button" title="Miguel Rojas te invitó a su equipo">
+  <span slot="actions">
+    <sui-button variant="stroke" color="neutral" size="xsmall">Rechazar</sui-button>
+    <sui-button size="xsmall">Aprobar</sui-button>
+  </span>
+</sui-notification>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-notification avatar={{ initials: 'MR' }} type="button" title="Miguel Rojas te invitó a su equipo">
+  <span slot="actions">
+    <sui-button variant="stroke" color="neutral" size={bp.sizeControl()}>Rechazar</sui-button>
+    <sui-button size={bp.sizeControl()}>Aprobar</sui-button>
+  </span>
+</sui-notification>
+```
+
+Aviso del sistema en la bandeja
+
+```html
+<!-- ❌ mal: con tipo y sin foto la fila se vuelve un alert con borde y sombra (vitrina: avisos.ts:253) -->
+<sui-notification variant="success" title="Recarga aprobada"
+  description="Ya tienes S/ 20.00 en tu saldo" timestamp="Hace 1 h" />
+```
+
+```html
+<!-- ✅ bien: el isotipo de la app como foto, sin variant -->
+<sui-notification avatar={isotipo} title="Recarga aprobada"
+  description="Ya tienes S/ 20.00 en tu saldo" timestamp="Hace 1 h" />
+```
+
+Acciones de la fila
+
+```html
+<!-- ❌ mal: el ⋮ y la X van los dos arriba a la derecha y se pisan -->
+<sui-notification avatar={n.foto} title="Nuevo pedido" timestamp="Hace 5 min"
+  description="Pollería El Dorado · S/ 42.50"
+  show-more dismissible />
+```
+
+```html
+<!-- ✅ bien: uno solo (aquí, la X; el ⋮ es solo para web con mouse) -->
+<sui-notification avatar={n.foto} title="Nuevo pedido" timestamp="Hace 5 min"
+  description="Pollería El Dorado · S/ 42.50"
+  dismissible onDismissed={() => quitar(n)} />
+```
+
+## Ejemplo
+
+```html
+<div role="list">
+  <sui-notification role="listitem"
+    avatar={pedido.localLogo} title="Tu pedido llegó"
+    description="Pollería El Dorado · S/ 42.50" timestamp="Hace 5 min" unread={!n.read}
+    onClick={() => abrir(n)} />
+</div>
+```

package/docs/sui-notification-footer/README.md

@@ -0,0 +1,172 @@
+---
+name: sui-notification-footer
+selector: sui-notification-footer
+resumen: Pie del panel desplegable de notificaciones (web): ayuda de teclado a la izquierda y un link a los ajustes a la derecha
+alternativas: [sui-link-button (un link suelto a los ajustes), sui-drawer-footer (pie de un panel lateral), sui-modal-footer (pie con botones)]
+---
+
+# sui-notification-footer
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-notification-footer`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+
+Story: [Molecules/Feedback/Notification Footer](https://sui-design-system.web.app/?path=/docs/molecules-feedback-notification-footer--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** solo como **pie del panel de la campana** en web: el desplegable que abre la bandeja desde
+la barra superior, con filas `sui-notification` y la cabecera `sui-notification-tab-menu`. Dice
+«Usa ↑ ↓ para moverte» y lleva el link a los ajustes de notificaciones.
+
+**No lo uses** para:
+
+- La pantalla de notificaciones (la bandeja a pantalla completa): ahí los ajustes ya están en la
+  misma pantalla y nadie navega con flechas.
+- Mobile: la mitad del componente es una ayuda de **teclado**.
+- El pie de cualquier otro panel: `sui-drawer-footer` o `sui-modal-footer`.
+
+## Qué variante usar
+
+> La guía del DS no tiene página para este componente: sale del Figma del DS (pie del panel de
+> notificaciones). Lo marcado **canon** está aprobado; lo que sigue en **propuesta** espera decisión, y «según el componente» describe lo que el código ya hace.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. La app no tiene panel
+> desplegable de campana: su bandeja es una pantalla (`pages/notifications/`).
+
+| prop | valor | cuándo | fuente |
+|---|---|---|---|
+| `usePrefix` · `useSuffix` | `'Usa'` · `'para moverte'` | Ya son los defaults (03-10-2026); no hace falta pasarlos. | canon (copy de la app: tuteo, español) |
+| `manage` | `'Ajustes de notificaciones'` | El link a los ajustes. Emite `manageClick`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `manage` | `{ label, href }` | Cuando los ajustes son otra ruta: se dibuja un `<a>` de verdad. | según el componente |
+| `manage` | `true` (default) | Dice «Administrar notificaciones» (en español desde 03-10-2026). | propuesta |
+| `manage` | `false` · `null` | Cuando los ajustes ya están a la vista en el mismo panel. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+
+## Tamaño en mobile y en web
+
+**No tiene `size`**: texto de 12 y link `small` (16 px de alto).
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| el pie entero | no aplica: es ayuda de teclado; en mobile no se muestra (el componente no se oculta solo: lo esconde quien lo usa) | 48 px de alto (14 + 20 de la tecla + 14) | alto: según el componente · ocultarlo en mobile: canon (aprobado por el dueño, 05-10-2026, bloque B7) |
+| el link de ajustes | si hiciera falta, un `sui-link-button` suelto: su size en el celular y la tablet sigue **pendiente** (P8 de la tabla D16) | `small` (16 px), fijo dentro del componente | `small` fijo: según el componente · choca con el «nada en `small`» de D16 (el `link-button` va `medium` en la computadora): **pendiente** del componente, quien lo usa no lo puede cambiar |
+
+```html
+@if (!bp.isMobile()) {
+  <sui-notification-footer use-prefix="Usa" use-suffix="para moverte"
+    manage="Ajustes de notificaciones" onManageClick={() => abrirAjustes()} />
+}
+```
+
+### Por dispositivo (D16)
+
+No aplica: no tiene `size` y solo se usa en la computadora (y el ultrawide), porque la mitad del
+pie es una ayuda de **teclado**; en el celular chico y en el celular no se muestra. En la tablet
+táctil de 768 px o más `bp.isMobile()` lo deja visible y el link de 16 px no llega al piso de 44:
+queda **pendiente**, igual que el resto del panel de la campana (`sui-notification-tab-menu`).
+
+En master-pedidos: sin helper; `@if (!bp.isMobile())` alrededor.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| el componente | no hay panel de campana | si el panel del local o el super admin suman una campana con la bandeja desplegable en la barra superior (web) |
+| `manage` con el texto por defecto | ya está en español («Administrar notificaciones», 03-10-2026), pero el link debe nombrar la pantalla a la que lleva | nunca: siempre un texto propio |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `manage` | `manage` | `SuiLinkConfig \| boolean \| null \| string` | `true` |
+| `usePrefix` | `use-prefix` | `string` | `'Usa'` |
+| `useSuffix` | `use-suffix` | `string` | `'para moverte'` |
+
+| evento | `event.detail` |
+|---|---|
+| `manageClick` | `MouseEvent` |
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `notificacion.usa` | Usa | `usePrefix` |
+| `notificacion.paraMoverte` | para moverte | `useSuffix` |
+| `notificacion.administrar` | Administrar notificaciones | `manage` |
+<!-- textos:fin -->
+
+```ts
+interface SuiLinkConfig { label: string; href?: string; target?: string; rel?: string; }
+```
+
+## Trampas
+
+- **Textos por defecto en español** desde 03-10-2026: «Usa ↑ ↓ para moverte» y «Administrar
+  notificaciones» (antes «Use», «to navigate» y «Manage Notification»).
+- Las teclas ↑ ↓ están fijas: no se pueden cambiar por otras.
+- Con `href` y `target="_blank"` agrega `rel="noopener noreferrer"` solo.
+- Ocupa el 100 % del ancho de su contenedor (el Figma lo dibuja de 540 px).
+- Borra el `title` nativo del host.
+
+## Bien y mal
+
+Link a los ajustes
+
+```html
+<!-- ❌ mal: con un texto y sin (manageClick) ni href, el link no lleva a ningún lado (vitrina: pages/super-admin/master-preview/_guia-moleculas/avisos.ts:268) -->
+<sui-notification-footer manage="Ajustes de notificaciones" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-notification-footer
+  manage={{ label: 'Ajustes de notificaciones', href: '/empresa/notificaciones' }} />
+```
+
+Texto del link
+
+```html
+<!-- ❌ mal: sin manage sale «Administrar notificaciones», que no nombra la pantalla a la que lleva -->
+<sui-notification-footer onManageClick={() => abrirAjustes()} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-notification-footer manage="Ajustes de notificaciones" onManageClick={() => abrirAjustes()} />
+```
+
+En el celular
+
+```html
+<!-- ❌ mal: «Usa ↑ ↓ para moverte» en una pantalla sin teclado; el componente no se oculta solo -->
+<sui-notification-footer manage="Ajustes de notificaciones" onManageClick={() => abrirAjustes()} />
+```
+
+```html
+<!-- ✅ bien -->
+@if (!bp.isMobile()) {
+  <sui-notification-footer manage="Ajustes de notificaciones" onManageClick={() => abrirAjustes()} />
+}
+```
+
+## Ejemplo
+
+```html
+<sui-notification-footer use-prefix="Usa" use-suffix="para moverte"
+  manage={{ label: 'Ajustes de notificaciones', href: '/empresa/notificaciones' }} />
+```

package/docs/sui-notification-tab-menu/README.md

@@ -0,0 +1,195 @@
+---
+name: sui-notification-tab-menu
+selector: sui-notification-tab-menu
+resumen: Cabecera con pestañas del panel desplegable de notificaciones (web), con conteo de no leídas y botón de filtro
+alternativas: [sui-tab-chips (pestañas de la bandeja a pantalla completa, en mobile), sui-tab-menu-horizontal (pestañas de una pantalla), sui-segmented-control (cambiar de vista con 2–4 opciones)]
+---
+
+# sui-notification-tab-menu
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-notification-tab-menu`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+>
+> **La API de aquí no es igual a la de Angular.** Lo que el texto nombre y figure en «Diferencias con
+> el SUI Angular» (dentro de API) aquí no existe.
+
+Story: [Molecules/Feedback/Notification Tab Menu](https://sui-design-system.web.app/?path=/docs/molecules-feedback-notification-tab-menu--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** solo como **cabecera del panel de la campana** en web: «Todas · No leídas (3) · Pedidos |
+Archivadas» con el filtro a la derecha, encima de las filas `sui-notification`.
+
+**No lo uses** para:
+
+- La bandeja a pantalla completa y en mobile: la app usa `sui-tab-chips` («Todas», «No leídas (3)»)
+  en `pages/notifications/notifications.html:47`, que se toca mejor con el dedo. Es lo correcto.
+- Las pestañas de cualquier otra pantalla: `sui-tab-menu-horizontal`.
+
+## Qué variante usar
+
+> La guía del DS no tiene página para este componente: sale del Figma del DS (cabecera del panel
+> de notificaciones). Lo marcado **canon** está aprobado por el dueño; «según el componente» describe lo que el código ya hace.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos** (no hay panel de campana).
+
+| prop | valor | cuándo | fuente |
+|---|---|---|---|
+| `tabs` | 2 a 4 pestañas | «Todas» primero, luego «No leídas» y los grupos del rol (Pedidos, Promos, Encargos…). Más de 4 no caben en el panel. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `tabs[].badge` | número > 0 | El conteo de **no leídas**, solo en la pestaña donde importa. Es un `sui-badge` rojo lleno: un conteo que pide acción. | según el componente · regla de badge: canon |
+| `tabs[].dividerBefore` | `true` | Separa lo que no es bandeja activa: «Archivadas» al final. | según el componente (Figma) |
+| `active` + `activeChange` | el `value` de la pestaña | Siempre enlazado: es un model de dos vías. | según el componente |
+| `showFilter` | `true` (default) | Solo si el panel tiene filtros de verdad (por local, por fecha). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `showFilter` | `false` | Lo normal: sin filtros, un botón que no hace nada estorba. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `filterLabel` | texto | El nombre del botón de filtro para el lector de pantalla. Default «Filtrar». | según el componente |
+
+## Tamaño en mobile y en web
+
+**No tiene `size`**: la fila mide 48 px, pero cada pestaña es un botón de **20 px de alto** (solo el
+texto) y el filtro es un compact-button de 24 px.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| las pestañas | **no alcanza**: 20 px de alto (el `line-height` del texto; el botón no tiene relleno), lejos de los 44 del dedo. Usar `sui-tab-chips` | 20 px de alto, en una fila de 48 | según el componente |
+| el filtro | 24 px (compact-button `large`), **bajo los 44 px del dedo** | 24 px | según el componente |
+
+```html
+@if (bp.isMobile()) {
+  <sui-tab-chips chips={pestanas} size={bp.sizeChips()}
+    value={activa()} onValueChange={(e) => activa.set(e.detail)} />
+} @else {
+  <sui-notification-tab-menu tabs={pestanas} active={activa} onActiveChange={(e) => (activa = e.detail)} show-filter="false" />
+}
+```
+
+### Por dispositivo (D16)
+
+No aplica: no tiene `size` y es solo de la computadora (y el ultrawide). En el celular va
+`sui-tab-chips` con `size={bp.sizeChips()}` (`xlarge`, fila `tab-chips` de D16). En el celular
+chico el helper también da `xlarge`, pero es interino: la fila `tab-chips` pide `medium` con área
+tocable de 44, y mientras el DS no estire el área de los `medium` se queda el size grande (nota ¹
+de D16).
+Lo que trae fijo adentro: el filtro es un `sui-compact-button` `large` (24), que cuadra con la
+computadora; el conteo es un `sui-badge` `small`, que choca con el «nada en `small`» de D16 y
+queda **pendiente** del componente (quien lo usa no lo puede cambiar). En la tablet táctil de
+768 px o más `bp.isMobile()` lo deja visible con pestañas de 20 y filtro de 24, lejos del piso de
+44: queda **pendiente**, igual que el resto del panel de la campana.
+
+En master-pedidos: sin helper; `@if (bp.isMobile())` elige `sui-tab-chips` con
+`size={bp.sizeChips()}`, y si no, este componente.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| el componente | no hay panel de campana; la bandeja es una pantalla con `sui-tab-chips` | si el panel del local o el super admin suman la campana con bandeja desplegable en web |
+| `showFilter` | no hay filtros en la bandeja | filtrar avisos por local (central con varios locales) o por fecha |
+| `dividerBefore` | no hay «Archivadas» | si se agrega archivar avisos |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `active` | `active` | `string \| undefined` | `undefined` |
+| `filterLabel` | `filter-label` | `string` | `'Filtrar'` |
+| `showFilter` | `show-filter` | `boolean` | `true` |
+| `tabs` | — (solo por propiedad JS) | `SuiNotificationTab[]` | `[]` |
+
+| evento | `event.detail` |
+|---|---|
+| `filterClick` | `MouseEvent` |
+| `tabChange` | `string` |
+
+### Diferencias con el SUI Angular
+
+- **Eventos de Angular que aquí no existen:** `activeChange`
+<!-- api:fin -->
+
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `notificacion.filtrar` | Filtrar | `filterLabel` |
+<!-- textos:fin -->
+
+```ts
+interface SuiNotificationTab<T = string> {
+  value: T;
+  label: string;
+  badge?: number;          // > 0 lo muestra
+  dividerBefore?: boolean; // línea vertical antes de esta pestaña
+}
+```
+
+## Trampas
+
+- **`showFilter` arranca en `true`**: si no pasas `false`, aparece un botón de filtro.
+- `tabs` es **obligatorio** y `active` es un model: `active` + `activeChange`, no `value` como en `sui-tab-chips`.
+- La raya de la pestaña activa usa el primario de la app (naranja), no el azul del Figma.
+- El badge no tiene tope: 120 sale «120». Si hace falta, el texto lo recorta quien lo usa («99+» va
+  en `label`, no en `badge`, porque `badge` es un número).
+- Las pestañas van en su propio `role="tablist"` (el botón de filtro queda afuera, desde el
+  04-10-2026) y cada una es `role="tab"` con `aria-selected`. Un solo tab stop: ← → mueven y
+  activan con vuelta al inicio, Home/End a los extremos. No hay `tabpanel` asociado: lo arma quien lo usa.
+
+## Bien y mal
+
+Pestañas en el celular
+
+```html
+<!-- ❌ mal: cada pestaña mide 20 px de alto, lejos de los 44 del dedo -->
+<sui-notification-tab-menu tabs={pestanas} active={activa} onActiveChange={(e) => (activa = e.detail)} show-filter="false" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-chips chips={pestanas} size={bp.sizeChips()}
+  value={activa()} onValueChange={(e) => activa.set(e.detail)} />
+```
+
+Pestaña activa
+
+```html
+<!-- ❌ mal: active fijo; la pestaña cambia adentro pero la página no se entera (vitrina: pages/super-admin/master-preview/_guia-moleculas/avisos.ts:264) -->
+<sui-notification-tab-menu tabs={pestanas} active="todas" show-filter="false" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-notification-tab-menu tabs={pestanas} active={pestana} onActiveChange={(e) => (pestana = e.detail)} show-filter="false" />
+```
+
+Botón de filtro
+
+```html
+<!-- ❌ mal: showFilter arranca en true; sin filtros de verdad sale un botón que no hace nada -->
+<sui-notification-tab-menu tabs={pestanas} active={pestana} onActiveChange={(e) => (pestana = e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-notification-tab-menu tabs={pestanas} active={pestana} onActiveChange={(e) => (pestana = e.detail)} show-filter="false" />
+```
+
+## Ejemplo
+
+```html
+<sui-notification-tab-menu show-filter="false" active={pestana} onActiveChange={(e) => (pestana = e.detail)}
+  tabs={[
+    { value: 'todas', label: 'Todas' },
+    { value: 'no-leidas', label: 'No leídas', badge: 3 },
+    { value: 'pedidos', label: 'Pedidos' },
+    { value: 'archivadas', label: 'Archivadas', dividerBefore: true },
+  ]} />
+```