@ajuarezso/sui-design-system 0.19.0 → 0.21.0

package/docs/sui-select/README.md

@@ -0,0 +1,180 @@
+---
+name: sui-select
+selector: sui-select
+resumen: Campo que despliega una lista para elegir UNA opción (distrito, repartidor, categoría, motivo)
+alternativas: [sui-radio-label / sui-radio-card (2 a 6 opciones fijas a la vista), sui-segmented-control (2 a 4 modos que se aplican al instante), sui-compact-select (filtro chico que se ajusta al texto), sui-compact-select-for-input (elegir moneda o país dentro de un campo), sui-tag-input (varios valores)]
+---
+
+# sui-select
+
+Story: [Molecules/Select/Select](https://sui-design-system.web.app/?path=/docs/molecules-select-select--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para elegir **una** opción de una lista que **sale de datos** (departamento, provincia,
+distrito, repartidor, categoría, plan) o que tiene **más de 6 opciones fijas**.
+
+**No lo uses** para:
+
+- 2 a 6 opciones fijas dentro de un formulario: se ven todas de una con `sui-radio-label` (web) o
+  `sui-radio-card` (mobile). Abrir un menú para elegir entre «Casa» y «Trabajo» es un toque de más.
+- 2 a 4 modos de la vista que se aplican al tocar (Hoy · Semana · Mes): `sui-segmented-control`.
+- **Buscar** dentro de la lista: `sui-select` **no tiene buscador**. Con 40 distritos se scrollea.
+- Elegir **varias**: no es múltiple. Varias opciones fijas → casillas; valores libres → `sui-tag-input`.
+- Una lista con foto o bandera por opción: las opciones solo muestran texto (ver «Trampas»).
+
+Regla corta: **sale de datos o son más de 6 → select · 2–6 fijas → radio · modos de la vista → segmented.**
+
+## Qué variante usar
+
+> **La guía del DS lo define como el control para elegir una sola opción de un menú** y muestra
+> label y hint, íconos, tamaños, país, método de pago, usuario y deshabilitado. Trae además tres
+> variantes que en SUI son componentes aparte: `compact` (`sui-compact-select`), `inline`
+> (`sui-inline-select`) y `compactForInput` (`sui-compact-select-for-input`). No dice cuándo va cada una.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
+> `master-ejercicios`): **57 usos en 26 archivos**. Todos `type="basic"` y sin ícono. Tamaños:
+> 39 sin `size` (`medium`), 11 `large`, 3 `bp.isMobile() ? 'large' : 'small'`, 2 `medium`,
+> 1 `small`, 1 `bp.controlSize()`. 29 pasan `placeholder`.
+
+### Qué elegir según las opciones
+
+| caso | componente | fuente |
+|---|---|---|
+| La lista sale de datos (ubigeo, repartidores, categorías, planes) | `sui-select` | según la guía del DS (elegir una opción de un menú) |
+| Más de ~6 opciones fijas | `sui-select` | canon (README de `sui-radio`, aprobado 03-10-2026) |
+| 2 a 6 opciones fijas en un formulario | `sui-radio-label` / `sui-radio-card` | propuesta, falta aprobación (sale del umbral de `sui-radio`) |
+| 2 a 4 modos que se aplican al instante | `sui-segmented-control` | canon (README de `sui-segmented-control`, aprobado 03-10-2026) |
+| Filtro de una barra con 5 o más opciones | `sui-select` sin label (o `sui-compact-select` en web) | propuesta, falta aprobación |
+
+**Candidatos de hoy** (no rompen nada; se verían mejor con radios o segmented):
+
+- **6 selects con 2 opciones fijas**: `components/add-product-modal/add-product-modal.html:246`,
+  `pages/drivers/drivers.html:373` y `pages/drivers/add-driver/add-driver.html:111` («Tipo de pago»),
+  `pages/super-admin/master-gastos/master-gastos.html:185` y `:200`,
+  `pages/super-admin/master-sonidos-push/master-sonidos-push.html:85`.
+- **15 con 3 a 6 opciones fijas en un formulario**: `components/address-form-modal/address-form-modal.html:11`
+  («Etiqueta»), `pages/customer/profile/profile.html:249` («Género»), `pages/drivers/drivers.html:359`
+  («Tipo de vehículo»), `pages/discounts/discounts.html:139`.
+- **2 filtros de período de 3 opciones** → segmented: `pages/overview/overview.html:46`,
+  `pages/discounts/discounts.html:48`.
+
+### `type`, `leadingIcon`, `imageUrl`, `flag`, `badge`
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `type="basic"` (default) sin ícono | Todo select de la app hoy. | según la guía del DS |
+| `type="avatar"` + `imageUrl` | Elegir un **repartidor**: la foto de quien quedó elegido en el campo. Hoy `pages/orders/orders.html:256` muestra solo el nombre. | según la guía del DS (ejemplo «User»); el caso es propuesta |
+| `type="provider"` + `imageUrl` | Método de pago con logo (Yape, Plin). | según la guía del DS (ejemplo «Payment Method»); el caso es propuesta |
+| `leadingIcon` (`true` o nombre RemixIcon) | Un ícono que ayuda a reconocer el campo en un formulario largo. Hoy sin caso. | según la guía del DS (ejemplo «Icons») |
+| `type="country"` + `flag` | No usar hoy: todo es Perú. | según la guía del DS (ejemplo «Country») |
+| `type="brand"` / `"company"` | No usar hoy. | — |
+| `badge` | No usar hoy. | — |
+
+### Las piezas
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `label` | Siempre en formularios. Sin label solo en un filtro de barra donde el valor se explica solo («Todos los roles»). | según la guía del DS (ejemplo con label y hint) |
+| `placeholder` | **Siempre**, en imperativo con tuteo: «Elige el motivo», «Elige tu distrito». El default es «Seleccionar...». | canon (CANON-SUI §5.3) |
+| `required` · `sublabel` · `tooltip` · `hint` | Igual que `sui-input`: asterisco, «(Opcional)» con paréntesis, aclaración, ayuda de una línea. Hoy 1 sin paréntesis: `pages/customer/profile/profile.html:249`. | según la guía del DS |
+| `error` + `errorMessage` | No eligió en un campo obligatorio: «Elige tu distrito». | según la guía del DS |
+| `disabled` | Selects en cascada: provincia hasta elegir departamento, distrito hasta elegir provincia. | según la guía del DS (ejemplo deshabilitado); el caso ya es práctica (`components/address-form-modal/address-form-modal.html:87`) |
+| `options` | `SuiSelectOption<T>[]`: `{ value, label, disabled? }`. `disabled` en la opción para lo que existe pero hoy no se puede elegir. | API |
+
+**Usos de hoy que rompen la regla:**
+
+- **28 sin `placeholder`** muestran «Seleccionar...» si arrancan vacíos.
+- **16 placeholders «Seleccionar…» o «Selecciona…»** (y 4 que ya dicen «Elige…») → «Elige…»: «Seleccionar departamento»
+  (`components/address-form-modal/address-form-modal.html:77`), «Seleccionar tipo»,
+  «Selecciona una categoría».
+
+## Tamaño en mobile y en web
+
+El campo sigue la escala del input y del botón (`large` 48 y `xlarge` 52 son extensión de SUI;
+la guía tiene `medium` 40, `small` 36 y `xsmall` 32). **La lista acompaña al campo**: las opciones
+miden 36 hasta `medium` (las de la guía), 44 en `large` y 48 en `xlarge`, y **en mobile (≤ 767 px)
+nunca bajan de 44**, sea cual sea el `size`. El texto de la opción queda en 14/20, el mismo del
+valor del campo.
+
+| size del campo | opción en web | opción en mobile | fuente |
+|---|---|---|---|
+| `xsmall` · `small` · `medium` | 36 | 44 | 36: según la guía del DS · 44 en mobile: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `large` | 44 | 44 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `xlarge` | 48 | 48 | canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| campo de formulario | `large` (48) | `medium` (40) | propuesta, falta aprobación (igual que `sui-input`) |
+| filtro de una barra | `large` (48) | `small` (36) | propuesta (ya es práctica en `pages/orders/orders.html:256`) |
+| dentro de una tabla densa | no aplica | `xsmall` (32) | según la guía del DS |
+| `xlarge` (52) | no usar | no usar | propuesta: queda más alto que el botón `large` del footer |
+
+```html
+<sui-select [size]="bp.isMobile() ? 'large' : 'medium'" label="Distrito" … />   <!-- bp = BreakpointsService -->
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `type="country"` + `flag` | todo es Perú | si se abren repartidores o locales en otro país |
+| `type="brand"` / `"company"` | no hay listas de marcas o empresas | elegir la marca de un producto envasado o la empresa de una flota |
+| `leadingIcon` | ningún formulario lo necesita para reconocerse | un formulario largo del panel con varios selects seguidos |
+| `badge` | no hay valores que marcar | marcar el plan elegido como «Recomendado» |
+| `size="xsmall"` | no hay selects dentro de tablas | cambiar el estado de una fila sin abrir el detalle |
+| `size="xlarge"` | queda más alto que el botón del footer | un select solo, como acción principal de la pantalla |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `size` | `'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `placeholder` | `string` | `'Seleccionar...'` |
+| `options` | `SuiSelectOption<T>[]` | `[]` |
+| `disabled` | `boolean` | `false` |
+| `error` | `boolean` | `false` |
+| `errorMessage` | `string \| null` | `null` |
+| `label` | `string \| null` | `null` |
+| `hint` | `string \| null` | `null` |
+| `type` | `'basic' \| 'country' \| 'avatar' \| 'provider' \| 'brand' \| 'company'` | `'basic'` |
+| `leadingIcon` | `string \| boolean` | `false` |
+| `flag` | `SuiFlagName \| null` | `null` |
+| `imageUrl` | `string \| null` | `null` |
+| `badge` | `SuiBadgeConfig \| string \| null` | `null` |
+| `sublabel` | `string \| null` | `null` |
+| `required` | `boolean` | `false` |
+| `tooltip` | `string \| null` | `null` |
+| `value` · model, `[(value)]` | `T \| null` | `null` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+`value` es `model<T | null>`. Implementa `ControlValueAccessor`. Slot `[slot=leading]` para una
+decoración propia del campo (gana sobre ícono, imagen y bandera).
+
+## Trampas
+
+- **No busca y no es múltiple.** Con 40 opciones la lista se scrollea; con varias a elegir no sirve.
+- **Las opciones solo llevan texto**: `SuiSelectOption` no tiene ícono, foto ni bandera. El
+  `type="avatar"` o `"country"` decora **el campo**, no la lista.
+- **El default del placeholder es «Seleccionar...»**: genérico y con `...`. Pásalo siempre.
+- El `valueChange` puede traer `null`: los usos de hoy hacen `$event ?? ''`.
+- `T` arranca en `any`: tipa las opciones (`SuiSelectOption<string>[]`) para no arrastrar `any`
+  a la pantalla.
+- Con 44 px por opción en mobile el panel muestra unas 4 opciones antes de scrollear (el alto
+  máximo del panel no cambió).
+- El label también abre la lista al tocarlo.
+
+## Ejemplo
+
+```html
+<sui-select label="Distrito" [required]="true" placeholder="Elige tu distrito"
+            [options]="distritos()" [disabled]="!provinciaId()"
+            [error]="intentado() && !distritoId()" errorMessage="Elige tu distrito"
+            [size]="bp.isMobile() ? 'large' : 'medium'"
+            [value]="distritoId()" (valueChange)="distritoId.set($event ?? '')" />
+```

package/docs/sui-slider/README.md

@@ -0,0 +1,143 @@
+---
+name: sui-slider
+selector: sui-slider
+resumen: Barra para elegir un valor, o un rango, dentro de una escala donde importa ver la posición
+alternativas: [sui-counter-input (cantidad chica y exacta con − y +), sui-input type="number" (valor exacto o rango abierto), sui-progress-bar (avance de solo lectura)]
+---
+
+# sui-slider
+
+Story: [Atoms/Slider](https://sui-design-system.web.app/?path=/docs/atoms-slider--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando el valor vive en una escala con mínimo y máximo y **ver dónde cae** ayuda a
+decidir: el radio de cobertura del repartidor en km, un rango de precios en un filtro, un
+porcentaje.
+
+**No lo uses** para:
+
+- Una cantidad chica y exacta (unidades, comensales): `sui-counter-input`.
+- Un valor exacto o sin tope (un monto, un DNI): `sui-input`.
+- Mostrar avance sin que se pueda mover: `sui-progress-bar`.
+- Dinero que se cobra: el arrastre no da precisión; va un `sui-input type="amount"`.
+
+Regla corta: **escala con tope y la posición importa → slider · número exacto → input · cantidad chica → counter.**
+
+## Qué variante usar
+
+> **La guía del DS lo define como selección «precisa de un valor dentro de un rango»** y muestra
+> tres ejemplos: valor único, rango (dos manijas) y con tooltip. No dice cuándo va cada uno.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
+> **1 uso**, `components/driver-coverage-modal/driver-coverage-modal.html:83` (radio de
+> cobertura, 1–15 km, con `label`, `amount` y `tooltip`). Más **1 `<input type="range">` nativo**.
+
+### `type`
+
+| type | cuándo | fuente |
+|---|---|---|
+| `single` (default) | Un valor: radio de cobertura, porcentaje. | según la guía del DS |
+| `range` | Un mínimo y un máximo en la misma escala: rango de precios de un filtro. Una sola barra con dos manijas, nunca dos sliders. | según la guía del DS (existe); el «cuándo» es propuesta |
+
+### Las piezas
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `label` | Siempre que el slider no esté dentro de un campo que ya lo titula. Sin `label` desaparece toda la fila de arriba, `amount` incluido. | propuesta, falta aprobación |
+| `amount` | El valor con su unidad, a la derecha del label: «12 km», «S/ 10 – S/ 40». Sin `amount` escribe el número pelado. | propuesta, falta aprobación |
+| `sublabel` | Una precisión corta junto al label: «(máximo 15)». | propuesta, falta aprobación |
+| `tooltip` | Solo **sin** `amount`: el número flota sobre la manija mientras se arrastra. Con `amount` repite el valor y sin unidad. | según la guía del DS (existe); el «cuándo» es propuesta |
+| `tooltipAlways` | No usar (ver abajo). | propuesta, falta aprobación |
+| `min` / `max` / `step` | La escala real del negocio (1–15 km, paso 1). | API |
+| `disabled` | La escala existe pero hoy no se puede mover (falta un dato antes). | propuesta, falta aprobación |
+| `size` | `medium` (default, Figma): manija 16, riel 6, label 12/16. `large`: manija 24, riel 8, punto interno 8, label 14/20 — para mobile. | `medium`: según la guía del DS · `large`: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+
+**Usos de hoy que rompen la propuesta:**
+
+- **1 con `amount` y `tooltip` a la vez:** `components/driver-coverage-modal/driver-coverage-modal.html:83`
+  muestra «12 km» arriba y «12» flotando al arrastrar.
+- **1 nativo → `sui-slider`:** `components/image-cropper/image-cropper.html:57` (zoom del recorte).
+  A discutir: es un control de herramienta sin label, con botones − y + al lado.
+
+## Tamaño en mobile y en web
+
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En web, con mouse,
+va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
+(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px). Regla del dueño, 03-10-2026.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| slider con label (radio de cobertura, filtro de precio) | `large` (manija 24, riel 8) | `medium` (manija 16, riel 6) | canon (aprobado por el dueño, 03-10-2026) |
+
+```html
+<sui-slider [size]="bp.isMobile() ? 'large' : 'medium'" label="Radio de cobertura" amount="12 km"
+            [min]="1" [max]="15" [(value)]="radioKm" />
+```
+
+Toda la barra responde al toque (24 de alto en `large`), así que no hace falta acertarle a la
+manija. Igual la barra mide menos de 44: el slider necesita aire arriba y abajo en la fila. La
+manija en 0 o en 100 sobresale media manija (12 px en `large`) del borde de la barra: el
+contenedor tiene que tener margen lateral.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `type="range"` (0 usos) | ningún filtro de la app pide mínimo y máximo | un filtro de rango de precios o de distancia en la búsqueda del cliente |
+| `tooltipAlways` | un número fijo encima de la manija tapa el contenido de arriba y repite el `amount` | un slider sin `label` dentro de una herramienta (zoom del recorte), donde el número es lo único que orienta |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `type` | `'single' \| 'range'` | `'single'` |
+| `size` | `'medium' \| 'large'` | `'medium'` |
+| `min` | `number` | `0` |
+| `max` | `number` | `100` |
+| `step` | `number` | `1` |
+| `label` | `string` | `''` |
+| `sublabel` | `string` | `''` |
+| `amount` | `string \| null` | `null` |
+| `tooltip` | `boolean` | `false` |
+| `tooltipAlways` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `value` | `number` | `0` |
+| `minValue` | `number` | `0` |
+| `maxValue` | `number` | `0` |
+
+| output | payload |
+|---|---|
+| `valueChange` | `number` |
+| `minValueChange` | `number` |
+| `maxValueChange` | `number` |
+<!-- api:fin -->
+
+Implementa `ControlValueAccessor` **solo para `single`**.
+
+## Trampas
+
+- **`label=""` borra toda la fila**, `amount` incluido. No hay forma de tener solo el valor.
+- **El tooltip va 28 px arriba de la manija**: deja aire arriba o queda cortado.
+- En `range`, `amount` vacío escribe «min–max» con guion largo; el formulario no lo cubre: usa
+  `[(minValue)]` y `[(maxValue)]`.
+- Con `formControlName` ignora `[value]`. No mezcles las dos formas.
+- `value` es input + output (`[(value)]` funciona), no un model.
+- El punto de la manija queda **gris** cuando el valor está en el mínimo: es a propósito.
+- Mide el ancho con el DOM: si arranca oculto (`display: none`, una pestaña cerrada) el arrastre
+  calcula mal hasta que se muestra.
+- Las flechas, Inicio y Fin lo mueven con teclado.
+
+## Ejemplo
+
+```html
+<sui-slider
+  label="Radio de cobertura"
+  [amount]="radioKm() + ' km'"
+  [min]="1" [max]="15" [step]="1"
+  [value]="radioKm()"
+  (valueChange)="radioKm.set($event)" />
+```

package/docs/sui-social-button/README.md

@@ -0,0 +1,158 @@
+---
+name: sui-social-button
+selector: sui-social-button
+resumen: Botón para iniciar sesión o registrarse con una cuenta de Google o Apple
+alternativas: [sui-button (cualquier otra acción, aunque mencione una marca), sui-app-store-badge (descargar la app de una tienda)]
+---
+
+# sui-social-button
+
+Story: [Atoms/Button/Social Button](https://sui-design-system.web.app/?path=/docs/atoms-button-social-button--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** solo en las pantallas de iniciar sesión y registrarse, para entrar con una cuenta de
+otra marca: hoy Google y Apple.
+
+**No lo uses** para:
+
+- **Abrir WhatsApp, el mapa u otra app**: `sui-button` `filled` `neutral` con su ícono.
+- **Descargar la app**: `sui-app-store-badge`.
+- **Una marca sin login implementado** «para que se vea completo»: un botón que no hace nada es
+  peor que no tenerlo.
+
+## Qué variante usar
+
+> **La guía del DS no dice cuándo usar cada marca ni cada estilo.** Su página lo presenta como
+> «simplificar el inicio de sesión y el registro» y muestra las siete marcas en lleno y en borde,
+> sin do/don't. Las reglas de abajo son **canon (aprobado por el dueño, 03-10-2026)** salvo donde
+> dice otra fuente.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 5 social-buttons en 2 archivos, sin contar
+> prototipos ni vitrinas. Marcas: 2 `google`, 1 `apple`, 1 `x-twitter`, 1 `linkedin`. Estilos:
+> 4 `stroke`, 1 `filled`. 3 con `onlyIcon`, 3 con `loading`.
+
+### Lo que sí dice la guía del DS
+
+- **Para qué es**: simplificar el inicio de sesión y el registro.
+- **Defaults**: `apple` + `filled`. SUI también arranca en `filled`, pero `brand` es obligatorio.
+- **Siete marcas**: Apple, X (en la guía, `twitter`), Google, Facebook, LinkedIn, GitHub y Dropbox,
+  cada una en lleno (`filled`, el color de la marca) y en borde (`stroke`, fondo blanco y logo a
+  color). La guía llama `mode` a lo que SUI llama `variantStyle`.
+- **No trae `onlyIcon` ni `loading`**: el primero sale del Figma y el segundo es extensión de SUI.
+
+### `brand` + `variantStyle`
+
+| brand + estilo | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `google` + `stroke` | Iniciar sesión o registrarse con Google: fondo blanco, logo a color. | `pages/auth/login/login.html:39` («Continuar con Google») | canon (aprobado por el dueño, 03-10-2026) |
+| `apple` + `filled` | Iniciar sesión con Apple: negro lleno, como pide Apple. | `pages/auth/login/login.html:50` («Continuar con Apple») | canon (aprobado por el dueño, 03-10-2026) |
+| `google` + `filled` (rojo) | No: el botón de Google va en blanco. Es lo que sale si se olvida `variantStyle`. | — | propuesta |
+| `apple` + `stroke` | No: Apple va negro lleno en tema claro. | — | propuesta |
+| `facebook`, `x-twitter`, `linkedin`, `github`, `dropbox` (cualquier estilo) | No hay login con esas cuentas. | — | no usar · canon (aprobado por el dueño, 03-10-2026) |
+
+### `onlyIcon`
+
+| onlyIcon | cuándo | fuente |
+|---|---|---|
+| `false` (default) | Siempre en el login: logo + «Continuar con …». | canon (aprobado por el dueño, 03-10-2026) |
+| `true` | No: Apple exige el texto en su botón de login. | no usar · canon (aprobado por el dueño, 03-10-2026) |
+
+**Usos de hoy que rompen la regla:**
+
+- **3 casos, todos en `pages/auth/register/register.html`**: `:86` (`x-twitter`), `:87` (`google`) y
+  `:94` (`linkedin`), los tres con `onlyIcon`. X y LinkedIn además están deshabilitados porque no
+  hay login con esas cuentas (el comentario del HTML lo dice: son decorativos). Pasar a lo mismo que
+  el login: `google` `stroke` con texto (y `apple` `filled` si el registro ofrece Apple), y quitar
+  X y LinkedIn.
+
+### `label`, `loading`, `disabled`, `href`
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `label` | Sin pasarlo sale «Continuar con Google» / «Continuar con Apple», que sirve igual para entrar y para registrarse. Pasarlo solo si el texto tiene que decir otra cosa. | propuesta |
+| `loading` | Desde el toque hasta que vuelve la ventana de la marca: cambia el logo por un spinner y deshabilita el botón. | propuesta (ya es la práctica del login) |
+| `disabled` | Mientras otro login está en curso, para que no se abran dos (en el login: `processingRedirect`). Nunca para una marca que no tiene login. | propuesta |
+| `href` | Solo si el login se hace navegando a una URL (OAuth por redirect web). Pinta un `<a>`. | propuesta |
+| `ariaLabel` | No hace falta: con texto se lee el texto; con `onlyIcon` el componente usa el label. | propuesta |
+
+## Tamaño en mobile y en web
+
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En web, con mouse,
+va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
+(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px):
+`[size]="bp.isMobile() ? 'large' : 'small'"`, 27 usos hoy en `master-pedidos` (16 `large`/`small`,
+9 `large`/`medium`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| login con Google o Apple | 40 de alto, **ancho completo** (`width: 100%`) | 40 de alto, ancho del formulario | propuesta (es lo que ya hace `pages/auth/login/login.html` con `.auth-page__provider-btn`) |
+
+**Ancho completo**: `width: 100%` en el host estira el botón (arreglado en el DS el 03-10-2026 con
+`flex: 1 1 auto` en `.sui-social-button__el`; antes el host medía 360 y el botón 193). Sin
+`width` sigue midiendo lo que su texto, como siempre. Con `onlyIcon` el cuadrado de 40 no se
+estira nunca. El host sigue siendo `inline-flex`: para el ancho completo va `width: 100%`, no
+`display: block`. El `::ng-deep .sui-social-button__el { width: 100% }` de
+`pages/auth/auth-shared.scss` queda de más con la versión que trae el arreglo.
+
+No tiene input `size`: mide siempre 40 de alto. En mobile no llega a 44; lo compensa el ancho
+completo (el dedo no puede errarle) y 12 px de separación entre los dos botones. Si un día hace
+falta más alto, se pide al DS un `size`, no se estira con CSS (el logo y el padding no escalan).
+
+## «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 |
+|---|---|---|
+| `facebook`, `x-twitter`, `linkedin`, `github`, `dropbox` | no hay login con esas cuentas | si se agrega «Continuar con Facebook» (muy usado en Perú) o botones de compartir en redes |
+| `onlyIcon` | Apple exige el texto en su botón de login | una fila de «compartir en» con íconos de redes, fuera del login |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `brand` | `'apple' \| 'x-twitter' \| 'google' \| 'facebook' \| 'linkedin' \| 'github' \| 'dropbox'` | — (requerido) |
+| `variantStyle` | `'filled' \| 'stroke'` | `'filled'` |
+| `onlyIcon` | `boolean` | `false` |
+| `label` | `string \| null` | `null` |
+| `disabled` | `boolean` | `false` |
+| `loading` | `boolean` | `false` |
+| `href` | `string \| null` | `null` |
+| `target` | `string \| null` | `null` |
+| `rel` | `string \| null` | `'noopener noreferrer'` |
+| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` |
+| `ariaLabel` | `string \| null` | `null` |
+
+| output | payload |
+|---|---|
+| `clicked` | `MouseEvent` |
+<!-- api:fin -->
+
+## Trampas
+
+- **`brand` es obligatorio** y **`variantStyle` arranca en `filled`**: `<sui-social-button brand="google" />`
+  sale rojo lleno. Para el login de Google hay que pasar `variantStyle="stroke"`.
+- **El estilo se llama `variantStyle`** (en la guía, `mode`) y **X se llama `x-twitter`** (en la
+  guía, `twitter`).
+- **No tiene `size`**: mide 40 px de alto. Con `width: 100%` en el host el botón se estira al ancho completo (arreglado en el DS el 03-10-2026; antes no estiraba). El de solo ícono queda en 40 × 40.
+- **`loading` también deshabilita**: no emite `(clicked)` mientras está en `true`.
+- El logo es una imagen distinta por tema: en modo oscuro, Apple, X y GitHub en `stroke` usan el
+  logo blanco para no perderse. El componente lo resuelve solo leyendo `data-theme`.
+- El radio es 10 px, no pill como `sui-button`.
+- El output es `(clicked)`.
+- Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
+
+## Ejemplo
+
+```html
+<!-- Login: Google en blanco, Apple negro lleno, los dos con texto -->
+<sui-social-button brand="google" variantStyle="stroke" [loading]="cargandoGoogle()"
+                   [disabled]="procesando()" (clicked)="entrarConGoogle()" />
+<sui-social-button brand="apple" variantStyle="filled" [loading]="cargandoApple()"
+                   [disabled]="procesando()" (clicked)="entrarConApple()" />
+```

package/docs/sui-status-badge/README.md

@@ -0,0 +1,164 @@
+---
+name: sui-status-badge
+selector: sui-status-badge
+resumen: El resultado de un ciclo (completado, pendiente, fallido, deshabilitado) con su color y su ícono ya resueltos
+alternativas: [sui-badge (estado con muchos valores, categoría o distinción), sui-tag (chip neutro que se puede quitar), sui-alert (mensaje que hay que leer)]
+---
+
+# sui-status-badge
+
+Story: [Atoms/Badge/Status Badge](https://sui-design-system.web.app/?path=/docs/atoms-badge-status-badge--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando el valor es el **resultado de un ciclo** y cae en uno de estos: terminó bien
+(«Pagado», «Aprobada»), espera que alguien actúe («Pendiente», «En revisión»), terminó mal
+(«Rechazada», «Anulado») o está apagado («Desactivado», «Vencido»). El componente pone el color
+y el ícono a partir del `status`: la pantalla no elige ninguno de los dos.
+
+**No lo uses** para:
+
+- **Un estado con más valores** que esos cuatro (los de un pedido: preparando, en camino,
+  entregado…): `sui-badge`. Es la misma frontera que fija el README del badge.
+- **Una categoría o una distinción de marca** («Hamburguesas», «Local exclusivo»): no es un
+  estado. `sui-badge` gray, o el color cuyo significado le calce (pink destacado, sky verificado,
+  purple nuevo).
+- Un chip que se quita: `sui-tag`.
+- Un mensaje con explicación: `sui-alert`.
+
+Regla corta: **¿es el final (o la espera) de un trámite? → status-badge · cualquier otra
+etiqueta → badge.**
+
+## Qué variante usar
+
+> **La guía del DS dice para qué es, no cuándo usar cada estilo.** Su página lo define como
+> «resaltar estados o condiciones en poco espacio», trae cuatro estados (`completed`,
+> `pending`, `failed`, `disabled`), dos estilos (`stroke`, `light`), ícono o punto, y un ícono
+> por estado en sus ejemplos (los mismos que pone SUI). No trae do/don't. Lo marcado
+> «según la guía del DS» sale de ahí; el resto es **propuesta, falta aprobación**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 status-badges** (eran 3), sin contar
+> prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`,
+> `_guia-*`, `master-rutina`, `master-medico`, `master-ejercicios`, `dev-index`). Los 3 que había
+> eran los distintivos del local y pasaron a `sui-badge` (ver abajo). Fuera de esa cuenta,
+> `master-ejercicios` tiene 2 más (categorías de ejercicio con `withDot`).
+
+### `status` — mismo significado de color que `sui-badge`
+
+| status | color (token de estado) | cuándo | copy de ejemplo | fuente |
+|---|---|---|---|---|
+| `completed` (default) | green (`success`) | Terminó bien. | «Pagado», «Aprobada», «Entregado» | según la guía del DS (estado y color) |
+| `pending` | orange (`warning`) | Espera que alguien haga algo. | «Pendiente», «En revisión» | según la guía del DS (estado y color) |
+| `failed` | red (`error`) | Terminó mal. | «Rechazada», «Fallido», «Anulado» | según la guía del DS (estado y color) |
+| `disabled` | gray (`faded`) | Apagado o fuera de uso. | «Desactivado», «Vencido» | según la guía del DS (estado y color; es el default de la guía) |
+| `information` | blue (`information`) | Extensión SUI: avanza solo y nadie tiene que actuar. | «En proceso» | propuesta, falta aprobación |
+
+Es el mismo mapa que el badge aprobado (green bien, orange pendiente, red error, blue info,
+gray neutro), porque los dos pintan con los mismos tokens `--sui-state-*`.
+
+### `appearance`, `withDot` e `icon`
+
+| propiedad | valor | cuándo | fuente |
+|---|---|---|---|
+| `appearance` | `stroke` (default) | Tablas y listas: fondo blanco, texto gris, solo el ícono lleva color. Es el que menos ruido hace cuando hay muchos. | según la guía del DS (default) |
+| `appearance` | `light` | El estado es **el** dato de la card o de la fila (fondo teñido, texto de color). | propuesta, falta aprobación |
+| `withDot` | `false` (default) | Ícono del estado. Lo normal. | según la guía del DS |
+| `withDot` | `true` con `stroke` | Tabla densa con la misma columna de estado en muchas filas, donde veinte íconos hacen ruido. | propuesta, falta aprobación |
+| `withDot` | `true` con `light` | **No usar** (ver abajo). | propuesta, falta aprobación |
+| `icon` | `''` (default) | Siempre el del estado: es la mitad de su significado. | según la guía del DS (ícono por estado en sus ejemplos) |
+| `icon` | nombre Remix | **No usar** (ver abajo). | propuesta, falta aprobación |
+
+### `sui-status-badge` o `sui-badge`
+
+| caso | componente | fuente |
+|---|---|---|
+| El estado cae en completado / pendiente / fallido / deshabilitado | `sui-status-badge` | canon (aprobado por el dueño, 03-10-2026, en el README de sui-badge) |
+| Estado con más valores (pedido) o una categoría | `sui-badge` | canon (aprobado por el dueño, 03-10-2026, en el README de sui-badge) |
+
+**Candidatos para pasar de badge a status-badge**: los **17 badges con un estado de ciclo escrito
+a mano** que cuenta el README de `sui-badge` («Pendiente», «Aprobado», «Rechazado», «En
+revisión», «Pagado», «Anulado»), por ejemplo
+`pages/super-admin/master-drivers/master-drivers.html:781` y
+`pages/driver/driver-profile/driver-profile.html:83`.
+
+**Usos de hoy que rompen la regla: 0.** Los distintivos del local («Local exclusivo», «Mismo
+precio que en el local») usaban el status-badge en `pending` y `completed`, que se leen como un
+trámite que avanza. Desde el 03-10-2026 son `<sui-badge color="pink" type="left-icon">` y
+`<sui-badge color="sky" type="left-icon">` (pink = destacado, sky = verificado, los dos con modo
+oscuro por sus tokens `--sui-state-*`), en `core/distintivos-local.ts`. Canon (aprobado por el
+dueño, 03-10-2026).
+
+## No usar: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `withDot` + `light` | El fondo teñido ya dice el color; el punto repite. | Ninguno a la vista. Si hace falta punto, va `stroke` + `withDot`. |
+| `icon` propio | El ícono del estado es la mitad del significado: cambiarlo rompe la lectura. | Una espera **por hora** y no por alguien: «Programado 7:00 p. m.» con `pending` + `icon="time-fill"`. |
+| Sin texto (solo ícono) | Sin texto no se sabe qué estado es. | Una columna muy angosta con el texto en `aria-label` y un tooltip. |
+
+## 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.
+
+| size | alto | texto | ícono (caja) | punto |
+|---|---|---|---|---|
+| `medium` (default) | 24 px | `label-xs` 12/16 | 12 (16) | 6 |
+| `large` | 28 px | `label-sm` 14/20 | 16 (20) | 8 |
+| `xlarge` | 32 px | `label-md` 16/24 | 20 (24) | 8 |
+
+`medium` es el de Figma; `large` y `xlarge` son extensión SUI (03-10-2026). Siguen la escala del
+`sui-button` (28 · 32) y no la del `sui-badge` (24 · 28), porque el status-badge ya parte de 24.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| Estado en una fila, card o tabla | `large` (28) | `medium` (24) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+| Estado principal de una pantalla de detalle (el pedido que se mira) | `xlarge` (32) | `medium` (24) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+
+```html
+<sui-status-badge status="completed" appearance="light" [size]="bp.isMobile() ? 'large' : 'medium'">Entregado</sui-status-badge>
+```
+
+No se agranda con CSS en la pantalla: se pasa `size`.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `status` | `'completed' \| 'pending' \| 'failed' \| 'information' \| 'disabled'` | `'completed'` |
+| `appearance` | `'stroke' \| 'light'` | `'stroke'` |
+| `size` | `'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `withDot` | `boolean` | `false` |
+| `icon` | `string` | `''` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+Slot: `<ng-content>` (el texto).
+
+## Trampas
+
+- **El default es `completed`**; el de la guía es `disabled`. Un `<sui-status-badge>` sin
+  `status` sale verde con check.
+- **El estilo se llama `appearance`**, no `variant` (badge) ni `tagStyle` (tag).
+- En `stroke` el **texto es gris** siempre; solo el ícono o el punto llevan color.
+- Tamaños: `medium` 24 (default, Figma), `large` 28 y `xlarge` 32 para mobile (extensión SUI, 03-10-2026). No hay uno más chico que 24.
+- **No pasa a mayúsculas** (el `sui-badge` small sí).
+- `icon` no hace nada con `withDot`.
+- El punto mide 6 px; el del `sui-badge with-dot`, 4 px. Son distintos a propósito.
+- El host lleva `role="status"`: el lector de pantalla anuncia los cambios.
+
+## Ejemplo
+
+```html
+<!-- En una tabla de recargas: stroke (default) -->
+<sui-status-badge status="pending">En revisión</sui-status-badge>
+
+<!-- El estado es el dato principal de la card -->
+<sui-status-badge status="failed" appearance="light">Rechazada</sui-status-badge>
+```