@ajuarezso/sui-design-system 0.19.0 → 0.21.0

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

@@ -0,0 +1,124 @@
+---
+name: sui-content-divider
+selector: sui-content-divider
+resumen: Línea con algo encima: el «o» entre dos opciones, la cabecera de un grupo o un botón entre bloques
+alternativas: [sui-divider (la línea sola, horizontal o vertical)]
+---
+
+# sui-content-divider
+
+Story: [Atoms/Divider/Content Divider](https://sui-design-system.web.app/?path=/docs/atoms-divider-content-divider--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando la separación **dice algo**:
+
+- El «o» entre dos formas de hacer lo mismo (entrar con Google **o** con el correo).
+- La cabecera de un grupo dentro de una lista o un modal («Con pocos pedidos», «Ayer»).
+- Un botón entre dos bloques (agregar algo ahí, ver el resto).
+
+**No lo uses** para una línea sola: eso es `sui-divider`, que pesa menos y tiene vertical.
+
+## Qué variante usar
+
+> **En la guía del DS este componente se llama «Divider»** y trae: línea (default), línea con
+> espacio, línea con texto («OR»), solo texto, texto con fondo («a menudo va en modales») y
+> contenido al centro. Los cuatro tipos con botones vienen del Figma del DS, no de la guía. Lo
+> marcado «según la guía del DS» sale de su texto o de sus ejemplos; el resto es **propuesta,
+> falta aprobación**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **1 content-divider**
+> (`pages/super-admin/master-drivers/master-drivers.html:190`, `solid-text` «Con pocos
+> pedidos»), sin contar prototipos ni vitrinas (`master-preview`, `master-prototipos`,
+> `mockup-sheets-*`, `dx/*`, `_guia-*`, `master-rutina`, `master-medico`, `master-ejercicios`,
+> `dev-index`).
+
+| type | cuándo | ejemplo | fuente |
+|---|---|---|---|
+| `text-line` | El «o» entre dos formas de hacer lo mismo. | `text="o"` entre «Continuar con Google» y el formulario de correo | según la guía del DS («OR») |
+| `solid-text` | Cabecera de un grupo dentro de una lista o un modal, con fondo. | «Con pocos pedidos» (`master-drivers.html:190`) | según la guía del DS («a menudo en modales») |
+| `text` | Cabecera de grupo sin fondo, en una lista partida por fecha o por tipo. | «Ayer», «Esta semana» | según la guía del DS (existe) · propuesta (cuándo) |
+| `line` (default) | **No usar** (ver abajo). | — | según la guía del DS (default) |
+| `line-spacing` | **No usar** (ver abajo). | — | según la guía del DS |
+| `icon-button` | **No usar** hoy (ver abajo). | `icon="add-line"` | propuesta, falta aprobación |
+| `text-button` | **No usar** hoy (ver abajo). | «Ver 12 más» | propuesta, falta aprobación |
+| `icon-button-group` | **No usar** hoy (ver abajo). | Subir · agregar · bajar | propuesta, falta aprobación |
+| `text-button-group` | **No usar** hoy (ver abajo). | «Producto» · «Sección» | propuesta, falta aprobación |
+
+| propiedad | regla | fuente |
+|---|---|---|
+| `text` | Se escribe en sentence case («o», «Con pocos pedidos»): el componente lo pasa a MAYÚSCULAS. | propuesta, falta aprobación |
+| `icon` | Solo en `icon-button`. Nombre Remix sin `ri-`. | propuesta, falta aprobación |
+| `ariaLabel` | **Obligatorio en `icon-button`**: sin él el lector dice «Acción». | propuesta, falta aprobación |
+| `items` | Solo en los `-group`: de 2 a 3, cada uno con `ariaLabel` si es ícono. | propuesta, falta aprobación |
+| `disabled` | El botón existe pero hoy no aplica (lista ya completa). | propuesta, falta aprobación |
+
+**Corregido el 03-10-2026:** los 2 «o» que estaban hechos a mano (login y registro) ya son `type="text-line"`.
+
+## No usar: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `line` y `line-spacing` | `sui-divider` hace lo mismo, pesa menos y tiene vertical; el espacio lo pone el `gap`. | Ninguno. |
+| `icon-button` | No hay editores donde se inserte algo entre dos bloques. | «Agregar opción aquí» entre dos opciones en el editor de opciones del producto. |
+| `text-button` | Ninguna pantalla de hoy corta una lista con un botón para ver el resto. | «Ver 12 más» al final de una lista cortada (reseñas, historial). |
+| `icon-button-group` / `text-button-group` | No hay editores con bloques que se mueven o se insertan. | Mover, agregar o elegir qué insertar entre secciones de la carta. |
+
+## Tamaño en mobile y en web
+
+Criterio de la app: **en mobile se lee y se toca con el dedo, así que va más grande; en web
+(desktop), más chico.** Mobile es `≤ 767 px`, el mismo corte de `BreakpointsService.isMobile()`
+en master-pedidos. Fuente: canon del dueño (03-10-2026), el mismo patrón que ya usan 27 controles
+de la app.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| Cualquiera | tamaño único | tamaño único | lo que hay en el DS |
+
+**No tiene tamaños**: el texto mide 11–12 px y los botones 32 px en las dos plataformas. En mobile
+los botones (`icon-button`, `text-button`, grupos) quedan debajo de los 44 px del dedo; es otra
+razón para no usarlos hoy. Si un flujo nuevo los necesita en mobile, se pide al DS un tamaño grande.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'line' \| 'line-spacing' \| 'text-line' \| 'text' \| 'solid-text' \| 'icon-button' \| 'icon-button-group' \| 'text-button' \| 'text-button-group'` | `'line'` |
+| `text` | `string` | `''` |
+| `icon` | `string \| null` | `null` |
+| `ariaLabel` | `string \| null` | `null` |
+| `disabled` | `boolean` | `false` |
+| `items` | `readonly SuiContentDividerItem[]` | `[]` |
+
+| output | payload |
+|---|---|
+| `buttonClick` | `MouseEvent` |
+| `itemClick` | `{ item: SuiContentDividerItem; index: number; event: MouseEvent }` |
+<!-- api:fin -->
+
+Outputs: `(buttonClick)` en `icon-button` y `text-button`; `(itemClick)` con
+`{ item, index, event }` en los `-group`.
+
+## Trampas
+
+- **Todo el texto sale en MAYÚSCULAS** por CSS: escribirlo normal.
+- **`text` y `solid-text` alinean a la izquierda**, no al centro (así está en el Figma).
+- `text-line` usa 11 px; `text` y `solid-text`, 12 px.
+- Sin `ariaLabel`, el `icon-button` se anuncia como «Acción» y los ítems de grupo como
+  «Acción 0», «Acción 1».
+- `line` y `line-spacing` existen, pero la línea sola es `sui-divider`.
+
+## Ejemplo
+
+```html
+<!-- Login: Google o correo -->
+<sui-social-button brand="google" label="Continuar con Google" />
+<sui-content-divider type="text-line" text="o" />
+<form>…</form>
+
+<!-- Cabecera de grupo en una lista -->
+<sui-content-divider type="solid-text" text="Con pocos pedidos" />
+```

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

@@ -0,0 +1,148 @@
+---
+name: sui-content-label
+selector: sui-content-label
+resumen: Fila sin caja con ícono, foto o logo a la izquierda, título, descripción y un badge opcional
+alternativas: [sui-content-card (la misma fila dentro de su propia cajita, con X), sui-switch-label (un ajuste que se prende o apaga), sui-alert (un aviso con color), sui-card (para agrupar las filas)]
+---
+
+# sui-content-label
+
+Story: [Molecules/Card/Content Label](https://sui-design-system.web.app/?path=/docs/molecules-card-content-label--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para una fila de lectura dentro de una superficie que ya pone el borde (una card, un
+sheet): los consejos del perfil del repartidor y de mi-negocio, el resumen «dato → estado» al
+terminar un registro, un negocio en una lista, «Contactar soporte».
+
+**No lo uses** para:
+
+- Una fila que necesita su propia caja o una X para quitarla: `sui-content-card`.
+- Un ajuste que se prende o se apaga: `sui-switch-label` con `flip` (no el `toggle` de este).
+- Un aviso que tiene que llamar la atención: `sui-alert`.
+- Una opción que se elige: las cards de selección.
+
+Regla corta: **fila de lectura dentro de una card → content-label · fila suelta con caja →
+content-card · ajuste → switch-label.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página del content label.** Lo que sigue es práctica de la app
+> («propuesta») salvo lo que ya está aprobado («canon»).
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **18
+> content-labels en 4 archivos**. Tipos: 14 `left-icon`, 3 `basic`, 1 `avatar`. Tamaños: 13
+> `large` (los consejos), 1 `medium` explícito, 4 sin `size`. 4 con `badge` (3 a la derecha, 1 en
+> el título). 0 con `toggle`, `sublabel` o `disabled`.
+
+### `type` (el leading)
+
+| type | cuándo | fuente |
+|---|---|---|
+| `left-icon` (`icon`) | El ícono dice de qué va la fila: los consejos («Revisa tu zona de cobertura»), «Contactar soporte». Sale en un círculo con borde (`sui-key-icon` stroke). | propuesta (14 de 18) |
+| `basic` | Fila de dato sin cara, casi siempre con badge: «Datos personales → Completados». | propuesta |
+| `avatar` (`avatar`) | Una persona o un local. El color de las iniciales va por rol: local `orange`, repartidor `green`, cliente `blue`. | canon (avatar por rol) |
+| `company` (`avatar` + `companyLogoSrc`) | Ver «No usar». | propuesta |
+| `brand` (`brand`) | Ver «No usar». | propuesta |
+
+### `size`
+
+| size | cuándo | fuente |
+|---|---|---|
+| `large` (leading 48, título 16) | Consejos y pasos que se leen, con descripción larga (los 13 de hoy). | propuesta |
+| `medium` (leading 40, título 14, default) | Filas de dato en una lista: el negocio del repartidor, el resumen del registro. | propuesta |
+
+### Las piezas
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `label` | Siempre. En los consejos, una instrucción («Ponle foto a tus productos»); en los datos, el nombre del dato. | propuesta |
+| `description` | La explicación o el detalle. En los consejos, el porqué. | propuesta |
+| `badge` trailing (default) | El estado del dato a la derecha. Pasa el objeto con el color del badge: con string sale naranja. | propuesta |
+| `badgePlacement="title"` | El badge pegado al nombre, cuando la derecha queda libre o es angosta («Sabores Andinos · Propio»). | propuesta |
+| `sublabel` | Ver «No usar». | propuesta |
+| `toggle` / `toggleChecked` | Ver «No usar». | propuesta |
+| `disabled` | Ver «No usar». | propuesta |
+
+**Usos de hoy que rompen las reglas:** 0. A mirar: los 3 badges de
+`pages/driver-onboarding/step-complete/step-complete.html:48`–`:58` dicen estados de ciclo
+(«Completados», «Esperando vinculación»); el README de `sui-badge` deja esos en
+`sui-status-badge`, pero el content-label solo recibe la config del badge.
+
+## Tamaño en mobile y en web
+
+No se toca, así que no tiene que llegar a 44. El `size` es de lectura, no de dedo.
+
+| uso | mobile | web |
+|---|---|---|
+| consejos y pasos | `large` | `large` |
+| filas de dato | `medium` | `medium` |
+| fila que se toca (soporte) | `large`, o dale a la fila un alto mínimo de 44 | `medium` |
+
+```html
+<sui-content-label [size]="bp.isMobile() ? 'large' : 'medium'" … />   <!-- solo si la fila se toca -->
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `toggle` (0 usos) | el switch es `medium` fijo (32 × 20) y la fila no se toca entera | nunca para un ajuste (es `sui-switch-label` con `flip`); un resumen de solo lectura en web |
+| `sublabel` (0 usos) | ninguna fila lo pide | una precisión corta junto al nombre: «(opcional)», «(9 a. m. a 9 p. m.)» |
+| `disabled` (0 usos) | ninguna fila está apagada | un paso del onboarding que todavía no aplica |
+| `type="company"` (0 usos) | no se muestran empleados con su local | la fila de un empleado con el logo de su local |
+| `type="brand"` (0 usos) | no hay servicios externos | un canal de contacto externo con su logo (WhatsApp) |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'basic' \| 'left-icon' \| 'avatar' \| 'brand' \| 'company'` | `'basic'` |
+| `size` | `'medium' \| 'large'` | `'medium'` |
+| `label` | `string` | `''` |
+| `sublabel` | `string` | `''` |
+| `description` | `string` | `''` |
+| `icon` | `string \| null` | `null` |
+| `avatar` | `SuiAvatarConfig \| string \| null` | `null` |
+| `companyLogoSrc` | `string \| null` | `null` |
+| `brand` | `SuiBrandLogoCompany \| null` | `null` |
+| `badge` | `SuiBadgeConfig \| string \| null` | `null` |
+| `badgePlacement` | `'trailing' \| 'title'` | `'trailing'` |
+| `toggle` | `boolean` | `false` |
+| `toggleChecked` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `toggleCheckedChange` | `boolean` |
+<!-- api:fin -->
+
+## Trampas
+
+- **Aquí se llama `label` / `description`**; en `sui-content-card` la misma fila se llama
+  `title` / `subtitle`.
+- **`badge` con string sale naranja `lighter` `medium`** (sin mayúsculas). En la content-card el
+  mismo string sale `small` (en MAYÚSCULAS).
+- `avatar` acepta string (es el `src`) o `{ src, initials, color }`; sin `color` las iniciales
+  salen `slate`, no el color del rol.
+- `left-icon` sin `icon` no dibuja nada a la izquierda.
+- El `toggle` es un `sui-switch` `medium` fijo y solo el interruptor se toca, no la fila.
+- El host lleva `role="group"` y `aria-label` = `label`.
+
+## Ejemplo
+
+```html
+<!-- Consejo -->
+<sui-content-label
+  type="left-icon"
+  size="large"
+  icon="camera-line"
+  label="Ponle foto a tus productos"
+  description="Desde dos productos con foto tu negocio sube en la lista. Las cargas en Productos." />
+
+<!-- Dato con estado -->
+<sui-content-label label="Datos personales" [badge]="{ label: 'Completados', color: 'green', variant: 'lighter' }" />
+```

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

@@ -0,0 +1,145 @@
+---
+name: sui-counter-input
+selector: sui-counter-input
+resumen: Cantidad con − y + a los lados, con mínimo y máximo (unidades en el carrito, pasajeros)
+alternativas: [sui-input type="number" (un número que se tipea, sin pasos de a uno), sui-slider (un valor de un rango continuo), sui-select (elegir una cantidad de una lista corta)]
+---
+
+# sui-counter-input
+
+Story: [Molecules/Input/Counter Input](https://sui-design-system.web.app/?path=/docs/molecules-input-counter-input--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para una cantidad chica que se ajusta de a uno y tiene tope: unidades de un producto
+(carrito, detalle del producto), pasajeros de un viaje. Los botones se apagan solos al llegar al
+mínimo o al máximo.
+
+**No lo uses** para:
+
+- Un número que se tipea entero (minutos, kilómetros, un monto): `sui-input` (`number` o `amount`).
+- Una cantidad que arranca en cero y aparece al tocar «+» (los extras de un producto): hoy es un
+  armado propio con dos `sui-compact-button` en `components/product-detail-view/product-detail-view.html:169`,
+  y está bien así; el contador del DS siempre muestra los dos botones y el número.
+- Quitar el producto: el contador baja hasta `min` y para. Borrar es otro botón (el tacho).
+
+Regla corta: **se ajusta de a uno y tiene tope → counter · se tipea → input.**
+
+## Qué variante usar
+
+> **La guía del DS lo muestra como un ejemplo de su página del input** (un campo «Counter Input*»
+> con − y + a los lados) y no dice cuándo usarlo. Todo lo de abajo es **propuesta, falta
+> aprobación**, salvo lo que se indica.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
+> `master-ejercicios`): **4 usos en 4 archivos**, todos con `min=1`. Tamaños: 2 `large`, 2 `medium`.
+> 1 con `label`, 2 con `ariaLabel`, 2 sin ninguno de los dos.
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `min` | `1` en cantidades de compra: en 1 el − se apaga y quitar queda en el tacho (evita borrar por error). | propuesta (ya es práctica en los 4 usos: `pages/customer/cart/cart.html:82`) |
+| `max` | Siempre el tope real: stock, tope por pedido, cupo del viaje. Sin dato, 99. | propuesta (ya es práctica: `pages/customer/restaurant-menu/restaurant-menu.html:480`) |
+| `step` | `1`. Otro paso no tiene caso hoy. | propuesta, falta aprobación |
+| `label` | Cuando es un campo de un formulario («Pasajeros»). | según la guía del DS (su ejemplo lleva label) |
+| `hint` | El tope dicho en palabras: «Hasta 4 pasajeros». | propuesta (ya es práctica: `components/cambiar-pasajeros/cambiar-pasajeros.html:7`) |
+| `ariaLabel` | **Obligatorio si no hay `label`**: en el carrito o en una fila donde el texto está al lado. «Cantidad de Pollo a la brasa 1/4». | propuesta, falta aprobación |
+| `decrementLabel` / `incrementLabel` | Los defaults («Disminuir», «Aumentar») sirven. Cambiarlos solo si el contexto pide otro verbo («Quitar un pasajero»). | propuesta, falta aprobación |
+| `disabled` | El producto se agotó mientras estaba en el carrito. | propuesta, falta aprobación |
+| `error` + `errorMessage` | No usar hoy: el contador no deja salir del rango. | — |
+| `required` · `sublabel` · `tooltip` | No usar hoy: una cantidad siempre tiene valor. | — |
+
+**Usos de hoy que rompen la regla:**
+
+- **2 sin `label` ni `ariaLabel`** (el lector de pantalla dice solo «grupo»):
+  `pages/customer/cart/cart.html:82`, `pages/customer/restaurant-menu/restaurant-menu.html:480`.
+- **2 en `medium` en pantallas del teléfono** → `large`: `pages/customer/cart/cart.html:82`,
+  `pages/customer/viaje/viaje.html:190`.
+
+## Tamaño en mobile y en web
+
+El campo llega a la escala completa del botón (2xsmall 28 · xsmall 32 · small 36 · medium 40 ·
+large 48 · xlarge 52; la guía solo tiene 40, 36 y 32). **Los botones − y + crecen con el campo en
+los tamaños de mobile**: 24 × 24 de `2xsmall` a `medium` (como la guía, el default no cambia), **40
+× 40 en `large`** y **44 × 44 en `xlarge`**, ocupando todo el alto útil del campo (3 px de aire
+dentro de la píldora). El ícono es de 20 hasta `large` y de 24 en `xlarge`.
+
+| size | campo | botón − / + | fuente |
+|---|---|---|---|
+| `xlarge` | 52 | 44 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `large` | 48 | 40 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `medium` (default) · `small` · `xsmall` | 40 · 36 · 32 | 24 | según la guía del DS |
+| `2xsmall` | 28 | 24 | extensión SUI |
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| cantidad junto al CTA (detalle del producto) | `large` (48), igual que el botón | `large` | propuesta (ya es práctica en `restaurant-menu.html:480`) |
+| cantidad en una fila (carrito, pasajeros) | `large` (48) | `medium` (40) | propuesta, falta aprobación |
+
+```html
+<sui-counter-input [size]="bp.isMobile() ? 'large' : 'medium'" … />   <!-- bp = BreakpointsService -->
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `size` `2xsmall`, `xsmall`, `small` | en la app la cantidad se toca con el dedo | una tabla del panel donde se ajusta el stock de varios productos |
+| `size="xlarge"` | el CTA de al lado es `large` | si el CTA del detalle pasa a `xlarge` |
+| `step` distinto de 1 | no hay productos que se vendan de a varios | huevos por media docena, gaseosas por pack de 6 |
+| `error` | el contador no deja salir del rango | el stock bajó con el carrito abierto y la cantidad ya no alcanza |
+| `tooltip` · `sublabel` · `required` | una cantidad siempre tiene valor | — |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `size` | `'2xsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `label` | `string \| null` | `null` |
+| `sublabel` | `string \| null` | `null` |
+| `required` | `boolean` | `false` |
+| `tooltip` | `string \| null` | `null` |
+| `hint` | `string \| null` | `null` |
+| `error` | `boolean` | `false` |
+| `errorMessage` | `string \| null` | `null` |
+| `value` | `number` | `0` |
+| `min` | `number` | `Number.NEGATIVE_INFINITY` |
+| `max` | `number` | `Number.POSITIVE_INFINITY` |
+| `step` | `number` | `1` |
+| `disabled` | `boolean` | `false` |
+| `ariaLabel` | `string \| null` | `null` |
+| `decrementLabel` | `string` | `'Disminuir'` |
+| `incrementLabel` | `string` | `'Aumentar'` |
+
+| output | payload |
+|---|---|
+| `valueChange` | `number` |
+<!-- api:fin -->
+
+`value` es un `input` y `valueChange` un `output`: `[(value)]` funciona. Implementa
+`ControlValueAccessor`.
+
+## Trampas
+
+- **Es controlado**: al tocar − o + no cambia su número; emite `valueChange` con el valor nuevo
+  (ya recortado a `min`/`max`) y el padre lo aplica. Con solo `[value]` y sin `(valueChange)` el
+  número no se mueve.
+- `min` y `max` arrancan en −∞ y +∞: sin pasarlos, el contador baja a negativos.
+- Los botones de 24 px de `medium` para abajo no llegan a los 40 de un dedo: en mobile, `large`
+  o `xlarge` (ver «Tamaño en mobile y en web»).
+- Sin `label` ni `ariaLabel` el grupo no tiene nombre para el lector de pantalla.
+- El campo es una píldora (radio completo), decisión de SUI; el Figma de origen usa 10/8 px.
+
+## Ejemplo
+
+```html
+<!-- En el detalle del producto, al lado del CTA -->
+<sui-counter-input size="large" [min]="1" [max]="pdv.topeCantidad()"
+                   ariaLabel="Cantidad" [value]="pdv.qty()" (valueChange)="pdv.setQty($event)" />
+
+<!-- Campo de formulario -->
+<sui-counter-input label="Pasajeros" hint="Hasta 4 pasajeros" [min]="1" [max]="4"
+                   [size]="bp.isMobile() ? 'large' : 'medium'" [(value)]="pasajeros" />
+```

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

@@ -0,0 +1,98 @@
+---
+name: sui-date-selector
+selector: sui-date-selector
+resumen: La cabecera de un calendario con el mes y las flechas de anterior y siguiente
+alternativas: [sui-datepicker (el calendario completo, que ya la trae), sui-tab-chips (elegir entre pocos días: hoy, mañana, sábado)]
+---
+
+# sui-date-selector
+
+Story: [Molecules/Date & Time/Date Selector](https://sui-design-system.web.app/?path=/docs/molecules-date-time-date-selector--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** como cabecera de un **calendario armado a mano** o de una vista que se recorre por
+mes o por semana: «Octubre 2026» con flechas para ir al mes anterior o al siguiente (los gastos
+del mes, las ganancias del repartidor por mes).
+
+**No lo uses** para:
+
+- Un calendario completo: `sui-datepicker` ya lo trae adentro.
+- Elegir entre pocos días: `sui-tab-chips` (como la hoja de pedido programado).
+- Cambiar entre períodos fijos («Hoy», «Esta semana», «Este mes»): `sui-tab-chips`, como el super admin.
+
+## 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` | texto | El período visible, con mayúscula inicial y sin abreviar: «Octubre 2026», «Semana del 6 al 12 de octubre». | propuesta |
+| `leftIcon` + `rightIcon` | `true` / `true` (default) | Lo normal: se puede ir atrás y adelante. | propuesta |
+| `rightIcon` | `false` | Ya se está en el período actual y no hay futuro que mirar (ganancias, gastos). Mejor que dejar la flecha y que no haga nada. | propuesta |
+| `leftIcon` | `false` | Ya se está en el primer período con datos (el mes en que se abrió el local). | propuesta |
+| los dos en `false` | — | No usar: sin flechas es un título; va un texto. | no usar |
+| `disabled` | `true` | Mientras carga el período nuevo, para que no se encadenen toques. | propuesta |
+
+Usos de hoy que rompen la regla: **0**.
+
+## Tamaño en mobile y en web
+
+**No tiene `size`.** Mide 288 × 36 y las flechas son `sui-compact-button` `large` de **24 px**:
+en mobile **no llegan** a los 44 px.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| cabecera de un período | — **no hay tamaño** | 288 × 36, flechas de 24 | medido |
+
+```html
+<!-- Web -->
+<sui-date-selector label="Octubre 2026" [rightIcon]="!esMesActual()" (prev)="mesAnterior()" (next)="mesSiguiente()" />
+```
+
+**Sin tamaño suficiente para mobile.** En el celular, hasta que el DS le sume un `size`, se arma
+con `sui-compact-button` `xlarge` (o `sui-button` `onlyIcon` `large`) a los lados de un título.
+
+## «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 vistas que se recorran mes a mes | ganancias del repartidor o gastos del super admin «por mes», en web |
+| los dos íconos apagados | sin flechas es un título | ninguno |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `label` | `string` | — (requerido) |
+| `leftIcon` | `boolean` | `true` |
+| `rightIcon` | `boolean` | `true` |
+| `disabled` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `prev` | `void` |
+| `next` | `void` |
+<!-- api:fin -->
+
+## Trampas
+
+- **`leftIcon` y `rightIcon` son booleanos**, no nombres de ícono: prenden o apagan las flechas.
+- **Ancho fijo de 288 px** (`max-width` incluido): no se estira con el contenedor.
+- Con una flecha apagada queda un hueco de 24 px para que el texto siga centrado.
+- El componente **no sabe de fechas**: el texto lo arma quien lo usa y las flechas solo emiten.
+- Los `aria-label` de las flechas dicen «Mes anterior» y «Mes siguiente» aunque el período sea
+  una semana.
+
+## Ejemplo
+
+```html
+<sui-date-selector label="Octubre 2026" [rightIcon]="false" (prev)="mesAnterior()" />
+```