@ajuarezso/sui-design-system 0.25.0 → 0.25.1

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

@@ -29,9 +29,10 @@ Regla corta: **local en un listado del cliente → store-card · local en un pan
 > (`deliveryText`, `distanceText`) desde que la tarjeta y el checkout cobraban distinto.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **2
-> store-cards en 2 archivos**: favoritos del cliente (`pages/customer/favorites/favorites.html:121`,
+> store-cards en 2 archivos**: favoritos del cliente (`pages/customer/favorites/favorites.html:117`,
 > con `deliveryText` y `distanceText`) y la cola de aprobación
-> (`pages/super-admin/master-approvals/master-approvals.html:32`, en vista previa). El inicio del
+> (`pages/super-admin/master-approvals/master-approvals.html:31`, en vista previa). Líneas
+> revisadas el 06-10-2026. El inicio del
 > cliente arma sus filas de locales con clases propias.
 
 ### Los estados (salen de `store`)
@@ -56,8 +57,10 @@ Regla corta: **local en un listado del cliente → store-card · local en un pan
 | `(ratingClicked)` | La nota abre las opiniones y la info del local (`StoreRatingsModalService`). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `disableLink` | La tarjeta no navega (una vitrina, una lámina, una vista previa). | según el código |
 
-**Usos de hoy que rompen las reglas:** 0. A mirar: la cola de aprobación no pasa
-`deliveryText` (deduce el envío del `deliveryType`).
+**Usos de hoy que rompen las reglas:** 1. Favoritos pasa `small` en la computadora
+(`pages/customer/favorites/favorites.html:117`, `[size]="bp.isMobile() ? 'large' : 'small'"`): con
+D16 va `medium` (ver «Por dispositivo»). A mirar: la cola de aprobación no pasa `deliveryText`
+(deduce el envío del `deliveryType`).
 
 ## Tamaño en mobile y en web
 
@@ -77,12 +80,32 @@ El ancho lo da el contenedor. El `size` cambia **el corazón de favorito**, en l
 | nota (abre las opiniones) | `large`: se ve igual (≈ 38) y se toca en 44 de alto con un `::before` invisible que no se estira a los lados (no pisa la columna de al lado) | ≈ 38: padding 4 × 2 + etiqueta de 10 px + gap 2 + valor de 13 px, con el `line-height` heredado | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono (área) · medido del `.scss` (alto visible) |
 
 ```html
-<sui-store-card [store]="local" [size]="bp.isMobile() ? 'large' : 'medium'" />
+<sui-store-card [store]="local" [size]="bp.sizeControl()" />
 ```
 
-`medium` (40) es el de la computadora (D16); la tablet va como el teléfono, porque se toca. **Favoritos no pasa `size`**
-(`pages/customer/favorites/favorites.html`): en el teléfono el corazón queda en 36 hasta que la
-app le pase `[size]="bp.isMobile() ? 'large' : 'medium'"` (cambio de la app, no del DS).
+`medium` (40) es el de la computadora (D16); la tablet va como el teléfono, porque se toca.
+**Favoritos pasa `small` en la computadora** (`pages/customer/favorites/favorites.html:117`,
+`[size]="bp.isMobile() ? 'large' : 'small'"`): el corazón queda en 36 y en un iPad de 768 o más
+también, porque `isMobile()` no mira el puntero. Va `[size]="bp.sizeControl()"` (cambio de la app,
+no del DS).
+
+### Por dispositivo (D16)
+
+El corazón y la nota se tocan: la tarjeta sigue la fila «lo que se toca». Fuente: D16, dueño
+05-10-2026 (tabla por componente: «el default del componente es `small`: hay que pasar `size`»).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `large` (interino) | D16 pide `medium` con área de 44, pero el DS todavía no estira el corazón de 40 a 44: hasta que lo haga, se queda `large` |
+| celular (380–767) | `large` | corazón de 44 y la nota tocable en 44 de alto |
+| tablet táctil (`pointer: coarse`) | `large` | se toca igual que el teléfono |
+| computadora (`pointer: fine`) | `medium` | corazón de 40; nunca `small` (el default) |
+
+En el ultrawide, igual que en la computadora: el espacio extra va a más columnas en la grilla, no
+a una tarjeta más grande.
+
+En master-pedidos: `[size]="bp.sizeControl()"` (`large` en todo celular y pantalla táctil,
+`medium` en la computadora).
 
 ## «No usar»: por qué no hoy y cuándo sí
 
@@ -139,11 +162,51 @@ app le pase `[size]="bp.isMobile() ? 'large' : 'medium'"` (cambio de la app, no
 - Los íconos usan `color="var(--sui-primary-base, #fa7319)"`: el hex es respaldo, no se repite
   afuera.
 
+## Bien y mal
+
+Corazón en la computadora
+
+```html
+<!-- ❌ mal: small (36) en la computadora y en el iPad; D16 pide medium y large (pages/customer/favorites/favorites.html:117) -->
+<sui-store-card [size]="bp.isMobile() ? 'large' : 'small'" [store]="fav" [isFavorite]="true" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-store-card [size]="bp.sizeControl()" [store]="fav" [isFavorite]="true" />
+```
+
+Envío y distancia en un listado nuevo
+
+```html
+<!-- ❌ mal: sin deliveryText la tarjeta deduce el envío del deliveryType y puede cobrar distinto que el checkout (mismo patrón que pages/super-admin/master-approvals/master-approvals.html:31, a mirar) -->
+<sui-store-card [store]="local" [size]="bp.sizeControl()" />
+```
+
+```html
+<!-- ✅ bien: el texto llega escrito; null quita la columna -->
+<sui-store-card [store]="local" [size]="bp.sizeControl()"
+  [deliveryText]="envioDeLaTarjeta(local)" [distanceText]="distanciaDeLaTarjeta(local)" />
+```
+
+Tarjeta en una vitrina
+
+```html
+<!-- ❌ mal: sin disableLink la tarjeta navega a /cliente/restaurante/:id desde una lámina -->
+<sui-store-card [store]="local" [size]="bp.sizeControl()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-store-card [store]="local" [size]="bp.sizeControl()" [disableLink]="true" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-store-card
   [store]="local"
+  [size]="bp.sizeControl()"
   [isFavorite]="true"
   [deliveryText]="envioDeLaTarjeta(local)"
   [distanceText]="distanciaDeLaTarjeta(local)"

package/docs/sui-switch/README.md

@@ -51,8 +51,8 @@ Regla corta: **se aplica ya → switch · se confirma después → checkbox · d
 
 | size | px | cuándo | fuente |
 |---|---|---|---|
-| `xlarge` | 48 × 28 | Mobile, vía `bp.controlSize()`. Y en tarjetas donde el switch es la acción principal (ofertas de Central). | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
-| `large` | 40 × 24 | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
+| `xlarge` | 48 × 28 | Celular y tablet táctil: `bp.tactil() ? 'xlarge' : 'large'`. Y en tarjetas donde el switch es la acción principal (ofertas de Central). | canon (aprobado por el dueño, 28-09-2026: «componentes grandes»); la tablet: D16, dueño 05-10-2026 |
+| `large` | 40 × 24 | Computadora. | canon (aprobado por el dueño, 28-09-2026); confirmado en D16, dueño 06-10-2026 |
 | `medium` (default) | 32 × 20 | No usar en pantallas nuevas (ver abajo). Es el único tamaño de la guía. | canon (aprobado por el dueño, 28-09-2026) |
 
 ### La etiqueta dice lo que hace, no el estado
@@ -85,18 +85,39 @@ de la tabla), `pages/super-admin/master-settings/master-settings.html:105`, los
 
 ## Tamaño en mobile y en web
 
-| uso | mobile | web |
-|---|---|---|
-| switch en una fila, tabla o tarjeta | `xlarge` (48 × 28) | `large` (40 × 24) |
-| switch que es la acción principal de la tarjeta (ofertas de Central) | `xlarge` | `xlarge` |
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| switch en una fila, tabla o tarjeta | `xlarge` (48 × 28) | `large` (40 × 24) | canon (aprobado por el dueño, 28-09-2026); web confirmado en D16, dueño 06-10-2026 |
+| switch que es la acción principal de la tarjeta (ofertas de Central) | `xlarge` | `xlarge` | canon (aprobado por el dueño, 28-09-2026). Excepción previa a D16: la tabla de D16 pone `large` en la computadora y no la menciona. Pendiente de confirmar |
 
 ```html
-<sui-switch [size]="bp.controlSize()" … />   <!-- isMobile() ? 'xlarge' : 'large' -->
+<sui-switch [size]="bp.tactil() ? 'xlarge' : 'large'" … />
 ```
 
 El más grande mide 28 px de alto: el toque cómodo (≥ 44 px) lo da la fila; por eso con texto
 va `sui-switch-label`, que hace tocable todo el bloque.
 
+### Por dispositivo (D16)
+
+Fila de `switch` en la tabla de D16 (dueño, 05-10-2026; computadora resuelta el 06-10-2026): se
+toca, y en la computadora va **un paso menos que en el celular**, sin bajar a `medium`.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `xlarge` (48 × 28) | la fila que lo contiene da los 44 de alto |
+| celular (380–767 px) | `xlarge` (48 × 28) | |
+| tablet táctil (`pointer: coarse`) | `xlarge` (48 × 28) | se toca con el dedo, aunque mida más de 767 |
+| computadora (`pointer: fine`) | `large` (40 × 24) | un paso menos que el celular (dueño, 06-10-2026) |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `large`. `medium` no se usa en ningún dispositivo
+(ver «No usar»).
+
+En master-pedidos: `[size]="bp.tactil() ? 'xlarge' : 'large'"`, la misma expresión que
+`sui-switch-label`. La fila de D16 nombra `bp.controlSize()`, que es lo que usan los 25 switches de
+hoy, pero ese helper mira solo el ancho (`isMobile()`, ≤ 767): en un iPad de 768 o más da `large`.
+`bp.tactil()` también mira el puntero y da lo que pide la tabla. Si `controlSize()` pasa a mirar
+`tactil()`, los 25 quedan bien sin tocar las pantallas.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -138,14 +159,64 @@ Implementa `ControlValueAccessor` (`[(ngModel)]`, `formControlName`).
   enfocable. `tabindex="-1"` en el host no sirve: el binding del componente lo pisa.
 - Ya trae el arreglo de iOS para el `:active` pegado.
 
+## Bien y mal
+
+Interruptor con su texto al lado
+
+```html
+<!-- ❌ mal: texto armado a mano y sin size, queda en medium (pages/drivers/drivers.html:58) -->
+<label class="drivers__autoconfirm">
+  <div class="drivers__autoconfirm-text">
+    <span class="drivers__autoconfirm-title">Aceptar pedidos automáticamente</span>
+    <span class="drivers__autoconfirm-desc">El pedido salta la confirmación y pasa directo a buscar repartidor (como los locales administrados).</span>
+  </div>
+  <sui-switch [checked]="autoConfirm()" (checkedChange)="setAutoConfirm($event)" />
+</label>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-switch-label [size]="bp.tactil() ? 'xlarge' : 'large'" [flip]="true"
+  label="Aceptar pedidos automáticamente"
+  description="El pedido salta la confirmación y pasa directo a buscar repartidor (como los locales administrados)."
+  [active]="autoConfirm()" (activeChange)="setAutoConfirm($event)" />
+```
+
+Estado de un empleado en su tarjeta
+
+```html
+<!-- ❌ mal: large fijo en el teléfono y una etiqueta que cambia con el estado (pages/employees/employees.html:99) -->
+<sui-switch size="large" [checked]="employee.status === 'Activo'" (checkedChange)="toggleStatus(employee.id)" />
+<span class="employees__toggle-label">{{ employee.status }}</span>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-switch-label [size]="bp.tactil() ? 'xlarge' : 'large'" label="Empleado activo"
+  [active]="employee.status === 'Activo'" (activeChange)="toggleStatus(employee.id)" />
+```
+
+Pelado sin nombre accesible
+
+```html
+<!-- ❌ mal: sin aria-label el lector de pantalla dice «interruptor» y nada más -->
+<sui-switch [size]="bp.tactil() ? 'xlarge' : 'large'" [checked]="oferta.activo" (checkedChange)="prender(oferta, $event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-switch [size]="bp.tactil() ? 'xlarge' : 'large'" [checked]="oferta.activo"
+  [attr.aria-label]="'Prender ' + oferta.titulo" (checkedChange)="prender(oferta, $event)" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- Pelado en una tarjeta que ya tiene su título -->
-<sui-switch [size]="bp.controlSize()" [checked]="oferta.activo" [disabled]="guardando()"
+<sui-switch [size]="bp.tactil() ? 'xlarge' : 'large'" [checked]="oferta.activo" [disabled]="guardando()"
             [attr.aria-label]="'Prender ' + oferta.titulo" (checkedChange)="prender(oferta, $event)" />
 
 <!-- Con texto: sui-switch-label -->
-<sui-switch-label [size]="bp.controlSize()" label="Recibir pedidos" [flip]="true"
+<sui-switch-label [size]="bp.tactil() ? 'xlarge' : 'large'" label="Recibir pedidos" [flip]="true"
                   [(active)]="abierto" />
 ```

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

@@ -62,13 +62,15 @@ Regla corta: **ajuste con peso, al toque → switch-card · lista de ajustes →
 | size | cuándo | fuente |
 |---|---|---|
 | `xlarge` (48 × 28) | Mobile, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
-| `large` (40 × 24) | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
+| `large` (40 × 24) | Computadora, vía `bp.controlSize()`. Un paso menos que el celular; no baja a `medium`. | canon (aprobado por el dueño, 28-09-2026); confirmado en D16, dueño 06-10-2026 |
 | `medium` (default) | No usar en pantallas nuevas. | canon (aprobado por el dueño, 28-09-2026) |
 
-**Usos de hoy que rompen las reglas: 0.** Los 10 que se guardaban con un botón (métodos de pago
-de mi-negocio y 5 ajustes de master-settings) pasaron a `sui-checkbox-card`, y el de
-`pages/notifications/notifications.html:59` («Sonidos de la app») ya lleva `bp.controlSize()`,
-los dos el 03-10-2026.
+**Usos de hoy que rompen las reglas: 1** (medido el 06-10-2026, 22 switch-cards en 11 archivos).
+`pages/super-admin/master-categorias/master-categorias.html:170` («Chapa «Beta»») va con
+`size="large"` fijo: en el teléfono queda un paso chico. Va `[size]="bp.controlSize()"`. Los 10 que
+se guardaban con un botón (métodos de pago de mi-negocio y 5 ajustes de master-settings) pasaron a
+`sui-checkbox-card`, y el de `pages/notifications/notifications.html:59` («Sonidos de la app») ya
+lleva `bp.controlSize()`, los dos el 03-10-2026.
 
 ## Tamaño en mobile y en web
 
@@ -84,6 +86,22 @@ borde) y 54 px la más chica (`basic`, sin descripción, `medium`). Llega al pis
 <sui-switch-card [size]="bp.controlSize()" … />   <!-- isMobile() ? 'xlarge' : 'large' -->
 ```
 
+### Por dispositivo (D16)
+
+Fuente: D16, dueño 05-10-2026, con la fila de checkbox, radio y switch resuelta el 06-10-2026.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | `xlarge` | la card entera ya pasa de 44; el size solo agranda el interruptor |
+| celular (380–767) | `xlarge` | |
+| tablet táctil (`pointer: coarse`) | `xlarge` | `bp.controlSize()` mira solo el ancho: un iPad de 768 o más recibe `large` hasta que el helper mire el puntero |
+| computadora (`pointer: fine`) | `large` | un paso menos que el celular; no baja a `medium` (D16, dueño 06-10-2026) |
+
+Ultrawide: igual que la computadora (`large`).
+
+En master-pedidos: `[size]="bp.controlSize()"` (`xlarge` hasta 767 px, `large` desde ahí). La
+expresión exacta de D16, con la tablet, es `bp.tactil() ? 'xlarge' : 'large'`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -91,7 +109,7 @@ borde) y 54 px la más chica (`basic`, sin descripción, `medium`). Llega al pis
 | `emoji` (0 usos) | los ajustes de hoy llevan un ícono Remix | un ajuste de los grandes del rol que quiera el emoji animado del catálogo (`SuiEmoji`) |
 | `type="avatar"` (0 usos) | no se prende ni apaga a una persona | prender o apagar a un repartidor de tu flota |
 | `type="brand"` / `"company"` / `"card-provider"` (0 usos) | no hay integraciones | casi nunca: una integración es `sui-integration-switch` |
-| `size="medium"` | el interruptor de 32 × 20 se pierde en el teléfono | una tabla densa solo de desktop |
+| `size="medium"` | el interruptor de 32 × 20 se pierde en el teléfono | no hay: en la computadora va `large` (D16, dueño 06-10-2026) |
 
 ## API
 
@@ -135,6 +153,52 @@ Slot: `[sui-switch-card-leading]` (el ícono o el logo). Implementa `ControlValu
 - El interruptor siempre va a la derecha (no hay `flip`).
 - `badge` con string sale **azul `light` `small`** (en `sui-switch-label` sale naranja).
 
+## Bien y mal
+
+Tamaño fijo
+
+```html
+<!-- ❌ mal: large fijo; en el teléfono el interruptor queda un paso chico (pages/super-admin/master-categorias/master-categorias.html:170) -->
+<sui-switch-card type="basic" size="large" label="Chapa «Beta»"
+  [checked]="!!e.etiqueta" (checkedChange)="editar('etiqueta', $event ? 'Beta' : '')" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-switch-card type="basic" [size]="bp.controlSize()" label="Chapa «Beta»"
+  [checked]="!!e.etiqueta" (checkedChange)="editar('etiqueta', $event ? 'Beta' : '')" />
+```
+
+Interruptor que no se mueve
+
+```html
+<!-- ❌ mal: es controlada; sin checkedChange el toque no cambia nada -->
+<sui-switch-card type="basic" [size]="bp.controlSize()" label="Estoy trabajando"
+  [checked]="isAvailable()" />
+```
+
+```html
+<!-- ✅ bien (como pages/driver/driver-dashboard/driver-dashboard.html:211) -->
+<sui-switch-card type="basic" [size]="bp.controlSize()" label="Estoy trabajando"
+  [checked]="isAvailable()" (checkedChange)="onAvailabilityChange($event)" />
+```
+
+Ícono del ajuste
+
+```html
+<!-- ❌ mal: el ícono no se proyecta con slot=; left-icon queda con el círculo vacío -->
+<sui-switch-card type="left-icon" [size]="bp.controlSize()" label="Notificaciones" [checked]="push()" (checkedChange)="cambiarPush($event)">
+  <sui-icon slot="leading" name="notification-3-line" [size]="20" />
+</sui-switch-card>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-switch-card type="left-icon" [size]="bp.controlSize()" label="Notificaciones" [checked]="push()" (checkedChange)="cambiarPush($event)">
+  <sui-icon sui-switch-card-leading name="notification-3-line" [size]="20" />
+</sui-switch-card>
+```
+
 ## Ejemplo
 
 ```html

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

@@ -34,9 +34,9 @@ Regla corta: **ajuste con texto → este · ajuste con peso → switch-card · s
 > **5 usos en 4 archivos**, todos con `description`. Desde el 03-10-2026, 3 con `flip` (los
 > ajustes del producto en `add-product-modal` y la analítica de `privacidad`) y 2 sin él porque
 > viven dentro de un formulario (el horario de una categoría en `products`, «Cerrar por hoy» en
-> `central-inicio`). Tamaños: 2 `ctrlSize()`
-> (`large`/`xlarge`), 1 `xlarge` fijo, 2 sin `size` (`medium`). Hay **19 `sui-switch` con el texto
-> armado a mano** y 1 nativo que deberían ser este componente.
+> `central-inicio`). Tamaños (revisado el 06-10-2026): 2 `ctrlSize()` (`large`/`xlarge`), 1
+> `bp.isMobile() ? '2xlarge' : 'xlarge'` («Cerrar por hoy»), 2 sin `size` (`medium`). Hay **19
+> `sui-switch` con el texto armado a mano** y 1 nativo que deberían ser este componente.
 
 ### Las piezas
 
@@ -54,13 +54,14 @@ Regla corta: **ajuste con texto → este · ajuste con peso → switch-card · s
 
 | size | cuándo | fuente |
 |---|---|---|
-| `xlarge` | Mobile, vía `bp.controlSize()`; y cuando el ajuste es la acción principal de la pantalla («Cerrar por hoy» en Central). | canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
-| `large` | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
+| `xlarge` | Celular y tablet táctil: `[size]="bp.tactil() ? 'xlarge' : 'large'"`. Con descripción la fila pasa los 44 sola. En la computadora, solo si el ajuste es la acción principal de la pantalla («Cerrar por hoy» en Central): excepción previa a D16, pendiente de confirmar. | celular y tablet: D16 (fila de checkbox, radio y switch, dueño 05-10-2026); computadora: canon (aprobado por el dueño, 28-09-2026: «componentes grandes») |
+| `large` | Computadora. | canon (aprobado por el dueño, 28-09-2026); confirmado en D16, dueño 06-10-2026 |
+| `2xlarge` | Existe: la misma fila de `xlarge` con `min-height: 44px`. En qué dispositivo va está **pendiente** (ver «Por dispositivo»). | el size: canon (dueño, 04-10-2026: piso táctil 44 en el teléfono); su uso: pendiente |
 | `medium` (default) | No usar en pantallas nuevas. | canon (aprobado por el dueño, 28-09-2026) |
 
 **Usos de hoy que rompen las reglas:**
 
-- **2 en `medium`:** `pages/products/products.html:301` («Horario propio
+- **2 en `medium`:** `pages/products/products.html:303` («Horario propio
   para esta categoría») y `pages/public/privacidad/privacidad.html:132` («Permitir analítica de uso»).
 - **19 `sui-switch` con texto a mano + 1 nativo** que deberían ser este componente: el detalle
   está en el README de `sui-switch`. Ejemplos: `pages/discounts/discounts.html:207`,
@@ -70,11 +71,11 @@ Regla corta: **ajuste con texto → este · ajuste con peso → switch-card · s
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| fila de ajustes | `2xlarge` (fila de 44 como mínimo, switch 48 × 28) | `large` (40 × 24) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
-| ajuste que es la acción principal de la pantalla («Cerrar por hoy») | `2xlarge` | `xlarge` | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| fila de ajustes | `xlarge` (switch 48 × 28; con descripción la fila pasa los 44) | `large` (40 × 24) | D16 (fila de checkbox, radio y switch, dueño 05-10-2026; computadora 06-10-2026) |
+| ajuste que es la acción principal de la pantalla («Cerrar por hoy») | `xlarge` | `xlarge` | mobile: D16. Web `xlarge`: excepción previa a D16 (canon, dueño 28-09-2026), que pone `large` en la computadora y no la menciona. Pendiente de confirmar |
 
 ```html
-<sui-switch-label [size]="bp.isMobile() ? '2xlarge' : 'large'" … />
+<sui-switch-label [size]="bp.tactil() ? 'xlarge' : 'large'" … />
 ```
 
 | size | switch | label | descripción | alto de la fila sin descripción |
@@ -85,13 +86,35 @@ Regla corta: **ajuste con texto → este · ajuste con peso → switch-card · s
 | `2xlarge` | 48 × 28 | 16/24 | 12/16 | **44** (`min-height`) |
 
 El bloque entero se toca, así que con descripción la fila pasa los 44 px sola. Sin descripción
-`xlarge` mide 28: en el teléfono va `2xlarge` (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono), que es la misma fila con
-`min-height: 44px` y todo centrado en vertical. `2xlarge` no es un size del switch: el switch
-interno se queda en `xlarge`.
+`xlarge` mide 28. `2xlarge` es la misma fila con `min-height: 44px` y todo centrado en vertical
+(canon, dueño 04-10-2026: piso táctil 44 en el teléfono). `2xlarge` no es un size del switch: el
+switch interno se queda en `xlarge`.
 
 En large y xlarge el texto sube a 16 px (regla del 03-10-2026): el label va en 16/24; sublabel y
 descripción se quedan en 12.
 
+### Por dispositivo (D16)
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `xlarge` (switch 48 × 28) | con descripción la fila pasa los 44; sin descripción mide 28 (ver pendiente) |
+| celular (380–767 px) | `xlarge` | igual |
+| tablet táctil (`pointer: coarse`) | `xlarge` | se toca con el dedo, aunque mida más de 767 |
+| computadora (`pointer: fine`) | `large` | un paso menos que el celular; no baja a `medium` (D16, dueño 06-10-2026) |
+
+Ultrawide (≥ 1920 px): igual que la computadora (`large`).
+
+**Pendiente: `2xlarge` en la fila sin descripción.** El canon del 04-10-2026 pide una fila de 44 en
+el teléfono, y en este componente eso es `2xlarge`. La fila de D16 (05-10 y 06-10-2026) dice
+`xlarge` para toda la familia y no nombra `2xlarge`. Con descripción no chocan: `xlarge` ya pasa
+los 44, y los 5 usos de hoy la tienen. Sin descripción, `xlarge` deja la fila en 28 y D16 no dice
+si sube a `2xlarge`. Lo decide el dueño; hasta entonces va `xlarge` y, si el ajuste no tiene
+descripción, conviene escribirle una.
+
+En master-pedidos: `[size]="bp.tactil() ? 'xlarge' : 'large'"`. La fila de D16 nombra
+`bp.controlSize()`, pero ese helper mira solo el ancho (`isMobile()`, ≤ 767): en un iPad de 768 o
+más da `large`. `bp.tactil()` también mira el puntero y da lo que pide la tabla.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -139,11 +162,65 @@ Implementa `ControlValueAccessor` (`[(ngModel)]`, `formControlName`).
 - El switch de adentro es el tab stop y toma su nombre del `label` y su descripción de la
   `description` (`aria-labelledby` / `aria-describedby`) (revisión 04-10-2026).
 
+## Bien y mal
+
+Ajuste en una página que también se abre en el teléfono
+
+```html
+<!-- ❌ mal: sin size queda en medium, switch de 32 × 20 (pages/public/privacidad/privacidad.html:132) -->
+<sui-switch-label [flip]="true" label="Permitir analítica de uso"
+  description="Se puede activar o desactivar en cualquier momento. Nada de lo que escribes sale de tu dispositivo."
+  [active]="analiticaActiva()" (activeChange)="cambiarAnalitica($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-switch-label [size]="bp.tactil() ? 'xlarge' : 'large'" [flip]="true" label="Permitir analítica de uso"
+  description="Se puede activar o desactivar en cualquier momento. Nada de lo que escribes sale de tu dispositivo."
+  [active]="analiticaActiva()" (activeChange)="cambiarAnalitica($event)" />
+```
+
+Ajuste dentro de un modal con formulario
+
+```html
+<!-- ❌ mal: sin size queda en medium en el teléfono y en la computadora (pages/products/products.html:303) -->
+<sui-switch-label
+  label="Horario propio para esta categoría"
+  description="Fuera de ese horario, sus productos se ven atenuados y no se pueden agregar al carrito. Sin horario propio, la categoría está disponible siempre."
+  [active]="categoryScheduleEnabled()"
+  [disabled]="categoryScheduleSaving()"
+  (activeChange)="categoryScheduleEnabled.set($event)" />
+```
+
+```html
+<!-- ✅ bien: sin flip, porque vive dentro de un formulario -->
+<sui-switch-label
+  [size]="bp.tactil() ? 'xlarge' : 'large'"
+  label="Horario propio para esta categoría"
+  description="Fuera de ese horario, sus productos se ven atenuados y no se pueden agregar al carrito. Sin horario propio, la categoría está disponible siempre."
+  [active]="categoryScheduleEnabled()"
+  [disabled]="categoryScheduleSaving()"
+  (activeChange)="categoryScheduleEnabled.set($event)" />
+```
+
+Link sin descripción
+
+```html
+<!-- ❌ mal: link solo se dibuja con description; «Qué se mide» no aparece -->
+<sui-switch-label label="Permitir analítica de uso" link="Qué se mide" [(active)]="analitica" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-switch-label [size]="bp.tactil() ? 'xlarge' : 'large'" label="Permitir analítica de uso"
+  description="Nada de lo que escribes sale de tu dispositivo." link="Qué se mide" [(active)]="analitica" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-switch-label
-  [size]="bp.controlSize()"
+  [size]="bp.tactil() ? 'xlarge' : 'large'"
   [flip]="true"
   label="Recibir pedidos"
   description="Desactívalo para cerrar un rato sin tocar el horario."

package/docs/sui-tab-chips/README.md

@@ -41,11 +41,12 @@ secciones → tab menu.**
 > **La guía del DS no tiene este componente**: es una extensión de SUI (la «cat nav» de las apps de
 > delivery). Las reglas marcadas canon están aprobadas; lo que sigue en propuesta espera decisión.
 >
-> Uso medido el 04-10-2026 en `master-pedidos/src/app` (sin `master-preview`, `master-prototipos`,
+> Uso medido el 06-10-2026 en `master-pedidos/src/app` (sin `master-preview`, `master-prototipos`,
 > `mockup-sheets-*`, `dx/*`, `master-rutina`, `master-medico`, `dev-index`):
-> **42 usos en 29 archivos `.html`** (incluye `master-ejercicios`). `[sticky]="true"`: 2 (la carta
+> **44 usos en 31 archivos `.html`** (incluye `master-ejercicios`). `[sticky]="true"`: 2 (la carta
 > del local y `master-ejercicios`). `count`: 5 listas (cifra del 03-10). `[(value)]`: 2; el resto
-> `[value]` + `(valueChange)`. `autoScroll`: 0. `size`: 20, todos `bp.isMobile() ? 'large' : 'medium'`.
+> `[value]` + `(valueChange)`. `autoScroll`: 0. `size`: los 44 lo pasan, 43 con `bp.sizeChips()` y 1
+> con `sizeRango()` (`master-overview`, ver «Por dispositivo»).
 
 ### Para qué se usa (el contenido de los chips)
 
@@ -103,13 +104,16 @@ secciones → tab menu.**
   las franjas de abajo y se parece más a un filtro.
 - **1 con el número dentro del texto:** `pages/notifications/notifications.ts:194`
   (`No leídas (3)` → `count: 3`).
-- **22 sin tamaño por dispositivo.** Los 20 que ya lo tienen (`bp.isMobile() ? 'large' : 'medium'`)
-  entraron el 03-10-2026; los 22 que faltan son casi todos del super admin y de la central. Con D16
-  (05-10-2026) el par es `bp.isMobile() ? 'xlarge' : 'medium'`, y ningún chip queda en `small`.
+- **Resuelto el 06-10-2026: el tamaño por dispositivo.** Con D16 (05-10-2026) el size es
+  `bp.sizeChips()` (`xlarge` en lo táctil, `medium` en la computadora) y ningún chip queda en
+  `small`. De los 44 usos medidos (misma exclusión de arriba), 43 pasan `bp.sizeChips()` y el otro
+  es la excepción de `master-overview` (ver «Por dispositivo»). Fuera de la medición, la guía del
+  super admin tiene 13 sin `size` (quedan en `medium`):
+  `pages/super-admin/master-preview/_guia-moleculas/navegacion.ts` (11) y `fechas.ts:52`, `:119`.
 
 ## Tamaño en mobile y en web
 
-`size` está publicado desde la 0.20.0; la app usa la 0.22.0.
+`size` está publicado desde la 0.20.0; la app usa la 0.24.1.
 
 Alto del chip: `small` 32 px (`height: 32px`) · `medium` 36 px (el de siempre, default; sin alto
 fijo: 8 + 8 de padding + `line-height: normal` + 2 de borde, 36 medido en Storybook con Satoshi) ·
@@ -130,9 +134,31 @@ toca (canon, dueño, 05-10-2026, D16).
 | filtros en la cabecera de una tabla | — | `medium` | canon (dueño, 05-10-2026, D16): nada en `small` |
 
 ```html
-<sui-tab-chips [chips]="filtros" [(value)]="filtro" [size]="bp.isMobile() ? 'xlarge' : 'medium'" />
+<sui-tab-chips [chips]="filtros" [(value)]="filtro" [size]="bp.sizeChips()" />
 ```
 
+### Por dispositivo (D16)
+
+Fila de `tab-chips` en la tabla de D16 (dueño, 05-10-2026): se toca, así que va grande en todo lo
+táctil y `medium` en la computadora.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `xlarge` (44) | D16 pide `medium` con área tocable de 44, pero el DS todavía no estira el área de los `medium` (36). Hasta que lo haga, se queda el grande |
+| celular (380–767 px) | `xlarge` (44) | el size que llega al piso de 44 |
+| tablet táctil (`pointer: coarse`) | `xlarge` (44) | se toca con el dedo, aunque mida más de 767 |
+| computadora (`pointer: fine`) | `medium` (36) | también en filtros de tablas; `small` no se usa |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`. `large` (40) no sale de ningún
+dispositivo: no llega a 44.
+
+En master-pedidos: `[size]="bp.sizeChips()"`.
+
+Excepción que hay hoy: `pages/super-admin/master-overview/master-overview.ts:165` (`sizeRango()`)
+pasa `medium` en el teléfono porque los cinco períodos en `xlarge` no entran en los 398 px de un
+celular de 430. Deja el chip en 36, debajo del piso de 44, aunque la fila se desliza. Pendiente de
+confirmar con el dueño; no se copia a otras pantallas.
+
 ## Pista de scroll (canon, aprobado por el dueño el 05-10-2026)
 
 Desde la **0.24.0**. La barra de scroll está oculta, así que con chips que no entran no se notaba
@@ -217,15 +243,59 @@ type SuiTabChipsSize = 'small' | 'medium' | 'large' | 'xlarge';
 - **El chip activo es oscuro** (`bg-strong-950`), no naranja: es el estilo del componente, no se
   cambia por pantalla.
 
+## Bien y mal
+
+El número de pendientes
+
+```html
+<!-- ❌ mal: el número va dentro del label (armado en pages/notifications/notifications.ts:194) -->
+<sui-tab-chips [size]="bp.sizeChips()" [(value)]="tab"
+  [chips]="[{ value: 'todas', label: 'Todas' }, { value: 'no_leidas', label: 'No leídas (3)' }]" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-chips [size]="bp.sizeChips()" [(value)]="tab"
+  [chips]="[{ value: 'todas', label: 'Todas' }, { value: 'no_leidas', label: 'No leídas', count: 3 }]" />
+```
+
+Dos modos de la misma vista
+
+```html
+<!-- ❌ mal: 2 opciones excluyentes de la misma vista; no es un filtro (pages/super-admin/master-semanas/master-semanas.html:80) -->
+<sui-tab-chips [size]="bp.sizeChips()" [chips]="vistas" [value]="vista()"
+  (valueChange)="vista.set($any($event))" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control [size]="bp.tactil() ? '2xlarge' : 'medium'" [tabs]="vistas" [(active)]="vista" />
+```
+
+Chips de sugerencia junto a un texto libre (los chips con su propio signal y «Otro motivo» primero en `chipsMotivo`)
+
+```html
+<!-- ❌ mal: chips y textarea comparten el signal; cada tecla rebota al primer chip -->
+<sui-tab-chips [size]="bp.sizeChips()" [chips]="motivos" [(value)]="motivo" />
+<sui-textarea label="Motivo" [(value)]="motivo" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-tab-chips [size]="bp.sizeChips()" [chips]="chipsMotivo" [value]="chip()" (valueChange)="elegirChip($event)" />
+<sui-textarea label="Motivo" [(value)]="motivo" />
+```
+
 ## Ejemplo
 
 ```html
 <!-- Filtro de estado: «Todos» primero -->
 <sui-tab-chips
+  [size]="bp.sizeChips()"
   [chips]="[{ value: 'todos', label: 'Todos' }, { value: 'activos', label: 'Activos' },
             { value: 'entregados', label: 'Entregados' }, { value: 'cancelados', label: 'Cancelados' }]"
   [(value)]="filtro" />
 
 <!-- Categorías de la carta -->
-<sui-tab-chips [chips]="categorias()" [value]="categoria()" (valueChange)="irA($event)" [sticky]="true" />
+<sui-tab-chips [size]="bp.sizeChips()" [chips]="categorias()" [value]="categoria()" (valueChange)="irA($event)" [sticky]="true" />
 ```