@ajuarezso/sui-design-system 0.22.0 → 0.23.1

package/docs/sui-flag/README.md

@@ -22,8 +22,9 @@ nada a nadie.
 > **La guía del DS no tiene este componente.** Todo es **propuesta, falta aprobación**.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usan por dentro
-> `sui-select`, `sui-compact-select`, `sui-inline-select`, `sui-dropdown-item`, `sui-tag` y
-> `sui-command-menu-item`.
+> `sui-select`, `sui-compact-select`, `sui-compact-select-for-input`, `sui-inline-select`,
+> `sui-dropdown-item` y `sui-command-menu-item`. `sui-tag` no la trae: la recibe proyectada en
+> `[data-slot=start]`.
 
 ### `size`
 

package/docs/sui-form-hint/README.md

@@ -12,7 +12,7 @@ Story: [Atoms/Form/Form Hint](https://sui-design-system.web.app/?path=/docs/atom
 ## Cuándo usarlo / cuándo no
 
 **Úsalo** para una línea debajo de un campo o grupo **que no trae la suya**: cómo se llena
-(«Como aparece en tu DNI.»), un contador («120/200»), o qué falló («Selecciona un método de
+(«Como aparece en tu DNI»), un contador («120/200»), o qué falló («Selecciona un método de
 pago»). Va pegado al control que explica.
 
 **No lo uses** para:
@@ -31,7 +31,8 @@ Regla corta: **ayuda o error de un control sin hint propio → form-hint · camp
 > trae tres estados: normal, deshabilitado y con error (`hasError`). El ícono es una pieza aparte
 > y opcional. No da reglas de largo ni de copy.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`; las cifras
+> siguen iguales el 04-10-2026, las líneas de abajo están actualizadas a esa fecha):
 > **36 usos en 18 archivos**: 11 `error`, 25 `neutral` (24 por default y 1 explícito), 0
 > `disabled`; 2 con `icon` propio (`information-line`). Hay además **al menos 14 hints escritos a
 > mano** con clases propias (`__form-hint`, `__hint`).
@@ -48,7 +49,7 @@ Regla corta: **ayuda o error de un control sin hint propio → form-hint · camp
 
 | qué | regla | fuente |
 |---|---|---|
-| `message` | Hasta 8 palabras (mediana 6). Si no cabe, es un `sui-alert`. Con punto final si es una oración. | canon (`docs/CANON-SUI.md` §5.4) |
+| `message` | Hasta 8 palabras (mediana 6). Si no cabe, es un `sui-alert`. Sin punto final si es una frase corta; con punto si son dos oraciones. | canon (`docs/CANON-SUI.md` §5.4 el largo; `docs/VOZ-Y-ESCRITURA.md` el punto) |
 | `icon` sin pasar | El de la variante (ninguno en `neutral`, info en `error` y `disabled`). | según la guía del DS (ícono opcional); default de SUI |
 | `icon="…"` en `neutral` | Solo cuando la ayuda es una advertencia que conviene notar («No reconocimos el distrito…»). | propuesta, falta aprobación (2 usos hoy) |
 | `[icon]="null"` | Quita el ícono también en `error`. No usar: el error necesita algo más que el color. | propuesta, falta aprobación |
@@ -62,14 +63,14 @@ Regla corta: **ayuda o error de un control sin hint propio → form-hint · camp
   Bien usado, en cambio, `step-vehicle.html:43`: el error de un grupo de `sui-radio-card`.
 - **4 como subtítulo de una sección, no de un campo:** `pages/schedule/schedule.html:17`
   («Pausa tu sucursal…», bajo el título de la card), `:61`, `pages/drivers/drivers.html:29`,
-  `pages/driver/driver-schedule/driver-schedule.html:94`.
+  `pages/driver/driver-schedule/driver-schedule.html:92`.
 - **12 de más de 8 palabras** (4 son los subtítulos de arriba) → acortar, o `sui-alert` si de
   verdad hace falta todo: `pages/super-admin/master-users/master-users.html:66` (26 palabras),
-  `pages/orders/orders.html:587` (23), `pages/driver/driver-order-detail/driver-order-detail.html:834` (23),
-  `pages/envios/envios.html:399` (15).
-- **Al menos 14 hints a mano** con clases propias. Ejemplos: `pages/discounts/discounts.html:196`
+  `pages/orders/orders.html:589` (23), `pages/driver/driver-order-detail/driver-order-detail.html:868` (23),
+  `pages/envios/envios.html:401` (15).
+- **Al menos 14 hints a mano** con clases propias. Ejemplos: `pages/discounts/discounts.html:205`
   (`discounts__form-hint`), `components/settings-panel/settings-panel.html:93`,
-  `pages/promociones/promociones.html:180`.
+  `pages/promociones/promociones.html:181`.
 
 ## Tamaño en mobile y en web
 
@@ -110,6 +111,9 @@ Outputs: ninguno.
 - **Sin `message` no ocupa lugar**: no hace falta envolverlo en `@if`.
 - En `error` el ícono es `information-fill` en rojo, no `error-warning-line`.
 - Letra fija de 12/16 px; el ícono mide 16 px y se alinea con la primera línea.
+- `variant="error"` con mensaje lleva `role="alert"`: el lector lo anuncia al aparecer
+  (04-10-2026). Para enlazarlo a un control propio, pon `id` en el host y apúntalo con
+  `aria-describedby`; los campos del DS ya lo hacen solos.
 
 ## Ejemplo
 

package/docs/sui-form-label/README.md

@@ -19,7 +19,8 @@ Story: [Atoms/Form/Form Label](https://sui-design-system.web.app/?path=/docs/ato
 
 - **Encima de un `sui-input`, `sui-select` o `sui-textarea`**: esos ya dibujan su label, asterisco,
   sublabel y tooltip con `[label]`, `[required]`, `[sublabel]`, `[tooltip]`. Ponerle uno afuera
-  duplica la pieza y pierde el `for`.
+  duplica la pieza y deja el `required` y el error separados del campo. El label interno sí
+  lleva `for` al `id` del control (desde el 04-10-2026); uno puesto afuera no lo conoce.
 - El texto de un solo checkbox, radio o switch: `sui-checkbox-label`, `sui-radio-label`,
   `sui-switch-label`.
 - Un título de sección o de card («Datos personales»): `sui-page-header`, `sui-content-label` o
@@ -35,8 +36,8 @@ Regla corta: **campo de texto → su propio `[label]` · grupo o control sin lab
 > es «Last Name*(Optional)»: el opcional va **entre paréntesis** en el sub. Tiene un solo tamaño y
 > un estado deshabilitado. Info (tooltip) y el link de la derecha vienen del Figma del componente.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
-> **37 usos en 13 archivos**: 13 con `required`, 5 con `sublabel="Opcional"`, 2 con `link`
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
+> **37 usos en 13 archivos**: 13 con `required`, 7 con `sublabel="(Opcional)"`, 2 con `link`
 > («Cambiar»), 0 con `tooltip`, 0 con `disabled`; 6 con `size="medium"` explícito, el resto en el
 > default (`medium`).
 
@@ -63,27 +64,21 @@ Regla corta: **campo de texto → su propio `[label]` · grupo o control sin lab
 La regla de controles grandes del dueño (28-09-2026) no aplica aquí: el `size` del label es
 tipografía, no área táctil.
 
-**Usos de hoy que rompen las reglas:**
+**Usos de hoy que rompen las reglas** (medido el 04-10-2026; los sublabels sin paréntesis, el
+«(opcional)» en el label, el número de paso en los labels de promociones y el Title Case de
+`drivers.html:28` ya se corrigieron en la app, commits `ce4a2d12` y `8128dc03`):
 
 - **8 encima de un campo que ya trae su label → pasar a `[label]` del campo:**
   `pages/driver-onboarding/step-info/step-info.html:37` («Nombre completo»), `:56`, `:77`;
   `pages/customer-onboarding/step-address/step-address.html:70` («Departamento», sobre
   `sui-select`), `:87`, `:106`; `pages/driver-onboarding/step-vehicle/step-vehicle.html:49`, `:62`.
   En esos mismos campos el `sui-form-hint` de abajo también es el `[hint]` del input.
-- **5 con `sublabel="Opcional"` sin paréntesis** → se lee «ImagenOpcional» (1 px de separación).
-  Pasar a «(Opcional)»: `components/add-product-modal/add-product-modal.html:42`, `:195`;
-  `pages/promociones/promociones.html:200`; `pages/business-onboarding/step-info/step-info.html:41`, `:54`.
-- **2 con «(opcional)» dentro del label → `sublabel`:** `pages/driver-onboarding/step-vehicle/step-vehicle.html:49`
-  («Placa del vehículo (opcional)») y `:62`.
 - **2 como título de sección → heading o `sui-content-label`:** `pages/customer/checkout/checkout.html:187`
   («Datos personales») y `:35` («Recoges en el local»).
-- **5 con el número de paso dentro del label** («1. Imagen del banner»…«5. Comprobante de pago»):
-  `pages/promociones/promociones.html:179`, `:200`, `:210`, `:230`, `:264`. Los pasos van en un
-  `sui-stepper` o en el título de la sección; el label queda «Imagen del banner». Además `:200`
-  («2. Descripción») está encima de un `sui-textarea`, que ya trae su `[label]`.
-- **1 en Title Case:** `pages/drivers/drivers.html:28` («Modo de Asignación» → «Modo de asignación»).
-- **3 con un switch armado a mano al lado → `sui-switch-label`:** `pages/discounts/discounts.html:195`,
-  `:299`; `components/add-product-modal/add-product-modal.html:195`.
+- **1 encima de un `sui-textarea`**, que ya trae su `[label]`: `pages/promociones/promociones.html:201`
+  («Descripción»).
+- **3 con un switch armado a mano al lado → `sui-switch-label`:** `pages/discounts/discounts.html:204`,
+  `:316`; `components/add-product-modal/add-product-modal.html:204`.
 
 ## Tamaño en mobile y en web
 

package/docs/sui-icon/README.md

@@ -91,7 +91,7 @@ el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propue
 
 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:101` y `:106`, con `bp.isTablet() ? 20 : 16`).
+(`pages/discounts/discounts.html:103` y `:108`, con `bp.isTablet() ? 20 : 16`).
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -121,8 +121,9 @@ Outputs: ninguno.
 - **`size` acepta número o string**: `[size]="20"` son px; `size="1.25em"` es CSS. Con
   `size="20"` (string sin unidad) el ícono no toma tamaño.
 - **El nombre no se valida**: si no existe en RemixIcon, sale vacío sin error.
-- **No tiene `aria-label`**: los propios del DS llevan `aria-hidden`; los de RemixIcon son un
-  `<i>` vacío. Si el ícono es lo único que dice algo, el texto va al lado o en el contenedor.
+- **No tiene `aria-label` y es decorativo siempre**: el SVG propio y el `<i>` de RemixIcon llevan
+  `aria-hidden="true"` (el `<i>` desde el 04-10-2026; antes el lector podía leer el glifo como un
+  símbolo raro). Si el ícono es lo único que dice algo, el texto va al lado o en el contenedor.
 - **La app necesita la fuente de RemixIcon** (`remixicon/fonts/remixicon.css` en `styles.scss`):
   el paquete del DS no la trae.
 - Dentro de un `sui-kbd`, el kbd le fuerza el color `text-sub-600`.

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-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,8 +107,10 @@ 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 (regla del 03-10-2026): el valor, el placeholder y el
-prefijo van en 16/24 también en desktop. En mobile cualquier tamaño ya iba en 16 (por el zoom de iOS).
+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 |
 |---|---|---|---|
@@ -140,11 +125,12 @@ prefijo van en 16/24 también en desktop. En mobile cualquier tamaño ya iba en
 ```
 
 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í
 
@@ -229,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 |
 |---|---|---|---|