@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/docs/sui-alert/README.md

@@ -0,0 +1,321 @@
+---
+name: sui-alert
+selector: sui-alert
+resumen: Aviso que se queda en la pantalla, en el lugar donde pasa lo que avisa
+alternativas: [sui-toast (efímero, resultado de una acción), sui-banner (afecta a toda la app o la pantalla), sui-notification (fila de la bandeja), sui-form-hint (ayuda de un solo campo)]
+---
+
+# sui-alert
+
+<!-- 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-alert`); 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/Alert](https://sui-design-system.web.app/?path=/docs/molecules-feedback-alert--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando la persona tiene que leer algo **ahí mismo, junto a lo que está haciendo**,
+y el mensaje tiene que seguir visible hasta que cambie la situación: un error que impide
+seguir, una advertencia antes de confirmar, una explicación de cómo funciona una sección,
+el motivo por el que se canceló un pedido.
+
+**No lo uses** para:
+
+- Confirmar que una acción salió bien («Producto guardado»): eso es `sui-toast`. Un alert que
+  hay que cerrar a mano para decir «guardado» estorba.
+- Algo que afecta a toda la app (modo demo, versión nueva, plan vencido): `sui-banner`. Si
+  impide usarla (sin conexión), ni alert ni banner: un `sui-modal` o una pantalla propia (ver `sui-banner`).
+- La ayuda de un solo campo de formulario: `sui-form-hint`.
+- Decorar. El lector de pantalla lo anuncia apenas aparece (`role="alert"` en error y warning,
+  `role="status"` en el resto).
+
+Regla corta: **contexto → alert · toda la app → banner · efímero → toast · bandeja → notification.**
+
+## Qué variante usar
+
+El alert tiene **dos ejes** y se eligen por separado: `variant` dice **qué tipo de mensaje es**
+(el color y el ícono) y `variantStyle` dice **cuánto peso visual tiene** (el relleno).
+
+> **La guía del DS no dice cuándo usar cada relleno ni cada tipo.** Su página del alert muestra
+> las combinaciones, la API y un ejemplo por tamaño, pero no trae do/don't ni jerarquía. Por eso
+> casi todo lo de abajo sigue siendo **canon (aprobado por el dueño, 03-10-2026)**. Solo lo marcado
+> «según la guía del DS» sale de ahí (de su texto o de sus ejemplos publicados).
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 117 alerts, sin contar prototipos ni
+> vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`, `master-rutina`,
+> `master-medico`, `dev-index`) ni las copias locales de `components/sui/`.
+
+### Lo que sí dice la guía del DS
+
+- **Para qué es**: aparece entre campos o pegado al elemento importante, para algo crítico. Su
+  ejemplo es el de la contraseña incorrecta al iniciar sesión. Coincide con «contexto → alert».
+- **Hermanos**: el banner es para avisos cruciales **arriba de la pantalla**; el toast, para
+  feedback **breve** que se puede apilar; la notification, para avisos **temporales en una
+  esquina** (un pago, una actualización); el hint, para ayuda **debajo de un campo**.
+- **Composición por tamaño**: `xsmall`/`small` = **una línea**: título y como mucho una acción a
+  la derecha, sin descripción. `large` = título + **descripción (idealmente dos líneas)** +
+  hasta **dos acciones** separadas por punto medio.
+- **Las acciones son links, no botones**: en todos sus ejemplos la acción es un link que toma el
+  color del texto del alert, y **solo la primera va subrayada**. En SUI eso es `actions[]` (que
+  dibuja `sui-link-button`), con `underline: true` en la primera.
+- **Defaults**: la guía arranca en relleno `filled` y tamaño `small`; SUI arranca en `lighter` y
+  `large`. Es un default, no una recomendación de uso.
+
+### `variantStyle` — el peso visual (lo que más se confunde)
+
+Hoy cada tipo de mensaje se reparte casi mitad y mitad: 59 `filled`, 54 `lighter`, 2 `stroke` y
+2 que cambian según el caso. No hay criterio, y la guía tampoco lo da. La regla sale
+de la jerarquía: `filled` es un bloque de color saturado con texto blanco y compite con el
+botón principal; `lighter` es un fondo pálido con texto oscuro y acompaña sin taparlo.
+
+| variantStyle | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `lighter` (default SUI) | El aviso **acompaña** al contenido: explica, da contexto, advierte sin frenar. También los errores de formulario que se corrigen ahí mismo. Es el caso normal. | `pages/orders/orders.html:281` («Recojo en tienda») · `pages/auth/login/login.html:31` (error de login) | canon (aprobado por el dueño, 03-10-2026) |
+| `filled` (default de la guía) | El aviso **es lo principal del momento** y hay que leerlo antes de actuar: la persona no puede seguir, va a hacer algo que no se deshace, o el resultado es final (cancelado, rechazado). Uno por pantalla como máximo. | `pages/mi-negocio/mi-negocio.html:1257` («Se eliminará permanentemente») · `pages/customer/order-tracking/order-tracking.html:194` («Pedido cancelado») | canon (aprobado por el dueño, 03-10-2026) |
+| `light` | No usar hoy: queda a medio camino entre los dos de arriba (0 usos). **Cuándo sí:** un aviso dentro de una superficie ya teñida (un banner de color) donde `lighter` se pierde. | — | canon (aprobado por el dueño, 03-10-2026) |
+| `stroke` | Solo sobre una **superficie flotante** o encima de un mapa o una foto, donde un fondo pálido no se lee. | (sin uso correcto hoy) | canon (aprobado por el dueño, 03-10-2026) |
+| `stroke-dark` | Igual que `stroke`, en oscuro. Default del toast. Extensión de SUI: la guía no lo tiene. | `sui-toast/sui-toast.service.ts:92` del DS | canon (aprobado por el dueño, 03-10-2026) |
+
+**Usos de hoy que rompen la regla:**
+
+- **24 `filled` que solo informan → `lighter`.** Los 22 `info filled` y los 5 `success filled`,
+  menos los 3 que sí frenan (`pages/promociones/promociones.html:107` «No disponible en tu plan»,
+  `pages/drivers/add-driver/add-driver.html:21`, `pages/super-admin/master-orders/master-orders.html:714`
+  «Ningún repartidor disponible»). Ejemplos: `pages/driver/driver-earnings/driver-earnings.html:18`
+  («Cobras por cada entrega»), `pages/driver/driver-wallet/driver-wallet.html:12`,
+  `pages/customer/store-browser/store-browser.html:576` («Tu local fue aprobado»).
+- **5 `warning filled` que no frenan nada → `lighter`:** `pages/super-admin/master-roles/master-roles.html:6`,
+  `pages/driver/driver-schedule/driver-schedule.html:12` y `:40`, `pages/customer/favorites/favorites.html:96`,
+  `pages/customer/order-tracking/order-tracking.html:314` («Esperando que el local confirme»).
+- **4 errores de carga en `lighter` → `filled`** (la pantalla queda vacía; el aviso es lo único
+  que hay): `pages/envios/envios.html:11`, `pages/super-admin/master-drivers/master-drivers.html:703`,
+  `pages/super-admin/master-roles/master-roles.html:79`, `pages/super-admin/master-approvals/master-approvals.html:17`.
+  El mismo caso ya está en `filled` en `pages/super-admin/master-orders/master-orders.html:347`.
+- **2 `stroke` inline sobre fondo blanco → `lighter`:** `pages/role-selector/role-selector.html:52`,
+  `pages/driver/driver-order-detail/driver-order-detail.html:379`.
+
+La pregunta para decidir es una: **¿este aviso tiene que ganarle al botón principal?** Si no, `lighter`.
+
+### `variant` — qué tipo de mensaje es
+
+La guía lista los cinco tipos pero no dice cuándo va cada uno.
+
+| variant | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `info` (default) | Un dato que conviene saber. No pide hacer nada. | `pages/orders/orders.html:281` | canon (aprobado por el dueño, 03-10-2026) |
+| `success` | Un resultado bueno que se queda (aprobado, verificado, enviado). Si es la confirmación de un clic, es toast. | `components/transfer-tenant-modal/transfer-tenant-modal.html:16` («Cuenta verificada») | canon (aprobado por el dueño, 03-10-2026) |
+| `warning` | Hay que atender algo o va a tener una consecuencia. | `pages/driver/driver-order-detail/driver-order-detail.html:899` («Se te cobran S/ 0.50») | canon (aprobado por el dueño, 03-10-2026) |
+| `error` | Algo falló o no se puede hacer. Su ejemplo de uso (contraseña incorrecta) es de este tipo. | `pages/auth/login/login.html:31` | canon (aprobado por el dueño, 03-10-2026) (el ejemplo sí es de la guía) |
+| `feature` | Novedad o función en prueba. Solo eso. El color sale del estado «feature» de la paleta. | `pages/customer/viaje/viaje.html:81` («Viajes está en prueba») | canon (aprobado por el dueño, 03-10-2026) |
+
+**Usos de hoy que rompen la regla:** 3 alerts `feature` muestran la **nota que dejó el
+cliente**, que no es una novedad: `pages/envios/envios.html:728`,
+`pages/driver/driver-order-detail/driver-order-detail.html:196`,
+`pages/customer/order-tracking/order-tracking.html:551`. Pasarían a `info`.
+
+### `size` y acciones
+
+| size | cuándo | fuente |
+|---|---|---|
+| `large` (default SUI) | Siempre que haya **descripción**: título + descripción de hasta dos líneas + hasta dos acciones. | según la guía del DS |
+| `small` / `xsmall` | Un aviso de **una línea**: título y como mucho una acción, sin descripción. `small` es el default de la guía. | según la guía del DS |
+| `xlarge` | Extensión de SUI (la guía no lo tiene). Sin uso hoy. | canon (aprobado por el dueño, 03-10-2026) |
+
+| acciones | regla | fuente |
+|---|---|---|
+| tipo | Links por `actions[]`, nunca un `sui-button` proyectado en el slot (ni `lighter` ni otro). | según la guía del DS · canon (dueño, 04-10-2026): resuelve la contradicción con el README de `sui-button` |
+| cuántas | Hasta dos, separadas por punto medio. | según la guía del DS |
+| subrayado | Solo la primera, con `underline: true`. | según la guía del DS |
+
+**Usos de hoy que rompen la guía:**
+
+- **3 alerts con descripción en `small` → `large`.** El componente hace lo que dice la guía
+  (en `small` no hay descripción), así que no es un bug del componente: es un error de uso, y la
+  descripción hoy **no se ve**. `pages/customer/checkout/checkout.html:417` (la descripción del
+  cupón), `pages/super-admin/master-settings/master-settings.html:644` y `:691`.
+- **5 alerts con un `sui-button` en el slot `action` → `actions[]`:** `pages/role-selector/role-selector.html:52`,
+  `pages/overview/overview.html:34`, `pages/mi-negocio/mi-negocio.html:378`,
+  `pages/customer/cart/cart.html:29`, `pages/customer/viaje/viaje.html:86` (este último es un
+  `filled primary` dentro del alert: el CTA de la pantalla no debería vivir ahí).
+- **2 acciones únicas sin subrayar → `underline: true`:** `pages/notifications/notifications.ts:200`
+  y `:201` (`accionActivar`, `accionReintentar`, usadas en `notifications.html:17` y `:23`).
+- Más de dos acciones: 0.
+
+## Tamaño en mobile y en web
+
+El alert no tiene un tamaño «de mobile»: el tamaño lo decide el contenido (guía del DS).
+Con descripción va `large` en las dos plataformas; de una línea, `small`. Lo que cambia
+en mobile es el ancho: ocupa toda la columna.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| aviso con descripción | `large` | `large` | guía del DS |
+| aviso de una línea en la página | `small` | `small` | guía del DS |
+| dentro de un campo o una card | `xsmall` | `xsmall` | guía del DS |
+| 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
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `actions` | — (solo por propiedad JS) | `SuiAlertAction[]` | `[]` |
+| `ariaRole` | `aria-role` | `"alert" \| "auto" \| "none" \| "status"` | `'auto'` |
+| `autoHideOnDismiss` | `auto-hide-on-dismiss` | `boolean` | `true` |
+| `closeLabel` | `close-label` | `string` | `'Cerrar'` |
+| `description` | `description` | `null \| string` | `null` |
+| `dismissible` | `dismissible` | `boolean` | `false` |
+| `heading` | `heading` | `null \| string` | `null` |
+| `showIcon` | `show-icon` | `boolean` | `true` |
+| `size` | `size` | `"large" \| "small" \| "xlarge" \| "xsmall"` | `'large'` |
+| `variant` | `variant` | `"error" \| "feature" \| "info" \| "success" \| "warning"` | `'info'` |
+| `variantStyle` | `variant-style` | `"filled" \| "light" \| "lighter" \| "stroke" \| "stroke-dark"` | `'lighter'` |
+
+| evento | `event.detail` |
+|---|---|
+| `closed` | `void` |
+
+Slots: `action`.
+
+### Diferencias con el SUI Angular
+
+- **Props de Angular que aquí no existen:** `title`
+- **Props solo de aquí:** `closeLabel`, `heading`
+<!-- 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 |
+|---|---|---|
+| `comun.cerrar` | Cerrar | — |
+<!-- textos:fin -->
+
+`description` se pinta con `innerHTML`: acepta HTML y no se escapa.
+
+Signal pública: `dismissed` (`signal(false)`).
+
+```ts
+interface SuiAlertAction {
+  label: string;
+  onClick?: () => void;
+  underline?: boolean;   // canon: solo la primera en true
+  href?: string;         // con href se dibuja <a>; sin href, <button>
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  color?: string;        // pisa el color automático
+}
+```
+
+Slot: `<slot name="action">` — legado; solo se usa si `actions` está vacío y en
+`large`/`xlarge`.
+
+## Trampas
+
+- **Los nombres están cruzados respecto al Figma de origen.** Allá «Style» es el relleno y
+  «Status» el tipo; aquí el relleno es `variantStyle` y el tipo es `variant`. Y en `sui-badge`,
+  `variant` es el **relleno**: misma palabra, otro eje.
+- La prop de relleno se llama `variantStyle` en alert, banner, compact-button y social-button;
+  `appearance` en status-badge; `tagStyle` en tag.
+- **Defaults distintos entre hermanos:** alert arranca en `lighter`, banner en `stroke`, toast en
+  `stroke-dark`. La guía del DS arranca el alert en `filled` y `small`; SUI, en `lighter` y `large`.
+- `small`/`xsmall` **descartan la descripción** sin avisar, y la acción pasa a dibujarse en la
+  misma línea, a la derecha. Es lo que define la guía del DS para esos tamaños: si hay
+  descripción, va `large`.
+- `description` va por `innerHTML`: no le pases texto escrito por el usuario sin sanear.
+- **El rol depende del tipo** (desde el 04-10-2026; antes `role="alert"` fijo en los 117 alerts):
+  `error` y `warning` se anuncian con `role="alert"` (interrumpe), `info`, `success` y `feature`
+  con `role="status"` (espera a que el lector termine). `ariaRole` lo fuerza (`alert`, `status`) o lo
+  quita (`none`, cuando el contenedor ya anuncia: así lo usa `sui-toast`).
+- Las acciones toman el **color del texto** del alert (blanco en `filled`, casi negro en el
+  resto), no el color del tipo. Para forzar otro, `color` en la acción.
+- `feature` es **morado** aquí y **gris** en `sui-banner` (decisión documentada en los dos `.ts`).
+- Con `autoHideOnDismiss` en `true` (default) el alert se oculta solo al tocar la X. Si el padre
+  necesita animar la salida antes de quitarlo, pásalo en `false` y escucha `closed`.
+- El slot de acción usa `slot=`; los de badge y button usan `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 variant-style="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
+<!-- Aviso que acompaña: lighter (default) -->
+<sui-alert
+  variant="warning"
+  title="Tu local todavía no está en el mapa"
+  description="Marca la ubicación en Mi negocio: sin ella no podemos calcular la distancia." />
+
+<!-- Aviso que frena: filled, con acción -->
+<sui-alert
+  variant="error"
+  variant-style="filled"
+  title="Se eliminará permanentemente"
+  description="Todos los productos, historial de pedidos y horarios."
+  actions={[{ label: 'Ver qué se borra', underline: true, onClick: verDetalle }]} />
+```

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

@@ -0,0 +1,204 @@
+---
+name: sui-app-store-badge
+selector: sui-app-store-badge
+resumen: El sello oficial de App Store o Google Play que lleva a descargar la app
+alternativas: [sui-link-button (link directo de descarga, «Descargar la app»), sui-social-button (entrar con una cuenta de Google o Apple)]
+---
+
+# sui-app-store-badge
+
+<!-- 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-app-store-badge`); 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: [Atoms/App Store Badge](https://sui-design-system.web.app/?path=/docs/atoms-app-store-badge--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** donde se invita a descargar la app: las landings (`/clientes`, `/empresas`,
+`/repartidores`), su footer y piezas de «Descarga la app». Siempre los dos juntos, App Store y
+Google Play, en ese orden.
+
+**No lo uses** para:
+
+- **Dentro de la app** (la persona ya la tiene instalada).
+- **Un link de descarga directa** sin tienda: `sui-link-button` `primary` con
+  `leftIcon="download-2-line"`, como hacen las landings debajo de los sellos.
+- **Entrar con una cuenta de Google o Apple**: `sui-social-button`.
+
+## 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 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
+> prototipos ni vitrinas. 5 `app-store` y 5 `google-play`; 8 `preferred`, 2 `alternative`. Todos
+> con `href`, `target="_blank"` y `ariaLabel`.
+
+### `company`
+
+| company | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `app-store` | Landings y «Descarga la app». Va primero. | `pages/public/landing-customers/landing-customers.html:26` | canon (aprobado por el dueño, 03-10-2026) |
+| `google-play` | Siempre al lado del de App Store. | `pages/public/landing-customers/landing-customers.html:32` | canon (aprobado por el dueño, 03-10-2026) |
+| `huawei-appgallery`, `galaxy-store` | No: la app no está publicada ahí. | — | no usar · canon (aprobado por el dueño, 03-10-2026) |
+| `mac-app-store`, `amazon-appstore`, `f-droid`, `microsoft-store` | No: la app no está publicada ahí. | — | no usar · canon (aprobado por el dueño, 03-10-2026) |
+
+### `appearance`
+
+| appearance | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `preferred` (default) | Lo normal: el sello negro, que es el oficial de cada tienda. | `pages/public/landing-driver/landing-driver.html:24` | canon (aprobado por el dueño, 03-10-2026) |
+| `alternative` | Solo sobre un fondo oscuro o de color, donde el negro se pierde o pesa. | `components/landing-footer/landing-footer.html:16` y `:19` (footer de las landings, sobre el naranja de marca) | no usar salvo ese caso · canon (aprobado por el dueño, 03-10-2026) |
+
+**Usos de hoy que rompen la regla: 0.** Los 2 `alternative` del footer de las landings están sobre
+`--sui-primary-base` (`components/landing-footer/landing-footer.scss:5`): caen justo en el «cuándo sí».
+
+### `height`, `href`, `target`, `ariaLabel`, `disabled`
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `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. | 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
+
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En web, con mouse,
+va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
+(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px):
+en los componentes con `size` va `size={bp.isMobile() ? 'large' : 'medium'}` (142 de los 166 `size`
+con `bp` medidos el 04-10-2026). **El sello no tiene `size`**: su alto va en px por `height`, ver abajo.
+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) | 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.tactil() ? 48 : 40} href="…" target="_blank"
+                     aria-label="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
+en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `appearance="alternative"` | el `preferred` es el oficial de cada tienda | landings o piezas sobre fondo oscuro o de color (ya es el caso del footer de las landings) |
+| otras tiendas (`huawei-appgallery`, `galaxy-store`, `mac-app-store`, `amazon-appstore`, `f-droid`, `microsoft-store`) | la app no está publicada ahí | si se publica en Huawei AppGallery (teléfonos Huawei sin Google) o Galaxy Store |
+| `disabled` | un sello deshabilitado no se entiende | no se ve un caso |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `appearance` | `appearance` | `"alternative" \| "preferred"` | `'preferred'` |
+| `ariaLabel` | `aria-label` | `null \| string` | `null` |
+| `company` | `company` | `"amazon-appstore" \| "app-store" \| "f-droid" \| "galaxy-store" \| "google-play" \| "huawei-appgallery" \| "mac-app-store" \| "microsoft-store"` | — (requerido) |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `height` | `height` | `number` | `40` |
+| `href` | `href` | `null \| string` | `null` |
+| `rel` | `rel` | `null \| string` | `'noopener'` |
+| `target` | `target` | `null \| string` | `null` |
+
+Eventos: ninguno.
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+## Trampas
+
+- **Los sellos están en inglés** («Download on the App Store», «Get it on Google Play»): son los
+  SVG oficiales y no se traducen. Lo que sí va en español es el `ariaLabel`.
+- **Sin `href` no hay link**: el componente pinta solo la imagen, sin foco ni clic.
+- **No tiene output**: es un link, no un botón. Para medir clics, escucha `click` en el host.
+- Los SVG se sirven desde `/assets/brand/store-badges/<company>-<appearance>.svg`: la app tiene que
+  tener esos archivos en sus assets (`master-pedidos` los tiene copiados en
+  `src/assets/brand/store-badges/`). Si falta uno, el sello sale como imagen rota.
+- `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"
+  aria-label="Descargar en App Store" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-app-store-badge company="app-store" appearance="alternative" height={bp.tactil() ? 44 : 40}
+  href="…" target="_blank" aria-label="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"
+  aria-label="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" aria-label="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" aria-label="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" aria-label="Descargar Master Pedidos en App Store" />
+```
+
+## Ejemplo
+
+```html
+<sui-app-store-badge company="app-store" height={bp.tactil() ? 44 : 40}
+  href="https://apps.apple.com/pe/app/master-pedidos/id6764676191" target="_blank"
+  aria-label="Descargar Master Pedidos en App Store" />
+<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"
+  aria-label="Descargar Master Pedidos en Google Play" />
+```