@ajuarezso/sui-design-system 0.21.0 → 0.23.0

package/docs/sui-progress-bar/README.md

@@ -96,7 +96,7 @@ readonly bp = inject(BreakpointsService); // master-pedidos: src/app/services/br
 ```
 
 ```html
-<sui-progress-bar [value]="progreso()" [size]="bp.isMobile() ? 'medium' : 'small'" ariaLabel="Subiendo la foto" />
+<sui-progress-bar [value]="progreso()" [size]="bp.isMobile() ? 'large' : 'medium'" ariaLabel="Subiendo la foto" />
 ```
 
 ## API
@@ -110,6 +110,7 @@ readonly bp = inject(BreakpointsService); // master-pedidos: src/app/services/br
 | `color` | `'blue' \| 'green' \| 'orange' \| 'red' \| 'purple'` | `'blue'` |
 | `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
 | `ariaLabel` | `string \| null` | `null` |
+| `ariaLabelledby` | `string \| null` | `null` |
 
 Outputs: ninguno.
 <!-- api:fin -->
@@ -122,7 +123,8 @@ Outputs: ninguno.
   este proyecto es naranja).
 - El ancho es el 100 % del padre: dentro de un flex, dale `flex: 1` o un ancho.
 - Lleva `role="progressbar"` con `aria-valuenow`; la animación se apaga con
-  `prefers-reduced-motion`.
+  `prefers-reduced-motion`. Nombre: `ariaLabel`, o `ariaLabelledby` (id de un texto visible), y si
+  no hay ninguno se llama «Progreso» (04-10-2026: antes quedaba sin nombre).
 
 ## Ejemplo
 

package/docs/sui-progress-bar-label/README.md

@@ -123,6 +123,8 @@ Output: `(linkClick)`. Con `link` de texto el `<a>` no navega y solo emite; con
 - El link se pinta en el azul de información, no en el naranja de la marca.
 - Si no hay `title` y `percentage` es `false`, no se dibuja la fila de arriba.
 - Tiene el strip del `title` nativo: no aparece el tooltip gris del navegador.
+- El `title` visible nombra la barra (`aria-labelledby`, 04-10-2026); sin título (`on-right`) y sin
+  `ariaLabel` se anuncia «Progreso».
 
 ## Ejemplo
 

package/docs/sui-radio/README.md

@@ -19,8 +19,8 @@ Va dentro de un `sui-radio-group`, que es el que hace que elegir una desmarque l
 
 - 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). Crece con `bp.controlSize()`; el
-  radio-label no tiene `size`.
+  (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`.
@@ -57,10 +57,10 @@ Regla corta: **lista densa de texto → radio-label · con peso o en el teléfon
 **Usos de hoy que rompen la regla:**
 
 - **1 radio nativo → `sui-radio-card type="basic"`:**
-  `pages/driver/driver-order-detail/driver-order-detail.html:812` (motivos de cancelación del
+  `pages/driver/driver-order-detail/driver-order-detail.html:844` (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:566`.
-- **1 suelto que se puede desincronizar:** `pages/super-admin/master-settings/master-settings.html:105`
+  así: `pages/orders/orders.html:567`.
+- **1 suelto que se puede desincronizar:** `pages/super-admin/master-settings/master-settings.html:107`
   (categoría por defecto). Usa `[standaloneChecked]` + `$event && …`: al tocar el que ya está
   elegido, el círculo se apaga por dentro pero el padre sigue diciendo que es el elegido. Va en
   un `sui-radio-group` con `[ngModel]`.
@@ -96,6 +96,7 @@ El más grande mide 28 px: el área táctil de 44 px la tiene que dar la fila.
 | `size` | `'medium' \| 'large' \| 'xlarge'` | `'medium'` |
 | `value` | `SuiRadioValue` | `null` |
 | `disabled` | `boolean` | `false` |
+| `focusable` | `boolean` | `true` |
 | `standaloneChecked` · model, `[(standaloneChecked)]` | `boolean` | `false` |
 
 Outputs: ninguno.
@@ -117,8 +118,14 @@ y proyecta los radios (`sui-radio`, `sui-radio-label`, `sui-radio-card`).
 - **`sui-radio-group` no tiene `value`**: se maneja con `[(ngModel)]` 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.
-- **Deshabilitar el control del grupo no deshabilita los radios** (`setDisabledState` no hace
-  nada): pasa `[disabled]` a cada uno.
+- **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, pon el texto en un `<label>` o usa `sui-radio-label`.

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

@@ -31,10 +31,11 @@ checkbox-card.**
 > 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 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **31
+> 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: 24 `bp.controlSize()`, 4 `medium`, 1
-> `xlarge` fijo, 1 dinámico, 1 sin `size`. 6 con `sublabel`, 3 con `disabled`, 1 con `badge`.
+> `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)
 
@@ -68,13 +69,10 @@ checkbox-card.**
 | `large` (24) | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
 | `medium` (20, default) | No usar en pantallas nuevas. | canon (aprobado por el dueño, 28-09-2026) |
 
-**Usos de hoy que rompen las reglas:**
+**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.
 
-- **5 sin el size del breakpoint**: `components/por-cobrar-card/por-cobrar-card.html:38` y `:48`,
-  `pages/driver/driver-dashboard/driver-dashboard.html:581`,
-  `pages/super-admin/master-orders/master-orders.html:720` (los cuatro en `medium`) y
-  `pages/mi-negocio/mi-negocio.html:22` (sin `size`). Además `pages/customer/mandadito/mandadito.html:30`
-  va en `xlarge` fijo (en web debería ser `large`).
 - **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
@@ -82,8 +80,9 @@ checkbox-card.**
 
 ## Tamaño en mobile y en web
 
-La card entera es el área táctil (≥ 72 de alto con descripción, 16 de padding): llega al piso de
-44 sola. El `size` cambia solo el radio.
+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 |
 |---|---|---|
@@ -141,7 +140,8 @@ Implementa `ControlValueAccessor` (el valor del form es el `value` elegido). Den
   `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.
+  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).
 - `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.
 

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

@@ -21,7 +21,8 @@ franjas horarias del checkout, tipo de documento. Toda la fila se toca. Va dentr
   usa la app para método de pago, tipo de entrega y modo de asignación.
 - **Una lista de motivos que se toca en el teléfono**: la app ya resolvió ese caso con
   `sui-radio-card type="basic"` y `bp.controlSize()` (motivos de cancelación del local,
-  `pages/orders/orders.html:566`). El radio-label no tiene `size` y en mobile queda chico.
+  `pages/orders/orders.html:567`). La tarjeta da el área táctil; un radio-label sin descripción
+  mide 28 px de alto aun en `xlarge`.
 - Más de ~6 opciones: `sui-select`.
 - Varias a la vez: `sui-checkbox-label`.
 - Prender algo al instante: `sui-switch-label`.
@@ -51,16 +52,17 @@ o con peso → radio-card · muchas → select.**
 | `link` | «Ver detalle» que no elige la opción. Solo se ve con `description`. | según la guía del DS |
 | `flip` | Círculo a la derecha en listas de opciones tipo hoja (sheet) y de ajustes, donde el texto es lo que se lee y el círculo es el indicador, como las franjas del checkout. En formularios, a la izquierda. | canon (aprobado por el dueño, 03-10-2026) |
 | `disabled` | La opción existe pero no aplica (franja ya llena). | según la guía del DS |
-| `size` | `medium` (default, Figma): círculo 20, label 14/20. `large`: círculo 24, label 16/24. `xlarge`: círculo 28, label 16/24. En large y xlarge el sublabel y la descripción pasan a 14/20, el badge sin `size` propio sube a `medium` / `large` y el link a `medium`. Se usa con `[size]="bp.controlSize()"`. | `medium`: según la guía del DS · `large` / `xlarge`: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
+| `size` | `medium` (default, Figma): círculo 20, label 14/20. `large`: círculo 24, label 16/24. `xlarge`: círculo 28, label 16/24. En large y xlarge el sublabel y la descripción se quedan en 12/16 (canon, dueño 04-10-2026); el badge sin `size` propio sube a `medium` / `large` y el link a `medium`. Se usa con `[size]="bp.controlSize()"`. | `medium`: según la guía del DS · `large` / `xlarge`: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
 
 **Usos de hoy:**
 
-- **1 radio nativo de motivos:** `pages/driver/driver-order-detail/driver-order-detail.html:812`
+- **1 radio nativo de motivos:** `pages/driver/driver-order-detail/driver-order-detail.html:844`
   (motivos de cancelación del repartidor). Por la pantalla hermana va a `sui-radio-card
-  type="basic"` como `pages/orders/orders.html:566`, no a este componente.
-- El único uso actual, `pages/customer/checkout/checkout.html:480`, controla la selección con
+  type="basic"` como `pages/orders/orders.html:567`, no a este componente.
+- El único uso actual, `pages/customer/checkout/checkout.html:473`, controla la selección con
   `[checked]` + `(selected)` por fila, sin `sui-radio-group`. Funciona porque el padre fija el
-  estado, pero no se enchufa a un formulario.
+  estado, pero no se enchufa a un formulario. **Va sin `size`** (`medium`, círculo de 20 px) en
+  una hoja del checkout del cliente, que se usa en el teléfono: rompe la tabla de abajo.
 
 ## Tamaño en mobile y en web
 
@@ -72,17 +74,36 @@ dueño, 28-09-2026).
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| opciones de un formulario o una hoja (franjas horarias, método de entrega) | `xlarge` (círculo 28, label 16/24) | `large` (círculo 24, label 16/24) | canon (aprobado por el dueño, 03-10-2026) |
+| opciones de un formulario o una hoja (franjas horarias, método de entrega) | `2xlarge` (fila de 44 como mínimo, círculo 28, label 16/24) | `large` (círculo 24, label 16/24) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono; web: canon (aprobado por el dueño, 03-10-2026) |
 | lista densa de desktop | — | `medium` (círculo 20, label 14/20) | propuesta, falta aprobación |
 | opciones con mucho contexto cada una | `sui-radio-card` con `bp.controlSize()` | `sui-radio-card` con `bp.controlSize()` | propuesta |
 
 ```html
-<sui-radio-label value="recojo" [size]="bp.controlSize()" label="Recojo en tienda" />
+<sui-radio-label value="recojo" [size]="bp.isMobile() ? '2xlarge' : 'large'" label="Recojo en tienda" />
 ```
 
+| size | círculo | label | sublabel / descripción | alto de la fila sin descripción |
+|---|---|---|---|---|
+| `medium` (default, Figma) | 20 | 14/20 | 12/16 | 20 |
+| `large` | 24 | 16/24 | 12/16 | 24 |
+| `xlarge` | 28 | 16/24 | 12/16 | 28 |
+| `2xlarge` | 28 | 16/24 | 12/16 | **44** (`min-height`) |
+
+`2xlarge` (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono) es la fila del teléfono: mismo círculo de 28 y mismo label que `xlarge`,
+pero la fila mide 44 como mínimo con todo centrado en vertical, y el texto secundario se queda en 12
+(regla del 03-10). Con descripción la fila ya pasa de 44 y vuelve a alinearse arriba.
+
 Toda la fila se toca (el host recibe el click). Con `xlarge` el contenido baja 2 px para que la
 línea del label (24) quede centrada con el círculo (28).
 
+Sin descripción, la fila en `xlarge` mide 28 px (lo que mide el círculo): en el teléfono va
+`2xlarge`, que la lleva a 44. Con descripción llega sola: 2 + 24 (label) + 4 + 16 (descripción) = 46 px
+en `xlarge` y en `2xlarge`.
+
+**Regla de tamaños aplicada (canon, dueño 04-10-2026):** en `large` y `xlarge` el label sube a
+16/24 y el sublabel y la descripción se quedan en 12/16, igual que `sui-switch-label`. Antes subían
+a 14/20. El badge y el link siguen creciendo con el size.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -103,7 +124,7 @@ línea del label (24) quede centrada con el círculo (28).
 | `description` | `string \| null` | `null` |
 | `badge` | `SuiBadgeConfig \| string \| null` | `null` |
 | `link` | `SuiLinkConfig \| string \| null` | `null` |
-| `size` | `'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `size` | `'medium' \| 'large' \| 'xlarge' \| '2xlarge'` | `'medium'` |
 | `flip` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
 | `checked` · model, `[(checked)]` | `boolean` | `false` |
@@ -118,11 +139,15 @@ línea del label (24) quede centrada con el círculo (28).
 
 - **No implementa `ControlValueAccessor`.** El formulario se engancha al `sui-radio-group`, no a
   cada opción. Sin grupo, se maneja con `[(checked)]`.
-- **No tiene `size`**: el círculo mide 20 px siempre. Choca con la regla de controles grandes
-  (dueño, 28-09-2026) en mobile; si hace falta grande, `sui-radio-card`.
+- **`size` arranca en `medium`** (círculo de 20 px): sin `[size]="bp.controlSize()"` choca con la
+  regla de controles grandes (dueño, 28-09-2026) en mobile.
 - **Tocar una opción ya elegida no la desmarca** (bien, es un radio). Tocar el link tampoco la elige.
 - **`link` solo se dibuja con `description`.**
 - El `sui-radio` de adentro no recibe clics (`pointer-events: none`): no le pongas handlers.
+  Tampoco foco ni lector: va con `[focusable]="false"` y `aria-hidden`, y el radio es el host,
+  con nombre = `label` y descripción = `description`. Hasta el 04-10-2026 cada opción eran dos
+  paradas de Tab y dos radios anidados.
+- En `sui-radio-group`, un solo tab stop y flechas ↑ ↓ ← → (revisión 04-10-2026).
 - El badge con string sale naranja; en `sui-radio-card` el default es azul.
 - `flip` usa CSS `order`: el orden para lector de pantalla no cambia.
 

package/docs/sui-rating/README.md

@@ -50,8 +50,8 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
 | appearance | cuándo | ejemplo real | fuente |
 |---|---|---|---|
 | `inline` (default), `readonly` | **Mostrar** una nota: la fila de estrellas pelada. | `components/ratings-detail/ratings-detail.html:31` (la nota del local) | según la guía del DS (ejemplo «Rating Review») |
-| `inline`, interactivo | **A discutir.** Pedir la nota en grande (`xlarge`). Cada estrella mide 28 px, por debajo de los 44 que pide un dedo. | `pages/customer/rate-order/rate-order.html:93` y `:166` | propuesta, falta aprobación |
-| `bar` | **Pedir** una nota en el celular: celdas de 64 × 36 fáciles de tocar. | `components/rate-entity-card/rate-entity-card.html:40` | según la guía del DS (ejemplo «Rating Bar») |
+| `inline`, interactivo | Pedir la nota en grande: en el teléfono con `size="2xlarge"` (estrellas de 32 en botones de 44 × 44); `xlarge` (28 tocables) queda para web. | `pages/customer/rate-order/rate-order.html:93` y `:167` (hoy en `xlarge`) | tamaño: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono; el «cuándo inline vs bar» sigue como propuesta |
+| `bar` | **Pedir** una nota en el celular: con `size="2xlarge"` las celdas miden 64 × 44 (36 en los demás sizes). | `components/rate-entity-card/rate-entity-card.html:40` | según la guía del DS (ejemplo «Rating Bar») |
 | `cell` | **No usar** hoy (ver abajo). | — | según la guía del DS (ejemplo «Rating Cell») |
 | `bar-area` | **No usar** hoy (ver abajo). | — | según la guía del DS (ejemplo «Rating Bar With Textarea») |
 
@@ -99,7 +99,7 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
 - **1 rating usado como ícono** (`type="heart"` con `max=1` para los favoritos):
   `components/ratings-detail/ratings-detail.html:45`. Va `sui-icon name="heart-3-fill"`.
 - **A discutir, 2 `inline` interactivos de 28 px** como input:
-  `pages/customer/rate-order/rate-order.html:93` y `:166`. Alternativa: `appearance="bar"`.
+  `pages/customer/rate-order/rate-order.html:93` y `:167`. Alternativa: `appearance="bar"`.
 
 ## No usar: por qué no hoy y cuándo sí
 
@@ -125,7 +125,7 @@ de la app.
 | Mostrar en una fila o lista | `medium` (20) | `small` (16) | propuesta, falta aprobación |
 | Mostrar en perfil o ficha | `large` (24) | `medium` (20) | propuesta, falta aprobación |
 | La nota grande de un resumen | `xlarge` (28) | `large` (24) | propuesta, falta aprobación |
-| Pedir una nota | `appearance="bar"` (celdas de 64 × 36) | `bar`, o `inline` `large` con mouse | propuesta, falta aprobación |
+| Pedir una nota | `2xlarge`: `inline` (estrellas de 32 en botones de 44 × 44) o `bar` (celdas de 64 × 44) | `bar` (64 × 36), o `inline` `large` con mouse | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono; web: propuesta |
 
 ```ts
 readonly bp = inject(BreakpointsService); // master-pedidos: src/app/services/breakpoints.service.ts
@@ -136,8 +136,23 @@ readonly bp = inject(BreakpointsService); // master-pedidos: src/app/services/br
   [size]="bp.isMobile() ? 'medium' : 'small'" ariaLabel="Nota del local" />
 ```
 
-En `bar` el `size` no cuenta (íconos fijos de 20) y en `cell` tampoco (32): el tamaño por
-plataforma solo se elige en `inline`.
+En `bar` el `size` no cuenta salvo `2xlarge` (celda de 44 de alto en vez de 36; íconos fijos de 20
+y número en 16), y en `cell` tampoco (32): el resto del tamaño por plataforma se elige en `inline`.
+
+| size | `inline`: glyph · lo que se toca | `bar`: alto de celda |
+|---|---|---|
+| `small` | 16 · 16 | 36 |
+| `medium` (default) | 20 · 20 | 36 |
+| `large` | 24 · 24 | 36 |
+| `xlarge` | 28 · 28 | 36 |
+| `2xlarge` | 32 · **44 × 44** (padding 6, sin gap entre estrellas) | **44** |
+
+`2xlarge` (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono) es para **pedir** la nota en el teléfono. Para mostrar una
+nota de solo lectura sigue `medium`/`large`.
+
+Área táctil de cada forma de **pedir** la nota, medida en el `.scss`: `inline` `xlarge` 28 px
+(el botón es el ícono, sin padding) y `2xlarge` 44 px (32 + 6 + 6); `bar` 36 px (8 + 20 + 8 de cada
+celda) y en `2xlarge` 44 (12 + 20 + 12); `cell` 58 px (12 + 32 + 12 de padding y 2 de borde).
 
 ## API
 
@@ -150,7 +165,7 @@ plataforma solo se elige en `inline`.
 | `type` | `'star' \| 'heart' \| 'emoji' \| 'number'` | `'star'` |
 | `value` · model, `[(value)]` | `number` | `0` |
 | `max` | `number` | `5` |
-| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge' \| '2xlarge'` | `'medium'` |
 | `readonly` | `boolean` | `false` |
 | `halfStep` | `boolean` | `false` |
 | `showValue` | `boolean` | `false` |
@@ -184,8 +199,12 @@ Implementa `ControlValueAccessor` sobre `value` (sirve con `formControlName`). `
   estrellas que se llena.
 - `emoji` y `number` **solo se dibujan en `bar`**.
 - `(valueChange)` emite de 1 a `max`, nunca 0; volver a tocar la misma no la quita.
-- El host lleva `role="radiogroup"` y `aria-label`: si la pantalla ya escribe la nota al lado,
-  ponle `aria-hidden="true"` para que no se lea dos veces.
+- **Roles (04-10-2026):** con `readonly` es una nota, no una pregunta: el host es `role="img"` con
+  «Calificación: 4,5 de 5» (más «, 120 calificaciones» si hay `reviewCount`), sin radios adentro; con
+  `reviewLink` pasa a `role="group"` para que el link siga alcanzable. Interactivo es
+  `role="radiogroup"` con un solo tab stop: → ↓ suben la nota, ← ↑ la bajan (como un radio
+  nativo), Home/End van a 1 y al máximo, sin vuelta. Cada flecha elige y emite `valueChange`. Si
+  la pantalla ya escribe la nota al lado, ponle `aria-hidden="true"` para que no se lea dos veces.
 
 ## Ejemplo
 

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

@@ -39,7 +39,7 @@ Regla corta: **hoy, siempre `sui-textarea`.**
 | `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 («Header», «14px» por default). | 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
@@ -68,7 +68,7 @@ mobile**. Si alguna vez se usa, que sea en el panel web.
 | `editable` | `boolean` | `false` |
 | `placeholder` | `string` | `'Escribe algo…'` |
 | `value` · model, `[(value)]` | `string` | `''` |
-| `headingLabel` | `string` | `'Header'` |
+| `headingLabel` | `string` | `'Título'` |
 | `fontSizeLabel` | `string` | `'14px'` |
 
 | output | payload |
@@ -104,7 +104,7 @@ Sub-componente: `sui-rich-editor-item` (cada botón de la barra).
   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]="true"` no hay dónde escribir.
-- Labels por default en inglés o técnicos («Header», «14px»).
+- 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).
 
 ## Ejemplo
 

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

@@ -17,12 +17,14 @@ cuadrícula o lista en el catálogo, el local cuyo horario estás viendo, el rol
 **No lo uses** para:
 
 - Navegar entre secciones de contenido distinto: `sui-tab-menu-horizontal`.
-- Una fila de filtros con muchas opciones o que scrollea: `sui-tab-chips`.
+- 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: **2-4 modos de la misma vista, efecto inmediato → segmented · secciones → tab menu · filtros → tab-chips.**
+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
 
@@ -55,40 +57,46 @@ Regla corta: **2-4 modos de la misma vista, efecto inmediato → segmented · se
 **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:296` (modo de envío: «Por distancia» /
-  «Precio único») y `:329` («Por calle» / «En línea recta»). La guía dice que se aplica de
+  `pages/super-admin/master-settings/master-settings.html:303` (modo de envío: «Por distancia» /
+  «Precio único») y `:336` («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:47`
   («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** (la propuesta deja `small` solo para íconos): `master-settings.html:296`
-  y `:329`. El tercero en `small`, `pages/products/products.html:80`, está bien: solo íconos.
+- **2 en `small` con texto** (la propuesta deja `small` solo para íconos): `master-settings.html:303`
+  y `:336`. El tercero en `small`, `pages/products/products.html:81`, está bien: solo íconos.
 - **5 sin tamaño por plataforma** (todos fijos): ninguno cambia a `xlarge` en mobile. Ejemplo:
-  `pages/driver/driver-schedule/driver-schedule.html:32` (`size="medium"` en una pantalla del
+  `pages/driver/driver-schedule/driver-schedule.html:30` (`size="medium"` en una pantalla del
   repartidor, que se usa en el teléfono).
 
 ## Tamaño en mobile y en web
 
-Alto de cada segmento: `small` 28 px, `medium` 28 px, `large` 32 px, `xlarge` 40 px (el control
-suma 8 px de borde interno).
+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.
 
-| uso | mobile | web |
-|---|---|---|
-| modos con texto (local del horario, rol) | `xlarge` (segmento de 40 px) | `medium` |
-| solo íconos en una barra (cuadrícula / lista) | `xlarge` | `small` |
+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 cambia y queda para las pantallas que
+ya lo usan.
+
+| 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) | `small` | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 
 ```html
-<sui-segmented-control [size]="bp.isMobile() ? 'xlarge' : 'medium'" … />
+<sui-segmented-control [size]="bp.isMobile() ? '2xlarge' : 'medium'" … />
 ```
 
-El más grande llega a 40 px por segmento: queda 4 px corto de los 44 px de área táctil. Es el
-mejor disponible para mobile.
-
 ## «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 `xlarge` no entra |
+| `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` |
 
@@ -101,7 +109,8 @@ mejor disponible para mobile.
 |---|---|---|
 | `tabs` | `SuiSegmentedControlItem<T>[]` | — (requerido) |
 | `active` · model, `[(active)]` | `T` | `undefined` |
-| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
+| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge' \| '2xlarge'` | `'medium'` |
+| `ariaLabel` | `string \| null` | `null` |
 
 | output | payload |
 |---|---|
@@ -128,6 +137,11 @@ interface SuiSegmentedControlItem<T = string> {
 - El indicador se mide con el DOM: si arranca oculto queda en ancho 0 hasta que algo cambie de tamaño.
 - `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. Su versión redondeada (`Rounded`)
   no existe en SUI.
 

package/docs/sui-select/README.md

@@ -18,7 +18,8 @@ distrito, repartidor, categoría, plan) o que tiene **más de 6 opciones fijas**
 
 - 2 a 6 opciones fijas dentro de un formulario: se ven todas de una con `sui-radio-label` (web) o
   `sui-radio-card` (mobile). Abrir un menú para elegir entre «Casa» y «Trabajo» es un toque de más.
-- 2 a 4 modos de la vista que se aplican al tocar (Hoy · Semana · Mes): `sui-segmented-control`.
+- 2 a 4 modos, períodos o filtros fijos que se aplican al tocar (Hoy · Semana · Mes): `sui-segmented-control`.
+  Con 5 o más que se aplican al tocar: `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).
 - **Buscar** dentro de la lista: `sui-select` **no tiene buscador**. Con 40 distritos se scrollea.
 - Elegir **varias**: no es múltiple. Varias opciones fijas → casillas; valores libres → `sui-tag-input`.
 - Una lista con foto o bandera por opción: las opciones solo muestran texto (ver «Trampas»).
@@ -32,70 +33,73 @@ Regla corta: **sale de datos o son más de 6 → select · 2–6 fijas → radio
 > variantes que en SUI son componentes aparte: `compact` (`sui-compact-select`), `inline`
 > (`sui-inline-select`) y `compactForInput` (`sui-compact-select-for-input`). No dice cuándo va cada una.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
-> `master-ejercicios`): **57 usos en 26 archivos**. Todos `type="basic"` y sin ícono. Tamaños:
-> 39 sin `size` (`medium`), 11 `large`, 3 `bp.isMobile() ? 'large' : 'small'`, 2 `medium`,
-> 1 `small`, 1 `bp.controlSize()`. 29 pasan `placeholder`.
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`, más
+> `master-ejercicios`): **54 usos en 26 archivos**. Todos `type="basic"` y sin ícono. Tamaños:
+> 23 `bp.isMobile() ? 'large' : 'medium'`, 13 sin `size` (`medium`), 11 `large`,
+> 3 `bp.isMobile() ? 'large' : 'small'`, 2 `medium`, 1 `small`, 1 `bp.controlSize()`. Los 54 pasan
+> `placeholder` (46 «Elige…»; los 8 restantes son filtros sin label: «Filtrar», «Rol», «Estado»…).
 
 ### Qué elegir según las opciones
 
 | caso | componente | fuente |
 |---|---|---|
 | La lista sale de datos (ubigeo, repartidores, categorías, planes) | `sui-select` | según la guía del DS (elegir una opción de un menú) |
-| Más de ~6 opciones fijas | `sui-select` | canon (README de `sui-radio`, aprobado 03-10-2026) |
+| Más de ~6 opciones fijas | `sui-select` | derivado del README de `sui-radio` («más de ~6 → select»), falta confirmación |
 | 2 a 6 opciones fijas en un formulario | `sui-radio-label` / `sui-radio-card` | propuesta, falta aprobación (sale del umbral de `sui-radio`) |
-| 2 a 4 modos que se aplican al instante | `sui-segmented-control` | canon (README de `sui-segmented-control`, aprobado 03-10-2026) |
+| 2 a 4 modos que se aplican al instante | `sui-segmented-control` | según la guía del DS («aplicarla de inmediato», ver README de `sui-segmented-control`); el tope de 4 es propuesta |
 | Filtro de una barra con 5 o más opciones | `sui-select` sin label (o `sui-compact-select` en web) | propuesta, falta aprobación |
 
 **Candidatos de hoy** (no rompen nada; se verían mejor con radios o segmented):
 
-- **6 selects con 2 opciones fijas**: `components/add-product-modal/add-product-modal.html:246`,
-  `pages/drivers/drivers.html:373` y `pages/drivers/add-driver/add-driver.html:111` («Tipo de pago»),
-  `pages/super-admin/master-gastos/master-gastos.html:185` y `:200`,
-  `pages/super-admin/master-sonidos-push/master-sonidos-push.html:85`.
-- **15 con 3 a 6 opciones fijas en un formulario**: `components/address-form-modal/address-form-modal.html:11`
-  («Etiqueta»), `pages/customer/profile/profile.html:249` («Género»), `pages/drivers/drivers.html:359`
-  («Tipo de vehículo»), `pages/discounts/discounts.html:139`.
-- **2 filtros de período de 3 opciones** → segmented: `pages/overview/overview.html:46`,
-  `pages/discounts/discounts.html:48`.
+- **5 selects con 2 opciones fijas**: `components/add-product-modal/add-product-modal.html:255`,
+  `pages/drivers/drivers.html:376` y `pages/drivers/add-driver/add-driver.html:111` («Tipo de pago»),
+  `pages/super-admin/master-gastos/master-gastos.html:186` («Estado») y `:203` («Moneda»).
+- **Unos 15 con 3 a 6 opciones fijas en un formulario** (cifra aproximada, no recontada el 04-10): `components/address-form-modal/address-form-modal.html:11`
+  («Etiqueta»), `pages/customer/profile/profile.html:252` («Género»), `pages/drivers/drivers.html:360`
+  («Tipo de vehículo»), `pages/discounts/discounts.html:142`,
+  `pages/super-admin/master-sonidos-push/master-sonidos-push.html:85` (6 opciones).
+- **2 filtros de período de 3 opciones** → `sui-segmented-control`: `pages/overview/overview.html:44`,
+  `pages/discounts/discounts.html:49`. Decidido (canon, dueño 04-10-2026): período o filtro de 2 a 4
+  opciones excluyentes → segmented; 5 o más o que deslizan → tab-chips. Los README de tab-chips,
+  datepicker, period-range y date-selector ya dicen lo mismo.
 
 ### `type`, `leadingIcon`, `imageUrl`, `flag`, `badge`
 
 | prop | cuándo | fuente |
 |---|---|---|
 | `type="basic"` (default) sin ícono | Todo select de la app hoy. | según la guía del DS |
-| `type="avatar"` + `imageUrl` | Elegir un **repartidor**: la foto de quien quedó elegido en el campo. Hoy `pages/orders/orders.html:256` muestra solo el nombre. | según la guía del DS (ejemplo «User»); el caso es propuesta |
+| `type="avatar"` + `imageUrl` | Elegir un **repartidor**: la foto de quien quedó elegido en el campo. Hoy `pages/orders/orders.html:257` muestra solo el nombre. | según la guía del DS (ejemplo «User»); el caso es propuesta |
 | `type="provider"` + `imageUrl` | Método de pago con logo (Yape, Plin). | según la guía del DS (ejemplo «Payment Method»); el caso es propuesta |
 | `leadingIcon` (`true` o nombre RemixIcon) | Un ícono que ayuda a reconocer el campo en un formulario largo. Hoy sin caso. | según la guía del DS (ejemplo «Icons») |
 | `type="country"` + `flag` | No usar hoy: todo es Perú. | según la guía del DS (ejemplo «Country») |
-| `type="brand"` / `"company"` | No usar hoy. | — |
-| `badge` | No usar hoy. | — |
+| `type="brand"` / `"company"` | No usar hoy. | propuesta, falta aprobación |
+| `badge` | No usar hoy. | propuesta, falta aprobación |
 
 ### Las piezas
 
 | prop | cuándo | fuente |
 |---|---|---|
 | `label` | Siempre en formularios. Sin label solo en un filtro de barra donde el valor se explica solo («Todos los roles»). | según la guía del DS (ejemplo con label y hint) |
-| `placeholder` | **Siempre**, en imperativo con tuteo: «Elige el motivo», «Elige tu distrito». El default es «Seleccionar...». | canon (CANON-SUI §5.3) |
-| `required` · `sublabel` · `tooltip` · `hint` | Igual que `sui-input`: asterisco, «(Opcional)» con paréntesis, aclaración, ayuda de una línea. Hoy 1 sin paréntesis: `pages/customer/profile/profile.html:249`. | según la guía del DS |
+| `placeholder` | **Siempre**, en imperativo con tuteo: «Elige…» o «Elige el distrito» cuando el sustantivo ayuda. El default genérico es «Elige…» (04-10-2026). | canon (CANON-SUI §5.7, decisión del dueño 03-10-2026) |
+| `required` · `sublabel` · `tooltip` · `hint` | Igual que `sui-input`: asterisco, «(Opcional)» con paréntesis, aclaración, ayuda de una línea. | según la guía del DS |
 | `error` + `errorMessage` | No eligió en un campo obligatorio: «Elige tu distrito». | según la guía del DS |
-| `disabled` | Selects en cascada: provincia hasta elegir departamento, distrito hasta elegir provincia. | según la guía del DS (ejemplo deshabilitado); el caso ya es práctica (`components/address-form-modal/address-form-modal.html:87`) |
+| `disabled` | Selects en cascada: provincia hasta elegir departamento, distrito hasta elegir provincia. | según la guía del DS (ejemplo deshabilitado); el caso ya es práctica (`components/address-form-modal/address-form-modal.html:97`) |
 | `options` | `SuiSelectOption<T>[]`: `{ value, label, disabled? }`. `disabled` en la opción para lo que existe pero hoy no se puede elegir. | API |
 
-**Usos de hoy que rompen la regla:**
-
-- **28 sin `placeholder`** muestran «Seleccionar...» si arrancan vacíos.
-- **16 placeholders «Seleccionar…» o «Selecciona…»** (y 4 que ya dicen «Elige…») → «Elige…»: «Seleccionar departamento»
-  (`components/address-form-modal/address-form-modal.html:77`), «Seleccionar tipo»,
-  «Selecciona una categoría».
+**Usos de hoy que rompen la regla:** 0 sin `placeholder` y 0 «Seleccionar…» (medido el
+04-10-2026; el 03-10 eran 28 y 16, ya corregidos en la app). Los 8 que no dicen «Elige…» son
+filtros sin label donde el placeholder hace de label («Rol», «Estado», «Período»).
 
 ## Tamaño en mobile y en web
 
 El campo sigue la escala del input y del botón (`large` 48 y `xlarge` 52 son extensión de SUI;
 la guía tiene `medium` 40, `small` 36 y `xsmall` 32). **La lista acompaña al campo**: las opciones
 miden 36 hasta `medium` (las de la guía), 44 en `large` y 48 en `xlarge`, y **en mobile (≤ 767 px)
-nunca bajan de 44**, sea cual sea el `size`. El texto de la opción queda en 14/20, el mismo del
-valor del campo.
+nunca bajan de 44**, sea cual sea el `size`. El texto de la opción es el mismo del valor del
+campo: 14/20 hasta `medium` y 16/24 en `large` y `xlarge`.
+
+En large y xlarge el texto sube a 16 px (regla del 03-10-2026). Vale para el valor, el placeholder
+y las opciones de la lista; el alto no cambia (las opciones bajan 2 de padding para seguir en 44/48).
 
 | size del campo | opción en web | opción en mobile | fuente |
 |---|---|---|---|
@@ -106,7 +110,7 @@ valor del campo.
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | campo de formulario | `large` (48) | `medium` (40) | propuesta, falta aprobación (igual que `sui-input`) |
-| filtro de una barra | `large` (48) | `small` (36) | propuesta (ya es práctica en `pages/orders/orders.html:256`) |
+| filtro de una barra | `large` (48) | `small` (36) | propuesta (ya es práctica en `pages/orders/orders.html:257`) |
 | dentro de una tabla densa | no aplica | `xsmall` (32) | según la guía del DS |
 | `xlarge` (52) | no usar | no usar | propuesta: queda más alto que el botón `large` del footer |
 
@@ -133,7 +137,7 @@ valor del campo.
 | input | tipo | default |
 |---|---|---|
 | `size` | `'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` |
-| `placeholder` | `string` | `'Seleccionar...'` |
+| `placeholder` | `string` | `'Elige…'` |
 | `options` | `SuiSelectOption<T>[]` | `[]` |
 | `disabled` | `boolean` | `false` |
 | `error` | `boolean` | `false` |
@@ -161,13 +165,16 @@ decoración propia del campo (gana sobre ícono, imagen y bandera).
 - **No busca y no es múltiple.** Con 40 opciones la lista se scrollea; con varias a elegir no sirve.
 - **Las opciones solo llevan texto**: `SuiSelectOption` no tiene ícono, foto ni bandera. El
   `type="avatar"` o `"country"` decora **el campo**, no la lista.
-- **El default del placeholder es «Seleccionar...»**: genérico y con `...`. Pásalo siempre.
+- **El default del placeholder es «Elige…»** (genérico, desde el 04-10-2026): pásalo con el sustantivo cuando ayude («Elige el distrito»).
 - El `valueChange` puede traer `null`: los usos de hoy hacen `$event ?? ''`.
 - `T` arranca en `any`: tipa las opciones (`SuiSelectOption<string>[]`) para no arrastrar `any`
   a la pantalla.
 - Con 44 px por opción en mobile el panel muestra unas 4 opciones antes de scrollear (el alto
   máximo del panel no cambió).
 - El label también abre la lista al tocarlo.
+- **Accesibilidad (04-10-2026)**: el combobox se nombra con el `label` (`aria-labelledby`; sin
+  label, con el placeholder), apunta al listbox abierto (`aria-controls`) y anuncia la opción
+  resaltada con las flechas (`aria-activedescendant`). Hint y error van en `aria-describedby`.
 
 ## Ejemplo