@ajuarezso/sui-design-system 0.24.1 → 0.25.1

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

@@ -28,18 +28,19 @@ Regla corta: **varios valores libres → tag-input · varias opciones fijas →
 > **En la guía del DS es un ejemplo de su página del input** («With Tags»: un campo con los chips
 > Berlin, London, Paris debajo). No dice cuándo usarlo.
 >
-> Uso medido el 04-10-2026 en `master-pedidos/src/app`: **0 usos**. Candidato: «Rubros que entran»
-> en `pages/super-admin/master-settings/master-settings.html:136`, un `sui-input` donde se escriben
-> palabras separadas por coma («ferreteria, ferretería, construcción») y la pantalla las parte a mano.
+> Uso medido el 06-10-2026 en `master-pedidos/src/app`: **1 uso**, «Rubros que entran» de una
+> categoría propia del home (`pages/super-admin/master-categorias/master-categorias.html:179`), con
+> `commaSeparator` y `addOnBlur`. Antes eran palabras separadas por coma en un `sui-input` que la
+> pantalla partía a mano.
 
 | prop / evento | cuándo | fuente |
 |---|---|---|
 | `label` · `required` · `sublabel` · `tooltip` · `hint` | Igual que `sui-input`. El hint dice cómo se agrega: «Escribe y presiona Enter». | según la guía del DS (ejemplo con label «Tag Input») |
-| `placeholder` | **Siempre** que el default genérico («Agrega una etiqueta…», 04-10-2026) no diga qué se agrega: «Agrega una palabra…». | propuesta, falta aprobación |
-| `commaSeparator` | `true` cuando la gente ya escribe con comas (rubros, sinónimos). | propuesta, falta aprobación |
-| `addOnBlur` | `true` en mobile: si sale del campo sin Enter, lo escrito no se pierde. | propuesta, falta aprobación |
-| `maxTags` | Cuando hay un tope real. Hoy no hay. | propuesta, falta aprobación |
-| `allowDuplicates` | `false` (default). | propuesta, falta aprobación |
+| `placeholder` | **Siempre** que el default genérico («Agrega una etiqueta…», 04-10-2026) no diga qué se agrega: «Agrega una palabra…». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `commaSeparator` | `true` cuando la gente ya escribe con comas (rubros, sinónimos). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `addOnBlur` | `true` siempre, en mobile y en web: si sale del campo sin Enter, lo escrito no se pierde. | canon (aprobado por el dueño, 05-10-2026, bloque B13) |
+| `maxTags` | Cuando hay un tope real. Hoy no hay. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `allowDuplicates` | `false` (default). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `rightIcon` | No usar hoy (ícono de info a la derecha). | — |
 | `error` + `errorMessage` | Falta al menos un valor en un campo obligatorio. | según la guía del DS (estado de error del Figma) |
 | `disabled` | Mientras se guarda. | API |
@@ -65,21 +66,42 @@ en web; el alto sigue en 48/52.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| campo de formulario | `xlarge` (52, chips de 40 con X tocable en 44) | `medium` (40) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (el 44 lo da la X del chip `xlarge`) |
+| campo de formulario | `large` (48, chips de 32 con X tocable en 32) | `medium` (40) | D16, dueño 05-10-2026 (fila `input`/`tag-input`); reemplaza el `xlarge` del 04-10-2026 · la X de 32 no llega a 44: ver «Por dispositivo» |
 
 ```html
-<sui-tag-input [size]="bp.isMobile() ? 'xlarge' : 'medium'" … />   <!-- bp = BreakpointsService -->
+<sui-tag-input [size]="bp.sizeControl()" … />   <!-- bp = BreakpointsService -->
 ```
 
+### Por dispositivo (D16)
+
+Fila `input`/`tag-input` de la tabla D16 (dueño, 05-10-2026). Se toca, así que va por tipo de
+puntero además del ancho:
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `large` (48) | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino) |
+| celular (380–767) | `large` (48) | los chips salen en `large`: la X mide 20 con área de 32, no llega a 44 |
+| tablet táctil (`pointer: coarse`) | `large` (48) | igual que el celular |
+| computadora (`pointer: fine`) | `medium` (40) | también en filtros del panel; `xsmall` y `small` no se usan |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`.
+
+**Choque entre dos filas de D16 (a confirmar con el dueño):** con el campo en `large` la X del
+chip queda en 32, y la fila `tag` dice que la X solo llega a 44 en `xlarge`. Hasta el 04-10-2026 el
+campo iba `xlarge` en el teléfono justo por eso. Mientras no se diga otra cosa, manda la fila
+`tag-input` (`large`).
+
+En master-pedidos: `[size]="bp.sizeControl()"`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
-| el componente entero (0 usos) | nadie carga listas de palabras | «Rubros que entran» de una categoría del home (`master-settings.html:136`), o sinónimos de un producto para el buscador |
+| otros usos (hoy solo los rubros de una categoría) | nadie más carga listas de palabras | sinónimos de un producto para el buscador |
 | `rightIcon` | el hint explica mejor | — |
 | `maxTags` | no hay topes | un máximo de 5 palabras clave por producto |
 | `allowDuplicates` | repetir no sirve | — |
-| `size` `xsmall` / `small` | no hay tag-inputs en tablas | un filtro denso del panel |
+| `size` `xsmall` / `small` | son chicos (D16, 05-10-2026) | nunca: un filtro denso del panel también va `medium` |
 
 ## API
 
@@ -124,10 +146,52 @@ no es parte del valor. Slot `[slot=right]` para un contenido propio a la derecha
 - **Accesibilidad (04-10-2026)**: el control trae su `id`; el `label` interno apunta a él con `for`,
   el hint o el error se enlazan con `aria-describedby` y `error` pone `aria-invalid`.
 
-## Ejemplo
+## Bien y mal
+
+Tamaño en el celular
+
+```html
+<!-- ❌ mal: sin size queda en medium en el celular y la X de los chips mide 16 (master-categorias.html:179) -->
+<sui-tag-input label="Rubros que entran" [commaSeparator]="true" [addOnBlur]="true"
+               [value]="e.match" (valueChange)="editar('match', $event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tag-input [size]="bp.sizeControl()" label="Rubros que entran" [commaSeparator]="true"
+               [addOnBlur]="true" [value]="e.match" (valueChange)="editar('match', $event)" />
+```
+
+Placeholder y hint
 
 ```html
+<!-- ❌ mal: el placeholder dice cómo se agrega, no qué se agrega (master-categorias.html:179) -->
+<sui-tag-input label="Rubros que entran" placeholder="Escribe y pulsa coma"
+               hint="Un local entra si su rubro contiene alguna de estas palabras" />
+```
+
+```html
+<!-- ✅ bien: el placeholder dice qué; el hint, cómo -->
 <sui-tag-input label="Rubros que entran" placeholder="Agrega una palabra…"
+               hint="Separa con coma. Un local entra si su rubro contiene alguna" />
+```
+
+Salir del campo sin Enter
+
+```html
+<!-- ❌ mal: sin addOnBlur, lo escrito y no confirmado se pierde al salir -->
+<sui-tag-input label="Sinónimos" [commaSeparator]="true" [(value)]="sinonimos" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tag-input label="Sinónimos" [commaSeparator]="true" [addOnBlur]="true" [(value)]="sinonimos" />
+```
+
+## Ejemplo
+
+```html
+<sui-tag-input [size]="bp.sizeControl()" label="Rubros que entran" placeholder="Agrega una palabra…"
                hint="Un local entra si su rubro contiene alguna" [commaSeparator]="true"
                [addOnBlur]="true" [(value)]="rubros" />
 ```

package/docs/sui-textarea/README.md

@@ -18,8 +18,8 @@ comentario al calificar.
 **No lo uses** para:
 
 - Un dato de una línea (nombre, referencia corta, URL, un slug): `sui-input`. Hoy hay 4 así:
-  «Personaliza tu url» en `pages/mi-negocio/mi-negocio.html:713` (a propósito, para que envuelva en
-  mobile, según su comentario) y 3 URL de imagen: `pages/mi-negocio/mi-negocio.html:534`, `:588` y
+  «Personaliza tu url» en `pages/mi-negocio/mi-negocio.html:714` (a propósito, para que envuelva en
+  mobile, según su comentario) y 3 URL de imagen: `pages/mi-negocio/mi-negocio.html:533`, `:588` y
   `components/add-product-modal/add-product-modal.html:72`.
 - Un motivo que se puede elegir de una lista cerrada: radios o `sui-select`, y la opción «Otro»
   abre el textarea (como ya hace `pages/envios/envios.html:822`, con `[maxLength]="200"`; el
@@ -47,13 +47,13 @@ Regla corta: **se redacta y puede pasar de una línea → textarea · una línea
 | `hint` | Para quién es el texto: «Lo va a leer el cliente», «Solo lo ve tu equipo». | según la guía del DS (ejemplo con hint) |
 | `error` + `errorMessage` | Motivo obligatorio vacío. El mensaje reemplaza al hint y el contador se pone rojo. | según la guía del DS (`Has Error`) |
 | `placeholder` | Un ejemplo de lo que se espera: «Ej. frágil, tocar el timbre, entregar en recepción». Elipsis `…`. | canon (CANON-SUI §5.2) |
-| `maxLength` | **Siempre que otro lo va a leer** (cliente, repartidor, local) o se guarda en la base: muestra «n/200» y corta el exceso. 200 para motivos y notas; 500 para descripciones. | según la guía del DS (su ejemplo principal lleva contador); los topes son propuesta |
-| `size` | El mismo de los inputs del formulario: `large` en mobile, `medium` en web. Ver «Tamaño en mobile y en web». | canon (aprobado por el dueño, 03-10-2026), extensión SUI; el «cuándo» es propuesta, falta aprobación |
-| `rows` | `3` para motivos y notas (el default del componente es `4`). `2` para una nota corta en un formulario largo. `4` o más solo para una descripción larga. | propuesta, falta aprobación |
-| `resizable` | `true` en web. En mobile **`false`**: la manija no se puede arrastrar con el dedo y parece un adorno. | según la guía del DS (versión con y sin manija); el «cuándo» es propuesta |
-| `readonly` | Mostrar un texto ya enviado con la misma forma del campo (copiar un mensaje). | propuesta, falta aprobación |
+| `maxLength` | **Siempre que otro lo va a leer** (cliente, repartidor, local) o se guarda en la base: muestra «n/200» y corta el exceso. 200 para motivos y notas; 500 para descripciones. | según la guía del DS (su ejemplo principal lleva contador); los topes: canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `size` | El mismo de los inputs del formulario: `large` en mobile, `medium` en web. Ver «Tamaño en mobile y en web». | canon (aprobado por el dueño, 03-10-2026), extensión SUI; el «cuándo»: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `rows` | `3` para motivos y notas (el default del componente es `4`). `2` para una nota corta en un formulario largo. `4` o más solo para una descripción larga. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `resizable` | `true` en web. En mobile y en la tablet táctil **`false`** (`!bp.tactil()`, D16): la manija no se puede arrastrar con el dedo y parece un adorno. | según la guía del DS (versión con y sin manija); el «cuándo»: canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `readonly` | Mostrar un texto ya enviado con la misma forma del campo (copiar un mensaje). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `disabled` | Mientras se envía. | según la guía del DS |
-| `autocomplete` | No hace falta: ningún texto libre se autocompleta. | propuesta, falta aprobación |
+| `autocomplete` | No hace falta: ningún texto libre se autocompleta. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 **Usos de hoy que rompen la regla** (medido el 04-10-2026; los `sublabel` sin paréntesis, los
 «(opcional)» en el label y los placeholders con `...` ya se corrigieron en la app, commits
@@ -61,9 +61,12 @@ Regla corta: **se redacta y puede pasar de una línea → textarea · una línea
 
 - **7 sin `maxLength`**: 4 son las URL de una línea de arriba y 1 es de solo lectura
   (`components/copy-text-dialog/copy-text-dialog.html:9`); quedan 2 «Notas» que se guardan en la base:
-  `pages/super-admin/super-admin.html:334`, `pages/super-admin/master-gastos/master-gastos.html:228`.
-- **Ninguno lleva `size`**: los 50 quedan en `medium` también en el teléfono, aunque los inputs del
-  mismo formulario ya vayan en `large`.
+  `pages/super-admin/super-admin.html:339`, `pages/super-admin/master-gastos/master-gastos.html:235`.
+- **`size` ya cumple** (medido de nuevo el 06-10-2026, tras la migración a D16): los 51 usos de la
+  app (sin vitrinas) van con `bp.sizeControl()`.
+- **49 de 51 sin `resizable`**: la manija sale también en el celular y la tablet, donde no se puede
+  arrastrar con el dedo (p. ej. «Nota para el repartidor», `pages/envios/envios.html:422`). Solo
+  `copy-text-dialog.html:9` y `mi-negocio.html:714` la apagan, y fijo, también en la computadora.
 
 ## Tamaño en mobile y en web
 
@@ -90,14 +93,34 @@ también en web, así que cada fila mide 24 en las dos plataformas.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| motivo, nota | el `size` del formulario (`large` si los inputs van en `large`), `rows=3`, `[resizable]="false"` | `medium`, `rows=3`, manija | propuesta, falta aprobación |
-| descripción larga | igual, `rows=4` | `medium`, `rows=4` | propuesta, falta aprobación |
+| motivo, nota | el `size` del formulario (`large` si los inputs van en `large`), `rows=3`, sin manija | `medium`, `rows=3`, manija | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| descripción larga | igual, `rows=4` | `medium`, `rows=4` | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+
+«Mobile» aquí incluye la tablet táctil (D16): la manija se apaga con `[resizable]="!bp.tactil()"`,
+no con `[resizable]="false"` ni por ancho, para que tampoco salga en una tablet ancha.
 
 ```html
-<sui-textarea [size]="bp.isMobile() ? 'large' : 'medium'" [rows]="3"
-              [resizable]="!bp.isMobile()" … />   <!-- bp = BreakpointsService -->
+<sui-textarea [size]="bp.sizeControl()" [rows]="3"
+              [resizable]="!bp.tactil()" … />   <!-- bp = BreakpointsService -->
 ```
 
+### Por dispositivo (D16)
+
+Fila `textarea` de la tabla D16 (dueño, 05-10-2026), la misma de `sui-input`: se toca, así que va
+por tipo de puntero además del ancho, y mide lo mismo que los campos y el botón del formulario.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino). Sin manija |
+| celular (380–767 px) | `large` | el mismo padding que el `sui-input` `large` de arriba. Sin manija |
+| tablet táctil (`pointer: coarse`) | `large` | también se toca con el dedo: `large` y sin manija, igual que el celular |
+| computadora (`pointer: fine`) | `medium` | con manija; `small` y `xsmall` no se usan |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`; el espacio extra va al ancho del
+formulario, no a un campo más alto. El alto lo siguen poniendo las `rows` en todos los dispositivos.
+
+En master-pedidos: `[size]="bp.sizeControl()"` + `[resizable]="!bp.tactil()"`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -147,12 +170,56 @@ Outputs: ninguno.
 - **Accesibilidad (04-10-2026)**: el control trae su `id`; el `label` interno apunta a él con `for`,
   el hint o el error se enlazan con `aria-describedby` y `error` pone `aria-invalid`.
 
+## Bien y mal
+
+URL de una imagen
+
+```html
+<!-- ❌ mal: una URL es un dato de una línea, y sin maxLength (pages/mi-negocio/mi-negocio.html:533, components/add-product-modal/add-product-modal.html:72) -->
+<sui-textarea [size]="bp.sizeControl()" [rows]="2" placeholder="https://ejemplo.com/logo.png"
+              [value]="logoUrlInput()" (valueChange)="logoUrlInput.set($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input type="url" [size]="bp.sizeControl()" placeholder="https://ejemplo.com/logo.png"
+           [value]="logoUrlInput()" (valueChange)="logoUrlInput.set($event)" />
+```
+
+Nota que se guarda en la base
+
+```html
+<!-- ❌ mal: sin maxLength no hay contador ni tope, y la nota se guarda (pages/super-admin/super-admin.html:339) -->
+<sui-textarea [size]="bp.sizeControl()" label="Notas" sublabel="(Opcional)" [rows]="3"
+              [ngModel]="subNotes()" (ngModelChange)="subNotes.set($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-textarea [size]="bp.sizeControl()" label="Notas" sublabel="(Opcional)" [rows]="3" [maxLength]="200"
+              [resizable]="!bp.tactil()" [ngModel]="subNotes()" (ngModelChange)="subNotes.set($event)" />
+```
+
+Nota para el repartidor en el celular
+
+```html
+<!-- ❌ mal: sin resizable, la manija sale en el celular y la tablet, donde no se arrastra con el dedo; y el tope de una nota es 200 (pages/envios/envios.html:422) -->
+<sui-textarea [size]="bp.sizeControl()" [maxLength]="300" label="Nota para el repartidor"
+              placeholder="Ej. frágil, tocar el timbre, entregar en recepción" [rows]="3" [(value)]="nota" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-textarea [size]="bp.sizeControl()" [maxLength]="200" label="Nota para el repartidor" [resizable]="!bp.tactil()"
+              placeholder="Ej. frágil, tocar el timbre, entregar en recepción" [rows]="3" [(value)]="nota" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-textarea label="Nota para el repartidor" sublabel="(Opcional)" [rows]="3" [maxLength]="200"
-              [size]="bp.isMobile() ? 'large' : 'medium'" placeholder="Ej. frágil, tocar el timbre, entregar en recepción"
-              [resizable]="!bp.isMobile()" [(value)]="nota" />
+              [size]="bp.sizeControl()" placeholder="Ej. frágil, tocar el timbre, entregar en recepción"
+              [resizable]="!bp.tactil()" [(value)]="nota" />
 
 <sui-textarea label="Motivo del rechazo" [required]="true" [rows]="3" [maxLength]="200"
               hint="Lo va a leer el local" [error]="intentado() && !motivo()"

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

@@ -30,8 +30,8 @@ pocas horas → select.**
 
 ## Qué variante usar
 
-> **La guía del DS no tiene página para este componente.** Todo es **propuesta, falta
-> aprobación**, aunque ya sea práctica de la app.
+> **La guía del DS no tiene página para este componente.** 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): **7 usos en
 > 4 pantallas** — horario del local (`weekly-schedule-editor`, 2), turnos del repartidor
@@ -43,25 +43,25 @@ pocas horas → select.**
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `12h` (default) | Siempre: en Perú la hora se dice «9:30 PM». Los 7 usos lo llevan. | propuesta |
-| `24h` | No usar en la app. | propuesta |
+| `12h` (default) | Siempre: en Perú la hora se dice «9:30 PM». Los 7 usos lo llevan. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `24h` | No usar en la app. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### `step`
 
 | valor | cuándo | fuente |
 |---|---|---|
-| `5` (default) | Horas reales que la persona conoce al minuto: apertura y cierre del local, «cerrar hasta». Con saltos de 30 se redondeaban cierres reales (comentario en `weekly-schedule-editor.html:37`). | propuesta |
-| `30` | Bloques de un turno, que se planifican por media hora (`driver-schedule.html:140`). | propuesta |
-| `15` | Citas o reservas en cuartos de hora. Sin caso hoy. | propuesta |
-| `1` | No usar: 60 opciones en la columna para una precisión que nadie pide. | propuesta |
+| `5` (default) | Horas reales que la persona conoce al minuto: apertura y cierre del local, «cerrar hasta». Con saltos de 30 se redondeaban cierres reales (comentario en `weekly-schedule-editor.html:37`). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `30` | Bloques de un turno, que se planifican por media hora (`driver-schedule.html:140`). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `15` | Citas o reservas en cuartos de hora. Sin caso hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `1` | No usar: 60 opciones en la columna para una precisión que nadie pide. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### `durationPresets`, `showFooter`, `inline`
 
 | input | valor | cuándo | fuente |
 |---|---|---|---|
-| `durationPresets` | `[]` (default desde el 04-10-2026) | **Siempre.** Los presets (15 min, 30 min, 45 min, 1 h) ponen la hora como «tiempo desde la medianoche»: «30 min» deja 12:30 AM. Por eso el default pasó a `[]`; los 7 usos de la app ya los apagaban. | propuesta |
-| `durationPresets` | lista propia | No usar mientras se lean como hora del día. | propuesta |
-| `showFooter` | `true` (default) | Cancelar/Aplicar: la hora no cambia hasta confirmar. Es lo correcto cuando la hora se guarda o publica algo (el horario del local). | propuesta |
+| `durationPresets` | `[]` (default desde el 04-10-2026) | **Siempre.** Los presets (15 min, 30 min, 45 min, 1 h) ponen la hora como «tiempo desde la medianoche»: «30 min» deja 12:30 AM. Por eso el default pasó a `[]`; los 7 usos de la app ya los apagaban. | según el código |
+| `durationPresets` | lista propia | No usar mientras se lean como hora del día. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `showFooter` | `true` (default) | Cancelar/Aplicar: la hora no cambia hasta confirmar. Es lo correcto cuando la hora se guarda o publica algo (el horario del local). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `showFooter` | `false` | Se aplica al tocar cada columna. Solo dentro de un formulario que ya tiene su propio «Guardar». | propuesta |
 | `inline` | `true` | El panel es el contenido, dentro de un `sui-modal` (sin campo ni popover). | propuesta |
 
@@ -69,28 +69,30 @@ pocas horas → select.**
 
 | input | cuándo | fuente |
 |---|---|---|
-| `size="medium"` (40 px, default) | Web. En mobile va `large` (48), que existe desde el 03-10-2026 (ver «Tamaño»). | propuesta |
-| `size="small"` (36 px) | Filas densas en web. | propuesta |
-| `label` | Siempre, corto y en verbo o momento: «Abre», «Cierra», «Inicio», «Cerrar hasta». | propuesta |
-| `sublabel` / `tooltip` | «Opcional» o una aclaración que no entra en el label. | propuesta |
-| `hint` | Qué pasa con esa hora: «Se reabre sola a medianoche». | propuesta |
-| `error` + `errorMessage` | La hora no cuadra: «Cierra antes de abrir». | propuesta |
-| `required` | La hora es obligatoria para guardar. | propuesta |
-| `disabled` | Mientras se guarda (como hacen el horario y los turnos). | propuesta |
-| `placeholder` | Lo que se elige: «Hora de cierre». El default «Seleccionar hora» sirve. | propuesta |
-
-Usos de hoy que rompen la regla: los 7 cumplen `12h`, `durationPresets=[]` y `label`, pero **los 7
-van con `size="medium"` fijo**, también en pantallas del teléfono (turnos y votaciones del
-repartidor): campo de 40, contra el `large` de la tabla de «Tamaño». Cancelar / Aplicar ya salen en
-48 en el teléfono desde el 04-10-2026 (el componente los fuerza en mobile).
+| `size="medium"` (40 px, default) | Web. En mobile va `large` (48), que existe desde el 03-10-2026 (ver «Tamaño»). | mobile `large`: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono — el campo `medium` mide 40 · web `medium`: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `size="small"` (36 px) | No usar: es chico. Las filas densas de web van en `medium`. | canon (dueño, 05-10-2026, D16) |
+| `label` | Siempre, corto y en verbo o momento: «Abre», «Cierra», «Inicio», «Cerrar hasta». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `sublabel` / `tooltip` | «Opcional» o una aclaración que no entra en el label. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `hint` | Qué pasa con esa hora: «Se reabre sola a medianoche». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `error` + `errorMessage` | La hora no cuadra: «Cierra antes de abrir». | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `required` | La hora es obligatoria para guardar. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `disabled` | Mientras se guarda (como hacen el horario y los turnos). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `placeholder` | El default «Elige una hora» sirve. Si hace falta decir qué hora, en imperativo con tuteo: «Elige la hora de cierre». | canon (dueño, 05-10-2026, P4 a); el default cambió en la 0.25.0 (antes «Seleccionar hora») |
+
+Usos de hoy que rompen la regla (medido de nuevo el 06-10-2026): los 7 cumplen `12h`,
+`durationPresets=[]` y `label`, y ya no van en `medium` fijo, pero **los 7 van con
+`bp.isMobile() ? 'large' : 'medium'`** en vez de `bp.sizeControl()`: en la tablet táctil el campo
+queda en 40 mientras el botón de al lado ya sube a 48 (p. ej.
+`pages/driver/driver-dashboard/driver-dashboard.html:1521` junto a «Pedir cierre»). Cancelar /
+Aplicar ya salen en 48 en el teléfono desde el 04-10-2026 (el componente los fuerza en mobile).
 
 ### Las piezas que trae (exportadas, sin carpeta ni story propias)
 
 | pieza | qué es | cuándo suelta | fuente |
 |---|---|---|---|
-| `sui-time-picker-item` | una fila de la columna (36 px) | No usar: para filas de horario que se tocan con el pulgar va `sui-radio-label` (`checkout.html:469`). | propuesta |
-| `sui-time-picker-duration` | la pastilla de un preset | No usar: es la de los presets de duración. | propuesta |
-| `sui-time-picker-status` | pastilla Disponible/Ocupado/En reunión/Desconectado | No usar: el estado del repartidor ya tiene su badge. | propuesta |
+| `sui-time-picker-item` | una fila de la columna (36 px) | No usar: para filas de horario que se tocan con el pulgar va `sui-radio-label` (`checkout.html:469`). | canon (aprobado por el dueño, 05-10-2026, bloque B7) |
+| `sui-time-picker-duration` | la pastilla de un preset | No usar: es la de los presets de duración. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `sui-time-picker-status` | pastilla Disponible/Ocupado/En reunión/Desconectado | No usar: el estado del repartidor ya tiene su badge. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ## Tamaño en mobile y en web
 
@@ -116,14 +118,32 @@ campo y la de las filas van en 16/24; la fila sigue en 44 (el padding bajó de 1
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| horario en un formulario | `large` (48) o `xlarge` (52) si va junto a campos xlarge | `medium`, o `small` en filas densas | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: propuesta, falta aprobación |
+| horario en un formulario | `large` (48) o `xlarge` (52) si va junto a campos xlarge | `medium`, también en filas densas | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web `medium`: canon (aprobado por el dueño, 05-10-2026, bloque B1) · también en filas densas, nunca `small`: canon (dueño, 05-10-2026, D16) |
 
 ```html
 <sui-time-picker label="Cierra" format="12h" [step]="5" [durationPresets]="[]"
-                 [size]="bp.isMobile() ? 'large' : 'medium'"
+                 [size]="bp.sizeControl()"
                  [value]="cierre()" (valueChange)="cierre.set($event)" />
 ```
 
+### Por dispositivo (D16)
+
+Fila `time-picker` de la tabla D16 (dueño, 05-10-2026), la misma de `sui-input` y `sui-select`: se
+toca, así que va por tipo de puntero además del ancho, y mide lo mismo que los campos y el botón
+que tiene al lado.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (48) | D16 pide `medium` con área tocable de 44; mientras el DS no estire el área de los `medium`, va `large` (interino) |
+| celular (380–767 px) | `large` (48) | `xlarge` (52) solo si va junto a campos `xlarge` |
+| tablet táctil (`pointer: coarse`) | `large` (48) | con `large` el panel también crece (filas de 44, Cancelar / Aplicar en 48); el arreglo automático del pie solo mira el ancho (≤ 767 px), así que en la tablet hace falta pasar `large` |
+| computadora (`pointer: fine`) | `medium` (40) | también en filas densas; `small` no se usa |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`; el espacio extra va a ancho y columnas,
+no a campos más altos.
+
+En master-pedidos: `[size]="bp.sizeControl()"`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 Nada se borra del DS. Lo marcado «no usar» no tiene caso en la app de hoy; si un flujo nuevo cae
@@ -154,7 +174,7 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 | `hint` | `string \| null` | `null` |
 | `errorMessage` | `string \| null` | `null` |
 | `error` | `boolean` | `false` |
-| `placeholder` | `string` | `'Seleccionar hora'` |
+| `placeholder` | `string` | `'Elige una hora'` |
 | `disabled` | `boolean` | `false` |
 | `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
 | `format` | `'12h' \| '24h'` | `'12h'` |
@@ -234,13 +254,56 @@ interface SuiTimeDurationPreset { label: string; minutes: number; }
   defecto (antes venían en inglés del Figma); `label` sigue sirviendo para cambiarlo.
 - El atributo `title` del host se borra solo (no sale el tooltip gris del navegador).
 
+## Bien y mal
+
+Hora junto a un botón
+
+```html
+<!-- ❌ mal: bp.isMobile() deja el campo en medium (40) en la tablet táctil, y el botón de al lado con bp.sizeControl() sube a large (48) (pages/driver/driver-dashboard/driver-dashboard.html:1521) -->
+<sui-time-picker [size]="bp.isMobile() ? 'large' : 'medium'" format="12h" [step]="5" [durationPresets]="[]"
+                 label="Cerrar hasta" [value]="horaCierreProp()" (valueChange)="onHoraCierreChange($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-time-picker [size]="bp.sizeControl()" format="12h" [step]="5" [durationPresets]="[]"
+                 label="Cerrar hasta" [value]="horaCierreProp()" (valueChange)="onHoraCierreChange($event)" />
+```
+
+Presets de duración
+
+```html
+<!-- ❌ mal: los presets no suman sobre la hora: «30 min» deja 12:30 AM (ver Trampas) -->
+<sui-time-picker label="Cerrar por" [durationPresets]="[{ label: '30 min', minutes: 30 }, { label: '1 h', minutes: 60 }]"
+                 [value]="hasta()" (valueChange)="hasta.set($event)" />
+```
+
+```html
+<!-- ✅ bien: se pide la hora del día, sin presets -->
+<sui-time-picker label="Cerrar hasta" format="12h" [step]="5" [durationPresets]="[]" [size]="bp.sizeControl()"
+                 [value]="hasta()" (valueChange)="hasta.set($event)" />
+```
+
+Formato y paso
+
+```html
+<!-- ❌ mal: en Perú se dice «9:30 PM», y 60 minutos en la columna para una precisión que nadie pide -->
+<sui-time-picker label="Abre" format="24h" [step]="1" [value]="apertura()" (valueChange)="apertura.set($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-time-picker label="Abre" format="12h" [step]="5" [durationPresets]="[]" [size]="bp.sizeControl()"
+                 [value]="apertura()" (valueChange)="apertura.set($event)" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- Horario del local: abre / cierra -->
-<sui-time-picker label="Abre" format="12h" [step]="5" [durationPresets]="[]"
+<sui-time-picker label="Abre" format="12h" [step]="5" [durationPresets]="[]" [size]="bp.sizeControl()"
                  [value]="apertura()" (valueChange)="apertura.set($event)" />
-<sui-time-picker label="Cierra" format="12h" [step]="5" [durationPresets]="[]"
+<sui-time-picker label="Cierra" format="12h" [step]="5" [durationPresets]="[]" [size]="bp.sizeControl()"
                  [error]="cierraAntes()" errorMessage="Cierra antes de abrir"
                  [value]="cierre()" (valueChange)="cierre.set($event)" />
 ```