@ajuarezso/sui-design-system 0.24.1 → 0.25.1

package/docs/sui-icon/README.md

@@ -26,8 +26,8 @@ propios del DS (`info-custom-fill`, `heart-half-fill`…) también pasan por aqu
 
 > **La guía del DS no tiene página para el ícono**: usa RemixIcon en todos sus ejemplos, sin
 > reglas de tamaño. La escala de abajo sale de los tokens del DS (`--sui-icon-size-*` y
-> `--sui-icon-*` en `sui-tokens.scss`). Lo marcado «canon» ya es regla del proyecto; el resto es
-> **propuesta, falta aprobación**.
+> `--sui-icon-*` en `sui-tokens.scss`). Lo marcado «canon» ya es regla del proyecto; lo que sigue
+> en **propuesta** espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: 406 íconos en 95 archivos, sin contar
 > prototipos ni vitrinas. 331 `-line`, 43 `-fill`. Ninguno usa el input `color`.
@@ -36,14 +36,14 @@ propios del DS (`info-custom-fill`, `heart-half-fill`…) también pasan por aqu
 
 | valor | tamaño de hoy | cuándo | fuente |
 |---|---|---|---|
-| `12` | 5 | Dentro de un badge `small`. | propuesta (token `--sui-icon-size-xs`) |
-| `16` | 69 | Junto a texto chico: metadatos, botones `2xsmall`/`xsmall`, dentro de un kbd. | propuesta (token `--sui-icon-size-sm`) |
-| `20` (default) | 114 | El normal: botones, inputs, filas, navegación. | propuesta (token `--sui-icon-size-md`) |
-| `24` | 5 | Cabeceras y acciones sueltas. | propuesta (token `--sui-icon-size-lg`) |
-| `32` | 2 | Ícono protagonista. Si va dentro de un círculo, es `sui-key-icon`. | propuesta (token `--sui-icon-size-xl`) |
+| `12` | 5 | Dentro de un badge `small`. | canon (aprobado por el dueño, 05-10-2026, bloque B1), token `--sui-icon-size-xs` |
+| `16` | 69 | Junto a texto chico: metadatos, botones `2xsmall`/`xsmall`, dentro de un kbd. | canon (aprobado por el dueño, 05-10-2026, bloque B1), token `--sui-icon-size-sm` |
+| `20` (default) | 114 | El normal: botones, inputs, filas, navegación. | canon (aprobado por el dueño, 05-10-2026, bloque B1), token `--sui-icon-size-md` |
+| `24` | 5 | Cabeceras y acciones sueltas. | canon (aprobado por el dueño, 05-10-2026, bloque B1), token `--sui-icon-size-lg` |
+| `32` | 2 | Ícono protagonista. Si va dentro de un círculo, es `sui-key-icon`. | canon (aprobado por el dueño, 05-10-2026, bloque B1), token `--sui-icon-size-xl` |
 | `26` | 7 | Solo el ícono del hero de los onboarding (`ob__hero-icon`). | canon (`CLAUDE.md`, patrón de los pasos de onboarding) |
 | `14`, `18` | 149 | Fuera de la escala, pero el DS mismo los usa (tabs, product-card). **A discutir**: no migrar en masa. | propuesta |
-| `13`, `22`, `28`, `44`… | 49 | Sin regla: van al más cercano de la escala. | propuesta |
+| `13`, `22`, `28`, `44`… | 49 | Sin regla: van al más cercano de la escala. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 **Usos de hoy fuera de la escala sin regla: 49.** `22` (20 usos: `components/ota-quick-fab/ota-quick-fab.html:11`,
 `pages/schedule/schedule.html:10`), `13` (14: `pages/super-admin/master-drivers/master-drivers.html:359`, `:419`),
@@ -56,18 +56,18 @@ propios del DS (`info-custom-fill`, `heart-half-fill`…) también pasan por aqu
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `-line` | El normal. | propuesta |
-| `-fill` | El seleccionado (el tab activo) o un glifo chico sobre color. | propuesta |
-| propios del DS (`info-custom-fill`, `heart-half-fill`, `building-skyline`, `avatar-placeholder`) | Los usan componentes del DS; en la app no hacen falta. | propuesta |
+| `-line` | El normal. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `-fill` | El seleccionado (el tab activo) o un glifo chico sobre color. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| propios del DS (`info-custom-fill`, `heart-half-fill`, `building-skyline`, `avatar-placeholder`) | Los usan componentes del DS; en la app no hacen falta. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### `color`
 
 | valor | cuándo | fuente |
 |---|---|---|
-| sin `color` (default) | El normal: hereda el color del texto. Casi siempre es lo que se quiere. | propuesta |
-| `var(--sui-icon-sub-600)` | Ícono de apoyo junto a un texto principal. | propuesta |
-| `var(--sui-icon-soft-400)` | Decorativo, metadatos. | propuesta |
-| `var(--sui-icon-disabled-300)` | Deshabilitado. | propuesta |
+| sin `color` (default) | El normal: hereda el color del texto. Casi siempre es lo que se quiere. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `var(--sui-icon-sub-600)` | Ícono de apoyo junto a un texto principal. | canon (CANON-SUI §4.1: los íconos siguen la semántica del texto; sub-600 = secundario que igual se lee) |
+| `var(--sui-icon-soft-400)` | Decorativo, metadatos. | canon (CANON-SUI §4.1: soft-400 = lo que no es contenido, metadata terciaria) |
+| `var(--sui-icon-disabled-300)` | Deshabilitado. | canon (CANON-SUI §4.1: disabled-300 solo para disabled) |
 | `var(--sui-icon-white-0)` | Sobre fondo oscuro o de color. | propuesta |
 | un hex o un color de estado | No usar: si el ícono dice un estado, va en `sui-key-icon` `lighter`. | propuesta |
 
@@ -76,7 +76,10 @@ propios del DS (`info-custom-fill`, `heart-half-fill`…) también pasan por aqu
 En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. En las
 pantallas que se usan en los dos (panel del local, super admin) se elige con el servicio de
 breakpoints de la app (`bp`, en `services/breakpoints.service.ts`); en las que solo existen en
-el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propuesta**.
+el celular (cliente, repartidor) también se usa `bp`, porque el celular chico va con el valor de
+web. No se toca, así que la tablet va con el valor de web, y el celular chico (< 380 px) también (D16).
+Es **canon (dueño, 05-10-2026, P1 b)**: un paso más grande en el celular que en computadora, y
+se migra todo ahora, no solo al tocar cada pantalla.
 
 | uso | mobile | web |
 |---|---|---|
@@ -86,12 +89,36 @@ el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propue
 | dentro de un botón o un input | lo decide el componente | igual |
 
 ```html
-<sui-icon name="store-2-line" [size]="bp.isMobile() ? 20 : 16" />
+<sui-icon name="store-2-line" [size]="bp.celular() ? 20 : 16" />
 ```
 
 Un ícono suelto **nunca** es el área táctil: si se toca, va en `sui-compact-button` o
 `sui-button` `onlyIcon`, que dan los 44 px. Hoy solo 2 íconos cambian por breakpoint
-(`pages/discounts/discounts.html:103` y `:108`, con `bp.isTablet() ? 20 : 16`).
+(`pages/discounts/discounts.html:103` y `:108`, con `bp.isTablet() ? 20 : 16`), y los dos están
+mal: van dentro de un `sui-button`, que ya le da al ícono una caja de 20, así que no llevan
+`size`. Hasta 1024 px dibujan 20 y llenan la caja (no se nota); en una computadora de más de
+1024 px dibujan 16 y el glifo queda chico dentro de esa caja. Además `isTablet` no es un corte
+de D16 (ver «Bien y mal»).
+
+### Por dispositivo (D16)
+
+El ícono no se toca: sube un paso **solo en el celular de 380 px o más**. Fuente: D16, dueño
+05-10-2026 (P1 b).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | valor «web» (`16` en una fila, `24` protagonista) | no se toca: no sube aunque sea un celular |
+| celular (380–767) | valor «mobile» (`20` junto al texto de una fila, `32` protagonista) | un paso más que en la computadora |
+| tablet táctil (`pointer: coarse`) | valor «web» (`16` en una fila, `24` protagonista) | no se toca: el puntero no cambia nada |
+| computadora (`pointer: fine`) | valor «web» (`16` en una fila, `24` protagonista) | |
+
+En el ultrawide, igual que en la computadora: el espacio extra va a más columnas, no a íconos
+más grandes. Dentro de un botón o un input no se pasa `size`: lo decide el componente.
+
+En master-pedidos no hay helper: `[size]="bp.celular() ? 20 : 16"` (fila) o
+`[size]="bp.celular() ? 32 : 24"` (protagonista). No uses `bp.isMobile()` (incluye el celular
+chico) ni `bp.isTablet()` (incluye la tablet y la laptop de hasta 1024 px): los dos van con el
+valor de web.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -128,6 +155,47 @@ Outputs: ninguno.
   el paquete del DS no la trae.
 - Dentro de un `sui-kbd`, el kbd le fuerza el color `text-sub-600`.
 
+## Bien y mal
+
+Ícono de una acción en una tabla
+
+```html
+<!-- ❌ mal: el botón ya le da al ícono su caja de 20 y no hace falta size; en la computadora de más de 1024 px isTablet dibuja el glifo en 16 dentro de ella (pages/discounts/discounts.html:103) -->
+<sui-button variant="ghost" color="neutral" [size]="bp.sizeControl()" [onlyIcon]="true" aria-label="Editar">
+  <sui-icon data-slot="start" name="edit-2-line" [size]="bp.isTablet() ? 20 : 16" />
+</sui-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-button variant="ghost" color="neutral" [size]="bp.sizeControl()" [onlyIcon]="true"
+            leftIcon="edit-2-line" aria-label="Editar" />
+```
+
+Ícono protagonista
+
+```html
+<!-- ❌ mal: 28 está fuera de la escala y no cambia por dispositivo (pages/envios/envios.html:712) -->
+<sui-icon class="seg__buscando-icono" name="e-bike-2-line" [size]="28" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-icon class="seg__buscando-icono" name="e-bike-2-line" [size]="bp.celular() ? 32 : 24" />
+```
+
+Tamaño como texto
+
+```html
+<!-- ❌ mal: un string sin unidad no es un tamaño CSS válido; el ícono no toma tamaño (Trampas) -->
+<sui-icon name="time-line" size="20" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-icon name="time-line" [size]="20" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-image-upload/README.md

@@ -27,8 +27,9 @@ El archivo que entrega **no se sube tal cual**: pasa por `ImageCompressorService
 ## Qué variante usar
 
 > **La guía del DS no tiene página para este componente** (el «Image Upload» del Figma de origen
-> es otra cosa: la foto con botones, que en SUI es `sui-image-upload-profile`). Todo es
-> **propuesta, falta aprobación**.
+> es otra cosa: la foto con botones, que en SUI es `sui-image-upload-profile`). Las reglas
+> marcadas canon están aprobadas y las de «según el código» describen el componente; lo que sigue
+> en **propuesta** espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (sin prototipos ni vitrinas): **13 usos en
 > 10 pantallas**. `shape`: 11 `rect`, 2 `circle`. `size`: 7 `xl`, 3 `lg`, 3 sin size (fluidos).
@@ -38,16 +39,16 @@ El archivo que entrega **no se sube tal cual**: pasa por `ImageCompressorService
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `circle` (default) | **Solo la foto de una persona** (perfil del cliente, del repartidor, del usuario del local). Así se ve después en `sui-avatar`. | propuesta |
-| `rect` | **Todo lo demás**: el logo del local (en el home se ve como cuadrado redondeado), la portada, la foto del producto, comprobantes, QR, banners. | propuesta |
+| `circle` (default) | **Solo la foto de una persona** (perfil del cliente, del repartidor, del usuario del local). Así se ve después en `sui-avatar`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `rect` | **Todo lo demás**: el logo del local (en el home se ve como cuadrado redondeado), la portada, la foto del producto, comprobantes, QR, banners. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### `size` y `fluid` — según la forma de la imagen
 
 | valor | px | cuándo | fuente |
 |---|---|---|---|
-| `fluid` | ancho del contenedor, alto hasta 320 | **Capturas y documentos** (comprobante, Yape, QR) y **imágenes apaisadas** (portada 16:9, banner). Una captura de celular es vertical: en un cuadrado se recorta. | propuesta |
-| `xl` | 200 | **Imágenes cuadradas**: logo, foto del producto, foto de perfil. | propuesta |
-| `lg` (default) | 160 | Imagen cuadrada al lado de otra cosa en la misma fila (el logo junto al nombre del local en web). | propuesta |
+| `fluid` | ancho del contenedor, alto hasta 320 | **Capturas y documentos** (comprobante, Yape, QR) y **imágenes apaisadas** (portada 16:9, banner). Una captura de celular es vertical: en un cuadrado se recorta. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `xl` | 200 | **Imágenes cuadradas**: logo, foto del producto, foto de perfil. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `lg` (default) | 160 | Imagen cuadrada al lado de otra cosa en la misma fila (el logo junto al nombre del local en web). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | `md` | 120 | No usar: chico para ver si la foto quedó bien. | no usar |
 | `sm` | 80 | No usar: no entra el texto (el subtítulo se esconde). | no usar |
 
@@ -55,25 +56,25 @@ El archivo que entrega **no se sube tal cual**: pasa por `ImageCompressorService
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `true` | **Siempre.** Con imagen muestra dos botones a la vista: lápiz y tacho. El lápiz emite `editRequested`: si la pantalla tiene recortador, lo abre (`app-image-cropper`); si no, llama a `abrirSelector()` para elegir otra (como el Yape del repartidor). | propuesta |
+| `true` | **Siempre.** Con imagen muestra dos botones a la vista: lápiz y tacho. El lápiz emite `editRequested`: si la pantalla tiene recortador, lo abre (`app-image-cropper`); si no, llama a `abrirSelector()` para elegir otra (como el Yape del repartidor). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `false` (default) | No usar: con imagen, el lápiz aparece **solo al pasar el mouse** (en el celular no se ve) y el «Quitar» de abajo es un botón aparte (32 px). | no usar |
 
 ### Textos: `title`, `subtitle`
 
 | input | cuándo | fuente |
 |---|---|---|
-| `title` | Verbo + qué: «Subir logo», «Subir comprobante», «Subir captura del pago». | propuesta |
-| `subtitle` | Formatos y tamaño, **solo los que el componente acepta** (JPG, PNG, WebP, GIF o HEIC), o el encuadre que se va a aplicar («se recorta a 16:9»). Mientras procesa: «Procesando…». | propuesta |
+| `title` | Verbo en imperativo con tuteo + qué: «Sube tu logo», «Sube el comprobante», «Sube la captura del pago». Sin `title`: «Sube tu foto» (`circle`) o «Sube tu logo» (`rect`). | canon (dueño, 05-10-2026, P4 a); el default cambió en la 0.25.0 (antes «Subir foto» / «Subir logo») |
+| `subtitle` | Formatos y tamaño, **solo los que el componente acepta** (JPG, PNG, WebP, GIF o HEIC), o el encuadre que se va a aplicar («se recorta a 16:9»). Mientras procesa: «Procesando…». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 
 ### `maxSize`, `disabled`, `src`
 
 | input | cuándo | fuente |
 |---|---|---|
-| `maxSize` | Siempre, en **bytes**. 10 MB para capturas y comprobantes, 20–50 MB para fotos que se van a comprimir. | propuesta |
-| `disabled` | Mientras se comprime o se sube (`subiendo()`), para que no se elija otra encima. | propuesta |
-| `src` (model) | La URL guardada, o la vista previa local mientras se sube. Con `[(src)]` el componente la pone solo al elegir. | propuesta |
+| `maxSize` | Siempre, en **bytes**. 10 MB para capturas y comprobantes, 20–50 MB para fotos que se van a comprimir. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `disabled` | Mientras se comprime o se sube (`subiendo()`), para que no se elija otra encima. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `src` (model) | La URL guardada, o la vista previa local mientras se sube. Con `[(src)]` el componente la pone solo al elegir. | según el código |
 
-### Usos de hoy que rompen la propuesta
+### Usos de hoy que rompen la regla
 
 - **5 subtítulos prometen HEIC**: hasta el 03-10-2026 el componente lo rechazaba; desde la 0.22.0
   (la que usa la app) ya lo acepta, así que **ya no rompen nada**. Lo que queda es la vista previa en
@@ -99,8 +100,8 @@ El archivo que entrega **no se sube tal cual**: pasa por `ImageCompressorService
 En mobile se toca con el dedo: lo que se toca mide **44 px o más** (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono). El área vacía se
 toca entera (80 a 200 px), así que pasa. Los botones con imagen se **ven** de 40 (lápiz y tacho) y
 32 («Quitar»), pero en el teléfono (≤ 767 px) **se tocan en 44 de alto** con un `::before`
-invisible (04-10-2026). En pantallas de los dos se elige con el servicio de breakpoints de la app
-(`bp`, en `services/breakpoints.service.ts`).
+invisible (04-10-2026). Aquí `bp` no elige nada: `size` va por la forma de la imagen y lo que se
+toca ya tiene su área sola (ver «Por dispositivo (D16)»).
 
 **Por qué no hay un size nuevo**: aquí `size` (`sm`/`md`/`lg`/`xl`) es el tamaño de la **foto**, no
 el de los botones. Un `2xl` agrandaría la imagen sin que nadie lo pida; el área invisible lleva lo
@@ -108,14 +109,14 @@ que se toca a 44 sin cambiar el dibujo ni los sizes de hoy.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| comprobante, captura, QR, portada, banner | `fluid` | `fluid` (en una columna de ≤ 480 px) | propuesta |
-| logo, foto de producto, foto de perfil | `xl` (200) | `xl` (200), o `lg` (160) al lado del nombre | propuesta |
+| comprobante, captura, QR, portada, banner | `fluid` | `fluid` (en una columna de ≤ 480 px) | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| logo, foto de producto, foto de perfil | `xl` (200) | `xl` (200), o `lg` (160) al lado del nombre | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | lápiz y tacho (`editable`) | se ven de 40 (32 en `sm`), se tocan en 44 de alto; a los lados el área crece la mitad del espacio entre los dos (3; 2 en `sm`) para no pisarse | 40 px | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (área) · canon (aprobado por el dueño, 03-10-2026), extensión SUI (40) |
 | «Quitar» (sin `editable`) | se ve de 32 (`sui-button` `xsmall`), se toca en 44 de alto: crece 4 hacia la foto (la mitad del gap de 8) y 8 hacia abajo | 32 px | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (área) · canon (aprobado por el dueño, 03-10-2026) |
 
 ```html
-<sui-image-upload shape="rect" [size]="bp.isMobile() ? 'xl' : 'lg'" [editable]="true"
-                  [src]="logo()" [maxSize]="50 * 1024 * 1024" title="Subir logo"
+<sui-image-upload shape="rect" size="xl" [editable]="true"
+                  [src]="logo()" [maxSize]="50 * 1024 * 1024" title="Sube tu logo"
                   subtitle="JPG, PNG o WebP — máx 50 MB"
                   (imageSelected)="alElegirLogo($event)" (editRequested)="abrirRecortador()"
                   (removed)="quitarLogo()" />
@@ -126,6 +127,27 @@ de 40 y quedan en 32) y el «Quitar» es un `sui-button` `xsmall` de **32** (ant
 los dos botones van centrados abajo, dentro del círculo. Lo que haya justo debajo del «Quitar»
 pierde 8 px de toque en el teléfono: no pegarle otro control sin margen.
 
+### Por dispositivo (D16)
+
+D16 (dueño, 05-10-2026) no mueve `size`: aquí `size` es el tamaño de la **foto**, no el de lo que
+se toca, así que no sigue la escala «lo que se toca / lo que no se toca». Se elige por la forma de
+la imagen (`xl` para lo cuadrado, `fluid` para capturas y apaisadas) y por el layout, igual que en
+la tabla de arriba: `xl` en una columna, que es lo que hay en el celular, el celular chico y la
+tablet; `lg` solo cuando la foto comparte la fila con el nombre (hoy ninguna pantalla lo hace:
+los 3 `lg` medidos son el logo del onboarding y el banner y el comprobante de promociones, que
+además van `fluid`; ninguno está en una fila).
+Lo que decide entre `xl` y `lg` es si hay fila, no el dispositivo: cuando una pantalla arme esa
+fila según el ancho, la condición es el mismo corte del layout de la pantalla, no
+`bp.celular()` ni `bp.tactil()`.
+
+Lo que se toca (lápiz, tacho, «Quitar») ya llega a 44 de alto en el celular y en el celular chico
+con el área invisible (`@media (max-width: 767px)`). En la **tablet táctil** (`pointer: coarse`,
+más de 767 px) esa área no se prende y quedan en 40 y 32: **pendiente**, espera el mixin
+`sui-tactil` del DS que propone §0 de las decisiones (sin el sí del dueño todavía).
+
+En master-pedidos: no hay helper de D16; `size="xl"` para lo cuadrado y `[fluid]="true"` para
+capturas y apaisadas. `lg` solo en la fila del nombre, con la condición del layout de esa pantalla.
+
 ## «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
@@ -194,19 +216,65 @@ recortador; se llama con una referencia: `#qr` → `qr.abrirSelector()`).
 - El atributo `title` del host se borra solo (no sale el tooltip gris del navegador).
 - Ya trae el arreglo de iOS para el `:active` pegado.
 
+## Bien y mal
+
+Logo del local
+
+```html
+<!-- ❌ mal: el logo se ve cuadrado en el home, no en círculo; en 160 (lg) en una columna, donde va xl; y sin lápiz (pages/business-onboarding/step-info/step-info.html:42) -->
+<sui-image-upload shape="circle" size="lg" [(src)]="logoPreview" title="Subir logo"
+                  (imageSelected)="onLogoSelected($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-image-upload shape="rect" size="xl" [editable]="true" [(src)]="logoPreview" title="Sube tu logo"
+                  (imageSelected)="onLogoSelected($event)" (editRequested)="abrirRecortador()" />
+```
+
+Comprobante de pago
+
+```html
+<!-- ❌ mal: una captura vertical se recorta en el cuadrado de 200 y el «Quitar» queda en 32 (pages/central/central-gastos/central-gastos.html:118) -->
+<sui-image-upload shape="rect" size="xl" [src]="vistaComprobante()" [maxSize]="10 * 1024 * 1024"
+  title="Subir comprobante" (imageSelected)="onComprobante($event)" (removed)="quitarComprobante()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-image-upload #comprobante shape="rect" [fluid]="true" [editable]="true" [src]="vistaComprobante()"
+  [maxSize]="10 * 1024 * 1024" title="Sube el comprobante" (imageSelected)="onComprobante($event)"
+  (editRequested)="comprobante.abrirSelector()" (removed)="quitarComprobante()" />
+```
+
+Banner apaisado
+
+```html
+<!-- ❌ mal: con fluid, size no hace nada; y sin editable (pages/promociones/promociones.html:186) -->
+<sui-image-upload shape="rect" size="lg" [fluid]="true" [src]="campaignBannerPreview()"
+                  title="Subir banner" (imageSelected)="onBannerImage($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-image-upload #banner shape="rect" [fluid]="true" [editable]="true" [src]="campaignBannerPreview()"
+                  title="Sube el banner" (imageSelected)="onBannerImage($event)"
+                  (editRequested)="banner.abrirSelector()" (removed)="onBannerRemoved()" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- Comprobante: ancho completo, el lápiz elige otra captura -->
 <sui-image-upload #comprobante shape="rect" [fluid]="true" [editable]="true"
                   [src]="vistaPrevia()" [maxSize]="10 * 1024 * 1024"
-                  title="Subir comprobante" subtitle="Captura del Yape o del banco — máx 10 MB"
+                  title="Sube el comprobante" subtitle="Captura del Yape o del banco — máx 10 MB"
                   (imageSelected)="alElegir($event)" (editRequested)="comprobante.abrirSelector()"
                   (removed)="quitar()" />
 
 <!-- Foto del producto: cuadrada, el lápiz abre el recortador -->
 <sui-image-upload shape="rect" size="xl" [editable]="true" [src]="foto()"
-                  title="Subir foto" subtitle="JPG, PNG o WebP — se comprime sola"
+                  title="Sube tu foto" subtitle="JPG, PNG o WebP — se comprime sola"
                   (imageSelected)="alElegir($event)" (editRequested)="abrirRecortador()"
                   (removed)="quitarFoto()" />
 ```

package/docs/sui-image-upload-profile/README.md

@@ -27,7 +27,8 @@ chico (56–64 px) con su texto y los botones al lado, en una fila de un formula
 ## Qué variante usar
 
 > **La guía del DS no tiene página para este componente** (existe en el Figma de origen, sin
-> texto de uso). Todo es **propuesta, falta aprobación**.
+> texto de uso). Las reglas marcadas canon están aprobadas y las de «según el código» describen
+> el componente; lo que sigue en **propuesta** espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. La foto de perfil va con
 > `app-avatar-editor` (3 pantallas).
@@ -36,27 +37,27 @@ chico (56–64 px) con su texto y los botones al lado, en una fila de un formula
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `avatar` (default) | La foto de una persona. Vacío muestra una silueta. | propuesta |
-| `company` | Un negocio. Vacío muestra edificios. Ojo: lo muestra en círculo. | propuesta |
+| `avatar` (default) | La foto de una persona. Vacío muestra una silueta. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `company` | Un negocio. Vacío muestra edificios. Ojo: lo muestra en círculo. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### `alignment`
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `vertical` (default) | Con texto: título y requisitos («Mín. 400 × 400 px, PNG o JPEG»), avatar de 64. | propuesta |
-| `horizontal` | Sin texto, solo los botones al lado del avatar de 56. Cuando el label ya está arriba (`sui-form-label`). | propuesta |
+| `vertical` (default) | Con texto: título y requisitos («Mín. 400 × 400 px, PNG o JPEG»), avatar de 64. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `horizontal` | Sin texto, solo los botones al lado del avatar de 56. Cuando el label ya está arriba (`sui-form-label`). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### Textos y estados
 
 | input | cuándo | fuente |
 |---|---|---|
-| `title` | Qué es: «Tu foto», «Foto de perfil». Solo se ve en `vertical`. | propuesta |
-| `subtitle` | Requisitos reales: formatos que se aceptan y para qué se usa («La ve el cliente cuando llevas su pedido»). | propuesta |
+| `title` | Qué es: «Tu foto», «Foto de perfil». Solo se ve en `vertical`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `subtitle` | Requisitos reales: formatos que se aceptan y para qué se usa («La ve el cliente cuando llevas su pedido»). | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 | `labels` | Ya vienen en español con tuteo (Subir, Eliminar, Cambiar). Cambiarlos solo si el contexto pide otro verbo («Quitar»). | propuesta |
-| `imageUrl` | La URL guardada. Con imagen muestra Eliminar + Cambiar. | propuesta |
-| `companyLogoSrc` | Solo con `type="company"`: el logo, que gana sobre `imageUrl`. | propuesta |
-| `loading` | **Siempre** mientras se comprime y se sube: deshabilita los botones y atenúa la foto. | propuesta |
-| `disabled` | La persona no puede cambiarla (cuenta verificada con foto bloqueada). | propuesta |
+| `imageUrl` | La URL guardada. Con imagen muestra Eliminar + Cambiar. | según el código |
+| `companyLogoSrc` | Solo con `type="company"`: el logo, que gana sobre `imageUrl`. | según el código |
+| `loading` | **Siempre** mientras se comprime y se sube: deshabilita los botones y atenúa la foto. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `disabled` | La persona no puede cambiarla (cuenta verificada con foto bloqueada). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 Usos de hoy que rompen la regla: **0**.
 
@@ -80,6 +81,22 @@ Usos de hoy que rompen la regla: **0**.
 **Sin tamaño suficiente para mobile.** Hace falta en el DS un `size` que lleve los botones a
 `large` (48 px). Mientras tanto, en el celular va `sui-image-upload` `circle` `xl`.
 
+### Por dispositivo (D16)
+
+No aplica: **no tiene `size`** y nada cambia por dispositivo (avatar de 64/56 y botones `xsmall`
+de 32 fijos). Con D16 (dueño, 05-10-2026) lo que se toca va `large` en el celular y en la tablet
+táctil, y esos botones no llegan a 44, así que en una pantalla táctil no se usa:
+
+| dispositivo | qué va | ¿llega a 44? |
+|---|---|---|
+| celular y celular chico (≤ 767) | `sui-image-upload` `circle` `xl` con `[editable]="true"` | sí: su lápiz y su tacho se tocan en 44 con el área invisible |
+| tablet táctil (`pointer: coarse`, > 767) | `sui-image-upload` `circle` `xl` con `[editable]="true"` (40 contra 32, el que más se acerca) | **no, pendiente**: el área de 44 de `sui-image-upload` se prende solo hasta 767 px y en la tablet quedan en 40; espera el mixin `sui-tactil` del DS (§0 de las decisiones, sin el sí del dueño todavía) |
+| computadora y ultrawide | este componente, botones de 32 | no hace falta 44; se queda en 32 porque solo tiene ese tamaño de botón. Subirlo a `medium` es código del DS (un `size`), **pendiente** |
+
+En master-pedidos: no lleva `[size]`; si la pantalla se usa en un dispositivo táctil,
+`@if (!bp.tactil())` para este componente y `sui-image-upload` en el otro caso (con la tablet
+todavía en 40, ver la tabla).
+
 ## «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
@@ -136,6 +153,48 @@ interface SuiImageUploadProfileLabels { upload?: string; remove?: string; change
 - El atributo `title` del host se borra solo (no sale el tooltip gris del navegador); el `title`
   sí se usa como `alt` de la foto.
 
+## Bien y mal
+
+Logo del local
+
+```html
+<!-- ❌ mal: company lo muestra en círculo y el logo se ve cuadrado en el home (vitrina: pages/super-admin/master-preview/_guia-moleculas/fechas.ts:233) -->
+<sui-image-upload-profile type="company" title="Logo del local" subtitle="JPG o PNG, cuadrado" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-image-upload shape="rect" size="xl" [editable]="true" [src]="logo()" title="Sube tu logo"
+                  (imageSelected)="alElegirLogo($event)" (editRequested)="abrirRecortador()" />
+```
+
+Subir la foto
+
+```html
+<!-- ❌ mal: no tiene input de archivo; «Subir» y «Cambiar» solo emiten y no abren nada (Trampas) -->
+<sui-image-upload-profile title="Foto de perfil" [imageUrl]="foto()" (upload)="subir()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-image-upload-profile title="Foto de perfil" [imageUrl]="foto()" [loading]="subiendo()"
+                          (upload)="input.click()" (change)="input.click()" (remove)="quitar()" />
+<input #input type="file" accept="image/jpeg,image/png,image/webp" hidden (change)="alElegir($event)" />
+```
+
+Foto de perfil en el celular
+
+```html
+<!-- ❌ mal: los botones miden 32 y en una pantalla táctil no llegan a 44 (D16) -->
+<sui-image-upload-profile title="Tu foto" [imageUrl]="foto()" (upload)="input.click()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-image-upload shape="circle" size="xl" [editable]="true" [src]="foto()" title="Sube tu foto"
+                  (imageSelected)="alElegir($event)" (editRequested)="abrirRecortador()" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-img-retry/README.md

@@ -45,13 +45,19 @@ No tiene variantes ni inputs. Lo que hace:
 
 | dónde | regla | fuente |
 |---|---|---|
-| imágenes del Storage en el home y los listados del cliente | siempre con la directiva | propuesta (es donde está hoy, y donde se vio el bug del 10-07-2026: portadas grises tras un corte) |
+| imágenes del Storage en el home y los listados del cliente | siempre con la directiva | canon (aprobado por el dueño, 05-10-2026, bloque B9) — es donde está hoy, y donde se vio el bug del 10-07-2026: portadas grises tras un corte |
 | el resto de `<img>` remotos | sumarla cuando la imagen sea parte de la decisión (la foto del producto en la carta) | propuesta |
 
 ## Tamaño en mobile y en web
 
 No aplica: es una directiva, no dibuja nada. El tamaño es el del `<img>`.
 
+### Por dispositivo (D16)
+
+No aplica: no tiene `size` ni escala que repartir por dispositivo (D16, dueño 05-10-2026). El
+`<img>` mide lo que diga el CSS de la pantalla o el componente que lo contiene (`sui-avatar` con
+`bp.sizeAvatar()`, la tarjeta del local), y la directiva se pone igual en todos los dispositivos.
+
 ## API
 
 <!-- api:inicio -->
@@ -89,6 +95,49 @@ Solo se aplica a `<img>` (`selector: img[suiImgRetry]`). El `src` se pone como s
 - **No borra el cache completo** a propósito: solo la entrada de esa URL. Borrarlo todo mataría
   la ventaja de no volver a bajar nada.
 - Funciona igual con `loading="lazy"` y `decoding="async"`.
+- **Con `srcset` no**: el reintento y el `fetch` van sobre `img.src`, no sobre la candidata que el
+  navegador eligió (`currentSrc`), así que purgaría la URL equivocada. Va un `src` único (en el home,
+  la portada chica de 800 px; ver `master-pedidos/src/app/core/services/state.service.ts:45`).
+
+## Bien y mal
+
+Logo en las sugerencias de búsqueda
+
+```html
+<!-- ❌ mal: listado del cliente sin la directiva; tras un corte el logo queda roto (pages/customer/favorites/favorites.html:32; la misma sugerencia del home sí la lleva) -->
+<img class="favorites__suggestion-img" [src]="s.logoUrl" [alt]="s.name" loading="lazy" />
+```
+
+```html
+<!-- ✅ bien (con las reglas de sui-img-loaded y data-sui-img-dead en el scss) -->
+<img class="favorites__suggestion-img" suiImgRetry [src]="s.logoUrl" [alt]="s.name"
+     loading="lazy" decoding="async" />
+```
+
+Logo del local con inicial de respaldo
+
+```html
+<!-- ❌ mal: el (error) a mano esconde la imagen al primer fallo, sin reintento ni inicial (pages/customer/order-history/order-history.html:168) -->
+<img [src]="logo" [alt]="order.tenantName ?? 'Local'" (error)="$any($event).target.style.display='none'" />
+```
+
+```html
+<!-- ✅ bien: logo con iniciales de respaldo → sui-avatar, no la directiva -->
+<sui-avatar [size]="bp.sizeAvatar('md')" [src]="logo" [initials]="storeInitial(order)"
+            [alt]="order.tenantName ?? 'Local'" />
+```
+
+Portada con varias resoluciones
+
+```html
+<!-- ❌ mal: la directiva reintenta sobre img.src; con srcset purga la candidata equivocada (lo documenta pages/customer/store-browser/store-browser.html:332) -->
+<img class="fila__img" suiImgRetry [src]="store.coverThumbUrl" [srcset]="portadaSrcset(store)" [alt]="store.name" />
+```
+
+```html
+<!-- ✅ bien: src único, del tamaño que pide la tarjeta -->
+<img class="fila__img" suiImgRetry [src]="store.coverThumbUrl" [alt]="store.name" decoding="async" />
+```
 
 ## Ejemplo