@ajuarezso/sui-design-system 0.24.0 → 0.25.0

package/docs/sui-command-menu-item/README.md

@@ -37,7 +37,8 @@ select.** La tabla completa está en el README de `sui-dropdown-menu`.
 > **La guía del DS define el command menu como el buscador que deja saltar rápido desde cualquier
 > pantalla**, armado dentro de un diálogo, con input, lista, grupos con título, items y un pie con
 > teclas. El item tiene dos tamaños, `small` (default) y `medium`, y el elegido se marca con fondo
-> `bg-weak-50`. No trae do/don't. Lo demás es **propuesta, falta aprobación**.
+> `bg-weak-50`. No trae do/don't. Lo marcado canon está aprobado; lo que sigue en **propuesta, falta
+> aprobación** espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-dropdown-menu`):
 > **0 usos**. Solo aparece en la vitrina `master-preview`.
@@ -46,20 +47,20 @@ select.** La tabla completa está en el README de `sui-dropdown-menu`.
 
 | type | cuándo | fuente |
 |---|---|---|
-| `left-icon` | Ir a una **pantalla** o una sección: «Pedidos», «Mi negocio», «Recargas». | según la guía del DS (item con ícono); el cuándo es propuesta |
-| `avatar` | Una **persona**: repartidor, cliente, dueño de local (`avatar` con `src` o `initials`). | propuesta |
-| `company` | Un **local**: su logo en `avatar.src`. | propuesta |
-| `basic` (default) | Una búsqueda reciente o un resultado sin imagen («Pedido #1234»). | propuesta |
-| `brand` | Un servicio externo con su logo (Yape, WhatsApp), proyectado en `slot="brand"`. | propuesta |
-| `country` | No usar hoy: todo es Perú. | propuesta |
+| `left-icon` | Ir a una **pantalla** o una sección: «Pedidos», «Mi negocio», «Recargas». | según la guía del DS (item con ícono); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `avatar` | Una **persona**: repartidor, cliente, dueño de local (`avatar` con `src` o `initials`). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `company` | Un **local**: su logo en `avatar.src`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `basic` (default) | Una búsqueda reciente o un resultado sin imagen («Pedido #1234»). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `brand` | Un servicio externo con su logo (Yape, WhatsApp), proyectado en `slot="brand"`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `country` | No usar hoy: todo es Perú. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### `size` y los extras
 
 | prop | cuándo | fuente |
 |---|---|---|
 | `size="small"` (default, 40) | Listas de resultados de una línea (`title` + `sublabel`). | según la guía del DS (default `small`) |
-| `size="medium"` (64) | Cuando el resultado necesita una segunda línea (`description`) para distinguirse: «Pedido #1234» · «Juan Pérez · S/ 45.00». | según la guía del DS (existe); el cuándo es propuesta |
-| `badge` | Un estado corto que ayuda a elegir («Pendiente», «Cerrado»). String = gris `lighter`; objeto `SuiBadgeConfig` para color. | propuesta |
+| `size="medium"` (64) | Cuando el resultado necesita una segunda línea (`description`) para distinguirse: «Pedido #1234» · «Juan Pérez · S/ 45.00». | según la guía del DS (existe); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `badge` | Un estado corto que ayuda a elegir («Pendiente», «Cerrado»). String = gris `lighter`; objeto `SuiBadgeConfig` para color. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `shortcut` | El atajo de esa acción (`sui-kbd`). Solo web. | canon (README de `sui-kbd`: en mobile no se pinta) |
 | `showButton` | Una flecha a la derecha cuando el resultado abre otra pantalla. | propuesta |
 
@@ -70,8 +71,8 @@ buscador de mobile, la fila `small` mide 40 y queda debajo de los 44 del dedo.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| resultado de una línea | `medium` (64) | `small` (40) | propuesta, falta aprobación |
-| resultado con descripción | `medium` (64) | `medium` (64) | propuesta |
+| resultado de una línea | `medium` (64) | `small` (40) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44: `small` mide 40, `medium` es el único size que llega) · web: propuesta, falta aprobación |
+| resultado con descripción | `medium` (64) | `medium` (64) | mobile: canon (decisión del dueño 04-10-2026, piso táctil 44) · web: lo impone el código (`description` solo se pinta en `medium`) |
 
 ```html
 <sui-command-menu-item [size]="bp.isMobile() ? 'medium' : 'small'" … />   <!-- bp = BreakpointsService -->
@@ -126,7 +127,7 @@ Slot: `[slot=brand]` (solo con `type="brand"`). `avatar` acepta un string (la UR
 ```html
 <sui-modal [(open)]="buscadorAbierto" size="large" [fullscreen]="true">
   <sui-command-menu-search [(value)]="q" placeholder="Busca pedidos, locales o repartidores…"
-                           [shortcut]="!bp.isMobile()" />
+                           [shortcut]="!bp.isMobile()" [button]="!bp.isMobile()" />
   <sui-content-divider type="text" text="Pantallas" />
   @for (p of pantallas(); track p.ruta) {
     <sui-command-menu-item type="left-icon" [icon]="p.icono" [title]="p.nombre"

package/docs/sui-command-menu-search/README.md

@@ -43,7 +43,7 @@ más oscuro) y con texto (lupa naranja, X para limpiar).
 |---|---|---|
 | `placeholder` | **Siempre**, en español y diciendo qué se busca: «Busca pedidos, locales o repartidores…». El default genérico es `'Buscar o ir a…'`. | canon (CANON-SUI §5: copy en español, elipsis `…`) |
 | `shortcut` | `true` solo en web; en mobile `false` (no hay teclado físico). | canon (README de `sui-kbd`) |
-| `button` | Déjalo en `true`: la X de limpiar ahorra borrar a mano. El ícono de info del estado vacío no hace nada. | propuesta |
+| `button` | La X de limpiar **solo en web** (`true`): ahorra borrar a mano. En mobile, `false` hasta que el DS tenga un size de 44 (la X mide 20). El ícono de info del estado vacío no hace nada. | canon (aprobado por el dueño, 05-10-2026, bloque B13) |
 
 ## Tamaño en mobile y en web
 
@@ -55,7 +55,7 @@ No tiene tamaños: 48 px de alto (14 + 20 + 13 + 1 de borde), texto 14/20, hasta
 
 ```html
 <sui-command-menu-search [(value)]="q" placeholder="Busca pedidos, locales o repartidores…"
-                         [shortcut]="!bp.isMobile()" />   <!-- bp = BreakpointsService -->
+                         [shortcut]="!bp.isMobile()" [button]="!bp.isMobile()" />   <!-- bp = BreakpointsService -->
 ```
 
 ## API
@@ -101,5 +101,6 @@ No tiene tamaños: 48 px de alto (14 + 20 + 13 + 1 de borde), texto 14/20, hasta
   [(value)]="q"
   placeholder="Busca pedidos, locales o repartidores…"
   [shortcut]="!bp.isMobile()"
+  [button]="!bp.isMobile()"
   (cleared)="resultados.set([])" />
 ```

package/docs/sui-compact-avatar-group/README.md

@@ -22,8 +22,8 @@ de lista. Es una píldora blanca con los avatares casi pegados y el «+N» como
 ## Qué variante usar
 
 > **La guía del DS dice qué es, sus tamaños y sus dos estilos, no cuándo usar cada uno.** Lo
-> marcado «según la guía del DS» sale de su texto o de su código; el resto es **propuesta,
-> falta aprobación**.
+> marcado «según la guía del DS» sale de su texto o de su código. Lo marcado canon está
+> aprobado; lo que sigue en **propuesta, falta aprobación** espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. En el DS no lo
 > monta ningún componente: `sui-table` solo lo nombra como contenido que se proyecta en una celda.
@@ -38,22 +38,25 @@ de lista. Es una píldora blanca con los avatares casi pegados y el «+N» como
 
 | input | valor | cuándo | fuente |
 |---|---|---|---|
-| `size` | `'24'` | Celda de tabla. | propuesta |
-| `size` | `'32'` (default SUI) | Fila de una lista. | propuesta |
-| `size` | `'40'` (default de la guía) | Dentro de una card. | propuesta |
-| `appearance` | `default` | Sobre un fondo gris o de color: la sombra lo separa. | propuesta |
-| `appearance` | `stroke` | Sobre blanco, donde la sombra sola no alcanza a marcar el borde. | propuesta |
-| `max` | `3` (default) | Tres avatares visibles. | propuesta |
-| `count` | — | Solo si el total no está en `items` (vienen 3 caras pero son 12 personas): `count="+9"`. Si no, se calcula solo. | propuesta |
+| `size` | `'24'` | Celda de tabla. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `size` | `'32'` (default SUI) | Fila de una lista. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `size` | `'40'` (default de la guía) | Dentro de una card. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `appearance` | `default` | Sobre un fondo gris o de color: la sombra lo separa. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `appearance` | `stroke` | Sobre blanco, donde la sombra sola no alcanza a marcar el borde. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `max` | `3` (default) | Tres avatares visibles. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `count` | — | Solo si el total no está en `items` (vienen 3 caras pero son 12 personas): `count="+9"`. Si no, se calcula solo. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 Usos de hoy que rompen la regla: **0** (no hay usos).
 
 ## Tamaño en mobile y en web
 
-En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. En las
+En mobile va más grande por legibilidad (el grupo no se toca: el área la da la fila); en web, más chico. En las
 pantallas que se usan en los dos (panel del local, super admin) se elige con el servicio de
 breakpoints de la app (`bp`, en `services/breakpoints.service.ts`); en las que solo existen en
-el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propuesta**.
+el celular (cliente, repartidor) va directo el valor de mobile. No se toca, así que la tablet va
+con el valor de web, y el celular chico (< 380 px) también (D16).
+Es **canon (dueño, 05-10-2026, P1 b)**: un paso más grande en el celular que en computadora, y
+se migra todo ahora, no solo al tocar cada pantalla.
 
 | uso | mobile | web |
 |---|---|---|

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

@@ -86,26 +86,31 @@ la tabla de abajo pide `xlarge` (28).
 
 | fullRadius | cuándo | fuente |
 |---|---|---|
-| `false` (default, radio 6) | Lo normal: filas, cards, cabeceras. | default según la guía del DS · cuándo: propuesta |
+| `false` (default, radio 6) | Lo normal: filas, cards, cabeceras. | default según la guía del DS · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `true` (círculo) | Flotante (`white`) sobre mapa o foto. | canon (aprobado por el dueño, 03-10-2026) |
-| `true` (círculo) | El − / + de una cantidad, para que se lea como un stepper. | propuesta (es lo que ya hace `product-detail-view`) |
+| `true` (círculo) | El − / + de una cantidad, para que se lea como un stepper. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (es lo que ya hace `product-detail-view`) |
 
 ### `disabled`, `href`, `ariaLabel`
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `disabled` | Se llegó al límite: no hay más stock para sumar, no se puede quitar el último. | cómo se ve: según la guía del DS · cuándo: propuesta |
-| `href` | Solo si el botón navega sin otra acción (volver a una ruta). Pinta un `<a>`; `rel` ya viene en `'noopener noreferrer'`. | propuesta |
-| `ariaLabel` (requerido) | Lo que hace, no lo que muestra: «Cerrar», «Quitar opción», «Agregar uno»; nunca «X» ni «Ícono». | propuesta (el input es obligatorio) |
-| `type="submit"` | Solo dentro de un `<form>`. | propuesta |
+| `disabled` | Se llegó al límite: no hay más stock para sumar, no se puede quitar el último. | cómo se ve: según la guía del DS · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `href` | Solo si el botón navega sin otra acción (volver a una ruta). Pinta un `<a>`; `rel` ya viene en `'noopener noreferrer'`. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
+| `ariaLabel` (requerido) | Lo que hace, no lo que muestra: «Cerrar», «Quitar opción», «Agregar uno»; nunca «X» ni «Ícono». | canon (aprobado por el dueño, 05-10-2026, bloque B5) (el input es obligatorio) |
+| `type="submit"` | Solo dentro de un `<form>`. | canon (aprobado por el dueño, 05-10-2026, bloque B10) |
 
 ## 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'"`. Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
-con `bp` (142 `large`/`medium`, 22 `large`/`small`, 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**. En la tablet
+(`pointer: coarse`) va igual que en el celular, porque también se toca; en la computadora
+(`pointer: fine`), `medium`; en el celular chico (< 380 px), `medium` a la vista sin bajar el área de 44.
+Nada en `small` ni `xsmall` (canon, dueño, 05-10-2026, D16; reemplaza al «tamaño por plataforma» del
+03-10-2026, que bajaba la web a `small`). Hoy la app lo resuelve con `BreakpointsService`
+(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px): `[size]="bp.isMobile() ? 'large' : 'medium'"`,
+que todavía deja la tablet en `medium` (el helper de D16 está propuesto en la hoja de decisiones). Medido el 04-10-2026 en `master-pedidos`: 166 `[size]`
+con `bp` (142 `large`/`medium`, 22 `large`/`small`, 2 `medium`/`xsmall`); los 24 que bajan de `medium` se migran.
+`sui-compact-button` tiene su propia escala (de `medium` 20 a `5xlarge` 44) y no tiene `small`: D16 no
+lo mueve por el nombre; la tabla de abajo sigue igual.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|

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

@@ -42,7 +42,7 @@ Regla corta: **filtro suelto en una barra, ancho al texto → compact · campo c
 | `selected` / `selectedChange` | La opción elegida (objeto entero). O `formControlName`, nunca los dos. | API |
 | `placeholder` | El filtro sin elegir: «Todos». Corto. | propuesta, falta aprobación |
 | `value` / `icon` | Lo que muestra el campo cuando no hay `items` (modo «solo campo», el menú lo arma la pantalla). | API |
-| `error` | No usar hoy: un filtro no tiene error. | propuesta, falta aprobación |
+| `error` | No usar hoy: un filtro no tiene error. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 | `disabled` | Mientras carga la lista. | según la guía del DS |
 | `clicked` | Solo si la pantalla arma su propio menú (sin `items`). | API |
 
@@ -71,11 +71,11 @@ Las opciones del menú siguen al `size` como en `sui-select`: 36 hasta `medium`,
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| filtro de una barra del panel | `large` (48), junto a botones `large` | `small` (36) | propuesta, falta aprobación |
-| paginación al pie de una tabla | no aplica | `xsmall` (32) | según la guía del DS (ejemplo de paginación); el tamaño es propuesta |
+| filtro de una barra del panel | `large` (48), junto a botones `large` | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: es el único size de 44 o más; texto 16 en large, DS 0.22.0) · web `medium`: canon (dueño, 05-10-2026, D16) |
+| paginación al pie de una tabla | no aplica | `medium` (40) | canon (dueño, 05-10-2026, D16) (la guía del DS lo muestra en `xsmall`) |
 
 ```html
-<sui-compact-select [size]="bp.isMobile() ? 'large' : 'small'" placeholder="Todos los roles"
+<sui-compact-select [size]="bp.isMobile() ? 'large' : 'medium'" placeholder="Todos los roles"
                     [items]="roles" [(selected)]="rolElegido" />   <!-- bp = BreakpointsService -->
 ```
 
@@ -129,6 +129,6 @@ Implementa `ControlValueAccessor` (el valor es el `value` de la opción).
 ## Ejemplo
 
 ```html
-<sui-compact-select size="small" placeholder="Todos los roles" [items]="roles"
+<sui-compact-select [size]="bp.isMobile() ? 'large' : 'medium'" placeholder="Todos los roles" [items]="roles"
                     [(selected)]="rolElegido" />
 ```

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

@@ -61,7 +61,7 @@ en 16/24, igual que el valor del `sui-input` large; el alto no cambia (46 dentro
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| moneda dentro del monto | `sui-input` `large` + este `large` | `sui-input` `medium` + este `medium` | propuesta, falta aprobación |
+| moneda dentro del monto | `sui-input` `large` + este `large` | `sui-input` `medium` + este `medium` | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (dueño, 05-10-2026, D16) |
 
 Arreglo del 03-10-2026: antes el selector medía 40/36/32 y empujaba el campo a 42/38/34 (el padding
 de la guía no descontaba el borde del input). Ahora el campo mide exacto.

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

@@ -41,24 +41,24 @@ se elige → card de selección.**
 
 | type | cuándo | fuente |
 |---|---|---|
-| `avatar` (`avatar`) | Una persona o un local con foto. El color de las iniciales va por rol: local `orange`, repartidor `green`, cliente `blue`. | canon (avatar por rol); el uso es propuesta |
-| `left-icon` (`icon`) | La misma fila cuando no hay foto: `store-2-line` para el local sin logo. | propuesta (precedente `master-overview.html:224`) |
-| `basic` | Ver «No usar». | propuesta |
-| `company` (`avatar` + `companyLogoSrc`) | Ver «No usar». | propuesta |
-| `brand` (`brand`) | Ver «No usar». | propuesta |
-| `card-provider` (`brand`) | Ver «No usar». | propuesta |
+| `avatar` (`avatar`) | Una persona o un local con foto. El color de las iniciales va por rol: local `orange`, repartidor `green`, cliente `blue`. | canon (avatar por rol) · el uso: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `left-icon` (`icon`) | La misma fila cuando no hay foto: `store-2-line` para el local sin logo. | canon (aprobado por el dueño, 05-10-2026, bloque B2; precedente `master-overview.html:224`) |
+| `basic` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `company` (`avatar` + `companyLogoSrc`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `brand` (`brand`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `card-provider` (`brand`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### Las piezas
 
 | prop | cuándo | fuente |
 |---|---|---|
 | `title` | Siempre. El nombre, nunca un id (regla de la pasada de UX). | canon (CLAUDE.md, «un identificador nunca es el título») |
-| `subtitle` | El dato que se compara entre filas: «214 pedidos este mes», «38 calificaciones». | propuesta |
-| `badge` | Un dato chico que se compara de un vistazo (la nota). El color sigue el significado del badge: `red` si está mal. | propuesta (badge: canon de colores) |
-| `dismissible` | La X solo cuando quitar la fila ES la acción (sacar a alguien del equipo, borrar una tarjeta). **El default es `true`**: pasa `false` siempre que no. | propuesta |
+| `subtitle` | El dato que se compara entre filas: «214 pedidos este mes», «38 calificaciones». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `badge` | Un dato chico que se compara de un vistazo (la nota). El color sigue el significado del badge: `red` si está mal. | canon (aprobado por el dueño, 05-10-2026, bloque B3; badge: canon de colores) |
+| `dismissible` | La X solo cuando quitar la fila ES la acción (sacar a alguien del equipo, borrar una tarjeta). **El default es `true`**: pasa `false` siempre que no. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `dismissAriaLabel` | Siempre que haya X: «Quitar a Rosa del equipo», no el default «Descartar». | propuesta |
-| `sublabel` | Ver «No usar». | propuesta |
-| `disabled` | Ver «No usar». | propuesta |
+| `sublabel` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `disabled` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 **Usos de hoy que rompen las reglas:** 0. Las 4 apagan la X a mano: el default de `dismissible`
 no le sirve a ningún uso de hoy.
@@ -79,7 +79,7 @@ táctil de `large` es de **44** (desde el 04-10-2026; 40 en web).
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | 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 |
+| X para quitar | `large` (32, área 44) | `medium` (20) | 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) (el tamaño `large` es extensión SUI aprobada el 03-10-2026) |
 
 ```html
 <sui-content-card … [size]="bp.isMobile() ? 'large' : 'medium'" (dismiss)="quitar(item)" />

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

@@ -24,8 +24,8 @@ Story: [Atoms/Divider/Content Divider](https://sui-design-system.web.app/?path=/
 > **En la guía del DS este componente se llama «Divider»** y trae: línea (default), línea con
 > espacio, línea con texto («OR»), solo texto, texto con fondo («a menudo va en modales») y
 > contenido al centro. Los cuatro tipos con botones vienen del Figma del DS, no de la guía. Lo
-> marcado «según la guía del DS» sale de su texto o de sus ejemplos; el resto es **propuesta,
-> falta aprobación**.
+> marcado «según la guía del DS» sale de su texto o de sus ejemplos; 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`: **3 content-dividers en 3 archivos**:
 > `pages/auth/login/login.html:61` y `pages/auth/register/register.html:97` (`text-line` «o») y
@@ -37,21 +37,21 @@ Story: [Atoms/Divider/Content Divider](https://sui-design-system.web.app/?path=/
 |---|---|---|---|
 | `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: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) |
+| `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) · cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `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 |
-| `icon-button` | **No usar** hoy (ver abajo). | `icon="add-line"` | propuesta, falta aprobación |
-| `text-button` | **No usar** hoy (ver abajo). | «Ver 12 más» | propuesta, falta aprobación |
-| `icon-button-group` | **No usar** hoy (ver abajo). | Subir · agregar · bajar | propuesta, falta aprobación |
-| `text-button-group` | **No usar** hoy (ver abajo). | «Producto» · «Sección» | propuesta, falta aprobación |
+| `icon-button` | **No usar** hoy (ver abajo). | `icon="add-line"` | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `text-button` | **No usar** hoy (ver abajo). | «Ver 12 más» | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `icon-button-group` | **No usar** hoy (ver abajo). | Subir · agregar · bajar | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `text-button-group` | **No usar** hoy (ver abajo). | «Producto» · «Sección» | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 | propiedad | regla | fuente |
 |---|---|---|
-| `text` | Se escribe en sentence case («o», «Con pocos pedidos»): el componente lo pasa a MAYÚSCULAS. | propuesta, falta aprobación |
-| `icon` | Solo en `icon-button`. Nombre Remix sin `ri-`. | propuesta, falta aprobación |
-| `ariaLabel` | **Obligatorio en `icon-button`**: sin él el lector dice «Acción». | propuesta, falta aprobación |
+| `text` | Se escribe en sentence case («o», «Con pocos pedidos»): el componente lo pasa a MAYÚSCULAS. | canon (CANON-SUI §5.1: sentence case, nunca ALL CAPS a mano) |
+| `icon` | Solo en `icon-button`. Nombre Remix sin `ri-`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `ariaLabel` | **Obligatorio en `icon-button`**: sin él el lector dice «Acción». | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 | `items` | Solo en los `-group`: de 2 a 3, cada uno con `ariaLabel` si es ícono. | propuesta, falta aprobación |
-| `disabled` | El botón existe pero hoy no aplica (lista ya completa). | propuesta, falta aprobación |
+| `disabled` | El botón existe pero hoy no aplica (lista ya completa). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 **Corregido el 03-10-2026:** los 2 «o» que estaban hechos a mano (login y registro) ya son `type="text-line"`.
 
@@ -66,10 +66,13 @@ Story: [Atoms/Divider/Content Divider](https://sui-design-system.web.app/?path=/
 
 ## Tamaño en mobile y en web
 
-Criterio de la app: **en mobile se lee y se toca con el dedo, así que va más grande; en web
-(desktop), más chico.** Mobile es `≤ 767 px`, el mismo corte de `BreakpointsService.isMobile()`
-en master-pedidos. Fuente: canon del dueño (03-10-2026), el mismo patrón que ya usan 27 controles
-de la app.
+Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026), que reemplaza al
+«tamaño por plataforma» del 03-10-2026 (mobile grande, web chico). La columna «mobile» es el celular de
+380 px o más y, en lo que se toca, también la tablet (`pointer: coarse`). La columna «web» es la
+computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el celular chico
+(< 380 px) va `medium` a la vista, sin achicar el área de 44 de lo que se toca. **Nada en `small` ni
+`xsmall`**, salvo lo que el componente solo tiene en chico. Hoy la app corta con
+`BreakpointsService.isMobile()` (≤ 767 px), que todavía no mira el puntero ni los 380 px.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|

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

@@ -39,30 +39,30 @@ content-card · ajuste → switch-label.**
 
 | type | cuándo | fuente |
 |---|---|---|
-| `left-icon` (`icon`) | El ícono dice de qué va la fila: los consejos («Revisa tu zona de cobertura»), «Contactar soporte». Sale en un círculo con borde (`sui-key-icon` stroke). | propuesta (14 de 18) |
-| `basic` | Fila de dato sin cara, casi siempre con badge: «Datos personales → Completados». | propuesta |
+| `left-icon` (`icon`) | El ícono dice de qué va la fila: los consejos («Revisa tu zona de cobertura»), «Contactar soporte». Sale en un círculo con borde (`sui-key-icon` stroke). | canon (aprobado por el dueño, 05-10-2026, bloque B2; 14 de 18) |
+| `basic` | Fila de dato sin cara, casi siempre con badge: «Datos personales → Completados». | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `avatar` (`avatar`) | Una persona o un local. El color de las iniciales va por rol: local `orange`, repartidor `green`, cliente `blue`. | canon (avatar por rol) |
-| `company` (`avatar` + `companyLogoSrc`) | Ver «No usar». | propuesta |
-| `brand` (`brand`) | Ver «No usar». | propuesta |
+| `company` (`avatar` + `companyLogoSrc`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `brand` (`brand`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### `size`
 
 | size | cuándo | fuente |
 |---|---|---|
-| `large` (leading 48, título 16) | Consejos y pasos que se leen, con descripción larga (los 13 de hoy). | propuesta |
-| `medium` (leading 40, título 14, default) | Filas de dato en una lista: el negocio del repartidor, el resumen del registro. | propuesta |
+| `large` (leading 48, título 16) | Consejos y pasos que se leen, con descripción larga (los 13 de hoy). | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `medium` (leading 40, título 14, default) | Filas de dato en una lista: el negocio del repartidor, el resumen del registro. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 ### Las piezas
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `label` | Siempre. En los consejos, una instrucción («Ponle foto a tus productos»); en los datos, el nombre del dato. | propuesta |
-| `description` | La explicación o el detalle. En los consejos, el porqué. | propuesta |
-| `badge` trailing (default) | El estado del dato a la derecha. Pasa el objeto con el color del badge: con string sale naranja. | propuesta |
-| `badgePlacement="title"` | El badge pegado al nombre, cuando la derecha queda libre o es angosta («Sabores Andinos · Propio»). | propuesta |
-| `sublabel` | Ver «No usar». | propuesta |
-| `toggle` / `toggleChecked` | Ver «No usar». | propuesta |
-| `disabled` | Ver «No usar». | propuesta |
+| `label` | Siempre. En los consejos, una instrucción («Ponle foto a tus productos»); en los datos, el nombre del dato. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `description` | La explicación o el detalle. En los consejos, el porqué. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `badge` trailing (default) | El estado del dato a la derecha. Pasa el objeto con el color del badge: con string sale naranja. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `badgePlacement="title"` | El badge pegado al nombre, cuando la derecha queda libre o es angosta («Sabores Andinos · Propio»). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `sublabel` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `toggle` / `toggleChecked` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `disabled` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 **Usos de hoy que rompen las reglas:** 0. A mirar: los 3 badges de
 `pages/driver-onboarding/step-complete/step-complete.html:48`–`:58` dicen estados de ciclo
@@ -75,16 +75,16 @@ No se toca, así que no tiene que llegar a 44. El `size` es de lectura, no de de
 
 | 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 |
+| consejos y pasos | `large` | `large` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| filas de dato | `large` | `medium` | canon (dueño, 05-10-2026, D16): grande en el celular; `medium` en la computadora, la tablet y el celular chico (no se toca) |
+| fila que se toca (soporte) | `large`, o dale a la fila un alto mínimo de 44 | `medium` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 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 -->
+<sui-content-label [size]="bp.isMobile() ? 'large' : 'medium'" … />   <!-- filas de dato y filas que se tocan (D16) -->
 ```
 
 ## «No usar»: por qué no hoy y cuándo sí

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,14 +37,14 @@ 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. | — |
 
@@ -74,8 +74,8 @@ 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 (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 -->
@@ -85,7 +85,7 @@ en 40, por debajo del piso; no hace falta un size nuevo porque `xlarge` ya llega
 
 | 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` `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"` | el CTA de al lado es `large` | si el CTA del detalle pasa a `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 |

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**.
 

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` | `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`). En mobile se fuerza a 1 solo. | 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,8 +86,8 @@ 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`.
@@ -122,8 +122,8 @@ campo (y su placeholder) va en 16/24. Con `large` el calendario no cambia (días
 
 | 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 | `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) |
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -149,7 +149,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` |