@ajuarezso/sui-design-system 0.20.0 → 0.22.0

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

@@ -0,0 +1,147 @@
+---
+name: sui-content-card
+selector: sui-content-card
+resumen: Fila «cara + nombre + detalle» dentro de su propia cajita, con badge y una X opcional para quitarla
+alternativas: [sui-content-label (la misma fila sin caja, dentro de una card que ya existe), sui-card (contenido libre), sui-radio-card / sui-checkbox-card (la fila se elige)]
+---
+
+# sui-content-card
+
+Story: [Molecules/Card/Content Card](https://sui-design-system.web.app/?path=/docs/molecules-card-content-card--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para una fila suelta que representa a alguien o algo, con su propia caja: el top de
+locales, clientes y repartidores del resumen del super admin, una persona del equipo que se puede
+quitar, un método de pago guardado.
+
+**No lo uses** para:
+
+- Filas dentro de una card que ya pone el borde: `sui-content-label` (si no, queda caja dentro de
+  caja).
+- Una fila que se elige: `sui-radio-card` o `sui-checkbox-card`.
+- Una fila que se toca para abrir un detalle: hoy no tiene `interactive`; usa `sui-card
+  [interactive]` con un `sui-content-label` adentro.
+
+Regla corta: **fila suelta con caja → content-card · filas dentro de una card → content-label ·
+se elige → card de selección.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página de la content card.** Es un `sui-content-label size="medium"`
+> envuelto en una card con la X. Lo que sigue es práctica de la app («propuesta») salvo lo
+> aprobado («canon»).
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **4
+> content-cards, todas en `pages/super-admin/master-overview/master-overview.html`**. Tipos:
+> `avatar` (o `left-icon` cuando el local no tiene logo). Las 4 con `[dismissible]="false"`; 1 con
+> `badge` (la nota del local).
+
+### `type` (el leading)
+
+| type | cuándo | fuente |
+|---|---|---|
+| `avatar` (`avatar`) | Una persona o un local con foto. El color de las iniciales va por rol: local `orange`, repartidor `green`, cliente `blue`. | canon (avatar por rol); el uso es propuesta |
+| `left-icon` (`icon`) | La misma fila cuando no hay foto: `store-2-line` para el local sin logo. | propuesta (precedente `master-overview.html:224`) |
+| `basic` | Ver «No usar». | propuesta |
+| `company` (`avatar` + `companyLogoSrc`) | Ver «No usar». | propuesta |
+| `brand` (`brand`) | Ver «No usar». | propuesta |
+| `card-provider` (`brand`) | Ver «No usar». | propuesta |
+
+### Las piezas
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `title` | Siempre. El nombre, nunca un id (regla de la pasada de UX). | canon (CLAUDE.md, «un identificador nunca es el título») |
+| `subtitle` | El dato que se compara entre filas: «214 pedidos este mes», «38 calificaciones». | propuesta |
+| `badge` | Un dato chico que se compara de un vistazo (la nota). El color sigue el significado del badge: `red` si está mal. | propuesta (badge: canon de colores) |
+| `dismissible` | La X solo cuando quitar la fila ES la acción (sacar a alguien del equipo, borrar una tarjeta). **El default es `true`**: pasa `false` siempre que no. | propuesta |
+| `dismissAriaLabel` | Siempre que haya X: «Quitar a Rosa del equipo», no el default «Descartar». | propuesta |
+| `sublabel` | Ver «No usar». | propuesta |
+| `disabled` | Ver «No usar». | propuesta |
+
+**Usos de hoy que rompen las reglas:** 0. Las 4 apagan la X a mano: el default de `dismissible`
+no le sirve a ningún uso de hoy.
+
+## Tamaño en mobile y en web
+
+La fila mide 72 (leading de 40 + padding 16) en las dos. El `size` cambia **solo la X de quitar**:
+
+| size | X visible | área táctil | glyph | fuente |
+|---|---|---|---|---|
+| `medium` (default) | 20 × 20 | 20 × 20 | 20 | Figma |
+| `large` | 32 × 32 (radius 8 al hover) | 40 × 40 (`::before` invisible) | 20 | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+
+En `large` el glyph queda en el mismo lugar que en `medium` (la caja grande se come el aire del
+gap con margen negativo), así que la fila se ve igual: lo que crece es dónde se puede tocar.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| fila | 72, sin cambio | 72, sin cambio | Figma |
+| X para quitar | `large` (32, área 40) | `medium` (20) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+
+```html
+<sui-content-card … [size]="bp.isMobile() ? 'large' : 'medium'" (dismiss)="quitar(item)" />
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `type="basic"` (0 usos) | las 4 filas tienen cara | un dato sin cara: una dirección guardada |
+| `type="company"` (0 usos) | no se listan empleados | un empleado con el logo de su local en la esquina |
+| `type="brand"` (0 usos) | no hay servicios conectados | WhatsApp o Mapbox conectado, con su logo |
+| `type="card-provider"` (0 usos) | no hay pago con tarjeta guardada | una tarjeta guardada, cuando entre Culqi / Niubiz |
+| `sublabel` (0 usos) | ninguna fila lo pide | «(tú)» en la lista del equipo |
+| `disabled` (0 usos) | ninguna fila está apagada | un repartidor suspendido en la lista de su local |
+| `dismissible` en mobile con `size="medium"` | la X mide 20 | nunca: en mobile va `size="large"` |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'basic' \| 'left-icon' \| 'avatar' \| 'card-provider' \| 'brand' \| 'company'` | `'basic'` |
+| `title` | `string` | `''` |
+| `sublabel` | `string` | `''` |
+| `subtitle` | `string` | `''` |
+| `badge` | `SuiBadgeConfig \| string \| null` | `null` |
+| `icon` | `string \| null` | `null` |
+| `avatar` | `SuiAvatarConfig \| string \| null` | `null` |
+| `companyLogoSrc` | `string \| null` | `null` |
+| `brand` | `SuiBrandLogoCompany \| null` | `null` |
+| `dismissible` | `boolean` | `true` |
+| `dismissAriaLabel` | `string` | `'Descartar'` |
+| `size` | `'medium' \| 'large'` | `'medium'` |
+| `disabled` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `dismiss` | `MouseEvent` |
+<!-- api:fin -->
+
+## Trampas
+
+- **`dismissible` arranca en `true`**: sin `[dismissible]="false"` aparece una X que no hace nada.
+- **Aquí se llama `title` / `subtitle`**; en `sui-content-label` la misma fila es `label` /
+  `description`.
+- **`badge` con string sale naranja `lighter` `small`** (en MAYÚSCULAS); en el content-label el
+  mismo string sale `medium`.
+- `card-provider` toma el logo de `brand` y lo pone en una cajita de 32 × 24 (no hay assets de
+  tarjetas en el DS).
+- No tiene `interactive` ni output de toque: la fila no se puede tocar entera.
+- El host borra el atributo `title` del DOM y lleva `role="group"` con `aria-label` = `title`.
+
+## Ejemplo
+
+```html
+<sui-content-card
+  type="avatar"
+  [avatar]="{ src: local.logo, initials: 'SA', color: 'orange' }"
+  [title]="local.nombre"
+  [subtitle]="local.pedidos + ' pedidos este mes'"
+  [badge]="{ label: '4.6 ★', color: 'orange', variant: 'lighter', size: 'small' }"
+  [dismissible]="false" />
+```

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,148 @@
+---
+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 |
+
+En large y xlarge el texto sube a 16 px (regla del 03-10-2026): el número va en 16/24; el alto del
+campo no cambia (lo ponen los botones).
+
+| 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()" />
+```