@ajuarezso/sui-design-system 0.24.1 → 0.25.1

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

@@ -34,40 +34,46 @@ tab-chips · secciones → tab menu.**
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
 > **5 usos en 4 archivos**. Tamaños: 3 `small`, 1 `medium`, 1 sin `size` (`medium`). 1 con solo
-> íconos (vista cuadrícula / lista del catálogo).
+> íconos (vista cuadrícula / lista del catálogo). El 06-10-2026 ya eran **9 usos en 7 archivos**
+> (ver «Usos de hoy» abajo).
 
 ### `size`
 
 | 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 |
+| `2xlarge` | Celular y tablet táctil: el único que llega a 44 px por segmento. | canon (dueño, 04-10-2026: piso táctil 44 en el teléfono) y D16, dueño 05-10-2026 |
+| `xlarge` | No se usa: 40 px no llega a 44 en el teléfono y sobra en la computadora. Ninguna pantalla de la app lo usa (medido el 06-10-2026; solo aparece en la vitrina `master-preview`). | D16, dueño 05-10-2026 (antes «mobile», 28-09-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:**
 
 - **2 dentro de un borrador que se guarda después (a discutir):**
-  `pages/super-admin/master-settings/master-settings.html:303` (modo de envío: «Por distancia» /
-  «Precio único») y `:336` («Por calle» / «En línea recta»). La guía dice que se aplica de
+  `pages/super-admin/master-settings/master-settings.html:281` (modo de envío: «Por distancia» /
+  «Precio único») y `:314` («Por calle» / «En línea recta»). La guía dice que se aplica de
   inmediato; aquí la elección espera al «Guardar». Es trabajo de `sui-radio-card`.
-- **1 con textos largos, a verificar en mobile:** `pages/super-admin/master-roles/master-roles.html:47`
+- **1 con textos largos, a verificar en mobile:** `pages/super-admin/master-roles/master-roles.html:48`
   («Administrador de ciudad» / «Jefe de operaciones»). Por ancho de texto quedan apretados cerca
   del borde a 390 px; no se midió en la pantalla real.
-- **2 en `small` con texto** (la propuesta deja `small` solo para íconos): `master-settings.html:303`
-  y `:336`. El tercero en `small`, `pages/products/products.html:81`, está bien: solo íconos.
-- **5 sin tamaño por plataforma** (todos fijos): ninguno cambia a `xlarge` en mobile. Ejemplo:
-  `pages/driver/driver-schedule/driver-schedule.html:30` (`size="medium"` en una pantalla del
-  repartidor, que se usa en el teléfono).
+- **2 en `small` con texto** (D16: `small` no se usa): `master-settings.html:281` y `:314`. El
+  tercero, `pages/products/products.html:83`, va en `small` en la computadora con solo íconos: con
+  D16 también pasa a `medium`.
+- **Sin tamaño por dispositivo** (revisado el 06-10-2026): `master-roles.html:48` (sin `size`) y
+  `pages/super-admin/master-categorias/master-categorias.html:124` (`medium` fijo) se quedan en 28
+  en el teléfono; `master-settings.html:224` usa `tallaServicio()` (`master-settings.ts:452`), que
+  da `large` (32) en el teléfono. Los que cortan con `bp.isMobile()`
+  (`pages/driver/driver-schedule/driver-schedule.html:31`, `pages/overview/overview.html:45`,
+  `pages/driver/driver-dashboard/driver-dashboard.html:865`) dejan la tablet táctil en `medium`.
 
 ## Tamaño en mobile y en web
 
@@ -80,18 +86,36 @@ En large, xlarge y 2xlarge el texto sube a 16 px (regla del 03-10-2026): Label/M
 `large` el padding del segmento con texto bajó de 6 a 4 para que siga midiendo 32.
 
 **`2xlarge` es el size del teléfono**: 44 px por segmento, con texto o solo ícono (canon (dueño,
-04-10-2026): piso táctil 44 en el teléfono). `xlarge` (40) no cambia y queda para las pantallas que
-ya lo usan.
+04-10-2026): piso táctil 44 en el teléfono). `xlarge` (40) no se usa: no llega a 44 y ninguna
+pantalla de la app lo tiene.
 
 | 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'" … />
+<sui-segmented-control [size]="bp.tactil() ? '2xlarge' : 'medium'" … />
 ```
 
+### Por dispositivo (D16)
+
+Fila de `segmented-control` en la tabla de D16 (dueño, 05-10-2026): se toca, y el size que llega a
+44 es `2xlarge`.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `2xlarge` (44) | D16 pide `medium` con área de 44, pero el DS todavía no estira el área de los `medium` (nota ¹ de D16): hasta entonces se queda el grande |
+| celular (380–767 px) | `2xlarge` (44) | con texto o solo íconos |
+| tablet táctil (`pointer: coarse`) | `2xlarge` (44) | Apple pide 44 también en el iPad |
+| computadora (`pointer: fine`) | `medium` (28) | también solo íconos en una barra; nunca `small` |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`; el espacio extra va al `max-width`, no a
+segmentos más altos.
+
+En master-pedidos: `[size]="bp.tactil() ? '2xlarge' : 'medium'"`. No hay helper: `bp.sizeChips()`
+llega a `xlarge` (40) y `bp.sizeControl()` a `large` (32), y ninguno de los dos da 44 aquí.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -145,12 +169,57 @@ interface SuiSegmentedControlItem<T = string> {
 - Los tamaños son extensión de SUI: la guía tiene uno solo. Su versión redondeada (`Rounded`)
   no existe en SUI.
 
+## Bien y mal
+
+Vista cuadrícula / lista
+
+```html
+<!-- ❌ mal: `small` en la computadora; D16 no usa `small` (pages/products/products.html:83) -->
+<sui-segmented-control [size]="bp.isMobile() ? '2xlarge' : 'small'"
+  [tabs]="viewToggleItems" [(active)]="viewMode" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control [size]="bp.tactil() ? '2xlarge' : 'medium'"
+  [tabs]="viewToggleItems" [(active)]="viewMode" />
+```
+
+Modo del servicio en el panel
+
+```html
+<!-- ❌ mal: `large` (32) en el teléfono no llega a 44 (master-settings.html:224, tallaServicio en master-settings.ts:452) -->
+<sui-segmented-control [size]="bp.isMobile() ? 'large' : 'medium'"
+  ariaLabel="Cómo se cobra la tarifa de servicio"
+  [tabs]="MODOS_SERVICIO" [active]="borrador().servicioModo" (tabChange)="setModoServicio($event)" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control [size]="bp.tactil() ? '2xlarge' : 'medium'"
+  ariaLabel="Cómo se cobra la tarifa de servicio"
+  [tabs]="MODOS_SERVICIO" [active]="borrador().servicioModo" (tabChange)="setModoServicio($event)" />
+```
+
+Rol a invitar
+
+```html
+<!-- ❌ mal: sin `size` ni `ariaLabel`: 28 px también en el teléfono y el grupo sin nombre (pages/super-admin/master-roles/master-roles.html:48) -->
+<sui-segmented-control [tabs]="rolesCiudad" [active]="rolStaff()" (activeChange)="rolStaff.set($any($event))" />
+```
+
+```html
+<!-- ✅ bien -->
+<sui-segmented-control [size]="bp.tactil() ? '2xlarge' : 'medium'" ariaLabel="Rol"
+  [tabs]="rolesCiudad" [active]="rolStaff()" (activeChange)="rolStaff.set($any($event))" />
+```
+
 ## Ejemplo
 
 ```html
 <div style="max-width: 320px">
   <sui-segmented-control
-    [size]="bp.isMobile() ? 'xlarge' : 'small'"
+    [size]="bp.tactil() ? '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" />

package/docs/sui-select/README.md

@@ -46,7 +46,7 @@ Regla corta: **sale de datos o son más de 6 → select · 2–6 fijas → radio
 | La lista sale de datos (ubigeo, repartidores, categorías, planes) | `sui-select` | según la guía del DS (elegir una opción de un menú) |
 | Más de ~6 opciones fijas | `sui-select` | derivado del README de `sui-radio` («más de ~6 → select»), falta confirmación |
 | 2 a 6 opciones fijas en un formulario | `sui-radio-label` / `sui-radio-card` | propuesta, falta aprobación (sale del umbral de `sui-radio`) |
-| 2 a 4 modos que se aplican al instante | `sui-segmented-control` | según la guía del DS («aplicarla de inmediato», ver README de `sui-segmented-control`); el tope de 4 es propuesta |
+| 2 a 4 modos que se aplican al instante | `sui-segmented-control` | según la guía del DS («aplicarla de inmediato», ver README de `sui-segmented-control`); el tope de 4: canon (decisión del dueño 04-10-2026: 2 a 4 opciones excluyentes → segmented, 5 o más → tab-chips) |
 | Filtro de una barra con 5 o más opciones | `sui-select` sin label (o `sui-compact-select` en web) | propuesta, falta aprobación |
 
 **Candidatos de hoy** (no rompen nada; se verían mejor con radios o segmented):
@@ -69,11 +69,11 @@ Regla corta: **sale de datos o son más de 6 → select · 2–6 fijas → radio
 |---|---|---|
 | `type="basic"` (default) sin ícono | Todo select de la app hoy. | según la guía del DS |
 | `type="avatar"` + `imageUrl` | Elegir un **repartidor**: la foto de quien quedó elegido en el campo. Hoy `pages/orders/orders.html:257` muestra solo el nombre. | según la guía del DS (ejemplo «User»); el caso es propuesta |
-| `type="provider"` + `imageUrl` | Método de pago con logo (Yape, Plin). | según la guía del DS (ejemplo «Payment Method»); el caso es propuesta |
+| `type="provider"` + `imageUrl` | Método de pago con logo (Yape, Plin). | según la guía del DS (ejemplo «Payment Method»); el caso, canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 | `leadingIcon` (`true` o nombre RemixIcon) | Un ícono que ayuda a reconocer el campo en un formulario largo. Hoy sin caso. | según la guía del DS (ejemplo «Icons») |
 | `type="country"` + `flag` | No usar hoy: todo es Perú. | según la guía del DS (ejemplo «Country») |
-| `type="brand"` / `"company"` | No usar hoy. | propuesta, falta aprobación |
-| `badge` | No usar hoy. | propuesta, falta aprobación |
+| `type="brand"` / `"company"` | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
+| `badge` | No usar hoy. | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ### Las piezas
 
@@ -109,15 +109,37 @@ y las opciones de la lista; el alto no cambia (las opciones bajan 2 de padding p
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
-| campo de formulario | `large` (48) | `medium` (40) | propuesta, falta aprobación (igual que `sui-input`) |
-| filtro de una barra | `large` (48) | `small` (36) | propuesta (ya es práctica en `pages/orders/orders.html:257`) |
-| dentro de una tabla densa | no aplica | `xsmall` (32) | según la guía del DS |
-| `xlarge` (52) | no usar | no usar | propuesta: queda más alto que el botón `large` del footer |
+| campo de formulario | `large` (48) | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: `medium` 40 no llega y `large` 48 es el primer size que sí) · web `medium`: canon (aprobado por el dueño, 05-10-2026, bloque B1) |
+| filtro de una barra | `large` (48) | `medium` (40) | mobile `large`: canon (decisión del dueño 04-10-2026, piso táctil 44: `large` 48 es el primer size que llega) · web `medium`: canon (dueño, 05-10-2026, D16) (el `small` de `pages/orders/orders.html:257` ya se migró a `bp.sizeControl()`) |
+| dentro de una tabla | no aplica | `medium` (40) | canon (dueño, 05-10-2026, D16): nada en `xsmall` (la guía del DS lo usa en tablas densas) |
+| `xlarge` (52) | no usar | no usar | canon (aprobado por el dueño, 05-10-2026, bloque B6): queda más alto que el botón `large` del footer |
 
 ```html
-<sui-select [size]="bp.isMobile() ? 'large' : 'medium'" label="Distrito" … />   <!-- bp = BreakpointsService -->
+<sui-select [size]="bp.sizeControl()" label="Distrito" … />   <!-- bp = BreakpointsService · D16, dueño 05-10-2026 -->
 ```
 
+### Por dispositivo (D16)
+
+Fila `select` de la tabla D16 (dueño, 05-10-2026): se decide por el tipo de puntero además del ancho.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` (48) | interino: D16 pide `medium` con área tocable de 44; hasta que el DS la estire, se queda el grande (nota ¹ de D16) |
+| celular (380–767 px) | `large` (48) | el primer size que llega al piso táctil de 44 |
+| tablet táctil (`pointer: coarse`) | `large` (48) | Apple pide 44 pt también en iPad; con `bp.isMobile()` el iPad quedaba en `medium` 40 |
+| computadora (`pointer: fine`) | `medium` (40) | también en filtros de barra y dentro de tablas; nunca `small` ni `xsmall` |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`. El espacio extra va a ancho máximo y columnas, no a un campo más alto.
+
+En master-pedidos: `[size]="bp.sizeControl()"`. Re-medido el 06-10-2026: 52 de 56 `<sui-select>` ya lo usan. Faltan 4:
+
+- `pages/driver/driver-dashboard/driver-dashboard.html:1507`: `size="large"` fijo por pedido del dueño (22-09-2026),
+  pendiente de confirmar si D16 lo reemplaza.
+- `pages/super-admin/master-preview/master-preview.html:807` y `:813`: sin `size`, salen en `medium` (el default) en
+  todos los dispositivos. Es la vitrina del super admin.
+- `pages/super-admin/master-preview/_ruta-pedido/ruta-pedido.html:12`: sin `size`, sale en `medium`. Es la pantalla de
+  diagnóstico `/dx/ruta-pedido` (auditor de rutas del super admin), no una vitrina.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -126,7 +148,7 @@ y las opciones de la lista; el alto no cambia (las opciones bajan 2 de padding p
 | `type="brand"` / `"company"` | no hay listas de marcas o empresas | elegir la marca de un producto envasado o la empresa de una flota |
 | `leadingIcon` | ningún formulario lo necesita para reconocerse | un formulario largo del panel con varios selects seguidos |
 | `badge` | no hay valores que marcar | marcar el plan elegido como «Recomendado» |
-| `size="xsmall"` | no hay selects dentro de tablas | cambiar el estado de una fila sin abrir el detalle |
+| `size="xsmall"` | es chico (D16, 05-10-2026) | nunca: cambiar el estado de una fila va con un select `medium` |
 | `size="xlarge"` | queda más alto que el botón del footer | un select solo, como acción principal de la pantalla |
 
 ## API
@@ -176,12 +198,59 @@ decoración propia del campo (gana sobre ícono, imagen y bandera).
   label, con el placeholder), apunta al listbox abierto (`aria-controls`) y anuncia la opción
   resaltada con las flechas (`aria-activedescendant`). Hint y error van en `aria-describedby`.
 
+## Bien y mal
+
+**Filtro de período con 3 opciones**
+
+```html
+<!-- ❌ mal: 3 opciones excluyentes que se aplican al tocar, escondidas en un menú (pages/discounts/discounts.html:49) -->
+<sui-select [size]="bp.sizeControl()" placeholder="Período"
+            [options]="periodOptions" [value]="selectedPeriod()"
+            (valueChange)="selectedPeriod.set($event ?? '7days')" />
+```
+
+```html
+<!-- ✅ bien: 2 a 4 opciones excluyentes → sui-segmented-control (canon, dueño 04-10-2026) -->
+<sui-segmented-control [size]="bp.tactil() ? '2xlarge' : 'medium'"
+                       [tabs]="periodos" [(active)]="periodo" />
+```
+
+**El valor que vuelve del select**
+
+```html
+<!-- ❌ mal: `$any` es un `any` disfrazado y además deja pasar el `null` (pages/super-admin/super-admin.html:317) -->
+<sui-select [size]="bp.sizeControl()" label="Plan" placeholder="Elige…"
+            [options]="planSelectOptions()" [value]="subPlan()"
+            (valueChange)="subPlan.set($any($event))" />
+```
+
+```html
+<!-- ✅ bien: opciones tipadas (SuiSelectOption<string>[]) y el null resuelto en el template -->
+<sui-select [size]="bp.sizeControl()" label="Plan" placeholder="Elige…"
+            [options]="planSelectOptions()" [value]="subPlan()"
+            (valueChange)="subPlan.set($event ?? 'crecimiento')" />
+```
+
+**El size por dispositivo**
+
+```html
+<!-- ❌ mal: solo mira el ancho; el iPad (≥ 768, táctil) recibe `medium` 40, bajo el piso de 44 -->
+<sui-select [size]="bp.isMobile() ? 'large' : 'medium'" label="Distrito"
+            placeholder="Elige el distrito" [options]="distritos()" />
+```
+
+```html
+<!-- ✅ bien: el helper de D16 (`large` en celular y tablet táctil, `medium` en la computadora) -->
+<sui-select [size]="bp.sizeControl()" label="Distrito"
+            placeholder="Elige el distrito" [options]="distritos()" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-select label="Distrito" [required]="true" placeholder="Elige tu distrito"
             [options]="distritos()" [disabled]="!provinciaId()"
             [error]="intentado() && !distritoId()" errorMessage="Elige tu distrito"
-            [size]="bp.isMobile() ? 'large' : 'medium'"
+            [size]="bp.sizeControl()"
             [value]="distritoId()" (valueChange)="distritoId.set($event ?? '')" />
 ```

package/docs/sui-sidebar/README.md

@@ -31,8 +31,8 @@ Regla corta: **navegación del rol → sidebar · secciones de una pantalla →
 > **La guía del DS no tiene página del sidebar.** El componente sale del Figma de SUI (Sidebar
 > [Navigation], node 3802:11759) y el cajón de mobile no existe en ese Figma: se portó del layout
 > del super admin. Lo de abajo es **práctica de la app** (los 4 usos están homologados desde el
-> 25-07-2026) o **propuesta, falta aprobación**; lo marcado «canon» sale de `docs/CANON-SUI.md`
-> o de `master-pedidos/CLAUDE.md`.
+> 25-07-2026) o **propuesta, falta aprobación**; lo marcado «canon» sale de `docs/CANON-SUI.md`,
+> de `master-pedidos/CLAUDE.md` o de la aprobación del dueño del 05-10-2026.
 >
 > Uso medido el 03-10-2026 en `master-pedidos/src/app`: **4 sidebars**, sin contar vitrinas
 > (`master-preview` tiene el quinto).
@@ -44,11 +44,11 @@ Regla corta: **navegación del rol → sidebar · secciones de una pantalla →
 | `brand` | `{ name: 'Master Pedidos', subtitle: '<Rol>', logo: 'assets/app-icon.png', fallback: 'M' }`. En empresa, el nombre del local. | práctica de la app (4 de 4) |
 | `showHeaderButton` + `headerButtonActive` + panel `[header-panel]` | El botón del header abre el **cambio de rol** (o de negocio/sucursal en empresa). El panel se proyecta con `<div header-panel>` y adentro van `sui-dropdown-item mode="option" size="large"`. El cliente lo muestra solo en mobile. | práctica de la app (4 de 4) |
 | tres secciones con rótulo | `items` + `itemsLabel` (lo de todos los días), `secondaryItems` + `secondaryItemsLabel` (dinero o crecimiento), `supportingItems` + `supportingItemsLabel` (cuenta, administración: va anclado abajo). Rótulos en sentence case: «Operación», «Dinero», «Cuenta». | práctica de la app (4 de 4) |
-| `activeRoute` | Siempre `[activeRoute]="currentUrl()"`, aunque los items tengan `route`: así el activo se resuelve por prefijo (`/cliente/pedidos/123` deja marcado «Pedidos»). | práctica de la app (4 de 4) |
+| `activeRoute` | No hace falta si los items de navegación llevan `route`: el `<a>` usa `routerLinkActive` y marca por prefijo (`/cliente/pedidos/123` deja «Mis pedidos» activo). `activeRoute` solo marca items **sin** `route`, y por `value` exacto (`activeRoute="pedidos"`), para demos sin router (`sui-sidebar.ts:369-412`). Los 4 layouts pasan `[activeRoute]="currentUrl()"`, pero no cambia nada: todos sus items de navegación tienen `route` y la URL nunca es igual al `value` de un item-acción. | comportamiento del `.ts` · práctica de la app (4 de 4 lo pasan, sin efecto) |
 | `profile` | Nombre + `avatarUrl` (nunca `photoURL`) + correo. | canon (CLAUDE.md, «Fotos de otra persona»: el campo correcto es `avatarUrl`) |
 | cerrar sesión | Hoy **ningún** item usa `action: 'logout'`: el cierre real vive en el selector de rol y el «salir» del panel solo cambia de rol (`components/sidebar/sidebar.ts:367`). Los 4 layouts dejan `(logoutClicked)` conectado por si se agrega. | práctica de la app |
-| `[(mobileOpen)]` + `closeOnItemClick` | Siempre los dos. Más `cerrarAlNavegar(...)` en el constructor del layout (ver Trampas). | canon (CANON-SUI §1.1) |
-| `search` | `{ placeholder: 'Buscar...', shortcut: '⌘K' }` y el layout **filtra** los items con `searchValue` (el componente no filtra). | práctica de la app (4 de 4) |
+| `[(mobileOpen)]` + `closeOnItemClick` | Siempre los dos (`closeOnItemClick` ya es `true` por defecto; los 4 layouts lo pasan explícito). Más `cerrarAlNavegar(...)` en el constructor del layout (ver Trampas). | canon (CANON-SUI §1.1) |
+| `search` | `{ shortcut: '⌘K' }` (el placeholder por defecto ya es «Buscar…», con elipsis) y el layout **filtra** los items con `searchValue` (el componente no filtra). | buscador: práctica de la app (4 de 4) · `shortcut: '⌘K'`: práctica de la app (3 de 4; el cliente no lo pasa, `layouts/customer/customer-layout.html:12`) · la elipsis «…»: canon (CANON-SUI, copy); los 4 layouts todavía pasan «Buscar...» (ver «Bien y mal») |
 | `indicatorColor` | Default `brand` (naranja). No se cambia. | canon del DS (accent = marca) |
 | `collapsed` | Solo el cliente lo usa, con un item «colapsar», y **solo en web**: `[collapsed]="colapsado() && !bp.isMobile()"`. | práctica de la app (1 uso) |
 
@@ -56,12 +56,12 @@ Regla corta: **navegación del rol → sidebar · secciones de una pantalla →
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `icon` | Siempre, RemixIcon `-line`. Sin ícono, el modo colapsado queda vacío. | propuesta, falta aprobación |
+| `icon` | Siempre, RemixIcon `-line`. Sin ícono, el modo colapsado queda vacío. | canon (aprobado por el dueño, 05-10-2026, bloque B9) |
 | `route` | Navegación normal (usa `routerLink`). | práctica de la app |
 | sin `route` | Acción, no navegación (abrir Configuración, colapsar): `action` o solo `value`, y se escucha `(itemClicked)`. | práctica de la app |
-| `badge` | Un contador que pide acción: notificaciones sin leer, con tope «99+» (`components/sidebar/sidebar.ts:129`). Nunca un «NEW» decorativo. | práctica de la app (el «nunca NEW» es propuesta) |
-| `variant: 'danger'` | Solo «Cerrar sesión» o salidas destructivas. | propuesta, falta aprobación |
-| `shortcut`, `colorDot` | No usar (ver «No usar»). | propuesta, falta aprobación |
+| `badge` | Un contador que pide acción: notificaciones sin leer, con tope «99+» (`components/sidebar/sidebar.ts:129`). Nunca un «NEW» decorativo. | práctica de la app · el «nunca NEW»: canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `variant: 'danger'` | Solo «Cerrar sesión» o salidas destructivas. | «Cerrar sesión» en rojo: canon (decisión del dueño 04-10-2026, salida destructiva en `color error` aunque sea un link; `danger` pinta `--sui-state-error-base`) · el «solo» (ningún otro item en rojo): canon (aprobado por el dueño, 05-10-2026, bloque B3) |
+| `shortcut`, `colorDot` | No usar (ver «No usar»). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 ## Tamaño en mobile y en web
 
@@ -78,7 +78,7 @@ El sidebar **no tiene `size`**. El ancho lo decide el viewport:
 |---|---|---|---|
 | navegación del rol | cajón `drawer`, cerrado por defecto | columna fija de 272 | práctica de la app (4 de 4) |
 | colapsar | nunca (`!bp.isMobile()`) | opcional, a pedido de la persona | práctica de la app |
-| `sheet` | no usar (0 usos) | — | propuesta, falta aprobación |
+| `sheet` | no usar (0 usos) | — | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 
 **Qué pasa en mobile (≤ 767 px):** el sidebar sale del flujo y queda `position: fixed` fuera de la
 pantalla. Lo abre la acción `toggle-sidebar` de la **barra inferior** («Más»), que el layout
@@ -87,6 +87,16 @@ con el fondo, con Escape, al tocar un item (`closeOnItemClick`) y —por el help
 al terminar cualquier navegación. Cerrado queda `inert` y `aria-hidden`: el foco no se mete.
 Respeta las safe areas de arriba, izquierda y abajo.
 
+### Por dispositivo (D16)
+
+El sidebar **no tiene `size`**: D16 (dueño, 05-10-2026) no le da un tamaño que pasar. El alto de los items lo pone el DS por
+ancho: 52 en el cajón (≤ 767 px, `padding: 14px` + ícono 24) y 36 en la columna (> 767 px). Hueco conocido: una tablet táctil
+(iPad, ≥ 768 px y `pointer: coarse`) recibe la columna con items de 36, bajo el piso de 44 que D16 pide para lo que se toca.
+Queda **pendiente del DS** (el mixin `sui-tactil` de la propuesta de D16, que todavía espera el sí del dueño); desde la app no
+se corrige.
+
+En master-pedidos: no se pasa `size`; lo único que depende del dispositivo es `[collapsed]="colapsado() && !bp.isMobile()"`.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -170,16 +180,62 @@ Slots: `[header-panel]` (debajo del header: el switcher), `[feature-card]` (al f
   filtra los items (`master-layout.ts:125`). Su placeholder por defecto es «Buscar…» (en español desde el 04-10-2026).
 - **`collapsed` no mira el viewport.** Con `collapsed` en `true`, el cajón de mobile también sale
   de 80 px. Condiciónalo: `[collapsed]="colapsado() && !bp.isMobile()"`.
-- Un item con `route` queda activo por `routerLinkActive` **y** por `activeRoute`; un item sin
-  `route` solo por `activeRoute` (por `value` exacto). Si no pasas `activeRoute`, los items-acción
-  nunca se marcan.
-- Cualquier `action` (no solo `'logout'`) anula el `route`: el item no navega.
+- Un item con `route` (y sin `action`) queda activo **solo** por `routerLinkActive`, por prefijo:
+  `isItemActive()` devuelve `false` para todo item con `route` (`sui-sidebar.ts:411`), así que
+  `activeRoute` no lo toca. Un item sin `route` solo por `activeRoute`, y por `value` exacto
+  (`sui-sidebar.ts:379`): pasarle la URL actual no lo marca nunca.
+- Cualquier `action` (no solo `'logout'`) anula el `route`: el item se pinta como `<button>`, no navega y
+  tampoco se marca activo (tiene `route`, así que `isItemActive()` da `false`, y no hay `routerLinkActive`).
 - El `title` nativo del host se borra (sin tooltip gris); en colapsado el tooltip va en cada item.
 - El cajón tiene `z-index: 300` sobre la barra inferior (200). Mientras está abierto el layout
   esconde la barra (`customer-layout.ts:66`); si armas un layout nuevo, haz lo mismo.
 - El comentario de cabecera del `.ts` todavía dice 240 px; el ancho real es 272 (`sui-sidebar.scss:50`).
 - Los items ya traen el arreglo de iOS del `:active` pegado: no lo agregues.
 
+## Bien y mal
+
+**El buscador**
+
+```html
+<!-- ❌ mal: tres puntos sueltos en vez de elipsis. Así en components/sidebar/sidebar.html:48, layouts/driver/driver-layout.html:9 y layouts/master/master-layout.html:10; layouts/customer/customer-layout.html:12 pasa el mismo «Buscar...» sin `shortcut` -->
+<sui-sidebar [search]="{ placeholder: 'Buscar...', shortcut: '⌘K' }"
+             [(searchValue)]="busqueda" [items]="items()" />
+```
+
+```html
+<!-- ✅ bien: sin placeholder sale «Buscar…»; el layout filtra `items()` con `busqueda` -->
+<sui-sidebar [search]="{ shortcut: '⌘K' }"
+             [(searchValue)]="busqueda" [items]="items()" />
+```
+
+**Colapsar**
+
+```html
+<!-- ❌ mal: `collapsed` no mira el viewport; el cajón de mobile también sale de 80 px, solo íconos -->
+<sui-sidebar [collapsed]="colapsado()" [items]="items()" [(mobileOpen)]="menuAbierto" />
+```
+
+```html
+<!-- ✅ bien: se colapsa solo en web (layouts/customer/customer-layout.html:7) -->
+<sui-sidebar [collapsed]="colapsado() && !bp.isMobile()" [items]="items()" [(mobileOpen)]="menuAbierto" />
+```
+
+**El item activo**
+
+```ts
+// ❌ mal: navegar con `action` + `(itemClicked)` y `router.navigate`. El item se pinta como `<button>`,
+// no como `<a routerLink>`, y nunca queda activo: sin `route`, `activeRoute` solo lo marca si es igual
+// a su `value` (`sui-sidebar.ts:379`), y `[activeRoute]="currentUrl()"` nunca lo es
+{ value: 'pedidos', label: 'Mis pedidos', icon: 'time-line', action: 'ir-a-pedidos' }
+```
+
+```ts
+// ✅ bien: con `route` (y sin `action`) el item es un `<a routerLink>` y `routerLinkActive` lo marca por
+// prefijo: `/cliente/pedidos/123` deja «Mis pedidos» activo sin pasar `activeRoute`
+// (layouts/customer/customer-layout.ts:287)
+{ value: 'pedidos', label: 'Mis pedidos', icon: 'time-line', route: '/cliente/pedidos' }
+```
+
 ## Ejemplo
 
 ```html
@@ -188,12 +244,11 @@ Slots: `[header-panel]` (debajo del header: el switcher), `[feature-card]` (al f
   [showHeaderButton]="true"
   [headerButtonActive]="switcherOpen()"
   (headerButtonClicked)="switcherOpen.set(!switcherOpen())"
-  [search]="{ placeholder: 'Buscar...', shortcut: '⌘K' }"
+  [search]="{ shortcut: '⌘K' }"
   [(searchValue)]="busqueda"
   itemsLabel="Operación" [items]="items()"
   secondaryItemsLabel="Dinero" [secondaryItems]="itemsDinero()"
   supportingItemsLabel="Cuenta" [supportingItems]="itemsCuenta()"
-  [activeRoute]="currentUrl()"
   [profile]="perfil()"
   [(mobileOpen)]="menuAbierto"
   [closeOnItemClick]="true"

package/docs/sui-slider/README.md

@@ -38,19 +38,19 @@ Regla corta: **escala con tope y la posición importa → slider · número exac
 | type | cuándo | fuente |
 |---|---|---|
 | `single` (default) | Un valor: radio de cobertura, porcentaje. | según la guía del DS |
-| `range` | Un mínimo y un máximo en la misma escala: rango de precios de un filtro. Una sola barra con dos manijas, nunca dos sliders. | según la guía del DS (existe); el «cuándo» es propuesta |
+| `range` | Un mínimo y un máximo en la misma escala: rango de precios de un filtro. Una sola barra con dos manijas, nunca dos sliders. | según la guía del DS (existe); el «cuándo», canon (aprobado por el dueño, 05-10-2026, bloque B2) |
 
 ### Las piezas
 
 | prop | cuándo | fuente |
 |---|---|---|
-| `label` | Siempre que el slider no esté dentro de un campo que ya lo titula. Sin `label` desaparece toda la fila de arriba, `amount` incluido. | propuesta, falta aprobación |
-| `amount` | El valor con su unidad, a la derecha del label: «12 km», «S/ 10 – S/ 40». Sin `amount` escribe el número pelado. | propuesta, falta aprobación |
-| `sublabel` | Una precisión corta junto al label: «(máximo 15)». | propuesta, falta aprobación |
-| `tooltip` | Solo **sin** `amount`: el número flota sobre la manija mientras se arrastra. Con `amount` repite el valor y sin unidad. | según la guía del DS (existe); el «cuándo» es propuesta |
-| `tooltipAlways` | No usar (ver abajo). | propuesta, falta aprobación |
+| `label` | Siempre que el slider no esté dentro de un campo que ya lo titula. Sin `label` desaparece toda la fila de arriba, `amount` incluido. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `amount` | El valor con su unidad, a la derecha del label: «12 km», «S/ 10 – S/ 40». Sin `amount` escribe el número pelado. | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `sublabel` | Una precisión corta junto al label: «(máximo 15)». | canon (aprobado por el dueño, 05-10-2026, bloque B4) |
+| `tooltip` | Solo **sin** `amount`: el número flota sobre la manija mientras se arrastra. Con `amount` repite el valor y sin unidad. | según la guía del DS (existe); el «cuándo», canon (aprobado por el dueño, 05-10-2026, bloque B9) |
+| `tooltipAlways` | No usar (ver abajo). | canon (aprobado por el dueño, 05-10-2026, bloque B6) |
 | `min` / `max` / `step` | La escala real del negocio (1–15 km, paso 1). | API |
-| `disabled` | La escala existe pero hoy no se puede mover (falta un dato antes). | propuesta, falta aprobación |
+| `disabled` | La escala existe pero hoy no se puede mover (falta un dato antes). | canon (aprobado por el dueño, 05-10-2026, bloque B8) |
 | `size` | `medium` (default, Figma): manija 16, riel 6, label 12/16. `large`: manija 24, riel 8, punto interno 8, label 14/20 — para mobile. | `medium`: según la guía del DS · `large`: canon (aprobado por el dueño, 03-10-2026), extensión SUI |
 
 **Usos de hoy que rompen la propuesta:**
@@ -73,7 +73,8 @@ va un tamaño más chico. La app ya lo resuelve con `BreakpointsService`
 | slider con label (radio de cobertura, filtro de precio) | `large` (manija 24, riel 8) | `medium` (manija 16, riel 6) | canon (aprobado por el dueño, 03-10-2026) |
 
 ```html
-<sui-slider [size]="bp.isMobile() ? 'large' : 'medium'" label="Radio de cobertura" amount="12 km"
+<!-- D16, dueño 05-10-2026: `large` en todo lo táctil, `medium` con mouse -->
+<sui-slider [size]="(bp.isMobile() || bp.toque()) ? 'large' : 'medium'" label="Radio de cobertura" amount="12 km"
             [min]="1" [max]="15" [(value)]="radioKm" />
 ```
 
@@ -82,6 +83,24 @@ manija. Igual la barra mide menos de 44: el slider necesita aire arriba y abajo
 manija en 0 o en 100 sobresale media manija (12 px en `large`) del borde de la barra: el
 contenedor tiene que tener margen lateral.
 
+### Por dispositivo (D16)
+
+Fila `slider` de la tabla D16 (dueño, 05-10-2026). A diferencia del botón o el campo, el slider **no** tiene la excepción
+«`medium` + área 44» en el celular chico: va `large` en todo lo que se toca.
+
+| dispositivo | size | nota |
+|---|---|---|
+| celular chico (< 380 px) | `large` | manija 24, riel 8; con `medium` la manija de 16 es difícil de agarrar |
+| celular (380–767 px) | `large` | |
+| tablet táctil (`pointer: coarse`) | `large` | también se arrastra con el dedo |
+| computadora (`pointer: fine`) | `medium` | manija 16, riel 6 (el de la guía del DS) |
+
+Ultrawide (≥ 1920 px): igual que la computadora, `medium`.
+
+En master-pedidos: `[size]="(bp.isMobile() || bp.toque()) ? 'large' : 'medium'"`. No hay helper propio. Hoy da lo mismo que
+`bp.tactil()`, pero el servicio anuncia que `tactil` dejará fuera al celular chico cuando el DS estire el área de los
+`medium`, y el slider tiene que seguir en `large` ahí.
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -138,10 +157,58 @@ Implementa `ControlValueAccessor` **solo para `single`**.
   El lector lee el valor con su unidad: en single, el texto de `amount` («12 km»); en range (o sin
   `amount`), el número + `unit`. En range cada manija se anuncia «<label>, mínimo» / «…, máximo».
 
+## Bien y mal
+
+**El valor arriba y flotando a la vez**
+
+```html
+<!-- ❌ mal: `amount` muestra «12 km» y el tooltip repite «12» sin unidad (components/driver-coverage-modal/driver-coverage-modal.html:83) -->
+<sui-slider label="Radio de cobertura" [amount]="radiusKm() + ' km'"
+            [min]="minKm" [max]="maxKm" [tooltip]="true"
+            [value]="radiusKm()" (valueChange)="onRadiusChange($event)" />
+```
+
+```html
+<!-- ✅ bien: con `amount`, sin tooltip -->
+<sui-slider [size]="(bp.isMobile() || bp.toque()) ? 'large' : 'medium'"
+            label="Radio de cobertura" [amount]="radiusKm() + ' km'" [min]="minKm" [max]="maxKm"
+            [value]="radiusKm()" (valueChange)="onRadiusChange($event)" />
+```
+
+**El size en una pantalla del repartidor**
+
+```html
+<!-- ❌ mal: sin `size` sale `medium` (manija 16) en el teléfono (components/driver-coverage-modal/driver-coverage-modal.html:83) -->
+<sui-slider label="Radio de cobertura" [amount]="radiusKm() + ' km'" [min]="minKm" [max]="maxKm"
+            [value]="radiusKm()" (valueChange)="onRadiusChange($event)" />
+```
+
+```html
+<!-- ✅ bien: D16, `large` en todo lo táctil -->
+<sui-slider [size]="(bp.isMobile() || bp.toque()) ? 'large' : 'medium'"
+            label="Radio de cobertura" [amount]="radiusKm() + ' km'" [min]="minKm" [max]="maxKm"
+            [value]="radiusKm()" (valueChange)="onRadiusChange($event)" />
+```
+
+**Un mínimo y un máximo**
+
+```html
+<!-- ❌ mal: dos sliders sueltos para un rango; nada impide que el mínimo pase al máximo -->
+<sui-slider label="Precio mínimo" [min]="0" [max]="100" [(value)]="precioMin" />
+<sui-slider label="Precio máximo" [min]="0" [max]="100" [(value)]="precioMax" />
+```
+
+```html
+<!-- ✅ bien: una barra con dos manijas -->
+<sui-slider type="range" label="Precio" [amount]="'S/ ' + precioMin() + ' – S/ ' + precioMax()"
+            [min]="0" [max]="100" [(minValue)]="precioMin" [(maxValue)]="precioMax" />
+```
+
 ## Ejemplo
 
 ```html
 <sui-slider
+  [size]="(bp.isMobile() || bp.toque()) ? 'large' : 'medium'"
   label="Radio de cobertura"
   [amount]="radioKm() + ' km'"
   [min]="1" [max]="15" [step]="1"