@ajuarezso/sui-design-system 0.22.0 → 0.23.1

package/docs/sui-datepicker/README.md

@@ -2,7 +2,7 @@
 name: sui-datepicker
 selector: sui-datepicker
 resumen: Calendario para elegir una fecha o un rango de fechas, en popover o en línea
-alternativas: [sui-input type="date" (una fecha suelta en un formulario: abre el selector del sistema), sui-tab-chips + sui-radio-label (día y franja de un pedido programado), sui-tab-chips o sui-select (períodos fijos: hoy, 7 días, 30 días)]
+alternativas: [sui-input type="date" (una fecha suelta en un formulario: abre el selector del sistema), sui-tab-chips + sui-radio-label (día y franja de un pedido programado), sui-segmented-control (2 a 4 períodos fijos: hoy, 7 días, 30 días), sui-tab-chips (5 o más períodos fijos)]
 ---
 
 # sui-datepicker
@@ -23,8 +23,8 @@ un **calendario en línea** donde importa ver el mes entero (días con pedidos m
 - **El día y la hora de un pedido programado**: el checkout ya tiene su hoja (`sui-modal-sheet`
   con `sui-tab-chips` para el día y `sui-radio-label` con `flip` para la franja). Es la maqueta
   aprobada.
-- **Períodos fijos** («Hoy», «Últimos 7 días», «Este mes») sin rango libre: `sui-tab-chips`
-  (super admin, ganancias del repartidor) o `sui-select` (resumen del local).
+- **Períodos fijos** («Hoy», «Últimos 7 días», «Este mes») sin rango libre: `sui-segmented-control`
+  si son 2 a 4, `sui-tab-chips` si son 5 o más o se deslizan (canon, dueño 04-10-2026).
 - Una hora: `sui-time-picker`.
 
 Regla corta: **rango o calendario visible → datepicker · una fecha en un formulario → `sui-input
@@ -65,14 +65,14 @@ type="date"` · día + franja de entrega → la hoja del checkout.**
 | `min` / `max` | Siempre que haya un límite real: un cupón no vence en el pasado (`min` = hoy), un reporte no pasa de hoy (`max` = hoy). Los presets se recortan al límite. | propuesta |
 | `markedDates` | Días con algo: pedidos programados, gastos cargados. El punto es chico: dice «hay algo», no cuánto. | propuesta |
 | `presets` | Los 8 de fábrica están en español (Hoy, Últimos 7 días… Todo el tiempo). Recortarlos a los que la pantalla usa: un reporte del local no necesita «Últimos 12 meses» si no hay datos de hace un año. | propuesta |
-| `placeholder` | Lo que se elige, no «Seleccionar fecha»: «Elige el período», «Desde cuándo». | propuesta |
+| `placeholder` | El default «Seleccionar fecha» ya está en español y se usa tal cual. Cambiarlo por lo que se elige («Elige el período», «Desde cuándo») es propuesta: hoy choca con esa regla. | default: canon (CANON-SUI §5.7) · cambiarlo: propuesta, falta aprobación |
 | `disabled` | Mientras carga lo que depende de la fecha. | propuesta |
 
 Usos de hoy que rompen la regla: **0** (no hay datepickers). Los 8 campos de fecha son fechas
-sueltas en formularios y ya usan `sui-input`: `pages/discounts/discounts.html:181` y `:285`
-(«Válido hasta»), `pages/super-admin/super-admin.html:323`, `:329` y `:414`,
-`pages/super-admin/master-gastos/master-gastos.html:215`,
-`pages/central/central-gastos/central-gastos.html:115`, y `pages/promociones/promociones.html:336`
+sueltas en formularios y ya usan `sui-input` (líneas del `type`, medidas el 04-10-2026):
+`pages/discounts/discounts.html:189` y `:301` («Válido hasta»), `pages/super-admin/super-admin.html:324`,
+`:330` y `:419`, `pages/super-admin/master-gastos/master-gastos.html:220`,
+`pages/central/central-gastos/central-gastos.html:115`, y `pages/promociones/promociones.html:341`
 (`datetime-local`, «Programar»).
 
 **A decidir por el dueño** (la regla de arriba es la lectura plana; la contraria también se sostiene):
@@ -80,34 +80,41 @@ sueltas en formularios y ya usan `sui-input`: `pages/discounts/discounts.html:18
 | opción | a favor | en contra |
 |---|---|---|
 | fecha suelta → `sui-input type="date"` (la propuesta) | selector del sistema, 48 px, cero código nuevo, 0 cambios en la app | se ve distinto en iOS, Android y web; no marca días |
-| toda fecha → `sui-datepicker` | se ve igual en todos lados, con la marca | el popover de 368 px no es hoja en mobile, el trigger mide 40 px sin `size`, y los botones del footer están en inglés (ver Trampas) |
+| toda fecha → `sui-datepicker` | se ve igual en todos lados, con la marca | el popover de 368 px no es hoja en mobile, el trigger mide 40 px si no se pasa `size="large"`, las celdas de día miden 40 y los presets 36 (ver «Tamaño») |
 
 ## Tamaño en mobile y en web
 
-En mobile se toca con el dedo: lo que se toca mide **44 px o más** (40 en los botones sueltos). En
-web, con mouse, puede ir más chico. En pantallas de los dos se elige con el servicio de breakpoints
+En mobile se toca con el dedo: lo que se toca mide **44 px o más** (canon del dueño, 04-10-2026).
+Para eso está **`xlarge`**: con los otros sizes las celdas de día (40) y los presets (36) no llegan.
+En web, con mouse, puede ir más chico. En pantallas de los dos se elige con el servicio de breakpoints
 de la app (`bp`, en `services/breakpoints.service.ts`).
 
-Tiene `size` para el campo: `small` (36), `medium` (40, default, el de siempre) y **`large` (48)**,
-el mismo alto que `sui-input` y `sui-select` `large`. Con `large` **y siempre en mobile (≤ 767
-px)** el panel también crece: **flechas de mes de 40** y **Cancelar / Aplicar en `large` (48)**. En
-el teléfono el footer del rango pone el resumen «Rango: …» arriba y los dos botones abajo, 50/50.
-
-| pieza | web (`medium`) | `large` | mobile (cualquier size) | fuente |
-|---|---|---|---|---|
-| campo (trigger) | 40 | 48 | el del `size` | 40: medido · 36 y 48: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
-| celda de día | 40 × 40, paso de 48 | igual | 40 × 40, paso de 44 | medido |
-| flechas de mes | 24 | 40 | 40 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
-| Cancelar / Aplicar | 36 | 48 | 48 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
-
-En large y xlarge el texto sube a 16 px (regla del 03-10-2026): con `large`, la fecha del campo (y
-su placeholder) va en 16/24. El calendario no cambia: los días, el mes y el resumen del rango siguen
-en 14.
+Tiene `size` para el campo: `small` (36), `medium` (40, default, el de siempre), **`large` (48)**,
+el mismo alto que `sui-input` y `sui-select` `large`, y **`xlarge` (52)**, el de `sui-input` `xlarge`.
+Con `large` **y siempre en mobile (≤ 767 px)** el panel también crece: **flechas de mes de 40** y
+**Cancelar / Aplicar en `large` (48)**. Con **`xlarge`** todo lo que se toca llega a 44: **días de
+44 × 44** (`sui-day-cell` `large`, gap 4: 7 × 44 + 6 × 4 = 332, entra en 390), **flechas de mes de
+44** (`sui-date-selector` `large`, barra de 52) y **rangos predefinidos de 44** (`sui-period-range`
+`large`). En el teléfono el footer del rango pone el resumen «Rango: …» arriba y los dos botones
+abajo, 50/50.
+
+| pieza | web (`medium`) | `large` | mobile (`small`–`large`) | **`xlarge`** | fuente |
+|---|---|---|---|---|---|
+| campo (trigger) | 40 | 48 | el del `size` | **52** | 40: medido · 36 y 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 |
+| celda de día | 40 × 40, paso de 48 | igual | 40 × 40, paso de 44 (**no llega a 44**) | **44 × 44**, paso de 48 | 40: medido · 44: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| preset del rango (`sui-period-range`) | 168 × 36 | igual | 36 de alto, en fila que se desliza (**no llega a 44**) | **44** de alto | 36: medido · 44: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| flechas de mes | 24 | 40 | 40 | **44** | 40: canon (aprobado por el dueño, 03-10-2026) · 44: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| Cancelar / Aplicar | 36 | 48 | 48 | 48 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+
+En large y xlarge el texto sube a 16 px (regla del 03-10-2026): con `large` y `xlarge`, la fecha del
+campo (y su placeholder) va en 16/24. Con `large` el calendario no cambia (días, mes y resumen en
+14); con `xlarge` los días, el mes y los rangos predefinidos también van en 16/24 (sus piezas son
+`large`). El resumen del rango sigue en 14.
 
 ```html
 <!-- Web: popover. Mobile: en línea dentro de un sui-modal fullscreen. -->
 @if (bp.isMobile()) {
-  <sui-datepicker mode="range" size="large" [inline]="true" [calendars]="1" [(value)]="rango" />
+  <sui-datepicker mode="range" size="xlarge" [inline]="true" [calendars]="1" [(value)]="rango" />
 } @else {
   <sui-datepicker mode="range" placeholder="Elige el período" [(value)]="rango" />
 }
@@ -115,8 +122,8 @@ en 14.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| fecha en un formulario | `large` | `medium` | propuesta, falta aprobación |
-| filtro de período de un reporte | `large`, en línea dentro de un modal | `medium`, popover | propuesta, falta aprobación |
+| fecha en un formulario | `xlarge` (días de 44) | `medium` | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (el «web medium» es propuesta) |
+| filtro de período de un reporte | `xlarge`, en línea dentro de un modal | `medium`, popover | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (el «web medium» es propuesta) |
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -129,7 +136,7 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 | `mode="date"` en un formulario | `sui-input type="date"` hace lo mismo con el selector del sistema | un calendario que se ve siempre, con días marcados (pedidos programados de la semana para el local) |
 | `markedDates` | no hay calendarios a la vista | días con pedidos programados o con gastos cargados |
 | `calendars="2"` en mobile | se fuerza a 1 solo | — |
-| el popover (`inline=false`) en mobile | no es hoja: es un panel flotante de 368 px y el trigger mide 40 | ninguno en mobile; en web, cualquiera |
+| el popover (`inline=false`) en mobile | no es hoja: es un panel flotante de 368 px (aunque el campo `large` mida 48) | ninguno en mobile; en web, cualquiera |
 
 ## API
 
@@ -141,7 +148,7 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 | `mode` | `'date' \| 'range'` | `'date'` |
 | `calendars` | `1 \| 2` | `2` |
 | `inline` | `boolean` | `false` |
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` |
+| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
 | `placeholder` | `string` | `'Seleccionar fecha'` |
 | `showFooter` | `boolean` | `true` |
 | `disabled` | `boolean` | `false` |
@@ -179,7 +186,14 @@ interface DatepickerPreset { id: DatepickerPresetId; label: string; resolve: (ho
 - En mobile (hasta 767 px) **se fuerza un solo calendario** aunque `calendars` sea 2.
 - El campo muestra la fecha como `dd/MM/yyyy`; el rango, como «1 de oct 2026 – 7 de oct 2026».
 - «Todo el tiempo» devuelve `{ start: null, end: null }`: quien lo recibe tiene que tratarlo como
-  «sin filtro», no como «vacío».
+  «sin filtro», no como «vacío». El campo muestra «Todo el tiempo» (antes caía al placeholder y
+  parecía vacío; fix 04-10-2026). Un `{ start: null, end: null }` que llega de afuera se sigue
+  mostrando como placeholder: el componente no sabe si es «todo» o «nada».
+- **Accesibilidad (04-10-2026)**: el panel es un `dialog` modal con nombre («Elegir fecha» /
+  «Elegir período»; `group` en `inline`), la fila LU…DO está dentro de la grilla, cada día se
+  anuncia con la fecha completa («martes 7 de octubre de 2026»), hoy lleva `aria-current="date"`,
+  inicio y fin del rango salen seleccionados, y las flechas mueven el foco entre días (← → un
+  día, ↑ ↓ una semana, Inicio/Fin a la punta de la semana). Las flechas no cambian de mes.
 - Cierra con clic afuera y con Escape, y eso **descarta** la elección (como Cancelar).
 - Las piezas internas son `sui-date-selector`, `sui-day-label`, `sui-day-cell` y
   `sui-period-range`: no se arman a mano.

package/docs/sui-day-cell/README.md

@@ -54,18 +54,23 @@ Usos de hoy que rompen la regla: **0**.
 
 ## Tamaño en mobile y en web
 
-**No tiene `size`.** Mide 40 × 40 fijo. En el `sui-datepicker` el paso entre celdas es de 44 px en
-mobile (gap 4) y 48 en web (gap 8): llega justo a los 44.
+Tiene `size`: **`medium`** (default, 40 × 40, Figma) y **`large`** (44 × 44, número en 16/24). El
+`sui-datepicker` `xlarge` pinta sus días en `large`. En el `sui-datepicker` el paso entre celdas es
+de 44 px en mobile (gap 4) y 48 en web (gap 8) con `medium`, y 48 (gap 4) con `large`.
 
-| uso | mobile | web | fuente |
-|---|---|---|---|
-| celda de una grilla | 40 × 40 con gap 4 (paso 44) | 40 × 40 con gap 8 | medido |
+| size | celda | texto | uso | fuente |
+|---|---|---|---|---|
+| `large` | **44 × 44** | 16/24 | mobile: lo que se toca llega a 44 (en 390 entran 7 × 44 con gap 4 = 332) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| `medium` (default) | 40 × 40 | 14/20 | web | medido (Figma 437:174) |
+
+Los puntos de hoy y de marcado no cambian con el size.
 
 ```html
-<!-- La grilla da el paso: gap 4 en mobile, 8 en web -->
-<div class="semana" [style.gap.px]="bp.isMobile() ? 4 : 8">
+<!-- La grilla da el paso: gap 4 -->
+<div class="semana" [style.gap.px]="4">
   @for (d of dias(); track d.fecha) {
-    <sui-day-cell [day]="d.numero" [today]="d.esHoy" [marked]="d.conTurno" (clicked)="elegir(d)" />
+    <sui-day-cell [size]="bp.isMobile() ? 'large' : 'medium'" [day]="d.numero" [today]="d.esHoy"
+                  [marked]="d.conTurno" (clicked)="elegir(d)" />
   }
 </div>
 ```
@@ -86,6 +91,7 @@ mobile (gap 4) y 48 en web (gap 8): llega justo a los 44.
 |---|---|---|
 | `day` | `number \| string` | — (requerido) |
 | `type` | `'basic' \| 'range'` | `'basic'` |
+| `size` | `'medium' \| 'large'` | `'medium'` |
 | `rangePosition` | `'start' \| 'end' \| 'in' \| null` | `null` |
 | `selected` | `boolean` | `false` |
 | `marked` | `boolean` | `false` |
@@ -108,6 +114,9 @@ mobile (gap 4) y 48 en web (gap 8): llega justo a los 44.
 - `today` y `marked` juntos: se ve solo el punto de hoy.
 - `outOfMonth` no la bloquea: se puede tocar igual. Para bloquearla, `disabled`.
 - Ya trae el arreglo de iOS para el `:active` pegado.
+- Sin `ariaLabel` se anuncia «Día N», sin mes: dentro de `sui-datepicker` ya recibe la fecha
+  completa. Hoy lleva `aria-current="date"` y, en `type="range"`, `start`/`end` salen
+  `aria-selected` (04-10-2026).
 
 ## Ejemplo
 

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

@@ -31,8 +31,8 @@ Story: [Molecules/Date & Time/Day Label](https://sui-design-system.web.app/?path
 | input | valor | cuándo | fuente |
 |---|---|---|---|
 | `label` | dos letras en mayúsculas | Lo normal, igual que el datepicker: `LU MA MI JU VI SÁ DO`. La semana arranca el lunes. | propuesta |
-| `label` | una letra | No usar: «M» es martes y miércoles a la vez. | no usar |
-| `label` | tres letras o más | No usar: «MIÉ» entra justo en 40 px, pero rompe el formato de dos letras del datepicker; «LUNES» ya no entra. | no usar |
+| `label` | una letra | No usar: «M» es martes y miércoles a la vez. | propuesta |
+| `label` | tres letras o más | No usar: «MIÉ» entra justo en 40 px, pero rompe el formato de dos letras del datepicker; «LUNES» ya no entra. | propuesta |
 
 Usos de hoy que rompen la regla: **0**.
 

package/docs/sui-divider/README.md

@@ -15,7 +15,7 @@ Story: [Atoms/Divider/Divider](https://sui-design-system.web.app/?path=/docs/ato
 
 - **horizontal**: bloques dentro de una card, filas de una lista, secciones de un formulario, el
   subtotal del total.
-- **vertical**: datos en una misma fila («4,7 | 25–35 min | Envío S/ 3.00»).
+- **vertical**: datos en una misma fila («4.7 | 25–35 min | Envío S/ 3.00»).
 
 **No lo uses** para:
 
@@ -35,14 +35,14 @@ Story: [Atoms/Divider/Divider](https://sui-design-system.web.app/?path=/docs/ato
 > dice cuándo separar con línea y cuándo con espacio. Lo marcado «según la guía del DS» sale de
 > ahí; el resto es **propuesta, falta aprobación**.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **13 dividers en 10 pantallas**, todos
-> horizontales, sin contar prototipos ni vitrinas (`master-preview`, `master-prototipos`,
+> Uso medido el 04-10-2026 en `master-pedidos/src/app`: **39 dividers en 14 archivos** (los 13 de
+> antes + las 26 líneas a mano que se pasaron el 03-10-2026), todos horizontales, sin contar prototipos ni vitrinas (`master-preview`, `master-prototipos`,
 > `mockup-sheets-*`, `dx/*`, `_guia-*`, `master-rutina`, `master-medico`, `master-ejercicios`,
 > `dev-index`).
 
 | orientation | cuándo | ejemplo real | fuente |
 |---|---|---|---|
-| `horizontal` (default) | Separa bloques o filas. El espacio arriba y abajo lo pone el `gap` del padre, no el divider. | `pages/driver/driver-dashboard/driver-dashboard.html:1124` (entre filas, `@if (!last)`) | según la guía del DS («Line») |
+| `horizontal` (default) | Separa bloques o filas. El espacio arriba y abajo lo pone el `gap` del padre, no el divider. | `pages/driver/driver-dashboard/driver-dashboard.html:1127` (entre filas, `@if (!last)`) | según la guía del DS («Line») |
 | `vertical` | Separa datos cortos en una sola fila. El padre necesita alto (si no, mide 16 px). | — (sin usos) | propuesta, falta aprobación |
 
 **Corregido el 03-10-2026:** las 26 líneas hechas a mano (mi-negocio, checkout, carrito, billetera y movimientos) ya son `sui-divider`. Seis conservan un `margin` propio porque sus vecinos se separan con margen y no con el `gap` del padre; pasarlo al `gap` es un cambio aparte.
@@ -97,6 +97,6 @@ Outputs: ninguno.
 
 <!-- Datos en una fila -->
 <div class="meta">
-  <span>4,7</span><sui-divider orientation="vertical" /><span>25–35 min</span>
+  <span>4.7</span><sui-divider orientation="vertical" /><span>25–35 min</span>
 </div>
 ```

package/docs/sui-drawer-footer/README.md

@@ -58,15 +58,23 @@ Usos de hoy que rompen las reglas: **0** (no se usa).
 
 ## Tamaño en mobile y en web
 
-**No tiene tamaño**: los botones miden **40 px**, sin input para cambiarlos. En mobile el canon de
-modales pide 48. El pie mide 80 px de alto.
+El `size` cambia **los botones** (escala del `sui-button`):
+
+| size | botones | texto del checkbox / switch | alto del pie | fuente |
+|---|---|---|---|---|
+| `medium` (default) | 40 | 14 | 80 | Figma |
+| `large` | 48 | 16 (Paragraph/Medium) | 88 (el padding sigue en 20) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono. Size nuevo del 04-10-2026 |
+
+`large` es el siguiente de la escala del `sui-button` (48), el mismo alto que el canon de modales.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| par de botones | `sui-modal-footer` (botones `large`, 48) | `sui-modal-footer` | canon (CLAUDE.md, botones: size `large` en todos los modales) |
+| pie de un drawer | `large` (48) | `medium` (40) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| par de botones de un modal | `sui-modal-footer` (botones `large`, 48) | `sui-modal-footer` | canon (CLAUDE.md, botones: size `large` en todos los modales) |
 
 ```html
-<sui-modal-footer secondaryButton="Cancelar" primaryButton="Guardar" [stretch]="bp.isMobile()" … />
+<sui-drawer-footer type="stretch" [size]="bp.isMobile() ? 'large' : 'medium'"
+                   (primaryClick)="guardar()" (secondaryClick)="cancelar()" />
 ```
 
 ## «No usar»: por qué no hoy y cuándo sí
@@ -83,6 +91,7 @@ modales pide 48. El pie mide 80 px de alto.
 | input | tipo | default |
 |---|---|---|
 | `type` | `'stretch' \| 'basic' \| 'checkbox' \| 'toggle' \| 'stepper' \| 'link-button'` | `'stretch'` |
+| `size` | `'medium' \| 'large'` | `'medium'` |
 | `primaryButton` | `SuiFooterButtonConfig \| string` | `'Continuar'` |
 | `secondaryButton` | `SuiFooterButtonConfig \| string \| null` | `'Cancelar'` |
 | `checkboxLabel` | `string` | `''` |
@@ -110,9 +119,14 @@ interface SuiFooterButtonConfig { label: string; disabled?: boolean; color?: 'pr
   «Continuar» y sin `secondaryButton` dice «Cancelar». Para un solo botón pasa
   `[secondaryButton]="null"`.
 - **`color: 'error'` se ignora**: el primario está fijo en `primary`.
-- **Sin tamaño**: botones de 40 px.
+- **`size` va de `medium` (40, default) a `large` (48)** desde el 04-10-2026; antes no tenía tamaño.
+- **Los botones del pie no emitían nada antes del 04-10-2026**: el template escuchaba `(clicked)` en
+  `sui-button`, que no tiene ese output (su evento es el `click` nativo), así que `primaryClick` y
+  `secondaryClick` nunca salían con un toque real. Arreglado (`(click)`), con test.
 - `stepper` usa `{ current, total }` con `current` desde 0, y dibuja sus propios puntos (no es
   `sui-stepper`).
+  Para el lector es un `progressbar` «Progreso» que dice «Paso 2 de 4» (`aria-valuetext`, desde
+  el 04-10-2026).
 - `checkboxActive` y `toggleActive` son `model`: `[(checkboxActive)]`.
 - El borde de arriba ya viene puesto: no le sumes otro.
 

package/docs/sui-dropdown-search/README.md

@@ -47,7 +47,7 @@ para limpiar.
 
 | prop | regla | fuente |
 |---|---|---|
-| `placeholder` | **Siempre**, en español y con elipsis: «Buscar repartidor…». El default es `'Search...'`. | canon (CANON-SUI §5: copy en español, elipsis `…`) |
+| `placeholder` | **Siempre**, en español y con elipsis: «Buscar repartidor…». El default genérico es `'Buscar…'`. | canon (CANON-SUI §5: copy en español, elipsis `…`) |
 | `[(value)]` | El texto; con él se filtra la lista. | API |
 | `disabled` | Extensión SUI, no está en el Figma. Sin caso hoy. | — |
 
@@ -71,7 +71,7 @@ mobile, mejor un `sui-modal-sheet` con `sui-input type="search"` arriba. Propues
 | input | tipo | default |
 |---|---|---|
 | `value` · model, `[(value)]` | `string` | `''` |
-| `placeholder` | `string` | `'Search...'` |
+| `placeholder` | `string` | `'Buscar…'` |
 | `disabled` | `boolean` | `false` |
 
 | output | payload |
@@ -86,7 +86,7 @@ que además deja `value` en `''`.
 ## Trampas
 
 - **No filtra.** Hay que filtrar la lista con el `value` (un `computed` sobre las opciones).
-- **El default del placeholder es `'Search...'`**, en inglés y con tres puntos. Pásalo siempre.
+- **El default del placeholder es genérico** (`'Buscar…'`, en español desde el 04-10-2026): pásalo siempre diciendo qué se busca.
 - **iOS hace zoom al enfocarlo**: el campo está en 14 px y la regla de la app pide 16 px en los
   inputs de mobile (CLAUDE.md, «Responsive mobile»). Hoy no hay forma de cambiarlo desde afuera.
 - **El teclado no trae la lupa**: el `<input>` es `type="text"` sin `enterkeyhint="search"` (la regla

package/docs/sui-emoji/README.md

@@ -11,8 +11,8 @@ Story: [Atoms/Emoji](https://sui-design-system.web.app/?path=/docs/atoms-emoji--
 
 ## Cuándo usarlo / cuándo no
 
-**Úsalo** donde la pantalla tiene que **sentirse**, no solo funcionar: un estado vacío, «¡Pedido
-confirmado!», los pasos de una landing, la barra de calificación.
+**Úsalo** donde la pantalla tiene que **sentirse**, no solo funcionar: un estado vacío, «Pedido
+confirmado», los pasos de una landing, la barra de calificación.
 
 **No lo uses** para:
 
@@ -32,10 +32,10 @@ confirmado!», los pasos de una landing, la barra de calificación.
 
 | caso | cómo | fuente |
 |---|---|---|
-| Estados vacíos y celebraciones | Emoji animado, uno solo, en `xl`. Nada de íconos genéricos en un estado vacío. | canon (preferencia del dueño: emojis animados en los estados vacíos) |
+| Estados vacíos y celebraciones | Emoji animado, uno solo, en `xl`. Nada de íconos genéricos en un estado vacío. | canon (CANON-SUI §5.6) para los estados vacíos · propuesta, falta aprobación para celebraciones y el `xl` |
 | Pasos de una landing | `lg`, uno por paso. | propuesta |
 | Junto a un título o dentro de un texto | `md` o `sm`, como acento. | propuesta |
-| Como ícono de un botón | No: el botón lleva `leftIcon`. | propuesta |
+| Como ícono de un botón | No: el botón lleva `leftIcon`. | derivado de CANON-SUI §5.7 (emojis solo en contenido escrito por un usuario; botones con `leftIcon`), falta confirmación |
 
 ### `size`
 
@@ -59,12 +59,12 @@ confirmado!», los pasos de una landing, la barra de calificación.
 
 **Usos de hoy que romperían la propuesta:**
 
-- **2 emojis como ícono de botón**: «Encargarme yo» en `pages/orders/orders.html:322` y `:353` → `leftIcon`.
+- **2 emojis como ícono de botón**: «Encargarme yo» en `pages/orders/orders.html:323` y `:354` → `leftIcon`.
 - **5 animados a la vez** en `pages/public/landing-customers/landing-customers.html:160`–`:184`
   (más otro en `:56`). No tienen copia estática: o se acepta el peso en la landing o se generan
   las copias.
 - **Un catálogo paralelo**: `core/fluent-emoji.ts` arma sus propias URLs (otro CDN incluido) y lo
-  importan 8 archivos (`components/permission-prime-modal/permission-prime-modal.ts`,
+  importan 11 archivos (medido el 04-10-2026) (`components/permission-prime-modal/permission-prime-modal.ts`,
   `pages/role-selector/role-selector.ts`, `pages/customer/order-tracking/order-tracking.ts`…).
 - **10 `<img>` con un emoji**, fuera del componente: `pages/products/add-product/add-product.html:122`
   (la URL del paquete escrita a mano, y 3 más en el mismo archivo),

package/docs/sui-empty-state/README.md

@@ -28,40 +28,30 @@ algo que avisar → alert.**
 ## Qué variante usar
 
 > **La guía del DS no tiene página del empty state.** El componente de SUI se construyó a
-> propósito con Fluent Emoji animados en vez de ilustraciones: es una decisión del proyecto
-> (memoria «emojis animados en empty states», 17-04-2026).
+> propósito con Fluent Emoji animados en vez de ilustraciones: es una decisión del proyecto, escrita
+> en CANON-SUI §5.6 (ilustración = Fluent Emoji animado, default el zorro).
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **66
-> empty-states en 40 archivos**. 25 con `action` (10 con `route`). 4 con `emoji` propio, 22 con la
-> URL del zorro pegada a mano (que ya es el default) y 40 sin `emoji`. 29 con un atributo `icon`
-> que el componente no tiene.
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **66
+> empty-states en 40 archivos**. 29 con `action` (10 con `route`). 8 con `emoji` propio y 58 sin
+> `emoji` (sale el zorro). 0 con `icon`, 0 con la URL del zorro pegada, 0 con `size`.
 
 ### Las piezas
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `emoji` vacío (default: el zorro) | Lo normal. El zorro es la mascota de los empty states y sale solo: **no pegues su URL**. | canon (memoria del proyecto) |
-| `emoji` propio | Cuando el emoji dice algo del caso: el reloj de arena en «Aún no tienes facturas» (se está esperando algo), el chef en los avisos del local. Siempre de `FLUENT_EMOJI_ANIM` (`core/fluent-emoji.ts`) o de `assets/emoji-anim/`. | canon (memoria del proyecto) |
-| `title` (obligatorio) | Qué pasa, en corto y sin punto: «Tu carrito está vacío», «Sin pedidos aún». En una búsqueda, repite lo buscado: «Nada con “pollo broaster”». | propuesta (práctica de la app) |
-| `subtitle` | Qué va a pasar o qué puede hacer la persona: «Cuando hagas tu primer pedido, aparecerá aquí.» | propuesta |
+| `emoji` vacío (default: el zorro) | Lo normal. El zorro es la mascota de los empty states y sale solo: **no pegues su URL**. | canon (CANON-SUI §5.6) |
+| `emoji` propio | Cuando el emoji dice algo del caso: el reloj de arena en «Aún no tienes facturas» (se está esperando algo), el chef en los avisos del local. Siempre de `FLUENT_EMOJI_ANIM` (`core/fluent-emoji.ts`) o de `assets/emoji-anim/`. | canon (CANON-SUI §5.6: Fluent Emoji animado) |
+| `title` (obligatorio) | Qué pasa, sin punto y en 2 a 4 palabras, con uno de tres patrones: «Todavía no hay <cosa>», «Sin <cosa>», «Tu <cosa> está vacío» («Tu carrito está vacío», «Sin pedidos aún»). En una búsqueda, repetir lo buscado («Nada con “pollo broaster”») queda fuera de esos patrones. | canon (CANON-SUI §5.6) · lo de la búsqueda: propuesta, falta aprobación |
+| `subtitle` | Una oración con punto, en futuro tranquilizador: «Cuando hagas tu primer pedido, aparecerá aquí.» | canon (CANON-SUI §5.6) |
 | `action` como string + `(actionClicked)` | La salida es algo de esta misma pantalla: «Reintentar», «Ver todo el catálogo», «Activar captura». | propuesta |
 | `action` como `{ label, route }` | La salida es otra pantalla: «Ver negocios» → `/cliente/inicio`. | propuesta |
 | sin `action` | No hay un paso obvio, o la pantalla ya tiene el botón para llenarla (el «Nuevo local» de arriba). | propuesta |
 | error de carga | Siempre con `action="Reintentar"`. Excepción: la pantalla reintenta sola y lo dice («Seguimos intentando»). | propuesta |
 
-**Usos de hoy que rompen las reglas:**
-
-- **29 con `icon="…"`**: `icon` no es un input, el atributo no hace nada. Ejemplos:
-  `pages/customer/cart/cart.html:18`, `pages/drivers/drivers.html:87`,
-  `pages/customer/order-history/order-history.html:20`. Se borra.
-- **22 con la URL del zorro pegada** (`emoji="…/Animals/Fox.png"`), que ya es el default:
-  `pages/customers/customers.html:65`, `pages/products/products.html:113`,
-  `pages/locations/locations.html:16`. Se borra.
-- **4 errores de carga sin «Reintentar»**:
-  `pages/driver/driver-dashboard/driver-dashboard.html:1071`,
-  `pages/customer/order-history/order-history.html:20`,
-  `pages/super-admin/master-drivers/master-drivers.html:524` y `:754`.
-  (`pages/public/pedido-en-vivo/pedido-en-vivo.html:50` no cuenta: reintenta solo.)
+**Usos de hoy que rompen las reglas:** 0. Los 29 `icon="…"` (que no es un input), las 22 URL del
+zorro pegadas a mano y los 4 errores de carga sin «Reintentar» se corrigieron el 03-10-2026 (commit
+`461efbec` de la app). `pages/public/pedido-en-vivo/pedido-en-vivo.html:50` sigue sin «Reintentar»
+a propósito: reintenta solo y lo dice.
 
 ## Tamaño en mobile y en web
 

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

@@ -38,7 +38,7 @@ marketing: brillo arriba, borde interior claro y un anillo del color del botón.
 
 - **Para qué es**: un botón normal con un acabado más vistoso.
 - **Default**: `neutral` (negro) en la guía; **`primary` en SUI**.
-- **Tamaños**: `medium` (40), `small` (36) y `xsmall` (32). No hay más grandes.
+- **Tamaños**: `medium` (40), `small` (36) y `xsmall` (32). SUI agrega `large` (48) para el teléfono (04-10-2026).
 - **Hover**: el brillo se aclara, no se oscurece. `basic` pasa a fondo gris plano.
 - **Deshabilitado**: fondo gris plano, sin brillo, sin anillo ni sombra, igual en los cuatro tipos.
 
@@ -55,6 +55,7 @@ marketing: brillo arriba, borde interior claro y un anillo del color del botón.
 
 | size | cuándo | fuente |
 |---|---|---|
+| `large` (48) | El CTA en el teléfono. Texto 16. | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono; extensión de SUI, la guía no lo tiene |
 | `medium` (40, default) | El CTA de la landing en desktop. | escala y default según la guía del DS · cuándo: propuesta |
 | `small` (36) | Un CTA dentro de una card de la landing (la card de un plan). | escala según la guía del DS · cuándo: propuesta |
 | `xsmall` (32) | Sin caso: en una landing el CTA nunca es tan chico. | escala según la guía del DS · cuándo: propuesta |
@@ -70,27 +71,32 @@ marketing: brillo arriba, borde interior claro y un anillo del color del botón.
 
 ## Tamaño en mobile y en web
 
-En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En web, con mouse,
-va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
-(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px):
-`[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.
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más** (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono). 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 | alto | texto | cuándo | fuente |
+|---|---|---|---|---|
+| `large` | 48 | 16 (Label/Medium) | CTA en el teléfono | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono. Size nuevo del 04-10-2026 |
+| `medium` (default) | 40 | 14 | CTA en web | Figma |
+| `small` | 36 | 14 | CTA dentro de una card en web | Figma |
+| `xsmall` | 32 | 14 | — | Figma |
+
+**Por qué `large` = 48 y no 44**: el fancy es «el mismo botón con otro acabado» que `sui-button` y su
+escala lo espeja tal cual (medium 40 / small 36 / xsmall 32). El siguiente es `large`, y el
+`large` de sui-button mide 48: el fancy en el teléfono queda del mismo alto que el botón normal
+que va al lado. El texto sube a 16 (regla de tamaños del 03-10-2026); los íconos siguen en 20.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| CTA principal de una landing | no usar fancy: `sui-button` `large` (48) | `medium` (40) | propuesta |
-| CTA dentro de la card de un plan | no usar fancy: `sui-button` `large` | `small` (36) | propuesta |
+| CTA principal de una landing | `large` (48) | `medium` (40) | propuesta |
+| CTA dentro de la card de un plan | `large` (48) | `small` (36) | propuesta |
 
 ```html
-@if (bp.isMobile()) {
-  <sui-button size="large">Empieza gratis</sui-button>
-} @else {
-  <sui-fancy-button type="primary" size="medium">Empieza gratis</sui-fancy-button>
-}
+<sui-fancy-button type="primary" [size]="bp.isMobile() ? 'large' : 'medium'">Empieza gratis</sui-fancy-button>
 ```
 
-**El fancy no tiene un tamaño táctil**: el más grande mide 40, por debajo de 44. En mobile el CTA
-va con `sui-button` `large`. Hoy no hay usos (todo el componente está en «no usar»).
+Hoy no hay usos (todo el componente está en «no usar»).
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -110,7 +116,7 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 | input | tipo | default |
 |---|---|---|
 | `type` | `'primary' \| 'neutral' \| 'basic' \| 'destructive'` | `'primary'` |
-| `size` | `'medium' \| 'small' \| 'xsmall'` | `'medium'` |
+| `size` | `'large' \| 'medium' \| 'small' \| 'xsmall'` | `'medium'` |
 | `leftIcon` | `string \| null` | `null` |
 | `rightIcon` | `string \| null` | `null` |
 | `disabled` | `boolean` | `false` |
@@ -132,8 +138,8 @@ El clic se escucha con `(clicked)`. Slots: `<ng-content>` (el texto).
 - **`type` es el relleno**, no el `type` HTML: ese se llama **`htmlType`**. `type="submit"` no
   compila (no es un tipo válido) y no hace un submit.
 - **El radio es 10 px, no pill.** Al lado de un `sui-button` (pill en SUI) se ven de dos familias.
-- **No hay `large` ni `xlarge`**: el más grande mide 40. En mobile, donde el CTA de la app es de
-  48, un fancy queda más bajo.
+- **`large` (48) es de SUI** (04-10-2026), no de la guía: en el teléfono va ese, del mismo alto que
+  el `large` de `sui-button`. No hay `xlarge`.
 - **El default es `primary`**; en la guía es `neutral`.
 - El anillo del `neutral` es un hex crudo (`#242628`): no hay token para ese gris.
 - Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.

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

@@ -92,7 +92,7 @@ Outputs: ninguno.
 
 - **La extensión se corta a 4 letras** y va en mayúsculas: `.jpeg` → `JPEG`, `.numbers` → `NUMB`.
 - **`extension` gana sobre `filename`.**
-- **El nombre para el lector de pantalla está en inglés** («File: PDF») y no se puede cambiar.
+- El nombre para el lector de pantalla es «Archivo PDF» (en español desde el 04-10-2026) y no se puede cambiar.
 - `size` es `xsmall` o `medium`: no hay `small` ni `large`.
 
 ## Ejemplo

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

@@ -132,6 +132,9 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 ## Trampas
 
 - `browseLabel` dice «Buscar archivo» por defecto (antes «Browse File»).
+- **Con teclado el control es «Buscar archivo»**, no el área. Desde el 04-10-2026 el host ya no
+  es `role="button"` ni entra en el Tab (era un control con otro adentro y Enter pedía el selector
+  dos veces). Con el mouse o el dedo, tocar cualquier parte del área sigue abriendo el selector.
 - **Llena el ancho del contenedor** desde el 03-10-2026 (antes medía 400 fijo y había que forzar
   `style="width: 100%"`). Las pantallas que lo dejaban en 400 en un contenedor ancho ahora se
   estiran; para un ancho fijo, se lo pone el consumer al host.

package/docs/sui-file-upload-card/README.md

@@ -41,7 +41,7 @@ subiendo con su barra, listo, o falló con «Reintentar».
 | input | cuándo | fuente |
 |---|---|---|
 | `file` | El nombre real del archivo (`'carta-octubre.pdf'`). La extensión da el ícono y el color. | propuesta |
-| `description` | **Siempre** se pasa: el default es un texto de ejemplo («0 KB de 120 KB»). Subiendo: «1,2 MB de 3,4 MB»; listo: «3,4 MB». | propuesta |
+| `description` | **Siempre** se pasa: el default es un texto de ejemplo («0 KB de 120 KB»). Subiendo: «1.2 MB de 3.4 MB»; listo: «3.4 MB» (punto decimal, como el «10.0 MB» que arma `sui-file-upload`). | propuesta |
 | `progress` | 0–100, solo en `in-progress`. | propuesta |
 | `statusText` | Los defaults ya están en español («Subiendo…», «Completado», «Falló»); en error, mejor el motivo: «Se cortó la conexión». | propuesta |
 | `showStatus=false` | Solo en `success`, cuando el check sobra porque la lista ya dice «Archivos subidos». | propuesta |
@@ -52,14 +52,15 @@ Usos de hoy que rompen la regla: **0**.
 ## Tamaño en mobile y en web
 
 **No tiene `size`.** Llena el ancho del contenedor (antes 400 fijo) y la X o el tacho de la derecha
-es un `sui-compact-button` `2xlarge` de **32 px** (Figma: 24), que con el aire de la tarjeta (16 de
-padding, 72 de alto mínimo) se toca bien con el dedo. «Reintentar» sigue siendo un link de 20 px de
-alto: en mobile conviene que la fila entera también reintente.
+es un `sui-compact-button` `2xlarge` de **32 px** (Figma: 24): queda debajo de los 44 del dedo. La
+fila mide 74 sin barra (ícono de 40 + padding 16 × 2 + borde 1 × 2; no hay `min-height`).
+«Reintentar» sigue siendo un link de 20 px de alto: en mobile conviene que la fila entera también
+reintente.
 
 | pieza | mobile | web | fuente |
 |---|---|---|---|
 | ancho | el del contenedor | el del contenedor | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
-| X / tacho | 32 px | 32 px | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| X / tacho | 32 px — **no llega** a 44 | 32 px | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
 | «Reintentar» | link de 20 px — **no llega** | link | medido |
 
 ```html
@@ -122,8 +123,8 @@ interface SuiFileUploadCardFile { filename: string; extension?: string; }
 
 ```html
 <sui-file-upload-card file="carta-octubre.pdf" state="in-progress" [progress]="45"
-                      description="1,2 MB de 2,6 MB" statusText="Subiendo…" />
-<sui-file-upload-card file="carta-octubre.pdf" state="error" description="2,6 MB"
+                      description="1.2 MB de 2.6 MB" statusText="Subiendo…" />
+<sui-file-upload-card file="carta-octubre.pdf" state="error" description="2.6 MB"
                       statusText="Se cortó la conexión" retryLabel="Reintentar"
                       (retryClicked)="reintentar()" (actionClicked)="quitar()" />
 ```

package/docs/sui-filter/README.md

@@ -61,7 +61,7 @@ los controles que se proyectan.
 |---|---|---|
 | `sui-filter-item` `active` | La categoría abierta (la que muestra sus opciones al lado): fondo gris, texto negro, flecha a la derecha. | propuesta (estados del Figma) |
 | `sui-filter-item` `leftIcon` | Un ícono por categoría si ayuda a ubicarla («Estado», «Local», «Repartidor»). | propuesta |
-| `sui-filter-panel-header` `clear` | Pásale texto (`clear="Limpiar"`), no `true`: con `true` dice «Clear». | canon (CANON-SUI §5: copy en español) |
+| `sui-filter-panel-header` `clear` | `clear=true` dice «Limpiar» (en español desde el 04-10-2026); un string lo cambia. | canon (CANON-SUI §5: copy en español) |
 | `sui-filter-panel-footer` | «Limpiar» a la izquierda (`stroke neutral`), «Aplicar» a la derecha (`filled primary`), mitad y mitad. | canon (orden de `sui-modal-footer`, CLAUDE.md «Botones») |
 | «Limpiar» en header **y** footer | Elegir uno. Con el footer, el header va sin link. | propuesta |
 | `applyButton` deshabilitado | `{ label: 'Aplicar', disabled: !cambio() }` mientras no se toca nada. | propuesta |
@@ -116,8 +116,8 @@ Outputs: ninguno.
 
 | input | tipo | default |
 |---|---|---|
-| `clearButton` | `SuiFooterButtonConfig \| string` | `'Clear'` |
-| `applyButton` | `SuiFooterButtonConfig \| string` | `'Apply'` |
+| `clearButton` | `SuiFooterButtonConfig \| string` | `'Limpiar'` |
+| `applyButton` | `SuiFooterButtonConfig \| string` | `'Aplicar'` |
 | `size` | `'small' \| 'medium'` | `'small'` |
 
 | output | payload |
@@ -145,8 +145,8 @@ de `sui-drawer-footer`).
 
 ## Trampas
 
-- **Los textos por defecto están en inglés**: «Clear» y «Apply» en el footer, «Clear» en el header con
-  `clear=true`. Pásalos siempre.
+- Los textos por defecto son «Limpiar» y «Aplicar» en el footer y «Limpiar» en el header con
+  `clear=true` (en español desde el 04-10-2026).
 - **La barra apila a 640 px; la app cambia a mobile a 767.** Entre 641 y 767 px la app ya está en
   mobile y la barra sigue en una fila.
 - **Varios controles en un lado van en un contenedor.** Cada slot es una fila con 12 px de separación,