@ajuarezso/sui-design-system 0.24.1 → 0.25.1

package/docs/sui-accordion/README.md

@@ -45,9 +45,9 @@ de cambios de una versión.
 
 | valor | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
-| `[leftIcon]="false"` | el caso normal: el título se explica solo | `pages/envios/envios.html:412` («Más detalles (opcional)») | propuesta |
+| `[leftIcon]="false"` | el caso normal: el título se explica solo | `pages/envios/envios.html:413` («Más detalles (opcional)») | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `true` (default, `question-line`) | **solo** si el título es una pregunta de ayuda | `pages/driver/driver-profile/driver-profile.html:156` («¿Por qué no me llegan pedidos?») | propuesta |
-| un nombre de ícono | el ícono dice de qué es la sección y hay varias juntas | `pages/notifications/notifications.html:72` (`settings-3-line`) | propuesta |
+| un nombre de ícono | el ícono dice de qué es la sección y hay varias juntas | `pages/notifications/notifications.html:72` (`settings-3-line`) | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 Hoy: 16 en `false`, 2 con el default (las dos son preguntas de ayuda) y 1 con ícono propio. El
 default del componente es el caso raro: **casi siempre hay que apagarlo**.
@@ -61,13 +61,14 @@ son preguntas y van sin ícono; las dos de ayuda dentro de la app, con. Elegir u
 | qué | cuándo | fuente |
 |---|---|---|
 | `description` | **una respuesta corta en texto** (FAQ): aparece al abrir, alineada con el título | según el Figma del DS |
-| contenido proyectado | cualquier otra cosa: campos, listas, cards, tablas | propuesta |
+| contenido proyectado | cualquier otra cosa: campos, listas, cards, tablas | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
-**A revisar:** 4 accordions pasan un **resumen** en `description` (`resumenReto()`,
-`resumenVotaciones()`, `resumenDetalles()`…) que, por cómo funciona el componente, **solo se ve
-con el accordion abierto**. Si la idea era ver el resumen cerrado, hoy no se ve:
-`pages/driver/driver-dashboard/driver-dashboard.html:287` y `:486`,
-`pages/envios/envios.html:412`, `pages/customer/mandadito/mandadito.html:188`.
+**A revisar:** 2 accordions pasan un **resumen** en `description` (`resumenDetallesEnvio()`,
+`resumenDetalles()`) que, por cómo funciona el componente, **solo se ve con el accordion
+abierto**. Si la idea era ver el resumen cerrado, hoy no se ve:
+`pages/envios/envios.html:413` y `pages/customer/mandadito/mandadito.html:189`. Los dos del
+dashboard del repartidor («Votaciones» y «Reto semanal») ya pasaron su resumen al `badge`
+(05-10-2026), que sí se ve cerrado.
 
 ### `lazy` — cuándo diferir el contenido
 
@@ -79,15 +80,15 @@ con el accordion abierto**. Si la idea era ver el resumen cerrado, hoy no se ve:
 
 **Usos de hoy que no hacen lo que parecen:** 4 accordions usan `<ng-template suiAccordionContent>`
 **sin** `[lazy]="true"`, y sin `lazy` el template se crea al cargar igual que el contenido plano:
-`pages/envios/envios.html:418` y `:743`, `pages/customer/order-tracking/order-tracking.html:590`,
-`pages/customer/mandadito/mandadito.html:194`. Les falta `[lazy]="true"`.
+`pages/envios/envios.html:413` y `:756`, `pages/customer/order-tracking/order-tracking.html:611`,
+`pages/customer/mandadito/mandadito.html:189`. Les falta `[lazy]="true"`.
 
 ### `flipIcon` y `badge`
 
 | input | cuándo | fuente |
 |---|---|---|
 | `flipIcon="on"` | listas largas donde el «+» a la izquierda se escanea mejor que a la derecha. 0 usos hoy | según el Figma del DS (la variante existe) |
-| `badge` | marcar una sección como nueva o actualizada («Nuevo»). Extensión de SUI; 0 usos hoy | propuesta |
+| `badge` | marcar una sección como nueva o actualizada («Nuevo»), o dejar a la vista con la fila cerrada un estado de una o dos palabras («Sin reto», «3 de 10»). Extensión de SUI; 2 usos hoy, los dos del segundo tipo: `pages/driver/driver-dashboard/driver-dashboard.html:332` y `:516` | «Nuevo»: canon (aprobado por el dueño, 05-10-2026, bloque B9) · estado con la fila cerrada: pedido del dueño, 05-10-2026 (`core/resumen-acordeones-repartidor.ts`) |
 
 ## Tamaño en mobile y en web
 
@@ -100,6 +101,35 @@ cómoda en mobile.
 | fila | ancho completo, 48 px | igual | componente |
 | texto | Label/Small 14 y Paragraph/Small 14 | igual | según el Figma del DS |
 
+### Por dispositivo (D16)
+
+La fila no tiene `size`: mide 48 en todos los dispositivos, que ya pasa los 44 del dedo en el
+celular y la tablet, y en la computadora no estorba. Lo único con tamaño es el **`badge`**, que
+no se toca y sigue la fila de `badge` de D16. El accordion lo pinta en `small` si no le pasas
+`size` (también con el atajo `badge="Nuevo"`), y D16 no deja nada en `small`:
+
+| dispositivo | size del `badge` | nota |
+|---|---|---|
+| celular chico (< 380) | `medium` | lo que no se toca no sube en el celular chico |
+| celular (380–767) | `large` | un paso más que en la computadora (P1 b). No `xlarge`: ver abajo |
+| tablet táctil | `medium` | |
+| computadora | `medium` | `medium` va sin MAYÚSCULAS |
+
+Ultrawide: igual que la computadora. Fuente: D16, dueño 05-10-2026.
+
+**Por qué `large` y no `xlarge` en el celular**, aunque el badge va en la fila del título
+(`.sui-accordion__title-row`): la excepción «`xlarge` junto a un título» de D16 es para un título
+de encabezado o un monto: según el README de `sui-badge`, en el celular el badge va al lado de
+textos de 16. El título del accordion es
+Label/Small 14/20, el mismo nivel que una fila de lista: un `xlarge` (28, texto 16) tendría letra
+más grande que el título que acompaña, y `large` (24, texto 14) lo iguala. Es una lectura de D16,
+no una decisión aparte del dueño; si se quiere `xlarge` aquí, lo decide él. `bp.sizeBadge()` ya da
+`large`/`medium`, así que no hace falta otra expresión.
+
+En master-pedidos: `[badge]="{ label: 'Nuevo', size: bp.sizeBadge() }"`. Hoy los dos badges del
+dashboard del repartidor salen en `medium` fijo (`core/resumen-acordeones-repartidor.ts:19`):
+en el celular les falta subir a `large`.
+
 ## API
 
 <!-- api:inicio -->
@@ -150,6 +180,50 @@ Slots: contenido plano (o con el atributo `sui-accordion-body`) y el template
   contenido cambia de alto estando abierto, acompaña.
 - El host borra el atributo `title` nativo (sin tooltip gris del navegador).
 
+## Bien y mal
+
+Contenido diferido
+
+```html
+<!-- ❌ mal: el template sin [lazy] se crea al cargar igual (pages/envios/envios.html:756) -->
+<sui-accordion [title]="tituloDetalle(e)" [leftIcon]="false" [(open)]="detalleAbierto">
+  <ng-template suiAccordionContent>…</ng-template>
+</sui-accordion>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-accordion [title]="tituloDetalle(e)" [leftIcon]="false" [lazy]="true" [(open)]="detalleAbierto">
+  <ng-template suiAccordionContent>…</ng-template>
+</sui-accordion>
+```
+
+Resumen de la fila cerrada
+
+```html
+<!-- ❌ mal: description solo se ve abierto; cerrado, el resumen no aparece (pages/envios/envios.html:413) -->
+<sui-accordion title="Más detalles (opcional)" [description]="resumenDetallesEnvio()"
+  [leftIcon]="false" />
+```
+
+```html
+<!-- ✅ bien: lo que tiene que verse cerrado va en el título, como en master-orders.html:673 -->
+<sui-accordion [title]="'Más detalles · ' + resumenDetallesEnvio()" [leftIcon]="false" />
+```
+
+Badge en la fila
+
+```html
+<!-- ❌ mal: el atajo de string sale en small, y D16 no deja nada en small -->
+<sui-accordion title="Reto semanal" badge="Nuevo" [leftIcon]="false" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-accordion title="Reto semanal" [badge]="{ label: 'Nuevo', size: bp.sizeBadge() }"
+  [leftIcon]="false" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-activity-feed/README.md

@@ -29,28 +29,28 @@ Regla corta: **quién hizo qué → activity feed · avisos para mí → notific
 
 > **La guía del DS no tiene página del activity feed.** El componente sale del Figma de SUI
 > (Activity Feed [1.1], frame 166035:46833). Uso medido el 03-10-2026 en `master-pedidos/src/app`:
-> **0 usos**. Todo lo de abajo es **propuesta, falta aprobación**.
+> **0 usos**. Lo marcado canon está aprobado; lo que sigue en **propuesta** espera decisión.
 
 El tipo de fila lo decide `type` de cada item (una unión discriminada): lo que cuelga debajo de
 la línea de texto.
 
 | `type` | cuándo | ejemplo posible en la app | fuente |
 |---|---|---|---|
-| `default` | La acción se entiende sola con la línea. Es el caso normal. | «Ana aprobó la recarga de Luis» | propuesta, falta aprobación |
-| `file` | La acción dejó archivos que se pueden bajar. | «Luis subió su comprobante de Yape» | propuesta, falta aprobación |
-| `comment` | La acción fue escribir algo y el texto importa. | «El local dejó una nota en el pedido» | propuesta, falta aprobación |
-| `avatar-group` | La acción involucró a varias personas. | «Se asignaron 3 repartidores a la zona» | propuesta, falta aprobación |
-| `tasks` | La acción tuvo un resultado por partes (hechas, pendientes, con error). | «Se importó la carta: 40 productos, 2 con error» | propuesta, falta aprobación |
+| `default` | La acción se entiende sola con la línea. Es el caso normal. | «Ana aprobó la recarga de Luis» | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `file` | La acción dejó archivos que se pueden bajar. | «Luis subió su comprobante de Yape» | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `comment` | La acción fue escribir algo y el texto importa. | «El local dejó una nota en el pedido» | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `avatar-group` | La acción involucró a varias personas. | «Se asignaron 3 repartidores a la zona» | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `tasks` | La acción tuvo un resultado por partes (hechas, pendientes, con error). | «Se importó la carta: 40 productos, 2 con error» | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 | pieza del item | regla | fuente |
 |---|---|---|
-| leading | `avatar` cuando lo hizo una persona; `icon` cuando lo hizo el sistema (una Cloud Function, un cobro automático). | propuesta, falta aprobación |
+| leading | `avatar` cuando lo hizo una persona; `icon` cuando lo hizo el sistema (una Cloud Function, un cobro automático). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `avatar.src` | La foto de **otra** persona va denormalizada y pasada por `fotoDeStorage()`, nunca la URL de Google. | canon (CLAUDE.md, «Fotos de otra persona») |
 | `avatar.color` | Para iniciales sin foto, `color` del set de SUI. `bgColor` solo como escape: no ajusta el color del texto. | canon del componente |
 | `userName` / `target` | Nombres, nunca IDs. | canon (CLAUDE.md, «Pasada de UX/UI»: un identificador nunca es el título de nada) |
-| `verb` | En pasado y en minúscula: «aprobó», «subió». | propuesta, falta aprobación |
-| `timestamp` | Relativo y corto: «hace 4 min», «ayer». Lo formateas tú. | propuesta, falta aprobación |
-| `showAction` | `false` salvo que haya un menú real detrás de los tres puntos. | propuesta, falta aprobación |
+| `verb` | En pasado y en minúscula: «aprobó», «subió». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `timestamp` | Relativo y corto: «hace 4 min», «ayer». Lo formateas tú. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `showAction` | `false` salvo que haya un menú real detrás de los tres puntos. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 **Carga:** un historial crece sin techo. Se pide por páginas con cursor (`getCollectionPage`
 ordenado por fecha) y un «Cargar más» al final, nunca la colección entera. Canon
@@ -69,6 +69,16 @@ de texto **envuelve** (`flex-wrap`), así que en mobile un «Ana aprobó la reca
 En táctil, el botón de tres puntos y la descarga miden 20 y 28: por debajo del área cómoda. Si
 el feed va en mobile con acciones, esa es la primera mejora que pide el componente.
 
+### Por dispositivo (D16)
+
+No aplica: el feed **no tiene `size`** y nada en él cambia por dispositivo (avatar o ícono de 32,
+texto 14/20). Si va o no en el celular y la tablet táctil sigue **pendiente** (P59: antes hay que
+decidir si el feed es solo de web), porque los tres puntos (20) y la descarga (28) no llegan a 44.
+Lo que va alrededor sí sigue D16: el «Cargar más» es un `sui-button` con
+`[size]="bp.sizeControl()"`. El avatar del leading lo fija el feed en 32 (`SuiActivityAvatarRef`
+no tiene `size`), así que no sube un paso en el celular como pide D16 para `avatar`: cambiarlo es
+código del DS.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -130,13 +140,57 @@ interface SuiActivityTask { state: 'success' | 'warning' | 'pending' | 'error';
 - No hay estado vacío ni de carga: cuando `items` está vacío no se ve nada. Usa `sui-empty-state`
   afuera, y un skeleton mientras llega la primera página.
 
+## Bien y mal
+
+Historial vacío
+
+```html
+<!-- ❌ mal: con items vacío el feed no pinta nada y queda un hueco (Trampas) -->
+<sui-activity-feed [items]="historial()" />
+```
+
+```html
+<!-- ✅ bien -->
+@if (historial().length) {
+  <sui-activity-feed [items]="historial()" />
+} @else {
+  <sui-empty-state title="Todavía no hay actividad" />
+}
+```
+
+Descargar un archivo
+
+```html
+<!-- ❌ mal: file.href no lo lee la plantilla; sin (fileDownload) el chip no baja nada -->
+<sui-activity-feed [items]="comprobantes()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-activity-feed [items]="comprobantes()" (fileDownload)="descargar($event.file)" />
+```
+
+Menú de los tres puntos
+
+```html
+<!-- ❌ mal: los outputs hacen stopPropagation; el (click) del padre no se entera -->
+<div (click)="abrirMenu()">
+  <sui-activity-feed [items]="historial()" />
+</div>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-activity-feed [items]="historial()" (action)="abrirMenu($event.item)" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-card>
   <sui-activity-feed [items]="historial()" (fileDownload)="descargar($event.file)" />
   @if (hayMas()) {
-    <sui-button variant="stroke" color="neutral" [size]="bp.isMobile() ? 'large' : 'small'"
+    <sui-button variant="stroke" color="neutral" [size]="bp.sizeControl()"
                 (click)="cargarMas()">Cargar más</sui-button>
   }
 </sui-card>

package/docs/sui-activity-filter/README.md

@@ -28,16 +28,16 @@ Regla corta: **filtros del activity feed → activity filter · cualquier otra l
 
 > **La guía del DS no tiene página de este filtro.** Sale del Figma de SUI (Activity Feed Selected
 > Filter [1.1], frame 165967:3881: Default, Hover, Active). Uso medido el 03-10-2026 en
-> `master-pedidos/src/app`: **0 usos**. Lo de abajo es **propuesta, falta aprobación**.
+> `master-pedidos/src/app`: **0 usos**. Lo marcado canon está aprobado; lo que sigue en **propuesta** espera decisión.
 
 | prop | cuándo | fuente |
 |---|---|---|
 | `active` | El filtro que está aplicado (fondo naranja al 10 %, texto e ícono naranja). | Figma (State=Active) |
-| `icon` | Un ícono que diga el tipo: `file-list-2-line` archivos, `chat-3-line` comentarios, `task-line` tareas. | propuesta, falta aprobación |
-| `icon` en `null` | «Todos»: el chip que limpia el filtro va sin ícono. | propuesta, falta aprobación |
+| `icon` | Un ícono que diga el tipo: `file-list-2-line` archivos, `chat-3-line` comentarios, `task-line` tareas. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `icon` en `null` | «Todos»: el chip que limpia el filtro va sin ícono. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `disabled` | Un tipo que no tiene ninguna actividad en el rango elegido. Mejor que esconderlo: la fila no salta. | propuesta, falta aprobación (el disabled no está en el Figma) |
 
-¿Uno o varios a la vez? El componente no lo decide. Propuesta: **uno a la vez, con «Todos»**,
+¿Uno o varios a la vez? El componente no lo decide. Canon (aprobado por el dueño, 05-10-2026, bloque B8): **uno a la vez, con «Todos»**,
 igual que `sui-tab-chips`; así nadie se queda con un historial vacío por combinar filtros.
 
 ## Tamaño en mobile y en web
@@ -46,10 +46,19 @@ igual que `sui-tab-chips`; así nadie se queda con un historial vacío por combi
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| filtros del activity feed | no usar: 30 no llega al dedo; usar `sui-tab-chips` en `large` | `sui-activity-filter` | propuesta, falta aprobación |
+| filtros del activity feed | no usar: 30 no llega al dedo; usar `sui-tab-chips` en `xlarge` (44). Vale también para la tablet táctil | `sui-activity-filter` | canon (aprobado por el dueño, 05-10-2026, bloque B13) · tablet: D16, dueño 05-10-2026 |
 
 La fila de chips la arma la pantalla: el componente no trae contenedor ni scroll lateral.
 
+### Por dispositivo (D16)
+
+No aplica: no tiene `size` (mide 30 en todos lados), así que D16 no le elige tamaño sino **si
+va**. Con 30 no llega a los 44 del dedo: en el celular (también el chico) y en la tablet táctil
+va `sui-tab-chips`, con los sizes de su fila de D16 (B13); en la computadora y el ultrawide, este
+chip. Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: `@if (bp.tactil()) { <sui-tab-chips [size]="bp.sizeChips()" …/> } @else { <sui-activity-filter …> }`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -88,6 +97,46 @@ Slot: `<ng-content>` (el texto del chip).
 - El foco usa un `outline` de 2 px naranja, no el doble anillo de los inputs del DS.
 - Ya trae el arreglo de iOS para el `:active` pegado.
 
+## Bien y mal
+
+Escuchar el toque
+
+```html
+<!-- ❌ mal: con (click) el filtro no responde a Enter ni Espacio (Trampas) -->
+<sui-activity-filter icon="chat-3-line" (click)="filtro.set('comentarios')">Comentarios</sui-activity-filter>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-activity-filter icon="chat-3-line" [active]="filtro() === 'comentarios'" (clicked)="filtro.set('comentarios')">Comentarios</sui-activity-filter>
+```
+
+El chip «Todos»
+
+```html
+<!-- ❌ mal: sin icon sale el de archivos por defecto -->
+<sui-activity-filter [active]="filtro() === 'todos'" (clicked)="filtro.set('todos')">Todos</sui-activity-filter>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-activity-filter [icon]="null" [active]="filtro() === 'todos'" (clicked)="filtro.set('todos')">Todos</sui-activity-filter>
+```
+
+En el celular o la tablet
+
+```html
+<!-- ❌ mal: 30 de alto no llega al dedo (B13 y D16) -->
+<sui-activity-filter icon="task-line" (clicked)="filtro.set('tareas')">Tareas</sui-activity-filter>
+```
+
+```html
+<!-- ✅ bien -->
+@if (bp.tactil()) {
+  <sui-tab-chips [chips]="filtros" [(value)]="filtro" [size]="bp.sizeChips()" />
+} @else { … }
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-alert/README.md

@@ -152,6 +152,16 @@ en mobile es el ancho: ocupa toda la columna.
 | la X de cerrar (`dismissible`) | se ve de 16 px en `xsmall`, 20 en `small`, 24 en `large`, 28 en `xlarge`; **se toca en 44 × 44** (`::before` invisible; en `xsmall`/`small` el alert mide 32/36 y recorta el área a su alto, y a la izquierda solo crece 4 para no pisar las acciones inline) | se ve igual, sin área extra | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 | las acciones (`actions[]`) | link de 20 px de alto en `large`/`xlarge`, 16 en `small`/`xsmall` | igual | según el componente |
 
+### Por dispositivo (D16)
+
+No aplica: el `size` del alert lo elige el **contenido** (con descripción `large`, de una línea
+`small`, dentro de un campo `xsmall`), no el dispositivo, y es el mismo en el celular, la tablet
+y la computadora. Por eso no hay helper de `bp`: se escribe el literal. Queda **pendiente** si
+`small`/`xsmall` chocan con el «nada en `small`» de D16: la hoja de decisiones las dejó fuera
+porque ahí el `size` cambia el layout, no la escala. También queda pendiente el área de 44 de la
+X en la **tablet táctil**: hoy se prende solo con `max-width: 767px`, y el arreglo (mixin
+`sui-tactil` con `pointer: coarse`) espera el sí del dueño.
+
 
 ## API
 
@@ -219,6 +229,50 @@ Slot: `<ng-content select="[slot=action]">` — legado; solo se usa si `actions`
 - El slot de acción usa `slot=`; los de badge y button usan `data-slot=`.
 - El host borra el atributo `title` nativo (no aparece el tooltip gris del navegador).
 
+## Bien y mal
+
+Aviso con descripción
+
+```html
+<!-- ❌ mal: en small la descripción no se pinta (pages/super-admin/master-settings/master-settings.html:635) -->
+<sui-alert size="small" title="Todavía no guardaste ninguna escala"
+  description="Estos son los niveles que trae la app." />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-alert size="large" title="Todavía no guardaste ninguna escala"
+  description="Estos son los niveles que trae la app." />
+```
+
+Aviso que solo informa
+
+```html
+<!-- ❌ mal: filled compite con el botón principal y no frena nada (pages/driver/driver-earnings/driver-earnings.html:16) -->
+<sui-alert variantStyle="filled" variant="info" title="Cobras por cada entrega"
+  description="Esto es lo que llevas ganado por las entregas que completaste." />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-alert variant="info" title="Cobras por cada entrega"
+  description="Esto es lo que llevas ganado por las entregas que completaste." />
+```
+
+Una sola acción
+
+```html
+<!-- ❌ mal: la primera acción va subrayada y esta no (pages/notifications/notifications.ts:200) -->
+<sui-alert variant="info" title="Activa las notificaciones"
+  [actions]="[{ label: 'Activar', onClick: activar }]" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-alert variant="info" title="Activa las notificaciones"
+  [actions]="[{ label: 'Activar', onClick: activar, underline: true }]" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-app-store-badge/README.md

@@ -25,7 +25,7 @@ Google Play, en ese orden.
 ## Qué variante usar
 
 > **La guía del DS no tiene página para este componente.** Todo lo de abajo es **canon (aprobado
-> por el dueño, 03-10-2026)** o propuesta. Los sellos son los oficiales de cada tienda (cada una
+> por el dueño, 03-10-2026 o 05-10-2026)** o propuesta. Los sellos son los oficiales de cada tienda (cada una
 > pide usar el suyo tal cual, sin recolorear ni tocar el logo).
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: 10 sellos en 4 archivos, sin contar
@@ -55,12 +55,12 @@ Google Play, en ese orden.
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `height` (40, default) | 40 en desktop y en el footer. El ancho sale solo de la proporción de cada sello. | propuesta |
+| `height` (40, default) | 40 en web; el footer en mobile va a 44. El ancho sale solo de la proporción de cada sello. | canon (aprobado por el dueño, 05-10-2026, bloque B13) |
 | `height` 48 | En el hero de una landing en mobile, si los sellos son el CTA principal. Los dos sellos siempre a la misma altura. | propuesta |
-| `href` | Siempre: el link de la ficha de la tienda (`apps.apple.com/pe/app/master-pedidos/…`, `play.google.com/store/apps/details?id=com.masterpedidos.app`). Sin `href` el sello no es un link. | propuesta (es la práctica de los 10 usos de hoy) |
-| `target="_blank"` | Siempre que hay `href`: el `rel="noopener"` se aplica solo en ese caso. | propuesta |
-| `ariaLabel` | Siempre, en español: «Descargar Master Pedidos en App Store». Sin él, el texto alternativo es genérico («Descargar en App Store», en español desde el 04-10-2026). | propuesta |
-| `disabled` | Sin caso: si la app no está en una tienda, no se muestra su sello. | propuesta |
+| `href` | Siempre: el link de la ficha de la tienda (`apps.apple.com/pe/app/master-pedidos/…`, `play.google.com/store/apps/details?id=com.masterpedidos.app`). Sin `href` el sello no es un link. | canon (aprobado por el dueño, 05-10-2026, bloque B10) (es la práctica de los 10 usos de hoy) |
+| `target="_blank"` | Siempre que hay `href`: el `rel="noopener"` se aplica solo en ese caso. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `ariaLabel` | Siempre, en español: «Descargar Master Pedidos en App Store». Sin él, el texto alternativo es genérico («Descargar en App Store», en español desde el 04-10-2026). | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
+| `disabled` | Sin caso: si la app no está en una tienda, no se muestra su sello. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ## Tamaño en mobile y en web
 
@@ -74,16 +74,26 @@ Regla del dueño, 03-10-2026.
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | hero de una landing, cuando los sellos son el CTA | `[height]="48"` | `[height]="40"` | propuesta |
-| footer de las landings, «Descarga la app» | `[height]="44"` | `[height]="40"` (default) | propuesta |
+| footer de las landings, «Descarga la app» | `[height]="44"` | `[height]="40"` (default) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44) · web: propuesta |
 
 ```html
-<sui-app-store-badge company="app-store" [height]="bp.isMobile() ? 48 : 40" href="…" target="_blank"
+<sui-app-store-badge company="app-store" [height]="bp.tactil() ? 48 : 40" href="…" target="_blank"
                      ariaLabel="Descargar Master Pedidos en App Store" />
 ```
 
 Los dos sellos siempre a la misma altura. Hoy los 10 usan la altura default (40) también en mobile:
 quedan 4 px por debajo de los 44.
 
+### Por dispositivo (D16)
+
+**No tiene `size`**: el alto va en px por `[height]`, así que no hay escala que repartir por
+dispositivo. Lo que sí aplica es la regla de lo que se toca: el sello es un link, y en toda
+pantalla táctil (celular, celular chico y tablet con `pointer: coarse`) va a **44 o más**; en la
+computadora, 40. En el ultrawide, igual que en la computadora. Por eso la condición es
+`bp.tactil()` y no `bp.isMobile()`: con `isMobile` el iPad se queda en 40.
+
+En master-pedidos: `[height]="bp.tactil() ? 44 : 40"` (footer) · `[height]="bp.tactil() ? 48 : 40"` (hero, propuesta).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 Nada se borra del DS. Lo marcado «no usar» no tiene caso en la app de hoy; si un flujo nuevo cae
@@ -126,13 +136,57 @@ Outputs: ninguno.
 - `height` escala el sello entero; no le pongas `width` desde afuera o se deforma.
 - El hover baja la opacidad a 0.85, como recomienda Apple; no hay estado activo propio de las tiendas.
 
+## Bien y mal
+
+Texto para el lector de pantalla
+
+```html
+<!-- ❌ mal: alt genérico, no dice qué app (components/landing-footer/landing-footer.html:18) -->
+<sui-app-store-badge company="app-store" appearance="alternative" href="…" target="_blank"
+  ariaLabel="Descargar en App Store" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-app-store-badge company="app-store" appearance="alternative" [height]="bp.tactil() ? 44 : 40"
+  href="…" target="_blank" ariaLabel="Descargar Master Pedidos en App Store" />
+```
+
+Alto en una pantalla táctil
+
+```html
+<!-- ❌ mal: sin [height] queda en 40 también en el celular, 4 px bajo el piso de 44 (pages/public/landing-customers/landing-customers.html:32) -->
+<sui-app-store-badge company="google-play" appearance="preferred" href="…" target="_blank"
+  ariaLabel="Descargar Master Pedidos en Google Play" />
+```
+
+```html
+<!-- ✅ bien: 44 es el piso táctil; en el hero, 48 si se aprueba esa propuesta -->
+<sui-app-store-badge company="google-play" appearance="preferred" [height]="bp.tactil() ? 44 : 40"
+  href="…" target="_blank" ariaLabel="Descargar Master Pedidos en Google Play" />
+```
+
+Sello que no lleva a ningún lado
+
+```html
+<!-- ❌ mal: sin href pinta solo la imagen, sin foco ni clic (ver «Trampas») -->
+<sui-app-store-badge company="app-store" ariaLabel="Descargar Master Pedidos en App Store" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-app-store-badge company="app-store" [height]="bp.tactil() ? 44 : 40"
+  href="https://apps.apple.com/pe/app/master-pedidos/id6764676191"
+  target="_blank" ariaLabel="Descargar Master Pedidos en App Store" />
+```
+
 ## Ejemplo
 
 ```html
-<sui-app-store-badge company="app-store"
+<sui-app-store-badge company="app-store" [height]="bp.tactil() ? 44 : 40"
   href="https://apps.apple.com/pe/app/master-pedidos/id6764676191" target="_blank"
   ariaLabel="Descargar Master Pedidos en App Store" />
-<sui-app-store-badge company="google-play"
+<sui-app-store-badge company="google-play" [height]="bp.tactil() ? 44 : 40"
   href="https://play.google.com/store/apps/details?id=com.masterpedidos.app" target="_blank"
   ariaLabel="Descargar Master Pedidos en Google Play" />
 ```