@ajuarezso/sui-design-system 0.22.0 → 0.23.0

package/docs/sui-tab-menu-vertical/README.md

@@ -23,8 +23,8 @@ de pago · Repartidores»), el perfil del super admin.
 - 2 a 4 secciones arriba del contenido: `sui-tab-menu-horizontal`.
 - Filtros de una lista: `sui-tab-chips`.
 
-Regla corta: **secciones de una página de ajustes en web → tab menu vertical · en mobile → lista de
-filas que abren pantalla.**
+Regla corta (propuesta, falta aprobación): **secciones de una página de ajustes en web → tab menu
+vertical · en mobile → lista de filas que abren pantalla.**
 
 ## Qué variante usar
 
@@ -63,7 +63,8 @@ Usos de hoy que rompen las reglas: **0** (no se usa).
 
 ## Tamaño en mobile y en web
 
-Ítem de **36 px** (8 + 20 + 8), ícono de 20. **No tiene `size`** y no tiene tamaño para mobile.
+Ítem de **36 px** (padding 8 + `line-height` 20 + padding 8; el ícono de 20 entra en la línea).
+**No tiene `size`** y no tiene tamaño para mobile: no llega a los 44 px del dedo.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
@@ -114,12 +115,16 @@ type SuiTabMenuVerticalStyle = 'card' | 'list';
 
 ## Trampas
 
-- **El estilo se llama `menuStyle`**, no `style` ni `variant` (ni `verticalStyle`, que era el nombre
-  viejo de `sui-tabs`).
+- **El estilo se llama `menuStyle`**, no `style` ni `variant` (ni `verticalStyle`, el input de
+  `sui-tabs variant="vertical"`, el componente que existió hasta la v0.2.x y ya no está en el DS).
 - **Sin `active` no se marca ningún ítem.** Pásale un valor inicial.
 - **Ocupa el ancho del padre**: dale un ancho fijo a la columna (240-280 px).
 - **El ícono activo es naranja** (`primary-base`); en el tab menu horizontal es negro. Es a propósito.
 - **Emite dos veces**: `tabChange` y `activeChange`.
+- **Teclado (04-10-2026):** `role="tablist"` con `aria-orientation="vertical"` y un solo tab
+  stop. ↑ ↓ mueven el foco **y activan**, con vuelta al inicio y saltando los deshabilitados;
+  Home/End a los extremos. Con `dividerLabel`, ese texto es el nombre del grupo
+  (`aria-labelledby`).
 - `role="tablist"`: si cada ítem navega a una ruta, el lector de pantalla lo anuncia mal; para
   navegación entre rutas, `sui-sidebar`.
 

package/docs/sui-tag/README.md

@@ -2,7 +2,7 @@
 name: sui-tag
 selector: sui-tag
 resumen: Chip neutro que nombra algo elegido o aplicado y que la persona puede quitar
-alternativas: [sui-badge (etiqueta de solo lectura, con color y significado), sui-status-badge (resultado de un ciclo), sui-tab-chips / sui-filter (chips para elegir), sui-tag-input (campo que junta tags)]
+alternativas: [sui-badge (etiqueta de solo lectura, con color y significado), sui-status-badge (resultado de un ciclo), sui-tab-chips (chips para elegir), sui-tag-input (campo que junta tags)]
 ---
 
 # sui-tag
@@ -22,12 +22,13 @@ El tag **no tiene color**: es siempre gris neutro, así que nunca dice un estado
 - Una etiqueta de solo lectura sin nada a la izquierda: `sui-badge` gray (más liviano, va al lado
   de un nombre).
 - Algo con significado de color (pendiente, error, nuevo): `sui-badge` o `sui-status-badge`.
-- **Elegir** entre opciones (chips que se prenden y apagan): `sui-tab-chips`, `sui-filter` o
-  `sui-segmented-control`. El tag no tiene estado «seleccionado».
+- **Elegir** entre opciones (chips que se prenden y apagan): `sui-tab-chips` o
+  `sui-segmented-control`. El tag no tiene estado «seleccionado». (`sui-filter` no es un chip: es
+  la barra y el panel de filtros de una tabla.)
 - Escribir varios valores en un campo: `sui-tag-input`.
 
 Regla corta: **se quita o lleva avatar/logo/bandera → tag · solo se lee → badge · se elige →
-tab-chips o filter.**
+tab-chips o segmented-control.**
 
 ## Qué variante usar
 
@@ -73,13 +74,23 @@ de la app.
 
 | size | alto | texto | leading | X de quitar (área táctil) |
 |---|---|---|---|---|
-| `medium` (default) | 24 px | `label-xs` 12/16 | 16 | 16 (16) |
-| `large` | 32 px | `label-sm` 14/20 | 20 | 20 (32) |
-| `xlarge` | 40 px | `label-md` 16/24 | 20 | 24 (40) |
+| `medium` (default) | 24 px | `label-xs` 12/16 | 16 | 16 (16×16) |
+| `large` | 32 px | `label-sm` 14/20 | 20 | 20 (32×32) |
+| `xlarge` | 40 px | `label-md` 16/24 | 20 | 24 (40×40; **44×44 en el teléfono**) |
 
-`medium` es el de Figma; `large` y `xlarge` son extensión SUI (03-10-2026), en la escala del
-`sui-button` (32 · 40). En los dos grandes la X tiene un área táctil invisible que llega al alto
-del tag, sin cambiar cómo se ve.
+`medium` es el de Figma; `large` y `xlarge` son extensión SUI (03-10-2026). El **alto** sigue la
+escala del `sui-button` (32 · 40); el **texto** sigue al `sui-badge` (14 en `large`, 16 en
+`xlarge`) y no la regla general del 03-10-2026 (16 en los dos): excepción documentada, canon
+(dueño, 04-10-2026) — la escala de badge (12/14/16) se mantiene.
+
+En los dos grandes la X tiene un área táctil invisible (`::before` con `inset` −6 / −8) de
+32×32 y 40×40. En el teléfono (≤ 767 px) la de `xlarge` sube a **44×44** (`inset` −10): canon (dueño, 04-10-2026): piso táctil 44 en el teléfono.
+No hace falta un size nuevo: el tag ya mide 40 y lo que se toca es la X. El área sobresale 2 px
+arriba y abajo del tag; el dibujo no cambia.
+
+Hasta el 04-10-2026 el host llevaba `overflow: clip` y recortaba esa área a la caja interior
+(30 / 38). El recorte pasó al label (`.sui-tag__label`): un texto largo en un tag con ancho
+máximo se sigue cortando, y la X queda siempre visible.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
@@ -124,10 +135,13 @@ Slots: `[data-slot=start]` (avatar, logo, bandera o ícono de 16 px) y `<ng-cont
 - El estilo se llama **`tagStyle`** (en badge es `variant`, en status-badge `appearance`).
 - **No tiene `color`**. Si hace falta color, no es un tag.
 - El tag no saca nada de la lista: `(dismiss)` avisa y la pantalla lo quita.
+- **`interactive` lo vuelve botón** (desde el 04-10-2026): `role="button"`, entra al Tab y
+  Enter/Espacio hacen click. Antes solo prendía los estilos de hover y el tag no se alcanzaba con
+  teclado. No lo combines con `dismissible`: quedaría la X (otro botón) dentro del botón.
 - `disabled` bloquea también la X.
 - Un avatar o una bandera proyectados no se ponen grises con `disabled`: los atenúa la pantalla.
 - `sui-avatar` no tiene 16 px: el `xs` (20) se escala por CSS dentro del slot.
-- Radio de 6 px, 24 px de alto, sin mayúsculas: no es un badge (radio completo).
+- Radio de 6 px, 24 px de alto en `medium`, sin mayúsculas: no es un badge (radio completo).
 
 ## Ejemplo
 

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

@@ -28,14 +28,14 @@ Regla corta: **varios valores libres → tag-input · varias opciones fijas →
 > **En la guía del DS es un ejemplo de su página del input** («With Tags»: un campo con los chips
 > Berlin, London, Paris debajo). No dice cuándo usarlo.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. Candidato: «Rubros que entran»
-> en `pages/super-admin/master-settings/master-settings.html:134`, un `sui-input` donde se escriben
+> Uso medido el 04-10-2026 en `master-pedidos/src/app`: **0 usos**. Candidato: «Rubros que entran»
+> en `pages/super-admin/master-settings/master-settings.html:136`, un `sui-input` donde se escriben
 > palabras separadas por coma («ferreteria, ferretería, construcción») y la pantalla las parte a mano.
 
 | prop / evento | cuándo | fuente |
 |---|---|---|
 | `label` · `required` · `sublabel` · `tooltip` · `hint` | Igual que `sui-input`. El hint dice cómo se agrega: «Escribe y presiona Enter». | según la guía del DS (ejemplo con label «Tag Input») |
-| `placeholder` | **Siempre**: el default es «Add tags...». «Agrega una palabra…». | propuesta, falta aprobación |
+| `placeholder` | **Siempre** que el default genérico («Agrega una etiqueta…», 04-10-2026) no diga qué se agrega: «Agrega una palabra…». | propuesta, falta aprobación |
 | `commaSeparator` | `true` cuando la gente ya escribe con comas (rubros, sinónimos). | propuesta, falta aprobación |
 | `addOnBlur` | `true` en mobile: si sale del campo sin Enter, lo escrito no se pierde. | propuesta, falta aprobación |
 | `maxTags` | Cuando hay un tope real. Hoy no hay. | propuesta, falta aprobación |
@@ -47,27 +47,35 @@ Regla corta: **varios valores libres → tag-input · varias opciones fijas →
 
 ## Tamaño en mobile y en web
 
-Publicado (0.19.0): `xsmall` (32), `small` (36), `medium` (40). **En el repo del DS, sin publicar:**
-`large` (48) y `xlarge` (52), los mismos altos de `sui-input`, y el texto a 16 px en mobile (en
-0.19.0 queda en 14). Los chips de abajo son `sui-tag` de tamaño fijo: **la ✕ para quitar un chip
-no crece** con el campo.
+Tiene `xsmall` (32), `small` (36), `medium` (40), `large` (48) y `xlarge` (52), los mismos altos de
+`sui-input` (los cinco publicados; la app usa 0.22.0). En mobile (≤ 767 px) lo que se escribe va en
+16 px en cualquier tamaño, como en `sui-input`. Los chips de abajo son `sui-tag` y, desde el
+04-10-2026 (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono), **acompañan al campo**:
 
-En large y xlarge el texto sube a 16 px (regla del 03-10-2026): lo que se escribe va en 16/24 también
-en web; el alto sigue en 48/52. Los chips de abajo no cambian.
+| size del campo | chip | X para quitar (área táctil) |
+|---|---|---|
+| `xsmall` · `small` · `medium` | `medium` (24) | 16 × 16 |
+| `large` | `large` (32) | 20 (32 × 32) |
+| `xlarge` | `xlarge` (40) | 24 (40 × 40; **44 × 44 en el teléfono**) |
+
+Antes los chips iban siempre en `medium` y la ✕ medía 16 aunque el campo fuera grande.
+
+En large y xlarge el texto sube a 16 px (canon, aprobado por el dueño el 03-10-2026): lo que se escribe va en 16/24 también
+en web; el alto sigue en 48/52.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| campo de formulario | `large` (48) **cuando se publique**; hasta entonces `medium` (40) | `medium` (40) | propuesta, falta aprobación |
+| campo de formulario | `xlarge` (52, chips de 40 con X tocable en 44) | `medium` (40) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (el 44 lo da la X del chip `xlarge`) |
 
 ```html
-<sui-tag-input [size]="bp.isMobile() ? 'large' : 'medium'" … />   <!-- 'large' desde la próxima versión -->
+<sui-tag-input [size]="bp.isMobile() ? 'xlarge' : 'medium'" … />   <!-- bp = BreakpointsService -->
 ```
 
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
-| el componente entero (0 usos) | nadie carga listas de palabras | «Rubros que entran» de una categoría del home (`master-settings.html:134`), o sinónimos de un producto para el buscador |
+| el componente entero (0 usos) | nadie carga listas de palabras | «Rubros que entran» de una categoría del home (`master-settings.html:136`), o sinónimos de un producto para el buscador |
 | `rightIcon` | el hint explica mejor | — |
 | `maxTags` | no hay topes | un máximo de 5 palabras clave por producto |
 | `allowDuplicates` | repetir no sirve | — |
@@ -81,7 +89,7 @@ en web; el alto sigue en 48/52. Los chips de abajo no cambian.
 | input | tipo | default |
 |---|---|---|
 | `size` | `'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
-| `placeholder` | `string` | `'Add tags...'` |
+| `placeholder` | `string` | `'Agrega una etiqueta…'` |
 | `disabled` | `boolean` | `false` |
 | `error` | `boolean` | `false` |
 | `errorMessage` | `string \| null` | `null` |
@@ -108,11 +116,13 @@ no es parte del valor. Slot `[slot=right]` para un contenido propio a la derecha
 
 ## Trampas
 
-- **Placeholder en inglés por default** («Add tags...»). Pásalo siempre.
+- El placeholder por default es genérico («Agrega una etiqueta…», en español desde el 04-10-2026).
 - Sin `commaSeparator` la coma es un carácter más: «a, b» queda como un solo chip.
 - Sin `addOnBlur`, lo que se escribió y no se confirmó con Enter se pierde al salir.
 - Los chips van **debajo** del campo, no adentro.
 - El hover quita el borde (a diferencia de `sui-input`, que lo oscurece).
+- **Accesibilidad (04-10-2026)**: el control 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`.
 
 ## Ejemplo
 

package/docs/sui-textarea/README.md

@@ -17,11 +17,13 @@ comentario al calificar.
 
 **No lo uses** para:
 
-- Un dato de una línea (nombre, referencia corta, URL, un slug): `sui-input`. Hoy hay uno así:
-  «Personaliza tu url» en `pages/mi-negocio/mi-negocio.html:706`.
+- Un dato de una línea (nombre, referencia corta, URL, un slug): `sui-input`. Hoy hay 4 así:
+  «Personaliza tu url» en `pages/mi-negocio/mi-negocio.html:713` (a propósito, para que envuelva en
+  mobile, según su comentario) y 3 URL de imagen: `pages/mi-negocio/mi-negocio.html:534`, `:588` y
+  `components/add-product-modal/add-product-modal.html:72`.
 - Un motivo que se puede elegir de una lista cerrada: radios o `sui-select`, y la opción «Otro»
-  abre el textarea (como ya hace `pages/envios/envios.html:819`, que además corta a 200 a mano con
-  `.slice(0, 200)` en vez de `[maxLength]="200"`).
+  abre el textarea (como ya hace `pages/envios/envios.html:822`, con `[maxLength]="200"`; el
+  `.slice(0, 200)` del `(valueChange)` sobra).
 - Texto con negritas o enlaces: no hay caso hoy (ver `sui-rich-editor`).
 - Un `<textarea>` nativo: queda **1** (`pages/products/add-product/add-product.html:155`).
 
@@ -32,9 +34,9 @@ Regla corta: **se redacta y puede pasar de una línea → textarea · una línea
 > **La guía del DS lo presenta con contador de caracteres y su propia manija para agrandarlo**
 > («78/200»), y aparte una versión simple sin contador. No dice cuándo va cada una.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
-> `master-ejercicios`): **50 usos en 29 archivos**. `rows`: 32 en 3, 13 en 2, 4 en 4, 1 en 8.
-> Con `maxLength`: 8. Con `resizable=false`: 2. 38 con label, 12 sin.
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
+> `master-ejercicios`): **50 usos en 29 archivos**. `rows`: 30 en 3, 13 en 2, 4 en 4, 1 en 8 y 2 sin
+> `rows` (default 4). Con `maxLength`: 43. Con `resizable=false`: 2. 38 con label, 12 sin. Con `size`: 0.
 
 | prop | cuándo | fuente |
 |---|---|---|
@@ -47,25 +49,21 @@ Regla corta: **se redacta y puede pasar de una línea → textarea · una línea
 | `placeholder` | Un ejemplo de lo que se espera: «Ej. frágil, tocar el timbre, entregar en recepción». Elipsis `…`. | canon (CANON-SUI §5.2) |
 | `maxLength` | **Siempre que otro lo va a leer** (cliente, repartidor, local) o se guarda en la base: muestra «n/200» y corta el exceso. 200 para motivos y notas; 500 para descripciones. | según la guía del DS (su ejemplo principal lleva contador); los topes son propuesta |
 | `size` | El mismo de los inputs del formulario: `large` en mobile, `medium` en web. Ver «Tamaño en mobile y en web». | canon (aprobado por el dueño, 03-10-2026), extensión SUI; el «cuándo» es propuesta, falta aprobación |
-| `rows` | `3` por defecto (motivos, notas). `2` para una nota corta en un formulario largo. `4` o más solo para una descripción larga. | propuesta, falta aprobación |
+| `rows` | `3` para motivos y notas (el default del componente es `4`). `2` para una nota corta en un formulario largo. `4` o más solo para una descripción larga. | propuesta, falta aprobación |
 | `resizable` | `true` en web. En mobile **`false`**: la manija no se puede arrastrar con el dedo y parece un adorno. | según la guía del DS (versión con y sin manija); el «cuándo» es propuesta |
 | `readonly` | Mostrar un texto ya enviado con la misma forma del campo (copiar un mensaje). | propuesta, falta aprobación |
 | `disabled` | Mientras se envía. | según la guía del DS |
 | `autocomplete` | No hace falta: ningún texto libre se autocompleta. | propuesta, falta aprobación |
 
-**Usos de hoy que rompen la regla:**
+**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`, y 35 textos pasaron a tener `maxLength` en `d14694fd`):
 
-- **3 `sublabel="Opcional"` sin paréntesis** (se lee «Notas adicionalesOpcional») → «(Opcional)»:
-  `pages/customer/checkout/checkout.html:209`, `pages/self-delivery/self-delivery.html:101`,
-  `components/add-product-modal/add-product-modal.html:184`.
-- **9 «(opcional)» dentro del label** → `sublabel="(Opcional)"`: `pages/super-admin/super-admin.html:333`
-  («Notas (opcional)»), `pages/super-admin/master-orders/master-orders.html:795`,
-  `components/cuenta-bloqueada/cuenta-bloqueada.html:21`.
-- **Textos que lee otra persona sin `maxLength`** (42 de 50 no lo tienen). Los que más importan:
-  `pages/envios/envios.html:419` («Nota para el repartidor»), `pages/customer/checkout/checkout.html:209`
-  («Notas adicionales»), `pages/super-admin/master-users/master-users.html:266` («Motivo (lo va a leer)»).
-- **4 placeholders con `...`**: `pages/customer/checkout/checkout.html:209`,
-  `pages/self-delivery/self-delivery.html:101`, `pages/driver/driver-order-detail/driver-order-detail.html:823`.
+- **7 sin `maxLength`**: 4 son las URL de una línea de arriba y 1 es de solo lectura
+  (`components/copy-text-dialog/copy-text-dialog.html:9`); quedan 2 «Notas» que se guardan en la base:
+  `pages/super-admin/super-admin.html:334`, `pages/super-admin/master-gastos/master-gastos.html:228`.
+- **Ninguno lleva `size`**: los 50 quedan en `medium` también en el teléfono, aunque los inputs del
+  mismo formulario ya vayan en `large`.
 
 ## Tamaño en mobile y en web
 
@@ -87,7 +85,7 @@ evita el zoom de iOS al enfocar y el textarea deja de verse más chico que los c
 eso cada fila mide 24 px en el teléfono y 20 en web (3 filas ≈ 72 + padding en mobile, 60 + padding
 en web): el área que se toca siempre pasa los 44 px.
 
-En large y xlarge el texto sube a 16 px (regla del 03-10-2026): en esos dos tamaños va en 16/24
+En large y xlarge el texto sube a 16 px (canon, aprobado por el dueño el 03-10-2026): en esos dos tamaños va en 16/24
 también en web, así que cada fila mide 24 en las dos plataformas.
 
 | uso | mobile | web | fuente |
@@ -146,6 +144,8 @@ Outputs: ninguno.
 - El hint lleva siempre el ícono `information-fill`, también el neutro (así está en el Figma).
 - El `size` no cambia el alto: eso lo deciden las `rows`. Lo que alinea con el input es el padding.
 - `error` sin `errorMessage` pinta el borde y no dice qué falta.
+- **Accesibilidad (04-10-2026)**: el control 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`.
 
 ## Ejemplo
 

package/docs/sui-time-picker/README.md

@@ -20,7 +20,7 @@ cierre del local, el turno del repartidor, «Cerrar hasta las 9:30 PM».
   **franja** que el local puede cumplir. Va la hoja del checkout (`sui-tab-chips` para el día y
   `sui-radio-label` con `flip` para cada franja). Es la maqueta aprobada, y el propio código
   descartó `sui-time-picker-item` para esas filas porque son densas y sin separación
-  (`checkout.html:475`).
+  (`checkout.html:469`).
 - Pocas horas fijas («12:00», «13:00», «14:00»): `sui-select`.
 - Una duración («30 min», «1 h»): no hay componente de duración; un `sui-select` o
   `sui-tab-chips` con los valores (ver Trampas: los presets de este componente no son duraciones).
@@ -44,23 +44,23 @@ pocas horas → select.**
 | valor | cuándo | fuente |
 |---|---|---|
 | `12h` (default) | Siempre: en Perú la hora se dice «9:30 PM». Los 7 usos lo llevan. | propuesta |
-| `24h` | No usar en la app. | no usar |
+| `24h` | No usar en la app. | propuesta |
 
 ### `step`
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `5` (default) | Horas reales que la persona conoce al minuto: apertura y cierre del local, «cerrar hasta». Con saltos de 30 se redondeaban cierres reales (comentario en `weekly-schedule-editor.html:41`). | propuesta |
-| `30` | Bloques de un turno, que se planifican por media hora (`driver-schedule.html:142`). | propuesta |
+| `5` (default) | Horas reales que la persona conoce al minuto: apertura y cierre del local, «cerrar hasta». Con saltos de 30 se redondeaban cierres reales (comentario en `weekly-schedule-editor.html:37`). | propuesta |
+| `30` | Bloques de un turno, que se planifican por media hora (`driver-schedule.html:140`). | propuesta |
 | `15` | Citas o reservas en cuartos de hora. Sin caso hoy. | propuesta |
-| `1` | No usar: 60 opciones en la columna para una precisión que nadie pide. | no usar |
+| `1` | No usar: 60 opciones en la columna para una precisión que nadie pide. | propuesta |
 
 ### `durationPresets`, `showFooter`, `inline`
 
 | input | valor | cuándo | fuente |
 |---|---|---|---|
-| `durationPresets` | `[]` | **Siempre.** Los presets de fábrica (15 min, 30 min, 45 min, 1 h) ponen la hora como «tiempo desde la medianoche»: «30 min» deja 12:30 AM. Los 7 usos los apagan. | propuesta |
-| `durationPresets` | lista propia | No usar mientras se lean como hora del día. | no usar |
+| `durationPresets` | `[]` (default desde el 04-10-2026) | **Siempre.** Los presets (15 min, 30 min, 45 min, 1 h) ponen la hora como «tiempo desde la medianoche»: «30 min» deja 12:30 AM. Por eso el default pasó a `[]`; los 7 usos de la app ya los apagaban. | propuesta |
+| `durationPresets` | lista propia | No usar mientras se lean como hora del día. | propuesta |
 | `showFooter` | `true` (default) | Cancelar/Aplicar: la hora no cambia hasta confirmar. Es lo correcto cuando la hora se guarda o publica algo (el horario del local). | propuesta |
 | `showFooter` | `false` | Se aplica al tocar cada columna. Solo dentro de un formulario que ya tiene su propio «Guardar». | propuesta |
 | `inline` | `true` | El panel es el contenido, dentro de un `sui-modal` (sin campo ni popover). | propuesta |
@@ -69,7 +69,7 @@ pocas horas → select.**
 
 | input | cuándo | fuente |
 |---|---|---|
-| `size="medium"` (40 px, default) | Siempre: es el más grande que hay (ver «Tamaño»). | propuesta |
+| `size="medium"` (40 px, default) | Web. En mobile va `large` (48), que existe desde el 03-10-2026 (ver «Tamaño»). | propuesta |
 | `size="small"` (36 px) | Filas densas en web. | propuesta |
 | `label` | Siempre, corto y en verbo o momento: «Abre», «Cierra», «Inicio», «Cerrar hasta». | propuesta |
 | `sublabel` / `tooltip` | «Opcional» o una aclaración que no entra en el label. | propuesta |
@@ -79,15 +79,18 @@ pocas horas → select.**
 | `disabled` | Mientras se guarda (como hacen el horario y los turnos). | propuesta |
 | `placeholder` | Lo que se elige: «Hora de cierre». El default «Seleccionar hora» sirve. | propuesta |
 
-Usos de hoy que rompen la regla: **0**. Los 7 cumplen `12h`, `durationPresets=[]` y `label`.
+Usos de hoy que rompen la regla: los 7 cumplen `12h`, `durationPresets=[]` y `label`, pero **los 7
+van con `size="medium"` fijo**, también en pantallas del teléfono (turnos y votaciones del
+repartidor): campo de 40, contra el `large` de la tabla de «Tamaño». Cancelar / Aplicar ya salen en
+48 en el teléfono desde el 04-10-2026 (el componente los fuerza en mobile).
 
 ### Las piezas que trae (exportadas, sin carpeta ni story propias)
 
 | pieza | qué es | cuándo suelta | fuente |
 |---|---|---|---|
-| `sui-time-picker-item` | una fila de la columna (36 px) | No usar: para filas de horario que se tocan con el pulgar va `sui-radio-label` (`checkout.html:475`). | no usar |
-| `sui-time-picker-duration` | la pastilla de un preset | No usar: es la de los presets de duración. | no usar |
-| `sui-time-picker-status` | pastilla Disponible/Ocupado/En reunión/Desconectado | No usar: sus textos de fábrica están en inglés y el estado del repartidor ya tiene su badge. | no usar |
+| `sui-time-picker-item` | una fila de la columna (36 px) | No usar: para filas de horario que se tocan con el pulgar va `sui-radio-label` (`checkout.html:469`). | propuesta |
+| `sui-time-picker-duration` | la pastilla de un preset | No usar: es la de los presets de duración. | propuesta |
+| `sui-time-picker-status` | pastilla Disponible/Ocupado/En reunión/Desconectado | No usar: el estado del repartidor ya tiene su badge. | propuesta |
 
 ## Tamaño en mobile y en web
 
@@ -95,23 +98,25 @@ En mobile se toca con el dedo: lo que se toca mide **44 px o más**. En web, con
 chico. En pantallas de los dos se elige con el servicio de breakpoints de la app (`bp`, en
 `services/breakpoints.service.ts`).
 
-`size` tiene `small` (36), `medium` (40, default) y **`large` (48)**, extensión SUI: mide lo mismo
-que `sui-input` y `sui-select` `large`, que van al lado en los formularios de horario. Con `large`
-el panel también crece: **filas de 44** y **Cancelar / Aplicar en `large` (48)**. En mobile
-(≤ 767 px) las filas miden 44 con cualquier `size`.
+`size` tiene `small` (36), `medium` (40, default), **`large` (48)**, extensión SUI: mide lo mismo
+que `sui-input` y `sui-select` `large`, que van al lado en los formularios de horario, y **`xlarge`
+(52)**, el de `sui-input` `xlarge`. Con `large` y `xlarge` el panel también crece: **filas de 44** y
+**Cancelar / Aplicar en `large` (48)**. En mobile (≤ 767 px), con cualquier `size`, las filas miden
+44 y **Cancelar / Aplicar van en `large`** (fix 04-10-2026: antes, con el campo en `medium`, el pie
+quedaba en 36; ahora hace lo mismo que el `sui-datepicker`).
 
-| pieza | `small` · `medium` en web | `large` | mobile (cualquier size) | fuente |
-|---|---|---|---|---|
-| campo (trigger) | 36 · 40 | 48 | el del `size` | 36/40: medido · 48: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
-| fila de la columna | 36 | 44 | 44 | 36: Figma · 44: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
-| Cancelar / Aplicar | 36 | 48 | el del `size` | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| pieza | `small` · `medium` en web | `large` | **`xlarge`** | mobile (cualquier size) | fuente |
+|---|---|---|---|---|---|
+| campo (trigger) | 36 · 40 | 48 | **52** | el del `size` | 36/40: medido · 48: canon (aprobado por el dueño, 03-10-2026), extensión SUI · 52: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| fila de la columna | 36 | 44 | 44 | 44 | 36: Figma · 44: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| Cancelar / Aplicar | 36 | 48 | 48 | **48** | 48 en large: canon (aprobado por el dueño, 03-10-2026) · 48 en mobile con cualquier size: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 
-En large y xlarge el texto sube a 16 px (regla del 03-10-2026): con `large`, la hora del campo y la
-de las filas van en 16/24; la fila sigue en 44 (el padding bajó de 12 a 10).
+En large y xlarge el texto sube a 16 px (regla del 03-10-2026): con `large` y `xlarge`, la hora del
+campo y la de las filas van en 16/24; la fila sigue en 44 (el padding bajó de 12 a 10).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| horario en un formulario | `large` | `medium`, o `small` en filas densas | propuesta, falta aprobación |
+| horario en un formulario | `large` (48) o `xlarge` (52) si va junto a campos xlarge | `medium`, o `small` en filas densas | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: propuesta, falta aprobación |
 
 ```html
 <sui-time-picker label="Cierra" format="12h" [step]="5" [durationPresets]="[]"
@@ -131,7 +136,7 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 | `durationPresets` (cualquiera) | se leen como hora desde la medianoche, no como duración | si el DS los cambia para sumar sobre la hora elegida («en 30 min») |
 | `sui-time-picker-item` suelto | fila de 36 px, densa | una lista desplegable de horas en web |
 | `sui-time-picker-duration` suelto | es parte de los presets | — |
-| `sui-time-picker-status` | textos en inglés; el estado del repartidor ya tiene su badge | un panel de disponibilidad del equipo del local, con los textos en español |
+| `sui-time-picker-status` | el estado del repartidor ya tiene su badge | un panel de disponibilidad del equipo del local |
 
 ## API
 
@@ -151,10 +156,10 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 | `error` | `boolean` | `false` |
 | `placeholder` | `string` | `'Seleccionar hora'` |
 | `disabled` | `boolean` | `false` |
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` |
+| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
 | `format` | `'12h' \| '24h'` | `'12h'` |
 | `step` | `number` | `5` |
-| `durationPresets` | `readonly SuiTimeDurationPreset[]` | `DEFAULT_DURATION_PRESETS` |
+| `durationPresets` | `readonly SuiTimeDurationPreset[]` | `[]` |
 | `inline` | `boolean` | `false` |
 | `showFooter` | `boolean` | `true` |
 | `value` · model, `[(value)]` | `SuiTimeValue \| null` | `null` |
@@ -213,16 +218,17 @@ interface SuiTimeDurationPreset { label: string; minutes: number; }
 
 ## Trampas
 
-- **Los presets de duración no son duraciones**: «30 min» pone la hora en 00:30 (12:30 AM). Por eso
-  se pasan siempre `[durationPresets]="[]"`. Sin eso, el panel muestra cuatro pastillas que
-  rompen la hora.
+- **Los presets de duración no son duraciones**: «30 min» pone la hora en 00:30 (12:30 AM). Desde
+  el 04-10-2026 el default es `[]` y el panel no los muestra; pasarlos (`DEFAULT_DURATION_PRESETS`
+  sigue exportado) los vuelve a poner con ese mismo comportamiento.
 - **`value.hours` va de 0 a 23** aunque se muestre en 12h: 9:30 PM es `{ hours: 21, minutes: 30 }`.
 - **Al abrir sin valor arranca en 9:00 AM**, no vacío.
 - **Cerrar con clic afuera o Escape descarta** lo elegido, igual que Cancelar.
 - Con `step` que no contiene el minuto guardado (21:37 con step 5), la columna de minutos no
   marca ninguno.
-- Cancelar / Aplicar solo crecen con `size="large"`: con `medium` en mobile siguen en 36. En el
-  teléfono va `large`.
+- Cancelar / Aplicar van en `large` (48) con `size="large"`/`"xlarge"` y, desde el 04-10-2026,
+  siempre en mobile (≤ 767 px), igual que el `sui-datepicker`. En web con `small`/`medium`
+  siguen en 36.
 - El panel flota con el overlay del DS (como `sui-select`): se da vuelta si no entra abajo.
 - `sui-time-picker-status` dice «Disponible», «Ocupado», «En reunión» y «Desconectado» por
   defecto (antes venían en inglés del Figma); `label` sigue sirviendo para cambiarlo.

package/docs/sui-toast/README.md

@@ -39,9 +39,9 @@ toast · bandeja → notification.**
 > DS» sale de su texto o de su código publicado; «canon» es lo ya aprobado (README de `sui-alert`,
 > `docs/CANON-SUI.md` o un pedido del dueño escrito en el código); el resto es **propuesta**.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (sin prototipos, vitrinas ni tests):
-> **~700 llamadas en 106 archivos**; de ellas, **560 con título fijo** (en 102 archivos) — 348 `error`,
-> 179 `success`, 23 `info`, 10 `warning`, 0 `feature` — más 3 `show()`. El resto arma el título con variables.
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (sin prototipos, vitrinas ni tests):
+> **705 llamadas en 108 archivos**, todas con el `SuiToastService` de la copia local. El desglose
+> por tipo está abajo, en «Usos de hoy que rompen la regla».
 
 ### Lo que sí dice la guía del DS
 
@@ -93,21 +93,21 @@ toast · bandeja → notification.**
 
 ### Usos de hoy que rompen la regla
 
-- **Rompen el canon — 3 toasts de error que no se van y no tienen acción → `sui-alert`** en el
-  modal de eliminar cuenta: `pages/empresa/about/about.ts:103`, `pages/repartidor/about/about.ts:97`,
-  `pages/customer/about/about.ts:135` («No puedes eliminar tu cuenta» + el motivo, `duration: Infinity`).
-- **Rompen el canon de copy — 104 errores que empiezan con «Error…»** («Error al cargar productos»)
-  → «No se pudo…»: `pages/products/products.ts:415`, `pages/customers/customers.ts:244`,
-  `pages/settings/team/team.ts:315`. Y **26** que concatenan `e.message` al texto (puede salir
-  texto técnico o en inglés).
-- **Rompen el canon de copy — 5 títulos en minúscula:** `pages/driver/driver-profile/driver-profile.ts:538`
-  («ubicación activada»), `:552`, `:597`, `:614`, `pages/driver/driver-order-detail/driver-order-detail.ts:438`.
-- **Romperían la propuesta — 47 errores al cargar como toast** → alert o empty state con
-  «Reintentar»: `pages/products/products.ts:415`, `pages/driver/driver-history/driver-history.ts:198`.
-- **Romperían la propuesta — 126 títulos con punto final**, casi todos dos frases en una →
-  título + `description`: `components/map-picker-modal/map-picker-modal.ts:260` («Permiso denegado.
-  Usa la barra de búsqueda…»), `core/services/compartir-viaje.service.ts:78`. 62 pasan de 60
-  caracteres.
+Medido de nuevo el 04-10-2026: 705 llamadas en 108 archivos. Con el título escrito entre comillas
+simples: 328 `error`, 123 `success`, 18 `info`, 5 `warning`, 0 `feature`, más 3 `show()`; el resto
+arma el título con variables. La pasada de copy del 03-10-2026 en la app ya corrigió casi todos los
+«Error al…», los títulos en minúscula, los títulos con punto final y los 3 toasts sin acción y con
+`duration: Infinity` de «Acerca de» (ahora duran 6 s). Queda:
+
+- **Rompe el canon de copy — 1 error que empieza con «Error…»:**
+  `pages/driver/driver-order-detail/driver-order-detail.ts:1548` («Error al cancelar el pedido»).
+- **Rompen el canon de copy — 18 errores que muestran `e.message`** cuando existe (puede salir
+  texto técnico o en inglés): `components/transfer-tenant-modal/transfer-tenant-modal.ts:82`,
+  `pages/driver/driver-dashboard/driver-dashboard.ts:1601`, `pages/central/central-gastos/central-gastos.ts:183`.
+  Algunos de esos textos de respaldo además llevan punto final (`pages/super-admin/master-viajes/master-viajes.ts:82`).
+- **Romperían la propuesta — 57 errores al cargar como toast** («No se pudo cargar…») → alert o
+  empty state con «Reintentar»: `pages/driver/driver-history/driver-history.ts:200`,
+  `pages/settings/team/team.ts:307`.
 
 ## Tamaño en mobile y en web
 
@@ -117,7 +117,7 @@ El toast **no tiene `size`**: siempre es un alert `large`.
 |---|---|---|---|
 | ancho | todo el ancho, con margen lateral | hasta 360 px, en la esquina | según el componente |
 | dónde | abajo, por encima de la barra inferior (nativa en iOS) | abajo a la derecha | según el componente |
-| la X de cerrar | se ve de 20 px; **se toca en 40 × 40** | igual | canon (aprobado por el dueño, 03-10-2026): área táctil invisible, extensión SUI |
+| la X de cerrar | se ve de 20 px; **se toca en 44 × 44** | se ve de 20; se toca en 40 × 40 | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (antes 40, pedido del dueño 03-10-2026): área táctil invisible, extensión SUI |
 | la acción | link `medium` (20 px de alto) | link `medium` | según el componente |
 
 No hay patrón `bp.isMobile()`: el outlet ya cambia solo por breakpoint. Lo que sí cambia por
@@ -148,14 +148,17 @@ Outputs: ninguno.
 
 ## Trampas
 
-- **La X se toca en 40 × 40** aunque se vea de 20 (un `::before` invisible sobre su `<button>`,
-  desde 03-10-2026). Solo llega a la app cuando deje de usar su copia local del toast (ver abajo).
+- **La X se toca en 44 × 44 en el teléfono** (40 × 40 en web) aunque se vea de 20 (un `::before`
+  invisible sobre su `<button>`; 44 desde el 04-10-2026). La copia local de la app tiene el mismo arreglo (commit 2c637a19).
 - **La app no usa el servicio del paquete.** `master-pedidos` tiene una copia local en
   `src/app/components/sui/sui-toast/` y el outlet montado en `app.ts:66` es esa copia. La API es la
   misma; la diferencia es que la copia lee la altura de la barra nativa desde `LiquidGlassService`,
   y la del paquete desde el token `SUI_TAB_BAR`. Si inyectas `SuiToastService` del paquete en la
   app, **no aparece nada**: su outlet no está montado. Migrar = importar del paquete y proveer
   `SUI_TAB_BAR`.
+- **`CLAUDE.md` de la app dice que el toast es `ngx-sonner`: está desactualizado.** `ngx-sonner`
+  no está instalado y nadie lo importa; las 705 llamadas usan el `SuiToastService` de la copia
+  local. Ese es el canon en la app hoy (`toast.success(…)`, el mismo nombre de método que Sonner).
 - **El comentario de `style` miente:** dice `// default 'stroke'`, pero el código pone `'stroke-dark'`.
 - **Sin outlet no hay toasts:** el temporizador de cierre vive en el outlet, no en el servicio. Si el
   outlet no está montado, los toasts se acumulan en el signal y nunca se ven ni se van.
@@ -163,7 +166,9 @@ Outputs: ninguno.
 - La acción cierra el toast al tocarla, salvo `keepOpen: true`.
 - Al pasar el dedo o el mouse por la pila se abre en abanico y se queda abierta 1,2 s después de
   cerrar uno, para seguir tocando (patrón Sonner).
-- La pila lleva `aria-live="polite"`: el lector de pantalla anuncia cada toast.
+- La pila lleva `aria-live="polite"`: el lector de pantalla anuncia cada toast, una vez. El
+  `sui-alert` de adentro va con `ariaRole="none"` (desde el 04-10-2026): antes llevaba su propio
+  `role="alert"` y el toast se podía anunciar dos veces y de forma asertiva.
 - El título es texto plano; la `description` del alert interno va por `innerHTML`: no le pases
   texto escrito por el usuario sin sanear.
 

package/docs/sui-tooltip/README.md

@@ -34,9 +34,10 @@ servicio»). Es un extra: la pantalla tiene que entenderse sin él.
 > La guía del DS dice para qué es y cómo se llaman sus tamaños, pero no cuándo va cada uno. Lo
 > marcado «según la guía del DS» sale de su texto o su código publicado; el resto es **propuesta**.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (sin prototipos ni vitrinas): **6 tooltips**
-> en 6 archivos — 2 `suiTooltip` de texto en el panel del local y 4 `suiTooltipLarge` en el flujo de
-> compra del cliente.
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (sin prototipos ni vitrinas): **0 tooltips**.
+> Los 6 que había el 03-10-2026 (2 `suiTooltip` sobre un `<svg>` en el panel del local y 4
+> `suiTooltipLarge` en el flujo de compra del cliente) pasaron a texto visible en el commit
+> `77ac547a` de la app.
 
 ### Lo que sí dice la guía del DS
 
@@ -50,8 +51,8 @@ servicio»). Es un extra: la pantalla tiene que entenderse sin él.
 
 | SUI | guía | qué es | cuándo | fuente |
 |---|---|---|---|---|
-| `small` (24 px de alto, texto 12) | `xsmall` | texto de una línea, chico | El nombre de un ícono en una tabla o barra densa. | escala según la guía del DS · cuándo: propuesta |
-| `medium` (34 px, texto 14) — default SUI | `small` (default de la guía) | texto de una línea | Lo normal: una frase corta que explica. | escala según la guía del DS · cuándo: propuesta |
+| `small` (caja de 20 px en `dark`, 22 en `light` por el borde; 24 con la flecha; texto 12) | `xsmall` | texto de una línea, chico | El nombre de un ícono en una tabla o barra densa. | escala según la guía del DS · cuándo: propuesta |
+| `medium` (caja de 28 px en `dark`, 30 en `light`; 34 con la flecha; texto 14) — default SUI | `small` (default de la guía) | texto de una línea | Lo normal: una frase corta que explica. | escala según la guía del DS · cuándo: propuesta |
 | `large` (280 px, título + descripción + ícono) | `medium` | contenido rico | Explicar un término con título y una o dos frases. Se activa solo al usar `[suiTooltipLarge]`. | escala según la guía del DS · cuándo: propuesta |
 | `xlarge` (320 px) | — | rico, más ancho | No usar hoy. Extensión de SUI. **Cuándo sí:** una explicación rica que en 280 px queda en más de cuatro líneas. | propuesta |
 
@@ -59,16 +60,16 @@ servicio»). Es un extra: la pantalla tiene que entenderse sin él.
 
 | input | cuándo | ejemplo real de la app | fuente |
 |---|---|---|---|
-| `suiTooltip="…"` | Una frase, sin punto final. | `components/customer-segments/customer-segments.html:8` («Ingresos por tipo de cliente») | propuesta |
-| `[suiTooltipLarge]="{ title, description, icon }"` | Un término que necesita título y explicación. | `core/service-fee.ts:33` («Tarifa de servicio») | propuesta |
-| `suiTooltipLarge.dismissible: true` | No usar hoy: lo deja abierto hasta tocar la X o Escape, que es lo que hace un popover. **Cuándo sí:** en web, una explicación larga que la persona lee con calma mientras mueve el mouse. | `core/service-fee.ts:39` (hoy en `true`, en pantallas solo de mobile) | propuesta |
+| `suiTooltip="…"` | Una frase, sin punto final. | (sin uso hoy) | propuesta |
+| `[suiTooltipLarge]="{ title, description, icon }"` | Un término que necesita título y explicación. | (sin uso hoy) | propuesta |
+| `suiTooltipLarge.dismissible: true` | No usar hoy: lo deja abierto hasta tocar la X o Escape, que es lo que hace un popover. **Cuándo sí:** en web, una explicación larga que la persona lee con calma mientras mueve el mouse. | (sin uso hoy) | propuesta |
 
 ### `theme`, `position` y el resto
 
 | prop | valor | cuándo | fuente |
 |---|---|---|---|
 | `theme` | `auto` | **Siempre.** Oscuro sobre la app en claro (lo que pide la guía) y claro sobre la app en oscuro. | propuesta (la guía: `dark` por default) |
-| `theme` | `dark` | Igual que `auto` en modo claro, pero no se invierte en modo oscuro. Hoy lo usan los 4 del cliente. | según la guía del DS (default) |
+| `theme` | `dark` | Igual que `auto` en modo claro, pero no se invierte en modo oscuro. | según la guía del DS (default) |
 | `theme` | `light` (default SUI) | No usar hoy: sobre una página clara parece una card más. **Cuándo sí:** ya lo da `auto` en modo oscuro. | propuesta |
 | `position` | `top` (default) | Siempre que haya espacio. Si no lo hay, el CDK lo da vuelta solo. | propuesta |
 | `position` | `right` · `left` | Íconos de una barra lateral angosta (el sidebar colapsado). | propuesta |
@@ -81,14 +82,10 @@ servicio»). Es un extra: la pantalla tiene que entenderse sin él.
 
 ### Usos de hoy que rompen la regla
 
-- **4 tooltips en pantallas que solo existen en el celular** (la explicación de la tarifa de
-  servicio del cliente): `pages/customer/cart/cart.html:177`, `pages/customer/checkout/checkout.html:366`,
-  `pages/customer/confirmation/confirmation.html:188`, `pages/customer/order-tracking/order-tracking.html:684`.
-  Rompen la guía (hover o foco). Pasarían a un `sui-modal-sheet` al tocar el ícono, con el mismo
-  texto de `core/service-fee.ts`.
-- **2 tooltips sobre un `<svg>` que no se puede enfocar** (y con `#a3a3a3` suelto):
-  `components/customer-segments/customer-segments.html:8`, `components/product-categories/product-categories.html:8`.
-  Ni el teclado ni el dedo llegan. El host pasaría a un botón de solo ícono con `aria-label`.
+Ninguno (04-10-2026). Los 6 que rompían la regla ya se corrigieron en la app (commit `77ac547a`):
+la tarifa de servicio del cliente se explica con una línea visible (`core/service-fee.ts:31`) y los
+dos `<svg>` con tooltip del panel del local pasaron a subtítulo
+(`components/customer-segments/customer-segments.html:6`, `components/product-categories/product-categories.html:6`).
 
 ## Tamaño en mobile y en web