@ajuarezso/sui-design-system 0.24.1 → 0.25.0

package/docs/sui-pagination/README.md

@@ -46,30 +46,30 @@ Regla corta: **tabla con todo cargado en web → pagination · lista de Firestor
 
 | type | cuándo | fuente |
 |---|---|---|
-| `basic` (default) | El normal, debajo de una tabla con bordes. | según la guía del DS (es su default); el cuándo es propuesta |
-| `group` | Cuando la tabla va dentro de una card y la paginación se apoya en su borde: un solo bloque se lee como parte de la tabla. | según la guía del DS (la forma existe); el cuándo es propuesta |
+| `basic` (default) | El normal, debajo de una tabla con bordes. | según la guía del DS (es su default); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `group` | Cuando la tabla va dentro de una card y la paginación se apoya en su borde: un solo bloque se lee como parte de la tabla. | según la guía del DS (la forma existe); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `full-radius` | No: el resto de los controles de la app (botones, inputs) tienen esquinas de 8-10, no círculos. | según la guía del DS (la forma existe); el no es propuesta |
 
 ### `size`
 
 | size | qué mide | cuándo | fuente |
 |---|---|---|---|
-| `medium` (default) | celdas de 32 px | Web, debajo de una tabla. | extensión de SUI (la guía tiene un tamaño); el cuándo es propuesta |
-| `small` | celdas de 28 px | Web, en una tabla dentro de un modal o panel angosto. | propuesta, falta aprobación |
+| `medium` (default) | celdas de 32 px | Web, siempre: debajo de una tabla y en un modal o panel angosto. | extensión de SUI (la guía tiene un tamaño); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B1) · también en paneles angostos: canon (dueño, 05-10-2026, D16) |
+| `small` | celdas de 28 px | No usar: es chico. En un modal o panel angosto va `medium`. | canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B1 |
 
 ### Botones y texto
 
 | input | valor | cuándo | fuente |
 |---|---|---|---|
 | `nextPrevious` | `true` (default) | Siempre. | según la guía del DS |
-| `firstLast` | `false` (default) | Lo normal: con las elipsis ya se ve la primera y la última. | propuesta, falta aprobación |
-| `firstLast` | `true` | Más de 20 páginas, donde ir al final es un caso de uso (la última semana de un export). | según la guía del DS (los botones existen); el cuándo es propuesta |
-| `siblingCount` | `1` (default) | Siempre. Más números a cada lado ensanchan sin ayudar. | propuesta, falta aprobación |
-| `showInfo` | `true` (default) | Con `infoFormat="items"`: «Mostrando 11-20 de 134». | propuesta, falta aprobación |
+| `firstLast` | `false` (default) | Lo normal: con las elipsis ya se ve la primera y la última. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `firstLast` | `true` | Más de 20 páginas, donde ir al final es un caso de uso (la última semana de un export). | según la guía del DS (los botones existen); el cuándo: canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `siblingCount` | `1` (default) | Siempre. Más números a cada lado ensanchan sin ayudar. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `showInfo` | `true` (default) | Con `infoFormat="items"`: «Mostrando 11-20 de 134». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 | `infoFormat` | `'items'` (default) | «Mostrando 11-20 de 134». | según el código |
-| `infoFormat` | `'pages'` | Imprime «Página 2 de 14» (en español desde 03-10-2026). Cuando no se sabe el total de ítems o no importa. | propuesta, falta aprobación |
-| `pageSizeOptions` | `[]` (default) | Lo normal: sin selector de filas por página. | propuesta, falta aprobación |
-| `pageSizeOptions` | `[10, 25, 50]` | Las opciones dicen «10 / página» (en español desde 03-10-2026). | propuesta, falta aprobación |
+| `infoFormat` | `'pages'` | Imprime «Página 2 de 14» (en español desde 03-10-2026). Cuando no se sabe el total de ítems o no importa. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `pageSizeOptions` | `[]` (default) | Lo normal: sin selector de filas por página. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `pageSizeOptions` | `[10, 25, 50]` | Las opciones dicen «10 / página» (en español desde 03-10-2026). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 Usos de hoy que rompen las reglas: **0** (no se usa).
 
@@ -80,8 +80,8 @@ mobile no se usa.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| debajo de una tabla | no se usa: scroll infinito | `medium` (32) | propuesta, falta aprobación |
-| tabla en un panel angosto | no se usa | `small` (28) | propuesta, falta aprobación |
+| debajo de una tabla | no se usa: scroll infinito | `medium` (32) | canon (aprobado por el dueño, 05-10-2026, bloque B7) |
+| tabla en un panel angosto | no se usa | `medium` (32) | no se usa en mobile: canon (aprobado por el dueño, 05-10-2026, bloque B7) · web: canon (dueño, 05-10-2026, D16), antes `small` |
 
 ```html
 @if (!bp.isMobile()) {

package/docs/sui-payment-icon/README.md

@@ -23,8 +23,8 @@ el color ya elegidos.
 
 ## Qué variante usar
 
-> **La guía del DS no tiene página para este componente.** Todo es **propuesta, falta
-> aprobación**.
+> **La guía del DS no tiene página para este componente.** 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**.
 
@@ -32,21 +32,21 @@ el color ya elegidos.
 
 | valor | ícono y color | cuándo | fuente |
 |---|---|---|---|
-| `water` | gota, celeste | No usar hoy. | propuesta |
-| `gas` | fuego, rojo | No usar hoy. | propuesta |
-| `electricity` | foco, amarillo | No usar hoy. | propuesta |
-| `donate` | mano con corazón, rosa | No usar hoy. | propuesta |
-| `internet` | wifi, azul | No usar hoy. | propuesta |
-| `phone` | celular, naranja | No usar hoy. | propuesta |
-| `rent` | casa, verde | No usar hoy. | propuesta |
-| `tax` | documento, morado | No usar hoy. | propuesta |
+| `water` | gota, celeste | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `gas` | fuego, rojo | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `electricity` | foco, amarillo | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `donate` | mano con corazón, rosa | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `internet` | wifi, azul | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `phone` | celular, naranja | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `rent` | casa, verde | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `tax` | documento, morado | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### `size` y `ariaLabel`
 
 | input | cuándo | fuente |
 |---|---|---|
-| `size` `40` (default) | El único tamaño del Figma. Los demás (32, 48, 56, 64) heredan la escala de `sui-key-icon`. | propuesta |
-| `ariaLabel` | Solo si al lado no está escrito el servicio. Si no, es decorativo. | propuesta |
+| `size` `40` (default) | El único tamaño del Figma. Los demás (32, 48, 56, 64) heredan la escala de `sui-key-icon`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `ariaLabel` | Solo si al lado no está escrito el servicio. Si no, es decorativo. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 Usos de hoy que rompen la regla: **0**.
 
@@ -55,7 +55,10 @@ Usos de hoy que rompen la regla: **0**.
 En mobile se lee y se toca con el dedo, así que va más grande; en web, más chico. En las
 pantallas que se usan en los dos (panel del local, super admin) se elige con el servicio de
 breakpoints de la app (`bp`, en `services/breakpoints.service.ts`); en las que solo existen en
-el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propuesta**.
+el celular (cliente, repartidor) va directo el valor de mobile. No se toca, así que la tablet va
+con el valor de web, y el celular chico (< 380 px) también (D16).
+Es **canon (dueño, 05-10-2026, P1 b)**: un paso más grande en el celular que en computadora, y
+se migra todo ahora, no solo al tocar cada pantalla.
 
 | uso | mobile | web |
 |---|---|---|

package/docs/sui-period-range/README.md

@@ -25,17 +25,17 @@ costado del calendario.
 
 ## Qué variante usar
 
-> **La guía del DS no tiene página para este componente** (vive dentro del datepicker). Todo es
-> **propuesta, falta aprobación**.
+> **La guía del DS no tiene página para este componente** (vive dentro del datepicker). 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 directos**. Lo usa por dentro
 > `sui-datepicker`.
 
 | input | valor | cuándo | fuente |
 |---|---|---|---|
-| `label` | texto | El período en palabras de la persona: «Hoy», «Últimos 7 días», «Este mes». Sin fechas: para eso está el calendario al lado. | propuesta |
-| `active` | `true` | El preset que coincide con el rango elegido. Uno solo; si el rango se tocó a mano, ninguno. | propuesta |
-| `disabled` | `true` | El período no tiene datos (un local que abrió hace 10 días con «Últimos 3 meses»). Mejor sacarlo de la lista si nunca va a tener datos. | propuesta |
+| `label` | texto | El período en palabras de la persona: «Hoy», «Últimos 7 días», «Este mes». Sin fechas: para eso está el calendario al lado. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `active` | `true` | El preset que coincide con el rango elegido. Uno solo; si el rango se tocó a mano, ninguno. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `disabled` | `true` | El período no tiene datos (un local que abrió hace 10 días con «Últimos 3 meses»). Mejor sacarlo de la lista si nunca va a tener datos. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 Usos de hoy que rompen la regla: **0**.
 

package/docs/sui-popover/README.md

@@ -55,11 +55,11 @@ una función nueva que conviene mostrar donde está («Aquí programas tus pedid
 
 | prop | valor | cuándo | fuente |
 |---|---|---|---|
-| `doubleButton` | `true` (default) | Desde el segundo paso de un recorrido («Atrás» / «Siguiente»), o un aviso suelto con «Ahora no» / «Probar». | propuesta |
-| `doubleButton` | `false` | El primer paso de un recorrido o un aviso suelto con una sola salida («Entendido»). | propuesta |
+| `doubleButton` | `true` (default) | Desde el segundo paso de un recorrido («Atrás» / «Siguiente»), o un aviso suelto con «Ahora no» / «Probar». | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `doubleButton` | `false` | El primer paso de un recorrido o un aviso suelto con una sola salida («Entendido»). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `backLabel` · `nextLabel` | texto en español | Los defaults ya son «Atrás» y «Siguiente» (03-10-2026); el último paso pasa `nextLabel="Listo"`. | canon (CANON-SUI §5.1 y §5.3: sentence case, tuteo) |
 | orden | secundario a la izquierda, primario a la derecha | Ya lo hace el componente (stroke neutral + filled primary), igual que `sui-modal-footer`. | canon (CLAUDE.md, «Botones — composición y orden») |
-| `step` | `{ current, total }` | Con `stepper`. Sin `step`, el componente asume **1 de 4**. | propuesta |
+| `step` | `{ current, total }` | Con `stepper`. Sin `step`, el componente asume **1 de 4**. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 
 ### Flecha, ícono, texto y cierre
 
@@ -71,13 +71,13 @@ una función nueva que conviene mostrar donde está («Aquí programas tus pedid
 | `position` | `bottom-*` | El elemento está abajo (la barra de pestañas): el popover va encima. | propuesta |
 | `position` | `left-*` · `right-*` | Elementos de una barra lateral (el sidebar del panel). | propuesta |
 | `position` | `*-left` · `*-center` · `*-right` | Alinea la flecha con el elemento cuando el popover no puede centrarse sobre él (está cerca de un borde). | propuesta |
-| `icon` | el de lo que se explica | Siempre uno que diga el tema (`calendar-schedule-line` para programar). El default es un ícono de persona. | propuesta |
-| `icon` | `null` | Cuando el texto ya basta y el ícono sería decoración. | propuesta |
+| `icon` | el de lo que se explica | Siempre uno que diga el tema (`calendar-schedule-line` para programar). El default es un ícono de persona. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `icon` | `null` | Cuando el texto ya basta y el ícono sería decoración. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `title` | frase corta | Qué es, en sentence case y sin punto final. | canon (CANON-SUI §5.1 y §5.2) |
 | `description` | una o dos frases | Qué hace o por qué importa. | propuesta |
-| `dismissIcon` | `true` (default) | Siempre: un recorrido se puede saltar. | propuesta |
-| `dismissIcon` | `false` | No usar hoy. **Cuándo sí:** un paso que no se puede saltar porque sin él no funciona lo siguiente. | propuesta |
-| `[data-slot=body]` | contenido propio | No usar hoy. **Cuándo sí:** el paso necesita una imagen o una lista en vez de título y texto. | propuesta |
+| `dismissIcon` | `true` (default) | Siempre: un recorrido se puede saltar. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `dismissIcon` | `false` | No usar hoy. **Cuándo sí:** un paso que no se puede saltar porque sin él no funciona lo siguiente. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `[data-slot=body]` | contenido propio | No usar hoy. **Cuándo sí:** el paso necesita una imagen o una lista en vez de título y texto. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ## Tamaño en mobile y en web
 
@@ -96,11 +96,11 @@ extensión SUI 03-10-2026).
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | el panel | 320 px (cabe desde 352 px de pantalla) | 320 px | según el componente |
-| botones del pie | `large` (48) | `small` (36) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| botones del pie | `large` (48) | `medium` (40) | 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` (el default del componente: hay que pasarlo) |
 | la X | se ve de 24, se toca en 40 | igual | canon (aprobado por el dueño, 03-10-2026) |
 
 ```html
-<sui-popover footer="stretch" [size]="bp.isMobile() ? 'large' : 'small'" … />
+<sui-popover footer="stretch" [size]="bp.isMobile() ? 'large' : 'medium'" … />
 ```
 
 `large` es el siguiente de la escala del `sui-button` (48, el del footer de los modales). `medium`

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

@@ -39,18 +39,18 @@ Regla corta: **producto en la grilla de la carta → product-card · producto en
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `name`, `price` (obligatorios) | Siempre. El precio sale con 2 decimales y punto: «S/ 35.00». | propuesta |
-| `description` | Una línea que diga qué trae: «Con hierbas aromáticas y papas nativas». | propuesta |
-| `image` como objeto `{ url, fallbackUrl, position }` | Lo normal: `url` = la miniatura, `fallbackUrl` = la foto grande por si la miniatura no carga, `position` = encuadre vertical guardado. | propuesta (así lo hace la carta) |
-| `image` como string | Solo la url, sin respaldo. | propuesta |
-| `image = null` + `fallback` | Sin foto: banda de color con el nombre (default). La carta pasa `{ color }` para variar el color por visita con `SUI_PRODUCT_FALLBACK_COLORS`. | propuesta |
-| `available=false` + `unavailableLabel` | Agotado o fuera de horario; la etiqueta dice cuál («Agotado», «Desde las 12 m.»). Se atenúa y pierde el «+». | propuesta |
-| `quantity` | Cuántos hay en el carrito: con más de 0, el «+» pasa a stepper (− / cantidad / +). | propuesta |
-| `closed` | El local no recibe pedidos: se ve, no se agrega. | propuesta |
-| `action="add"` (default) | La carta del cliente. | propuesta |
-| `action="edit"` | La grilla del dueño: lápiz siempre (también en agotado, que es justo el que quiere tocar), nunca stepper. | propuesta |
-| `currencySymbol` | Default `S/`. No se cambia: la app cobra en soles. | propuesta |
-| `fallback.variant="icon"` | Ver «No usar». | propuesta |
+| `name`, `price` (obligatorios) | Siempre. El precio sale con 2 decimales y punto: «S/ 35.00». | canon (CANON-SUI §5.5: «S/ » + espacio, punto decimal y 2 decimales; el precio se pasa como número y el componente formatea) |
+| `description` | Una línea que diga qué trae: «Con hierbas aromáticas y papas nativas». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `image` como objeto `{ url, fallbackUrl, position }` | Lo normal: `url` = la miniatura, `fallbackUrl` = la foto grande por si la miniatura no carga, `position` = encuadre vertical guardado. | canon (aprobado por el dueño, 05-10-2026, bloque B9) (así lo hace la carta) |
+| `image` como string | Solo la url, sin respaldo. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `image = null` + `fallback` | Sin foto: banda de color con el nombre (default). La carta pasa `{ color }` para variar el color por visita con `SUI_PRODUCT_FALLBACK_COLORS`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `available=false` + `unavailableLabel` | Agotado o fuera de horario; la etiqueta dice cuál («Agotado», «Desde las 12 m.»). Se atenúa y pierde el «+». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `quantity` | Cuántos hay en el carrito: con más de 0, el «+» pasa a stepper (− / cantidad / +). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `closed` | El local no recibe pedidos: se ve, no se agrega. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `action="add"` (default) | La carta del cliente. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `action="edit"` | La grilla del dueño: lápiz siempre (también en agotado, que es justo el que quiere tocar), nunca stepper. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `currencySymbol` | Default `S/`. No se cambia: la app cobra en soles. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `fallback.variant="icon"` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 Outputs: `openDetail` (toque en la card), `add`, `increment`, `decrement`, `edit`.
 
@@ -77,13 +77,13 @@ lápiz sí siguen al lado del precio.
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | grilla de la carta | 2 columnas (`1fr 1fr`, gap 12) | `repeat(auto-fill, minmax(220px, 1fr))` desde 600 px y `minmax(180px, 1fr)` en desktop | lo que hay en la app |
-| botón «+», lápiz, stepper | `large` (44) | `small` (36) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| botón «+», lápiz, stepper | `large` (44) | `medium` (40) | 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` (el default del componente: hay que pasarlo) |
 
 ```html
-<sui-product-card [size]="bp.isMobile() ? 'large' : 'small'" … />
+<sui-product-card [size]="bp.isMobile() ? 'large' : 'medium'" … />
 ```
 
-`medium` (40) queda para quien ya lo usa: no llega al piso de 44 del teléfono.
+`medium` (40) es el de la computadora (D16); la tablet va como el teléfono, porque se toca.
 
 ## Precio con descuento
 

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

@@ -29,8 +29,8 @@ dice qué mide y cuánto.
 > y trae cuatro colores (`blue` default, `red`, `orange`, `green`), una sola altura, `value` y
 > `max`. No dice cuándo usar cada color. Cada color apunta a un token de estado
 > (`--sui-state-*`), igual que el badge: de ahí sale su significado, que es el mismo que el del
-> badge aprobado. Lo marcado «según la guía del DS» sale de ahí; el resto es **propuesta, falta
-> aprobación**.
+> badge aprobado. Lo marcado «según la guía del DS» sale de ahí; lo marcado canon está
+> aprobado; lo que sigue en propuesta espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **2 barras peladas en 1 pantalla**
 > (`overview-visitors`), sin contar prototipos ni vitrinas (`master-preview`,
@@ -45,7 +45,7 @@ dice qué mide y cuánto.
 | `green` | `success` | Se cumplió o va bien. | Meta cumplida, saldo alto | según la guía del DS (token) · propuesta (cuándo) |
 | `orange` | `warning` | Va en curso y pide atención. | Saldo bajando, meta del día a medias | según la guía del DS (token) · propuesta (cuándo) |
 | `red` | `error` | Se perdió o se acabó. | Meta perdida, saldo agotado | según la guía del DS (token) · propuesta (cuándo) |
-| `purple` | `feature` | **No usar** (ver abajo). Extensión SUI. | — | propuesta, falta aprobación |
+| `purple` | `feature` | **No usar** (ver abajo). Extensión SUI. | — | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 **Ojo con el naranja**: en este proyecto el `orange` de estado (`--sui-state-warning-base`) es
 el mismo `#fa7319` de la marca. Una barra naranja sin un juicio detrás se lee como «marca», no
@@ -64,8 +64,8 @@ como «atención».
 
 | propiedad | regla | fuente |
 |---|---|---|
-| `value` | Siempre de 0 a 100. Si el dato viene como fracción (0,6) o como «3 de 5», se convierte antes. | propuesta, falta aprobación |
-| `ariaLabel` | **Obligatorio** en la barra pelada: sin título visible, el lector de pantalla no sabe qué mide. | propuesta, falta aprobación |
+| `value` | Siempre de 0 a 100. Si el dato viene como fracción (0,6) o como «3 de 5», se convierte antes. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `ariaLabel` o `ariaLabelledby` | **Uno de los dos es obligatorio** en la barra pelada: sin título visible, el lector de pantalla no sabe qué mide. `ariaLabelledby` apunta al id de un texto que ya se ve. | canon (aprobado por el dueño, 05-10-2026, bloque B13) |
 
 **Usos de hoy que rompen la regla — a discutir, 2:**
 `pages/overview/components/overview-visitors/overview-visitors.html:22` y `:45` pintan en
@@ -81,10 +81,13 @@ regla va `blue`, o mejor un gráfico. Tampoco llevan `ariaLabel`.
 
 ## Tamaño en mobile y en web
 
-Criterio de la app: **en mobile se lee y se toca con el dedo, así que va más grande; en web
-(desktop), más chico.** Mobile es `≤ 767 px`, el mismo corte de `BreakpointsService.isMobile()`
-en master-pedidos. Fuente: canon del dueño (03-10-2026), el mismo patrón que ya usan 27 controles
-de la app.
+Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026), que reemplaza al
+«tamaño por plataforma» del 03-10-2026 (mobile grande, web chico). La columna «mobile» es el celular de
+380 px o más y, en lo que se toca, también la tablet (`pointer: coarse`). La columna «web» es la
+computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el celular chico
+(< 380 px) va `medium` a la vista, sin achicar el área de 44 de lo que se toca. **Nada en `small` ni
+`xsmall`**, salvo lo que el componente solo tiene en chico. Hoy la app corta con
+`BreakpointsService.isMobile()` (≤ 767 px), que todavía no mira el puntero ni los 380 px.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|

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

@@ -27,7 +27,8 @@ descripción y link, con el espaciado del DS.
 > **La guía del DS no tiene una página propia para esto**: son los ejemplos «With Label» y
 > «Advanced» de la página de la barra de progreso (título + «80%», y debajo un link
 > «Upgrade» con una descripción). No dice cuándo usar cada forma. Lo marcado «según la guía del
-> DS» sale de esos ejemplos; el resto es **propuesta, falta aprobación**.
+> DS» sale de esos ejemplos; lo marcado canon está aprobado; lo que sigue en
+> propuesta espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **4 en 3 pantallas** (la descarga del
 > OTA, el saldo y la meta del día en el dashboard del repartidor, el saldo en la billetera), sin
@@ -41,14 +42,14 @@ que mide** (blue neutro, green cumplido, orange pide atención, red perdido o ag
 | propiedad | valor | cuándo | ejemplo real | fuente |
 |---|---|---|---|---|
 | `type` | `on-top` (default) | Título y número arriba, barra abajo. Lo normal. | Las 4 de la app | según la guía del DS («With Label») |
-| `type` | `on-right` | Sin título: barra y número en una línea, dentro de una fila que ya dice qué mide a la izquierda. | Pedidos por distrito en una tabla | propuesta, falta aprobación |
+| `type` | `on-right` | Sin título: barra y número en una línea, dentro de una fila que ya dice qué mide a la izquierda. | Pedidos por distrito en una tabla | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `title` | texto | Qué mide, en sentence case, sin punto: «Saldo restante», «Meta del día». | `pages/driver/driver-wallet/driver-wallet.html:43` | según la guía del DS |
 | `percentage` | `true` (default) | El porcentaje es la unidad que importa (una descarga). | `components/ota-update/ota-update.html:132` | según la guía del DS («80%») |
-| `percentage` | texto | Hay una unidad real: entregas, soles. «3 de 5 entregas», «S/ 12.40 de S/ 20.00». | `pages/driver/driver-dashboard/driver-dashboard.html:512` | propuesta, falta aprobación |
-| `percentage` | `false` | El número ya está escrito al lado, o no significa nada. | — | propuesta, falta aprobación |
+| `percentage` | texto | Hay una unidad real: entregas, soles. «3 de 5 entregas», «S/ 12.40 de S/ 20.00». | `pages/driver/driver-dashboard/driver-dashboard.html:512` | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `percentage` | `false` | El número ya está escrito al lado, o no significa nada. | — | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 | `showBottom` + `description` | texto | Qué está pasando o qué hacer mientras avanza: «No cierres la app, estamos dejando todo listo.» | `components/ota-update/ota-update.html:132` | según la guía del DS («Advanced») |
-| `link` | texto o `{ label, href }` | La acción que resuelve lo que la barra avisa: «Recargar» cuando el saldo está en rojo. Va con `showBottom`. | — (sin usos) | según la guía del DS («Upgrade») · propuesta (cuándo) |
-| `ariaLabel` | texto | Lo que mide, si el título no alcanza («Saldo restante sobre el saldo de cortesía»). | `pages/driver/driver-dashboard/driver-dashboard.html:240` | propuesta, falta aprobación |
+| `link` | texto o `{ label, href }` | La acción que resuelve lo que la barra avisa: «Recargar» cuando el saldo está en rojo. Va con `showBottom`. | — (sin usos) | según la guía del DS («Upgrade») · canon (aprobado por el dueño, 05-10-2026, bloque B9) (cuándo) |
+| `ariaLabel` | texto | Lo que mide, si el título no alcanza («Saldo restante sobre el saldo de cortesía»). | `pages/driver/driver-dashboard/driver-dashboard.html:240` | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 **Usos de hoy que rompen la regla — a discutir, 1:**
 `components/ota-update/ota-update.html:132` pinta la descarga en `orange`. Una descarga es avance
@@ -65,10 +66,13 @@ ser una decisión de marca y no un error: decide el dueño. Las de saldo y meta
 
 ## Tamaño en mobile y en web
 
-Criterio de la app: **en mobile se lee y se toca con el dedo, así que va más grande; en web
-(desktop), más chico.** Mobile es `≤ 767 px`, el mismo corte de `BreakpointsService.isMobile()`
-en master-pedidos. Fuente: canon del dueño (03-10-2026), el mismo patrón que ya usan 27 controles
-de la app.
+Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026), que reemplaza al
+«tamaño por plataforma» del 03-10-2026 (mobile grande, web chico). La columna «mobile» es el celular de
+380 px o más y, en lo que se toca, también la tablet (`pointer: coarse`). La columna «web» es la
+computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el celular chico
+(< 380 px) va `medium` a la vista, sin achicar el área de 44 de lo que se toca. **Nada en `small` ni
+`xsmall`**, salvo lo que el componente solo tiene en chico. Hoy la app corta con
+`BreakpointsService.isMobile()` (≤ 767 px), que todavía no mira el puntero ni los 380 px.
 
 El `size` solo cambia la barra; el título y el número no cambian de tamaño.
 

package/docs/sui-radio/README.md

@@ -43,7 +43,7 @@ Regla corta: **lista densa de texto → radio-label · con peso o en el teléfon
 | qué | cuándo | fuente |
 |---|---|---|
 | dentro de `sui-radio-group` + `[value]` | Siempre que haya más de una opción. El grupo hace la exclusión y se enchufa a `[(ngModel)]`. | según la guía del DS (es un radio group) |
-| suelto con `[(standaloneChecked)]` | Solo cuando la exclusión la hace la fila o el padre (la fila de opciones del detalle de producto). **Suelto, al tocarlo se desmarca** como un checkbox. | propuesta, falta aprobación |
+| suelto con `[(standaloneChecked)]` | Solo cuando la exclusión la hace la fila o el padre (la fila de opciones del detalle de producto). **Suelto, al tocarlo se desmarca** como un checkbox. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `disabled` | La opción existe pero no aplica ahora (una variante agotada). | según la guía del DS |
 
 ### `size`
@@ -52,7 +52,7 @@ Regla corta: **lista densa de texto → radio-label · con peso o en el teléfon
 |---|---|---|---|
 | `xlarge` | 28 | Mobile, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
 | `large` | 24 | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
-| `medium` (default) | 20 | Solo dentro de un componente que fija su escala (detalle de producto). Es el único tamaño de la guía. | según la guía del DS (único tamaño); el «cuándo» es propuesta |
+| `medium` (default) | 20 | Solo dentro de un componente que fija su escala (detalle de producto). Es el único tamaño de la guía. | según la guía del DS (único tamaño); el «cuándo» es canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 
 **Usos de hoy que rompen la regla:**
 

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

@@ -41,24 +41,24 @@ checkbox-card.**
 
 | type | cuándo | fuente |
 |---|---|---|
-| `left-icon` con `icon` | Lo normal: un ícono Remix que dice de qué va la opción (`truck-line` Delivery, `store-2-line` Recojo). | propuesta (práctica de la app) |
-| `left-icon` con `iconSrc` | Emoji animado cuando la elección es de las grandes del rol (el vehículo del repartidor, el rol al registrarse, el tipo de mandadito). Los emojis van de `assets/emojis/` o `FLUENT_EMOJI_ANIM`. | propuesta |
-| `left-icon` con `emoji` | Lo mismo con un nombre de `SuiEmoji` en vez de una URL. Hoy 0 usos; vale igual. | propuesta |
-| `basic` | Opciones de texto puro: motivos de cancelación, quién paga el envío, los premios de una meta. | propuesta |
-| `avatar` (`imageUrl`) | El logo redondo de un medio de pago (Yape, Plin, efectivo en el checkout). | propuesta |
-| `company` (`imageUrl`) | Elegir entre tus locales (cambiar de negocio en mi-negocio). | propuesta |
-| `brand`, `card-provider` | Ver «No usar». | propuesta |
+| `left-icon` con `icon` | Lo normal: un ícono Remix que dice de qué va la opción (`truck-line` Delivery, `store-2-line` Recojo). | canon (aprobado por el dueño, 05-10-2026, bloque B2) (práctica de la app) |
+| `left-icon` con `iconSrc` | Emoji animado cuando la elección es de las grandes del rol (el vehículo del repartidor, el rol al registrarse, el tipo de mandadito). Los emojis van de `assets/emojis/` o `FLUENT_EMOJI_ANIM`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `left-icon` con `emoji` | Lo mismo con un nombre de `SuiEmoji` en vez de una URL. Hoy 0 usos; vale igual. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `basic` | Opciones de texto puro: motivos de cancelación, quién paga el envío, los premios de una meta. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `avatar` (`imageUrl`) | El logo redondo de un medio de pago (Yape, Plin, efectivo en el checkout). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `company` (`imageUrl`) | Elegir entre tus locales (cambiar de negocio en mi-negocio). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `brand`, `card-provider` | Ver «No usar». | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### Las piezas
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `value` (obligatorio) | Siempre, aunque no haya grupo. Es lo que emite `selected`. | propuesta |
-| `label` | Siempre. El nombre de la opción, corto: «Delivery», «Lo antes posible». | propuesta |
-| `description` | Casi siempre: la consecuencia de elegirla («Lo revisamos y te transferimos. Puede tardar unas horas.»). | propuesta |
-| `sublabel` | Una precisión corta entre paréntesis («(canal estable)», «(sin OTA)»). Nunca la explicación: eso es `description`. | propuesta |
+| `value` (obligatorio) | Siempre, aunque no haya grupo. Es lo que emite `selected`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `label` | Siempre. El nombre de la opción, corto: «Delivery», «Lo antes posible». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `description` | Casi siempre: la consecuencia de elegirla («Lo revisamos y te transferimos. Puede tardar unas horas.»). | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `sublabel` | Una precisión corta entre paréntesis («(canal estable)», «(sin OTA)»). Nunca la explicación: eso es `description`. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
 | `badge` | Marca una opción frente a las otras: «Por defecto». Con string sale azul `light`; pasa el objeto con el color que corresponda según el badge (un «Por defecto» es `gray`). | propuesta |
-| `disabled` | La opción existe pero hoy no se puede: di por qué en la `description` («El local está cerrado ahora»). | propuesta |
+| `disabled` | La opción existe pero hoy no se puede: di por qué en la `description` («El local está cerrado ahora»). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `checked` / `[(ngModel)]` / `sui-radio-group` | El estado: `[checked]` + `(selected)` sueltos (lo normal en la app), o `ngModel` con `name` (checkout), o dentro de un `sui-radio-group`. | propuesta |
 
 ### `size` (el radio de adentro)

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

@@ -47,8 +47,8 @@ o con peso → radio-card · muchas → select.**
 | `value` | Siempre (es obligatorio). Lo que lee el `sui-radio-group`. | API |
 | `label` | Siempre. La opción en pocas palabras («Dirección no encontrada», «12:00 — 12:30 p. m.»). | según la guía del DS (pieza) |
 | `sublabel` | Precisión corta entre paréntesis: «(recomendado)». | según la guía del DS |
-| `description` | Una frase de qué pasa si se elige. Sube el label a peso medio. Si casi todas las opciones la necesitan, probablemente es `sui-radio-card`. | según la guía del DS (pieza); el «cuándo» es propuesta |
-| `badge` | Solo novedad. Con string sale naranja `light`: pasa el objeto. | según la guía del DS (pieza «NEW»); el color es propuesta |
+| `description` | Una frase de qué pasa si se elige. Sube el label a peso medio. Si casi todas las opciones la necesitan, probablemente es `sui-radio-card`. | según la guía del DS (pieza); el «cuándo» es canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `badge` | Solo novedad. Con string sale naranja `light`: pasa el objeto. | según la guía del DS (pieza «NEW»); el color es canon (aprobado por el dueño, 05-10-2026, bloque B3) |
 | `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 |
@@ -76,7 +76,7 @@ dueño, 28-09-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 |
+| opciones con mucho contexto cada una | `sui-radio-card` con `bp.controlSize()` | `sui-radio-card` con `bp.controlSize()` | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ```html
 <sui-radio-label value="recojo" [size]="bp.isMobile() ? '2xlarge' : 'large'" label="Recojo en tienda" />

package/docs/sui-rating/README.md

@@ -35,8 +35,8 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
 > el suyo («cada sistema de calificación se comporta distinto»). Los ejemplos son: nota con
 > reseñas («4.5 ∙ 5.2K Ratings · 18 reviews»), celdas, barra de estrellas, barra de corazones,
 > barra de emojis, barra de números del 1 al 5 y barra con área de texto. No trae tamaños, ni
-> do/don't. Lo marcado «según la guía del DS» es que el ejemplo existe; el cuándo es
-> **propuesta, falta aprobación**, salvo lo que diga «canon».
+> do/don't. Lo marcado «según la guía del DS» es que el ejemplo existe; el cuándo está
+> aprobado donde dice «canon»; lo que sigue en propuesta espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **23 ratings en 13 pantallas**, sin
 > contar prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`,
@@ -59,8 +59,8 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
 
 | type | cuándo | fuente |
 |---|---|---|
-| `star` (default) | La nota de un pedido, un local, un repartidor o un cliente: la que entra al promedio. | según la guía del DS (ejemplo) · propuesta (cuándo) |
-| `emoji` | Cómo le fue a la persona con la app o con un proceso (no entra a la nota de nadie). Solo en `bar`. Hoy: `components/rate-entity-card/rate-entity-card.html:38`. | según la guía del DS (ejemplo «Single Selectable») · propuesta (cuándo) |
+| `star` (default) | La nota de un pedido, un local, un repartidor o un cliente: la que entra al promedio. | según la guía del DS (ejemplo) · canon (aprobado por el dueño, 05-10-2026, bloque B2) (cuándo) |
+| `emoji` | Cómo le fue a la persona con la app o con un proceso (no entra a la nota de nadie). Solo en `bar`. Hoy: `components/rate-entity-card/rate-entity-card.html:38`. | según la guía del DS (ejemplo «Single Selectable») · canon (aprobado por el dueño, 05-10-2026, bloque B2) (cuándo) |
 | `heart` | **No usar** como nota (ver abajo). | según la guía del DS (ejemplo «Rating Bar Heart») |
 | `number` | **No usar** hoy (ver abajo). Solo en `bar`. | según la guía del DS (ejemplo de 1 a 5) |
 
@@ -77,20 +77,20 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
 
 | propiedad | valor | cuándo | fuente |
 |---|---|---|---|
-| `readonly` | `true` | **Todo rating que muestra una nota.** Sin él se puede tocar y cambiar. | propuesta, falta aprobación |
+| `readonly` | `true` | **Todo rating que muestra una nota.** Sin él se puede tocar y cambiar. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `halfStep` | `true` | Obligatorio si el valor es un **promedio** (sin él, 4,5 se pinta como 4). Una nota individual es entera y no lo necesita. Solo funciona en `inline` + `readonly`. | según la guía del DS (muestra 4.5) |
-| `value` | `0` | Solo dentro del botón que invita a calificar, junto al texto «Calificar» (`pages/customer/order-history/order-history.html:352`). Suelto, cinco estrellas vacías se leen como «0 estrellas». | propuesta, falta aprobación |
-| `max` | `5` (default) | Siempre 5 en notas: la fórmula de la nota asume 5. | propuesta, falta aprobación |
-| `max` | otro | Solo con `type="number"` (encuesta de 1 a 10). | propuesta, falta aprobación |
-| `alignment` | `inline` (default) | Solo los íconos; el número y el conteo los escribe la pantalla. | propuesta, falta aprobación |
-| `alignment` | `horizontal` | Junto con `reviewLink`. | propuesta, falta aprobación |
-| `alignment` | `vertical` | **No usar** (ver abajo). | propuesta, falta aprobación |
+| `value` | `0` | Solo dentro del botón que invita a calificar, junto al texto «Calificar» (`pages/customer/order-history/order-history.html:352`). Suelto, cinco estrellas vacías se leen como «0 estrellas». | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
+| `max` | `5` (default) | Siempre 5 en notas: la fórmula de la nota asume 5. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `max` | otro | Solo con `type="number"` (encuesta de 1 a 10). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `alignment` | `inline` (default) | Solo los íconos; el número y el conteo los escribe la pantalla. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `alignment` | `horizontal` | Junto con `reviewLink`. | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
+| `alignment` | `vertical` | **No usar** (ver abajo). | canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `reviewLink` | `{ label, href? }` | Link «Ver 128 reseñas» que abre la hoja de reseñas. Hoy sin usos. | según la guía del DS («18 reviews») |
 | `showValue` | `true` | **No usar** (ver abajo). | propuesta, falta aprobación |
-| `reviewCount` | número | **No usar** (ver abajo). | propuesta, falta aprobación |
-| `emojis` | lista | Dejar el default (cinco caras, de triste a feliz). Cambiarlo rompe la lectura de la escala. | propuesta, falta aprobación |
-| `ariaLabel` | texto | Decir qué se califica: «Califica al repartidor», «Nota del local». El default es «Calificación». | propuesta, falta aprobación |
-| `reason` / `reasonPlaceholder` / `reasonRows` | — | Solo en `bar-area`. El placeholder por defecto es «Cuéntanos por qué» (03-10-2026). | propuesta, falta aprobación |
+| `reviewCount` | número | **No usar** (ver abajo). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `emojis` | lista | Dejar el default (cinco caras, de triste a feliz). Cambiarlo rompe la lectura de la escala. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `ariaLabel` | texto | Decir qué se califica: «Califica al repartidor», «Nota del local». El default es «Calificación». | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
+| `reason` / `reasonPlaceholder` / `reasonRows` | — | Solo en `bar-area`. El placeholder por defecto es «Cuéntanos por qué» (03-10-2026). | según el código |
 
 **Usos de hoy que rompen la regla:**
 
@@ -115,10 +115,13 @@ lista cargada, que viene con tope. La fórmula depende de `n`: otro denominador
 
 ## Tamaño en mobile y en web
 
-Criterio de la app: **en mobile se lee y se toca con el dedo, así que va más grande; en web
-(desktop), más chico.** Mobile es `≤ 767 px`, el mismo corte de `BreakpointsService.isMobile()`
-en master-pedidos. Fuente: canon del dueño (03-10-2026), el mismo patrón que ya usan 27 controles
-de la app.
+Criterio de la app: **D16, tamaño por dispositivo** (canon, dueño, 05-10-2026), que reemplaza al
+«tamaño por plataforma» del 03-10-2026 (mobile grande, web chico). La columna «mobile» es el celular de
+380 px o más y, en lo que se toca, también la tablet (`pointer: coarse`). La columna «web» es la
+computadora (`pointer: fine`) y, en lo que no se toca, también la tablet. En el celular chico
+(< 380 px) va `medium` a la vista, sin achicar el área de 44 de lo que se toca. **Nada en `small` ni
+`xsmall`**, salvo lo que el componente solo tiene en chico. Hoy la app corta con
+`BreakpointsService.isMobile()` (≤ 767 px), que todavía no mira el puntero ni los 380 px.
 
 | uso | mobile | web | fuente |
 |---|---|---|---|

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

@@ -25,14 +25,14 @@ 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. Todo lo de abajo es **propuesta, falta aprobación**.
+> 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. | propuesta, falta aprobación |
+| `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 |

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

@@ -40,19 +40,19 @@ tab-chips · secciones → tab menu.**
 
 | size | cuándo | fuente |
 |---|---|---|
-| `xlarge` | Mobile: es el único que se acerca a los 44 px de área táctil (segmento de 40 px). | canon (dueño: «componentes grandes», 28-09-2026, y tamaño por plataforma, 03-10-2026) |
-| `large` | No aporta: 32 px, chico para el dedo y grande para web. | propuesta, falta aprobación |
-| `medium` (default) | Web, junto a títulos o filtros. | canon (dueño: tamaño por plataforma, 03-10-2026); el valor exacto es propuesta |
-| `small` | Web, solo íconos en una barra de herramientas (cuadrícula / lista). | propuesta, falta aprobación |
+| `xlarge` | Mobile: es el único que se acerca a los 44 px de área táctil (segmento de 40 px). | canon (dueño: «componentes grandes», 28-09-2026, y D16, 05-10-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) |
 
 ### Í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. | propuesta, falta aprobación |
-| `iconOnly` | Solo para modos universales (cuadrícula / lista). El `label` pasa a ser el nombre accesible: escríbelo igual. | propuesta, falta aprobación |
-| `disabled` (por ítem) | Un modo que existe pero no aplica todavía. | propuesta, falta aprobación |
+| `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:**
 
@@ -86,7 +86,7 @@ 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 |
+| 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.isMobile() ? '2xlarge' : 'medium'" … />
@@ -150,7 +150,7 @@ interface SuiSegmentedControlItem<T = string> {
 ```html
 <div style="max-width: 320px">
   <sui-segmented-control
-    [size]="bp.isMobile() ? 'xlarge' : 'small'"
+    [size]="bp.isMobile() ? '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" />