@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/docs/sui-chart-legend-dot/README.md

@@ -0,0 +1,179 @@
+---
+name: sui-chart-legend-dot
+selector: sui-chart-legend-dot
+resumen: Punto de color de una serie de gráfico, para atar un número de una fila o una tabla con su color en el gráfico
+alternativas: [sui-chart-legend (la leyenda completa, que ya trae sus puntos), sui-color-dot (elegir un color, no nombrar una serie), sui-badge with-dot (un estado vivo)]
+---
+
+# sui-chart-legend-dot
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-chart-legend-dot`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+
+Story: [Molecules/Chart/Chart Legend Dot](https://sui-design-system.web.app/?path=/docs/molecules-chart-chart-legend-dot--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** suelto cuando una fila o una tabla **habla de una serie del gráfico** y el color la ata:
+«● Delivery 64 %» en el resumen bajo una dona, la columna de una tabla que repite las barras.
+
+**No lo uses** para:
+
+- La leyenda de un gráfico: `sui-chart-legend` ya trae sus puntos.
+- Elegir un color (variantes de un producto): `sui-color-dot`.
+- Marcar un estado vivo («Abierto», «En línea»): `sui-badge` con `type="with-dot"`.
+- La línea de tiempo de una actividad: `sui-activity-feed`.
+
+## Qué variante usar
+
+> La guía del DS no tiene página para este componente: sale del Figma del DS (set «Chart Legend
+> Dots»). Las reglas de abajo son **canon** (cada fila dice de qué aprobación sale), salvo lo marcado «según el componente».
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos sueltos** (sí dentro de la única
+> `sui-chart-legend`), y **3 puntos de serie hechos a mano** fuera de una leyenda.
+
+### `color`
+
+Cada color apunta al mismo estado de la paleta que en `sui-badge`. En un gráfico manda una regla:
+**el mismo color que la serie en el gráfico**.
+
+| color | estado de la paleta | cuándo | fuente |
+|---|---|---|---|
+| `blue` | information | Primera serie de categorías sin carga (el orden automático arranca aquí). | según el componente (orden) |
+| `orange` | warning | Pendiente; o segunda serie de categorías. | canon (significado del badge) · como serie de categorías: canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `red` | error | Cancelado, rechazado, fallido. | canon (significado del badge) |
+| `green` | success | Entregado, pagado, aprobado. | canon (significado del badge) |
+| `yellow` | away | En pausa; o una serie más de categorías. | canon (significado del badge) · como serie de categorías: canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `purple` | feature | Lo nuevo; o una serie más de categorías. | canon (significado del badge) · como serie de categorías: canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `sky` · `pink` · `teal` | verified · highlighted · stable | Series de categorías a partir de la séptima. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `gray` (default) | faded | «Otros» o «Sin categoría»: lo que no se reparte. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `light-gray` | — | No usar: es el mismo gris del apagado. **Cuándo sí:** el resto de una barra de progreso partida («lo que falta»). | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `disabled` | — | Una serie sin datos o apagada. Dentro de `sui-chart-legend` va por `disabled: true`, no por color. | según el componente |
+| `customColor` | el color que ya usa el gráfico | Solo si el gráfico tiene paleta propia; gana sobre `color`. | canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+
+### `size`
+
+| size | cuándo | fuente |
+|---|---|---|
+| `small` (16 px) | Junto a texto de 12 (como en la leyenda, que lo usa siempre). | según el componente |
+| `medium` (20 px, default) | Junto a texto de 14: filas y tablas. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+
+El círculo de color mide 12 px en los dos tamaños: lo que cambia es el aire alrededor.
+
+### Usos de hoy que romperían la regla
+
+- **3 puntos de serie hechos a mano** (`<span>` con `[style.background]`) → `sui-chart-legend-dot`:
+  `components/customer-retention/customer-retention.html:17`,
+  `components/order-fulfillment/order-fulfillment.html:17`,
+  `components/cancellation-rate/cancellation-rate.html:33`.
+- Las 5 leyendas hechas a mano están contadas en `sui-chart-legend`.
+
+## Tamaño en mobile y en web
+
+Es decorativo y no se toca: no tiene mínimo para el dedo.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| fila de resumen o tabla | `medium` (20) | `medium` (20) | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| junto a texto de 12 | `small` (16) | `small` (16) | según el componente |
+
+No cambia por plataforma: va con el tamaño del texto que acompaña, no con la pantalla.
+
+### Por dispositivo (D16)
+
+No aplica: el tamaño va con el texto de al lado (`medium` junto a 14, `small` junto a 12, como en la
+leyenda), igual en celular chico, celular, tablet, computadora y ultrawide. Es lo que no se toca, y
+`medium` ya es su size más grande: el paso extra del celular (P1 b) no tiene a dónde subir (D16,
+dueño 05-10-2026).
+
+En master-pedidos: no hay helper; el `size` va literal según el texto (`size="small"` junto a 12, o
+nada para `medium`).
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `light-gray` | es el gris del apagado | el resto de una barra partida |
+| `sky`, `pink`, `teal` | ningún gráfico pasa de 6 series | un gráfico por distrito o por local con 7 series o más |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `color` | `color` | `"blue" \| "disabled" \| "gray" \| "green" \| "light-gray" \| "orange" \| "pink" \| "purple" \| "red" \| "sky" \| "teal" \| "yellow"` | `'gray'` |
+| `customColor` | `custom-color` | `null \| string` | `null` |
+| `size` | `size` | `"medium" \| "small"` | `'medium'` |
+
+Eventos: ninguno.
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+Constantes exportadas: `SUI_CHART_LEGEND_COLORS` (los 11 colores en el orden del Figma),
+`SUI_CHART_SERIES_COLORS` (el orden automático: azul, naranja, rojo, verde…) y
+`SUI_CHART_LEGEND_HEX` (color → hex, para darle la misma paleta a ECharts).
+
+## Trampas
+
+- **El default es `gray`**, no un color de serie: sin `color` todos los puntos salen grises.
+- `size` arranca en `medium` aquí, pero la leyenda usa siempre `small`.
+- El punto lleva un anillo blanco y una sombra para separarse del gráfico: sobre un fondo blanco
+  se ve un poco más chico que un círculo plano del mismo tamaño.
+- `SUI_CHART_LEGEND_HEX` tiene los hex del modo claro: en modo oscuro no se invierten.
+- Es decorativo (`aria-hidden`): el significado lo dice el texto de al lado.
+
+## Bien y mal
+
+Punto de una serie fuera de la leyenda
+
+```html
+<!-- ❌ mal: punto hecho a mano, sin anillo ni sombra (components/customer-retention/customer-retention.html:17) -->
+<span class="customer-retention__stat-dot" style={{ 'background': seg.color }}></span>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-chart-legend-dot customColor={seg.color} />
+```
+
+Punto sin `color`
+
+```html
+<!-- ❌ mal: sin color sale el default gray, no el verde de la serie -->
+<span class="fila"><sui-chart-legend-dot /> Entregados <b>86 %</b></span>
+```
+
+```html
+<!-- ✅ bien -->
+<span class="fila"><sui-chart-legend-dot color="green" /> Entregados <b>86 %</b></span>
+```
+
+Varios puntos sueltos que hacen de leyenda
+
+```html
+<!-- ❌ mal: es una leyenda armada a mano con puntos sueltos -->
+<span><sui-chart-legend-dot color="blue" size="small" /> Yape</span>
+<span><sui-chart-legend-dot color="orange" size="small" /> Efectivo</span>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-chart-legend items={[{ label: 'Yape' }, { label: 'Efectivo' }]} />
+```
+
+## Ejemplo
+
+```html
+<span class="fila"><sui-chart-legend-dot color="green" /> Entregados <b>86 %</b></span>
+<span class="fila"><sui-chart-legend-dot color="red" /> Cancelados <b>14 %</b></span>
+```

package/docs/sui-checkbox/README.md

@@ -0,0 +1,250 @@
+---
+name: sui-checkbox
+selector: sui-checkbox
+resumen: La casilla sola para marcar una o varias opciones, sin texto propio
+alternativas: [sui-checkbox-label (casilla con su texto, el caso normal), sui-checkbox-card (cada opción es una tarjeta), sui-switch (prende algo que se aplica al instante), sui-radio (opciones excluyentes)]
+---
+
+# sui-checkbox
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-checkbox`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+>
+> **La API de aquí no es igual a la de Angular.** Lo que el texto nombre y figure en «Diferencias con
+> el SUI Angular» (dentro de API) aquí no existe.
+
+Story: [Atoms/Checkbox, Radio & Switch/Checkbox](https://sui-design-system.web.app/?path=/docs/atoms-checkbox-radio-switch-checkbox--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para marcar opciones que se suman (varias a la vez) y que se confirman después con
+un botón: permisos de un miembro del equipo, categorías a las que se aplica algo, productos de
+una lista. **Solo la casilla**: úsalo pelado cuando el texto vive en otra parte (una celda de
+tabla, una fila propia con foto y precio, el «seleccionar todo» de una cabecera).
+
+**No lo uses** para:
+
+- **Una casilla con su texto al lado** (el caso de casi siempre): eso es `sui-checkbox-label`,
+  que trae el texto, la descripción y el clic en toda la fila. Armar `<label>` + `sui-checkbox`
+  + `<span>` a mano es justo lo que ese componente evita.
+- Prender o apagar algo que se aplica al instante (notificaciones, disponibilidad): `sui-switch`.
+- Elegir una sola opción entre varias: `sui-radio` / `sui-radio-label`.
+- Una opción que merece tarjeta (ícono, descripción, borde que se pinta): `sui-checkbox-card`.
+
+Regla corta: **se suma y se confirma después → checkbox · se aplica ya → switch · una sola → radio.**
+
+## Qué variante usar
+
+> **La guía del DS dice para qué es, no qué tamaño usar.** Su página lo define como control de
+> formulario «para selecciones simples y múltiples» y muestra deshabilitado, con label y con label
+> avanzado (sublabel, badge, descripción y link). Lo marcado «según la guía del DS» sale de ahí;
+> el resto es canon del dueño o propuesta.
+>
+> Uso medido el 03-10-2026 y revisado el 06-10-2026 en `master-pedidos/src/app`, sin contar
+> prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`, `dx/*`,
+> `_guia-*`, `master-rutina`, `master-medico`, `dev-index`): **queda 1 `sui-checkbox`**, el de la
+> fila de opciones del detalle de producto, con el `size()` que le pasa el padre (`bp.controlSize()`
+> en la carta del cliente, `ctrlSize()` en la vista previa del modal de producto). Los otros 4 del
+> 03-10 eran casillas con texto armadas a mano y ya pasaron a `sui-checkbox-label`. Quedan además
+> **2 `<input type="checkbox">` nativos** que no deberían serlo (ver abajo).
+
+### Lo que sí dice la guía del DS
+
+- **Para qué es**: selecciones simples y múltiples dentro de un formulario.
+- **Deshabilitado**: existe deshabilitado sin marcar y deshabilitado marcado.
+- **Con texto**: el texto al lado es parte del componente (en SUI, `sui-checkbox-label`).
+- Los tamaños de la guía son dos (16 y 20 px). `large` (24) y `xlarge` (28) son extensión de SUI.
+
+### Estado (`checked`, `indeterminate`, `disabled`)
+
+| estado | cuándo | fuente |
+|---|---|---|
+| sin marcar / marcado | Lo normal. `checked` + `checkedChange` o `formControlName`. | según la guía del DS |
+| `indeterminate` | Solo en el «seleccionar todo» de una lista cuando hay algunas marcadas y otras no. Se ve un guion. Hoy no usar (0 casos, ver abajo). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `disabled` | La opción existe pero hoy no se puede tocar (un producto agotado en las opciones de un plato). Decir por qué cerca. | según la guía del DS (existe); el «cuándo»: canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+
+### `size`
+
+| size | px | cuándo | fuente |
+|---|---|---|---|
+| `xlarge` | 28 | Celular y tablet táctil (D16). | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
+| `large` | 24 | Computadora (D16). | canon (aprobado por el dueño, 28-09-2026) |
+| `medium` (default) | 20 | Solo dentro de un componente que ya fija su escala. Hoy no hay ninguno: la fila de opciones del detalle de producto recibe el `size` del padre, que es el de D16. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `small` | 16 | No usar (ver abajo). | canon (aprobado por el dueño, 28-09-2026) |
+
+Regla: **`size={bp.tactil() ? 'xlarge' : 'large'}`** en toda pantalla (la expresión exacta de
+D16, ver «Por dispositivo»). El único `sui-checkbox` de hoy no la lleva escrita: recibe el `size()`
+del detalle de producto, y ese padre recibe `bp.controlSize()` o `ctrlSize()`.
+
+**Usos de hoy frente a la regla de componente** (revisado 06-10-2026):
+
+- **Los 4 `sui-checkbox` envueltos en un `<label>` a mano ya pasaron a `sui-checkbox-label`** con
+  su tamaño: `pages/settings/team/team.html:237` y `:309` (permisos, `size={bp.controlSize()}`),
+  `components/option-sections-manager/option-sections-manager.html:190` (categorías) y `:212`
+  (productos). Estos dos usan `ctrlSize()`, una copia local de `bp.controlSize()`
+  (`option-sections-manager.ts:62`): da lo mismo, pero conviene usar el helper del servicio.
+  Antes, tocar el texto no marcaba nada: un `<label>` solo activa controles nativos y
+  `sui-checkbox` no lo es, así que solo respondía la casilla. `sui-checkbox-label` hace que toda
+  la fila responda.
+- **1 checkbox nativo → `sui-checkbox-label`:** `pages/sales-channels/facebook/facebook.html:69`
+  («Qué se sincroniza»). **Al migrarlo, pásale el tamaño:** `sui-checkbox-label` arranca en
+  `medium` (casilla de 20); sin `size` queda chico en el celular.
+- **1 checkbox nativo que en realidad es un interruptor → `sui-switch-label`:**
+  `components/settings-panel/settings-panel.html:99` (notificaciones push, se aplica al instante).
+- El de `components/product-detail-view/product-detail-view.html:204` está bien pelado: la fila
+  es propia (foto, nombre, precio) y es la fila la que recibe el clic.
+
+## Tamaño en mobile y en web
+
+En mobile se toca con el dedo: el control va grande y el área táctil (≥ 44 px) la da la fila
+que lo contiene. En web va un escalón más chico.
+
+| uso | mobile | web |
+|---|---|---|
+| casilla en una lista, tabla o fila de formulario | `xlarge` (28 px) | `large` (24 px) |
+| dentro de un componente que recibe su `size` del padre (fila de opciones del detalle de producto) | lo que pase el padre | lo que pase el padre |
+
+```html
+<sui-checkbox size={bp.tactil() ? 'xlarge' : 'large'} … />   <!-- tactil() = isMobile() || pointer: coarse -->
+```
+
+El más grande mide 28 px: ningún tamaño llega a 44 px por sí solo. La fila que lo
+contiene tiene que medir al menos 44 px de alto para que el toque sea cómodo.
+
+### Por dispositivo (D16)
+
+Fila de `checkbox` en la tabla de D16 (dueño, 05-10-2026; computadora resuelta el 06-10-2026): se
+toca, y en la computadora va **un paso menos que en el celular**, sin bajar a `medium`.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `xlarge` (28) | la fila que lo contiene da los 44 de alto |
+| celular (380–767 px) | `xlarge` (28) | |
+| tablet táctil (`pointer: coarse`) | `xlarge` (28) | Apple pide 44 pt también en iPad; la fila da el alto |
+| computadora (`pointer: fine`) | `large` (24) | un paso menos que el celular (dueño, 06-10-2026) |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `large`. `small` no se usa en ningún dispositivo;
+`medium` solo si un padre fija su propia escala (el detalle de producto hoy no lo hace: recibe el
+tamaño de D16 de su padre).
+
+En master-pedidos, la expresión que da esta tabla completa es
+**`size={bp.tactil() ? 'xlarge' : 'large'}`** (`bp.tactil()` = celular por ancho o pantalla
+táctil). La fila de D16 nombra `bp.controlSize()`, que es lo que llevan hoy los usos de la app: da
+lo mismo en el celular y en la computadora, pero mira solo el ancho (≤ 767 px), así que en un iPad
+de 768 o más devuelve `large` y no `xlarge`. Para que la tabla se cumpla en la tablet hay dos
+caminos: escribir la expresión de arriba, o que `controlSize()` pase a mirar `tactil()` en el
+servicio. Eso último cambia todos los usos de golpe y es decisión del dueño.
+
+## «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.
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `size="small"` (16 px) | en el teléfono se pierde y no llega al área táctil (el dueño pidió controles grandes), y es chico (D16, 05-10-2026) | nunca: una tabla del super admin con selección por fila también va con la casilla de web |
+| `indeterminate` (0 usos) | ninguna lista tiene «seleccionar todo» | el «seleccionar todo» de una lista de productos o pedidos con acciones en lote |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `checked` | `checked` | `boolean` | `false` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `focusable` | `focusable` | `boolean` | `true` |
+| `indeterminate` | `indeterminate` | `boolean` | `false` |
+| `size` | `size` | `"large" \| "medium" \| "small" \| "xlarge"` | `'medium'` |
+
+| evento | `event.detail` |
+|---|---|
+| `suiChange` | `boolean` |
+
+### Diferencias con el SUI Angular
+
+- **Eventos de Angular que aquí no existen:** `checkedChange`
+- **Eventos solo de aquí:** `suiChange`
+<!-- api:fin -->
+
+Implementa `ControlValueAccessor`: funciona con `ngModel` + `ngModelChange` y `formControlName`. Sin slots.
+
+## Trampas
+
+- **No tiene `label`.** Para el texto está `sui-checkbox-label`. Y el host lleva `role="checkbox"`
+  sin `aria-label` propio: pelado, ponle `aria-label="…"` (o `aria-labelledby` apuntando al texto
+  de la fila). **Un `<label>` que lo envuelva no sirve**: `<label>` solo activa y nombra controles
+  nativos, y `sui-checkbox` es un elemento propio con `role="checkbox"`. Tocar el texto no lo marca
+  y el lector de pantalla no lo asocia.
+- **`checked` es model; `indeterminate` es input.** Hay `checked` + `checkedChange` pero no `indeterminate` + `indeterminateChange`,
+  y el componente **no limpia el guion solo** al tocarlo: mientras `indeterminate` siga en `true`
+  se ve el guion aunque cambie `checked`.
+- El relleno marcado es el `primary` del proyecto (naranja), no el azul del Figma de origen.
+- Espacio **y** Enter lo marcan (un checkbox nativo solo responde a Espacio).
+- **`focusable="false"` lo saca del Tab** (tabindex -1). Es para cuando un padre ya es el
+  control enfocable y la casilla solo dibuja el estado (`sui-checkbox-card` lo usa). Poner
+  `tabindex="-1"` en el host no sirve: el binding del componente lo pisa (revisión 04-10-2026).
+- El tilde es un SVG dibujado a mano: no se cambia el ícono.
+- Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
+
+## Bien y mal
+
+Casilla con su texto
+
+```html
+<!-- ❌ mal: nativo dentro de un <label> hecho a mano (pages/sales-channels/facebook/facebook.html:69) -->
+<label class="fb-channel__sync-item">
+  <input type="checkbox" checked={item.checked} onChange={() => toggleSync(item.id)} />
+  <span>{item.label}</span>
+</label>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-checkbox-label size={bp.tactil() ? 'xlarge' : 'large'} label={item.label}
+  active={item.checked} onActiveChange={() => toggleSync(item.id)} />
+```
+
+Algo que se aplica al instante
+
+```html
+<!-- ❌ mal: casilla nativa pintada de interruptor para las notificaciones (components/settings-panel/settings-panel.html:99) -->
+<label class="sp__toggle">
+  <input type="checkbox" checked={pushEnabled()} onChange={() => togglePush(!pushEnabled())} />
+</label>
+```
+
+```html
+<!-- ✅ bien: se aplica ya → switch, no checkbox -->
+<sui-switch-label size={bp.tactil() ? 'xlarge' : 'large'} label="Notificaciones push"
+  active={pushEnabled()} onActiveChange={(e) => togglePush(e.detail)} />
+```
+
+«Seleccionar todo» de una lista
+
+```html
+<!-- ❌ mal: el guion fijo no se limpia al tocar la casilla, y pelada no tiene nombre -->
+<sui-checkbox size={bp.tactil() ? 'xlarge' : 'large'} indeterminate checked={todas} onCheckedChange={(e) => (todas = e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-checkbox size={bp.tactil() ? 'xlarge' : 'large'} aria-label="Seleccionar todo"
+  indeterminate={algunas() && !todas()} checked={todas()} onCheckedChange={(e) => marcarTodas(e.detail)} />
+```
+
+## Ejemplo
+
+```html
+<!-- Pelado, el texto vive en la fila (celda de tabla, fila propia) -->
+<sui-checkbox size={bp.tactil() ? 'xlarge' : 'large'} checked={seleccionado} onCheckedChange={(e) => (seleccionado = e.detail)} aria-label="Elegir pedido" />
+
+<!-- Con texto: usa sui-checkbox-label, no esto a mano -->
+<sui-checkbox-label size={bp.tactil() ? 'xlarge' : 'large'} label="Gestionar productos" active={puedeProductos} onActiveChange={(e) => (puedeProductos = e.detail)} />
+```

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

@@ -0,0 +1,230 @@
+---
+name: sui-checkbox-card
+selector: sui-checkbox-card
+resumen: Opción con tarjeta (ícono o foto, título, descripción y la casilla) para elegir VARIAS que se guardan después
+alternativas: [sui-checkbox-label (la misma casilla sin tarjeta, en un formulario denso), sui-switch-card (un ajuste que se aplica al toque, sin «Guardar»), sui-radio-card (se elige solo una), sui-tag-input (valores que la persona escribe)]
+---
+
+# sui-checkbox-card
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **De dónde sale este doc.** El criterio es el del SUI Angular (`sui-checkbox-card`); la API es la de este
+> paquete, leída del código. Los ejemplos se pasaron de Angular de forma mecánica: lo literal va como
+> atributo (`only-icon`, `size="large"`), lo dinámico entre llaves (`size={expr}` → `el.size = expr`)
+> y los eventos como `onValueChange={…}` → `el.addEventListener('valueChange', …)`. `@if`, `@for` y
+> `<ng-template>` quedan como en Angular: se leen como pseudocódigo.
+>
+> **La API de aquí no es igual a la de Angular.** Lo que el texto nombre y figure en «Diferencias con
+> el SUI Angular» (dentro de API) aquí no existe.
+
+Story: [Molecules/Card/Checkbox Card](https://sui-design-system.web.app/?path=/docs/molecules-card-checkbox-card--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para elegir varias opciones que se suman y que se confirman con «Guardar»: las formas
+de entrega del local («Recojo en tienda» + «Delivery»), los métodos de pago que acepta, los días
+de atención.
+
+**No lo uses** para:
+
+- Un ajuste que tiene efecto al toque, sin botón de guardar: `sui-switch-card`.
+- Elegir una sola: `sui-radio-card`.
+- Una lista larga de casillas en un formulario: `sui-checkbox-label` (sin tarjeta, ocupa menos).
+- Aceptar términos o confirmar algo: `sui-checkbox-label`.
+
+Regla corta: **varias que se guardan después → checkbox-card · se aplica al toque → switch-card ·
+una → radio-card.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página de la checkbox card.** De la guía sale solo lo del checkbox que
+> lleva adentro: **«para selecciones simples y múltiples»**. La frontera con el switch («se
+> confirma después con Guardar → checkbox») sale de la misma guía: el switch es «para prender o
+> apagar un ajuste de forma inmediata».
+>
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **13
+> checkbox-cards en 3 archivos**, todas con `bp.controlSize()`. Tipos: 6 `left-icon` (formas de
+> entrega en mi-negocio y en locales administrados; efectivo, transferencia y tarjeta en los
+> métodos de pago), 5 `basic` (los ajustes con «Guardar…» de
+> `pages/super-admin/master-settings/master-settings.html`) y 2 `company` (Yape y Plin, con la
+> inicial en `slot="leading"`). Las 10 de métodos de pago y de master-settings eran
+> `sui-switch-card` hasta el 03-10-2026.
+
+### `type` (el leading)
+
+| type | cuándo | fuente |
+|---|---|---|
+| `left-icon` (`icon`, `emoji` o `iconSrc`) | Lo normal: un ícono que dice de qué va la opción. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (6 de hoy) |
+| `basic` | Un ajuste o una opción de texto que se guarda con un botón y no necesita ícono («Pausar los pedidos» en master-settings). | canon (aprobado por el dueño, 05-10-2026, bloque B2) (5 de hoy) |
+| `company` | Un medio de pago o servicio con su logo redondo (Yape, Plin). El logo lo proyectas tú con `slot="leading"`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) (2 de hoy) |
+| `avatar` (`imageUrl`) | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `card-provider`, `brand` | Ver «No usar». El logo lo proyectas tú con `slot="leading"`. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+
+### Las piezas
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `label` | Siempre. El nombre de la opción: «Delivery». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `description` | Lo que significa elegirla: «Llevas los pedidos a la dirección del cliente». | canon (aprobado por el dueño, 05-10-2026, bloque B4) (8 de hoy) |
+| `sublabel` | Precisión corta entre paréntesis. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `badge` | Marca una opción frente a las otras («Nuevo»). Con string sale azul `light`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `indeterminate` | Una casilla que resume a otras («Todos los días» con algunos marcados). | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `disabled` | La opción no aplica hoy; di por qué en la `description`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `checked` | `checked` + `checkedChange`, o `checked` + `checkedChange`, o `formControlName`. | según el código |
+
+### `size` (la casilla de adentro)
+
+| size | cuándo | fuente |
+|---|---|---|
+| `xlarge` | Mobile, vía `bp.controlSize()`. | 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), `small` | No usar en pantallas nuevas. | canon (aprobado por el dueño, 28-09-2026) |
+
+**Usos de hoy que rompen las reglas: 0.** El que iba sin `size`
+(`pages/super-admin/master-administrados/master-administrados.html:171`) y los switch-cards que se
+guardaban con un botón se corrigieron el 03-10-2026.
+
+## Tamaño en mobile y en web
+
+La card entera es el área táctil: 74 px con descripción (16 + 40 + 16 de padding y contenido,
+más 2 de borde) y 54 px la más chica (`basic`, sin descripción, `medium`). Llega al piso de 44
+sola. El `size` cambia solo la casilla.
+
+| uso | mobile | web |
+|---|---|---|
+| toda checkbox-card | `xlarge` | `large` |
+
+```html
+<sui-checkbox-card size={bp.controlSize()} … />   <!-- isMobile() ? 'xlarge' : 'large' -->
+```
+
+### Por dispositivo (D16)
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `xlarge` | la card entera ya pasa de 44; el size solo agranda la casilla |
+| celular (380–767) | `xlarge` | |
+| tablet táctil (`pointer: coarse`) | `xlarge` | `bp.controlSize()` mira solo el ancho: un iPad de 768 o más recibe `large` hasta que el helper mire el puntero |
+| computadora (`pointer: fine`) | `large` | un paso menos que el celular; no baja a `medium` (D16, dueño 06-10-2026) |
+
+Ultrawide: igual que la computadora (`large`).
+
+En master-pedidos: `size={bp.controlSize()}` (`xlarge` hasta 767 px, `large` desde ahí). La
+expresión exacta de D16, con la tablet, es `bp.tactil() ? 'xlarge' : 'large'`.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `type="avatar"` (0 usos) | no se elige gente de a varios | elegir a varios repartidores para mandarles un aviso |
+| `type="brand"` / `"card-provider"` (0 usos) | no hay integraciones ni tarjetas | prender varias integraciones a la vez (logo proyectado), aceptar varias marcas de tarjeta |
+| `size="medium"` / `"small"` | la casilla se pierde en el teléfono | no hay: en la computadora va `large` (D16, dueño 06-10-2026) |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `badge` | `badge` | `SuiBadgeConfig \| null \| string` | `null` |
+| `checked` | `checked` | `boolean` | `false` |
+| `description` | `description` | `null \| string` | `null` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `emoji` | `emoji` | `null \| string` | `null` |
+| `icon` | `icon` | `null \| string` | `null` |
+| `iconSrc` | `icon-src` | `null \| string` | `null` |
+| `imageUrl` | `image-url` | `null \| string` | `null` |
+| `indeterminate` | `indeterminate` | `boolean` | `false` |
+| `label` | `label` | `string` | `''` |
+| `size` | `size` | `"large" \| "medium" \| "small" \| "xlarge"` | `'medium'` |
+| `sublabel` | `sublabel` | `null \| string` | `null` |
+| `type` | `type` | `"avatar" \| "basic" \| "brand" \| "card-provider" \| "company" \| "left-icon"` | `'basic'` |
+
+| evento | `event.detail` |
+|---|---|
+| `suiChange` | `boolean` |
+
+Slots: `leading`.
+
+### Diferencias con el SUI Angular
+
+- **Eventos de Angular que aquí no existen:** `checkedChange`, `checkedChange2`
+- **Eventos solo de aquí:** `suiChange`
+<!-- api:fin -->
+
+Slot: `[slot=leading]` (solo para `card-provider`, `brand` y `company`). Implementa
+`ControlValueAccessor` (valor `boolean`).
+
+## Trampas
+
+- **Hay dos outputs con el mismo dato**: `checkedChange` (lo crea el `model`) y `checkedChange2`
+  (el explícito, nombre de compatibilidad). Usa `checkedChange` o `checked` + `checkedChange`, como la app.
+- **Es no controlada**: el toque cambia el estado adentro aunque no actualices nada afuera (al
+  revés que `sui-switch-card`). Si tu señal no se entera, el visual y tu estado se separan.
+- **El leading de `card-provider`, `brand` y `company` se proyecta** con `slot="leading"`
+  (atributo `slot=`, no `sui-…-leading` como en la switch-card). Sin proyección queda el hueco.
+- Con `avatar`, si `imageUrl` falla salen las iniciales del `label`.
+- El leading de 40 × 40 ya trae `box-sizing: border-box` (el proyecto no tiene reset global): si
+  proyectas una imagen con padding o borde propios, ponle `box-sizing` tú.
+- `badge` con string sale **azul `light` `small`**.
+- **El host es el único control** (role checkbox, tab stop, Espacio y Enter): la casilla de la
+  derecha solo dibuja el estado, va oculta al lector y fuera del Tab (`focusable="false"`,
+  `aria-hidden` e `inert`; sin `inert`, axe marca nested-interactive por su `tabindex="-1"`).
+  Hasta el 04-10-2026 quedaba enfocable con `aria-hidden` y ahí Espacio no marcaba nada.
+
+## Bien y mal
+
+Card sin `size`
+
+```html
+<!-- ❌ mal: sin size queda la casilla medium de 20 (así estaba pages/super-admin/master-administrados/master-administrados.html:171 hasta el 03-10-2026) -->
+<sui-checkbox-card type="left-icon" icon="motorbike-line" label="Delivery" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-checkbox-card size={bp.controlSize()} type="left-icon" icon="motorbike-line" label="Delivery" />
+```
+
+Estado que no vuelve a la señal
+
+```html
+<!-- ❌ mal: es no controlada; el toque la marca adentro y ofreceRecojo() no se entera -->
+<sui-checkbox-card size={bp.controlSize()} label="Recojo en tienda"
+  checked={ofreceRecojo()} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-checkbox-card size={bp.controlSize()} label="Recojo en tienda"
+  checked={ofreceRecojo()} onCheckedChange={(e) => ofreceRecojo.set(e.detail)} />
+```
+
+Medio de pago con logo
+
+```html
+<!-- ❌ mal: type="company" sin slot="leading" deja el hueco del logo -->
+<sui-checkbox-card type="company" size={bp.controlSize()} label="Yape" />
+```
+
+```html
+<!-- ✅ bien (como pages/mi-negocio/mi-negocio.html:1209) -->
+<sui-checkbox-card type="company" size={bp.controlSize()} label="Yape">
+  <span slot="leading" aria-label="Yape">Y</span>
+</sui-checkbox-card>
+```
+
+## Ejemplo
+
+```html
+<sui-checkbox-card
+  size={bp.controlSize()}
+  type="left-icon"
+  icon="store-2-line"
+  label="Recojo en tienda"
+  description="El cliente recoge su pedido en tu local"
+  checked={ofreceRecojo()}
+  onCheckedChange={(e) => ofreceRecojo.set(e.detail)} />
+```