@ajuarezso/sui-design-system 0.19.0 → 0.20.0

package/docs/sui-icon/README.md

@@ -0,0 +1,135 @@
+---
+name: sui-icon
+selector: sui-icon
+resumen: Un ícono monocromo de RemixIcon (o uno propio del DS) que toma el color del texto
+alternativas: [sui-key-icon (el ícono dentro de un círculo de color), sui-emoji (emoji con emoción), sui-brand-logo (el logo de otra marca en su color), sui-compact-button (un ícono que se toca)]
+---
+
+# sui-icon
+
+Story: [Atoms/Icon/Icon](https://sui-design-system.web.app/?path=/docs/atoms-icon-icon--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para **todo ícono**: dentro de un texto, una fila, una card, un título. Es la única
+forma de poner un ícono: nada de `<i class="ri-…">` ni SVG pegado en el template. Los íconos
+propios del DS (`info-custom-fill`, `heart-half-fill`…) también pasan por aquí.
+
+**No lo uses** para:
+
+- Un ícono que se toca: `sui-compact-button` o un `sui-button` con `leftIcon`/`onlyIcon`.
+- Un ícono dentro de un círculo de color (cabecera de un modal, inicio de una fila): `sui-key-icon`.
+- Emoción (estado vacío, celebración): `sui-emoji`.
+- El logo de una marca cuando la marca es lo que se muestra: `sui-brand-logo`.
+
+## Qué variante usar
+
+> **La guía del DS no tiene página para el ícono**: usa RemixIcon en todos sus ejemplos, sin
+> reglas de tamaño. La escala de abajo sale de los tokens del DS (`--sui-icon-size-*` y
+> `--sui-icon-*` en `sui-tokens.scss`). Lo marcado «canon» ya es regla del proyecto; el resto es
+> **propuesta, falta aprobación**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 406 íconos en 95 archivos, sin contar
+> prototipos ni vitrinas. 331 `-line`, 43 `-fill`. Ninguno usa el input `color`.
+
+### `size`
+
+| valor | tamaño de hoy | cuándo | fuente |
+|---|---|---|---|
+| `12` | 5 | Dentro de un badge `small`. | propuesta (token `--sui-icon-size-xs`) |
+| `16` | 69 | Junto a texto chico: metadatos, botones `2xsmall`/`xsmall`, dentro de un kbd. | propuesta (token `--sui-icon-size-sm`) |
+| `20` (default) | 114 | El normal: botones, inputs, filas, navegación. | propuesta (token `--sui-icon-size-md`) |
+| `24` | 5 | Cabeceras y acciones sueltas. | propuesta (token `--sui-icon-size-lg`) |
+| `32` | 2 | Ícono protagonista. Si va dentro de un círculo, es `sui-key-icon`. | propuesta (token `--sui-icon-size-xl`) |
+| `26` | 7 | Solo el ícono del hero de los onboarding (`ob__hero-icon`). | canon (`CLAUDE.md`, patrón de los pasos de onboarding) |
+| `14`, `18` | 149 | Fuera de la escala, pero el DS mismo los usa (tabs, product-card). **A discutir**: no migrar en masa. | propuesta |
+| `13`, `22`, `28`, `44`… | 49 | Sin regla: van al más cercano de la escala. | propuesta |
+
+**Usos de hoy fuera de la escala sin regla: 49.** `22` (20 usos: `components/ota-quick-fab/ota-quick-fab.html:11`,
+`pages/schedule/schedule.html:10`), `13` (14: `pages/super-admin/master-drivers/master-drivers.html:359`, `:419`),
+`28` (4: `pages/envios/envios.html:691`), `44`, `48` y `36` (6: `pages/support/support.html:9`,
+`components/product-detail-view/product-detail-view.html:30`), y uno cada uno de `10`, `11`, `15`,
+`30`, `34`. Los de 36 px en adelante casi siempre son un ícono protagonista que quiere ser
+`sui-key-icon` o un `sui-emoji`.
+
+### `name`: `-line` o `-fill`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| `-line` | El normal. | propuesta |
+| `-fill` | El seleccionado (el tab activo) o un glifo chico sobre color. | propuesta |
+| propios del DS (`info-custom-fill`, `heart-half-fill`, `building-skyline`, `avatar-placeholder`) | Los usan componentes del DS; en la app no hacen falta. | propuesta |
+
+### `color`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| sin `color` (default) | El normal: hereda el color del texto. Casi siempre es lo que se quiere. | propuesta |
+| `var(--sui-icon-sub-600)` | Ícono de apoyo junto a un texto principal. | propuesta |
+| `var(--sui-icon-soft-400)` | Decorativo, metadatos. | propuesta |
+| `var(--sui-icon-disabled-300)` | Deshabilitado. | propuesta |
+| `var(--sui-icon-white-0)` | Sobre fondo oscuro o de color. | propuesta |
+| un hex o un color de estado | No usar: si el ícono dice un estado, va en `sui-key-icon` `lighter`. | propuesta |
+
+## Tamaño en mobile y en web
+
+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**.
+
+| uso | mobile | web |
+|---|---|---|
+| junto al texto de una fila | `20` | `16` |
+| ícono protagonista | `32` | `24` |
+| metadatos | `16` | `16` |
+| dentro de un botón o un input | lo decide el componente | igual |
+
+```html
+<sui-icon name="store-2-line" [size]="bp.isMobile() ? 20 : 16" />
+```
+
+Un ícono suelto **nunca** es el área táctil: si se toca, va en `sui-compact-button` o
+`sui-button` `onlyIcon`, que dan los 44 px. Hoy solo 2 íconos cambian por breakpoint
+(`pages/discounts/discounts.html:101` y `:106`, con `bp.isTablet() ? 20 : 16`).
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| tamaños `13`, `22`, `28`, `44`… | no hay regla que los pida | ninguno: van al más cercano de 12/16/20/24/32 |
+| `color` con un hex | rompe el tema oscuro | ninguno |
+| `<i class="ri-…">` o SVG pegado | se salta el componente | ninguno |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `name` | `string` | — (requerido) |
+| `size` | `number \| string` | `20` |
+| `color` | `string` | `''` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+## Trampas
+
+- **`name` va sin el prefijo `ri-`**: `name="store-2-line"`, no `ri-store-2-line`.
+- **`size` acepta número o string**: `[size]="20"` son px; `size="1.25em"` es CSS. Con
+  `size="20"` (string sin unidad) el ícono no toma tamaño.
+- **El nombre no se valida**: si no existe en RemixIcon, sale vacío sin error.
+- **No tiene `aria-label`**: los propios del DS llevan `aria-hidden`; los de RemixIcon son un
+  `<i>` vacío. Si el ícono es lo único que dice algo, el texto va al lado o en el contenedor.
+- **La app necesita la fuente de RemixIcon** (`remixicon/fonts/remixicon.css` en `styles.scss`):
+  el paquete del DS no la trae.
+- Dentro de un `sui-kbd`, el kbd le fuerza el color `text-sub-600`.
+
+## Ejemplo
+
+```html
+<sui-icon name="store-2-line" [size]="16" />
+<sui-icon name="time-line" [size]="20" color="var(--sui-icon-sub-600)" />
+```

package/docs/sui-kbd/README.md

@@ -0,0 +1,97 @@
+---
+name: sui-kbd
+selector: sui-kbd
+resumen: Una tecla dibujada para mostrar un atajo de teclado (⌘K, Esc, ↑ ↓)
+alternativas: [sui-badge (una etiqueta corta que no es una tecla), sui-tag (un chip)]
+---
+
+# sui-kbd
+
+Story: [Atoms/Kbd](https://sui-design-system.web.app/?path=/docs/atoms-kbd--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** solo para **mostrar un atajo de teclado** en desktop: el ⌘K del buscador, el Esc para
+cerrar, las flechas y el enter al pie de un menú.
+
+**No lo uses** para:
+
+- Una etiqueta o un número: `sui-badge`.
+- Nada en mobile: con el dedo no hay teclas.
+
+## Qué variante usar
+
+> **La guía del DS tiene una sola variante** (la tecla con texto) y la muestra dentro del
+> buscador del command menu. Lo marcado «según la guía del DS» sale de ahí; el resto es
+> **propuesta, falta aprobación**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usan por dentro
+> `sui-command-menu-search`, `sui-command-menu-item`, `sui-command-menu-footer`, `sui-filter`,
+> `sui-notification-footer` y `sui-topbar`.
+
+### Lo que sí dice la guía del DS
+
+- **Para qué es**: mostrar el estilo de una tecla.
+- **Cómo es**: 20 px de alto, fondo blanco, borde `stroke-soft-200`, texto `text-soft-400`.
+- **Dónde lo pone**: el ⌘K al lado del buscador del command menu.
+
+### `variant`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| `default` | Tecla con texto: ⌘K, Esc. | según la guía del DS |
+| `subtle` | Tecla con un ícono de 16 px (flechas, enter) al pie de un menú. Extensión de SUI (sale del Figma del command menu). | propuesta |
+
+Usos de hoy que rompen la regla: **0**.
+
+## Tamaño en mobile y en web
+
+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**.
+
+| uso | mobile | web |
+|---|---|---|
+| atajo de teclado | no se muestra | tamaño único (20 px de alto) |
+
+```html
+@if (!bp.isMobile()) { <sui-kbd>⌘K</sui-kbd> }
+```
+
+No tiene tamaños: en mobile no hay teclado físico, así que no se pinta.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| directo en una pantalla | la app se usa con el dedo | atajos del panel del super admin o del local en desktop: ⌘K para buscar, Esc para cerrar |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `variant` | `'default' \| 'subtle'` | `'default'` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+Slot: `<ng-content>` (el texto o el `sui-icon`).
+
+## Trampas
+
+- **El texto sale en MAYÚSCULAS** (`text-transform: uppercase`): «esc» se ve «ESC».
+- **`subtle` no se elige solo** al poner un ícono: hay que pedirlo.
+- El ícono de adentro va a 16 px y toma `text-sub-600` aunque le pongas otro color.
+- Mide 20 px de alto fijo: no crece con el texto de al lado.
+
+## Ejemplo
+
+```html
+<sui-kbd>⌘K</sui-kbd>
+
+<sui-kbd variant="subtle"><sui-icon name="arrow-up-line" [size]="16" /></sui-kbd>
+```

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

@@ -0,0 +1,125 @@
+---
+name: sui-key-icon
+selector: sui-key-icon
+resumen: Un ícono dentro de un círculo, con fondo de color si el ícono dice un estado
+alternativas: [sui-icon (el ícono suelto), sui-avatar (cuando es una persona o un local), sui-payment-icon (el círculo ya armado para un pago de servicio)]
+---
+
+# sui-key-icon
+
+Story: [Atoms/Icon/Key Icon](https://sui-design-system.web.app/?path=/docs/atoms-icon-key-icon--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando un ícono tiene que **anclar** algo: el inicio de una fila, la cabecera de un
+modal, el resultado de una acción («Cuenta bloqueada», «¡Gracias por calificar!»).
+
+**No lo uses** para:
+
+- Una persona o un local: `sui-avatar`.
+- Un ícono dentro de un texto o un botón: `sui-icon`.
+- Algo que se toca: no es clickeable (sin foco, sin output). Envuélvelo en la card o el botón.
+
+## Qué variante usar
+
+> **La guía del DS no tiene página para este componente.** Todo es **propuesta, falta
+> aprobación**.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: **0 usos directos**. Lo usan por dentro
+> `sui-content-label` y `sui-payment-icon`.
+
+### `styleVariant`
+
+| valor | cuándo | fuente |
+|---|---|---|
+| `lighter` | El ícono dice un estado: el color del fondo **es** el significado («Cuenta bloqueada» en rojo, «Calificación enviada» en verde). | propuesta |
+| `stroke` (default) | Ícono neutro al inicio de una fila, sobre fondo blanco. **Siempre con `color="gray"`.** | propuesta |
+
+### `color` — mismo significado que el badge
+
+| valor | estado de la paleta | cuándo | fuente |
+|---|---|---|---|
+| `gray` (default) | faded | Neutro. El único color para `stroke`. | propuesta |
+| `blue` | information | Información. | propuesta |
+| `orange` | warning | Pendiente, pide atención. | propuesta |
+| `red` | error | Error, bloqueado, rechazado. | propuesta |
+| `green` | success | Bien, listo, aprobado. | propuesta |
+| `yellow` | away | En pausa. | propuesta |
+| `purple` | feature | Novedad. | propuesta |
+| `pink` | highlighted | Destacado. | propuesta |
+| `teal` | verified | Verificado. | propuesta |
+
+### `size`
+
+| valor | ícono | cuándo | fuente |
+|---|---|---|---|
+| `32` | 20 | Filas densas. | propuesta |
+| `40` (default) | 20 | Filas de una lista. | propuesta |
+| `48` | 24 | Cards. | propuesta |
+| `56` | 28 | Cabecera de un modal. | propuesta |
+| `64` | 32 | El resultado de un modal: cuenta bloqueada, calificación enviada. | propuesta |
+
+**Usos de hoy que romperían la propuesta: 7 círculos con ícono hechos a mano.** Dos son un
+`sui-key-icon` `lighter` exacto: `components/cuenta-bloqueada/cuenta-bloqueada.html:4` (64 px,
+fondo `error-lighter`) y `components/driver-rate-modal/driver-rate-modal.html:17` (64 px,
+`success-lighter`). Los otros cinco se acercan (40–48 px, fondos neutros o `primary-alpha-10`):
+`pages/envios/envios.html:27`, `pages/customer/mandadito/mandadito.html:255`,
+`pages/customer/confirmation/confirmation.html:29`,
+`pages/customer/order-tracking/order-tracking.html:487`, `pages/products/add-product/add-product.html:74`.
+Se encontraron buscando reglas `*icon*` con `border-radius: 50%`, fondo y 32–64 px: puede haber más.
+
+## Tamaño en mobile y en web
+
+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**.
+
+| uso | mobile | web |
+|---|---|---|
+| inicio de una fila | `40` | `32` |
+| card | `48` | `40` |
+| resultado de un modal | `64` | `56` |
+
+```html
+<sui-key-icon name="lock-line" styleVariant="lighter" color="red" [size]="bp.isMobile() ? 64 : 56" />
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `stroke` con un color que no sea `gray` | el color solo tiñe el ícono y se confunde con `lighter` | ninguno: si el color significa algo, es `lighter` |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `name` | `string` | — (requerido) |
+| `styleVariant` | `'stroke' \| 'lighter'` | `'stroke'` |
+| `color` | `'gray' \| 'blue' \| 'orange' \| 'red' \| 'green' \| 'yellow' \| 'purple' \| 'pink' \| 'teal'` | `'gray'` |
+| `size` | `32 \| 40 \| 48 \| 56 \| 64` | `40` |
+
+Outputs: ninguno.
+<!-- api:fin -->
+
+## Trampas
+
+- **El estilo se llama `styleVariant`**, no `variant` ni `style` (choca con el `style` del HTML).
+- **`size` es un número**: `[size]="48"`. Con `size="48"` (string) no compila.
+- **El ícono no baja de 20 px**: en `32` sigue en 20 (es el Figma), en el resto es la mitad.
+- **El default es `stroke` `gray`**: si quieres el círculo de color, pide `lighter` explícito.
+- `name` va sin `ri-`, como en `sui-icon`.
+
+## Ejemplo
+
+```html
+<!-- Resultado de un modal -->
+<sui-key-icon name="lock-line" styleVariant="lighter" color="red" [size]="64" />
+
+<!-- Inicio de una fila -->
+<sui-key-icon name="store-2-line" />
+```

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

@@ -0,0 +1,221 @@
+---
+name: sui-link-button
+selector: sui-link-button
+resumen: Acción que se lee como texto, sin caja
+alternativas: [sui-button (acción con caja: la principal o la secundaria de un grupo), sui-compact-button (solo ícono, sin texto), sui-alert (sus acciones se pasan en actions[] y ya salen como link)]
+---
+
+# sui-link-button
+
+Story: [Atoms/Button/Link Button](https://sui-design-system.web.app/?path=/docs/atoms-button-link-button--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** para una acción que se lee como texto: «Ver todas» en la cabecera de una sección,
+«Omitir» o «Ahora no», «Términos y condiciones» dentro de un párrafo, «Cambiar» junto a un dato.
+Es el reemplazo del `sui-button` `ghost` `primary`.
+
+**No lo uses** para:
+
+- **La acción principal** de un grupo: `sui-button` `filled`.
+- **Abrir una acción destructiva grande** (cancelar un pedido, rechazarlo, anular un gasto):
+  `sui-button` `stroke` `error`. El link `error` es para quitar algo menor.
+- **Las acciones de un alert o un toast**: se pasan en `actions[]` y el componente ya las pinta
+  como link `modifiable`. No proyectes un link-button a mano dentro.
+- **Un ícono solo**: `sui-compact-button`.
+
+## Qué variante usar
+
+> **La guía del DS no dice cuándo usar cada variante.** Su página muestra los cinco colores,
+> los dos tamaños, el subrayado, los íconos y el deshabilitado, sin do/don't. Las reglas de
+> abajo son **canon (aprobado por el dueño, 03-10-2026)** salvo donde dice otra fuente.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`: 22 link-buttons en 17 archivos, sin
+> contar prototipos ni vitrinas (`master-preview`, `master-prototipos`, `mockup-sheets-*`,
+> `dx/*`, `master-rutina`, `master-medico`, `dev-index`) ni la copia local del componente en
+> `components/sui/sui-link-button/`. Variantes: 10 `gray` (1 por default), 7 `primary`,
+> 3 `error`, 2 `modifiable`, 0 `black`. Tamaños: 16 `medium`, 6 `small`. 8 con `leftIcon`,
+> 4 con `rightIcon`, 4 con `href`, 2 con `underline`, 2 con `disabled`.
+
+### Lo que sí dice la guía del DS
+
+- **Para qué es**: botones que se integran con el texto que los rodea.
+- **Defaults**: `gray` + `medium`. Igual que SUI.
+- **`modifiable` no tiene color propio**: hereda el del contenedor, para que lo pinte quien lo usa.
+- **Subrayado**: aparece al pasar el mouse; con `underline` queda fijo.
+- **Deshabilitado**: el texto pasa a `text-disabled-300` y se va el subrayado.
+- **Tamaños**: `large` (24 px, texto `label-md`, ícono 20; extensión SUI para mobile), `medium` (20 px, `label-sm`, ícono 20) y `small` (16 px, `label-xs`, ícono 16).
+
+### `variant`
+
+| variant | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `primary` | El link principal de una sección: «Ver todas», «Cambiar horario», «Descargar la app». Reemplaza al `sui-button` `ghost` `primary`. | `pages/customer/checkout/checkout.html:165` («Cambiar horario») · `pages/public/landing-business/landing-business.html:208` («Descargar la app») | canon (aprobado por el dueño, 03-10-2026) |
+| `gray` (default) | Salida de baja jerarquía: «Omitir», «Ahora no», «Cerrar sesión», «Más información». | `pages/account-suspended/account-suspended.html:70` («Cerrar sesión») · `pages/super-admin/master-approvals/master-approvals.html:90` («Más información») | canon (aprobado por el dueño, 03-10-2026) |
+| `black` | Un link dentro de un texto, con `underline`: «Términos y condiciones», «Ver política». | (sin uso hoy) | canon (aprobado por el dueño, 03-10-2026) |
+| `error` | Quitar algo menor, en texto: «Quitar», «Borrar foto». Nunca para abrir una destructiva grande. | (sin uso correcto hoy) | canon (aprobado por el dueño, 03-10-2026) |
+| `modifiable` | Toma el color del contenedor: las acciones del alert, del banner y del toast. | `components/sui/sui-toast/sui-toast-outlet.html:36` (acción del toast) · `components/subscription-banner/subscription-banner.html:10` («Renovar plan») | hereda el color: según la guía del DS · dónde va: canon (aprobado por el dueño, 03-10-2026) |
+
+**Usos de hoy que rompen la regla:**
+
+- **3 `error` que abren una destructiva grande → `sui-button` `stroke` `error`:**
+  `pages/super-admin/master-orders/master-orders.html:425` («Cancelar pedido»),
+  `pages/orders/orders.html:232` («Rechazar pedido»), `pages/central/central-gastos/central-gastos.html:101`
+  («Anular gasto»).
+- A discutir: `pages/super-admin/master-orders/master-orders.html:430` («Liberar» en `gray`): es una
+  acción de operación, no una salida de baja jerarquía.
+
+### `size`
+
+| size | cuándo | fuente |
+|---|---|---|
+| `large` (24 px, texto 16, ícono 20) | Mobile, donde se lee y se toca con el dedo: el link suelto de una pantalla de teléfono. | propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo |
+| `medium` (20 px, default) | Lo normal: cabeceras de sección, párrafos, acciones sueltas. | default según la guía del DS; el «cuándo» es canon (aprobado por el dueño, 03-10-2026) |
+| `small` (16 px) | Junto a un dato en una fila: «Cambiar», «Mi billetera», «Cambiar mi calificación». | canon (aprobado por el dueño, 03-10-2026) |
+
+### `underline`
+
+| underline | cuándo | fuente |
+|---|---|---|
+| `false` (default) | Lo normal: la línea aparece al pasar el mouse o con foco. | según la guía del DS |
+| `true` | Solo la **primera** acción de un alert, banner o toast, o un link dentro de un párrafo (`black`). | solo la primera subrayada: según la guía del DS (alert) · el resto: canon (aprobado por el dueño, 03-10-2026) |
+
+### Íconos
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `rightIcon` (`arrow-right-s-line`) | Cuando el link lleva a otra pantalla: «Ver la carta», «Mi billetera». | canon (aprobado por el dueño, 03-10-2026) |
+| `leftIcon` | Cuando el ícono dice la acción: descargar, editar, agregar, ver. «Descargar la app», «Agregar nota para el conductor». | propuesta |
+| los dos a la vez | No: con dos íconos el link deja de leerse como texto. | propuesta |
+
+Los íconos son nombres RemixIcon sin el prefijo `ri-`. Miden 20 px en `large` y `medium`, y 16 px en `small`.
+
+### `disabled`
+
+| disabled | cuándo | fuente |
+|---|---|---|
+| `true` | La acción existe pero ahora no se puede: mientras se guarda, mientras se procesa otra acción. Mejor que esconderla si la persona la espera en ese lugar. | cómo se ve: según la guía del DS · cuándo: propuesta |
+
+Ejemplos: `components/add-product-modal/add-product-modal.html:330` («Vista previa» mientras guarda),
+`pages/orders/orders.html:232`.
+
+### `href`, `target`, `rel`, `type`, `ariaLabel`
+
+| prop | cuándo | fuente |
+|---|---|---|
+| `href` | Navegar, sin otra acción: el componente pinta un `<a>` real. Las rutas internas (`/cliente/…`) navegan con el Router, sin recargar. | propuesta |
+| `target="_blank"` | Solo para destinos externos: la descarga, un documento, WhatsApp. **Pon también `rel="noopener noreferrer"`**: aquí el default de `rel` es `null`. | propuesta |
+| `type="submit"` | Solo dentro de un `<form>`. El resto, `button` (default). | propuesta (mismo criterio que `sui-button`) |
+| `ariaLabel` | Cuando el texto visible no basta fuera de contexto: «Descargar la app» → «Descargar la app de Master Pedidos». | propuesta |
+
+## 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.
+
+| size | alto | texto | ícono |
+|---|---|---|---|
+| `large` | 24 px | `label-md` 16/24 | 20 |
+| `medium` (default) | 20 px | `label-sm` 14/20 | 20 |
+| `small` | 16 px | `label-xs` 12/16 | 16 |
+
+`large` es extensión SUI (03-10-2026); Figma trae `medium` y `small`. El ícono de `large` es 20
+(como el `sui-button` large), no 24: con 24 el chevron pesa más que el texto.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| link suelto (cabecera de sección, «Omitir», «Ver todas») | `large` (24) | `medium` (20) | web: canon (aprobado por el dueño, 03-10-2026) · mobile `large`: propuesta: el tamaño es extensión SUI aprobada (03-10-2026); el «cuándo» falta aprobarlo (antes era `medium`) |
+| junto a un dato en una fila («Cambiar», «Mi billetera») | `medium` (20) | `small` (16) | canon (aprobado por el dueño, 03-10-2026) |
+| dentro de un párrafo | el del texto que lo rodea | el del texto que lo rodea | propuesta |
+
+```html
+<sui-link-button variant="primary" [size]="bp.isMobile() ? 'large' : 'medium'" rightIcon="arrow-right-s-line">Ver todas</sui-link-button>
+<sui-link-button variant="gray" [size]="bp.isMobile() ? 'medium' : 'small'" rightIcon="arrow-right-s-line">Mi billetera</sui-link-button>
+```
+
+**Ningún tamaño llega a 44 px**: el link mide 16–24 de alto y no tiene padding. En mobile el área
+táctil la pone el contenedor: la fila o el bloque donde vive tiene que medir 44 px o más de alto, o
+dejar aire alrededor del link. `small` (16) no va en mobile: hoy hay 6 links `small` fijos
+(`pages/driver/driver-profile/driver-profile.html:258`, `:264`, `pages/driver/driver-dashboard/driver-dashboard.html:1089`,
+`pages/mi-negocio/mi-negocio.html:472`, `pages/customer/order-history/order-history.html:413`,
+`components/add-product-modal/add-product-modal.html:330`); los 4 de repartidor y cliente se usan
+sí o sí en el teléfono → `[size]="bp.isMobile() ? 'medium' : 'small'"`.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+Ningún valor del link-button está en «no usar»: los cinco colores, los tres tamaños y el
+subrayado tienen un caso. `black` y `error` hoy no tienen un uso correcto en la app, pero la regla
+de arriba dice dónde van.
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `variant` | `'gray' \| 'black' \| 'primary' \| 'error' \| 'modifiable'` | `'gray'` |
+| `size` | `'large' \| 'medium' \| 'small'` | `'medium'` |
+| `underline` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `leftIcon` | `string \| null` | `null` |
+| `rightIcon` | `string \| null` | `null` |
+| `href` | `string \| null` | `null` |
+| `target` | `string \| null` | `null` |
+| `rel` | `string \| null` | `null` |
+| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` |
+| `ariaLabel` | `string \| null` | `null` |
+
+| output | payload |
+|---|---|
+| `clicked` | `MouseEvent` |
+<!-- api:fin -->
+
+Slots: `<ng-content>` (el texto).
+
+## Trampas
+
+- **El output es `(clicked)`**, no `(click)` como en `sui-button`. `(click)` sobre el host igual
+  funciona porque el clic burbujea, pero hoy hay 6 usos así (`components/subscription-banner/subscription-banner.html:10`,
+  `pages/super-admin/master-approvals/master-approvals.html:90`, `pages/central/central-gastos/central-gastos.html:101`,
+  `pages/account-suspended/account-suspended.html:66` y `:70`, `pages/customer/viaje/viaje.html:215`).
+  Usa `(clicked)`, que ya respeta `disabled`.
+- **`rel` arranca en `null`**, a diferencia de compact, fancy y social, que traen
+  `'noopener noreferrer'`. Con `target="_blank"` hay que ponerlo a mano.
+- **`disabled` le gana a `href`**: deshabilitado, el componente pinta un `<button>` y el link desaparece.
+- `modifiable` sin un `color` en el contenedor hereda el color del texto que lo rodea: sobre una
+  superficie blanca sale gris oscuro, no naranja.
+- En hover, `primary` y `error` se oscurecen (`primary-dark`, `red-700`); con foco mantienen el
+  color base y solo se subrayan.
+- El subrayado va solo bajo el texto, no bajo los íconos.
+- Es `display: inline-flex` alineado a la base del texto: fluye dentro de un párrafo como un link
+  normal. Para posicionarlo suelto, lo ubica quien lo usa.
+- En `master-pedidos` hay una **copia local** en `src/app/components/sui/sui-link-button/` (la usa el
+  toast local). No es la del paquete: un arreglo en el DS no le llega.
+- Ya trae el arreglo de iOS para el `:active` pegado: no lo agregues.
+
+## Ejemplo
+
+```html
+<!-- Link principal de una sección -->
+<sui-link-button variant="primary" (clicked)="verTodas()">Ver todas</sui-link-button>
+
+<!-- Junto a un dato, lleva a otra pantalla -->
+<sui-link-button variant="gray" size="small" rightIcon="arrow-right-s-line" (clicked)="irABilletera()">
+  Mi billetera
+</sui-link-button>
+
+<!-- Link dentro de un párrafo -->
+<p>Al continuar aceptas la
+  <sui-link-button variant="black" [underline]="true" href="/privacidad">Política de privacidad</sui-link-button>.
+</p>
+
+<!-- Externo -->
+<sui-link-button variant="primary" leftIcon="download-2-line" href="https://master-pedidos.com/descargar"
+                 target="_blank" rel="noopener noreferrer" ariaLabel="Descargar la app de Master Pedidos">
+  Descargar la app
+</sui-link-button>
+```