@ajuarezso/sui-design-system 0.24.1 → 0.25.1

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

@@ -28,8 +28,8 @@ Regla corta: **se ajusta de a uno y tiene tope → counter · se tipea → input
 ## Qué variante usar
 
 > **La guía del DS lo muestra como un ejemplo de su página del input** (un campo «Counter 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.
+> con − y + a los lados) y no dice cuándo usarlo. Las reglas marcadas canon
+> están aprobadas; lo que sigue en propuesta espera decisión.
 >
 > 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
@@ -37,19 +37,27 @@ Regla corta: **se ajusta de a uno y tiene tope → counter · se tipea → input
 
 | 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: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 |
+| `min` | `1` en cantidades de compra: en 1 el − se apaga y quitar queda en el tacho (evita borrar por error). | canon (aprobado por el dueño, 05-10-2026, bloque B9; 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. | canon (aprobado por el dueño, 05-10-2026, bloque B9; ya es práctica: `pages/customer/restaurant-menu/restaurant-menu.html:479`) |
+| `step` | `1`. Otro paso no tiene caso hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `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`) |
-| `ariaLabel` | **Obligatorio si no hay `label`**: en el carrito o en una fila donde el texto está al lado. «Cantidad de Pollo a la brasa 1/4». | propuesta, falta aprobación |
-| `decrementLabel` / `incrementLabel` | Los defaults («Disminuir», «Aumentar») sirven. Cambiarlos solo si el contexto pide otro verbo («Quitar un pasajero»). | propuesta, falta aprobación |
-| `disabled` | El producto se agotó mientras estaba en el carrito. | propuesta, falta aprobación |
+| `hint` | El tope dicho en palabras: «Hasta 4 pasajeros». | canon (aprobado por el dueño, 05-10-2026, bloque B4; ya es práctica: `components/cambiar-pasajeros/cambiar-pasajeros.html:7`) |
+| `ariaLabel` | **Obligatorio si no hay `label`**: en el carrito o en una fila donde el texto está al lado. «Cantidad de Pollo a la brasa 1/4». | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
+| `decrementLabel` / `incrementLabel` | Los defaults («Disminuir», «Aumentar») sirven. Cambiarlos solo si el contexto pide otro verbo («Quitar un pasajero»). | default: canon (CANON-SUI §5.7: `Aumentar`/`Disminuir` se usan tal cual) · cambiarlos: propuesta, falta aprobación |
+| `disabled` | El producto se agotó mientras estaba en el carrito. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `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:** 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`).
+**Usos de hoy que rompen la regla:** los 4, por el `size` (medido el 06-10-2026, D16): en el
+teléfono van en `large`, con botones de 40, por debajo del piso de 44.
+`pages/customer/restaurant-menu/restaurant-menu.html:479` y
+`components/cambiar-pasajeros/cambiar-pasajeros.html:8` llevan `size="large"` fijo, pero no les
+toca lo mismo: el de restaurant-menu va junto al CTA (`bp.tactil() ? 'xlarge' : 'large'`) y el de
+cambiar-pasajeros es un campo de formulario dentro de un modal, con `label` y `hint`, que va como
+una fila (`bp.tactil() ? 'xlarge' : 'medium'`). `pages/customer/cart/cart.html:77` y
+`pages/customer/viaje/viaje.html:182` llevan `bp.isMobile() ? 'large' : 'medium'` (además la tablet
+queda en `medium`); les toca `bp.tactil() ? 'xlarge' : 'medium'`. Los 2 sin nombre para el
+lector y los 2 en `medium` fijo en el teléfono ya se habían corregido el 03-10-2026 (`f96cf735`).
 
 ## Tamaño en mobile y en web
 
@@ -74,19 +82,38 @@ 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) | `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 |
+| 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: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| cantidad en una fila o campo de un formulario (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: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 ```html
-<sui-counter-input [size]="bp.isMobile() ? 'xlarge' : 'medium'" … />   <!-- bp = BreakpointsService -->
+<sui-counter-input [size]="bp.tactil() ? 'xlarge' : 'medium'" … />   <!-- en una fila · bp = BreakpointsService -->
+<sui-counter-input [size]="bp.tactil() ? 'xlarge' : 'large'" … />    <!-- junto al CTA -->
 ```
 
+### Por dispositivo (D16)
+
+Fila de D16 para `counter-input` (dueño, 05-10-2026). Se toca: donde hay dedo va `xlarge`, el
+único size con botones de 44.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `xlarge` | no hay un `medium` con botones de 44, así que no baja como el resto de lo que se toca |
+| celular (380–767) | `xlarge` | campo de 52, botones de 44 |
+| tablet táctil (`pointer: coarse`) | `xlarge` | Apple pide 44 pt también en iPad |
+| computadora (`pointer: fine`) | `large` junto al CTA · `medium` en una fila o en un formulario | con mouse no hace falta llegar a 44 |
+
+Ultrawide: igual que la computadora.
+
+En master-pedidos: no hay helper (`bp.sizeControl()` da `large`/`medium` y no llega a `xlarge`).
+En una fila o en un formulario `[size]="bp.tactil() ? 'xlarge' : 'medium'"`; junto al CTA
+`[size]="bp.tactil() ? 'xlarge' : 'large'"`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
-| `size` `2xsmall`, `xsmall`, `small` | en la app la cantidad se toca con el dedo | una tabla del panel donde se ajusta el stock de varios productos |
-| `size="xlarge"` | el CTA de al lado es `large` | si el CTA del detalle pasa a `xlarge` |
+| `size` `2xsmall`, `xsmall`, `small` | en la app la cantidad se toca con el dedo, y son chicos (D16, 05-10-2026) | nunca: una tabla del panel donde se ajusta el stock también va `medium` |
+| `size="xlarge"` en la computadora | con mouse no hace falta llegar a 44: junto al CTA va `large` y en una fila `medium` (D16, dueño 05-10-2026). En celular y tablet sí va `xlarge` | — |
 | `step` distinto de 1 | no hay productos que se vendan de a varios | huevos por media docena, gaseosas por pack de 6 |
 | `error` | el contador no deja salir del rango | el stock bajó con el carrito abierto y la cantidad ya no alcanza |
 | `tooltip` · `sublabel` · `required` | una cantidad siempre tiene valor | — |
@@ -136,14 +163,71 @@ en 40, por debajo del piso; no hace falta un size nuevo porque `xlarge` ya llega
   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.
 
+## Bien y mal
+
+**Cantidad junto al CTA del detalle**
+
+```html
+<!-- ❌ mal: `large` fijo deja los botones en 40 en el teléfono (restaurant-menu.html:479) -->
+<sui-counter-input size="large" ariaLabel="Cantidad" [min]="1" [max]="pdv.topeCantidad()"
+  [value]="pdv.qty()" (valueChange)="pdv.setQty($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-counter-input [size]="bp.tactil() ? 'xlarge' : 'large'" ariaLabel="Cantidad" [min]="1"
+  [max]="pdv.topeCantidad()" [value]="pdv.qty()" (valueChange)="pdv.setQty($event)" />
+```
+
+**Cantidad en una fila del carrito**
+
+```html
+<!-- ❌ mal: `large` en el teléfono (botones de 40) y `medium` en la tablet (cart.html:77, viaje.html:182) -->
+<sui-counter-input [size]="bp.isMobile() ? 'large' : 'medium'" [ariaLabel]="'Cantidad de ' + item.name"
+  [value]="item.quantity" [min]="1" [max]="99" (valueChange)="setQuantity(item.lineKey, $event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-counter-input [size]="bp.tactil() ? 'xlarge' : 'medium'" [ariaLabel]="'Cantidad de ' + item.name"
+  [value]="item.quantity" [min]="1" [max]="99" (valueChange)="setQuantity(item.lineKey, $event)" />
+```
+
+**Campo de formulario con `large` fijo**
+
+```html
+<!-- ❌ mal: `large` fijo deja los botones en 40 en el teléfono, y en la computadora no va junto a un CTA (cambiar-pasajeros.html:8) -->
+<sui-counter-input size="large" label="Pasajeros" [hint]="cupoTexto()" [min]="1" [max]="cupo()"
+  [value]="pasajeros()" (valueChange)="pasajeros.set($event)" />
+```
+
+```html
+<!-- ✅ bien: es un campo, va como una fila -->
+<sui-counter-input [size]="bp.tactil() ? 'xlarge' : 'medium'" label="Pasajeros" [hint]="cupoTexto()"
+  [min]="1" [max]="cupo()" [value]="pasajeros()" (valueChange)="pasajeros.set($event)" />
+```
+
+**Sin tope y sin `valueChange`**
+
+```html
+<!-- ❌ mal: es controlado, el número no se mueve; y sin `min` baja a negativos (Trampas) -->
+<sui-counter-input ariaLabel="Cantidad" [value]="cantidad()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-counter-input ariaLabel="Cantidad" [min]="1" [max]="99"
+  [value]="cantidad()" (valueChange)="cantidad.set($event)" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- En el detalle del producto, al lado del CTA -->
-<sui-counter-input size="large" [min]="1" [max]="pdv.topeCantidad()"
+<sui-counter-input [size]="bp.tactil() ? 'xlarge' : 'large'" [min]="1" [max]="pdv.topeCantidad()"
                    ariaLabel="Cantidad" [value]="pdv.qty()" (valueChange)="pdv.setQty($event)" />
 
 <!-- Campo de formulario -->
 <sui-counter-input label="Pasajeros" hint="Hasta 4 pasajeros" [min]="1" [max]="4"
-                   [size]="bp.isMobile() ? 'large' : 'medium'" [(value)]="pasajeros" />
+                   [size]="bp.tactil() ? 'xlarge' : 'medium'" [(value)]="pasajeros" />
 ```

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

@@ -24,20 +24,20 @@ del mes, las ganancias del repartidor por mes).
 
 ## Qué variante usar
 
-> **La guía del DS no tiene página para este componente** (vive dentro del datepicker). Todo es
-> **propuesta, falta aprobación**.
+> **La guía del DS no tiene página para este componente** (vive dentro del datepicker). Las
+> reglas de uso quedaron aprobadas por el dueño (canon, 05-10-2026).
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usa por dentro
 > `sui-datepicker`.
 
 | input | valor | cuándo | fuente |
 |---|---|---|---|
-| `label` | texto | El período visible, con mayúscula inicial y sin abreviar: «Octubre 2026», «Semana del 6 al 12 de octubre». | propuesta |
-| `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. | propuesta |
-| `disabled` | `true` | Mientras carga el período nuevo, para que no se encadenen toques. | propuesta |
+| `label` | texto | El período visible, con mayúscula inicial y sin abreviar: «Octubre 2026», «Semana del 6 al 12 de octubre». | mayúscula inicial: canon (CANON-SUI §5.1, sentence case) · sin abreviar: canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `leftIcon` + `rightIcon` | `true` / `true` (default) | Lo normal: se puede ir atrás y adelante. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `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. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `leftIcon` | `false` | Ya se está en el primer período con datos (el mes en que se abrió el local). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| los dos en `false` | — | No usar: sin flechas es un título; va un texto. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `disabled` | `true` | Mientras carga el período nuevo, para que no se encadenen toques. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 Usos de hoy que rompen la regla: **0**.
 
@@ -53,13 +53,30 @@ Tiene `size`: **`medium`** (default, 288 × 36, flechas `sui-compact-button` de
 | `medium` (default) | 36 | 24 × 24 | 14/20 | web | medido (Figma 442:192) |
 
 ```html
-<sui-date-selector [size]="bp.isMobile() ? 'large' : 'medium'" label="Octubre 2026"
+<sui-date-selector [size]="bp.tactil() ? 'large' : 'medium'" label="Octubre 2026"
                    [rightIcon]="!esMesActual()" (prev)="mesAnterior()" (next)="mesSiguiente()" />
 ```
 
 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).
 
+### Por dispositivo (D16)
+
+No está en la tabla por componente de D16; las flechas se tocan, así que va como **lo que se
+toca** (dueño, 05-10-2026). `large` es el único size con flechas de 44.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `medium` + área 44 | interino: hoy `large`, porque el DS todavía no estira a 44 el área de las flechas de 24 del `medium` |
+| celular (380–767) | `large` | barra de 52, flechas de 44 |
+| tablet táctil (`pointer: coarse`) | `large` | Apple pide 44 pt también en iPad |
+| computadora (`pointer: fine`) | `medium` | barra de 36, flechas de 24 |
+
+Ultrawide: igual que la computadora; el ancho sigue fijo en 288.
+
+En master-pedidos: `[size]="bp.tactil() ? 'large' : 'medium'"` (son los mismos literales que
+devuelve `bp.sizeControl()`, que también sirve).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -90,13 +107,54 @@ flechas a 40 por su cuenta; con `xlarge` usa este `size="large"` (44).
 
 - **`leftIcon` y `rightIcon` son booleanos**, no nombres de ícono: prenden o apagan las flechas.
 - **Ancho fijo de 288 px** (`max-width` incluido): no se estira con el contenedor.
-- Con una flecha apagada queda un hueco de 24 px para que el texto siga centrado.
+- Con una flecha apagada queda un hueco del ancho de la flecha (24 px en `medium`, 44 en `large`)
+  para que el texto siga centrado.
 - El componente **no sabe de fechas**: el texto lo arma quien lo usa y las flechas solo emiten.
 - Los `aria-label` de las flechas dicen «Mes anterior» y «Mes siguiente» aunque el período sea
   una semana.
 
-## Ejemplo
+## Bien y mal
+
+**Las flechas en el teléfono**
+
+```html
+<!-- ❌ mal: `medium` deja las flechas en 24 en el celular y la tablet -->
+<sui-date-selector label="Octubre 2026" (prev)="mesAnterior()" (next)="mesSiguiente()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-date-selector [size]="bp.tactil() ? 'large' : 'medium'" label="Octubre 2026"
+                   (prev)="mesAnterior()" (next)="mesSiguiente()" />
+```
+
+**Ya se está en el mes actual**
 
 ```html
+<!-- ❌ mal: los dos en `false` es un título con fondo; y abrevia el mes («Qué variante usar») -->
+<sui-date-selector label="Oct. 2026" [leftIcon]="false" [rightIcon]="false" />
+```
+
+```html
+<!-- ✅ bien: se apaga solo la flecha que no lleva a nada -->
 <sui-date-selector label="Octubre 2026" [rightIcon]="false" (prev)="mesAnterior()" />
 ```
+
+**Períodos fijos**
+
+```html
+<!-- ❌ mal: «Hoy», «Esta semana», «Este mes» no se recorren con flechas («Cuándo no») -->
+<sui-date-selector [label]="periodo()" (prev)="periodoAnterior()" (next)="periodoSiguiente()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control [tabs]="periodos" [(active)]="periodo" ariaLabel="Período" />
+```
+
+## Ejemplo
+
+```html
+<sui-date-selector [size]="bp.tactil() ? 'large' : 'medium'" label="Octubre 2026"
+                   [rightIcon]="false" (prev)="mesAnterior()" />
+```

package/docs/sui-datepicker/README.md

@@ -35,7 +35,7 @@ type="date"` · día + franja de entrega → la hoja del checkout.**
 > **Lo que dice la guía del DS** (página del datepicker): sirve para elegir **una fecha o un rango
 > de fechas**, y trae tres ejemplos: **Popover** (se aplica al tocar el día), **Approval** (con
 > Cancelar/Aplicar: la fecha queda en espera hasta confirmar) y **Range** (rango con un solo mes a
-> la vista). No dice cuándo usar cada uno. El resto es **propuesta, falta aprobación**.
+> la vista). No dice cuándo usar cada uno. Las reglas marcadas canon están aprobadas; lo que sigue en propuesta espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (sin prototipos ni vitrinas): **0 usos**.
 > Las fechas de la app van con `sui-input type="date"` (7) y `type="datetime-local"` (1).
@@ -45,28 +45,28 @@ type="date"` · día + franja de entrega → la hoja del checkout.**
 | valor | cuándo | fuente |
 |---|---|---|
 | `date` (default) | Una fecha cuando el calendario tiene que verse (en línea, con días marcados). Si es un campo de formulario, va `sui-input type="date"`. | guía (una fecha) · el «cuándo» es propuesta |
-| `range` | Un período libre desde–hasta: reportes, filtros de ventas o de gastos con «Personalizado». | guía (rango) · el «cuándo» es propuesta |
+| `range` | Un período libre desde–hasta: reportes, filtros de ventas o de gastos con «Personalizado». | guía (rango) · el «cuándo»: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### `inline`, `showFooter`, `calendars`
 
 | input | valor | cuándo | fuente |
 |---|---|---|---|
 | `inline` | `false` (default) | El campo abre el calendario en un popover. Solo en web. | guía (ejemplo Popover) |
-| `inline` | `true` | El calendario es el contenido: un panel de disponibilidad o el calendario de pedidos del día. También dentro de un `sui-modal` en mobile, para no depender del popover. | propuesta |
+| `inline` | `true` | El calendario es el contenido: un panel de disponibilidad o el calendario de pedidos del día. También dentro de un `sui-modal` en mobile, para no depender del popover. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `showFooter` | `true` (default) | Cancelar/Aplicar: la elección no se guarda hasta confirmar. Úsalo cuando cambiar la fecha recalcula algo caro (un reporte). | guía (ejemplo Approval) |
 | `showFooter` | `false` | Se aplica al tocar el día. Fecha única y nada que recalcular. En `range` no tiene efecto: el rango siempre trae footer. | guía (ejemplo Popover) |
-| `calendars` | `2` (default) | Rango en web: dos meses lado a lado (936 px). | propuesta |
-| `calendars` | `1` | Rango en un espacio angosto (columna, modal `medium`). En mobile se fuerza a 1 solo. | guía (Range con un mes) |
+| `calendars` | `2` (default) | Rango en web: dos meses lado a lado (936 px). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `calendars` | `1` | Rango en un espacio angosto (columna, modal `medium`, tablet en vertical: los 936 px necesitan ≥ 968 de ancho). En mobile (≤ 767) se fuerza a 1 solo; en tablet hay que pasarlo. | guía (Range con un mes) |
 
 ### `min`, `max`, `markedDates`, `presets`, `placeholder`, `disabled`
 
 | input | cuándo | fuente |
 |---|---|---|
-| `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` | 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 |
+| `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. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `markedDates` | Días con algo: pedidos programados, gastos cargados. El punto es chico: dice «hay algo», no cuánto. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `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. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `placeholder` | Sin pasarlo, el campo dice «Elige una fecha» (`mode="date"`) o «Elige el período» (`mode="range"`), en imperativo con tuteo. Cambiarlo solo para decir qué se elige, también en imperativo («Elige desde cuándo»). | canon (dueño, 05-10-2026, P4 a); el default cambió en la 0.25.0 (antes «Seleccionar fecha» en los dos modos). CANON-SUI §5.7 (infinitivo) necesita esta excepción en master-pedidos |
+| `disabled` | Mientras carga lo que depende de la fecha. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 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` (líneas del `type`, medidas el 04-10-2026):
@@ -86,14 +86,14 @@ sueltas en formularios y ya usan `sui-input` (líneas del `type`, medidas el 04-
 
 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`).
+En la computadora va `medium`, nunca `small`; la tablet va como el celular (canon, dueño, 05-10-2026, D16). 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), **`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 × 44** (`sui-day-cell` `large`, gap 4: grilla de 7 × 44 + 6 × 4 = 332, panel de 358 con padding y borde: entra en una pantalla de 390, y dentro de un modal fullscreen solo con `[fullBody]`, ver «Por dispositivo»), **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.
@@ -112,18 +112,42 @@ campo (y su placeholder) va en 16/24. Con `large` el calendario no cambia (días
 `large`). El resumen del rango sigue en 14.
 
 ```html
-<!-- Web: popover. Mobile: en línea dentro de un sui-modal fullscreen. -->
+<!-- Web: popover. Mobile: en línea dentro de un sui-modal fullscreen con [fullBody]="true"
+     (sin él el body deja ancho − 56 y el panel de 358 no entra; ver «Por dispositivo»). -->
 @if (bp.isMobile()) {
   <sui-datepicker mode="range" size="xlarge" [inline]="true" [calendars]="1" [(value)]="rango" />
 } @else {
-  <sui-datepicker mode="range" placeholder="Elige el período" [(value)]="rango" />
+  <sui-datepicker mode="range" [size]="bp.tactil() ? 'xlarge' : 'medium'"
+                  [calendars]="bp.isTablet() ? 1 : 2"
+                  placeholder="Elige el período" [(value)]="rango" />
 }
 ```
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| 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) |
+| fecha en un formulario | `xlarge` (días de 44) | `medium` | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| filtro de período de un reporte | `xlarge`, en línea dentro de un modal con `[fullBody]` | `medium`, popover | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+
+### Por dispositivo (D16)
+
+El datepicker tiene fila propia en D16: los días solo llegan a 44 en `xlarge`, así que todo
+dispositivo táctil va en `xlarge`, también el celular chico.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `xlarge` | **no entra en 360 hoy** (en 375 solo `mode="date"` con `[fullBody]`, por 1 px). La grilla de días mide 332 (7 × 44 + 6 × 4), pero el panel mide **358** (332 + 2 × 12 de padding + borde). Dentro de un `sui-modal` fullscreen el body deja `ancho − 56` (8 de inset y 20 de padding por lado): 304 en 360. Con `[fullBody]="true"` deja `ancho − 16`: 344 en 360, 359 en 375. En `range` además el panel se fija en `ancho − 32` (328 en 360, 343 en 375) y recorta el domingo. Pendiente: que quepa en 360 es código del DS (gap o padding del calendario), no del README |
+| celular (380–767) | `xlarge` | en línea dentro de un `sui-modal` fullscreen **con `[fullBody]="true"`**: sin él el body deja 334 en 390 y el panel de 358 se sale. Con él quedan 374 en 390. Se fuerza a 1 calendario |
+| tablet táctil (`pointer: coarse`) | `xlarge` | popover. En `mode="date"` el panel mide 368 y entra desde 768. En `range` con 2 calendarios mide 936 (200 + 2 × 368) y necesita ≥ 968 de ancho: un iPad en vertical (820–834) lo recorta, así que va con `[calendars]="1"` (200 + 368 = 568). Los días, flechas y rangos llegan a 44 por el `size`, no por el ancho |
+| computadora (`pointer: fine`) | `medium` | popover. Ojo: con `medium` el componente pinta Cancelar / Aplicar en `small` (36) por dentro (`footerButtonSize()`); D16 no deja nada en `small`, pero cambiarlo es código del DS, no del README |
+
+Ultrawide: igual que la computadora; el rango ya ocupa sus dos meses (936 px) y el espacio extra no
+agranda nada. Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: `[size]="bp.tactil() ? 'xlarge' : 'medium'"` (no hay helper que dé
+`xlarge`/`medium`). `bp.isMobile()` decide solo si va en línea o en popover, que es cuestión de
+ancho, no de puntero. En `range` fuera del celular, `[calendars]="bp.isTablet() ? 1 : 2"`: el
+componente solo baja a 1 calendario por su cuenta hasta 767. `isTablet()` es hasta 1024, un poco
+conservador (en 1024 los dos meses sí entran), pero es la señal que tiene el servicio.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -149,7 +173,7 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 | `calendars` | `1 \| 2` | `2` |
 | `inline` | `boolean` | `false` |
 | `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
-| `placeholder` | `string` | `'Seleccionar fecha'` |
+| `placeholder` | `string \| null` | `null` |
 | `showFooter` | `boolean` | `true` |
 | `disabled` | `boolean` | `false` |
 | `min` | `Date \| null` | `null` |
@@ -198,6 +222,49 @@ interface DatepickerPreset { id: DatepickerPresetId; label: string; resolve: (ho
 - Las piezas internas son `sui-date-selector`, `sui-day-label`, `sui-day-cell` y
   `sui-period-range`: no se arman a mano.
 
+## Bien y mal
+
+Una fecha suelta en un formulario
+
+```html
+<!-- ❌ mal: un popover de 368 px para un campo «Válido hasta» (Cuándo no) -->
+<sui-form-label label="Válido hasta" />
+<sui-datepicker [min]="hoy" [(value)]="venceEl" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input type="date" label="Válido hasta" [size]="bp.sizeControl()" [(value)]="venceEl" />
+```
+
+Período en el celular
+
+```html
+<!-- ❌ mal: en el celular el popover no es hoja (Trampas), y en medium los días miden 40
+     (Tamaño en mobile y en web) -->
+<sui-datepicker mode="range" [(value)]="rango" />
+```
+
+```html
+<!-- ✅ bien: [fullBody] porque el panel xlarge mide 358 y el body con padding deja 334 en 390.
+     En < 380 todavía no entra (pendiente del DS, ver «Por dispositivo») -->
+<sui-modal [(open)]="eligiendo" [fullscreen]="true" [fullBody]="true" title="Elige el período">
+  <sui-datepicker mode="range" size="xlarge" [inline]="true" [calendars]="1" [(value)]="rango" />
+</sui-modal>
+```
+
+Rango que se aplica al tocar
+
+```html
+<!-- ❌ mal: en range el footer sale igual; showFooter no tiene efecto (Trampas) -->
+<sui-datepicker mode="range" [showFooter]="false" [(value)]="rango" />
+```
+
+```html
+<!-- ✅ bien: el rango siempre confirma con Aplicar; [showFooter]="false" es solo para mode="date" -->
+<sui-datepicker mode="range" [max]="hoy" [(value)]="rango" />
+```
+
 ## Ejemplo
 
 ```html

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

@@ -22,8 +22,9 @@ de la semana con los días de turno del repartidor, o un mes con los días que e
 
 ## Qué variante usar
 
-> **La guía del DS no tiene página para este componente** (vive dentro del datepicker). Todo es
-> **propuesta, falta aprobación**.
+> **La guía del DS no tiene página para este componente** (vive dentro del datepicker). Las
+> filas que describen lo que el componente ya hace van «según el código»; las reglas marcadas canon
+> están aprobadas.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usa por dentro
 > `sui-datepicker`.
@@ -32,23 +33,23 @@ de la semana con los días de turno del repartidor, o un mes con los días que e
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `type="basic"` (default) | Calendario de una fecha. | propuesta |
-| `type="range"` | Calendario de rango. Va con `rangePosition`. | propuesta |
-| `rangePosition="start"` | Primer día del rango (fondo naranja, esquina izquierda). | propuesta |
-| `rangePosition="end"` | Último día (fondo naranja, esquina derecha). | propuesta |
-| `rangePosition="in"` | Días del medio (texto naranja, sin fondo propio: la banda la pinta la fila). | propuesta |
-| `rangePosition=null` | Fuera del rango. | propuesta |
+| `type="basic"` (default) | Calendario de una fecha. | según el código |
+| `type="range"` | Calendario de rango. Va con `rangePosition`. | según el código |
+| `rangePosition="start"` | Primer día del rango (fondo naranja, esquina izquierda). | según el código |
+| `rangePosition="end"` | Último día (fondo naranja, esquina derecha). | según el código |
+| `rangePosition="in"` | Días del medio (texto naranja, sin fondo propio: la banda la pinta la fila). | según el código |
+| `rangePosition=null` | Fuera del rango. | según el código |
 
 ### Estados
 
 | input | cuándo | fuente |
 |---|---|---|
-| `selected` | El día elegido (fondo naranja). Uno solo en `basic`. | propuesta |
-| `today` | Hoy: un punto debajo del número. Siempre, para que la persona se ubique. | propuesta |
-| `marked` | El día tiene algo (pedidos, un turno). Si además es hoy, gana el punto de hoy. | propuesta |
-| `disabled` | Fuera de `min`/`max` o no se puede elegir (local cerrado ese día). | propuesta |
-| `outOfMonth` | Días del mes anterior o siguiente que completan la grilla: se ven apagados. | propuesta |
-| `ariaLabel` | Siempre que el número solo no alcance: «Martes 7 de octubre, con pedidos». El default dice «Día 7». | propuesta |
+| `selected` | El día elegido (fondo naranja). Uno solo en `basic`. | según el código |
+| `today` | Hoy: un punto debajo del número. Siempre, para que la persona se ubique. | según el código |
+| `marked` | El día tiene algo (pedidos, un turno). Si además es hoy, gana el punto de hoy. | según el código |
+| `disabled` | Fuera de `min`/`max` o no se puede elegir (local cerrado ese día). | según el código |
+| `outOfMonth` | Días del mes anterior o siguiente que completan la grilla: se ven apagados. | según el código |
+| `ariaLabel` | Siempre que el número solo no alcance: «Martes 7 de octubre, con pedidos». El default dice «Día 7». | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 Usos de hoy que rompen la regla: **0**.
 
@@ -60,8 +61,8 @@ de 44 px en mobile (gap 4) y 48 en web (gap 8) con `medium`, y 48 (gap 4) con `l
 
 | 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) |
+| `large` | **44 × 44** | 16/24 | celular y tablet táctil: 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 · tablet: D16, dueño 05-10-2026 |
+| `medium` (default) | 40 × 40 | 14/20 | computadora | medido (Figma 437:174) |
 
 Los puntos de hoy y de marcado no cambian con el size.
 
@@ -69,12 +70,31 @@ Los puntos de hoy y de marcado no cambian con el size.
 <!-- La grilla da el paso: gap 4 -->
 <div class="semana" [style.gap.px]="4">
   @for (d of dias(); track d.fecha) {
-    <sui-day-cell [size]="bp.isMobile() ? 'large' : 'medium'" [day]="d.numero" [today]="d.esHoy"
+    <sui-day-cell [size]="bp.tactil() ? 'large' : 'medium'" [day]="d.numero" [today]="d.esHoy"
                   [marked]="d.conTurno" (clicked)="elegir(d)" />
   }
 </div>
 ```
 
+### Por dispositivo (D16)
+
+La celda se toca: sigue «lo que se toca» de D16. Su size grande es `large` (44), el único que llega
+al piso del dedo.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `large` | interino: D16 pide `medium` con área de 44, pero el DS todavía no la estira; 7 × 44 + 6 × 4 = 332 entra en 360 |
+| celular (380–767) | `large` | gap 4 en la grilla |
+| tablet táctil (`pointer: coarse`) | `large` | Apple pide 44 también en iPad |
+| computadora (`pointer: fine`) | `medium` | 40 × 40, el de Figma |
+
+Ultrawide: igual que la computadora. Fuente: D16, dueño 05-10-2026.
+
+En master-pedidos: `[size]="bp.tactil() ? 'large' : 'medium'"`. `bp.sizeControl()` devuelve lo
+mismo (`'large' | 'medium'`), pero está documentado para botón y campo; la expresión deja claro de
+dónde sale. Si la grilla va con `sui-day-label`, la cabecera también tiene que medir 44 en `large`
+(ver su README).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -118,6 +138,44 @@ Los puntos de hoy y de marcado no cambian con el size.
   completa. Hoy lleva `aria-current="date"` y, en `type="range"`, `start`/`end` salen
   `aria-selected` (04-10-2026).
 
+## Bien y mal
+
+El día de la grilla
+
+```html
+<!-- ❌ mal: day es el número, no una fecha; la celda no sabe qué día es (Trampas) -->
+<sui-day-cell [day]="d.fecha" [today]="true" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-day-cell [day]="d.fecha.getDate()" [today]="d.esHoy" [size]="bp.tactil() ? 'large' : 'medium'" />
+```
+
+Días del mes vecino que no se eligen
+
+```html
+<!-- ❌ mal: outOfMonth solo los apaga; se pueden tocar igual (Trampas) -->
+<sui-day-cell [day]="d.numero" [outOfMonth]="true" (clicked)="elegir(d)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-day-cell [day]="d.numero" [outOfMonth]="true" [disabled]="true" (clicked)="elegir(d)" />
+```
+
+Un día con algo
+
+```html
+<!-- ❌ mal: el lector de pantalla dice «Día 12», sin mes ni qué tiene (canon B5) -->
+<sui-day-cell day="12" [marked]="true" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-day-cell day="12" [marked]="true" ariaLabel="Domingo 12 de octubre, con pedidos" />
+```
+
 ## Ejemplo
 
 ```html