@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/docs/sui-radio/README.md

@@ -0,0 +1,238 @@
+---
+name: sui-radio
+selector: sui-radio
+resumen: El círculo solo para elegir una opción de una lista corta, sin texto propio
+alternativas: [sui-radio-label (círculo con su texto, lista densa), sui-radio-card (opción con peso o que se toca en el teléfono), sui-select (más de 6 opciones), sui-segmented-control (2-4 modos que se aplican al instante), sui-checkbox (varias a la vez)]
+---
+
+# sui-radio
+
+<!-- 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-radio`); 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/Radio](https://sui-design-system.web.app/?path=/docs/atoms-checkbox-radio-switch-radio--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para elegir **una** opción de una lista corta, solo como círculo: cuando el texto vive
+en otra parte (una columna «Por defecto» en una tabla, una fila propia con foto y precio).
+Va dentro de un `sui-radio-group`, que es el que hace que elegir una desmarque la otra.
+
+**No lo uses** para:
+
+- Un círculo con su texto en una lista densa (franjas horarias): `sui-radio-label`.
+- Opciones con peso (ícono, descripción, borde) o que se tocan en el teléfono: `sui-radio-card`
+  (método de pago, tipo de entrega, motivos de cancelación). La tarjeta entera es el área táctil
+  (54 px o más); un radio-label sin descripción mide lo que su círculo.
+- Más de ~6 opciones: `sui-select`.
+- 2-4 modos de la misma vista que se aplican al instante: `sui-segmented-control`.
+- Varias a la vez: `sui-checkbox`.
+
+Regla corta: **lista densa de texto → radio-label · con peso o en el teléfono → radio-card · muchas → select · sin texto → este.**
+
+## Qué variante usar
+
+> **La guía del DS lo define como control para «una sola selección de una lista corta de
+> opciones»**, y su ejemplo con label es una lista de motivos para reportar algo («Spam»,
+> «Acoso», «Infringe las reglas»). Muestra deshabilitado, con label y con label avanzado. No
+> trae do/don't de tamaños.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
+> **2 `sui-radio` en 2 archivos**, ambos en modo suelto (`standaloneChecked`), con tamaño
+> dinámico. Más **1 `<input type="radio">` nativo**.
+
+### Estado y modo
+
+| qué | cuándo | fuente |
+|---|---|---|
+| dentro de `sui-radio-group` + `value` | Siempre que haya más de una opción. El grupo hace la exclusión y se enchufa a `ngModel` + `ngModelChange`. | según la guía del DS (es un radio group) |
+| suelto con `standaloneChecked` + `standaloneCheckedChange` | Solo cuando la exclusión la hace la fila o el padre (la fila de opciones del detalle de producto). **Suelto, al tocarlo se desmarca** como un checkbox. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `disabled` | La opción existe pero no aplica ahora (una variante agotada). | según la guía del DS |
+
+### `size`
+
+| size | px | cuándo | fuente |
+|---|---|---|---|
+| `xlarge` | 28 | Mobile, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
+| `large` | 24 | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
+| `medium` (default) | 20 | Solo dentro de un componente que fija su escala en chico; hoy ningún padre lo hace (el detalle de producto recibe `xlarge` / `large`, ver «Por dispositivo»). Es el único tamaño de la guía. | según la guía del DS (único tamaño); el «cuándo» es canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+
+**Usos de hoy que rompen la regla:**
+
+- **1 radio nativo → `sui-radio-card type="basic"`:**
+  `pages/driver/driver-order-detail/driver-order-detail.html:874` (motivos de cancelación del
+  repartidor, el mismo caso del ejemplo de la guía). La pantalla hermana del local ya lo resolvió
+  así: `pages/orders/orders.html:567`.
+- **Resuelto el 04-10-2026:** el suelto que se podía desincronizar en `master-settings.html`
+  (categoría por defecto, con `standaloneChecked` + `$event && …`) se quitó junto con el «por
+  defecto», que nadie leía (commit `62ee5d60` de master-pedidos). El error queda como par en «Bien y mal».
+
+## Tamaño en mobile y en web
+
+| uso | mobile | web |
+|---|---|---|
+| círculo en una fila o tabla | `xlarge` (28 px) | `large` (24 px) |
+| dentro de un componente que fija su escala | lo que pase el padre | lo que pase el padre |
+
+```html
+<sui-radio size={bp.controlSize()} … />   <!-- isMobile() ? 'xlarge' : 'large' -->
+```
+
+El más grande mide 28 px: el área táctil de 44 px la tiene que dar la fila.
+
+### Por dispositivo (D16)
+
+Fila de `radio` 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) | `bp.controlSize()` hoy mira solo el ancho (≤ 767): en un iPad de 768 o más da `large`. Pendiente que el helper mire el puntero |
+| computadora (`pointer: fine`) | `large` (24) | un paso menos que el celular (dueño, 06-10-2026) |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `large`. `medium` solo cuando un padre fija la
+escala en chico, y hoy ninguna pantalla lo hace: el detalle de producto
+(`components/product-detail-view/product-detail-view.html:202`) recibe el `size` de quien lo
+monta, y los dos que lo montan le pasan `xlarge` / `large` (`pages/customer/restaurant-menu/restaurant-menu.html:457`
+con `bp.controlSize()` y `components/add-product-modal/add-product-modal.html:360` con
+`ctrlSize()`, el mismo corte).
+
+En master-pedidos: `size={bp.controlSize()}`.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| suelto (`standaloneChecked`) fuera de una fila propia | se desmarca al tocarlo de nuevo: no es un radio | nunca como grupo; solo como dibujo dentro de una fila que maneja el clic |
+
+## 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` |
+| `size` | `size` | `"large" \| "medium" \| "xlarge"` | `'medium'` |
+| `value` | `value` | `null \| number \| string` | `null` |
+
+| evento | `event.detail` |
+|---|---|
+| `suiChange` | `boolean` |
+| `suiRadioSelect` | `null \| number \| string` |
+
+| método | firma |
+|---|---|
+| `setChecked` | `setChecked(checked: boolean, tabStop?: boolean) => Promise<void>` |
+
+### Diferencias con el SUI Angular
+
+- **Props de Angular que aquí no existen:** `standaloneChecked`
+- **Eventos de Angular que aquí no existen:** `standaloneCheckedChange`
+- **Props solo de aquí:** `checked`
+- **Eventos solo de aquí:** `suiChange`, `suiRadioSelect`
+<!-- api:fin -->
+
+`sui-radio-group`: sin inputs; implementa `ControlValueAccessor` (`ngModel` + `ngModelChange`, `formControlName`)
+y proyecta los radios (`sui-radio`, `sui-radio-label`, `sui-radio-card`).
+
+## Trampas
+
+- **Suelto, togglea.** `standaloneChecked` se invierte con cada toque: se puede desmarcar. Para
+  semántica de radio, `sui-radio-group`.
+- **`sui-radio-group` no tiene `value`**: se maneja con `ngModel` + `ngModelChange` o un form control.
+- **`sui-radio-group` es `inline-flex` en fila con gap 16.** Para lista vertical hay que darle
+  `flex-direction: column; align-items: flex-start` desde afuera.
+- **Teclado en `sui-radio-group`** (revisión 04-10-2026): un solo tab stop —la opción marcada, o la
+  primera habilitada— y las flechas ↑ ↓ ← → mueven el foco y eligen la vecina, saltando las
+  deshabilitadas y dando la vuelta. Vale igual con `sui-radio-label` y `sui-radio-card` adentro.
+  Antes cada radio era una parada de Tab y no había flechas.
+- **Deshabilitar el control del grupo deshabilita todas las opciones** (`setDisabledState`;
+  hasta el 04-10-2026 no hacía nada y había que pasar `disabled` a cada una).
+- **`focusable="false"`** saca al radio del Tab y del grupo de flechas: es para cuando un padre
+  ya es el radio enfocable (`sui-radio-label`).
+- No hay `small`: el más chico es `medium` (20 px).
+- Sin marcar, en foco, el círculo se pinta del color de marca: viene del Figma, no es un error.
+- No dibuja texto ni `aria-label`: pelado, ponle `aria-label="…"` (o `aria-labelledby` apuntando
+  al texto de al lado) o usa `sui-radio-label`. Un `<label>` que lo envuelve **no** le da nombre:
+  `sui-radio` no es un control nativo y el lector solo dice «botón de opción» (axe:
+  `aria-toggle-field-name`, corregido en las stories el 09-10-2026).
+
+## Bien y mal
+
+Motivos de cancelación
+
+```html
+<!-- ❌ mal: radio nativo con <label> a mano (pages/driver/driver-order-detail/driver-order-detail.html:874) -->
+<label class="ts__modal-reason">
+  <input type="radio" name="driverCancelReason" value={reason} onChange={() => cancelReasonSelected.set(reason)} />
+  <span>{reason}</span>
+</label>
+```
+
+```html
+<!-- ✅ bien: opción que se toca en el teléfono → radio-card en una columna, como la pantalla
+     hermana del local (pages/orders/orders.html:567). Dentro de sui-radio-group sin más, las
+     tarjetas quedan en fila (su host es inline-flex): si se usa el grupo, darle
+     flex-direction: column desde afuera (ver Trampas) -->
+<div class="motivos" role="radiogroup" aria-label="Motivo de cancelación">
+  @for (reason of CANCEL_REASONS; track reason) {
+    <sui-radio-card size={bp.controlSize()} type="basic" value={reason} label={reason}
+      checked={cancelReasonSelected() === reason} onSelected={() => cancelReasonSelected.set(reason)} />
+  }
+</div>
+<!-- .motivos { display: flex; flex-direction: column; gap: 8px; } -->
+```
+
+Elegir uno de una lista
+
+```html
+<!-- ❌ mal: sueltos con standaloneChecked; al tocar el elegido se apaga y el padre no se entera (se quitó de master-settings.html el 04-10-2026) -->
+@for (cat of categorias; track cat.id) {
+  <sui-radio size={bp.controlSize()} standaloneChecked={cat.id === porDefecto()}
+    onStandaloneCheckedChange={(e) => e.detail && porDefecto.set(cat.id)} />
+}
+```
+
+```html
+<!-- ✅ bien: el grupo hace la exclusión -->
+<sui-radio-group ngModel={porDefecto()} onNgModelChange={(e) => porDefecto.set(e.detail)}>
+  @for (cat of categorias; track cat.id) {
+    <sui-radio size={bp.controlSize()} value={cat.id} aria-label={cat.nombre} />
+  }
+</sui-radio-group>
+```
+
+Círculo pelado en una tabla
+
+```html
+<!-- ❌ mal: el radio no dibuja texto ni aria-label; el lector solo dice «botón de opción» -->
+<sui-radio size={bp.controlSize()} value={cat.id} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-radio size={bp.controlSize()} value={cat.id} aria-label={'Por defecto: ' + cat.nombre} />
+```
+
+## Ejemplo
+
+```html
+<sui-radio-group ngModel={categoriaPorDefecto} onNgModelChange={(e) => (categoriaPorDefecto = e.detail)}>
+  @for (cat of categorias; track cat.id) {
+    <sui-radio size={bp.controlSize()} value={cat.id} aria-label={cat.nombre} />
+  }
+</sui-radio-group>
+```

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

@@ -0,0 +1,236 @@
+---
+name: sui-radio-card
+selector: sui-radio-card
+resumen: Opción con tarjeta (ícono o foto, título, descripción y el radio) para elegir UNA de una lista corta
+alternativas: [sui-radio-label (la misma elección sin tarjeta, en un formulario denso), sui-select (lista larga o que no entra en pantalla), sui-segmented-control (2–4 vistas de la misma pantalla), sui-checkbox-card (se pueden elegir varias), sui-switch-card (se prende o se apaga un ajuste)]
+---
+
+# sui-radio-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-radio-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/Radio Card](https://sui-design-system.web.app/?path=/docs/molecules-card-radio-card--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para elegir una sola opción de una lista corta cuando cada opción merece explicarse:
+«Delivery / Recojo en tienda», cómo cobrar («A mi saldo / Por Yape»), el medio de pago, el motivo
+de una cancelación, el modo de asignación de repartidores.
+
+**No lo uses** para:
+
+- Varias opciones que se suman: `sui-checkbox-card`.
+- Un ajuste que se prende o se apaga: `sui-switch-card`.
+- Una lista larga (más de 6–7 opciones) o que crece con los datos: `sui-select`.
+- Cambiar de vista dentro de la misma pantalla: `sui-segmented-control` o tabs.
+
+Regla corta: **una de pocas, con explicación → radio-card · una de muchas → select · varias →
+checkbox-card.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página de la radio card.** De la guía sale solo lo del radio que lleva
+> adentro: **«para elegir una sola opción de una lista corta»**. El resto es práctica de la app
+> («propuesta») o regla ya aprobada («canon»).
+>
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **31
+> radio-cards en 14 archivos**. Tipos: 23 `left-icon` (3 de ellos con emoji animado por
+> `iconSrc`), 6 `basic`, 1 `avatar`, 1 `company`. Tamaños: 30 `bp.controlSize()` y 1 con el
+> `size()` del padre (`components/address-picker-modal/address-picker-modal.html:41`). 6 con
+> `sublabel`, 6 con `disabled`, 1 con `badge`.
+
+### `type` (el leading)
+
+| type | cuándo | fuente |
+|---|---|---|
+| `left-icon` con `icon` | Lo normal: un ícono Remix que dice de qué va la opción (`truck-line` Delivery, `store-2-line` Recojo). | canon (aprobado por el dueño, 05-10-2026, bloque B2) (práctica de la app) |
+| `left-icon` con `iconSrc` | Emoji animado cuando la elección es de las grandes del rol (el vehículo del repartidor, el rol al registrarse, el tipo de mandadito). Los emojis van de `assets/emojis/` o `FLUENT_EMOJI_ANIM`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `left-icon` con `emoji` | Lo mismo con un nombre de `SuiEmoji` en vez de una URL. Hoy 0 usos; vale igual. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `basic` | Opciones de texto puro: motivos de cancelación, quién paga el envío, los premios de una meta. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `avatar` (`imageUrl`) | El logo redondo de un medio de pago (Yape, Plin, efectivo en el checkout). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `company` (`imageUrl`) | Elegir entre tus locales (cambiar de negocio en mi-negocio). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `brand`, `card-provider` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+
+### Las piezas
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `value` (obligatorio) | Siempre, aunque no haya grupo. Es lo que emite `selected`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `label` | Siempre. El nombre de la opción, corto: «Delivery», «Lo antes posible». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `description` | Casi siempre: la consecuencia de elegirla («Lo revisamos y te transferimos. Puede tardar unas horas.»). | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `sublabel` | Una precisión corta entre paréntesis («(canal estable)», «(sin OTA)»). Nunca la explicación: eso es `description`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `badge` | Marca una opción frente a las otras: «Por defecto». Con string sale azul `light`; pasa el objeto con el color que corresponda según el badge. Si «Por defecto» va `gray` o con el azul de hoy espera P48. | propuesta, espera P48 |
+| `disabled` | La opción existe pero hoy no se puede: di por qué en la `description` («El local está cerrado ahora»). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `checked` / `ngModel` + `ngModelChange` / `sui-radio-group` | El estado: `checked` + `selected` sueltos (lo que más usa la app hoy), o `ngModel` con `name` (checkout), o dentro de un `sui-radio-group`. Cuál es el canon (grupo, o sueltos como lo normal) espera P49. | propuesta, espera P49 |
+
+### `size` (el radio de adentro)
+
+| size | cuándo | fuente |
+|---|---|---|
+| `xlarge` (28) | Mobile, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
+| `large` (24) | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
+| `medium` (20, default) | No usar en pantallas nuevas, tampoco en la computadora. | canon (aprobado por el dueño, 28-09-2026) · D16, dueño 06-10-2026 |
+
+**Usos de hoy que rompen las reglas: 0.** Los 5 que iban sin el size del breakpoint y el
+`xlarge` fijo de `pages/customer/mandadito/mandadito.html:30` pasaron a `bp.controlSize()` el
+03-10-2026.
+
+- **A revisar:** `pages/super-admin/master-orders/master-orders.html:720` lista a los repartidores
+  candidatos, una lista que crece con la flota (con muchos, `sui-select` o una lista con búsqueda).
+  `pages/role-selector/role-selector.html:24` usa la radio como botón: elegir ya avanza, sin
+  `checked`.
+
+## 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 el radio.
+
+| uso | mobile | web |
+|---|---|---|
+| toda radio-card | `xlarge` (radio 28) | `large` (radio 24) |
+
+```html
+<sui-radio-card size={bp.controlSize()} … />   <!-- isMobile() ? 'xlarge' : 'large' -->
+```
+
+### Por dispositivo (D16)
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `xlarge` (radio 28) | la card entera ya pasa de 44; el size solo agranda el radio |
+| celular (380–767) | `xlarge` (radio 28) | |
+| tablet táctil (`pointer: coarse`) | `xlarge` (radio 28) | `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` (radio 24) | 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="brand"` (0 usos) | no hay servicios de terceros que elegir | elegir el canal por el que te contactamos (WhatsApp, correo) con su logo (`brand`) |
+| `type="card-provider"` (0 usos) | no hay pago con tarjeta guardada | elegir una tarjeta guardada en el checkout, cuando entre Culqi / Niubiz |
+| `size="medium"` | el radio de 20 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` | `SuiRadioCardBadge \| null \| string` | `null` |
+| `brand` | `brand` | `"adobe" \| "amazon" \| "apple" \| "bitcoin" \| "discord" \| "dropbox" \| "facebook" \| "figma" \| "framer" \| "github" \| "google" \| "instagram" \| "linkedin" \| "microsoft" \| "netflix" \| "notion" \| "paypal" \| "pinterest" \| "slack" \| "spotify" \| "stripe" \| "telegram" \| "twitch" \| "webflow" \| "whatsapp" \| "wise" \| "x-twitter" \| "youtube" \| null` | `null` |
+| `checked` | `checked` | `boolean` | `false` |
+| `description` | `description` | `null \| string` | `null` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `emoji` | `emoji` | `"bar-chart" \| "bell" \| "bell-with-slash" \| "birthday-cake" \| "busts-in-silhouette" \| "card-index-dividers" \| "check-mark" \| "check-mark-button" \| "clapping-hands" \| "confused-face" \| "cross-mark" \| "delivery-truck" \| "dollar-banknote" \| "face-screaming" \| "face-with-rolling-eyes" \| "gear" \| "glowing-star" \| "grinning-face" \| "grinning-face-smiling-eyes" \| "hamburger" \| "hammer" \| "handshake" \| "house" \| "kick-scooter" \| "label" \| "locked" \| "magnifying-glass-tilted-left" \| "mobile-phone" \| "money-bag" \| "money-with-wings" \| "motorcycle" \| "neutral-face" \| "no-entry" \| "office-building" \| "package" \| "party-popper" \| "partying-face" \| "pensive-face" \| "pizza" \| "pushpin" \| "receipt" \| "rocket" \| "shop" \| "shopping-bags" \| "shopping-cart" \| "sleeping-face" \| "slightly-smiling-face" \| "smiling-face-hearts" \| "sparkles" \| "spiral-calendar" \| "star-struck" \| "taco" \| "thinking-face" \| "thumbs-up" \| "unlocked" \| "warning" \| "waving-hand" \| "wrench" \| null` | `null` |
+| `icon` | `icon` | `null \| string` | `null` |
+| `iconSrc` | `icon-src` | `null \| string` | `null` |
+| `imageUrl` | `image-url` | `null \| string` | `null` |
+| `label` | `label` | `string` | `''` |
+| `size` | `size` | `"large" \| "medium" \| "xlarge"` | `'medium'` |
+| `sublabel` | `sublabel` | `null \| string` | `null` |
+| `type` | `type` | `"avatar" \| "basic" \| "brand" \| "card-provider" \| "company" \| "left-icon"` | `'basic'` |
+| `value` | `value` | `string` | — (requerido) |
+
+| evento | `event.detail` |
+|---|---|
+| `selected` | `string` |
+| `suiChange` | `boolean` |
+| `suiRadioSelect` | `string` |
+
+| método | firma |
+|---|---|
+| `setChecked` | `setChecked(checked: boolean, tabStop?: boolean) => Promise<void>` |
+
+### Diferencias con el SUI Angular
+
+- **Eventos de Angular que aquí no existen:** `checkedChange`
+- **Eventos solo de aquí:** `suiChange`, `suiRadioSelect`
+<!-- api:fin -->
+
+Implementa `ControlValueAccessor` (el valor del form es el `value` elegido). Dentro de un
+`sui-radio-group`, el grupo decide cuál está marcada.
+
+## Trampas
+
+- **`value` es obligatorio** aunque la uses suelta: sin él Angular tira error de input requerido.
+- **Precedencia del leading en `left-icon`: `icon` > `emoji` > `iconSrc`.** Si pasas `icon` y
+  `iconSrc`, gana el ícono.
+- Con `iconSrc` el círculo pasa a modo «relleno» (sin padding): el emoji ocupa los 40 × 40.
+- `avatar`, `company` y `card-provider` leen la imagen de **`imageUrl`**; `brand` lee `brand` (o
+  `imageUrl` si la marca no está en el catálogo). No hay slot para proyectar el leading (a
+  diferencia de `sui-checkbox-card`).
+- Suelta (sin grupo), elegirla la marca pero **no desmarca a las otras**: el padre tiene que
+  bindear `checked` de todas a la misma señal. Suelta, además, **cada card es una parada de Tab
+  y no hay flechas**; dentro de `sui-radio-group` sí hay un solo tab stop y flechas (revisión 04-10-2026).
+  Cuál de las dos formas es el canon espera P49.
+- `badge` con string sale **azul `light` `small`** (en `sui-content-label` sale naranja).
+- `size` cambia solo el radio, no el padding ni el alto de la card.
+
+## Bien y mal
+
+Motivos de cancelación con un radio nativo
+
+```html
+<!-- ❌ mal: radio del navegador, sin tamaño ni foco del DS (pages/driver/driver-order-detail/driver-order-detail.html:874) -->
+<label class="ts__modal-reason">
+  <input type="radio" name="driverCancelReason" value={reason}
+    checked={cancelReasonSelected() === reason} onChange={() => cancelReasonSelected.set(reason)} />
+  <span>{reason}</span>
+</label>
+```
+
+```html
+<!-- ✅ bien: igual que la pantalla hermana, pages/orders/orders.html:567 (sueltas con [checked]; si va en sui-radio-group espera P49) -->
+<sui-radio-card type="basic" size={bp.controlSize()} value={reason} label={reason}
+  checked={cancelReasonSelected() === reason} onSelected={() => cancelReasonSelected.set(reason)} />
+```
+
+Suelta, sin `checked`
+
+```html
+<!-- ❌ mal: elegir una no desmarca a las otras; quedan dos marcadas -->
+<sui-radio-card size={bp.controlSize()} value="delivery" label="Delivery" onSelected={() => modo.set('delivery')} />
+<sui-radio-card size={bp.controlSize()} value="pickup" label="Recojo en tienda" onSelected={() => modo.set('pickup')} />
+```
+
+```html
+<!-- ✅ bien: el grupo decide cuál está marcada (como pages/super-admin/master-settings/master-settings.html:438) -->
+<sui-radio-group ngModel={modo()} onNgModelChange={(e) => modo.set(e.detail)}>
+  <sui-radio-card size={bp.controlSize()} value="delivery" label="Delivery" />
+  <sui-radio-card size={bp.controlSize()} value="pickup" label="Recojo en tienda" />
+</sui-radio-group>
+```
+
+Sueltas con `checked={modo() === '…'}` + `selected` también funciona (es lo que hace hoy casi
+toda la app). Cuál de las dos es el canon espera P49.
+
+## Ejemplo
+
+```html
+<!-- suelta con [checked], como casi toda la app; si va en sui-radio-group espera P49 -->
+<sui-radio-card
+  size={bp.controlSize()}
+  type="left-icon"
+  value="pickup"
+  icon="store-2-line"
+  label="Recojo en tienda"
+  description="Lo recoges en el local"
+  checked={modo() === 'pickup'}
+  onSelected={() => modo.set('pickup')} />
+```

package/docs/sui-radio-group/README.md

@@ -0,0 +1,36 @@
+---
+name: sui-radio-group
+selector: sui-radio-group
+resumen: Pieza de sui-radio; cuándo usarla y sus trampas están en el README de sui-radio
+alternativas: [sui-radio]
+---
+
+# sui-radio-group
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **Es una pieza de `sui-radio`.** En el SUI Angular vive en la misma carpeta y se documenta en
+> la misma página: cuándo usarla, variantes, tamaño por dispositivo y trampas están en
+> [`sui-radio`](../sui-radio/README.md). Aquí va solo su API, leída del código.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `disabled` | `disabled` | `boolean` | `false` |
+| `value` | `value` | `null \| number \| string` | `null` |
+
+| evento | `event.detail` |
+|---|---|
+| `suiChange` | `null \| number \| string` |
+
+Slots: `(por defecto)`.
+
+### Diferencias con el SUI Angular
+
+- **Props solo de aquí:** `disabled`, `value`
+- **Eventos solo de aquí:** `suiChange`
+<!-- api:fin -->