@ajuarezso/sui-design-system 0.21.0 → 0.23.0

package/docs/sui-compact-select-for-input/README.md

@@ -30,7 +30,7 @@ Regla corta: **el campo cambia según una elección corta pegada a él → este
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**. Candidato: el gasto del super
 > admin pone «Monto» (`type="number"`) y «Moneda» (PEN/USD) como dos campos separados,
-> `pages/super-admin/master-gastos/master-gastos.html:193` y `:200`.
+> `pages/super-admin/master-gastos/master-gastos.html:195` y `:203`.
 
 | prop | cuándo | fuente |
 |---|---|---|
@@ -51,6 +51,9 @@ contiene**: el selector ocupa todo el alto interior del campo (46 · 38 · 34 ·
 toca (y su hover) cubre el campo de arriba a abajo. Sus opciones miden 44 en `large` y en mobile
 (≤ 767 px); 36 en el resto, como en `sui-select`.
 
+En large y xlarge el texto sube a 16 px (regla del 03-10-2026): en `large` el valor y las opciones van
+en 16/24, igual que el valor del `sui-input` large; el alto no cambia (46 dentro del campo, 44 la opción).
+
 | size del input y del selector | campo | fuente |
 |---|---|---|
 | `large` | 48 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
@@ -67,7 +70,7 @@ de la guía no descontaba el borde del input). Ahora el campo mide exacto.
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
-| el componente entero (0 usos) | todo es en soles y con +51 | la moneda de un gasto (`master-gastos.html:193`) o teléfonos de otro país |
+| el componente entero (0 usos) | todo es en soles y con +51 | la moneda de un gasto (`master-gastos.html:195`) o teléfonos de otro país |
 | `country` con bandera | solo hay teléfonos de Perú | repartidores o clientes con número extranjero |
 
 ## API

package/docs/sui-content-card/README.md

@@ -65,20 +65,21 @@ no le sirve a ningún uso de hoy.
 
 ## Tamaño en mobile y en web
 
-La fila mide 72 (leading de 40 + padding 16) en las dos. El `size` cambia **solo la X de quitar**:
+La fila mide 74 en las dos: leading de 40 + padding 16 × 2 + borde 1 × 2 (`sui-content-card.scss:19,21`; Figma la dibuja en 72 con el borde por dentro). El `size` cambia **solo la X de quitar**:
 
 | size | X visible | área táctil | glyph | fuente |
 |---|---|---|---|---|
 | `medium` (default) | 20 × 20 | 20 × 20 | 20 | Figma |
-| `large` | 32 × 32 (radius 8 al hover) | 40 × 40 (`::before` invisible) | 20 | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+| `large` | 32 × 32 (radius 8 al hover) | 44 × 44 en el teléfono, 40 × 40 en web (`::before` invisible) | 20 | canon (aprobado por el dueño, 03-10-2026): extensión SUI · 44: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 
 En `large` el glyph queda en el mismo lugar que en `medium` (la caja grande se come el aire del
-gap con margen negativo), así que la fila se ve igual: lo que crece es dónde se puede tocar.
+gap con margen negativo), así que la fila se ve igual: lo que crece es dónde se puede tocar. En el teléfono el área
+táctil de `large` es de **44** (desde el 04-10-2026; 40 en web).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| fila | 72, sin cambio | 72, sin cambio | Figma |
-| X para quitar | `large` (32, área 40) | `medium` (20) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+| fila | 74, sin cambio | 74, sin cambio | medido del `.scss` |
+| X para quitar | `large` (32, área 44) | `medium` (20) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
 
 ```html
 <sui-content-card … [size]="bp.isMobile() ? 'large' : 'medium'" (dismiss)="quitar(item)" />

package/docs/sui-content-divider/README.md

@@ -27,16 +27,16 @@ Story: [Atoms/Divider/Content Divider](https://sui-design-system.web.app/?path=/
 > marcado «según la guía del DS» sale de su texto o de sus ejemplos; el resto es **propuesta,
 > falta aprobación**.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **1 content-divider**
-> (`pages/super-admin/master-drivers/master-drivers.html:190`, `solid-text` «Con pocos
-> pedidos»), sin contar prototipos ni vitrinas (`master-preview`, `master-prototipos`,
+> Uso medido el 04-10-2026 en `master-pedidos/src/app`: **3 content-dividers en 3 archivos**:
+> `pages/auth/login/login.html:61` y `pages/auth/register/register.html:97` (`text-line` «o») y
+> `pages/super-admin/master-drivers/master-drivers.html:192` (`solid-text` «Con pocos pedidos»), sin contar prototipos ni vitrinas (`master-preview`, `master-prototipos`,
 > `mockup-sheets-*`, `dx/*`, `_guia-*`, `master-rutina`, `master-medico`, `master-ejercicios`,
 > `dev-index`).
 
 | type | cuándo | ejemplo | fuente |
 |---|---|---|---|
 | `text-line` | El «o» entre dos formas de hacer lo mismo. | `text="o"` entre «Continuar con Google» y el formulario de correo | según la guía del DS («OR») |
-| `solid-text` | Cabecera de un grupo dentro de una lista o un modal, con fondo. | «Con pocos pedidos» (`master-drivers.html:190`) | según la guía del DS («a menudo en modales») |
+| `solid-text` | Cabecera de un grupo dentro de una lista o un modal, con fondo. | «Con pocos pedidos» (`master-drivers.html:192`) | según la guía del DS («a menudo en modales») |
 | `text` | Cabecera de grupo sin fondo, en una lista partida por fecha o por tipo. | «Ayer», «Esta semana» | según la guía del DS (existe) · propuesta (cuándo) |
 | `line` (default) | **No usar** (ver abajo). | — | según la guía del DS (default) |
 | `line-spacing` | **No usar** (ver abajo). | — | según la guía del DS |

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

@@ -73,11 +73,15 @@ content-card · ajuste → switch-label.**
 
 No se toca, así que no tiene que llegar a 44. El `size` es de lectura, no de dedo.
 
-| uso | mobile | web |
-|---|---|---|
-| consejos y pasos | `large` | `large` |
-| filas de dato | `medium` | `medium` |
-| fila que se toca (soporte) | `large`, o dale a la fila un alto mínimo de 44 | `medium` |
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| consejos y pasos | `large` | `large` | propuesta, falta aprobación |
+| filas de dato | `medium` | `medium` | propuesta, falta aprobación |
+| fila que se toca (soporte) | `large`, o dale a la fila un alto mínimo de 44 | `medium` | propuesta, falta aprobación |
+
+Alto de la fila, medido: `medium` 40 (máx. entre el leading de 40 y el texto 20 + 4 + 16) y
+`large` 48 (máx. entre 48 y 24 + 4 + 20). Lo que se toca es lo que la envuelve: «Contactar soporte»
+va dentro de un `<a>` con padding 12 y borde 1, que da 66.
 
 ```html
 <sui-content-label [size]="bp.isMobile() ? 'large' : 'medium'" … />   <!-- solo si la fila se toca -->
@@ -130,7 +134,8 @@ No se toca, así que no tiene que llegar a 44. El `size` es de lectura, no de de
   salen `slate`, no el color del rol.
 - `left-icon` sin `icon` no dibuja nada a la izquierda.
 - El `toggle` es un `sui-switch` `medium` fijo y solo el interruptor se toca, no la fila.
-- El host lleva `role="group"` y `aria-label` = `label`.
+- El host lleva `role="group"` y `aria-label` = `label`. El `toggle` toma su nombre del `label`
+  (y su descripción de `description`) con `aria-labelledby` (revisión 04-10-2026).
 
 ## Ejemplo
 

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

@@ -31,14 +31,14 @@ Regla corta: **se ajusta de a uno y tiene tope → counter · se tipea → input
 > con − y + a los lados) y no dice cuándo usarlo. Todo lo de abajo es **propuesta, falta
 > aprobación**, salvo lo que se indica.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
-> `master-ejercicios`): **4 usos en 4 archivos**, todos con `min=1`. Tamaños: 2 `large`, 2 `medium`.
-> 1 con `label`, 2 con `ariaLabel`, 2 sin ninguno de los dos.
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
+> `master-ejercicios`): **4 usos en 4 archivos**, todos con `min=1`. Tamaños: 2 `large`, 2
+> `bp.isMobile() ? 'large' : 'medium'`. Los 4 con `ariaLabel` (1 además con `label`).
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `min` | `1` en cantidades de compra: en 1 el − se apaga y quitar queda en el tacho (evita borrar por error). | propuesta (ya es práctica en los 4 usos: `pages/customer/cart/cart.html:82`) |
-| `max` | Siempre el tope real: stock, tope por pedido, cupo del viaje. Sin dato, 99. | propuesta (ya es práctica: `pages/customer/restaurant-menu/restaurant-menu.html:480`) |
+| `min` | `1` en cantidades de compra: en 1 el − se apaga y quitar queda en el tacho (evita borrar por error). | propuesta (ya es práctica en los 4 usos: `pages/customer/cart/cart.html:80`) |
+| `max` | Siempre el tope real: stock, tope por pedido, cupo del viaje. Sin dato, 99. | propuesta (ya es práctica: `pages/customer/restaurant-menu/restaurant-menu.html:479`) |
 | `step` | `1`. Otro paso no tiene caso hoy. | propuesta, falta aprobación |
 | `label` | Cuando es un campo de un formulario («Pasajeros»). | según la guía del DS (su ejemplo lleva label) |
 | `hint` | El tope dicho en palabras: «Hasta 4 pasajeros». | propuesta (ya es práctica: `components/cambiar-pasajeros/cambiar-pasajeros.html:7`) |
@@ -48,12 +48,8 @@ Regla corta: **se ajusta de a uno y tiene tope → counter · se tipea → input
 | `error` + `errorMessage` | No usar hoy: el contador no deja salir del rango. | — |
 | `required` · `sublabel` · `tooltip` | No usar hoy: una cantidad siempre tiene valor. | — |
 
-**Usos de hoy que rompen la regla:**
-
-- **2 sin `label` ni `ariaLabel`** (el lector de pantalla dice solo «grupo»):
-  `pages/customer/cart/cart.html:82`, `pages/customer/restaurant-menu/restaurant-menu.html:480`.
-- **2 en `medium` en pantallas del teléfono** → `large`: `pages/customer/cart/cart.html:82`,
-  `pages/customer/viaje/viaje.html:190`.
+**Usos de hoy que rompen la regla:** ninguno (medido el 04-10-2026). Los 2 sin nombre para el
+lector y los 2 en `medium` fijo en el teléfono se corrigieron en la app el 03-10-2026 (`f96cf735`).
 
 ## Tamaño en mobile y en web
 
@@ -70,13 +66,19 @@ dentro de la píldora). El ícono es de 20 hasta `large` y de 24 en `xlarge`.
 | `medium` (default) · `small` · `xsmall` | 40 · 36 · 32 | 24 | según la guía del DS |
 | `2xsmall` | 28 | 24 | extensión SUI |
 
+En large y xlarge el texto sube a 16 px (canon, aprobado por el dueño el 03-10-2026): el número va en 16/24; el alto del
+campo no cambia (lo ponen los botones).
+
+**En el teléfono va en `xlarge`: botones − y + de 44** (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono). `large` deja los botones
+en 40, por debajo del piso; no hace falta un size nuevo porque `xlarge` ya llega.
+
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| cantidad junto al CTA (detalle del producto) | `large` (48), igual que el botón | `large` | propuesta (ya es práctica en `restaurant-menu.html:480`) |
-| cantidad en una fila (carrito, pasajeros) | `large` (48) | `medium` (40) | propuesta, falta aprobación |
+| cantidad junto al CTA (detalle del producto) | `xlarge` (52, botones de 44) | `large` | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: propuesta |
+| cantidad en una fila (carrito, pasajeros) | `xlarge` (52, botones de 44) | `medium` (40) | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: propuesta, falta aprobación |
 
 ```html
-<sui-counter-input [size]="bp.isMobile() ? 'large' : 'medium'" … />   <!-- bp = BreakpointsService -->
+<sui-counter-input [size]="bp.isMobile() ? 'xlarge' : 'medium'" … />   <!-- bp = BreakpointsService -->
 ```
 
 ## «No usar»: por qué no hoy y cuándo sí
@@ -127,9 +129,11 @@ dentro de la píldora). El ícono es de 20 hasta `large` y de 24 en `xlarge`.
   (ya recortado a `min`/`max`) y el padre lo aplica. Con solo `[value]` y sin `(valueChange)` el
   número no se mueve.
 - `min` y `max` arrancan en −∞ y +∞: sin pasarlos, el contador baja a negativos.
-- Los botones de 24 px de `medium` para abajo no llegan a los 40 de un dedo: en mobile, `large`
-  o `xlarge` (ver «Tamaño en mobile y en web»).
-- Sin `label` ni `ariaLabel` el grupo no tiene nombre para el lector de pantalla.
+- Los botones − y + miden 24 px de `medium` para abajo, 40 en `large` y 44 en `xlarge`: solo
+  `xlarge` llega a los 44 del área táctil del teléfono (ver «Tamaño en mobile y en web»).
+- El número (`role="spinbutton"`) toma su nombre del `label` visible (`aria-labelledby`); si se
+  pasa `ariaLabel`, manda ese. Recibe foco y responde a ↑/↓ (un paso) e Inicio/Fin (al
+  mínimo/máximo, si están definidos) desde el 04-10-2026; antes solo se operaba con − y +.
 - El campo es una píldora (radio completo), decisión de SUI; el Figma de origen usa 10/8 px.
 
 ## Ejemplo

package/docs/sui-date-selector/README.md

@@ -2,7 +2,7 @@
 name: sui-date-selector
 selector: sui-date-selector
 resumen: La cabecera de un calendario con el mes y las flechas de anterior y siguiente
-alternativas: [sui-datepicker (el calendario completo, que ya la trae), sui-tab-chips (elegir entre pocos días: hoy, mañana, sábado)]
+alternativas: [sui-datepicker (el calendario completo, que ya la trae), sui-segmented-control (2 a 4 días o períodos fijos), sui-tab-chips (5 o más)]
 ---
 
 # sui-date-selector
@@ -19,7 +19,8 @@ del mes, las ganancias del repartidor por mes).
 
 - Un calendario completo: `sui-datepicker` ya lo trae adentro.
 - Elegir entre pocos días: `sui-tab-chips` (como la hoja de pedido programado).
-- Cambiar entre períodos fijos («Hoy», «Esta semana», «Este mes»): `sui-tab-chips`, como el super admin.
+- Cambiar entre períodos fijos («Hoy», «Esta semana», «Este mes»): `sui-segmented-control` si son 2 a 4,
+  `sui-tab-chips` si son 5 o más. **Período o filtro con 2 a 4 opciones excluyentes → `sui-segmented-control`; con 5 o más, o si no caben y tienen que deslizarse → `sui-tab-chips`** (canon, dueño 04-10-2026).
 
 ## Qué variante usar
 
@@ -35,27 +36,29 @@ del mes, las ganancias del repartidor por mes).
 | `leftIcon` + `rightIcon` | `true` / `true` (default) | Lo normal: se puede ir atrás y adelante. | propuesta |
 | `rightIcon` | `false` | Ya se está en el período actual y no hay futuro que mirar (ganancias, gastos). Mejor que dejar la flecha y que no haga nada. | propuesta |
 | `leftIcon` | `false` | Ya se está en el primer período con datos (el mes en que se abrió el local). | propuesta |
-| los dos en `false` | — | No usar: sin flechas es un título; va un texto. | no usar |
+| los dos en `false` | — | No usar: sin flechas es un título; va un texto. | propuesta |
 | `disabled` | `true` | Mientras carga el período nuevo, para que no se encadenen toques. | propuesta |
 
 Usos de hoy que rompen la regla: **0**.
 
 ## Tamaño en mobile y en web
 
-**No tiene `size`.** Mide 288 × 36 y las flechas son `sui-compact-button` `large` de **24 px**:
-en mobile **no llegan** a los 44 px.
+Tiene `size`: **`medium`** (default, 288 × 36, flechas `sui-compact-button` de 24, Figma) y
+**`large`** (52 de alto, flechas de **44 × 44** con el ícono en 20, mes en 16/24). El
+`sui-datepicker` `xlarge` usa `large`.
 
-| uso | mobile | web | fuente |
-|---|---|---|---|
-| cabecera de un período | — **no hay tamaño** | 288 × 36, flechas de 24 | medido |
+| size | barra | flechas | texto | uso | fuente |
+|---|---|---|---|---|---|
+| `large` | 52 (44 + 4 de aire arriba y abajo) | **44 × 44** | 16/24 | mobile | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| `medium` (default) | 36 | 24 × 24 | 14/20 | web | medido (Figma 442:192) |
 
 ```html
-<!-- Web -->
-<sui-date-selector label="Octubre 2026" [rightIcon]="!esMesActual()" (prev)="mesAnterior()" (next)="mesSiguiente()" />
+<sui-date-selector [size]="bp.isMobile() ? 'large' : 'medium'" label="Octubre 2026"
+                   [rightIcon]="!esMesActual()" (prev)="mesAnterior()" (next)="mesSiguiente()" />
 ```
 
-**Sin tamaño suficiente para mobile.** En el celular, hasta que el DS le sume un `size`, se arma
-con `sui-compact-button` `xlarge` (o `sui-button` `onlyIcon` `large`) a los lados de un título.
+Dentro del `sui-datepicker` `large` (y en mobile con `small`–`large`) el datepicker agranda las
+flechas a 40 por su cuenta; con `xlarge` usa este `size="large"` (44).
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -75,6 +78,7 @@ con `sui-compact-button` `xlarge` (o `sui-button` `onlyIcon` `large`) a los lado
 | `leftIcon` | `boolean` | `true` |
 | `rightIcon` | `boolean` | `true` |
 | `disabled` | `boolean` | `false` |
+| `size` | `'medium' \| 'large'` | `'medium'` |
 
 | output | payload |
 |---|---|

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,30 +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 |
+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" />
 }
@@ -111,8 +122,8 @@ el teléfono el footer del rango pone el resumen «Rango: …» arriba y los dos
 
 | 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í
 
@@ -125,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
 
@@ -137,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` |
@@ -175,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.