@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/docs/sui-rich-editor/README.md

@@ -0,0 +1,175 @@
+---
+name: sui-rich-editor
+selector: sui-rich-editor
+resumen: Barra de formato (negrita, cursiva, alineación, enlace) con un área de texto editable opcional
+alternativas: [sui-textarea (todo texto libre de la app hoy, sin formato)]
+---
+
+# sui-rich-editor
+
+<!-- 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-rich-editor`); 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/Rich Editor](https://sui-design-system.web.app/?path=/docs/molecules-rich-editor--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** solo si un texto **necesita formato** y se va a mostrar con ese formato: negritas,
+listas o enlaces en un texto largo que se publica en la web.
+
+**No lo uses** para:
+
+- Notas, motivos, descripciones de productos, mensajes y avisos: `sui-textarea`. Todo eso se
+  guarda y se muestra como texto plano.
+- Un push o un aviso del celular: no muestran formato.
+
+Regla corta: **hoy, siempre `sui-textarea`.**
+
+## Qué variante usar
+
+> **La guía del DS no tiene página para este componente.** Viene del Figma («Rich Editor»), donde
+> solo está la barra de formato. Las reglas marcadas **canon** están aprobadas; lo que sigue en **propuesta** espera decisión.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos**.
+
+| prop / evento | cuándo | fuente |
+|---|---|---|
+| `layout="full"` (default) | Título, tamaño, B I U S, alineación, comentario, enlace, mención. | API |
+| `layout="formatting"` | Solo B I U S y alineación: lo único que el editor aplica solo. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `layout="compact"` | Solo título y tamaño (los dos son avisos a la pantalla, no formato real). | — |
+| `layout="social"` | Comentario, enlace, mención (también avisos). | — |
+| `showMore` | El botón ⋮ al final. Apagarlo si no hay más acciones. | API |
+| `editable` | `true` para tener el área donde se escribe; `false` deja solo la barra. | API |
+| `placeholder` | «Escribe algo…» (default) o algo del contexto. | API |
+| `value` | El contenido, **en HTML**. | API |
+| `headingLabel` · `fontSizeLabel` | Lo que dicen los botones de título y tamaño («Título», «14px» por default). | API |
+| `action` | Cada botón de la barra: la pantalla tiene que resolver título, tamaño, enlace, comentario y mención. | API |
+
+## Tamaño en mobile y en web
+
+**No tiene `size`.** Los botones de la barra son de 28 px: **no tiene tamaño suficiente para
+mobile**. Si alguna vez se usa, que sea en el panel web.
+
+### Por dispositivo (D16)
+
+No aplica: no tiene input `size` y la barra mide 28 px en todos los dispositivos, así que no llega a
+los 44 de D16 (dueño, 05-10-2026) en el celular ni en la tablet táctil. Solo en la computadora
+(`pointer: fine`); en master-pedidos no hay nada que bindear.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| el componente entero (0 usos) | ningún texto de la app lleva formato | una página de ayuda o de términos que se escribe desde el super admin y se muestra en la web |
+| `layout` `full`, `compact`, `social` | título, tamaño, enlace, comentario y mención no los hace el editor: solo avisa | si se monta un editor completo (Tiptap) detrás |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `editable` | `editable` | `boolean` | `false` |
+| `fontSizeLabel` | `font-size-label` | `string` | `'14px'` |
+| `headingLabel` | `heading-label` | `string` | `'Título'` |
+| `layout` | `layout` | `"compact" \| "formatting" \| "full" \| "social"` | `'full'` |
+| `placeholder` | `placeholder` | `string` | `'Escribe algo…'` |
+| `showMore` | `show-more` | `boolean` | `true` |
+| `value` | `value` | `string` | `''` |
+
+| evento | `event.detail` |
+|---|---|
+| `action` | `SuiRichEditorAction` |
+| `valueChange` | `string` |
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->
+
+<!-- textos:inicio -->
+### Textos
+
+Lo que el componente escribe solo sale de `provideSuiTextos` (español por defecto, se cambia en vivo; ver `docs/TEXTOS.md`). El input de la última columna le gana al texto global.
+
+| clave | por defecto | se pisa con |
+|---|---|---|
+| `editorTexto.barra` | Formato de texto | — |
+| `editorTexto.encabezado` | Estilo de encabezado | — |
+| `editorTexto.tamano` | Tamaño de fuente | — |
+| `editorTexto.negrita` | Negrita | — |
+| `editorTexto.cursiva` | Cursiva | — |
+| `editorTexto.subrayado` | Subrayado | — |
+| `editorTexto.tachado` | Tachado | — |
+| `editorTexto.alineacion` | Alineación | — |
+| `editorTexto.comentario` | Comentario | — |
+| `editorTexto.enlace` | Insertar enlace | — |
+| `editorTexto.mencionar` | Mencionar | — |
+| `comun.masOpciones` | Más opciones | — |
+| `editorTexto.placeholder` | Escribe algo… | `placeholder` |
+| `editorTexto.titulo` | Título | `headingLabel` |
+<!-- textos:fin -->
+
+Sub-componente: `sui-rich-editor-item` (cada botón de la barra).
+
+## Trampas
+
+- **`value` es HTML.** Mostrarlo con `innerHTML` sin limpiarlo abre la puerta a código ajeno.
+  Limpiarlo en el servidor antes de guardar.
+- **Solo B I U S y alineación funcionan solos** (usa `document.execCommand`, que está en desuso).
+  Título, tamaño, enlace, comentario y mención solo emiten `action`: la pantalla tiene que hacer
+  el resto.
+- Por default muestra solo la barra: sin `editable` no hay dónde escribir.
+- El label de tamaño por default es técnico («14px»); el de título ya está en español («Título», 04-10-2026).
+
+## Bien y mal
+
+Una descripción o una nota
+
+```html
+<!-- ❌ mal: el texto se guarda y se muestra plano; la barra sobra y en el teléfono no se toca -->
+<sui-rich-editor editable placeholder="Describe el producto…" value={descripcion} onValueChange={(e) => (descripcion = e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-textarea size={bp.sizeControl()} label="Descripción" rows="4"
+  placeholder="Describe el producto…" value={descripcion} onValueChange={(e) => (descripcion = e.detail)} />
+```
+
+La barra entera esperando que todo funcione
+
+```html
+<!-- ❌ mal: título, tamaño, enlace, comentario y mención solo emiten (action); nadie los resuelve -->
+<sui-rich-editor editable value={html} onValueChange={(e) => (html = e.detail)} />
+```
+
+```html
+<!-- ✅ bien: solo lo que el editor aplica solo -->
+<sui-rich-editor layout="formatting" show-more="false" editable value={html} onValueChange={(e) => (html = e.detail)} />
+```
+
+Un editor sin dónde escribir
+
+```html
+<!-- ❌ mal: sin editable solo se dibuja la barra -->
+<sui-rich-editor layout="formatting" placeholder="Escribe la respuesta…" value={html} onValueChange={(e) => (html = e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-rich-editor layout="formatting" editable placeholder="Escribe la respuesta…" value={html} onValueChange={(e) => (html = e.detail)} />
+```
+
+## Ejemplo
+
+```html
+<sui-rich-editor layout="formatting" show-more="false" editable
+                 placeholder="Escribe la respuesta…" value={html} onValueChange={(e) => (html = e.detail)} />
+```

package/docs/sui-rich-editor-item/README.md

@@ -0,0 +1,39 @@
+---
+name: sui-rich-editor-item
+selector: sui-rich-editor-item
+resumen: Pieza de sui-rich-editor; cuándo usarla y sus trampas están en el README de sui-rich-editor
+alternativas: [sui-rich-editor]
+---
+
+# sui-rich-editor-item
+
+<!-- generado por scripts/gen-docs.mjs — no editar a mano; `npm run docs` -->
+
+> **Es una pieza de `sui-rich-editor`.** 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-rich-editor`](../sui-rich-editor/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 |
+|---|---|---|---|
+| `ariaLabel` | `aria-label` | `string` | `''` |
+| `color` | `color` | `"blue" \| "gray" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "sky" \| "teal" \| "yellow"` | `'gray'` |
+| `colorHex` | `color-hex` | `null \| string` | `null` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `icon` | `icon` | `string` | `''` |
+| `label` | `label` | `string` | `''` |
+| `state` | `state` | `"active" \| "default" \| "hover"` | `'default'` |
+| `type` | `type` | `"color" \| "dropdown" \| "icon" \| "text"` | `'icon'` |
+
+| evento | `event.detail` |
+|---|---|
+| `clicked` | `void` |
+
+### Diferencias con el SUI Angular
+
+Ninguna en nombres de props, eventos y valores.
+<!-- api:fin -->

package/docs/sui-segmented-control/README.md

@@ -0,0 +1,252 @@
+---
+name: sui-segmented-control
+selector: sui-segmented-control
+resumen: Píldora de 2 a 4 opciones hermanas donde se elige una y se aplica en el momento
+alternativas: [sui-tab-menu-horizontal (navegar entre secciones de contenido), sui-tab-chips (fila de filtros con muchas opciones), sui-radio-card (elegir una opción de un formulario que se guarda después), sui-button-group (varias opciones a la vez)]
+---
+
+# sui-segmented-control
+
+<!-- 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-segmented-control`); 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/Segmented Control](https://sui-design-system.web.app/?path=/docs/atoms-segmented-control--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para cambiar entre 2 a 4 modos de **la misma vista**, que se aplican apenas se tocan:
+cuadrícula o lista en el catálogo, el local cuyo horario estás viendo, el rol que vas a invitar.
+
+**No lo uses** para:
+
+- Navegar entre secciones de contenido distinto: `sui-tab-menu-horizontal`.
+- Una fila de filtros con 5 o más opciones o que scrollea: `sui-tab-chips`. **Período o filtro con 2 a 4 opciones excluyentes → `sui-segmented-control`; con 5 o más, o si no caben y tienen que deslizarse → `sui-tab-chips`** (canon, dueño 04-10-2026).
+- Elegir un valor que se guarda después con un botón: `sui-radio-card` (no se enchufa a un formulario).
+- Varias opciones a la vez: `sui-button-group`.
+- 5 o más opciones: los segmentos se reparten el ancho y los textos se cortan.
+
+Regla corta (canon, dueño 04-10-2026): **2-4 opciones excluyentes de efecto inmediato (modos de la
+vista, períodos o filtros fijos como «Hoy · 7 días · 30 días») → segmented · 5+ o que deslizan →
+tab-chips · secciones → tab menu.**
+
+## Qué variante usar
+
+> **La guía del DS lo define como control para elegir una opción de un conjunto lineal de
+> opciones muy relacionadas «y aplicarla de inmediato»**. Muestra la versión base y la redondeada
+> (`Rounded`), que SUI tiene como `shape="rounded"` desde la rama `segmented-rounded` (19-10-2026).
+> No trae tamaños ni do/don't.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
+> **5 usos en 4 archivos**. Tamaños: 3 `small`, 1 `medium`, 1 sin `size` (`medium`). 1 con solo
+> íconos (vista cuadrícula / lista del catálogo). El 06-10-2026 ya eran **9 usos en 7 archivos**
+> (ver «Usos de hoy» abajo).
+
+### `size`
+
+| size | cuándo | fuente |
+|---|---|---|
+| `2xlarge` | Celular y tablet táctil: el único que llega a 44 px por segmento. | canon (dueño, 04-10-2026: piso táctil 44 en el teléfono) y D16, dueño 05-10-2026 |
+| `xlarge` | No se usa: 40 px no llega a 44 en el teléfono y sobra en la computadora. Ninguna pantalla de la app lo usa (medido el 06-10-2026; solo aparece en la vitrina `master-preview`). | D16, dueño 05-10-2026 (antes «mobile», 28-09-2026) |
+| `large` | No aporta: 32 px, chico para el dedo y grande para web. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `medium` (default) | Computadora: junto a títulos o filtros, también solo íconos en una barra. | canon (dueño, 05-10-2026, D16); el valor exacto, canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| `small` | No usar: es chico. Los íconos de una barra (cuadrícula / lista) van en `medium`. | canon (dueño, 05-10-2026, D16) |
+
+### `shape`
+
+| shape | cuándo | fuente |
+|---|---|---|
+| `default` | Lo normal dentro de la app: junto a títulos, filtros y formularios, que usan radios 10 / 6. | Figma 2604:114 |
+| `rounded` | Junto a otros controles en píldora (botones de radio full, chips): la cabecera de una landing, una barra flotante. Riel, indicador y segmentos en píldora; alto, padding y colores no cambian. | versión «Rounded» de la guía del DS · uso: propuesta (19-10-2026, landing de Pixel Perfect), falta aprobación |
+
+### Ítems (`tabs`)
+
+| qué | cuándo | fuente |
+|---|---|---|
+| texto | Lo normal. Una o dos palabras por segmento («Por distancia», «Precio único»). | según la guía del DS (ejemplos con texto) |
+| `icon` + texto | Cuando el ícono ayuda a reconocer el modo rápido. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `iconOnly` | Solo para modos universales (cuadrícula / lista). El `label` pasa a ser el nombre accesible: escríbelo igual. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `disabled` (por ítem) | Un modo que existe pero no aplica todavía. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+
+**Usos de hoy que rompen las reglas:**
+
+- **2 dentro de un borrador que se guarda después (a discutir):**
+  `pages/super-admin/master-settings/master-settings.html:281` (modo de envío: «Por distancia» /
+  «Precio único») y `:314` («Por calle» / «En línea recta»). La guía dice que se aplica de
+  inmediato; aquí la elección espera al «Guardar». Es trabajo de `sui-radio-card`.
+- **1 con textos largos, a verificar en mobile:** `pages/super-admin/master-roles/master-roles.html:48`
+  («Administrador de ciudad» / «Jefe de operaciones»). Por ancho de texto quedan apretados cerca
+  del borde a 390 px; no se midió en la pantalla real.
+- **2 en `small` con texto** (D16: `small` no se usa): `master-settings.html:281` y `:314`. El
+  tercero, `pages/products/products.html:83`, va en `small` en la computadora con solo íconos: con
+  D16 también pasa a `medium`.
+- **Sin tamaño por dispositivo** (revisado el 06-10-2026): `master-roles.html:48` (sin `size`) y
+  `pages/super-admin/master-categorias/master-categorias.html:124` (`medium` fijo) se quedan en 28
+  en el teléfono; `master-settings.html:224` usa `tallaServicio()` (`master-settings.ts:452`), que
+  da `large` (32) en el teléfono. Los que cortan con `bp.isMobile()`
+  (`pages/driver/driver-schedule/driver-schedule.html:31`, `pages/overview/overview.html:45`,
+  `pages/driver/driver-dashboard/driver-dashboard.html:865`) dejan la tablet táctil en `medium`.
+
+## Tamaño en mobile y en web
+
+Alto de cada segmento con texto: `small` 28 px, `medium` 28 px, `large` 32 px, `xlarge` 40 px
+(8 + 24 + 8), `2xlarge` 44 px (10 + 24 + 10). Con `iconOnly` el `xlarge` mide 36 (8 + 20 + 8) y el
+`2xlarge` 44 (12 + 20 + 12): el ícono queda en 20 y no hay línea de texto. El riel suma 8 px más (4
+de relleno arriba y 4 abajo), pero ese relleno no responde al toque: el área táctil es el segmento.
+
+En large, xlarge y 2xlarge el texto sube a 16 px (regla del 03-10-2026): Label/Medium 16/24. En
+`large` el padding del segmento con texto bajó de 6 a 4 para que siga midiendo 32.
+
+**`2xlarge` es el size del teléfono**: 44 px por segmento, con texto o solo ícono (canon (dueño,
+04-10-2026): piso táctil 44 en el teléfono). `xlarge` (40) no se usa: no llega a 44 y ninguna
+pantalla de la app lo tiene.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| modos con texto (local del horario, rol) | `2xlarge` (segmento de 44 px) | `medium` | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| solo íconos en una barra (cuadrícula / lista) | `2xlarge` (44) | `medium` | mobile: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono · web: canon (dueño, 05-10-2026, D16), antes `small` |
+
+```html
+<sui-segmented-control size={bp.tactil() ? '2xlarge' : 'medium'} … />
+```
+
+### Por dispositivo (D16)
+
+Fila de `segmented-control` en la tabla de D16 (dueño, 05-10-2026): se toca, y el size que llega a
+44 es `2xlarge`.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `2xlarge` (44) | D16 pide `medium` con área de 44, pero el DS todavía no estira el área de los `medium` (nota ¹ de D16): hasta entonces se queda el grande |
+| celular (380–767 px) | `2xlarge` (44) | con texto o solo íconos |
+| tablet táctil (`pointer: coarse`) | `2xlarge` (44) | Apple pide 44 también en el iPad |
+| computadora (`pointer: fine`) | `medium` (28) | también solo íconos en una barra; nunca `small` |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`; el espacio extra va al `max-width`, no a
+segmentos más altos.
+
+En master-pedidos: `size={bp.tactil() ? '2xlarge' : 'medium'}`. No hay helper: `bp.sizeChips()`
+llega a `xlarge` (40) y `bp.sizeControl()` a `large` (32), y ninguno de los dos da 44 aquí.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `large` | 32 px: no llega al dedo en mobile y sobra en web | un control dentro de un sheet de mobile muy apretado donde `2xlarge` no entra |
+| `disabled` por ítem | ningún modo está bloqueado | un modo que depende del plan («Reportes completos» en plan básico) |
+| 5+ ítems | se cortan los textos | nunca: pasa a `sui-tab-chips` |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| prop | atributo | tipo | default |
+|---|---|---|---|
+| `active` | `active` | `string \| undefined` | `undefined` |
+| `ariaLabel` | `aria-label` | `null \| string` | `null` |
+| `shape` | `shape` | `"default" \| "rounded"` | `'default'` |
+| `size` | `size` | `"2xlarge" \| "large" \| "medium" \| "small" \| "xlarge"` | `'medium'` |
+| `tabs` | — (solo por propiedad JS) | `SuiSegmentedControlItem[]` | `[]` |
+
+| evento | `event.detail` |
+|---|---|
+| `tabChange` | `string` |
+
+### Diferencias con el SUI Angular
+
+- **Eventos de Angular que aquí no existen:** `activeChange`
+<!-- api:fin -->
+
+```ts
+interface SuiSegmentedControlItem<T = string> {
+  value: T;
+  label: string;
+  icon?: string;       // RemixIcon, 20 px fijo
+  iconOnly?: boolean;  // requiere icon; label pasa a aria-label
+  disabled?: boolean;
+}
+```
+
+## Trampas
+
+- **Sin `active` igual dibuja el fondo blanco bajo el primer ítem**, aunque ninguno esté elegido.
+  Pásale siempre un valor inicial.
+- **Emite dos veces**: `tabChange` y `activeChange`. Con `active` + `activeChange` no hace falta `tabChange`.
+- **No implementa `ControlValueAccessor`**: no va con `formControlName`.
+- **Ocupa todo el ancho del padre.** Para que no se estire, envuélvelo con un `max-width`.
+- El indicador se mide con el DOM: si arranca oculto queda en ancho 0 hasta que algo cambie de tamaño.
+- **SSR / prerender** (desde la rama `ssr-fixes`, 19-10-2026): en el servidor no mide ni crea el `ResizeObserver`; el HTML sale sin indicador y al hidratar en el navegador se ubica. Antes rompía el prerender (`getBoundingClientRect is not a function`).
+- `iconOnly` sin `icon` no dibuja nada. El ícono mide 20 px en todos los tamaños.
+- `disabled` es por ítem; no hay `disabled` del control entero.
+- **Es un `radiogroup`, no pestañas** (04-10-2026): elige un valor, así que cada ítem es
+  `role="radio"` con `aria-checked`. Un solo tab stop (el elegido); ← → ↑ ↓ mueven **y eligen**
+  (patrón de radio, con vuelta al inicio y saltando los deshabilitados), Home/End van a los
+  extremos. Cada flecha emite `tabChange`: con 2-4 opciones está bien, pero si elegir dispara una
+  carga pesada, pensarlo. Pásale `ariaLabel` («Tipo de entrega») para que el grupo tenga nombre.
+- Los tamaños son extensión de SUI: la guía tiene uno solo.
+- La versión redondeada de la guía es `shape="rounded"`; el componente de Figma (2604:114) solo trae la base.
+
+## Bien y mal
+
+Vista cuadrícula / lista
+
+```html
+<!-- ❌ mal: `small` en la computadora; D16 no usa `small` (pages/products/products.html:83) -->
+<sui-segmented-control size={bp.isMobile() ? '2xlarge' : 'small'}
+  tabs={viewToggleItems} active={viewMode} onActiveChange={(e) => (viewMode = e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control size={bp.tactil() ? '2xlarge' : 'medium'}
+  tabs={viewToggleItems} active={viewMode} onActiveChange={(e) => (viewMode = e.detail)} />
+```
+
+Modo del servicio en el panel
+
+```html
+<!-- ❌ mal: `large` (32) en el teléfono no llega a 44 (master-settings.html:224, tallaServicio en master-settings.ts:452) -->
+<sui-segmented-control size={bp.isMobile() ? 'large' : 'medium'}
+  aria-label="Cómo se cobra la tarifa de servicio"
+  tabs={MODOS_SERVICIO} active={borrador().servicioModo} onTabChange={(e) => setModoServicio(e.detail)} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control size={bp.tactil() ? '2xlarge' : 'medium'}
+  aria-label="Cómo se cobra la tarifa de servicio"
+  tabs={MODOS_SERVICIO} active={borrador().servicioModo} onTabChange={(e) => setModoServicio(e.detail)} />
+```
+
+Rol a invitar
+
+```html
+<!-- ❌ mal: sin `size` ni `ariaLabel`: 28 px también en el teléfono y el grupo sin nombre (pages/super-admin/master-roles/master-roles.html:48) -->
+<sui-segmented-control tabs={rolesCiudad} active={rolStaff()} onActiveChange={(e) => rolStaff.set($any(e.detail))} />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control size={bp.tactil() ? '2xlarge' : 'medium'} aria-label="Rol"
+  tabs={rolesCiudad} active={rolStaff()} onActiveChange={(e) => rolStaff.set($any(e.detail))} />
+```
+
+## Ejemplo
+
+```html
+<div style="max-width: 320px">
+  <sui-segmented-control
+    size={bp.tactil() ? '2xlarge' : 'medium'}
+    tabs={[{ value: 'grid', label: 'Vista cuadrícula', icon: 'layout-grid-line', iconOnly: true },
+             { value: 'list', label: 'Vista lista', icon: 'list-unordered', iconOnly: true }]}
+    active={vista} onActiveChange={(e) => (vista = e.detail)} />
+</div>
+```