@ajuarezso/sui-design-system 0.22.0 → 0.23.0

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,43 +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.
 
-En large y xlarge 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.
+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.
 
-| 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` |
+**`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` |
 
@@ -104,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 |
 |---|---|
@@ -131,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,62 +33,62 @@ 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
 
@@ -109,7 +110,7 @@ y las opciones de la lista; el alto no cambia (las opciones bajan 2 de padding p
 | 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 |
 
@@ -136,7 +137,7 @@ y las opciones de la lista; el alto no cambia (las opciones bajan 2 de padding p
 | 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` |
@@ -164,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
 

package/docs/sui-sidebar/README.md

@@ -167,8 +167,7 @@ Slots: `[header-panel]` (debajo del header: el switcher), `[feature-card]` (al f
   cada layout llama `cerrarAlNavegar(menuAbierto, switcherAbierto)`
   (`core/services/cerrar-al-navegar.ts`). Canon: CANON-SUI §1.1.
 - **El buscador no filtra nada.** Solo expone `[(searchValue)]` y `(searchSubmitted)`; el layout
-  filtra los items (`master-layout.ts:125`). Y su placeholder por defecto es **`'Search...'`, en
-  inglés**: pásale siempre `{ placeholder: 'Buscar...' }`. (En `sui-topbar` el default sí es «Buscar...».)
+  filtra los items (`master-layout.ts:125`). Su placeholder por defecto es «Buscar…» (en español desde el 04-10-2026).
 - **`collapsed` no mira el viewport.** Con `collapsed` en `true`, el cajón de mobile también sale
   de 80 px. Condiciónalo: `[collapsed]="colapsado() && !bp.isMobile()"`.
 - Un item con `route` queda activo por `routerLinkActive` **y** por `activeRoute`; un item sin

package/docs/sui-slider/README.md

@@ -57,6 +57,8 @@ Regla corta: **escala con tope y la posición importa → slider · número exac
 
 - **1 con `amount` y `tooltip` a la vez:** `components/driver-coverage-modal/driver-coverage-modal.html:83`
   muestra «12 km» arriba y «12» flotando al arrastrar.
+- **El mismo uso va sin `size`** (`medium`: manija 16, riel 6) en una pantalla del repartidor, que
+  se usa en el teléfono: rompe la tabla de «Tamaño en mobile y en web» (`large` en mobile).
 - **1 nativo → `sui-slider`:** `components/image-cropper/image-cropper.html:57` (zoom del recorte).
   A discutir: es un control de herramienta sin label, con botones − y + al lado.
 
@@ -102,6 +104,8 @@ contenedor tiene que tener margen lateral.
 | `label` | `string` | `''` |
 | `sublabel` | `string` | `''` |
 | `amount` | `string \| null` | `null` |
+| `unit` | `string \| null` | `null` |
+| `ariaLabel` | `string \| null` | `null` |
 | `tooltip` | `boolean` | `false` |
 | `tooltipAlways` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
@@ -130,6 +134,9 @@ Implementa `ControlValueAccessor` **solo para `single`**.
 - Mide el ancho con el DOM: si arranca oculto (`display: none`, una pestaña cerrada) el arrastre
   calcula mal hasta que se muestra.
 - Las flechas, Inicio y Fin lo mueven con teclado.
+- **Accesibilidad (04-10-2026)**: el `label` visible nombra la manija; sin label, pasa `ariaLabel`.
+  El lector lee el valor con su unidad: en single, el texto de `amount` («12 km»); en range (o sin
+  `amount`), el número + `unit`. En range cada manija se anuncia «<label>, mínimo» / «…, máximo».
 
 ## Ejemplo
 

package/docs/sui-social-button/README.md

@@ -78,26 +78,38 @@ otra marca: hoy Google y Apple.
 
 ## Tamaño en mobile y en web
 
-En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más**. En web, con mouse,
-va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
-(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px):
-`[size]="bp.isMobile() ? 'large' : 'small'"`, 27 usos hoy en `master-pedidos` (16 `large`/`small`,
-9 `large`/`medium`, 2 `medium`/`xsmall`). Regla del dueño, 03-10-2026.
+En mobile se toca con el dedo: el área táctil tiene que medir **44 px o más** (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono). En web,
+con mouse, va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
+(`src/app/services/breakpoints.service.ts`, mobile = hasta 767 px).
+
+| size | alto | texto | solo ícono | fuente |
+|---|---|---|---|---|
+| `large` | 48 | 16 (Label/Medium) | 48 × 48 | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono. Size nuevo del 04-10-2026 |
+| `medium` (default) | 40 | 14 | 40 × 40 | Figma |
+
+**Por qué `large` = 48 y no 44**: el social-button es «el mismo botón con otro acabado» que
+`sui-button` y su único tamaño (40) es el `medium` de sui-button. El siguiente de esa escala es
+`large`, que mide 48: en el login queda del mismo alto que el CTA de al lado. El texto sube a 16
+(regla de tamaños del 03-10-2026); el logo sigue en 20.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| login con Google o Apple | 40 de alto, **ancho completo** (`width: 100%`) | 40 de alto, ancho del formulario | propuesta (es lo que ya hace `pages/auth/login/login.html` con `.auth-page__provider-btn`) |
+| login con Google o Apple | `large` (48), **ancho completo** (`width: 100%`) | `medium` (40), ancho del formulario | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (alto) · propuesta (ancho, es lo que ya hace `pages/auth/login/login.html` con `.auth-page__provider-btn`) |
+
+```html
+<sui-social-button brand="google" variantStyle="stroke" style="width: 100%"
+                   [size]="bp.isMobile() ? 'large' : 'medium'" (clicked)="loginGoogle()" />
+```
 
 **Ancho completo**: `width: 100%` en el host estira el botón (arreglado en el DS el 03-10-2026 con
 `flex: 1 1 auto` en `.sui-social-button__el`; antes el host medía 360 y el botón 193). Sin
-`width` sigue midiendo lo que su texto, como siempre. Con `onlyIcon` el cuadrado de 40 no se
+`width` sigue midiendo lo que su texto, como siempre. Con `onlyIcon` el cuadrado (40 o 48) no se
 estira nunca. El host sigue siendo `inline-flex`: para el ancho completo va `width: 100%`, no
 `display: block`. El `::ng-deep .sui-social-button__el { width: 100% }` de
 `pages/auth/auth-shared.scss` queda de más con la versión que trae el arreglo.
 
-No tiene input `size`: mide siempre 40 de alto. En mobile no llega a 44; lo compensa el ancho
-completo (el dedo no puede errarle) y 12 px de separación entre los dos botones. Si un día hace
-falta más alto, se pide al DS un `size`, no se estira con CSS (el logo y el padding no escalan).
+No se estira el alto con CSS desde afuera: el logo y el padding no escalan. Para el teléfono va
+`size="large"`.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -119,6 +131,7 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
 | `brand` | `'apple' \| 'x-twitter' \| 'google' \| 'facebook' \| 'linkedin' \| 'github' \| 'dropbox'` | — (requerido) |
 | `variantStyle` | `'filled' \| 'stroke'` | `'filled'` |
 | `onlyIcon` | `boolean` | `false` |
+| `size` | `'medium' \| 'large'` | `'medium'` |
 | `label` | `string \| null` | `null` |
 | `disabled` | `boolean` | `false` |
 | `loading` | `boolean` | `false` |
@@ -139,7 +152,7 @@ en la columna de la derecha, se usa (aprobado por el dueño, 03-10-2026).
   sale rojo lleno. Para el login de Google hay que pasar `variantStyle="stroke"`.
 - **El estilo se llama `variantStyle`** (en la guía, `mode`) y **X se llama `x-twitter`** (en la
   guía, `twitter`).
-- **No tiene `size`**: mide 40 px de alto. Con `width: 100%` en el host el botón se estira al ancho completo (arreglado en el DS el 03-10-2026; antes no estiraba). El de solo ícono queda en 40 × 40.
+- **`size` va de `medium` (40, default) a `large` (48, para el teléfono, 04-10-2026).** Con `width: 100%` en el host el botón se estira al ancho completo (arreglado en el DS el 03-10-2026; antes no estiraba). El de solo ícono queda en 40 × 40 (48 × 48 en `large`).
 - **`loading` también deshabilita**: no emite `(clicked)` mientras está en `true`.
 - El logo es una imagen distinta por tema: en modo oscuro, Apple, X y GitHub en `stroke` usan el
   logo blanco para no perderse. El componente lo resuelve solo leyendo `data-theme`.

package/docs/sui-status-badge/README.md

@@ -109,8 +109,11 @@ de la app.
 | `large` | 28 px | `label-sm` 14/20 | 16 (20) | 8 |
 | `xlarge` | 32 px | `label-md` 16/24 | 20 (24) | 8 |
 
-`medium` es el de Figma; `large` y `xlarge` son extensión SUI (03-10-2026). Siguen la escala del
-`sui-button` (28 · 32) y no la del `sui-badge` (24 · 28), porque el status-badge ya parte de 24.
+`medium` es el de Figma; `large` y `xlarge` son extensión SUI (03-10-2026). El **alto** sigue la
+escala del `sui-button` (28 · 32) y no la del `sui-badge` (24 · 28), porque el status-badge ya
+parte de 24. El **texto** sigue al `sui-badge` (14 en `large`, 16 en `xlarge`) y no la regla
+general del 03-10-2026 (16 en los dos): excepción documentada, canon (dueño, 04-10-2026) — la
+escala de badge (12/14/16) se mantiene. No es táctil: no tiene foco ni output.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
@@ -150,7 +153,8 @@ Slot: `<ng-content>` (el texto).
 - Tamaños: `medium` 24 (default, Figma), `large` 28 y `xlarge` 32 para mobile (extensión SUI, 03-10-2026). No hay uno más chico que 24.
 - **No pasa a mayúsculas** (el `sui-badge` small sí).
 - `icon` no hace nada con `withDot`.
-- El punto mide 6 px; el del `sui-badge with-dot`, 4 px. Son distintos a propósito.
+- El punto mide 6 px en `medium` y 8 en `large`/`xlarge`; el del `sui-badge with-dot`, 4 px. Son
+  distintos a propósito.
 - El host lleva `role="status"`: el lector de pantalla anuncia los cambios.
 
 ## Ejemplo