@ajuarezso/sui-design-system 0.21.0 → 0.23.0

package/docs/sui-sidebar/README.md

@@ -0,0 +1,216 @@
+---
+name: sui-sidebar
+selector: sui-sidebar
+resumen: Navegación principal de un rol — columna fija a la izquierda en web y cajón que entra desde la izquierda en mobile
+alternativas: [la barra inferior nativa del layout (las 4-5 secciones más usadas en el teléfono), sui-topbar (navegación arriba, sin columna lateral), sui-tab-menu-vertical (secciones dentro de UNA pantalla, como ajustes), sui-dropdown-menu (acciones de una cuenta o un botón)]
+---
+
+# sui-sidebar
+
+Story: [Organisms/Sidebar](https://sui-design-system.web.app/?path=/docs/organisms-sidebar--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** como **la** navegación de un layout de rol: una por layout, montada en el layout y no
+en las páginas. En la app hay 4 y cubren los roles: empresa (`components/sidebar/sidebar.html:43`,
+dentro del shell), repartidor (`layouts/driver/driver-layout.html:4`), super admin y central
+(`layouts/master/master-layout.html:5`) y cliente (`layouts/customer/customer-layout.html:5`).
+
+**No lo uses** para:
+
+- Navegar entre secciones **de una sola pantalla** (las pestañas de Ajustes, los pasos de un
+  formulario): `sui-tab-menu-vertical` o `sui-tab-chips`.
+- Un menú de acciones (editar, eliminar, cerrar sesión de un item): `sui-dropdown-menu`.
+- Reemplazar la barra inferior en el teléfono. En mobile, las secciones de todos los días van en la
+  barra inferior (nativa en iOS) y el sidebar es el cajón de «Más».
+
+Regla corta: **navegación del rol → sidebar · secciones de una pantalla → tab menu · acciones → dropdown.**
+
+## Qué variante usar
+
+> **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`.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **4 sidebars**, sin contar vitrinas
+> (`master-preview` tiene el quinto).
+
+### La composición (igual en los 4 layouts)
+
+| pieza | cómo | fuente |
+|---|---|---|
+| `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) |
+| `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) |
+| `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) |
+
+### El item (`SuiSidebarItem`)
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `icon` | Siempre, RemixIcon `-line`. Sin ícono, el modo colapsado queda vacío. | propuesta, falta aprobación |
+| `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 |
+
+## Tamaño en mobile y en web
+
+El sidebar **no tiene `size`**. El ancho lo decide el viewport:
+
+| estado | ancho | fuente |
+|---|---|---|
+| web (> 767 px) | 272 fijo, alto `100dvh` | Figma |
+| web colapsado (`collapsed`) | 80, solo íconos; los rótulos siguen visibles y cada item tiene tooltip nativo con su label | Figma |
+| mobile `drawer` (default) | `min(86vw, 360px)`, entra desde la izquierda con fondo oscuro | extensión SUI (no está en el Figma) |
+| mobile `sheet` | `100vw - 40px`, se siente casi a pantalla completa | extensión SUI |
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| 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 |
+
+**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
+traduce a `mobileOpen = true` (`layouts/shell/shell.ts:326`, `customer-layout.ts:322`). Se cierra
+con el fondo, con Escape, al tocar un item (`closeOnItemClick`) y —por el helper del proyecto—
+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.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `indicatorColor="information"` | el activo es naranja de marca en toda la app | nunca en esta app (es el azul del Figma original) |
+| `mobileMode="sheet"` | el `drawer` deja ver la página detrás y se entiende que es un cajón | un rol con muchísimos items donde 360 px quedan cortos |
+| `shortcut` en items | no hay atajos de teclado por sección | si se agregan atajos tipo `⌘1` en el panel web |
+| `colorDot` | no hay «favoritos» ni etiquetas de color | proyectos o locales favoritos fijados por la persona |
+| `profileDropdown` | el perfil se abre desde «Cuenta» | si el perfil pasa a tener menú propio (cambiar cuenta, idioma) |
+| feature card (`[feature-card]`) | no hay promo dentro de la navegación | invitar a mejorar el plan en el panel de empresa |
+| `showBackdrop` en `false` | sin fondo, el cajón parece pegado a la página | nunca en mobile |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `collapsed` | `boolean` | `false` |
+| `indicatorColor` | `'information' \| 'brand'` | `'brand'` |
+| `brand` | `SuiSidebarBrandConfig \| null` | `null` |
+| `showHeaderButton` | `boolean` | `false` |
+| `headerButtonActive` | `boolean` | `false` |
+| `search` | `SuiSidebarSearchConfig \| boolean \| null` | `false` |
+| `searchValue` · model, `[(searchValue)]` | `string` | `''` |
+| `items` | `SuiSidebarItem[]` | `[]` |
+| `secondaryItems` | `SuiSidebarItem[]` | `[]` |
+| `supportingItems` | `SuiSidebarItem[]` | `[]` |
+| `supportingAnchorBottom` | `boolean` | `true` |
+| `itemsLabel` | `string \| null` | `null` |
+| `secondaryItemsLabel` | `string \| null` | `null` |
+| `supportingItemsLabel` | `string \| null` | `null` |
+| `activeRoute` | `string \| null` | `null` |
+| `profile` | `SuiSidebarProfile \| null` | `null` |
+| `profileDropdown` | `boolean` | `false` |
+| `mobileOpen` · model, `[(mobileOpen)]` | `boolean` | `false` |
+| `closeOnItemClick` | `boolean` | `true` |
+| `showBackdrop` | `boolean` | `true` |
+| `mobileMode` | `'drawer' \| 'sheet'` | `'drawer'` |
+
+| output | payload |
+|---|---|
+| `itemClicked` | `SuiSidebarItem` |
+| `logoutClicked` | `void` |
+| `backdropClicked` | `void` |
+| `headerButtonClicked` | `void` |
+| `profileClicked` | `void` |
+| `searchSubmitted` | `string` |
+<!-- api:fin -->
+
+```ts
+interface SuiSidebarItem {
+  value: string;              // lo emite (itemClicked)
+  label: string;
+  icon?: string;              // RemixIcon sin 'ri-'
+  route?: string;             // routerLink; sin route solo emite
+  external?: boolean;
+  variant?: 'default' | 'danger';
+  action?: 'logout' | string; // cualquier action anula el route
+  badge?: string | number;
+  shortcut?: string;
+  colorDot?: string;          // reemplaza el ícono por un punto de color
+  tooltip?: string;           // tooltip en colapsado; default = label
+}
+interface SuiSidebarBrandConfig { name: string; subtitle?: string; subtitleAsBadge?: boolean; logo?: string; fallback?: string; }
+interface SuiSidebarSearchConfig { placeholder?: string; shortcut?: string; }
+interface SuiSidebarProfile { name: string; avatarUrl?: string; initials?: string; status?: SuiAvatarStatus; email?: string; verified?: boolean; }
+```
+
+Slots: `[header-panel]` (debajo del header: el switcher), `[feature-card]` (al fondo del contenido).
+
+## Trampas
+
+- **El cajón no se cierra solo al navegar desde afuera.** Se cierra con el fondo, Escape y el toque
+  en un item; cualquier otra navegación (atrás, un push, `router.navigate`, una ruta cacheada que
+  vuelve) lo deja abierto tapando la página siguiente. Mientras el DS no traiga `closeOnNavigate`,
+  cada layout llama `cerrarAlNavegar(menuAbierto, switcherAbierto)`
+  (`core/services/cerrar-al-navegar.ts`). Canon: CANON-SUI §1.1.
+- **El buscador no filtra nada.** Solo expone `[(searchValue)]` y `(searchSubmitted)`; el layout
+  filtra los items (`master-layout.ts:125`). 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.
+- 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.
+
+## Ejemplo
+
+```html
+<sui-sidebar
+  [brand]="{ name: 'Master Pedidos', subtitle: 'Repartidor', logo: 'assets/app-icon.png', fallback: 'M' }"
+  [showHeaderButton]="true"
+  [headerButtonActive]="switcherOpen()"
+  (headerButtonClicked)="switcherOpen.set(!switcherOpen())"
+  [search]="{ placeholder: 'Buscar...', 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"
+  (logoutClicked)="logout()">
+  @if (switcherOpen()) {
+    <div header-panel role="listbox" aria-label="Cambiar de rol">
+      @for (rol of roles; track rol.value) {
+        <sui-dropdown-item [label]="rol.label" [sublabel]="rol.sublabel" mode="option" size="large"
+                           (clicked)="irARol(rol)" />
+      }
+    </div>
+  }
+</sui-sidebar>
+```
+
+```ts
+constructor() {
+  cerrarAlNavegar(this.menuAbierto, this.switcherOpen); // mientras el DS no cierre solo
+}
+```

package/docs/sui-slider/README.md

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

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

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

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

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

package/docs/sui-stepper/README.md

@@ -26,7 +26,8 @@ Vehículo → Listo»).
 - Secciones que se visitan en cualquier orden: `sui-tab-menu-horizontal`.
 - Un solo paso: no hay nada que indicar.
 
-Regla corta: **pasos con nombre y orden → stepper · porcentaje → progress-bar · secciones sin orden → tab menu.**
+Regla corta (propuesta, falta aprobación): **pasos con nombre y orden → stepper · porcentaje →
+progress-bar · secciones sin orden → tab menu.**
 
 ## Qué variante usar
 
@@ -35,9 +36,11 @@ Regla corta: **pasos con nombre y orden → stepper · porcentaje → progress-b
 > procesos secuenciales». El **vertical**, el mismo indicador «para layouts diversos», con una
 > flecha en el paso activo. Estados de cada paso: `default`, `active`, `completed`. No trae do/don't.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
-> **7 usos en 7 archivos**, los 7 en los onboardings: todos `variant="horizontal"`, sin `size`
-> (`small`), sin `interactive`, de 2 o 3 pasos.
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`):
+> **8 usos en 8 archivos**. 7 en los onboardings: todos `variant="horizontal"`, sin `size`
+> (`small`), sin `interactive`, de 2 o 3 pasos. 1 en el home del cliente:
+> `pages/customer/store-browser/store-browser.html:214`, `variant="dot"`, `size="medium"`,
+> `[interactive]="true"` (paginador de los rubros, desde el 03-10-2026).
 
 ### `variant`
 
@@ -45,7 +48,7 @@ Regla corta: **pasos con nombre y orden → stepper · porcentaje → progress-b
 |---|---|---|---|
 | `horizontal` (default) | Flujo de **2 a 4 pasos** con nombre, arriba del contenido del paso. Mobile y web. | `pages/driver-onboarding/step-info/step-info.html:3` («Datos → Vehículo → Listo») | según la guía del DS (procesos secuenciales); el límite de pasos es propuesta |
 | `vertical` | Flujo de **5+ pasos** en web, en una columna al costado del formulario. | (sin uso) | según la guía del DS (la pieza existe); el cuándo es propuesta |
-| `dot` | Pantallas que se pasan de a una sin nombre: carrusel de bienvenida, fotos. | (sin uso) | según la guía del DS (puntos de carrusel) |
+| `dot` | Pantallas que se pasan de a una sin nombre: carrusel de bienvenida, fotos. | `pages/customer/store-browser/store-browser.html:214` (páginas de rubros del home) | según la guía del DS (puntos de carrusel) |
 
 ### `size`
 
@@ -53,7 +56,7 @@ Regla corta: **pasos con nombre y orden → stepper · porcentaje → progress-b
 |---|---|---|---|
 | `small` (default) | punto de 8 · indicador de 20 · texto 14 | Web. | según la guía del DS (`small` es su default) |
 | `xsmall` | solo el punto: 4 px. Horizontal y vertical quedan igual que `small`. | Puntos sobre una foto o un banner chico, donde 8 px tapan. | según la guía del DS (el tamaño existe); el cuándo es propuesta |
-| `medium` | punto de 10 · indicador de 24 · texto 16 · card vertical de 44 | Mobile. **Está en el repo del DS (03-10-2026), no en la versión publicada 0.19.0.** | canon (dueño: tamaño por plataforma, 03-10-2026) |
+| `medium` | punto de 10 · indicador de 24 · texto 16 · card vertical de 44 | Mobile. Publicado desde la 0.20.0 (la app usa la 0.22.0). | canon (dueño: tamaño por plataforma, 03-10-2026) |
 
 ### Estado de cada paso (`currentStep`, `errorStep`)
 
@@ -70,7 +73,7 @@ Regla corta: **pasos con nombre y orden → stepper · porcentaje → progress-b
 | valor | cuándo | fuente |
 |---|---|---|
 | `false` (default) | Los onboardings: se avanza con el botón «Continuar», no tocando el paso. | propuesta, falta aprobación |
-| `true` | Solo si los pasos hechos se pueden **volver a editar** y en web (el área tocable es chica, ver Tamaño). | propuesta, falta aprobación |
+| `true` | Los puntos de un carrusel (en el teléfono se tocan en 44 de alto, ver Tamaño), o pasos hechos que se pueden **volver a editar** en web (el horizontal mide 24 de alto). | propuesta, falta aprobación |
 
 ### `steps`, `count`, `ariaLabel`
 
@@ -82,11 +85,14 @@ Regla corta: **pasos con nombre y orden → stepper · porcentaje → progress-b
 
 **Usos de hoy que rompen las reglas:**
 
-- **0 de variante o estado**: los 7 son horizontales de 2 o 3 pasos, y `step-complete` usa
+- **0 de variante o estado** en los onboardings: los 7 son horizontales de 2 o 3 pasos, y `step-complete` usa
   `currentStep = stepLabels.length` para marcar todo hecho (`pages/driver-onboarding/step-complete/step-complete.html:3`).
-- **7 sin tamaño por plataforma** (el `medium` todavía no está publicado): los onboardings se hacen
-  en el teléfono. Cuando se publique, `[size]="bp.isMobile() ? 'medium' : 'small'"`. Ejemplos:
+- **7 sin tamaño por plataforma** (`medium` ya está publicado): los onboardings se hacen en el
+  teléfono y van con `[size]="bp.isMobile() ? 'medium' : 'small'"`. Ejemplos:
   `pages/customer-onboarding/step-phone/step-phone.html:3`, `pages/business-onboarding/step-info/step-info.html:3`.
+- **A discutir, 1 `interactive` en mobile:** `pages/customer/store-browser/store-browser.html:214`
+  usa los puntos `medium` como paginador tocable en el home del cliente. Desde el 04-10-2026 cada
+  punto se toca en 22 × 44 en el teléfono (ver Tamaño); el dibujo sigue de 10 × 10.
 
 ## Tamaño en mobile y en web
 
@@ -94,25 +100,29 @@ Regla corta: **pasos con nombre y orden → stepper · porcentaje → progress-b
 |---|---|---|---|
 | horizontal arriba de un paso | `medium` (indicador 24, texto 16) | `small` (indicador 20, texto 14) | canon (dueño: tamaño por plataforma, 03-10-2026) |
 | vertical al costado | no se usa (no entra al lado del formulario) | `small` | propuesta, falta aprobación |
-| puntos de carrusel | `medium` (10) | `small` (8) | propuesta, falta aprobación |
+| puntos de carrusel | `medium` (10, se toca en 22 × 44) | `small` (8) | tamaño: propuesta, falta aprobación · área de 44: canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
 
 ```html
 <sui-stepper [steps]="pasos" [currentStep]="paso - 1" [size]="bp.isMobile() ? 'medium' : 'small'" />
 ```
 
-Sin `interactive` el tamaño solo afecta lo que se lee. Con `interactive`, **ningún tamaño llega a
-44 px tocables** en horizontal (24 de alto con `medium`) ni en puntos (10 px): por eso
-`interactive` queda para web. La card vertical `medium` sí llega a 44.
+Sin `interactive` el tamaño solo afecta lo que se lee. Con `interactive`, en el teléfono
+(≤ 767 px) **los puntos se tocan en 44 de alto** (canon (dueño, 04-10-2026): piso táctil 44 en el teléfono): un `::before` invisible
+los estira a 44 de alto y, de ancho, hasta la mitad del espacio con el vecino, para que dos áreas
+nunca se pisen: `medium` 22 × 44, `small` 18 × 44, `xsmall` 10 × 44. El dibujo no cambia. No se
+agregó un size que separe los puntos: cambiaría el paginador, y lo que faltaba era alto. El
+horizontal sigue en 24 de alto con `medium`: con `interactive` queda para web. La card vertical `medium` sí llega a 44 (padding 10 + 24 + padding 10).
+Alto de cada pieza: horizontal `small` 20 y `medium` 24 (el indicador; la línea del texto mide lo
+mismo) · puntos 4 / 8 / 10 · card vertical `small` 36 (8 + 20 + 8) y `medium` 44.
 
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
 |---|---|---|
 | `vertical` | ningún flujo tiene 5+ pasos | un alta de local completa en web (datos, carta, horario, pagos, repartidores) |
-| `dot` | ningún carrusel usa el componente | un carrusel de bienvenida o de fotos del producto |
 | `xsmall` | no hay puntos sobre fotos | puntos sobre el banner del carrusel del home |
 | `errorStep` | ningún flujo muestra dónde se cortó | el estado de una solicitud de repartidor rechazada en el paso «Documentos» |
-| `interactive` | en los onboardings se avanza con el botón | un formulario largo en web donde se vuelve a corregir un paso hecho |
+| `interactive` | en los onboardings se avanza con el botón (el único uso, en el home del cliente, está a discutir arriba) | un formulario largo en web donde se vuelve a corregir un paso hecho |
 
 ## API
 
@@ -140,7 +150,7 @@ interface SuiStepperItem {
   label?: string;   // sin label sale «Paso N»
 }
 type SuiStepperVariant = 'dot' | 'horizontal' | 'vertical';
-type SuiStepperSize = 'small' | 'xsmall' | 'medium';   // medium: repo del DS, no en 0.19.0
+type SuiStepperSize = 'small' | 'xsmall' | 'medium';   // medium: extensión SUI (03-10-2026)
 ```
 
 ## Trampas
@@ -152,6 +162,9 @@ type SuiStepperSize = 'small' | 'xsmall' | 'medium';   // medium: repo del DS, n
 - **El horizontal hace `flex-wrap`**: con muchos pasos o nombres largos baja a otra línea en vez de
   cortarse. Con 4+ pasos en mobile, revisa a 390 px.
 - **`stepClick` solo sale con `interactive`**; sin él los pasos son `div` y no responden.
+- **Rol del host (04-10-2026):** sin `interactive` es `role="list"` con hijos `listitem`; con
+  `interactive` los pasos son `<button>` (no pueden ser `listitem`), así que el host pasa a
+  `role="group"` con su `ariaLabel`. El paso actual lleva `aria-current="step"` en los dos casos.
 - `errorStep` gana sobre `currentStep`: los anteriores quedan hechos y los siguientes por hacer.
 - El activo usa `--sui-primary-base`, que en la app es naranja.
 

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

@@ -68,17 +68,22 @@ El ancho lo da el contenedor. El `size` cambia **el corazón de favorito**, en l
 |---|---|---|---|
 | `small` (default) | 36 × 36 | 18 | lo que había en el DS |
 | `medium` | 40 × 40 | 20 | canon (aprobado por el dueño, 03-10-2026): extensión SUI |
+| `large` | 44 × 44 | 20 | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono. Size nuevo del 04-10-2026; además la nota se toca en 44 de alto |
 
 | uso | mobile | web | fuente |
 |---|---|---|---|
 | tarjeta | ancho completo | celda de una grilla de 2–3 columnas (≥ 300 de ancho) | lo que hay en la app |
-| corazón de favorito | `medium` (40) | `small` (36) | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
-| nota (abre las opiniones) | el alto de su columna (~40) | ~40 | lo que hay en el DS |
+| corazón de favorito | `large` (44) | `small` (36) | canon (dueño, 04-10-2026): piso táctil 44 en el teléfono |
+| 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() ? 'medium' : 'small'" />
+<sui-store-card [store]="local" [size]="bp.isMobile() ? 'large' : 'small'" />
 ```
 
+`medium` (40) queda para quien ya lo usa: no llega al piso de 44. **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' : 'small'"` (cambio de la app, no del DS).
+
 ## «No usar»: por qué no hoy y cuándo sí
 
 | qué | por qué no hoy | cuándo sí, en un flujo nuevo |
@@ -97,7 +102,7 @@ El ancho lo da el contenedor. El `size` cambia **el corazón de favorito**, en l
 | `isFavorite` | `boolean` | `false` |
 | `disableLink` | `boolean` | `false` |
 | `linkBase` | `string` | `'/cliente/restaurante'` |
-| `size` | `'small' \| 'medium'` | `'small'` |
+| `size` | `'small' \| 'medium' \| 'large'` | `'small'` |
 | `deliveryText` | `string \| null` | `undefined` |
 | `distanceText` | `string \| null` | `undefined` |
 

package/docs/sui-switch/README.md

@@ -22,7 +22,7 @@ propio título (día de la semana, tarjeta de la oferta).
   descripción y el toque en toda la fila.
 - Un valor de formulario que se confirma con «Guardar»: `sui-checkbox`. (Excepción aceptada hoy:
   los formularios de producto y de planes usan switch para «disponible»/«activo» aunque se guarden
-  después; es el patrón que la persona reconoce.)
+  después; es el patrón que la persona reconoce. Propuesta, falta aprobación.)
 - Algo destructivo o que no se deshace: el switch promete que se puede volver atrás al toque.
 - Elegir entre dos modos con nombre: `sui-segmented-control` si se aplica al instante (cuadrícula /
   lista); `sui-radio-card` si se guarda después («Por distancia» / «Precio único» en ajustes).
@@ -64,24 +64,24 @@ Regla corta: **se aplica ya → switch · se confirma después → checkbox · d
 **Usos de hoy que rompen las reglas:**
 
 - **19 switches con su texto armado a mano → `sui-switch-label`.** Ejemplos:
-  `pages/discounts/discounts.html:198` («Un uso por cliente», con `sui-form-label` + `<span>`),
+  `pages/discounts/discounts.html:207` («Un uso por cliente», con `sui-form-label` + `<span>`),
   `pages/drivers/drivers.html:58` («Aceptar pedidos automáticamente»),
-  `pages/super-admin/master-plans/master-plans.html:90` («Plan activo», y 8 más en ese archivo).
-  El resto: `discounts.html:302`, `pages/super-admin/master-map-overview/master-map-overview.html:67`,
-  `pages/schedule/schedule.html:46`, `components/add-product-modal/add-product-modal.html:196`, `:255`, `:280`,
-  `components/option-sections-manager/option-sections-manager.html:107`, `:123`.
+  `pages/super-admin/master-plans/master-plans.html:92` («Plan activo», y 8 más en ese archivo).
+  El resto: `discounts.html:319`, `pages/super-admin/master-map-overview/master-map-overview.html:67`,
+  `pages/schedule/schedule.html:46`, `components/add-product-modal/add-product-modal.html:205`, `:264`, `:289`,
+  `components/option-sections-manager/option-sections-manager.html:107`, `:125`.
 - **3 con la etiqueta que repite el estado** («Disponible» / «No disponible», «Activo»):
-  `components/option-sections-manager/option-sections-manager.html:143`,
-  `components/add-product-modal/add-product-modal.html:303`, `pages/employees/employees.html:99`.
+  `components/option-sections-manager/option-sections-manager.html:145`,
+  `components/add-product-modal/add-product-modal.html:312`, `pages/employees/employees.html:99`.
 - **2 en `medium` (sin `size`):** `pages/drivers/drivers.html:58`,
   `pages/super-admin/master-map-overview/master-map-overview.html:67`.
 - **1 nativo dibujado como switch:** `components/settings-panel/settings-panel.html:97`
   («Notificaciones Push») → `sui-switch-label`.
 
-Bien pelados (el texto vive en la fila o la tabla): `pages/discounts/discounts.html:96` (columna
-de la tabla), `pages/super-admin/master-settings/master-settings.html:103`, los días de
+Bien pelados (el texto vive en la fila o la tabla): `pages/discounts/discounts.html:98` (columna
+de la tabla), `pages/super-admin/master-settings/master-settings.html:105`, los días de
 `components/weekly-schedule-editor/weekly-schedule-editor.html:5` y
-`pages/driver/driver-schedule/driver-schedule.html:108`, `pages/central/central-ofertas/central-ofertas.html:19`.
+`pages/driver/driver-schedule/driver-schedule.html:106`, `pages/central/central-ofertas/central-ofertas.html:19`.
 
 ## Tamaño en mobile y en web
 
@@ -114,6 +114,7 @@ va `sui-switch-label`, que hace tocable todo el bloque.
 | `size` | `'medium' \| 'large' \| 'xlarge'` | `'medium'` |
 | `checked` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
+| `focusable` | `boolean` | `true` |
 
 | output | payload |
 |---|---|
@@ -131,6 +132,10 @@ Implementa `ControlValueAccessor` (`[(ngModel)]`, `formControlName`).
   mezcles las dos formas.
 - `disabled` no baja la opacidad: cambia el color y achica el círculo. Un `opacity` encima lo duplica.
 - No tiene `aria-label`: pelado, pásalo con `[attr.aria-label]` (como en `central-ofertas`).
+  Dentro de `sui-switch-label`, `sui-switch-card`, `sui-integration-switch` y el toggle de
+  `sui-content-label` ya toma el nombre del texto con `aria-labelledby` (revisión 04-10-2026).
+- **`[focusable]="false"` lo saca del Tab** (tabindex -1), para cuando un padre es el control
+  enfocable. `tabindex="-1"` en el host no sirve: el binding del componente lo pisa.
 - Ya trae el arreglo de iOS para el `:active` pegado.
 
 ## Ejemplo

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

@@ -17,7 +17,8 @@ su propia tarjeta: «Notificaciones», «Ubicación siempre», «Recibir pedidos
 
 **No lo uses** para:
 
-- Algo que se confirma después con «Guardar»: `sui-checkbox-card` (canon del switch-label).
+- Algo que se confirma después con «Guardar»: `sui-checkbox-card` (según la guía del DS: el switch
+  es «para prender o apagar un ajuste de forma inmediata»).
 - Una lista larga de ajustes parecidos: `sui-switch-label` con `flip`, uno por fila.
 - Una integración con otro servicio (logo + «Administrar»): `sui-integration-switch`.
 - Algo destructivo o que no se deshace: un botón con confirmación.
@@ -30,16 +31,16 @@ Regla corta: **ajuste con peso, al toque → switch-card · lista de ajustes →
 > **La guía del DS no tiene página de la switch card.** De la guía sale lo del switch que lleva
 > adentro: **«para prender o apagar un ajuste de forma inmediata»**.
 >
-> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **26
-> switch-cards en 8 archivos**. Tipos: 19 `left-icon` (los 19 con el ícono proyectado), 7 `basic`
-> (5 de ellos sin `type`). Tamaños: 20 `bp.controlSize()`, 6 sin `size`. 10 viven en formularios
-> que se guardan con un botón.
+> Uso medido el 04-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-card`): **16
+> switch-cards en 8 archivos**. Tipos: 14 `left-icon` (los 14 con el ícono proyectado), 2 `basic`.
+> Tamaños: los 16 con `bp.controlSize()`. Ninguna vive ya en un formulario que se guarda con un
+> botón: las 10 que lo hacían pasaron a `sui-checkbox-card` el 03-10-2026.
 
 ### `type` (el leading)
 
 | type | cuándo | fuente |
 |---|---|---|
-| `left-icon` + ícono proyectado | Lo normal: `<sui-icon sui-switch-card-leading name="…" [size]="20" />`. | propuesta (19 de 26) |
+| `left-icon` + ícono proyectado | Lo normal: `<sui-icon sui-switch-card-leading name="…" [size]="20" />`. | propuesta (14 de 16) |
 | `left-icon` + `emoji` | Ver «No usar». | propuesta |
 | `basic` | El ajuste es EL tema de la pantalla y no necesita ícono («Disponible» en el inicio del repartidor, «Disponibilidad automática»). | propuesta |
 | `avatar` (`imageUrl`) | Ver «No usar». | propuesta |
@@ -64,19 +65,16 @@ Regla corta: **ajuste con peso, al toque → switch-card · lista de ajustes →
 | `large` (40 × 24) | Desktop, vía `bp.controlSize()`. | canon (aprobado por el dueño, 28-09-2026) |
 | `medium` (default) | No usar en pantallas nuevas. | canon (aprobado por el dueño, 28-09-2026) |
 
-**Usos de hoy que rompen las reglas:**
-
-- **10 switch-cards en formularios que se guardan con un botón** (van `sui-checkbox-card`): los 5
-  métodos de pago de `pages/mi-negocio/mi-negocio.html:1181`–`:1217` («Guardar cambios») y 5 de
-  `pages/super-admin/master-settings/master-settings.html` (`:36` «Pausar los pedidos», `:179`,
-  `:336`, `:342`, `:349`, cada uno con su «Guardar…» abajo).
-- **6 sin `size`**: los 5 de `master-settings` de arriba y `pages/notifications/notifications.html:59`
-  («Sonidos de la app»).
+**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.
 
 ## Tamaño en mobile y en web
 
-La card entera se toca (≥ 72 con descripción): llega al piso de 44 sola. El `size` cambia solo el
-interruptor.
+La card entera se toca: 74 px con descripción (16 + 40 + 16 de padding y contenido, más 2 de
+borde) y 54 px la más chica (`basic`, sin descripción, `medium`). Llega al piso de 44 sola. El
+`size` cambia solo el interruptor.
 
 | uso | mobile | web |
 |---|---|---|
@@ -130,6 +128,10 @@ Slot: `[sui-switch-card-leading]` (el ícono o el logo). Implementa `ControlValu
 - `avatar` siempre dibuja un `sui-avatar` con `imageUrl` (si falla, las iniciales del `label`): no usa lo
   proyectado. `card-provider`, `brand` y `company` leen `imageUrl` y, sin ella, usan lo proyectado.
 - Toda la card togglea; el toque sobre el propio switch no cuenta doble.
+- **Teclado**: el único tab stop es el switch de la derecha, con nombre = `label` y descripción =
+  `description` (`aria-labelledby` / `aria-describedby`). Espacio y Enter emiten
+  `checkedChange` **una vez** (revisión 04-10-2026); antes emitían dos (el switch y, por burbujeo, la card),
+  y en formulario el valor se revertía.
 - El interruptor siempre va a la derecha (no hay `flip`).
 - `badge` con string sale **azul `light` `small`** (en `sui-switch-label` sale naranja).