@ajuarezso/sui-design-system 0.20.0 → 0.22.0

package/docs/sui-datepicker/README.md

@@ -0,0 +1,197 @@
+---
+name: sui-datepicker
+selector: sui-datepicker
+resumen: Calendario para elegir una fecha o un rango de fechas, en popover o en línea
+alternativas: [sui-input type="date" (una fecha suelta en un formulario: abre el selector del sistema), sui-tab-chips + sui-radio-label (día y franja de un pedido programado), sui-tab-chips o sui-select (períodos fijos: hoy, 7 días, 30 días)]
+---
+
+# sui-datepicker
+
+Story: [Molecules/Date & Time/Datepicker](https://sui-design-system.web.app/?path=/docs/molecules-date-time-datepicker--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para elegir un **rango de fechas** (desde–hasta) con presets al costado, o para mostrar
+un **calendario en línea** donde importa ver el mes entero (días con pedidos marcados con
+`markedDates`, días bloqueados con `min`/`max`).
+
+**No lo uses** para:
+
+- **Una fecha suelta en un formulario** («Válido hasta», «Fecha del gasto»): `sui-input type="date"`.
+  En el celular abre el selector del sistema, mide 48 px en `large` y no tapa la pantalla con un
+  popover de 368 px.
+- **El día y la hora de un pedido programado**: el checkout ya tiene su hoja (`sui-modal-sheet`
+  con `sui-tab-chips` para el día y `sui-radio-label` con `flip` para la franja). Es la maqueta
+  aprobada.
+- **Períodos fijos** («Hoy», «Últimos 7 días», «Este mes») sin rango libre: `sui-tab-chips`
+  (super admin, ganancias del repartidor) o `sui-select` (resumen del local).
+- Una hora: `sui-time-picker`.
+
+Regla corta: **rango o calendario visible → datepicker · una fecha en un formulario → `sui-input
+type="date"` · día + franja de entrega → la hoja del checkout.**
+
+## Qué variante usar
+
+> **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**.
+>
+> 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).
+
+### `mode`
+
+| 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 |
+
+### `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 |
+| `showFooter` | `true` (default) | Cancelar/Aplicar: la elección no se guarda hasta confirmar. Úsalo cuando cambiar la fecha recalcula algo caro (un reporte). | guía (ejemplo Approval) |
+| `showFooter` | `false` | Se aplica al tocar el día. Fecha única y nada que recalcular. En `range` no tiene efecto: el rango siempre trae footer. | guía (ejemplo Popover) |
+| `calendars` | `2` (default) | Rango en web: dos meses lado a lado (936 px). | propuesta |
+| `calendars` | `1` | Rango en un espacio angosto (columna, modal `medium`). En mobile se fuerza a 1 solo. | guía (Range con un mes) |
+
+### `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` | Lo que se elige, no «Seleccionar fecha»: «Elige el período», «Desde cuándo». | propuesta |
+| `disabled` | Mientras carga lo que depende de la fecha. | propuesta |
+
+Usos de hoy que rompen la regla: **0** (no hay datepickers). Los 8 campos de fecha son fechas
+sueltas en formularios y ya usan `sui-input`: `pages/discounts/discounts.html:181` y `:285`
+(«Válido hasta»), `pages/super-admin/super-admin.html:323`, `:329` y `:414`,
+`pages/super-admin/master-gastos/master-gastos.html:215`,
+`pages/central/central-gastos/central-gastos.html:115`, y `pages/promociones/promociones.html:336`
+(`datetime-local`, «Programar»).
+
+**A decidir por el dueño** (la regla de arriba es la lectura plana; la contraria también se sostiene):
+
+| opción | a favor | en contra |
+|---|---|---|
+| fecha suelta → `sui-input type="date"` (la propuesta) | selector del sistema, 48 px, cero código nuevo, 0 cambios en la app | se ve distinto en iOS, Android y web; no marca días |
+| toda fecha → `sui-datepicker` | se ve igual en todos lados, con la marca | el popover de 368 px no es hoja en mobile, el trigger mide 40 px sin `size`, y los botones del footer están en inglés (ver Trampas) |
+
+## Tamaño en mobile y en web
+
+En mobile se toca con el dedo: lo que se toca mide **44 px o más** (40 en los botones sueltos). En
+web, con mouse, puede ir más chico. En pantallas de los dos se elige con el servicio de breakpoints
+de la app (`bp`, en `services/breakpoints.service.ts`).
+
+Tiene `size` para el campo: `small` (36), `medium` (40, default, el de siempre) y **`large` (48)**,
+el mismo alto que `sui-input` y `sui-select` `large`. Con `large` **y siempre en mobile (≤ 767
+px)** el panel también crece: **flechas de mes de 40** y **Cancelar / Aplicar en `large` (48)**. En
+el teléfono el footer del rango pone el resumen «Rango: …» arriba y los dos botones abajo, 50/50.
+
+| pieza | web (`medium`) | `large` | mobile (cualquier size) | fuente |
+|---|---|---|---|---|
+| campo (trigger) | 40 | 48 | el del `size` | 40: medido · 36 y 48: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| celda de día | 40 × 40, paso de 48 | igual | 40 × 40, paso de 44 | medido |
+| flechas de mes | 24 | 40 | 40 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| Cancelar / Aplicar | 36 | 48 | 48 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+
+En large y xlarge el texto sube a 16 px (regla del 03-10-2026): con `large`, la fecha del campo (y
+su placeholder) va en 16/24. El calendario no cambia: los días, el mes y el resumen del rango siguen
+en 14.
+
+```html
+<!-- Web: popover. Mobile: en línea dentro de un sui-modal fullscreen. -->
+@if (bp.isMobile()) {
+  <sui-datepicker mode="range" size="large" [inline]="true" [calendars]="1" [(value)]="rango" />
+} @else {
+  <sui-datepicker mode="range" placeholder="Elige el período" [(value)]="rango" />
+}
+```
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| fecha en un formulario | `large` | `medium` | propuesta, falta aprobación |
+| filtro de período de un reporte | `large`, en línea dentro de un modal | `medium`, popover | propuesta, falta aprobación |
+
+## «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 |
+|---|---|---|
+| todo el componente (0 usos) | las fechas de la app son sueltas y van con `sui-input type="date"`; los períodos son fijos | un filtro «Personalizado» en el resumen de ventas o en gastos del super admin (`mode="range"`) |
+| `mode="date"` en un formulario | `sui-input type="date"` hace lo mismo con el selector del sistema | un calendario que se ve siempre, con días marcados (pedidos programados de la semana para el local) |
+| `markedDates` | no hay calendarios a la vista | días con pedidos programados o con gastos cargados |
+| `calendars="2"` en mobile | se fuerza a 1 solo | — |
+| el popover (`inline=false`) en mobile | no es hoja: es un panel flotante de 368 px y el trigger mide 40 | ninguno en mobile; en web, cualquiera |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `mode` | `'date' \| 'range'` | `'date'` |
+| `calendars` | `1 \| 2` | `2` |
+| `inline` | `boolean` | `false` |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` |
+| `placeholder` | `string` | `'Seleccionar fecha'` |
+| `showFooter` | `boolean` | `true` |
+| `disabled` | `boolean` | `false` |
+| `min` | `Date \| null` | `null` |
+| `max` | `Date \| null` | `null` |
+| `presets` | `DatepickerPreset[]` | `DEFAULT_PRESETS` |
+| `markedDates` | `readonly Date[]` | `[]` |
+| `value` · model, `[(value)]` | `Date \| SuiDateRange \| null` | `null` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+Es `ControlValueAccessor`: con `mode="date"` el valor es `Date | null`; con `mode="range"`,
+`{ start, end }`.
+
+```ts
+interface SuiDateRange { start: Date | null; end: Date | null; }
+interface DatepickerPreset { id: DatepickerPresetId; label: string; resolve: (hoy: Date) => [Date | null, Date | null]; }
+```
+
+## Trampas
+
+- El footer dice «Cancelar», «Aplicar» y «Rango: 1 de oct 2026 – …» (antes venía en inglés). No
+  hay input para cambiarlos.
+- **En mobile no es una hoja**, aunque el comentario del código lo diga: es el mismo popover
+  absoluto, de 368 px de ancho, debajo del campo. Para el celular, `inline` dentro de un modal.
+- **`value` cambia de tipo con `mode`**: `Date` en `date`, `{ start, end }` en `range`. Al cambiar
+  el `mode` hay que resetear el valor.
+- Con `inline`, el `[value]` de entrada se pinta marcado y el calendario abre en su mes (arreglado
+  el 03-10-2026; antes solo se copiaba al abrir el popover, que en línea nunca se abre).
+- El mes sale con mayúscula inicial («Octubre 2026»), arreglado el 03-10-2026.
+- **El rango siempre trae footer**, aunque `showFooter` sea `false`.
+- **El trigger no es un `sui-input`**: no tiene `label`, `hint` ni `error` (sí `size`). El label va
+  aparte con `sui-form-label`.
+- En mobile (hasta 767 px) **se fuerza un solo calendario** aunque `calendars` sea 2.
+- El campo muestra la fecha como `dd/MM/yyyy`; el rango, como «1 de oct 2026 – 7 de oct 2026».
+- «Todo el tiempo» devuelve `{ start: null, end: null }`: quien lo recibe tiene que tratarlo como
+  «sin filtro», no como «vacío».
+- Cierra con clic afuera y con Escape, y eso **descarta** la elección (como Cancelar).
+- Las piezas internas son `sui-date-selector`, `sui-day-label`, `sui-day-cell` y
+  `sui-period-range`: no se arman a mano.
+
+## Ejemplo
+
+```html
+<!-- Filtro de ventas con rango libre (web) -->
+<sui-form-label label="Período" />
+<sui-datepicker mode="range" placeholder="Elige el período" [max]="hoy" [(value)]="rango" />
+
+<!-- Calendario a la vista con los días que tienen pedidos programados -->
+<sui-datepicker [inline]="true" [showFooter]="false" [markedDates]="diasConPedidos()"
+                [(value)]="diaElegido" />
+```

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

@@ -0,0 +1,118 @@
+---
+name: sui-day-cell
+selector: sui-day-cell
+resumen: Un día del calendario, con sus estados de elegido, rango, hoy, marcado y bloqueado
+alternativas: [sui-datepicker (el calendario completo, que ya la trae), sui-tab-chips (pocos días para elegir, con nombre: hoy, mañana)]
+---
+
+# sui-day-cell
+
+Story: [Molecules/Date & Time/Day Cell](https://sui-design-system.web.app/?path=/docs/molecules-date-time-day-cell--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** solo para **armar un calendario propio** que el `sui-datepicker` no cubre: una grilla
+de la semana con los días de turno del repartidor, o un mes con los días que el local cerró.
+
+**No lo uses** para:
+
+- Un calendario normal: `sui-datepicker` ya arma la grilla, las filas y la banda del rango.
+- Elegir entre pocos días: `sui-tab-chips` (la hoja del pedido programado ya lo hace así).
+- Mostrar una fecha como texto: un `<span>` con la fecha formateada.
+
+## 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**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usa por dentro
+> `sui-datepicker`.
+
+### `type` y `rangePosition`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| `type="basic"` (default) | Calendario de una fecha. | propuesta |
+| `type="range"` | Calendario de rango. Va con `rangePosition`. | propuesta |
+| `rangePosition="start"` | Primer día del rango (fondo naranja, esquina izquierda). | propuesta |
+| `rangePosition="end"` | Último día (fondo naranja, esquina derecha). | propuesta |
+| `rangePosition="in"` | Días del medio (texto naranja, sin fondo propio: la banda la pinta la fila). | propuesta |
+| `rangePosition=null` | Fuera del rango. | propuesta |
+
+### Estados
+
+| input | cuándo | fuente |
+|---|---|---|
+| `selected` | El día elegido (fondo naranja). Uno solo en `basic`. | propuesta |
+| `today` | Hoy: un punto debajo del número. Siempre, para que la persona se ubique. | propuesta |
+| `marked` | El día tiene algo (pedidos, un turno). Si además es hoy, gana el punto de hoy. | propuesta |
+| `disabled` | Fuera de `min`/`max` o no se puede elegir (local cerrado ese día). | propuesta |
+| `outOfMonth` | Días del mes anterior o siguiente que completan la grilla: se ven apagados. | propuesta |
+| `ariaLabel` | Siempre que el número solo no alcance: «Martes 7 de octubre, con pedidos». El default dice «Día 7». | propuesta |
+
+Usos de hoy que rompen la regla: **0**.
+
+## Tamaño en mobile y en web
+
+**No tiene `size`.** Mide 40 × 40 fijo. En el `sui-datepicker` el paso entre celdas es de 44 px en
+mobile (gap 4) y 48 en web (gap 8): llega justo a los 44.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| celda de una grilla | 40 × 40 con gap 4 (paso 44) | 40 × 40 con gap 8 | medido |
+
+```html
+<!-- La grilla da el paso: gap 4 en mobile, 8 en web -->
+<div class="semana" [style.gap.px]="bp.isMobile() ? 4 : 8">
+  @for (d of dias(); track d.fecha) {
+    <sui-day-cell [day]="d.numero" [today]="d.esHoy" [marked]="d.conTurno" (clicked)="elegir(d)" />
+  }
+</div>
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| todo el componente suelto (0 usos) | no hay calendarios propios | la semana de turnos del repartidor o el mes de cierres del local |
+| `type="range"` suelto | el rango completo lo resuelve el datepicker, con la banda | ninguno fuera del datepicker |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `day` | `number \| string` | — (requerido) |
+| `type` | `'basic' \| 'range'` | `'basic'` |
+| `rangePosition` | `'start' \| 'end' \| 'in' \| null` | `null` |
+| `selected` | `boolean` | `false` |
+| `marked` | `boolean` | `false` |
+| `today` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `outOfMonth` | `boolean` | `false` |
+| `ariaLabel` | `string \| null` | `null` |
+
+| output | payload |
+|---|---|
+| `clicked` | `MouseEvent` |
+<!-- api:fin -->
+
+## Trampas
+
+- **`day` es el número del día, no una fecha.** Toda la lógica (qué día es, si es hoy) la hace
+  quien lo usa.
+- **La banda del rango no la pinta la celda**: en `in` solo cambia el color del texto. La franja
+  continua la dibuja la fila en el datepicker; suelta, un rango se ve como números naranjas sueltos.
+- `today` y `marked` juntos: se ve solo el punto de hoy.
+- `outOfMonth` no la bloquea: se puede tocar igual. Para bloquearla, `disabled`.
+- Ya trae el arreglo de iOS para el `:active` pegado.
+
+## Ejemplo
+
+```html
+<sui-day-cell day="7" [today]="true" />
+<sui-day-cell day="9" [selected]="true" />
+<sui-day-cell day="12" [marked]="true" ariaLabel="Domingo 12 de octubre, con pedidos" />
+```

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

@@ -0,0 +1,81 @@
+---
+name: sui-day-label
+selector: sui-day-label
+resumen: La inicial del día de la semana arriba de cada columna del calendario
+alternativas: [sui-datepicker (el calendario completo, que ya la trae), sui-button-group (elegir días de la semana: L M M J V S D)]
+---
+
+# sui-day-label
+
+Story: [Molecules/Date & Time/Day Label](https://sui-design-system.web.app/?path=/docs/molecules-date-time-day-label--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** solo como **cabecera de columna** de un calendario armado a mano con `sui-day-cell`.
+
+**No lo uses** para:
+
+- Un calendario normal: `sui-datepicker` ya pone LU, MA, MI, JU, VI, SÁ, DO.
+- **Elegir días de la semana** (el horario del local o los turnos del repartidor): eso se toca,
+  y esto es solo texto. Va `sui-button-group` `multi`.
+- El nombre de un día en una lista («Lunes»): texto normal.
+
+## 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**.
+>
+> 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` | dos letras en mayúsculas | Lo normal, igual que el datepicker: `LU MA MI JU VI SÁ DO`. La semana arranca el lunes. | propuesta |
+| `label` | una letra | No usar: «M» es martes y miércoles a la vez. | no usar |
+| `label` | tres letras o más | No usar: «MIÉ» entra justo en 40 px, pero rompe el formato de dos letras del datepicker; «LUNES» ya no entra. | no usar |
+
+Usos de hoy que rompen la regla: **0**.
+
+## Tamaño en mobile y en web
+
+**No tiene `size`.** Mide 40 × 40, igual que `sui-day-cell`, para que las columnas calcen. No se
+toca: el tamaño solo importa para alinear.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| cabecera de columna | 40 × 40 | 40 × 40 | medido |
+
+```html
+@for (d of ['LU','MA','MI','JU','VI','SÁ','DO']; track d) { <sui-day-label [label]="d" /> }
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| todo el componente suelto (0 usos) | no hay calendarios propios | la cabecera de una semana de turnos armada con `sui-day-cell` |
+| una letra o tres | ambiguo, o rompe el formato del datepicker | ninguno |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `label` | `string` | — (requerido) |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+## Trampas
+
+- El host lleva `role="columnheader"`: tiene sentido dentro de un `role="grid"`; suelto, confunde
+  al lector de pantalla.
+- Acepta cualquier texto, pero el ancho es fijo de 40 px: lo que no entra se corta.
+
+## Ejemplo
+
+```html
+<sui-day-label label="LU" />
+```

package/docs/sui-drawer-footer/README.md

@@ -0,0 +1,127 @@
+---
+name: sui-drawer-footer
+selector: sui-drawer-footer
+resumen: Pie de un panel lateral con dos botones y un extra a la izquierda; hoy sin uso, los botones van en sui-modal-footer
+alternativas: [sui-modal-footer (el canon de botones de toda la app), sui-filter-panel-footer (pie de un panel de filtros)]
+---
+
+# sui-drawer-footer
+
+Story: [Molecules/Drawer/Drawer Footer](https://sui-design-system.web.app/?path=/docs/molecules-drawer-drawer-footer--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Hoy no se usa, y aunque aparezca el panel lateral, los botones van en `sui-modal-footer`.** El
+canon de la app (CLAUDE.md, «Botones — composición y orden», 27-07-2026) dice que `sui-modal-footer`
+legisla **todos** los grupos de botones, no solo los de modales. El drawer-footer pone los botones
+en el mismo orden (secundario a la izquierda, primario a la derecha), pero le faltan dos cosas que
+el canon exige:
+
+- **No tiene `buttonSize`**: los botones quedan en 40 px. El canon pide `large` (48) en modales.
+- **No admite `color: 'error'`** en el primario (lo ignora): no sirve para confirmar algo destructivo.
+
+**No lo uses** para el pie de un modal, un sheet o un formulario: `sui-modal-footer`.
+
+Regla corta: **cualquier par de botones → sui-modal-footer.**
+
+## Qué variante usar
+
+> **Lo que dice la guía del DS**: el drawer es «un panel que sale desde el borde de la pantalla» y
+> su pie es un contenedor libre. No trae tipos ni do/don't.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`): **0 usos**.
+> `sui-modal-footer` se usa en los modales de toda la app.
+
+### `type` — qué va a la izquierda de los botones
+
+Cada tipo tiene su equivalente en `sui-modal-footer`, cuyo slot izquierdo admite lo mismo:
+
+| type | qué dibuja | equivalente canon | fuente |
+|---|---|---|---|
+| `stretch` (default) | Dos botones 50/50 a todo el ancho. | `sui-modal-footer [stretch]="true"` | canon (CLAUDE.md, botones) |
+| `basic` | Botones a la derecha. | `sui-modal-footer` | canon (CLAUDE.md, botones) |
+| `checkbox` | Un checkbox con texto a la izquierda («No volver a mostrar»). | `sui-checkbox-label` en el slot izquierdo | canon (CLAUDE.md, botones: el slot izquierdo admite checkbox) |
+| `toggle` | Un switch con texto a la izquierda. | `sui-switch-label` en el slot izquierdo | canon (CLAUDE.md, botones) |
+| `stepper` | Puntos del paso actual. | `sui-stepper variant="dot"` en el slot izquierdo | canon (CLAUDE.md, botones) |
+| `link-button` | Una tercera acción como enlace. | `sui-link-button` en el slot izquierdo | canon (CLAUDE.md, botones: la tercera acción es un link-button) |
+
+### Botones
+
+| input | regla | fuente |
+|---|---|---|
+| `primaryButton` | Con el verbo de lo que hace («Guardar», «Aplicar filtros»); el default es «Continuar». | según el código |
+| `secondaryButton` | El default es «Cancelar»; `null` para un solo botón. | según el código |
+| `disabled` (en la config) | Primario deshabilitado mientras falta un dato. | propuesta, falta aprobación |
+| `color` (en la config) | **No sirve**: el primario es siempre naranja. | según el código |
+
+Usos de hoy que rompen las reglas: **0** (no se usa).
+
+## Tamaño en mobile y en web
+
+**No tiene tamaño**: los botones miden **40 px**, sin input para cambiarlos. En mobile el canon de
+modales pide 48. El pie mide 80 px de alto.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| par de botones | `sui-modal-footer` (botones `large`, 48) | `sui-modal-footer` | canon (CLAUDE.md, botones: size `large` en todos los modales) |
+
+```html
+<sui-modal-footer secondaryButton="Cancelar" primaryButton="Guardar" [stretch]="bp.isMobile()" … />
+```
+
+## «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 | `sui-modal-footer` hace lo mismo con tamaño 48 y color de error | ninguno mientras el modal-footer exista; si el DS suma un panel lateral, usa también modal-footer |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'stretch' \| 'basic' \| 'checkbox' \| 'toggle' \| 'stepper' \| 'link-button'` | `'stretch'` |
+| `primaryButton` | `SuiFooterButtonConfig \| string` | `'Continuar'` |
+| `secondaryButton` | `SuiFooterButtonConfig \| string \| null` | `'Cancelar'` |
+| `checkboxLabel` | `string` | `''` |
+| `checkboxActive` · model, `[(checkboxActive)]` | `boolean` | `false` |
+| `toggleLabel` | `string` | `''` |
+| `toggleActive` · model, `[(toggleActive)]` | `boolean` | `false` |
+| `stepper` | `{ current: number; total: number } \| null` | `null` |
+| `link` | `SuiLinkConfig \| string \| null` | `null` |
+
+| output | payload |
+|---|---|
+| `primaryClick` | `Event` |
+| `secondaryClick` | `Event` |
+| `linkClick` | `MouseEvent` |
+<!-- api:fin -->
+
+```ts
+type SuiDrawerFooterType = 'stretch' | 'basic' | 'checkbox' | 'toggle' | 'stepper' | 'link-button';
+interface SuiFooterButtonConfig { label: string; disabled?: boolean; color?: 'primary' | 'error'; }
+```
+
+## Trampas
+
+- **Defaults en español** (desde 03-10-2026; antes «Continue» / «Cancel»): sin `primaryButton` dice
+  «Continuar» y sin `secondaryButton` dice «Cancelar». Para un solo botón pasa
+  `[secondaryButton]="null"`.
+- **`color: 'error'` se ignora**: el primario está fijo en `primary`.
+- **Sin tamaño**: botones de 40 px.
+- `stepper` usa `{ current, total }` con `current` desde 0, y dibuja sus propios puntos (no es
+  `sui-stepper`).
+- `checkboxActive` y `toggleActive` son `model`: `[(checkboxActive)]`.
+- El borde de arriba ya viene puesto: no le sumes otro.
+
+## Ejemplo
+
+```html
+<!-- Lo que va en la app -->
+<sui-modal-footer
+  secondaryButton="Cancelar"
+  [primaryButton]="{ label: 'Guardar' }"
+  (secondaryClick)="cerrar()" (primaryClick)="guardar()" />
+```

package/docs/sui-drawer-header/README.md

@@ -0,0 +1,140 @@
+---
+name: sui-drawer-header
+selector: sui-drawer-header
+resumen: Cabecera de un panel lateral (título, descripción, cerrar); hoy sin contenedor en SUI y sin uso en la app
+alternativas: [sui-modal (con title y description: la cabecera de todos los modales de la app), sui-modal-header (la cabecera suelta del modal), sui-page-header (título de una página)]
+---
+
+# sui-drawer-header
+
+Story: [Molecules/Drawer/Drawer Header](https://sui-design-system.web.app/?path=/docs/molecules-drawer-drawer-header--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Hoy no se usa.** SUI no tiene el contenedor del drawer (el panel que sale del borde): solo esta
+cabecera y su pie. En la app, todo lo que se abre encima es un `sui-modal` (fullscreen en mobile,
+canon) o un `sui-modal-sheet`, y su cabecera sale de los inputs `title` y `description` del modal.
+
+**Úsalo** cuando exista un panel lateral de web (un detalle que se abre a la derecha sin tapar la
+lista, como el pedido en el panel de órdenes) y haga falta su cabecera.
+
+**No lo uses** para:
+
+- La cabecera de un modal o un sheet: `sui-modal` con `title`/`description` (o `sui-modal-header`).
+- El título de una página: `sui-page-header`.
+- Mobile: un panel lateral en 390 px es un modal fullscreen.
+
+Regla corta: **modal o sheet → sui-modal con title · panel lateral de web → drawer-header (cuando exista el panel).**
+
+## Qué variante usar
+
+> **Lo que dice la guía del DS**: el drawer es «un panel que sale desde el borde de la pantalla».
+> Su cabecera trae título y **botón de cerrar visible por default**. No habla de tipos ni tamaños.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`): **0 usos**.
+
+### `type`
+
+| type | cuándo | fuente |
+|---|---|---|
+| `basic` (default) | Lo normal: título y cerrar. | propuesta, falta aprobación |
+| `left-icon` | El ícono dice de qué es el panel antes de leer («history-line» en el historial). En `small` va suelto (24); en `large`/`xlarge`, en un círculo con borde. | propuesta, falta aprobación |
+
+### `size`
+
+| size | qué cambia | cuándo | fuente |
+|---|---|---|---|
+| `small` (default) | 64 px, todo en una línea; **no muestra `description`** | Panel con título que se explica solo. Es el único que admite `link`. | propuesta, falta aprobación |
+| `large` | 88 px, título arriba y `description` debajo | Panel que necesita una línea de contexto («Últimos 30 días»). | propuesta, falta aprobación |
+| `xlarge` | padding 24, título 20, descripción 16 | No: extensión de SUI sin caso; en web no hace falta letra más grande. | propuesta, falta aprobación |
+
+### Lo demás
+
+| input | valor | cuándo | fuente |
+|---|---|---|---|
+| `showDismiss` | `true` (default) | Siempre. | según la guía del DS (cerrar visible por default) |
+| `showDismiss` | `false` | Solo si el panel no se puede cerrar sin decidir (y entonces es un modal, no un drawer). | propuesta, falta aprobación |
+| `showDivider` | `true` | Cuando el cuerpo scrollea por debajo de la cabecera. | propuesta, falta aprobación |
+| `badge` | número | Pendientes dentro del panel (círculo rojo). | propuesta, falta aprobación |
+| `badge` | texto o `SuiBadgeConfig` | Un estado o etiqueta al lado del título. Pasa `variant: 'lighter'`: el default de aquí es `light` (ver Trampas). | canon (README de `sui-badge`: `lighter` en cabeceras) |
+| `link` | texto | Una acción menor en la cabecera («Ver todo»). Solo en `small`. | propuesta, falta aprobación |
+| `dismissAriaLabel` | «Cerrar» (default) | Ya está en español. | según el código |
+
+Usos de hoy que rompen las reglas: **0** (no se usa).
+
+## Tamaño en mobile y en web
+
+**No tiene tamaño para mobile**: el botón de cerrar mide **24 px** (compact-button `large`), lejos de
+los 40-44 del dedo. Es una pieza de web.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| cabecera de panel | no se usa: `sui-modal` fullscreen con `title` | `small` o `large` | propuesta, falta aprobación |
+
+```html
+@if (!bp.isMobile()) {
+  <sui-drawer-header size="large" title="Pedido #1042" description="Sabores Andinos · hace 5 min" (dismiss)="cerrar()" />
+}
+```
+
+## «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 | SUI no tiene el panel que lo contiene; los modales traen su cabecera | un panel lateral de detalle en web (el pedido en el panel de órdenes) |
+| `xlarge` | sin caso | nunca en web |
+| `showDismiss` en `false` | un panel siempre se cierra | nunca en un drawer |
+| en mobile | cerrar de 24 px | nunca |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'basic' \| 'left-icon'` | `'basic'` |
+| `size` | `'small' \| 'large' \| 'xlarge'` | `'small'` |
+| `title` | `string` | `''` |
+| `description` | `string \| null` | `null` |
+| `icon` | `string \| null` | `null` |
+| `badge` | `SuiBadgeConfig \| number \| string \| null` | `null` |
+| `link` | `SuiLinkConfig \| string \| null` | `null` |
+| `showDismiss` | `boolean` | `true` |
+| `showDivider` | `boolean` | `false` |
+| `dismissAriaLabel` | `string` | `'Cerrar'` |
+
+| output | payload |
+|---|---|
+| `dismiss` | `MouseEvent` |
+| `linkClick` | `MouseEvent` |
+<!-- api:fin -->
+
+```ts
+type SuiDrawerHeaderType = 'basic' | 'left-icon';
+type SuiDrawerHeaderSize = 'small' | 'large' | 'xlarge';
+```
+
+## Trampas
+
+- **`description` no se ve en `small`** y **`link` no se ve en `large`/`xlarge`**: los dos se pasan
+  sin error y no aparecen.
+- **El badge de texto sale `orange` + `light` por default**, que va contra el canon del badge
+  (`lighter` en cabeceras, naranja solo si pide atención). Pasa un `SuiBadgeConfig` completo.
+- **`badge` en `0` sí se dibuja** (un círculo rojo con «0»). Pasa `null` para no mostrarlo.
+- **`left-icon` sin `icon` no dibuja nada.**
+- El título es un `<h2>`: si la página ya tiene un `h2` al mismo nivel, revisa el orden de títulos.
+- No hay contenedor: el fondo, el ancho y la animación del panel los pones tú.
+
+## Ejemplo
+
+```html
+<sui-drawer-header
+  type="left-icon"
+  size="large"
+  icon="history-line"
+  title="Historial de pedidos"
+  description="Últimos 30 días"
+  [showDivider]="true"
+  (dismiss)="cerrar()" />
+```