@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/docs/sui-textarea/README.md

@@ -0,0 +1,250 @@
+---
+name: sui-textarea
+selector: sui-textarea
+resumen: Campo de varias líneas para un texto libre (motivo, nota al repartidor, descripción)
+alternativas: [sui-input (un dato de una línea), sui-rich-editor (texto con formato, hoy sin uso), sui-select (motivos que se pueden elegir de una lista)]
+---
+
+# sui-textarea
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-textarea`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+>
+> **La API de aquí no es igual a la de Angular.** Lo que el texto nombre y figure en «Diferencias con
+> el SUI Angular» (dentro de API) aquí no existe.
+
+Story: [Molecules/Input/Textarea](https://sui-design-system.web.app/?path=/docs/molecules-input-textarea--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para un texto que la persona redacta y que puede ocupar más de una línea: el motivo de
+un rechazo o una cancelación, la nota para el repartidor, la descripción de un producto, un
+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: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 `max-length="200"`; el
+  `.slice(0, 200)` del `valueChange` sobra).
+- Texto con negritas o enlaces: no hay caso hoy (ver `sui-rich-editor`).
+- Un `<textarea>` nativo: queda **1** (`pages/products/add-product/add-product.html:155`).
+
+Regla corta: **se redacta y puede pasar de una línea → textarea · una línea → input · se elige → select.**
+
+## Qué variante usar
+
+> **La guía del DS lo presenta con contador de caracteres y su propia manija para agrandarlo**
+> («78/200»), y aparte una versión simple sin contador. No dice cuándo va cada una.
+>
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
+> `master-ejercicios`): **50 usos en 29 archivos**. `rows`: 30 en 3, 13 en 2, 4 en 4, 1 en 8 y 2 sin
+> `rows` (default 4). Con `maxLength`: 43. Con `resizable=false`: 2. 38 con label, 12 sin. Con `size`: 0.
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `label` | Siempre, salvo cuando la pregunta ya está escrita justo encima (la calificación: «¿Qué te gustó?»). | según la guía del DS (ejemplo con label) |
+| `required` | Motivo obligatorio (rechazar, anular). | según la guía del DS (`Enter Your Message*`) |
+| `sublabel` | **«(Opcional)»**, con paréntesis, cuando no es obligatorio, en vez de «(opcional)» dentro del label. Sin paréntesis queda pegado al label. | según la guía del DS (`Optional`) y canon (README de `sui-form-label`) |
+| `tooltip` | Hoy sin caso. | según la guía del DS (ícono de info del label) |
+| `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: 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. | 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
+`ce4a2d12` y `e0470b34`, y 35 textos pasaron a tener `maxLength` en `d14694fd`):
+
+- **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: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
+
+Tiene `size` con **los mismos nombres que `sui-input`** (`xsmall` · `small` · `medium` · `large` ·
+`xlarge`): cambia el padding y el radio, y el texto arranca en la misma línea vertical que el del
+input del mismo tamaño. El alto lo siguen poniendo las `rows`. `medium` es el de la guía del DS y el
+default (padding 10/12, radio 12); el resto es extensión SUI.
+
+| size | padding (arriba/der · izq) | radio | fuente |
+|---|---|---|---|
+| `xlarge` | 14 · 16 | 12 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `large` | 12 · 14 | 12 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `medium` (default) | 10 · 12 | 12 | según la guía del DS |
+| `small` | 8 · 10 | 10 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `xsmall` | 6 · 8 | 8 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+
+**En mobile (≤ 767 px) la letra sube sola a 16/24** (Paragraph/Medium), como el input sube a 16:
+evita el zoom de iOS al enfocar y el textarea deja de verse más chico que los campos de arriba. Por
+eso cada fila mide 24 px en el teléfono y 20 en web (3 filas ≈ 72 + padding en mobile, 60 + padding
+en web): el área que se toca siempre pasa los 44 px.
+
+En large y xlarge el texto sube a 16 px (canon, aprobado por el dueño el 03-10-2026): en esos dos tamaños va en 16/24
+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`, 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.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 |
+|---|---|---|
+| `tooltip` | el hint alcanza | un campo del panel con una regla que no entra en una línea («qué puede ver el cliente») |
+| `rows` 6 o más | ningún texto de la app es tan largo | términos y condiciones propios de un local, o la descripción larga de una campaña |
+| `autocomplete` | un texto libre no se autocompleta | — |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `autocomplete` | `autocomplete` | `null \| string` | `null` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `error` | `error` | `boolean` | `false` |
+| `errorMessage` | `error-message` | `null \| string` | `null` |
+| `hint` | `hint` | `null \| string` | `null` |
+| `label` | `label` | `null \| string` | `null` |
+| `maxLength` | `max-length` | `null \| number` | `null` |
+| `placeholder` | `placeholder` | `string` | `''` |
+| `readonly` | `readonly` | `boolean` | `false` |
+| `required` | `required` | `boolean` | `false` |
+| `resizable` | `resizable` | `boolean` | `true` |
+| `rows` | `rows` | `number` | `4` |
+| `size` | `size` | `"large" \| "medium" \| "small" \| "xlarge" \| "xsmall"` | `'medium'` |
+| `sublabel` | `sublabel` | `null \| string` | `null` |
+| `tooltip` | `tooltip` | `null \| string` | `null` |
+| `value` | `value` | `string` | `''` |
+
+| evento | `event.detail` |
+|---|---|
+| `suiBlur` | `void` |
+| `valueChange` | `string` |
+
+| método | firma |
+|---|---|
+| `setDisabledState` | `setDisabledState(isDisabled: boolean) => Promise<void>` |
+| `writeValue` | `writeValue(v: string \| null) => Promise<void>` |
+
+### Diferencias con el SUI Angular
+
+- **Eventos solo de aquí:** `suiBlur`
+<!-- api:fin -->
+
+`value` es `model<string>`. Implementa `ControlValueAccessor` (`formControlName`, `ngModel` + `ngModelChange`).
+
+## Trampas
+
+- **`maxLength` con L mayúscula** (en `sui-input` es `maxlength`). Con el nombre equivocado Angular
+  no avisa en un atributo plano y el tope no se aplica.
+- Sin `maxLength` **no hay contador**; la manija sale igual mientras `resizable` sea `true`.
+- El tope también corta lo que se pega (no solo lo que se tipea).
+- El hint lleva siempre el ícono `information-fill`, también el neutro (así está en el Figma).
+- El `size` no cambia el alto: eso lo deciden las `rows`. Lo que alinea con el input es el padding.
+- `error` sin `errorMessage` pinta el borde y no dice qué falta.
+- **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()} onValueChange={(e) => logoUrlInput.set(e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input type="url" size={bp.sizeControl()} placeholder="https://ejemplo.com/logo.png"
+           value={logoUrlInput()} onValueChange={(e) => logoUrlInput.set(e.detail)} />
+```
+
+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()} onNgModelChange={(e) => subNotes.set(e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-textarea size={bp.sizeControl()} label="Notas" sublabel="(Opcional)" rows="3" max-length="200"
+              resizable={!bp.tactil()} ngModel={subNotes()} onNgModelChange={(e) => subNotes.set(e.detail)} />
+```
+
+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()} max-length="300" label="Nota para el repartidor"
+              placeholder="Ej. frágil, tocar el timbre, entregar en recepción" rows="3" value={nota} onValueChange={(e) => (nota = e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-textarea size={bp.sizeControl()} max-length="200" label="Nota para el repartidor" resizable={!bp.tactil()}
+              placeholder="Ej. frágil, tocar el timbre, entregar en recepción" rows="3" value={nota} onValueChange={(e) => (nota = e.detail)} />
+```
+
+## Ejemplo
+
+```html
+<sui-textarea label="Nota para el repartidor" sublabel="(Opcional)" rows="3" max-length="200"
+              size={bp.sizeControl()} placeholder="Ej. frágil, tocar el timbre, entregar en recepción"
+              resizable={!bp.tactil()} value={nota} onValueChange={(e) => (nota = e.detail)} />
+
+<sui-textarea label="Motivo del rechazo" required rows="3" max-length="200"
+              hint="Lo va a leer el local" error={intentado() && !motivo()}
+              error-message="Escribe el motivo" value={motivo} onValueChange={(e) => (motivo = e.detail)} />
+```

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

@@ -0,0 +1,302 @@
+---
+name: sui-time-picker
+selector: sui-time-picker
+resumen: Campo para elegir una hora del día, con columnas de hora, minuto y AM/PM
+alternativas: [sui-tab-chips + sui-radio-label (día y franja de entrega de un pedido programado), sui-select (pocas horas fijas), sui-input type="time" (hora libre con el selector del sistema)]
+---
+
+# sui-time-picker
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-time-picker`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+>
+> **La API de aquí no es igual a la de Angular.** Lo que el texto nombre y figure en «Diferencias con
+> el SUI Angular» (dentro de API) aquí no existe.
+
+Story: [Molecules/Date & Time/Time Picker](https://sui-design-system.web.app/?path=/docs/molecules-date-time-time-picker--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para una **hora del día** que la persona escribe con libertad: el horario de apertura y
+cierre del local, el turno del repartidor, «Cerrar hasta las 9:30 PM».
+
+**No lo uses** para:
+
+- **La hora de entrega de un pedido programado**: no se elige una hora libre, se elige una
+  **franja** que el local puede cumplir. Va la hoja del checkout (`sui-tab-chips` para el día y
+  `sui-radio-label` con `flip` para cada franja). Es la maqueta aprobada, y el propio código
+  descartó `sui-time-picker-item` para esas filas porque son densas y sin separación
+  (`checkout.html:469`).
+- Pocas horas fijas («12:00», «13:00», «14:00»): `sui-select`.
+- Una duración («30 min», «1 h»): no hay componente de duración; un `sui-select` o
+  `sui-tab-chips` con los valores (ver Trampas: los presets de este componente no son duraciones).
+
+Regla corta: **hora libre del día → time-picker · franja de entrega → la hoja del checkout ·
+pocas horas → select.**
+
+## Qué variante usar
+
+> **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
+> (`driver-schedule`, 2), votaciones de cierre y recargo (`driver-dashboard`, 2) y el cierre del
+> local en la central (`central-inicio`, 1). Los 7 van con `size="medium"`, `format="12h"`,
+> `durationPresets={[]}` y footer. `step`: 5 en 5 usos, 30 en 2.
+
+### `format`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| `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`). | 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. | 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 |
+
+### `size`, `label`, `hint`, `error`, `required`, `disabled`
+
+| 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»). | 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`). | 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
+
+En mobile se toca con el dedo: lo que se toca mide **44 px o más**. En web, con mouse, va más
+chico. En pantallas de los dos se elige con el servicio de breakpoints de la app (`bp`, en
+`services/breakpoints.service.ts`).
+
+`size` tiene `small` (36), `medium` (40, default), **`large` (48)**, extensión SUI: mide lo mismo
+que `sui-input` y `sui-select` `large`, que van al lado en los formularios de horario, y **`xlarge`
+(52)**, el de `sui-input` `xlarge`. Con `large` y `xlarge` el panel también crece: **filas de 44** y
+**Cancelar / Aplicar en `large` (48)**. En mobile (≤ 767 px), con cualquier `size`, las filas miden
+44 y **Cancelar / Aplicar van en `large`** (fix 04-10-2026: antes, con el campo en `medium`, el pie
+quedaba en 36; ahora hace lo mismo que el `sui-datepicker`).
+
+| pieza | `small` · `medium` en web | `large` | **`xlarge`** | mobile (cualquier size) | fuente |
+|---|---|---|---|---|---|
+| campo (trigger) | 36 · 40 | 48 | **52** | el del `size` | 36/40: medido · 48: canon (aprobado por el dueño, 03-10-2026), extensión SUI · 52: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| fila de la columna | 36 | 44 | 44 | 44 | 36: Figma · 44: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| Cancelar / Aplicar | 36 | 48 | 48 | **48** | 48 en large: canon (aprobado por el dueño, 03-10-2026) · 48 en mobile con cualquier size: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+
+En large y xlarge el texto sube a 16 px (regla del 03-10-2026): con `large` y `xlarge`, la hora del
+campo y la de las filas van en 16/24; la fila sigue en 44 (el padding bajó de 12 a 10).
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| 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.sizeControl()}
+                 value={cierre()} onValueChange={(e) => cierre.set(e.detail)} />
+```
+
+### 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
+en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `format="24h"` | en Perú se dice «9:30 PM» | una pantalla técnica del super admin (registro de eventos) donde se comparan horas |
+| `step="1"` | 60 opciones sin necesidad | registrar la hora exacta de un hecho (hora real de entrega en un reclamo) |
+| `durationPresets` (cualquiera) | se leen como hora desde la medianoche, no como duración | si el DS los cambia para sumar sobre la hora elegida («en 30 min») |
+| `sui-time-picker-item` suelto | fila de 36 px, densa | una lista desplegable de horas en web |
+| `sui-time-picker-duration` suelto | es parte de los presets | — |
+| `sui-time-picker-status` | el estado del repartidor ya tiene su badge | un panel de disponibilidad del equipo del local |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `disabled` | `disabled` | `boolean` | `false` |
+| `durationPresets` | — (solo por propiedad JS) | `readonly SuiTimeDurationPreset[]` | `[]` |
+| `error` | `error` | `boolean` | `false` |
+| `errorMessage` | `error-message` | `string` | `''` |
+| `format` | `format` | `"12h" \| "24h"` | `'12h'` |
+| `hint` | `hint` | `string` | `''` |
+| `inline` | `inline` | `boolean` | `false` |
+| `label` | `label` | `string` | `''` |
+| `placeholder` | `placeholder` | `string` | `'Elige una hora'` |
+| `required` | `required` | `boolean` | `false` |
+| `showFooter` | `show-footer` | `boolean` | `true` |
+| `size` | `size` | `"large" \| "medium" \| "small" \| "xlarge"` | `'medium'` |
+| `step` | `step` | `number` | `5` |
+| `sublabel` | `sublabel` | `string` | `''` |
+| `tooltip` | `tooltip` | `string` | `''` |
+| `value` | `value` | `SuiTimeValue \| null \| string` | `null` |
+
+| evento | `event.detail` |
+|---|---|
+| `closed` | `void` |
+| `opened` | `void` |
+| `valueChange` | `SuiTimeValue \| null` |
+
+### Diferencias con el SUI Angular
+
+- **Eventos solo de aquí:** `closed`, `opened`
+<!-- api:fin -->
+
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `fecha.hora` | Hora | — |
+| `fecha.minuto` | Minuto | — |
+| `fecha.amPm` | AM/PM | — |
+| `fecha.duracionRapida` | Duración rápida | — |
+| `fecha.eligeHora` | Elige una hora | `placeholder` |
+| `fecha.disponible` | Disponible | `label` del status |
+| `fecha.ocupado` | Ocupado | `label` del status |
+| `fecha.enReunion` | En reunión | `label` del status |
+| `fecha.desconectado` | Desconectado | `label` del status |
+<!-- textos:fin -->
+
+Es `ControlValueAccessor`; `writeValue` acepta también un string `"21:30"`.
+
+```ts
+interface SuiTimeValue { hours: number; minutes: number; }   // hours en 0–23 aunque el format sea 12h
+interface SuiTimeDurationPreset { label: string; minutes: number; }
+```
+
+## Trampas
+
+- **Los presets de duración no son duraciones**: «30 min» pone la hora en 00:30 (12:30 AM). Desde
+  el 04-10-2026 el default es `[]` y el panel no los muestra; pasarlos (`DEFAULT_DURATION_PRESETS`
+  sigue exportado) los vuelve a poner con ese mismo comportamiento.
+- **`value.hours` va de 0 a 23** aunque se muestre en 12h: 9:30 PM es `{ hours: 21, minutes: 30 }`.
+- **Al abrir sin valor arranca en 9:00 AM**, no vacío.
+- **Cerrar con clic afuera o Escape descarta** lo elegido, igual que Cancelar.
+- Con `step` que no contiene el minuto guardado (21:37 con step 5), la columna de minutos no
+  marca ninguno.
+- Cancelar / Aplicar van en `large` (48) con `size="large"`/`"xlarge"` y, desde el 04-10-2026,
+  siempre en mobile (≤ 767 px), igual que el `sui-datepicker`. En web con `small`/`medium`
+  siguen en 36.
+- El panel flota con el overlay del DS (como `sui-select`): se da vuelta si no entra abajo.
+- `sui-time-picker-status` dice «Disponible», «Ocupado», «En reunión» y «Desconectado» por
+  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()} onValueChange={(e) => onHoraCierreChange(e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-time-picker size={bp.sizeControl()} format="12h" step="5" durationPresets={[]}
+                 label="Cerrar hasta" value={horaCierreProp()} onValueChange={(e) => onHoraCierreChange(e.detail)} />
+```
+
+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()} onValueChange={(e) => hasta.set(e.detail)} />
+```
+
+```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()} onValueChange={(e) => hasta.set(e.detail)} />
+```
+
+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()} onValueChange={(e) => apertura.set(e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-time-picker label="Abre" format="12h" step="5" durationPresets={[]} size={bp.sizeControl()}
+                 value={apertura()} onValueChange={(e) => apertura.set(e.detail)} />
+```
+
+## Ejemplo
+
+```html
+<!-- Horario del local: abre / cierra -->
+<sui-time-picker label="Abre" format="12h" step="5" durationPresets={[]} size={bp.sizeControl()}
+                 value={apertura()} onValueChange={(e) => apertura.set(e.detail)} />
+<sui-time-picker label="Cierra" format="12h" step="5" durationPresets={[]} size={bp.sizeControl()}
+                 error={cierraAntes()} error-message="Cierra antes de abrir"
+                 value={cierre()} onValueChange={(e) => cierre.set(e.detail)} />
+```

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

@@ -0,0 +1,34 @@
+---
+name: sui-time-picker-duration
+selector: sui-time-picker-duration
+resumen: Pieza de sui-time-picker; cuándo usarla y sus trampas están en el README de sui-time-picker
+alternativas: [sui-time-picker]
+---
+
+# sui-time-picker-duration
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **Es una pieza de `sui-time-picker`.** En el SUI Angular vive en la misma carpeta y se documenta en
+> la misma página: cuándo usarla, variantes, tamaño por dispositivo y trampas están en
+> [`sui-time-picker`](../sui-time-picker/README.md). Aquí va solo su API, leída del código.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `active` | `active` | `boolean` | `false` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `label` | `label` | `string` | `''` |
+
+| evento | `event.detail` |
+|---|---|
+| `clicked` | `Event` |
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->

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

@@ -0,0 +1,39 @@
+---
+name: sui-time-picker-item
+selector: sui-time-picker-item
+resumen: Pieza de sui-time-picker; cuándo usarla y sus trampas están en el README de sui-time-picker
+alternativas: [sui-time-picker]
+---
+
+# sui-time-picker-item
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **Es una pieza de `sui-time-picker`.** En el SUI Angular vive en la misma carpeta y se documenta en
+> la misma página: cuándo usarla, variantes, tamaño por dispositivo y trampas están en
+> [`sui-time-picker`](../sui-time-picker/README.md). Aquí va solo su API, leída del código.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `active` | `active` | `boolean` | `false` |
+| `direction` | `direction` | `"center" \| "right"` | `'right'` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `highlighted` | `highlighted` | `boolean` | `false` |
+| `meridiem` | `meridiem` | `string` | `''` |
+| `rightMeridiem` | `right-meridiem` | `string` | `''` |
+| `rightTime` | `right-time` | `string` | `''` |
+| `time` | `time` | `string` | `''` |
+
+| evento | `event.detail` |
+|---|---|
+| `clicked` | `Event` |
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->

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

@@ -0,0 +1,35 @@
+---
+name: sui-time-picker-status
+selector: sui-time-picker-status
+resumen: Pieza de sui-time-picker; cuándo usarla y sus trampas están en el README de sui-time-picker
+alternativas: [sui-time-picker]
+---
+
+# sui-time-picker-status
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **Es una pieza de `sui-time-picker`.** En el SUI Angular vive en la misma carpeta y se documenta en
+> la misma página: cuándo usarla, variantes, tamaño por dispositivo y trampas están en
+> [`sui-time-picker`](../sui-time-picker/README.md). Aquí va solo su API, leída del código.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `disabled` | `disabled` | `boolean` | `false` |
+| `label` | `label` | `string` | `''` |
+| `selected` | `selected` | `boolean` | `false` |
+| `type` | `type` | `"available" \| "busy" \| "in-meeting" \| "offline"` | `'available'` |
+
+| evento | `event.detail` |
+|---|---|
+| `clicked` | `Event` |
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->