@ajuarezso/sui-design-system 0.19.0 → 0.20.0

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>
+```

package/docs/sui-switch/README.md

@@ -0,0 +1,146 @@
+---
+name: sui-switch
+selector: sui-switch
+resumen: Interruptor solo para prender o apagar algo que se aplica al instante, sin texto propio
+alternativas: [sui-switch-label (interruptor con su texto, el caso normal), sui-switch-card (cada ajuste es una tarjeta), sui-integration-switch (fila de integración con logo), sui-checkbox (valor que se confirma después con un botón)]
+---
+
+# sui-switch
+
+Story: [Atoms/Checkbox, Radio & Switch/Switch](https://sui-design-system.web.app/?path=/docs/atoms-checkbox-radio-switch-switch--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para prender o apagar algo que **se aplica en el momento**, sin botón de guardar:
+la disponibilidad de un producto, un cupón activo, un día del horario, una oferta. Pelado,
+solo cuando el texto vive en otra parte: una celda de tabla con su cabecera, una fila con su
+propio título (día de la semana, tarjeta de la oferta).
+
+**No lo uses** para:
+
+- **Un interruptor con su texto al lado** (casi siempre): `sui-switch-label`, que trae label,
+  descripción y el toque en toda la fila.
+- Un valor de formulario que se confirma con «Guardar»: `sui-checkbox`. (Excepción aceptada hoy:
+  los formularios de producto y de planes usan switch para «disponible»/«activo» aunque se guarden
+  después; es el patrón que la persona reconoce.)
+- Algo destructivo o que no se deshace: el switch promete que se puede volver atrás al toque.
+- Elegir entre dos modos con nombre: `sui-segmented-control` si se aplica al instante (cuadrícula /
+  lista); `sui-radio-card` si se guarda después («Por distancia» / «Precio único» en ajustes).
+
+Regla corta: **se aplica ya → switch · se confirma después → checkbox · dos modos con nombre → segmented (inmediato) o radio-card (se guarda).**
+
+## Qué variante usar
+
+> **La guía del DS lo define en una frase**: se usa «para prender o apagar un ajuste de forma
+> inmediata». Muestra deshabilitado, con label y con label avanzado. No dice nada de tamaños.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
+> **29 switches en 13 archivos**. Tamaños: 25 `bp.controlSize()` / `ctrlSize()` (`large` en
+> desktop, `xlarge` en mobile), 1 `xlarge` fijo, 1 `large` fijo y 2 sin `size` (`medium`, el
+> default). Más **1 `<input type="checkbox">` dibujado como
+> switch**.
+
+### Estado (`checked`, `disabled`)
+
+| estado | cuándo | fuente |
+|---|---|---|
+| prendido / apagado | `[(checked)]` o `[checked]` + `(checkedChange)`. | según la guía del DS |
+| `disabled` | Mientras se guarda el cambio (`[disabled]="guardando()"`) o cuando no aplica. | según la guía del DS (existe); el «cuándo» ya es práctica de la app |
+
+### `size`
+
+| size | px | cuándo | fuente |
+|---|---|---|---|
+| `xlarge` | 48 × 28 | Mobile, vía `bp.controlSize()`. Y en tarjetas donde el switch es la acción principal (ofertas de Central). | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
+| `large` | 40 × 24 | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
+| `medium` (default) | 32 × 20 | No usar en pantallas nuevas (ver abajo). Es el único tamaño de la guía. | canon (aprobado por el dueño, 28-09-2026) |
+
+### La etiqueta dice lo que hace, no el estado
+
+| caso | regla | fuente |
+|---|---|---|
+| Texto al lado del switch | Dice **qué hace prenderlo** y no cambia con el estado: «Recibir pedidos», no «Sucursal en pausa». El estado ya lo dice el switch (y un badge si hace falta). | propuesta, falta aprobación (precedente escrito en `pages/schedule/schedule.html:31`) |
+
+**Usos de hoy que rompen las reglas:**
+
+- **19 switches con su texto armado a mano → `sui-switch-label`.** Ejemplos:
+  `pages/discounts/discounts.html:198` («Un uso por cliente», con `sui-form-label` + `<span>`),
+  `pages/drivers/drivers.html:58` («Aceptar pedidos automáticamente»),
+  `pages/super-admin/master-plans/master-plans.html:90` («Plan activo», y 8 más en ese archivo).
+  El resto: `discounts.html:302`, `pages/super-admin/master-map-overview/master-map-overview.html:67`,
+  `pages/schedule/schedule.html:46`, `components/add-product-modal/add-product-modal.html:196`, `:255`, `:280`,
+  `components/option-sections-manager/option-sections-manager.html:107`, `:123`.
+- **3 con la etiqueta que repite el estado** («Disponible» / «No disponible», «Activo»):
+  `components/option-sections-manager/option-sections-manager.html:143`,
+  `components/add-product-modal/add-product-modal.html:303`, `pages/employees/employees.html:99`.
+- **2 en `medium` (sin `size`):** `pages/drivers/drivers.html:58`,
+  `pages/super-admin/master-map-overview/master-map-overview.html:67`.
+- **1 nativo dibujado como switch:** `components/settings-panel/settings-panel.html:97`
+  («Notificaciones Push») → `sui-switch-label`.
+
+Bien pelados (el texto vive en la fila o la tabla): `pages/discounts/discounts.html:96` (columna
+de la tabla), `pages/super-admin/master-settings/master-settings.html:103`, los días de
+`components/weekly-schedule-editor/weekly-schedule-editor.html:5` y
+`pages/driver/driver-schedule/driver-schedule.html:108`, `pages/central/central-ofertas/central-ofertas.html:19`.
+
+## Tamaño en mobile y en web
+
+| uso | mobile | web |
+|---|---|---|
+| switch en una fila, tabla o tarjeta | `xlarge` (48 × 28) | `large` (40 × 24) |
+| switch que es la acción principal de la tarjeta (ofertas de Central) | `xlarge` | `xlarge` |
+
+```html
+<sui-switch [size]="bp.controlSize()" … />   <!-- isMobile() ? 'xlarge' : 'large' -->
+```
+
+El más grande mide 28 px de alto: el toque cómodo (≥ 44 px) lo da la fila; por eso con texto
+va `sui-switch-label`, que hace tocable todo el bloque.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `size="medium"` | en el teléfono se pierde (el dueño lo marcó en Central, 28-09-2026) | una tabla densa solo de desktop donde 24 px desalinea la fila |
+| pelado con texto al lado | lo hace `sui-switch-label` con el toque en toda la fila | nunca; pelado solo si el texto vive en otra columna o en el título de la tarjeta |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `size` | `'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `checked` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `checkedChange` | `boolean` |
+<!-- api:fin -->
+
+Implementa `ControlValueAccessor` (`[(ngModel)]`, `formControlName`).
+
+## Trampas
+
+- **Es controlado: no se mueve solo.** `[checked]` sin `(checkedChange)` ni `[(checked)]` = el
+  toque no hace nada visible. Es a propósito: el padre puede rechazar el cambio (abrir una
+  confirmación, revertir si falla el guardado).
+- Con `formControlName` sí guarda su propio estado; a partir de ahí **ignora `[checked]`**. No
+  mezcles las dos formas.
+- `disabled` no baja la opacidad: cambia el color y achica el círculo. Un `opacity` encima lo duplica.
+- No tiene `aria-label`: pelado, pásalo con `[attr.aria-label]` (como en `central-ofertas`).
+- Ya trae el arreglo de iOS para el `:active` pegado.
+
+## Ejemplo
+
+```html
+<!-- Pelado en una tarjeta que ya tiene su título -->
+<sui-switch [size]="bp.controlSize()" [checked]="oferta.activo" [disabled]="guardando()"
+            [attr.aria-label]="'Prender ' + oferta.titulo" (checkedChange)="prender(oferta, $event)" />
+
+<!-- Con texto: sui-switch-label -->
+<sui-switch-label [size]="bp.controlSize()" label="Recibir pedidos" [flip]="true"
+                  [(active)]="abierto" />
+```

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

@@ -0,0 +1,139 @@
+---
+name: sui-switch-label
+selector: sui-switch-label
+resumen: Interruptor con su texto (y opcionalmente descripción, badge y link) para un ajuste que se aplica al instante
+alternativas: [sui-switch (el interruptor solo, el texto vive en otra parte), sui-switch-card (cada ajuste es una tarjeta), sui-integration-switch (fila de integración con logo), sui-checkbox-label (se confirma después)]
+---
+
+# sui-switch-label
+
+Story: [Atoms/Checkbox, Radio & Switch/Switch Label](https://sui-design-system.web.app/?path=/docs/atoms-checkbox-radio-switch-switch-label--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para cada fila de ajustes que se prende o se apaga: «Disponible para pedir», «Recibir
+pedidos», «Un uso por cliente», «Permitir analítica de uso». Es el default de una lista de
+ajustes: toda la fila se toca y el texto queda alineado con el interruptor.
+
+**No lo uses** para:
+
+- Un ajuste que merece tarjeta (borde, ícono, más contexto): `sui-switch-card`.
+- Una integración con logo y botón de administrar: `sui-integration-switch`.
+- Algo que se confirma después con «Guardar» y no tiene efecto propio: `sui-checkbox-label`.
+- Algo destructivo o que no se deshace.
+
+Regla corta: **ajuste con texto → este · ajuste con peso → switch-card · sin texto → sui-switch.**
+
+## Qué variante usar
+
+> **La guía del DS dice para qué es el switch** («prender o apagar un ajuste de forma inmediata»)
+> y su ejemplo avanzado arma Label + (Sublabel) + badge «NEW» + descripción + Link Button, con el
+> interruptor a la izquierda o a la derecha. No dice cuándo va cada lado.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
+> **5 usos en 4 archivos**, todos con `description`. Desde el 03-10-2026, 3 con `flip` (los
+> ajustes del producto en `add-product-modal` y la analítica de `privacidad`) y 2 sin él porque
+> viven dentro de un formulario (el horario de una categoría en `products`, «Cerrar por hoy» en
+> `central-inicio`). Tamaños: 2 `ctrlSize()`
+> (`large`/`xlarge`), 1 `xlarge` fijo, 2 sin `size` (`medium`). Hay **19 `sui-switch` con el texto
+> armado a mano** y 1 nativo que deberían ser este componente.
+
+### Las piezas
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `label` | Siempre. Qué hace prenderlo, sin cambiar con el estado: «Recibir pedidos», no «Abierto/Cerrado». | según la guía del DS (pieza); la regla de qué dice es propuesta (precedente en `pages/schedule/schedule.html:31`) |
+| `description` | Cuando conviene decir la consecuencia: «Los clientes pueden agregarlo al carrito. Apágalo si se te acabó.» Es lo que ya hacen los 5 usos. | según la guía del DS (pieza); el «cuándo» ya es práctica de la app |
+| `sublabel` | Precisión corta entre paréntesis: «(beta)». | según la guía del DS |
+| `badge` | Solo novedad. Con string sale naranja `light`: pasa el objeto. | según la guía del DS (pieza «NEW»); el color es propuesta |
+| `link` | «Saber más» que no toca el interruptor. Solo se ve con `description`. | según la guía del DS |
+| `flip` | Interruptor a la **derecha** en listas de ajustes: el texto se lee primero y el control queda bajo el pulgar, como en iOS y Android (es lo que hacen a mano `drivers.html:58`, `discounts.html:198`, `schedule.html:46`). Sin `flip` (izquierda) dentro de un formulario, alineado con las casillas o los switches del resto del form. | canon (aprobado por el dueño, 03-10-2026) |
+| `disabled` | Mientras se guarda el cambio o cuando no aplica. | según la guía del DS |
+
+### `size`
+
+| size | cuándo | fuente |
+|---|---|---|
+| `xlarge` | Mobile, vía `bp.controlSize()`; y cuando el ajuste es la acción principal de la pantalla («Cerrar por hoy» en Central). | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
+| `large` | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
+| `medium` (default) | No usar en pantallas nuevas. | canon (aprobado por el dueño, 28-09-2026) |
+
+**Usos de hoy que rompen las reglas:**
+
+- **2 en `medium`:** `pages/products/products.html:300` («Horario propio
+  para esta categoría») y `pages/public/privacidad/privacidad.html:132` («Permitir analítica de uso»).
+- **19 `sui-switch` con texto a mano + 1 nativo** que deberían ser este componente: el detalle
+  está en el README de `sui-switch`. Ejemplos: `pages/discounts/discounts.html:198`,
+  `pages/drivers/drivers.html:58`, `components/settings-panel/settings-panel.html:97`.
+
+## Tamaño en mobile y en web
+
+| uso | mobile | web |
+|---|---|---|
+| fila de ajustes | `xlarge` (48 × 28) | `large` (40 × 24) |
+| ajuste que es la acción principal de la pantalla («Cerrar por hoy») | `xlarge` | `xlarge` |
+
+```html
+<sui-switch-label [size]="bp.controlSize()" … />   <!-- isMobile() ? 'xlarge' : 'large' -->
+```
+
+El bloque entero se toca, así que con descripción la fila pasa los 44 px sola. Sin descripción,
+dale a la fila un alto mínimo de 44 px.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `badge` (0 usos) | ningún ajuste es nuevo | un ajuste recién agregado en una pantalla que el usuario ya conoce |
+| `link` (0 usos) | ningún ajuste necesita más detalle | «Permitir analítica de uso» con «Qué se mide» (con `description`) |
+| `size="medium"` | se pierde en el teléfono | una tabla densa solo de desktop |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `label` | `string` | `''` |
+| `sublabel` | `string \| null` | `null` |
+| `description` | `string \| null` | `null` |
+| `size` | `'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `badge` | `SuiBadgeConfig \| string \| null` | `null` |
+| `link` | `SuiLinkConfig \| string \| null` | `null` |
+| `flip` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `active` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `activeChange` | `boolean` |
+| `linkClick` | `MouseEvent` |
+<!-- api:fin -->
+
+Implementa `ControlValueAccessor` (`[(ngModel)]`, `formControlName`).
+
+## Trampas
+
+- **El estado se llama `active` / `activeChange`**, no `checked` como en `sui-switch`.
+- **Es controlado**, como `sui-switch`: sin `[(active)]` o `(activeChange)` el toque no se ve.
+- **El host es `inline-flex`.** Con `flip`, para que el interruptor quede pegado al borde derecho
+  de la fila, dale `display: flex` (o `width: 100%`) desde afuera.
+- **`link` solo se dibuja con `description`.**
+- `description` sube el label a peso medio y abre el bloque en columna.
+- Deshabilitado baja todo el bloque a 0.5 de opacidad **además** del gris propio del switch.
+- El badge con string sale naranja; en `sui-switch-card` el default es azul.
+- `flip` usa CSS `order`: el orden de lectura no cambia.
+
+## Ejemplo
+
+```html
+<sui-switch-label
+  [size]="bp.controlSize()"
+  [flip]="true"
+  label="Recibir pedidos"
+  description="Desactívalo para cerrar un rato sin tocar el horario."
+  [active]="abierto()"
+  [disabled]="guardando()"
+  (activeChange)="cambiarAbierto($event)" />
+```