@ajuarezso/sui-design-system 0.21.0 → 0.23.0

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

@@ -63,7 +63,7 @@ El archivo que entrega **no se sube tal cual**: pasa por `ImageCompressorService
 | 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 o WebP), o el encuadre que se va a aplicar («se recorta a 16:9»). Mientras procesa: «Procesando…». | 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 |
 
 ### `maxSize`, `disabled`, `src`
 
@@ -75,19 +75,20 @@ El archivo que entrega **no se sube tal cual**: pasa por `ImageCompressorService
 
 ### Usos de hoy que rompen la propuesta
 
-- **5 subtítulos prometen HEIC**: hasta el 03-10-2026 el componente lo rechazaba; con la versión
-  nueva del DS ya pasa (ver Trampas por la vista previa en Chrome):
-  `components/plan-change-modal/plan-change-modal.html:150`, `pages/driver/driver-wallet/driver-wallet.html:243`,
-  `pages/promociones/promociones.html:185` y `:269`, `pages/customer/order-tracking/order-tracking.html:985`.
+- **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
+  blanco en Chrome hasta que la pantalla ponga el JPG comprimido (ver Trampas):
+  `components/plan-change-modal/plan-change-modal.html:157`, `pages/driver/driver-wallet/driver-wallet.html:252`,
+  `pages/promociones/promociones.html:194` y `:279`, `pages/customer/order-tracking/order-tracking.html:985`.
 - **1 logo en círculo** → `rect`: `pages/business-onboarding/step-info/step-info.html:42` (en
-  `mi-negocio.html:518` el mismo logo es `rect`, y en el home del cliente se ve cuadrado).
+  `mi-negocio.html:520` el mismo logo es `rect`, y en el home del cliente se ve cuadrado).
 - **3 imágenes en cuadrado que deberían ir `fluid`**: comprobantes en
   `components/plan-change-modal/plan-change-modal.html:150` y `pages/central/central-gastos/central-gastos.html:118`;
-  la portada 16:9 en `pages/mi-negocio/mi-negocio.html:572` (en el onboarding ya va `fluid`).
+  la portada 16:9 en `pages/mi-negocio/mi-negocio.html:574` (en el onboarding ya va `fluid`).
 - **8 sin `editable`**: `components/avatar-editor/avatar-editor.ts:33` (pone `false` aunque tiene
-  recortador), `pages/customer/order-tracking/order-tracking.html:985` (cliente, solo celular),
+  recortador), `pages/customer/order-tracking/order-tracking.html:978` (cliente, solo celular),
   `components/plan-change-modal/plan-change-modal.html:150`, `pages/central/central-gastos/central-gastos.html:118`,
-  `pages/promociones/promociones.html:185` y `:269`, y `pages/business-onboarding/step-info/step-info.html:42` y `:56`.
+  `pages/promociones/promociones.html:186` y `:271`, y `pages/business-onboarding/step-info/step-info.html:42` y `:56`.
 - **2 áreas de subida armadas a mano** que van con este componente (`rect`, `fluid`, `editable`):
   `components/renewal-modal/renewal-modal.html:64` (comprobante, con SVG propio) y
   `pages/products/add-product/add-product.html:223` (foto del producto, con dropzone propia).
@@ -95,16 +96,22 @@ El archivo que entrega **no se sube tal cual**: pasa por `ImageCompressorService
 
 ## Tamaño en mobile y en web
 
-En mobile se toca con el dedo: lo que se toca mide **44 px o más**. El área vacía se toca entera
-(80 a 200 px), así que pasa; los botones con imagen, no. En pantallas de los dos se elige con el
-servicio de breakpoints de la app (`bp`, en `services/breakpoints.service.ts`).
+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`).
+
+**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
+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 |
-| lápiz y tacho (`editable`) | 40 px (32 en `sm`) | 40 px | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
-| «Quitar» (sin `editable`) | 32 px (`sui-button` `xsmall`) | 32 px | canon (aprobado por el dueño, 03-10-2026) |
+| 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"
@@ -116,7 +123,8 @@ servicio de breakpoints de la app (`bp`, en `services/breakpoints.service.ts`).
 
 Desde el 03-10-2026 el lápiz y el tacho miden **40** (antes 34; en `sm`, de 80 de lado, no entran dos
 de 40 y quedan en 32) y el «Quitar» es un `sui-button` `xsmall` de **32** (antes 28). En `circle`
-los dos botones van centrados abajo, dentro del círculo.
+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.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -169,7 +177,7 @@ recortador; se llama con una referencia: `#qr` → `qr.abrirSelector()`).
   (antes en voseo).
 - **El default de `shape` es `circle`** y el de `size` es `lg`: para un logo o un comprobante hay
   que pasar los dos.
-- **Con `fluid`, `size` no hace nada** (`promociones.html:185` pasa `size="lg"` y `fluid` a la vez).
+- **Con `fluid`, `size` no hace nada** (`promociones.html:186` pasa `size="lg"` y `fluid` a la vez).
 - **`removed` ya vacía `src`** por dentro; quien lo usa solo limpia su `File` y su estado.
 - **Al elegir, pone la vista previa sola** (`src` = data URL) y emite el `File` original, sin
   comprimir ni recortar. Comprimir y recortar es trabajo de la pantalla.
@@ -178,6 +186,10 @@ recortador; se llama con una referencia: `#qr` → `qr.abrirSelector()`).
 - Con `circle` + `editable` los botones van centrados abajo, sobre la foto (antes, en la esquina, el
   círculo recortaba el tacho).
 - Con `src` puesto, tocar el área vacía no hace nada: para elegir otra va el lápiz o `abrirSelector()`.
+- **Teclado (04-10-2026):** vacío, el host es el botón (`role="button"`, Enter/Espacio abren el
+  selector). Con imagen deja de serlo, porque adentro hay botones: sin `editable` la foto entera es
+  un `<button>` «Cambiar imagen» (antes un `div` que solo respondía al mouse) y «Quitar» va aparte;
+  con `editable`, el lápiz y el tacho.
 - El `alt` de la vista previa dice «Vista previa».
 - 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.

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

@@ -0,0 +1,107 @@
+---
+name: sui-img-retry
+selector: img[suiImgRetry]
+resumen: Directiva que reintenta cargar un <img> cuando falla la red y marca cuándo cargó o se dio por perdido
+alternativas: [sui-avatar (foto de persona o logo con iniciales de respaldo), sui-image-upload (subir una imagen)]
+---
+
+# sui-img-retry
+
+Story: [Utilities/Img Retry](https://sui-design-system.web.app/?path=/docs/utilities-img-retry--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** en los `<img>` de contenido remoto que **tienen que verse** aunque la red falle un
+segundo: portadas y logos de locales, banners, fotos de productos. Un `<img>` normal que falla
+queda roto hasta que se vuelve a crear; con la directiva se reintenta solo, como en una app
+nativa.
+
+**No lo uses** para:
+
+- Íconos o imágenes locales del bundle (`/assets/…`): no fallan por red.
+- Una foto de persona con respaldo de iniciales: `sui-avatar` ya resuelve el caso sin foto.
+- Reemplazar el cache: el cache en disco lo dan los headers del Storage
+  (`cache-control: public, max-age=31536000, immutable`). La directiva solo cubre las cargas
+  que **fallaron**.
+
+## Qué variante usar
+
+> **No está en la guía del DS: es una utilidad de SUI**, sin Figma ni variantes.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 20 `<img>` con la directiva (15 en
+> `pages/customer/store-browser/store-browser.html`, 3 en `category-browser`, 1 en `promos`, 1 en
+> `components/sedes`) de 124 `<img>` en total. En el DS la usa `sui-store-card`.
+
+No tiene variantes ni inputs. Lo que hace:
+
+| momento | qué pasa | fuente |
+|---|---|---|
+| falla la carga | reintenta a 1 s, 3 s y 8 s (tres intentos) | componente |
+| desde el segundo reintento | antes de reintentar, vuelve a bajar la imagen con `fetch(…, { cache: 'reload' })` para pisar una copia rota que haya quedado en el cache | componente |
+| vuelve la red (`online`) | si la imagen no está cargada, reintenta de inmediato y reinicia el contador | componente |
+| carga bien | agrega la clase `sui-img-loaded` y quita `data-sui-img-dead` | componente |
+| se agotan los reintentos | pone el atributo `data-sui-img-dead` | componente |
+| cambia el `src` | el contador arranca de cero para la URL nueva | componente |
+
+| 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) |
+| 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>`.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+Inputs: ninguno.
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+Solo se aplica a `<img>` (`selector: img[suiImgRetry]`). El `src` se pone como siempre
+(`[src]="url"`). Lo que expone hacia el CSS:
+
+| marca | cuándo |
+|---|---|
+| clase `sui-img-loaded` | la imagen cargó |
+| atributo `data-sui-img-dead` | se rindió tras tres reintentos |
+
+## Trampas
+
+- **Sin CSS tuyo no se nota nada de lo de arriba.** Para el fundido y el respaldo, la pantalla
+  pone las reglas (así lo hacen `store-browser.scss` y `promos.scss`):
+
+  ```scss
+  img { opacity: 0; transition: opacity 0.25s ease-out; }
+  img.sui-img-loaded { opacity: 1; }
+  img[data-sui-img-dead] { display: none; } /* o mostrar un placeholder detrás */
+  ```
+
+  Sin la regla de `data-sui-img-dead`, la imagen perdida muestra el ícono roto del navegador.
+- **Con `opacity: 0` y sin la directiva, la imagen nunca aparece.** Si copias el CSS, copia
+  también `suiImgRetry`.
+- **El `fetch` del reintento necesita CORS** en el servidor de la imagen (el bucket de Storage ya
+  lo tiene). Contra otro dominio sin CORS ese paso falla en silencio y queda el reintento común.
+- **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"`.
+
+## Ejemplo
+
+```html
+<img class="tarjeta__img" suiImgRetry [src]="local.coverUrl" [alt]="local.name"
+     loading="lazy" decoding="async" />
+```
+
+```scss
+.tarjeta__img {
+  opacity: 0;
+  transition: opacity 0.25s ease-out;
+  &.sui-img-loaded { opacity: 1; }
+  &[data-sui-img-dead] { display: none; }
+}
+```

package/docs/sui-inline-input/README.md

@@ -31,14 +31,14 @@ Regla corta: **un dato, en su lugar, que se corrige rápido → inline · varios
 > Todo lo de abajo es **propuesta, falta aprobación**.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. Hay listas con campos siempre
-> abiertos que se parecen (`pages/super-admin/master-settings/master-settings.html:99`, nombre de
+> abiertos que se parecen (`pages/super-admin/master-settings/master-settings.html:101`, nombre de
 > cada categoría del home), pero ahí se editan varias filas y se guarda todo junto: está bien con
 > `sui-input`.
 
 | prop / evento | cuándo | fuente |
 |---|---|---|
 | `value` | El dato. `[(value)]` o `formControlName`, nunca los dos. | API |
-| `placeholder` | Lo que se ve si está vacío: «Sin nombre». **Siempre**: el default es «Placeholder text...». | propuesta, falta aprobación |
+| `placeholder` | Lo que se ve si está vacío: «Sin nombre». **Siempre**: el default genérico es «Escribe aquí…» (en español desde el 04-10-2026). | propuesta, falta aprobación |
 | `leftIcon` | Un ícono que dice qué dato es (`price-tag-3-line` para una categoría). `false` si el texto se explica solo. El default es `user-3-line`. | propuesta, falta aprobación |
 | `editLabel` | Nombre accesible del lápiz: «Editar nombre». | propuesta, falta aprobación |
 | `error` | El valor escrito no sirve (vacío, repetido). Solo se ve en edición; no trae mensaje. | propuesta, falta aprobación |
@@ -48,14 +48,15 @@ Regla corta: **un dato, en su lugar, que se corrige rápido → inline · varios
 
 ## Tamaño en mobile y en web
 
-**No tiene `size`**: mide 36 px de alto y sus botones (lápiz, ✓, ✕) son de 24 × 24. El texto ya
-sube a 16 px en mobile (sin zoom de iOS). **No tiene tamaño suficiente para mobile**: los botones
+**No tiene `size`**: mide 38 px de alto (8 + 20 + 8 de padding y línea, más 1 + 1 de borde) y sus
+botones (lápiz, ✓, ✕) son de 24 × 24 (ícono de 20 + 2 de padding). En edición el texto sube a 16 px
+en mobile (sin zoom de iOS). **No tiene tamaño suficiente para mobile**: los botones
 de 24 px quedan lejos de los 44 que pide un dedo. Usarlo en el panel web; en el teléfono, editar
 con un `sui-input` `large`.
 
 | uso | mobile | web |
 |---|---|---|
-| renombrar en una lista | `sui-input` `large` en un modal | este, 36 px |
+| renombrar en una lista | `sui-input` `large` en un modal | este, 38 px |
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -72,7 +73,7 @@ con un `sui-input` `large`.
 | input | tipo | default |
 |---|---|---|
 | `value` · model, `[(value)]` | `string` | `''` |
-| `placeholder` | `string` | `'Placeholder text...'` |
+| `placeholder` | `string` | `'Escribe aquí…'` |
 | `leftIcon` | `string \| false` | `'user-3-line'` |
 | `error` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |

package/docs/sui-inline-select/README.md

@@ -33,7 +33,7 @@ Regla corta: **dentro de una frase o al final de un campo → inline · campo
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `type="icon"` (default) | Con un ícono delante (atenuado hasta que se elige). | según la guía del DS |
+| `type="icon"` (default) | Con un ícono delante. Texto e ícono van atenuados (`text-sub-600`) salvo en hover, con foco o con el menú abierto. | según la guía del DS |
 | `type="country"` + `flag` | No usar hoy: todo es Perú. | según la guía del DS (ejemplo «Country») |
 | `items` | `{ value, label, sublabel?, icon?, flag?, disabled? }`. | API |
 | `selected` / `selectedChange` | La opción elegida. O `formControlName`, nunca los dos. | API |
@@ -48,10 +48,13 @@ es la palabra, muy por debajo de los 44 px. **No tiene tamaño suficiente para m
 teléfono, solo dentro de un `sui-input` (que da el alto) o con la frase en una fila que se toque
 entera.
 
-| uso | mobile | web |
-|---|---|---|
-| dentro de una frase | evitar: usar `sui-select` | 20 px, en línea con el texto |
-| al final de un `sui-input` | el alto lo da el input (`large`) | el alto lo da el input (`medium`) |
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| dentro de una frase | evitar: usar `sui-select` | 20 px, en línea con el texto | propuesta, falta aprobación |
+| al final de un `sui-input` | el alto lo da el input (`large`) | el alto lo da el input (`medium`) | propuesta, falta aprobación |
+
+Las opciones del menú miden **36 px también en mobile**: a diferencia de `sui-select` y de los
+compactos, este no tiene la regla de 44 en ≤ 767 px (`sui-inline-select.scss` no la trae).
 
 ## «No usar»: por qué no hoy y cuándo sí
 

package/docs/sui-input/README.md

@@ -35,11 +35,11 @@ Regla corta: **una línea → input · varias → textarea · de una lista → s
 > fecha y contador) sin do/don't. Lo marcado «según la guía del DS» sale de esos ejemplos; el
 > resto es **propuesta, falta aprobación**, salvo lo que ya es canon (CLAUDE.md, CANON-SUI).
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
-> `master-ejercicios`): **194 usos en 61 archivos**. Tipos: 53 `text`, 36 sin `type` (`text`),
-> 32 `amount`, 22 `number`, 18 `tel`, 10 `email`, 10 `search`, 7 `date`, 3 `password`, 2 `url`,
-> 1 `datetime-local`. Tamaños: 163 sin `size` (`medium`), 18 `large`, 3 `xlarge`, 3 `medium`,
-> 2 `small`, 5 dinámicos.
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
+> `master-ejercicios`): **195 usos en 61 archivos**. Tipos: 42 `text`, 36 sin `type` (`text`),
+> 34 `amount`, 21 `search`, 21 `number`, 18 `tel`, 10 `email`, 7 `date`, 3 `password-toggle`,
+> 2 `url`, 1 `datetime-local`. Tamaños: 88 `bp.isMobile() ? 'large' : 'medium'`, 77 sin `size`
+> (`medium`), 18 `large`, 3 `xlarge`, 3 `medium`, 1 `small`, 3 `bp.controlSize()`, 2 otros dinámicos.
 
 ### `type` — qué dato es
 
@@ -61,20 +61,9 @@ El `type` decide el teclado del teléfono y el filtro de teclas. Por dentro, `nu
 | `card` | No usar hoy: no hay pago con tarjeta. | según la guía del DS (ejemplo «Payment Input») |
 | `button` | No usar hoy: campo de solo lectura con una acción al lado (copiar enlace). | según la guía del DS (ejemplo «With Button») |
 
-**Usos de hoy que rompen la regla:**
-
-- **11 buscadores con `type="text"`** → `type="search"` (hoy no sale la lupa en el teclado):
-  `pages/customers/customers.html:28`, `pages/products/products.html:71`,
-  `components/map-picker-modal/map-picker-modal.html:14`, `pages/settings/team/team.html:59`,
-  `pages/super-admin/super-admin.html:63`…
-- **21 `amount` sin `prefix="S/"`**, 15 de ellos con «(S/)» metido en el label:
-  `pages/super-admin/master-settings/master-settings.html:273` («Mínimo (S/)»),
-  `pages/business-onboarding/step-product/step-product.html:33` («Precio (S/)», placeholder «Ej: 25»),
-  `pages/super-admin/master-drivers/master-drivers.html:99`.
-- **2 montos con `type="number"`** → `amount` + `prefix`: `pages/super-admin/super-admin.html:649`
-  («Monto a cobrar»), `pages/super-admin/master-gastos/master-gastos.html:193` («Monto»).
-- **3 `password` sin ojo** → `password-toggle`: `pages/auth/login/login.html:71`,
-  `pages/auth/register/register.html:121`, `:133`.
+**Usos de hoy que rompen la regla:** ninguno (medido el 04-10-2026). Los 11 buscadores con
+`type="text"`, los 21 `amount` sin `prefix="S/"`, los 2 montos con `type="number"` y los 3
+`password` sin ojo se corrigieron en la app el 03-10-2026 (merge `70f937e4`).
 
 ### Las piezas
 
@@ -103,17 +92,11 @@ El `type` decide el teclado del teléfono y el filtro de teclas. Por dentro, `nu
 | `closeOnOutsideClick` | Déjalo en `true`: tocar fuera baja el teclado. `false` solo si la pantalla maneja el foco a mano (1 uso). | código del DS |
 | `leadingControl` / `trailingControl` / `leadingDivider` / `trailingDivider` | Componer un control adentro: el país del teléfono (`sui-compact-select-for-input` en `[data-slot=start]`) o una acción al lado. Hoy sin uso. | según la guía del DS (ejemplos «With Select» y «With Button») |
 
-**Usos de hoy que rompen la regla:**
-
-- **Los 24 `sublabel` de hoy van sin paréntesis** (input, textarea y select: 17 «Opcional», 4 «No editable», 2 «Máximo a descontar», 1 «Solo interno») y se leen pegados al label → «(Opcional)»:
-  `components/address-form-modal/address-form-modal.html:134`, `pages/discounts/discounts.html:170`,
-  `pages/customer/profile/profile.html:234`.
-- **16 «(opcional)» escritos en el label** (input, textarea y select juntos) → `sublabel="(Opcional)"`:
-  `pages/driver/driver-profile/driver-profile.html:431` («Placa (opcional)»),
-  `pages/super-admin/master-plans/master-plans.html:131`, `pages/super-admin/super-admin.html:661`.
-- **13 placeholders con `...`** (input, textarea y select) → `…`: `pages/customers/customers.html:28`
-  («Buscar clientes...»), `pages/products/products.html:71`, `components/address-form-modal/address-form-modal.html:134`.
-- **2 campos sin label en el login** (el placeholder hace de rótulo): `pages/auth/login/login.html:64`, `:71`.
+**Usos de hoy que rompen la regla** (medido el 04-10-2026; los `sublabel` sin paréntesis, los
+«(opcional)» en el label y los placeholders con `...` ya se corrigieron en la app, commits
+`ce4a2d12` y `e0470b34`):
+
+- **2 campos sin label en el login** (el placeholder hace de rótulo): `pages/auth/login/login.html:64`, `:72`.
 - **6 campos con el label afuera** (`<sui-form-label>` suelto encima) en el onboarding del
   repartidor: `pages/driver-onboarding/step-info/step-info.html:37`. Funciona, pero el error y el
   `required` quedan desconectados del campo: va el `label` del propio input.
@@ -124,6 +107,11 @@ Los altos de `sui-input` son **los del botón a propósito** (`large` 48 y `xlar
 extensión de SUI): un campo y un botón puestos lado a lado miden lo mismo. La guía del DS solo
 tiene `medium` (40), `small` (36) y `xsmall` (32).
 
+En large y xlarge el texto sube a 16 px (canon, aprobado por el dueño el 03-10-2026): el valor, el placeholder y el
+prefijo van en 16/24 también en desktop. En mobile el valor y el placeholder ya iban en 16 en
+cualquier tamaño (por el zoom de iOS), y desde el 04-10-2026 el prefijo `S/` los acompaña: en el
+teléfono también va en 16 en todos los tamaños (antes se quedaba en 14 al lado de un monto de 16).
+
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | campo de formulario | `large` (48), igual que el botón del footer | `medium` (40) | propuesta, falta aprobación |
@@ -137,11 +125,12 @@ tiene `medium` (40), `small` (36) y `xsmall` (32).
 ```
 
 No uses `bp.controlSize()` en campos: da `xlarge` (52) en mobile, más alto que el botón `large`
-del footer (3 usos hoy, `pages/customer/checkout/checkout.html:392`). El texto sube solo a 16 px
+del footer (3 usos hoy: `pages/customer/checkout/checkout.html:269`, `:384`,
+`pages/super-admin/master-sonidos-push/master-sonidos-push.html:43`). El texto sube solo a 16 px
 en mobile (evita el zoom de iOS): no hace falta pedirlo.
 
-Hoy: **163 sin `size`** quedan en 40 px también en el teléfono (cumple el mínimo, no alinea con el
-botón `large`).
+Hoy: **88 usos** ya van con `bp.isMobile() ? 'large' : 'medium'`; **77 sin `size`** quedan en 40 px
+también en el teléfono (no alinea con el botón `large`).
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -226,6 +215,11 @@ proyectados con `leadingControl` / `trailingControl`).
 - Tocar fuera baja el teclado (`closeOnOutsideClick`). Ya distingue tocar otro campo: no hace falta
   agregar lógica de blur en la pantalla.
 - El `(keydown.enter)` puesto en el host funciona: el evento sube desde el `<input>` de adentro.
+- **Accesibilidad (04-10-2026)**: cada campo trae su `id`; el `label` interno apunta a él con `for`,
+  el hint o el error se enlazan con `aria-describedby` y `error` pone `aria-invalid`. No hace
+  falta agregarlos a mano. Un `sui-form-label` puesto **afuera** no conoce ese `id`: usa `[label]`.
+- En el teléfono la X de limpiar y el ojo se ven de 12-20 px pero se tocan en 44 × 44 (área
+  invisible, 04-10-2026).
 
 ## Ejemplo
 

package/docs/sui-integration-switch/README.md

@@ -63,20 +63,24 @@ Regla corta: **servicio externo que se prende y se configura → integration-swi
 
 ## Tamaño en mobile y en web
 
-No tiene `size`.
+| size | «Administrar» | interruptor | fuente |
+|---|---|---|---|
+| `medium` (default) | 38 (8 + 20 + 8 de padding y 2 de borde), texto 14 | `sui-switch` `medium`, 32 × 20 | Figma |
+| `large` | 44 (9 + 24 + 9 + 2), texto 16 | igual: 32 × 20 | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono. Size nuevo del 04-10-2026 |
 
 | uso | mobile | web |
 |---|---|---|
-| interruptor | **32 × 20 fijo: bajo el piso de mobile** | 32 × 20 |
-| «Administrar» | **36 de alto: bajo el piso de 44** | 36 |
+| «Administrar» | `large` (44) | `medium` (38) |
 | layout | `vertical` | `horizontal` |
 
 ```html
-<sui-integration-switch [type]="bp.isMobile() ? 'vertical' : 'horizontal'" … />
+<sui-integration-switch [size]="bp.isMobile() ? 'large' : 'medium'"
+                        [type]="bp.isMobile() ? 'vertical' : 'horizontal'" … />
 ```
 
-**No llega al tamaño de mobile.** El switch es `sui-switch` `medium` fijo y el botón mide 36. Antes
-de usarlo en el teléfono hace falta un `size` en el DS (no se inventó aquí).
+**El interruptor sigue bajo el piso**: es `sui-switch` `medium` fijo (20 de alto) en los dos sizes,
+y a diferencia de `sui-switch-card`, tocar la tarjeta no prende nada: solo responde el
+interruptor. Para algo que se prende y apaga en el teléfono, `sui-switch-card` es la salida.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -94,6 +98,7 @@ de usarlo en el teléfono hace falta un `size` en el DS (no se inventó aquí).
 |---|---|---|
 | `type` | `'horizontal' \| 'vertical'` | `'horizontal'` |
 | `appearance` | `'card' \| 'list'` | `'card'` |
+| `size` | `'medium' \| 'large'` | `'medium'` |
 | `title` | `string` | `''` |
 | `description` | `string \| null` | `null` |
 | `brandIconSrc` | `string \| null` | `null` |
@@ -123,10 +128,12 @@ Slot: `[sui-integration-brand]` (reemplaza al logo). Implementa `ControlValueAcc
 - **Es controlada**: `active` es input y `activeChange` solo avisa; sin actualizar tu señal el
   interruptor no se mueve.
 - El estado se llama `active`, no `checked` (como en `sui-switch-label`).
-- El interruptor no tiene `size`: siempre `medium`.
+- El interruptor no cambia con `size`: siempre `sui-switch` `medium`. El `size` del componente (04-10-2026) solo agranda «Administrar».
 - En `vertical` el interruptor va arriba a la derecha y «Administrar» abajo a ancho completo.
 - `appearance="list"` no tiene borde ni fondo ni padding: va dentro de algo que los ponga.
 - El host borra el atributo `title` del DOM; el título se ve como texto, no como `aria-label`.
+  El interruptor toma su nombre de ese título (y su descripción de `description`) con
+  `aria-labelledby` (revisión 04-10-2026); antes el lector decía solo «interruptor».
 
 ## Ejemplo
 

package/docs/sui-kbd/README.md

@@ -46,10 +46,10 @@ Usos de hoy que rompen la regla: **0**.
 
 ## Tamaño en mobile y en web
 
-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**.
+No es táctil: es una tecla dibujada. En mobile no hay teclado físico, así que no se muestra; en
+web tiene un solo tamaño. Donde la pantalla existe en los dos (panel del local, super admin) se
+oculta con el servicio de breakpoints de la app (`bp`, en `services/breakpoints.service.ts`). Todo
+es **propuesta**.
 
 | uso | mobile | web |
 |---|---|---|

package/docs/sui-key-icon/README.md

@@ -12,7 +12,7 @@ Story: [Atoms/Icon/Key Icon](https://sui-design-system.web.app/?path=/docs/atoms
 ## Cuándo usarlo / cuándo no
 
 **Úsalo** cuando un ícono tiene que **anclar** algo: el inicio de una fila, la cabecera de un
-modal, el resultado de una acción («Cuenta bloqueada», «¡Gracias por calificar!»).
+modal, el resultado de una acción («Cuenta bloqueada», «Gracias por calificar»).
 
 **No lo uses** para:
 
@@ -35,7 +35,11 @@ modal, el resultado de una acción («Cuenta bloqueada», «¡Gracias por califi
 | `lighter` | El ícono dice un estado: el color del fondo **es** el significado («Cuenta bloqueada» en rojo, «Calificación enviada» en verde). | propuesta |
 | `stroke` (default) | Ícono neutro al inicio de una fila, sobre fondo blanco. **Siempre con `color="gray"`.** | propuesta |
 
-### `color` — mismo significado que el badge
+### `color` — mismo significado que el badge, salvo `teal`
+
+Ojo: aquí `teal` pinta el token **verified** (celeste, `--sui-state-verified-*`), que en
+`sui-badge` es `sky`; el `teal` del badge es **stable** (verde agua). La key-icon no tiene `sky`
+ni un color para stable.
 
 | valor | estado de la paleta | cuándo | fuente |
 |---|---|---|---|

package/docs/sui-link-button/README.md

@@ -30,7 +30,7 @@ Es el reemplazo del `sui-button` `ghost` `primary`.
 > los dos tamaños, el subrayado, los íconos y el deshabilitado, sin do/don't. Las reglas de
 > abajo son **canon (aprobado por el dueño, 03-10-2026)** salvo donde dice otra fuente.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 22 link-buttons en 17 archivos, sin
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (el 04-10-2026 ya son 23): 22 link-buttons en 17 archivos, sin
 > contar prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`,
 > `dx/*`, `master-rutina`, `master-medico`, `dev-index`) ni la copia local del componente en
 > `components/sui/sui-link-button/`. Variantes: 10 `gray` (1 por default), 7 `primary`,
@@ -44,24 +44,26 @@ Es el reemplazo del `sui-button` `ghost` `primary`.
 - **`modifiable` no tiene color propio**: hereda el del contenedor, para que lo pinte quien lo usa.
 - **Subrayado**: aparece al pasar el mouse; con `underline` queda fijo.
 - **Deshabilitado**: el texto pasa a `text-disabled-300` y se va el subrayado.
-- **Tamaños**: `large` (24 px, texto `label-md`, ícono 20; extensión SUI para mobile), `medium` (20 px, `label-sm`, ícono 20) y `small` (16 px, `label-xs`, ícono 16).
+- **Tamaños**: `medium` (20 px, `label-sm`, ícono 20) y `small` (16 px, `label-xs`, ícono 16).
+  `large` (24 px, `label-md`, ícono 20) **no está en la guía**: es extensión de SUI para mobile.
 
 ### `variant`
 
 | variant | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
 | `primary` | El link principal de una sección: «Ver todas», «Cambiar horario», «Descargar la app». Reemplaza al `sui-button` `ghost` `primary`. | `pages/customer/checkout/checkout.html:165` («Cambiar horario») · `pages/public/landing-business/landing-business.html:208` («Descargar la app») | canon (aprobado por el dueño, 03-10-2026) |
-| `gray` (default) | Salida de baja jerarquía: «Omitir», «Ahora no», «Cerrar sesión», «Más información». | `pages/account-suspended/account-suspended.html:70` («Cerrar sesión») · `pages/super-admin/master-approvals/master-approvals.html:90` («Más información») | canon (aprobado por el dueño, 03-10-2026) |
+| `gray` (default) | Salida de baja jerarquía: «Omitir», «Ahora no», «Cerrar sesión», «Más información». | `pages/account-suspended/account-suspended.html:70` («Cerrar sesión») · `pages/super-admin/master-approvals/master-approvals.html:89` («Más información») | canon (aprobado por el dueño, 03-10-2026) |
 | `black` | Un link dentro de un texto, con `underline`: «Términos y condiciones», «Ver política». | (sin uso hoy) | canon (aprobado por el dueño, 03-10-2026) |
 | `error` | Quitar algo menor, en texto: «Quitar», «Borrar foto». Nunca para abrir una destructiva grande. | (sin uso correcto hoy) | canon (aprobado por el dueño, 03-10-2026) |
 | `modifiable` | Toma el color del contenedor: las acciones del alert, del banner y del toast. | `components/sui/sui-toast/sui-toast-outlet.html:36` (acción del toast) · `components/subscription-banner/subscription-banner.html:10` («Renovar plan») | hereda el color: según la guía del DS · dónde va: canon (aprobado por el dueño, 03-10-2026) |
 
 **Usos de hoy que rompen la regla:**
 
-- **3 `error` que abren una destructiva grande → `sui-button` `stroke` `error`:**
+- **4 `error` que abren una destructiva grande → `sui-button` `stroke` `error`:**
   `pages/super-admin/master-orders/master-orders.html:425` («Cancelar pedido»),
-  `pages/orders/orders.html:232` («Rechazar pedido»), `pages/central/central-gastos/central-gastos.html:101`
-  («Anular gasto»).
+  `pages/orders/orders.html:233` («Rechazar pedido»), `pages/central/central-gastos/central-gastos.html:101`
+  («Anular gasto») y `pages/driver/driver-order-detail/driver-order-detail.html:745` («Cancelar» el
+  pedido, en `large`; nuevo, medido el 04-10-2026).
 - A discutir: `pages/super-admin/master-orders/master-orders.html:430` («Liberar» en `gray`): es una
   acción de operación, no una salida de baja jerarquía.
 
@@ -96,8 +98,8 @@ Los íconos son nombres RemixIcon sin el prefijo `ri-`. Miden 20 px en `large` y
 |---|---|---|
 | `true` | La acción existe pero ahora no se puede: mientras se guarda, mientras se procesa otra acción. Mejor que esconderla si la persona la espera en ese lugar. | cómo se ve: según la guía del DS · cuándo: propuesta |
 
-Ejemplos: `components/add-product-modal/add-product-modal.html:330` («Vista previa» mientras guarda),
-`pages/orders/orders.html:232`.
+Ejemplos: `components/add-product-modal/add-product-modal.html:339` («Vista previa» mientras guarda),
+`pages/orders/orders.html:233`.
 
 ### `href`, `target`, `rel`, `type`, `ariaLabel`
 
@@ -113,8 +115,8 @@ Ejemplos: `components/add-product-modal/add-product-modal.html:330` («Vista pre
 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):
-`[size]="bp.isMobile() ? 'large' : 'small'"`, 27 usos hoy en `master-pedidos` (16 `large`/`small`,
-9 `large`/`medium`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+`[size]="bp.isMobile() ? 'large' : 'small'"`. Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
+con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
 
 | size | alto | texto | ícono |
 |---|---|---|---|
@@ -138,11 +140,13 @@ va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
 
 **Ningún tamaño llega a 44 px**: el link mide 16–24 de alto y no tiene padding. En mobile el área
 táctil la pone el contenedor: la fila o el bloque donde vive tiene que medir 44 px o más de alto, o
-dejar aire alrededor del link. `small` (16) no va en mobile: hoy hay 6 links `small` fijos
-(`pages/driver/driver-profile/driver-profile.html:258`, `:264`, `pages/driver/driver-dashboard/driver-dashboard.html:1089`,
-`pages/mi-negocio/mi-negocio.html:472`, `pages/customer/order-history/order-history.html:413`,
-`components/add-product-modal/add-product-modal.html:330`); los 4 de repartidor y cliente se usan
-sí o sí en el teléfono → `[size]="bp.isMobile() ? 'medium' : 'small'"`.
+dejar aire alrededor del link. `small` (16) no va en mobile. Medido el 04-10-2026: los 4 de
+repartidor y cliente ya usan `[size]="bp.isMobile() ? 'medium' : 'small'"`
+(`pages/driver/driver-profile/driver-profile.html:258` y `:264`,
+`pages/driver/driver-dashboard/driver-dashboard.html:1092`,
+`pages/customer/order-history/order-history.html:412`). Quedan 2 `small` fijos, los dos del panel
+de la empresa: `pages/mi-negocio/mi-negocio.html:474` y
+`components/add-product-modal/add-product-modal.html:339`.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -180,8 +184,8 @@ Slots: `<ng-content>` (el texto).
 
 - **El output es `(clicked)`**, no `(click)` como en `sui-button`. `(click)` sobre el host igual
   funciona porque el clic burbujea, pero hoy hay 6 usos así (`components/subscription-banner/subscription-banner.html:10`,
-  `pages/super-admin/master-approvals/master-approvals.html:90`, `pages/central/central-gastos/central-gastos.html:101`,
-  `pages/account-suspended/account-suspended.html:66` y `:70`, `pages/customer/viaje/viaje.html:215`).
+  `pages/super-admin/master-approvals/master-approvals.html:89`, `pages/central/central-gastos/central-gastos.html:101`,
+  `pages/account-suspended/account-suspended.html:66` y `:70`, `pages/customer/viaje/viaje.html:216`).
   Usa `(clicked)`, que ya respeta `disabled`.
 - **`rel` arranca en `null`**, a diferencia de compact, fancy y social, que traen
   `'noopener noreferrer'`. Con `target="_blank"` hay que ponerlo a mano.