@ajuarezso/sui-design-system 0.24.1 → 0.25.1

package/docs/sui-filter/README.md

@@ -39,8 +39,8 @@ panel (header + items + footer) · un filtro suelto → compact-select.**
 ## Qué variante usar
 
 > **La guía del DS no tiene página de filtros**: estas piezas salen solo del Figma del DS
-> («Filters»: HorizontalFilter y VerticalFilter). Todo lo de abajo es **propuesta, falta
-> aprobación**, salvo lo marcado canon.
+> («Filters»: HorizontalFilter y VerticalFilter). Las reglas marcadas canon están aprobadas; lo
+> que sigue **pendiente** (el área de 44 de `sui-filter-item` en mobile, P19) espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-dropdown-menu`):
 > **0 usos**. Solo aparecen en la vitrina `master-preview`.
@@ -49,8 +49,8 @@ panel (header + items + footer) · un filtro suelto → compact-select.**
 
 | variant | cuándo | fuente |
 |---|---|---|
-| `table` (default) | Arriba de una tabla: a la izquierda la vista (`sui-segmented-control`), a la derecha el buscador (`sui-input type="search"`) y el orden (`sui-select` o `sui-compact-select`). | propuesta (composición del Figma) |
-| `calendar` | Arriba de una vista por fechas: a la izquierda «Hoy» + el rango (`sui-button-group`), a la derecha el buscador. | propuesta (composición del Figma) |
+| `table` (default) | Arriba de una tabla: a la izquierda la vista (`sui-segmented-control`), a la derecha el buscador (`sui-input type="search"`) y el orden (`sui-select` o `sui-compact-select`). | canon (aprobado por el dueño, 05-10-2026, bloque B9), composición del Figma |
+| `calendar` | Arriba de una vista por fechas: a la izquierda «Hoy» + el rango (`sui-button-group`), a la derecha el buscador. | canon (aprobado por el dueño, 05-10-2026, bloque B9), composición del Figma |
 
 `variant` solo marca el host (`data-sui-variant`): **no cambia el layout**. Lo que se ve lo deciden
 los controles que se proyectan.
@@ -59,12 +59,12 @@ los controles que se proyectan.
 
 | pieza | regla | fuente |
 |---|---|---|
-| `sui-filter-item` `active` | La categoría abierta (la que muestra sus opciones al lado): fondo gris, texto negro, flecha a la derecha. | propuesta (estados del Figma) |
-| `sui-filter-item` `leftIcon` | Un ícono por categoría si ayuda a ubicarla («Estado», «Local», «Repartidor»). | propuesta |
+| `sui-filter-item` `active` | La categoría abierta (la que muestra sus opciones al lado): fondo gris, texto negro, flecha a la derecha. | según el código (estados del Figma) |
+| `sui-filter-item` `leftIcon` | Un ícono por categoría si ayuda a ubicarla («Estado», «Local», «Repartidor»). | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `sui-filter-panel-header` `clear` | `clear=true` dice «Limpiar» (en español desde el 04-10-2026); un string lo cambia. | canon (CANON-SUI §5: copy en español) |
 | `sui-filter-panel-footer` | «Limpiar» a la izquierda (`stroke neutral`), «Aplicar» a la derecha (`filled primary`), mitad y mitad. | canon (orden de `sui-modal-footer`, CLAUDE.md «Botones») |
-| «Limpiar» en header **y** footer | Elegir uno. Con el footer, el header va sin link. | propuesta |
-| `applyButton` deshabilitado | `{ label: 'Aplicar', disabled: !cambio() }` mientras no se toca nada. | propuesta |
+| «Limpiar» en header **y** footer | Elegir uno. Con el footer, el header va sin link. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `applyButton` deshabilitado | `{ label: 'Aplicar', disabled: !cambio() }` mientras no se toca nada. | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 
 ## Tamaño en mobile y en web
 
@@ -72,20 +72,42 @@ Ninguna pieza cambia sola en mobile, salvo la barra, que apila sus dos lados por
 
 | pieza | mobile | web | fuente |
 |---|---|---|---|
-| `sui-filter-bar` | sin tamaño; los controles adentro van `large` (48) | sin tamaño; los controles `small` (36) | propuesta (igual que `sui-compact-select` en una barra) |
-| `sui-filter-item` | 36 de alto, no se puede cambiar: debajo de los 44 del dedo | 36 | propuesta |
-| `sui-filter-panel-footer` | `medium` (40) es lo más grande que tiene; en mobile, mejor `sui-modal-footer` (48) dentro de un `sui-modal-sheet` | `small` (36, default) | canon para el 48 de mobile (CLAUDE.md: footer de modal `large`); el resto, propuesta |
+| `sui-filter-bar` | sin tamaño; los controles adentro van `large` (48) | sin tamaño; los controles `medium` (40) | canon (D16, dueño 05-10-2026) |
+| `sui-filter-item` | 36 de alto, no se puede cambiar: debajo de los 44 del dedo | 36 | pendiente (P19: área invisible de 44 o no usarlo en mobile) |
+| `sui-filter-panel-footer` | `medium` (40) es lo más grande que tiene; en mobile, mejor `sui-modal-footer` (48) dentro de un `sui-modal-sheet` | `medium` (40) | canon para el 48 de mobile (CLAUDE.md: footer de modal `large`); web `medium` (40): canon (dueño, 05-10-2026, D16), reemplaza el `small` del bloque B1 (`small` es el default del componente: hay que pasarlo) |
 | `sui-filter-panel-header` | sin tamaño | sin tamaño | — |
 
 ```html
 <sui-filter-bar>
-  <sui-segmented-control slot="start" … />
+  <sui-segmented-control slot="start" [size]="bp.tactil() ? '2xlarge' : 'medium'" … />
   <div slot="end">
-    <sui-input type="search" [size]="bp.isMobile() ? 'large' : 'small'" placeholder="Buscar pedido…" … />
+    <sui-input type="search" [size]="bp.sizeControl()" placeholder="Buscar pedido…" … />
   </div>
 </sui-filter-bar>
 ```
 
+### Por dispositivo (D16)
+
+Las piezas no tienen un `size` propio (salvo el pie): lo que cambia por dispositivo son los
+controles que se proyectan en la barra. Fuente: D16, dueño 05-10-2026 (fila `filter`).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | sin regla en la tabla (`—`) | la fila `filter` de D16 no lo define; `bp.sizeControl()` da `large`, igual que en el celular, mientras el DS no estire a 44 el área de los `medium` |
+| celular (380–767) | controles `large` · segmented `2xlarge` | el panel va en un `sui-modal-sheet` con `sui-modal-footer` (48), no con este pie; el área de 44 de `sui-filter-item` está pendiente (P19) |
+| tablet táctil (`pointer: coarse`) | controles `large` · segmented `2xlarge` | se toca como un celular: el panel lleva `sui-modal-footer` (48) en vez de este pie, que llega solo a `medium` (40). D16 no fija el pie en la tablet; esto sigue la columna «mobile» de arriba. El área de 44 de `sui-filter-item` está pendiente (P19), igual que en el celular |
+| computadora (`pointer: fine`) | controles `medium` · `sui-filter-panel-footer` `medium` | el default del pie es `small`: hay que pasarlo |
+
+En el ultrawide, igual que en la computadora: el espacio extra va al ancho de la tabla, no a
+controles más grandes.
+
+En master-pedidos: `[size]="bp.sizeControl()"` en el `sui-input`, `sui-select` o
+`sui-compact-select` de la barra, `[size]="bp.tactil() ? '2xlarge' : 'medium'"` en el
+`sui-segmented-control` (no tiene helper) y `size="medium"` fijo en `sui-filter-panel-footer`,
+que solo se usa en la computadora (solo tiene `small` y `medium`: `bp.sizeControl()` le pasaría un
+`large` que no existe); con `bp.tactil()` el panel lleva `sui-modal-footer` en su lugar. No uses
+`bp.isMobile() ? 'large' : 'medium'`: deja la tablet táctil en `medium`.
+
 ## API
 
 <!-- api:inicio -->
@@ -159,12 +181,59 @@ de `sui-drawer-footer`).
 - El footer no llega a `large`: en mobile queda más chico que el footer de cualquier modal.
 - `disabled` del item usa opacidad (no está en el Figma).
 
+## Bien y mal
+
+> Hoy no hay usos de estas piezas fuera de la vitrina `master-preview`: los pares salen de las
+> trampas de este README.
+
+Pie del panel en la computadora
+
+```html
+<!-- ❌ mal: sin size queda en small (36), y D16 no usa small -->
+<sui-filter-panel-footer (clear)="limpiar()" (apply)="aplicar()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-filter-panel-footer size="medium" (clear)="limpiar()" (apply)="aplicar()" />
+```
+
+«Limpiar» en dos lugares
+
+```html
+<!-- ❌ mal: «Limpiar» en la cabecera y en el pie; se elige uno -->
+<sui-filter-panel-header label="Filtros" [clear]="true" (clearClick)="limpiar()" />
+<sui-filter-panel-footer size="medium" (clear)="limpiar()" (apply)="aplicar()" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-filter-panel-header label="Filtros" leftIcon="equalizer-line" />
+<sui-filter-panel-footer size="medium" (clear)="limpiar()" (apply)="aplicar()" />
+```
+
+Buscador de la barra
+
+```html
+<!-- ❌ mal: isMobile deja la tablet táctil en medium (40), debajo de los 44 -->
+<sui-filter-bar>
+  <sui-input slot="end" type="search" [size]="bp.isMobile() ? 'large' : 'medium'" />
+</sui-filter-bar>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-filter-bar>
+  <sui-input slot="end" type="search" [size]="bp.sizeControl()" placeholder="Buscar pedido…" />
+</sui-filter-bar>
+```
+
 ## Ejemplo
 
 ```html
 <!-- Panel de filtros en web, anclado a un botón «Filtros» -->
 <sui-dropdown-menu #filtros="suiDropdownMenu" [minWidth]="320">
-  <sui-button trigger variant="stroke" color="neutral" size="small">Filtros</sui-button>
+  <sui-button trigger variant="stroke" color="neutral" size="medium">Filtros</sui-button>
   <ng-template suiDropdownPanel>
     <sui-filter-panel-header label="Filtros" leftIcon="equalizer-line" />
     <div role="listbox" aria-label="Categorías de filtro">

package/docs/sui-flag/README.md

@@ -19,7 +19,8 @@ nada a nadie.
 
 ## Qué variante usar
 
-> **La guía del DS no tiene este componente.** Todo es **propuesta, falta aprobación**.
+> **La guía del DS no tiene este componente.** Las reglas marcadas canon están aprobadas y las de
+> «según el código» describen el componente; lo que sigue en **propuesta** espera decisión.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usan por dentro
 > `sui-select`, `sui-compact-select`, `sui-compact-select-for-input`, `sui-inline-select`,
@@ -32,17 +33,17 @@ nada a nadie.
 |---|---|---|---|
 | `xs` | 16 | Dentro de un select o un tag (así lo usa el DS). | propuesta |
 | `sm` | 20 | El prefijo de un teléfono. | propuesta |
-| `md` (default) | 24 | Fila de una lista. | propuesta |
+| `md` (default) | 24 | Fila de una lista. | canon (aprobado por el dueño, 05-10-2026, bloque B1) |
 | `lg` | 32 | Dentro de una card. | propuesta |
-| `xl` | 48 | No usar hoy. | propuesta |
-| `full` | 100 % | Llena su caja (la caja manda). | propuesta |
+| `xl` | 48 | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `full` | 100 % | Llena su caja (la caja manda). | según el código |
 
 ### `name` y `ariaLabel`
 
 | input | cuándo | fuente |
 |---|---|---|
-| `name` | El slug en inglés y en kebab-case: `peru`, `venezuela`, `united-states`. Son 262. | propuesta |
-| `ariaLabel` | El nombre del país en español, si no está escrito al lado. Sin él, es decorativa. | propuesta |
+| `name` | El slug en inglés y en kebab-case: `peru`, `venezuela`, `united-states`. Son 262. | según el código |
+| `ariaLabel` | El nombre del país en español, si no está escrito al lado. Sin él, es decorativa. | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 Usos de hoy que rompen la regla: **0**.
 
@@ -51,7 +52,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 |
 |---|---|---|
@@ -59,11 +63,31 @@ el celular (cliente, repartidor) va directo el valor de mobile. Todo es **propue
 | fila de una lista | `md` (24) | `sm` (20) |
 
 ```html
-<sui-flag name="peru" [size]="bp.isMobile() ? 'sm' : 'xs'" ariaLabel="Perú" />
+<sui-flag name="peru" [size]="bp.celular() ? 'sm' : 'xs'" ariaLabel="Perú" />
 ```
 
 La bandera no se toca: el área táctil es la del select que la contiene.
 
+### Por dispositivo (D16)
+
+La bandera no se toca: sube un paso **solo en el celular de 380 px o más**. Fuente: D16, dueño
+05-10-2026 (P1 b).
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380) | valor «web» (`xs` en el prefijo, `sm` en una fila) | no se toca: no sube aunque sea un celular |
+| celular (380–767) | valor «mobile» (`sm` en el prefijo, `md` en una fila) | un paso más que en la computadora |
+| tablet táctil (`pointer: coarse`) | valor «web» (`xs` / `sm`) | no se toca: el puntero no cambia nada |
+| computadora (`pointer: fine`) | valor «web» (`xs` / `sm`) | |
+
+En el ultrawide, igual que en la computadora: el espacio extra va a más columnas, no a banderas
+más grandes.
+
+En master-pedidos no hay helper: `[size]="bp.celular() ? 'sm' : 'xs'"` en el prefijo y
+`[size]="bp.celular() ? 'md' : 'sm'"` en una fila. No uses `bp.isMobile()`: incluye el celular
+chico, que va con el valor de web. Dentro de un select o un compact-select no se pasa nada: el
+componente elige el tamaño de su bandera.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -93,6 +117,47 @@ Outputs: ninguno.
 - **El nombre va en inglés** y con las grafías del set (`slovania`, `mauritus`, `taijikistan`):
   copia el slug de `SUI_FLAG_NAMES`, no lo escribas de memoria.
 
+## Bien y mal
+
+> Hoy no hay usos directos fuera de la vitrina `master-preview`: los pares salen de las reglas
+> de este README.
+
+Bandera de adorno
+
+```html
+<!-- ❌ mal: la app es solo Perú; la bandera no le dice nada a nadie -->
+<p><sui-flag name="peru" size="sm" /> Delivery en todo el Perú</p>
+```
+
+```html
+<!-- ✅ bien -->
+<p>Delivery en todo el Perú</p>
+```
+
+País sin nombre al lado
+
+```html
+<!-- ❌ mal: sin ariaLabel es decorativa y el lector de pantalla no dice el país -->
+<sui-flag name="venezuela" [size]="bp.celular() ? 'md' : 'sm'" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-flag name="venezuela" [size]="bp.celular() ? 'md' : 'sm'" ariaLabel="Venezuela" />
+```
+
+Tamaño por dispositivo
+
+```html
+<!-- ❌ mal: isMobile sube la bandera también en el celular chico (< 380), que va con el valor de web -->
+<sui-flag name="peru" [size]="bp.isMobile() ? 'sm' : 'xs'" ariaLabel="Perú" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-flag name="peru" [size]="bp.celular() ? 'sm' : 'xs'" ariaLabel="Perú" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-form-hint/README.md

@@ -32,7 +32,7 @@ Regla corta: **ayuda o error de un control sin hint propio → form-hint · camp
 > y opcional. No da reglas de largo ni de copy.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`; las cifras
-> siguen iguales el 04-10-2026, las líneas de abajo están actualizadas a esa fecha):
+> siguen iguales el 04-10-2026, las líneas de abajo se revisaron el 06-10-2026):
 > **36 usos en 18 archivos**: 11 `error`, 25 `neutral` (24 por default y 1 explícito), 0
 > `disabled`; 2 con `icon` propio (`information-line`). Hay además **al menos 14 hints escritos a
 > mano** con clases propias (`__form-hint`, `__hint`).
@@ -51,8 +51,8 @@ Regla corta: **ayuda o error de un control sin hint propio → form-hint · camp
 |---|---|---|
 | `message` | Hasta 8 palabras (mediana 6). Si no cabe, es un `sui-alert`. Sin punto final si es una frase corta; con punto si son dos oraciones. | canon (`docs/CANON-SUI.md` §5.4 el largo; `docs/VOZ-Y-ESCRITURA.md` el punto) |
 | `icon` sin pasar | El de la variante (ninguno en `neutral`, info en `error` y `disabled`). | según la guía del DS (ícono opcional); default de SUI |
-| `icon="…"` en `neutral` | Solo cuando la ayuda es una advertencia que conviene notar («No reconocimos el distrito…»). | propuesta, falta aprobación (2 usos hoy) |
-| `[icon]="null"` | Quita el ícono también en `error`. No usar: el error necesita algo más que el color. | propuesta, falta aprobación |
+| `icon="…"` en `neutral` | Solo cuando la ayuda es una advertencia que conviene notar («No reconocimos el distrito…»). | canon (aprobado por el dueño, 05-10-2026, bloque B9) (2 usos hoy) |
+| `[icon]="null"` | Quita el ícono también en `error`. No usar: el error necesita algo más que el color. | canon (aprobado por el dueño, 05-10-2026, bloque B5) |
 
 **Usos de hoy que rompen las reglas:**
 
@@ -65,11 +65,11 @@ Regla corta: **ayuda o error de un control sin hint propio → form-hint · camp
   («Pausa tu sucursal…», bajo el título de la card), `:61`, `pages/drivers/drivers.html:29`,
   `pages/driver/driver-schedule/driver-schedule.html:92`.
 - **12 de más de 8 palabras** (4 son los subtítulos de arriba) → acortar, o `sui-alert` si de
-  verdad hace falta todo: `pages/super-admin/master-users/master-users.html:66` (26 palabras),
-  `pages/orders/orders.html:589` (23), `pages/driver/driver-order-detail/driver-order-detail.html:868` (23),
-  `pages/envios/envios.html:401` (15).
+  verdad hace falta todo: `pages/super-admin/master-users/master-users.html:68` (26 palabras),
+  `pages/orders/orders.html:590` (23), `pages/driver/driver-order-detail/driver-order-detail.html:898` (23),
+  `pages/envios/envios.html:402` (15).
 - **Al menos 14 hints a mano** con clases propias. Ejemplos: `pages/discounts/discounts.html:205`
-  (`discounts__form-hint`), `components/settings-panel/settings-panel.html:93`,
+  (`discounts__form-hint`), `components/settings-panel/settings-panel.html:95`,
   `pages/promociones/promociones.html:181`.
 
 ## Tamaño en mobile y en web
@@ -80,6 +80,12 @@ Regla corta: **ayuda o error de un control sin hint propio → form-hint · camp
 
 Es texto que no se toca: el mismo tamaño en las dos plataformas está bien.
 
+### Por dispositivo (D16)
+
+No aplica: no tiene `size` (la letra es fija de 12/16 px y no se toca), así que es la misma en el
+celular chico, el celular, la tablet táctil, la computadora y el ultrawide. En master-pedidos no
+lleva `bp`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -115,6 +121,49 @@ Outputs: ninguno.
   (04-10-2026). Para enlazarlo a un control propio, pon `id` en el host y apúntalo con
   `aria-describedby`; los campos del DS ya lo hacen solos.
 
+## Bien y mal
+
+Ayuda debajo de un campo de texto
+
+```html
+<!-- ❌ mal: sui-input ya trae su hint (pages/driver-onboarding/step-info/step-info.html:50) -->
+<sui-input [size]="bp.sizeControl()" [errorMessage]="nameError() || null" … />
+@if (!nameError()) { <sui-form-hint message="Como aparece en tu DNI." /> }
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input [size]="bp.sizeControl()" hint="Como aparece en tu DNI"
+           [error]="!!nameError()" [errorMessage]="nameError() || null" … />
+```
+
+Subtítulo de una card
+
+```html
+<!-- ❌ mal: no es ayuda de un campo, es el texto de la sección (pages/schedule/schedule.html:17) -->
+<h2 class="schedule__card-title">Estado de la sucursal</h2>
+<sui-form-hint message="Pausa tu sucursal sin perder el horario que ya configuraste." />
+```
+
+```html
+<!-- ✅ bien -->
+<h2 class="schedule__card-title">Estado de la sucursal</h2>
+<p class="schedule__card-subtitle">Pausa tu sucursal sin perder el horario que ya configuraste.</p>
+```
+
+Explicación de dos oraciones
+
+```html
+<!-- ❌ mal: 23 palabras; pasa las 8 del hint (pages/orders/orders.html:590) -->
+<sui-form-hint message="Si eliges un motivo de la lista, el cliente lo verá. Si escribes uno propio, verá “El local no pudo preparar tu pedido”." />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-alert variant="info"
+           description="Si eliges un motivo de la lista, el cliente lo verá. Si escribes uno propio, verá «El local no pudo preparar tu pedido»." />
+```
+
 ## Ejemplo
 
 ```html

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

@@ -48,8 +48,8 @@ Regla corta: **campo de texto → su propio `[label]` · grupo o control sin lab
 | `label` | Siempre. Una a tres palabras, sentence case, sin dos puntos ni punto final. | según la guía del DS (pieza); largo y forma según `docs/CANON-SUI.md` §5.4 |
 | `required` | Campo obligatorio: asterisco **rojo** (`state-error-base`). | según la guía del DS (asterisco = obligatorio); el color es canon (`docs/CANON-SUI.md` §4: excepción documentada) |
 | `sublabel` | «(Opcional)» en un formulario donde casi todo es obligatorio. Nunca el «opcional» dentro del `label`. | según la guía del DS (ejemplo «(Optional)») |
-| `tooltip` | Ayuda corta que no cabe en la pantalla y no hace falta para llenar el campo. Si hace falta, va visible en `sui-form-hint`. | propuesta, falta aprobación |
-| `link` | Una acción sobre el campo, a la derecha: «Cambiar» (el distrito). | propuesta (ya es práctica de la app: 2 usos) |
+| `tooltip` | Ayuda corta que no cabe en la pantalla y no hace falta para llenar el campo. Si hace falta, va visible en `sui-form-hint`. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `link` | Una acción sobre el campo, a la derecha: «Cambiar» (el distrito). | canon (aprobado por el dueño, 05-10-2026, bloque B9); ya es práctica de la app: 2 usos |
 | `disabled` | El campo de abajo está deshabilitado. | según la guía del DS |
 | `for` | Siempre que el control de abajo tenga `id`. | propuesta, falta aprobación |
 
@@ -59,7 +59,7 @@ Regla corta: **campo de texto → su propio `[label]` · grupo o control sin lab
 |---|---|---|
 | `medium` (default) | Lo normal. | según la guía del DS (único tamaño) |
 | `small` | Es **idéntico** a `medium` (mismo CSS). No aporta. | — |
-| `xsmall` | Junto a un campo `xsmall` en una tabla o filtro denso (12 px). | propuesta, falta aprobación |
+| `xsmall` | No usar: con D16 no hay campos `xsmall`; en una tabla o filtro va `medium`. | canon (dueño, 05-10-2026, D16), reemplaza el «cuándo» del bloque B1 |
 
 La regla de controles grandes del dueño (28-09-2026) no aplica aquí: el `size` del label es
 tipografía, no área táctil.
@@ -78,19 +78,26 @@ tipografía, no área táctil.
 - **1 encima de un `sui-textarea`**, que ya trae su `[label]`: `pages/promociones/promociones.html:201`
   («Descripción»).
 - **3 con un switch armado a mano al lado → `sui-switch-label`:** `pages/discounts/discounts.html:204`,
-  `:316`; `components/add-product-modal/add-product-modal.html:204`.
+  `:316`; `components/add-product-modal/add-product-modal.html:206`.
 
 ## Tamaño en mobile y en web
 
 | uso | mobile | web |
 |---|---|---|
 | rótulo de un grupo o control | `medium` (14 px) | `medium` (14 px) |
-| junto a un campo `xsmall` en una tabla o filtro denso | no aplica | `xsmall` (12 px) |
+| junto a un campo de una tabla o filtro | no aplica | `medium` (14 px): ya no hay campos `xsmall` (D16) |
 
 No necesita `bp`: es texto, no se toca. Lo único tocable es el `link` («Cambiar»), un
 `sui-link-button` de 12 px **sin tamaño para mobile**: su área táctil es la del texto. Si en
 mobile esa acción importa, conviene un botón aparte.
 
+### Por dispositivo (D16)
+
+No aplica: el `size` es tipografía, no área táctil, y no depende del dispositivo. Va `medium`
+(14 px) en el celular chico, el celular, la tablet táctil, la computadora y el ultrawide;
+`small` dibuja igual y `xsmall` no se usa (D16, dueño 05-10-2026: nada en `small`/`xsmall`).
+En master-pedidos: sin `[size]` (el default `medium` ya es el correcto) y sin `bp`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -131,6 +138,51 @@ mobile esa acción importa, conviene un botón aparte.
   `rel="noopener noreferrer"`). Se pinta en gris, empujado a la derecha.
 - El ícono de info es gris muy claro a propósito (baja jerarquía); se oscurece al pasar el mouse.
 
+## Bien y mal
+
+Campo de texto con su rótulo
+
+```html
+<!-- ❌ mal: sui-input ya dibuja su label y su asterisco (pages/driver-onboarding/step-info/step-info.html:37) -->
+<sui-form-label label="Nombre completo" [required]="true" for="ob-name" />
+<sui-input [size]="bp.sizeControl()" type="text" [(value)]="nombre" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-input [size]="bp.sizeControl()" type="text" label="Nombre completo" [required]="true" [(value)]="nombre" />
+```
+
+Título de una sección
+
+```html
+<!-- ❌ mal: «Datos personales» titula la sección, no un campo (pages/customer/checkout/checkout.html:187) -->
+<section class="checkout__section">
+  <sui-form-label label="Datos personales" size="medium" />
+```
+
+```html
+<!-- ✅ bien -->
+<section class="checkout__section">
+  <h2 class="checkout__section-title">Datos personales</h2>
+```
+
+Rótulo de un switch
+
+```html
+<!-- ❌ mal: label, ayuda y switch armados a mano (pages/discounts/discounts.html:204) -->
+<sui-form-label label="Un uso por cliente" />
+<span class="discounts__form-hint">Si activas esto, cada cliente solo podrá usar el cupón…</span>
+<sui-switch [size]="bp.controlSize()" [checked]="unUso()" (checkedChange)="unUso.set($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-switch-label [size]="bp.controlSize()" label="Un uso por cliente"
+                  description="Cada cliente usa el cupón una sola vez"
+                  [active]="unUso()" (activeChange)="unUso.set($event)" />
+```
+
 ## Ejemplo
 
 ```html

package/docs/sui-href/README.md

@@ -44,6 +44,15 @@ No tiene variantes. Lo que decide qué hace es la URL:
 
 No aplica: es una directiva, no dibuja nada. El tamaño es el del componente que la usa.
 
+### Por dispositivo (D16)
+
+No aplica: es una directiva sobre un `<a>` y **no tiene `size`** ni dibuja nada. El tamaño por
+dispositivo lo pone el componente que la usa (`sui-link-button`, `sui-compact-button`,
+`sui-fancy-button`…), cada uno con su fila de D16 (dueño, 05-10-2026). Lo mismo en el ultrawide.
+
+En master-pedidos: nada que pasar a `suiHref`; el `[size]` va en el componente que la lleva
+(p. ej. `<sui-fancy-button [size]="bp.sizeControl()" href="/cliente/pedidos">`).
+
 ## API
 
 <!-- api:inicio -->
@@ -70,6 +79,44 @@ Solo se aplica a `<a>` (`selector: a[suiHref]`).
 - Un `href` relativo sin `/` inicial (`pedidos/123`) **no** se intercepta: lo resuelve el
   navegador contra la URL actual y recarga. Pasa rutas absolutas.
 
+## Bien y mal
+
+Link interno en una plantilla de la app
+
+```html
+<!-- ❌ mal: no marca el link activo y la app usa routerLink (98 usos, 0 de suiHref) -->
+<a suiHref="/cliente/pedidos">Mis pedidos</a>
+```
+
+```html
+<!-- ✅ bien -->
+<a routerLink="/cliente/pedidos" routerLinkActive="activo">Mis pedidos</a>
+```
+
+Ruta sin `/` inicial (el `href` que la app le pasa a un componente del DS)
+
+```html
+<!-- ❌ mal: sui-link-button lo pinta con suiHref, pero un href relativo no se intercepta; el navegador lo resuelve y recarga el WebView -->
+<sui-link-button [href]="'pedidos/' + id()">Ver pedido</sui-link-button>
+```
+
+```html
+<!-- ✅ bien -->
+<sui-link-button [href]="'/cliente/pedidos/' + id()">Ver pedido</sui-link-button>
+```
+
+`href` configurable dentro de un componente del DS
+
+```html
+<!-- ❌ mal: con [attr.href] un link interno recarga la app entera (en Capacitor pierde el estado) -->
+<a class="sui-link-button" [attr.href]="href()" [attr.target]="target()"><ng-content /></a>
+```
+
+```html
+<!-- ✅ bien -->
+<a class="sui-link-button" [suiHref]="href()" [attr.target]="target()"><ng-content /></a>
+```
+
 ## Ejemplo
 
 ```html