@ajuarezso/sui-design-system 0.20.0 → 0.21.0

package/docs/INDEX.md

@@ -9,7 +9,7 @@ se lee esta lista; para usar uno, se abre su doc:
 - en Storybook: `<storybook>/<name sin sui->.md` (ej. `/alert.md`) y la lista en `/index.md`
 - en el repo: `projects/sui-design-system/src/lib/<name>/README.md`
 
-Documentados: 42 de 116.
+Documentados: 92 de 116.
 
 | name | resumen | alternativas |
 |---|---|---|
@@ -18,43 +18,93 @@ Documentados: 42 de 116.
 | `sui-avatar` | La cara de alguien (o el logo de un local) en un círculo, con iniciales cuando no hay foto | sui-avatar-group (varias personas apiladas) · sui-compact-avatar-group (varias personas en una celda de tabla) · sui-key-icon (un ícono en círculo que no es nadie) · sui-image-upload-profile (subir o cambiar la foto) |
 | `sui-avatar-group` | Varias personas apiladas en una fila, con «+N» cuando no entran todas | sui-compact-avatar-group (la versión en píldora, para celdas de tabla) · sui-avatar (una sola persona) |
 | `sui-badge` | Etiqueta corta o número que clasifica algo sin competir con el contenido | sui-status-badge (estado de ciclo: completado, pendiente, fallido, deshabilitado) · sui-tag (chip que se puede quitar) · sui-alert (mensaje que tiene que envolver) |
+| `sui-banner` | Barra de aviso a todo el ancho, arriba de la pantalla, para algo que afecta a toda la app | sui-alert (aviso ligado a una sección o una card) · sui-toast (resultado efímero de una acción) · sui-notification (fila de la bandeja) · sui-modal (algo que bloquea todo, como quedarse sin conexión) |
 | `sui-brand-logo` | El logo oficial de otra marca (WhatsApp, Google, Apple, Instagram…) en su color, sin tocarlo | sui-icon (el mismo logo como ícono monocromo de una línea) · sui-logo (el logo de Master Pedidos) · sui-social-button (botón de entrar con Google o Apple) |
+| `sui-breadcrumb-item` | Una miga suelta de la ruta; casi siempre la dibuja sui-breadcrumbs por ti | sui-breadcrumbs (la ruta completa con separadores) · sui-link-button (un enlace de texto suelto) |
+| `sui-breadcrumbs` | Ruta de migas en web que dice dónde estás dentro de una jerarquía de 3 o más niveles y deja volver a cualquiera | sui-page-header (título de la pantalla) · botón de volver del layout (mobile) · sui-tab-menu-horizontal (secciones del mismo nivel) |
 | `sui-button` | Botón base para que la persona dispare una acción | sui-link-button (acción que se lee como texto) · sui-compact-button (ícono de 20-28 px en filas y barras) · sui-fancy-button (el CTA héroe) · sui-social-button (entrar con Google/Apple) · sui-button-group (opciones que se ven como un solo control) |
 | `sui-button-group` | Opciones pegadas en una fila que se prenden y se apagan, varias a la vez | sui-segmented-control (cambiar de vista o elegir una sola opción) · sui-checkbox (opciones que se suman dentro de un formulario largo) · sui-tab-chips (filtros en chips que se pueden desplazar) |
 | `sui-button-group-item` | Cada opción de un sui-button-group; no se usa suelto | sui-button-group (el grupo, que ya pinta sus ítems desde items[]) · sui-segmented-control (elegir una sola opción) · sui-switch (prender o apagar algo suelto) |
+| `sui-card` | Superficie con borde, radio y sombra que agrupa contenido, con slots de header, cuerpo, media y footer | sui-content-card (una fila «cara + nombre + detalle» dentro de su cajita) · sui-radio-card / sui-checkbox-card / sui-switch-card (la card ES la opción que se elige) · sui-product-card (un producto de la carta) · sui-store-card (un local en un listado del cliente) · sui-modal-sheet (contenido encima de la pantalla) |
+| `sui-chart-legend` | Leyenda de un gráfico — punto de color, nombre de la serie y su valor — dibujada fuera del gráfico | sui-chart-legend-dot (el punto suelto, en una fila o tabla) · la leyenda propia de ECharts (cuando hay que poder apagar series tocándolas) · sui-badge (una etiqueta, no una serie) |
+| `sui-chart-legend-dot` | Punto de color de una serie de gráfico, para atar un número de una fila o una tabla con su color en el gráfico | sui-chart-legend (la leyenda completa, que ya trae sus puntos) · sui-color-dot (elegir un color, no nombrar una serie) · sui-badge with-dot (un estado vivo) |
 | `sui-checkbox` | La casilla sola para marcar una o varias opciones, sin texto propio | sui-checkbox-label (casilla con su texto, el caso normal) · sui-checkbox-card (cada opción es una tarjeta) · sui-switch (prende algo que se aplica al instante) · sui-radio (opciones excluyentes) |
+| `sui-checkbox-card` | Opción con tarjeta (ícono o foto, título, descripción y la casilla) para elegir VARIAS que se guardan después | sui-checkbox-label (la misma casilla sin tarjeta, en un formulario denso) · sui-switch-card (un ajuste que se aplica al toque, sin «Guardar») · sui-radio-card (se elige solo una) · sui-tag-input (valores que la persona escribe) |
 | `sui-checkbox-label` | Casilla con su texto (y opcionalmente descripción, badge y link) para opciones que se suman | sui-checkbox (la casilla sola, el texto vive en otra parte) · sui-checkbox-card (cada opción es una tarjeta) · sui-switch-label (se aplica al instante) · sui-radio-label (una sola opción) |
 | `sui-circular-progress-bar` | El avance de algo en un anillo, para cuando cabe en un cuadrado al lado de un título | sui-progress-bar-label (barra con título y número, cuando hay ancho) · sui-progress-bar (barra pelada) |
 | `sui-color-dot` | Una opción de color para elegir (o mostrar el color elegido); no es un punto de estado | sui-color-picker (el selector completo, con hex propio) · sui-badge type="with-dot" (punto de estado vivo) · sui-status-badge withDot (punto de estado de un ciclo) |
 | `sui-color-picker` | Botón que abre un panel para elegir un color libre (espectro, matiz, hex) o uno de los recomendados | sui-color-dot (un punto de color, para armar una grilla propia) · sui-select o sui-radio-card (el color es una categoría con nombre, no un color libre) |
 | `sui-compact-avatar-group` | Varias personas en una píldora baja con el «+N» en texto, para tablas y filas apretadas | sui-avatar-group (la pila grande, para cards y cabeceras) · sui-avatar (una sola persona) |
 | `sui-compact-button` | Botón de solo ícono, chico, para cuando falta espacio | sui-button (acción con texto, o de ícono con onlyIcon en tamaños de 28 a 52) · sui-link-button (acción que se lee como texto) · sui-topbar-button (ícono de la barra superior) |
+| `sui-compact-select` | Select chico que se ajusta al ancho de su texto, para filtros sueltos y paginación | sui-select (campo de formulario a todo el ancho, con label) · sui-inline-select (dentro de una frase, sin caja) · sui-compact-select-for-input (dentro de un sui-input) · sui-segmented-control (2 a 4 modos a la vista) |
+| `sui-compact-select-for-input` | Selector chico que vive DENTRO de un sui-input, para elegir moneda o código de país sin salir del campo | sui-select (el valor se elige aparte, con su propio label) · sui-compact-select (filtro suelto con caja propia) · sui-inline-select (dentro de una frase) |
+| `sui-content-card` | Fila «cara + nombre + detalle» dentro de su propia cajita, con badge y una X opcional para quitarla | sui-content-label (la misma fila sin caja, dentro de una card que ya existe) · sui-card (contenido libre) · sui-radio-card / sui-checkbox-card (la fila se elige) |
 | `sui-content-divider` | Línea con algo encima: el «o» entre dos opciones, la cabecera de un grupo o un botón entre bloques | sui-divider (la línea sola, horizontal o vertical) |
+| `sui-content-label` | Fila sin caja con ícono, foto o logo a la izquierda, título, descripción y un badge opcional | sui-content-card (la misma fila dentro de su propia cajita, con X) · sui-switch-label (un ajuste que se prende o apaga) · sui-alert (un aviso con color) · sui-card (para agrupar las filas) |
+| `sui-counter-input` | Cantidad con − y + a los lados, con mínimo y máximo (unidades en el carrito, pasajeros) | sui-input type="number" (un número que se tipea, sin pasos de a uno) · sui-slider (un valor de un rango continuo) · sui-select (elegir una cantidad de una lista corta) |
+| `sui-date-selector` | La cabecera de un calendario con el mes y las flechas de anterior y siguiente | sui-datepicker (el calendario completo, que ya la trae) · sui-tab-chips (elegir entre pocos días: hoy, mañana, sábado) |
+| `sui-datepicker` | Calendario para elegir una fecha o un rango de fechas, en popover o en línea | sui-input type="date" (una fecha suelta en un formulario: abre el selector del sistema) · sui-tab-chips + sui-radio-label (día y franja de un pedido programado) · sui-tab-chips o sui-select (períodos fijos: hoy, 7 días, 30 días) |
+| `sui-day-cell` | Un día del calendario, con sus estados de elegido, rango, hoy, marcado y bloqueado | sui-datepicker (el calendario completo, que ya la trae) · sui-tab-chips (pocos días para elegir, con nombre: hoy, mañana) |
+| `sui-day-label` | La inicial del día de la semana arriba de cada columna del calendario | sui-datepicker (el calendario completo, que ya la trae) · sui-button-group (elegir días de la semana: L M M J V S D) |
 | `sui-divider` | Línea de 1 px que separa bloques (horizontal) o datos en una fila (vertical) | sui-content-divider (línea con texto o botones encima, o el «o» entre dos opciones) |
+| `sui-drawer-footer` | Pie de un panel lateral con dos botones y un extra a la izquierda; hoy sin uso, los botones van en sui-modal-footer | sui-modal-footer (el canon de botones de toda la app) · sui-filter-panel-footer (pie de un panel de filtros) |
+| `sui-drawer-header` | Cabecera de un panel lateral (título, descripción, cerrar); hoy sin contenedor en SUI y sin uso en la app | sui-modal (con title y description: la cabecera de todos los modales de la app) · sui-modal-header (la cabecera suelta del modal) · sui-page-header (título de una página) |
 | `sui-emoji` | Un emoji 3D animado (Fluent) para los momentos con emoción: estados vacíos, celebraciones, onboarding | sui-icon (ícono funcional, monocromo) · sui-empty-state (el estado vacío completo, que ya trae su emoji) |
+| `sui-empty-state` | Pantalla o lista sin nada que mostrar (o que no pudo cargar) con emoji animado, título, explicación y una acción opcional | sui-alert (un aviso dentro de una pantalla que sí tiene contenido) · sui-banner (aviso de toda la app) · skeleton (mientras carga, nunca un empty) |
 | `sui-fancy-button` | Botón con brillo y degradé para el CTA de una landing o campaña | sui-button (toda acción dentro de la app) · sui-app-store-badge (descargar la app desde una landing) |
 | `sui-file-icon` | El ícono de un archivo con su extensión (PDF, XLSX, JPG…) en el color de su tipo | sui-file-upload-card (el archivo que se está subiendo, con progreso) · sui-icon (un ícono genérico de documento) |
+| `sui-file-upload` | Área para arrastrar o elegir archivos que no son una foto (PDF, Excel, CSV) | sui-image-upload (una sola imagen con vista previa: logo, portada, comprobante) · sui-image-upload-profile (foto de perfil con botones Subir/Cambiar/Eliminar) · sui-file-upload-card (el archivo ya elegido, con su progreso) |
+| `sui-file-upload-card` | La fila de un archivo que se está subiendo, con su progreso, listo o error para reintentar | sui-file-upload (el área para elegir el archivo) · sui-image-upload (una imagen: muestra la vista previa en vez de la fila) · sui-file-icon (un archivo en una lista, sin subida) |
 | `sui-flag` | La bandera circular de un país | sui-emoji (un emoji con emoción) · sui-icon (un ícono funcional) |
 | `sui-form-hint` | Una línea de ayuda o de error debajo de un campo o de un grupo de controles | el hint propio de sui-input / sui-select / sui-textarea (campo de texto) · sui-alert (un aviso de la pantalla o algo que salió bien) · sui-tooltip (ayuda escondida tras un toque) · sui-form-label (el rótulo de arriba) |
 | `sui-form-label` | Rótulo de un campo o de un grupo de controles que no traen el suyo (asterisco, opcional, ayuda y link) | el label propio de sui-input / sui-select / sui-textarea (campo de texto) · sui-checkbox-label / sui-radio-label / sui-switch-label (un control con su texto) · sui-page-header o sui-content-label (título de sección) · sui-form-hint (la ayuda debajo) |
 | `sui-icon` | Un ícono monocromo de RemixIcon (o uno propio del DS) que toma el color del texto | 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-image-upload` | Subir una imagen y ver su vista previa en el mismo lugar (logo, portada, foto de producto, comprobante) | sui-image-upload-profile (foto de perfil con botones Subir/Cambiar/Eliminar al lado) · sui-file-upload (documentos que no son foto: PDF, Excel) · app-image-cropper (el recortador de la app, que se abre desde el lápiz) |
+| `sui-image-upload-profile` | Foto de perfil o logo en círculo con los botones Subir, o Eliminar y Cambiar, al lado | sui-image-upload (la imagen grande con su vista previa y el lápiz que abre el recortador; es lo que usa hoy la app) · sui-avatar (solo mostrar la foto) |
+| `sui-inline-input` | Texto que se edita en su lugar: en reposo muestra el dato y un lápiz; al tocarlo, campo con ✓ y ✕ | sui-input (campo de formulario, siempre editable) · sui-modal con sui-input (editar con más contexto o varios datos a la vez) |
+| `sui-inline-select` | Selector sin caja que vive dentro de una frase o al final de un campo («Mostrar en USD ▾») | sui-compact-select (filtro suelto con caja propia) · sui-compact-select-for-input (al inicio de un sui-input, con divisor) · sui-select (campo de formulario) |
+| `sui-input` | Campo de una sola línea para escribir un dato (nombre, teléfono, monto, búsqueda) | sui-textarea (texto de varias líneas) · sui-select (elegir de una lista) · sui-counter-input (una cantidad con − y +) · sui-tag-input (varios valores cortos) · sui-otp-input (código de verificación) · sui-inline-input (editar un dato en su lugar, con lápiz) |
+| `sui-integration-switch` | Integración con otro servicio — logo, nombre, qué hace, botón «Administrar» y el interruptor para prenderla | sui-switch-card (un ajuste propio de la app, sin logo ni «Administrar») · sui-switch-label (un ajuste en una lista) · sui-content-card type="brand" (mostrar que un servicio está conectado, sin prender ni apagar) |
 | `sui-kbd` | Una tecla dibujada para mostrar un atajo de teclado (⌘K, Esc, ↑ ↓) | sui-badge (una etiqueta corta que no es una tecla) · sui-tag (un chip) |
 | `sui-key-icon` | Un ícono dentro de un círculo, con fondo de color si el ícono dice un estado | 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-link-button` | Acción que se lee como texto, sin caja | 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-logo` | El logo de Master Pedidos (la M y la palabra), dibujado en SVG y coloreable | sui-brand-logo (logos de OTRAS marcas: WhatsApp, Google, Apple…) · sui-avatar (el logo de un local, que es una foto) |
+| `sui-notification` | Fila de la bandeja de notificaciones, con quién, qué pasó, hace cuánto y si ya se leyó | sui-toast (aviso efímero, incluido el «notification» de esquina de la guía) · sui-alert (aviso que se queda en su contexto) · sui-banner (toda la app) |
+| `sui-notification-footer` | Pie del panel desplegable de notificaciones (web): ayuda de teclado a la izquierda y un link a los ajustes a la derecha | sui-link-button (un link suelto a los ajustes) · sui-drawer-footer (pie de un panel lateral) · sui-modal-footer (pie con botones) |
+| `sui-notification-tab-menu` | Cabecera con pestañas del panel desplegable de notificaciones (web), con conteo de no leídas y botón de filtro | sui-tab-chips (pestañas de la bandeja a pantalla completa, en mobile) · sui-tab-menu-horizontal (pestañas de una pantalla) · sui-segmented-control (cambiar de vista con 2–4 opciones) |
+| `sui-otp-input` | Código de verificación dígito por dígito, una celda por número (SMS, código de entrega) | sui-input (un código largo o que se pega entero) · sui-input type="password-toggle" (una clave que no se ve) |
+| `sui-pagination` | Números de página para recorrer una tabla larga en web cuando todos los datos ya están cargados | scroll infinito (directiva appInfiniteScroll de la app, para listas de Firestore) · sui-stepper (pasos de un flujo) · sui-tab-chips (filtrar en vez de paginar) |
+| `sui-password-strength` | Barra de 3 niveles y lista de condiciones que acompaña al campo de una contraseña nueva | sui-input con hint (una sola regla, como «Mínimo 6 caracteres») |
 | `sui-payment-icon` | El círculo de color de un pago de servicio (agua, gas, luz, internet, alquiler…) | sui-key-icon (cualquier otro ícono en círculo) · sui-brand-logo (el logo de un medio de pago con marca) |
+| `sui-period-range` | Un período predefinido (Hoy, Últimos 7 días) en la columna de presets del calendario de rango | sui-datepicker mode="range" (ya los trae) · sui-tab-chips (períodos fijos a la vista: super admin, ganancias del repartidor) · sui-select (períodos fijos en poco espacio: resumen del local) |
+| `sui-popover` | Panel con flecha que señala un elemento de la pantalla y explica algo nuevo, con una o dos acciones; sirve para recorridos de bienvenida | sui-tooltip (ayuda corta al pasar el mouse, sin acciones) · sui-alert (aviso dentro del contenido) · sui-modal (algo que pide decidir antes de seguir) |
+| `sui-product-card` | Tarjeta de un producto de la carta con foto, nombre, descripción, precio y el botón para agregar (o editar) | sui-store-card (un local, no un producto) · sui-card (cualquier otro contenido) · sui-content-card (un producto en una fila, sin foto grande) |
 | `sui-progress-bar` | Barra que muestra cuánto falta para completar algo, pintada con el estado de lo que mide | sui-progress-bar-label (la misma barra con título, número y descripción) · sui-circular-progress-bar (el avance en un círculo, junto a un título) · un gráfico (repartir un total entre partes) |
 | `sui-progress-bar-label` | La barra de progreso con lo que mide, cuánto va y, si hace falta, qué hacer | sui-progress-bar (la barra pelada, cuando otra cosa ya la rotula) · sui-circular-progress-bar (el avance en un círculo, junto a un título) |
 | `sui-radio` | El círculo solo para elegir una opción de una lista corta, sin texto propio | sui-radio-label (círculo con su texto, lista densa) · sui-radio-card (opción con peso o que se toca en el teléfono) · sui-select (más de 6 opciones) · sui-segmented-control (2-4 modos que se aplican al instante) · sui-checkbox (varias a la vez) |
+| `sui-radio-card` | Opción con tarjeta (ícono o foto, título, descripción y el radio) para elegir UNA de una lista corta | sui-radio-label (la misma elección sin tarjeta, en un formulario denso) · sui-select (lista larga o que no entra en pantalla) · sui-segmented-control (2–4 vistas de la misma pantalla) · sui-checkbox-card (se pueden elegir varias) · sui-switch-card (se prende o se apaga un ajuste) |
 | `sui-radio-label` | Círculo con su texto (y opcionalmente descripción, badge y link) para elegir una opción de una lista corta | sui-radio (el círculo solo) · sui-radio-card (cada opción es una tarjeta) · sui-select (más de 6 opciones) · sui-checkbox-label (varias a la vez) |
 | `sui-rating` | Muestra una nota con estrellas o la pide (estrellas, emojis, corazones o números) | sui-icon (una estrella o un corazón sueltos, sin nota) · sui-badge (la nota escrita como dato corto) |
+| `sui-rich-editor` | Barra de formato (negrita, cursiva, alineación, enlace) con un área de texto editable opcional | sui-textarea (todo texto libre de la app hoy, sin formato) |
 | `sui-segmented-control` | Píldora de 2 a 4 opciones hermanas donde se elige una y se aplica en el momento | sui-tab-menu-horizontal (navegar entre secciones de contenido) · sui-tab-chips (fila de filtros con muchas opciones) · sui-radio-card (elegir una opción de un formulario que se guarda después) · sui-button-group (varias opciones a la vez) |
+| `sui-select` | Campo que despliega una lista para elegir UNA opción (distrito, repartidor, categoría, motivo) | sui-radio-label / sui-radio-card (2 a 6 opciones fijas a la vista) · sui-segmented-control (2 a 4 modos que se aplican al instante) · sui-compact-select (filtro chico que se ajusta al texto) · sui-compact-select-for-input (elegir moneda o país dentro de un campo) · sui-tag-input (varios valores) |
 | `sui-slider` | Barra para elegir un valor, o un rango, dentro de una escala donde importa ver la posición | sui-counter-input (cantidad chica y exacta con − y +) · sui-input type="number" (valor exacto o rango abierto) · sui-progress-bar (avance de solo lectura) |
 | `sui-social-button` | Botón para iniciar sesión o registrarse con una cuenta de Google o Apple | sui-button (cualquier otra acción, aunque mencione una marca) · sui-app-store-badge (descargar la app de una tienda) |
 | `sui-status-badge` | El resultado de un ciclo (completado, pendiente, fallido, deshabilitado) con su color y su ícono ya resueltos | sui-badge (estado con muchos valores, categoría o distinción) · sui-tag (chip neutro que se puede quitar) · sui-alert (mensaje que hay que leer) |
+| `sui-stepper` | Indica en qué paso de un flujo con orden está la persona, cuánto hizo y cuánto le falta | sui-progress-bar (importa el porcentaje, no los pasos) · sui-pagination (páginas de una lista) · sui-tab-menu-horizontal (secciones sin orden) |
+| `sui-store-card` | Tarjeta de un local para los listados del cliente con portada, logo, abierto/cerrado, favorito, nota, ubicación, envío y distancia | sui-product-card (un producto, no un local) · sui-content-card (un local en una fila de un panel, sin portada) · sui-card (cualquier otro contenido) |
 | `sui-switch` | Interruptor solo para prender o apagar algo que se aplica al instante, sin texto propio | sui-switch-label (interruptor con su texto, el caso normal) · sui-switch-card (cada ajuste es una tarjeta) · sui-integration-switch (fila de integración con logo) · sui-checkbox (valor que se confirma después con un botón) |
+| `sui-switch-card` | Ajuste con tarjeta (ícono, título, descripción y el interruptor) que se aplica al instante | sui-switch-label (el mismo ajuste sin tarjeta, en una lista de ajustes) · sui-integration-switch (una integración con logo y «Administrar») · sui-checkbox-card (varias opciones que se guardan con «Guardar») |
 | `sui-switch-label` | Interruptor con su texto (y opcionalmente descripción, badge y link) para un ajuste que se aplica al instante | sui-switch (el interruptor solo, el texto vive en otra parte) · sui-switch-card (cada ajuste es una tarjeta) · sui-integration-switch (fila de integración con logo) · sui-checkbox-label (se confirma después) |
+| `sui-tab-chips` | Fila de chips que se desliza en horizontal para filtrar una lista o saltar entre categorías; siempre hay uno elegido | sui-segmented-control (2 a 4 modos de la misma vista) · sui-tab-menu-horizontal (secciones de contenido distinto) · sui-radio-card (elegir un valor de un formulario) · sui-tag (chip que se quita) |
+| `sui-tab-menu-horizontal` | Pestañas subrayadas para cambiar entre secciones de contenido distinto dentro de una pantalla | sui-tab-chips (filtros o categorías que se deslizan) · sui-segmented-control (2 a 4 modos de la misma vista) · sui-tab-menu-vertical (menú lateral de ajustes en web) |
+| `sui-tab-menu-vertical` | Menú apilado para cambiar entre secciones de una página de ajustes en web | sui-tab-menu-horizontal (pocas secciones arriba del contenido) · sui-sidebar (navegación de toda la app) · sui-tab-chips (filtros o categorías) |
 | `sui-tag` | Chip neutro que nombra algo elegido o aplicado y que la persona puede quitar | sui-badge (etiqueta de solo lectura, con color y significado) · sui-status-badge (resultado de un ciclo) · sui-tab-chips / sui-filter (chips para elegir) · sui-tag-input (campo que junta tags) |
+| `sui-tag-input` | Campo donde se escriben varios valores cortos que se van sumando como chips (palabras clave) | sui-input (un solo valor) · sui-select (una opción de una lista) · sui-checkbox-label (varias opciones fijas) |
+| `sui-textarea` | Campo de varias líneas para un texto libre (motivo, nota al repartidor, descripción) | sui-input (un dato de una línea) · sui-rich-editor (texto con formato, hoy sin uso) · sui-select (motivos que se pueden elegir de una lista) |
+| `sui-time-picker` | Campo para elegir una hora del día, con columnas de hora, minuto y AM/PM | sui-tab-chips + sui-radio-label (día y franja de entrega de un pedido programado) · sui-select (pocas horas fijas) · sui-input type="time" (hora libre con el selector del sistema) |
+| `sui-toast` | Aviso efímero que confirma el resultado de una acción y se va solo; se dispara con SuiToastService | sui-alert (aviso que se queda, en su contexto) · sui-banner (toda la app) · sui-notification (fila de la bandeja, con hora) · sui-form-hint (error de un campo) |
+| `sui-tooltip` | Directiva que muestra una ayuda corta al pasar el mouse o al enfocar un elemento; solo web, no sirve con el dedo | sui-form-hint (ayuda visible bajo un campo) · sui-modal-sheet (explicación que se abre al tocar, en mobile) · sui-popover (panel que señala algo y pide una acción) |
 
 ## Sin documentar
 
@@ -63,73 +113,23 @@ Existen en el paquete pero todavía no tienen doc; antes de usarlos, leer su `.d
 - `sui-accordion`
 - `sui-activity-feed`
 - `sui-activity-filter`
-- `sui-banner`
-- `sui-breadcrumb-item`
-- `sui-breadcrumbs`
-- `sui-card`
-- `sui-chart-legend`
-- `sui-chart-legend-dot`
-- `sui-checkbox-card`
 - `sui-command-menu-footer`
 - `sui-command-menu-item`
 - `sui-command-menu-search`
-- `sui-compact-select`
-- `sui-compact-select-for-input`
-- `sui-content-card`
-- `sui-content-label`
-- `sui-counter-input`
-- `sui-date-selector`
-- `sui-datepicker`
-- `sui-day-cell`
-- `sui-day-label`
-- `sui-drawer-footer`
-- `sui-drawer-header`
 - `sui-dropdown-caption`
 - `sui-dropdown-item`
 - `sui-dropdown-menu`
 - `sui-dropdown-search`
-- `sui-empty-state`
-- `sui-file-upload`
-- `sui-file-upload-card`
 - `sui-filter`
 - `sui-href`
-- `sui-image-upload`
-- `sui-image-upload-profile`
 - `sui-img-retry`
-- `sui-inline-input`
-- `sui-inline-select`
-- `sui-input`
-- `sui-integration-switch`
 - `sui-modal`
 - `sui-modal-footer`
 - `sui-modal-header`
 - `sui-modal-sheet`
-- `sui-notification`
-- `sui-notification-footer`
-- `sui-notification-tab-menu`
-- `sui-otp-input`
 - `sui-page-header`
-- `sui-pagination`
-- `sui-password-strength`
-- `sui-period-range`
-- `sui-popover`
-- `sui-product-card`
-- `sui-radio-card`
-- `sui-rich-editor`
-- `sui-select`
 - `sui-sidebar`
-- `sui-stepper`
-- `sui-store-card`
-- `sui-switch-card`
-- `sui-tab-chips`
-- `sui-tab-menu-horizontal`
-- `sui-tab-menu-vertical`
 - `sui-table`
-- `sui-tag-input`
-- `sui-textarea`
-- `sui-time-picker`
-- `sui-toast`
-- `sui-tooltip`
 - `sui-topbar`
 - `sui-topbar-button`
 - `sui-topbar-item`

package/docs/sui-alert/README.md

@@ -136,6 +136,19 @@ cliente**, que no es una novedad: `pages/envios/envios.html:725`,
   y `:198` (`accionActivar`, `accionReintentar`, usadas en `notifications.html:17` y `:23`).
 - Más de dos acciones: 0.
 
+## Tamaño en mobile y en web
+
+El alert no tiene un tamaño «de mobile»: el tamaño lo decide el contenido (guía del DS).
+Con descripción va `large` en las dos plataformas; de una línea, `small`. Lo que cambia
+en mobile es el ancho: ocupa toda la columna.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| aviso con descripción | `large` | `large` | guía del DS |
+| aviso de una línea en la página | `small` | `small` | guía del DS |
+| dentro de un campo o una card | `xsmall` | `xsmall` | guía del DS |
+
+
 ## API
 
 <!-- api:inicio -->

package/docs/sui-badge/README.md

@@ -153,6 +153,23 @@ dos valores (`pages/invoices/invoices.html:50` pagado/reembolsado,
 `pages/super-admin/master-gastos/master-gastos.html:67` confirmado/pendiente) son candidatos; los de
 pedidos con muchos estados (`pages/orders/orders.html:113`) se quedan como badge.
 
+## Tamaño en mobile y en web
+
+En mobile el badge se lee de más lejos y al lado de textos de 16 px; en web va más chico.
+`large` (24) y `xlarge` (28) son extensión SUI del 03-10-2026.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| estado en una lista o card | `large` (24) | `small` (16, mayúsculas) | canon (aprobado por el dueño, 03-10-2026) |
+| junto a un título o un monto | `xlarge` (28) | `medium` (20) | propuesta, falta aprobación |
+| conteo (`type="number"`) | `large` (24) | `small` (16) | propuesta, falta aprobación |
+
+Patrón (la app ya lo usa en 27 lugares; `bp` = `BreakpointsService`, mobile hasta 767 px):
+
+```html
+<sui-badge [size]="bp.isMobile() ? 'large' : 'small'" …/>
+```
+
 ## API
 
 <!-- api:inicio -->

package/docs/sui-banner/README.md

@@ -0,0 +1,190 @@
+---
+name: sui-banner
+selector: sui-banner
+resumen: Barra de aviso a todo el ancho, arriba de la pantalla, para algo que afecta a toda la app
+alternativas: [sui-alert (aviso ligado a una sección o una card), sui-toast (resultado efímero de una acción), sui-notification (fila de la bandeja), sui-modal (algo que bloquea todo, como quedarse sin conexión)]
+---
+
+# sui-banner
+
+Story: [Molecules/Feedback/Banner](https://sui-design-system.web.app/?path=/docs/molecules-feedback-banner--docs)
+
+## Cuándo usarlo / cuándo no
+
+**Úsalo** cuando el aviso es de **toda la app o de toda la pantalla**, no de una parte: el plan
+del local venció, estás administrando un local como super admin, hay una versión nueva, la app
+está en modo de prueba. Va pegado arriba, a todo el ancho, y se queda mientras dure la situación.
+
+**No lo uses** para:
+
+- Un aviso de una sección, una card o un paso del flujo («Cobras S/ 12.00 al local al recoger»):
+  eso es `sui-alert`, aunque sea importante. El banner no tiene tamaños ni descripción larga: no
+  está hecho para vivir en medio del contenido.
+- Confirmar que algo salió bien: `sui-toast`.
+- Algo que impide usar la app (sin conexión, cuenta suspendida): un `sui-modal` o una pantalla
+  propia. La app ya lo hace así con «Sin conexión».
+
+Regla corta (canon, la misma del alert): **contexto → alert · toda la app → banner · efímero →
+toast · bandeja → notification.**
+
+## Qué variante usar
+
+> La guía del DS dice **para qué** es el banner, pero no cuándo va cada relleno ni cada tipo. Lo
+> marcado «según la guía del DS» sale de su texto o de sus ejemplos publicados; lo marcado
+> «canon» ya lo aprobó el dueño en el README de `sui-alert`; el resto es **propuesta** y falta su ok.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app`, sin contar prototipos ni vitrinas
+> (`master-preview`, `master-prototipos`, `mockup-*`, `dx/*`, `_guia-*`, `master-rutina`,
+> `master-medico`, `master-ejercicios`, `dev-index`): **2 banners** en 2 archivos, más **1 barra
+> hecha a mano** que debería ser banner.
+
+### Lo que sí dice la guía del DS
+
+- **Para qué es**: avisos cruciales, **arriba de la pantalla** y a la vista. Coincide con «toda la
+  app → banner».
+- **Una sola línea**: título, punto medio, descripción y **un link** como acción. El link es un
+  `sui-link-button` `modifiable`, `medium` y **subrayado**: toma el color del banner.
+- **Botón de cerrar** en todos sus ejemplos.
+- **Defaults**: la guía arranca en relleno `filled` y tipo `feature`; SUI arranca en `stroke` e
+  `info`. Es un default, no una recomendación de uso.
+
+### `variant` — qué tipo de aviso es
+
+Los mismos cinco tipos que `sui-alert`, con el mismo significado.
+
+| variant | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `info` (default) | Un dato de toda la app que conviene saber y no pide nada: hay una versión nueva, estás viendo datos de prueba. | (sin uso hoy) | propuesta (sigue la regla canon del alert) |
+| `success` | Un estado bueno que dura y afecta a todo: «Tu local ya está publicado». Si es la confirmación de un clic, es toast. | (sin uso hoy) | propuesta (sigue la regla canon del alert) |
+| `warning` | Hay que hacer algo pronto o lo que hagas tiene consecuencia para toda la cuenta: el plan vence, estás administrando un local que no es tuyo. | `components/subscription-banner/subscription-banner.html:5` («Tu plan vence en 3 días») · candidato: `components/impersonation-banner/impersonation-banner.ts:17` | propuesta (sigue la regla canon del alert) |
+| `error` | Algo ya pasó y afecta a toda la cuenta. | `components/subscription-banner/subscription-banner.html:5` («Tu plan venció») | propuesta (sigue la regla canon del alert) |
+| `feature` | Novedad que alcanza a toda la app. **Aquí es gris**, no morado como en el alert. | (sin uso hoy) | canon (decisión documentada en el `.ts`, recogida en el README del alert) |
+
+### `variantStyle` — el peso visual
+
+Misma pregunta que en el alert: **¿este aviso tiene que ganarle a todo lo demás de la pantalla?**
+
+| variantStyle | cuándo | ejemplo real de la app | fuente |
+|---|---|---|---|
+| `lighter` | El aviso **acompaña**: hay que tenerlo presente, pero se puede seguir trabajando. Es el caso normal. | `subscription-banner.html:7` en el caso «vence en N días» (hoy en `light`) | propuesta |
+| `filled` (default de la guía) | Hay que **actuar ya**, o la app está en un **modo que cambia lo que haces**: el plan venció, estás administrando otro local. Uno a la vez. | `subscription-banner.html:7` («Tu plan venció») | propuesta |
+| `light` | No usar hoy, como en el alert. **Cuándo sí:** un banner dentro de una zona ya teñida, donde `lighter` se pierde. | — | propuesta |
+| `stroke` (default SUI) | No usar hoy: un banner blanco con borde se confunde con la barra superior. **Cuándo sí:** arriba de una pantalla a sangre (un mapa o una foto), donde la banda blanca sí se distingue. | — | propuesta |
+
+### `dismissible`, `showIcon`, acción y título
+
+| prop | valor | cuándo | fuente |
+|---|---|---|---|
+| `dismissible` | `true` | Solo si el aviso se puede ignorar sin problema (versión nueva, novedad). La guía lo muestra en todos sus ejemplos. | según la guía del DS (que exista) · propuesta (cuándo) |
+| `dismissible` | `false` (default) | Todo `filled` y todo aviso que tiene que seguir ahí: plan vencido, administrando otro local. Cerrarlo no arregla nada. | propuesta |
+| `showIcon` | `true` (default) | Siempre: el ícono es la mitad del significado del tipo. | propuesta |
+| `showIcon` | `false` | No usar hoy. **Cuándo sí:** cuando se proyecta un avatar o logo en `slot="icon"` (ver abajo), que ya ocupa ese lugar. | propuesta |
+| `slot="icon"` | avatar o logo | Reemplaza al ícono del tipo: el logo del local que estás administrando. | propuesta |
+| `slot="action"` | **un** `sui-link-button` `variant="modifiable"` con `[underline]="true"` | La única acción del banner: «Renovar plan», «Salir», «Actualizar». Nunca un `sui-button`, nunca dos. | según la guía del DS |
+| `title` | frase corta | Lo que pasa, en sentence case y sin punto final. | canon (copy de la app) |
+| `description` | complemento | Qué hacer o hasta cuándo. Una línea en web; en mobile se envuelve. | según la guía del DS (una línea) |
+
+### Usos de hoy que rompen la regla
+
+- **Rompe el canon — 1 banner en contexto → `sui-alert`:**
+  `pages/driver/driver-order-detail/driver-order-detail.html:391` («Cobras S/ … al local al
+  recoger»). Es el aviso de **un pedido**, dentro de su detalle: va `sui-alert` (`error` `filled`
+  si cobra en el mostrador, `info` `lighter` si cobra en la puerta).
+- **Barra hecha a mano que es un banner — 1:** `components/impersonation-banner/impersonation-banner.ts:17`
+  («Estás administrando … como super admin» + botón «Salir»), con `#fff` y `rgb()` sueltos. Pasaría a
+  `<sui-banner variant="warning" variantStyle="filled">` con un link «Salir».
+- **Romperían la propuesta — 1 `light` → `lighter`:** `components/subscription-banner/subscription-banner.html:7`
+  (el caso «vence en N días»).
+- No confundir: `components/upgrade-banner/` (6 pantallas) se llama «banner» pero es un aviso dentro
+  de una sección; su destino es `sui-alert`, ya anotado en `docs/CANON-SUI.md`.
+
+## Tamaño en mobile y en web
+
+El banner **no tiene `size`**: mide 44 px de alto en web, centrado; en mobile (≤ 767 px) pasa a
+`min-height: 44px`, se alinea a la izquierda y el texto se envuelve en varias líneas.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| la barra | 44 px mínimo, crece si el texto envuelve | 44 px fijos, una línea | según el componente |
+| el link de acción | `large` (24 px) cuando se publique (hoy `medium`, 20 px) | `medium` (20 px) | propuesta |
+| la X de cerrar | se ve de 24 px; **se toca en 40 × 40** | igual | canon (aprobado por el dueño, 03-10-2026): área táctil invisible, extensión SUI |
+
+```html
+<sui-banner variant="warning" variantStyle="lighter" title="Tu plan vence en 3 días"
+  description="Renueva para seguir recibiendo pedidos">
+  <sui-link-button slot="action" variant="modifiable" [underline]="true"
+    [size]="bp.isMobile() ? 'large' : 'medium'" (clicked)="renovar()">Renovar plan</sui-link-button>
+</sui-banner>
+```
+
+`size="large"` del link-button está en el repo del DS y todavía no en el paquete publicado 0.19.0:
+hasta entonces va `medium` en las dos.
+
+## «No usar»: por qué no hoy y cuándo sí
+
+Nada se borra del DS. Lo marcado «no usar» no tiene caso en la app de hoy; si un flujo nuevo cae
+en la columna de la derecha, se usa.
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| `light` | queda a medio camino entre `lighter` y `filled` | un banner dentro de una zona ya teñida |
+| `stroke` | blanco con borde: se confunde con la barra superior | arriba de un mapa o una foto a sangre |
+| `success` | no hay estados buenos que afecten a toda la app | «Tu local ya está publicado» el día que sale al aire |
+| `feature` | no hay novedades anunciadas arriba | anunciar una función nueva a todos los locales, con X para cerrarlo |
+| `showIcon=false` | sin el ícono se pierde el tipo | con un avatar o logo en `slot="icon"` |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `variant` | `'info' \| 'success' \| 'warning' \| 'error' \| 'feature'` | `'info'` |
+| `variantStyle` | `'filled' \| 'light' \| 'lighter' \| 'stroke'` | `'stroke'` |
+| `title` | `string \| null` | `null` |
+| `description` | `string \| null` | `null` |
+| `showIcon` | `boolean` | `true` |
+| `dismissible` | `boolean` | `false` |
+
+| output | payload |
+|---|---|
+| `closed` | `void` |
+<!-- api:fin -->
+
+Signal pública: `dismissed` (`signal(false)`). Slots: `[slot=icon]` (reemplaza el ícono del tipo)
+y `[slot=action]` (el link).
+
+## Trampas
+
+- **Defaults distintos al alert:** el banner arranca en `stroke` (blanco con borde), el alert en
+  `lighter`. Pásale siempre `variantStyle`.
+- **`feature` es gris** aquí (estado «faded» de la paleta) y morado en `sui-alert`.
+- No tiene `size` ni `actions[]`: la acción va **proyectada** en `slot="action"`, a diferencia del
+  alert. Los slots usan `slot=`, no `data-slot=`.
+- En web la altura es **fija** (44 px): un título más una descripción largos se cortan. En mobile sí
+  envuelve.
+- **La X se toca en 40 × 40** aunque se vea de 24 (un `::before` invisible sobre su `<button>`,
+  desde 03-10-2026). En mobile esa área se mete 4 px en el espacio del texto o del link de acción
+  (el padding derecho es 40 y la X ocupa de 4 a 44 px desde el borde): un toque justo en la última
+  letra del link puede caer en la X.
+- Al tocar la X se oculta solo (`dismissed`) y emite `closed`; no recuerda nada: si tiene que
+  quedarse cerrado entre sesiones, lo guarda el padre.
+- El host lleva `role="region"` con `aria-label` = `title`, y borra el `title` nativo.
+- En mobile, una pantalla con modal a pantalla completa tapa el banner: el de la suscripción se
+  esconde con `uiOverlay.fullscreenOpen()` para no quedar encima.
+
+## Ejemplo
+
+```html
+<!-- Aviso que acompaña -->
+<sui-banner variant="warning" variantStyle="lighter"
+  title="Tu plan vence en 3 días" description="Renueva para seguir recibiendo pedidos">
+  <sui-link-button slot="action" variant="modifiable" [underline]="true" (clicked)="renovar()">Renovar plan</sui-link-button>
+</sui-banner>
+
+<!-- Modo que cambia lo que haces: filled, sin X -->
+<sui-banner variant="warning" variantStyle="filled" title="Estás administrando Pollería El Dorado como super admin">
+  <sui-link-button slot="action" variant="modifiable" [underline]="true" (clicked)="salir()">Salir</sui-link-button>
+</sui-banner>
+```

package/docs/sui-breadcrumb-item/README.md

@@ -0,0 +1,96 @@
+---
+name: sui-breadcrumb-item
+selector: sui-breadcrumb-item
+resumen: Una miga suelta de la ruta; casi siempre la dibuja sui-breadcrumbs por ti
+alternativas: [sui-breadcrumbs (la ruta completa con separadores), sui-link-button (un enlace de texto suelto)]
+---
+
+# sui-breadcrumb-item
+
+Story: [Molecules/Breadcrumbs/Breadcrumb Item](https://sui-design-system.web.app/?path=/docs/molecules-breadcrumbs-breadcrumb-item--docs)
+
+## Cuándo usarlo / cuándo no
+
+**No lo uses directo.** `sui-breadcrumbs` lo dibuja por cada entrada de `items`, pone los
+separadores y decide cuál es el activo. Las reglas de cuándo mostrar una ruta están en el README de
+`sui-breadcrumbs`.
+
+**Úsalo suelto** solo si armas una ruta que `sui-breadcrumbs` no cubre: una miga con un menú
+desplegable al lado o un separador propio. Hoy no hay ningún caso.
+
+**Tampoco** para un enlace de texto que no es parte de una ruta («Ver todas»): `sui-link-button`.
+
+## Qué variante usar
+
+> **Lo que dice la guía del DS**: el ítem de la ruta tiene un estado `active` (la página actual),
+> puede llevar **ícono** y puede ser **un enlace**. No trae do/don't.
+>
+> Uso medido el 03-10-2026 en `master-pedidos/src/app` (misma exclusión que `sui-badge`): **0 usos**
+> directos (y 0 de `sui-breadcrumbs`).
+
+| input | valor | cuándo | fuente |
+|---|---|---|---|
+| `label` | texto | El nombre del nivel. | según la guía del DS |
+| `icon` | nombre RemixIcon | Solo el primer nivel (inicio), y con `ariaLabel` si va sin texto. | según la guía del DS (el ícono existe); el cuándo es propuesta |
+| `href` | ruta | Con ruta: dibuja un `<a>`; una ruta interna (`/…`) navega con el router sin recargar. | según la guía del DS (como enlace) |
+| `href` | vacío | Dibuja un `<button>` y avisa por `(clicked)`. | según el código |
+| `active` | `true` | La página actual: no es clicable, va en negro y lleva `aria-current="page"`. | según la guía del DS |
+| `ariaLabel` | texto | Obligatorio cuando va solo el ícono. | propuesta, falta aprobación |
+
+Usos de hoy que rompen las reglas: **0** (no se usa).
+
+## Tamaño en mobile y en web
+
+Alto fijo de **20 px**, sin `size`. **No tiene tamaño para mobile**, igual que `sui-breadcrumbs`:
+no se usa en mobile.
+
+| uso | mobile | web | fuente |
+|---|---|---|---|
+| miga | no se usa | el componente (dentro de `sui-breadcrumbs`) | propuesta, falta aprobación |
+
+```html
+@if (!bp.isMobile()) { <sui-breadcrumbs [items]="ruta()" /> }
+```
+
+## «No usar»: por qué no hoy y cuándo sí
+
+| qué | por qué no hoy | cuándo sí, en un flujo nuevo |
+|---|---|---|
+| suelto, fuera de `sui-breadcrumbs` | `sui-breadcrumbs` cubre todos los casos | una ruta con un selector en una miga (cambiar de local desde la ruta en web) |
+| en mobile | 20 px de alto | nunca |
+
+## API
+
+<!-- api:inicio -->
+<!-- generada: no editar a mano — `npm run docs` -->
+
+| input | tipo | default |
+|---|---|---|
+| `label` | `string` | `''` |
+| `icon` | `string` | `''` |
+| `href` | `string` | `''` |
+| `active` | `boolean` | `false` |
+| `ariaLabel` | `string` | `''` |
+
+| output | payload |
+|---|---|
+| `clicked` | `void` |
+<!-- api:fin -->
+
+## Trampas
+
+- **`clicked` no sale cuando el ítem es `active`.**
+- **Con `href`, el clic navega y además emite `clicked`**: no navegues dos veces.
+- **El nombre de la clase es `SuiBreadcrumbItem`** y el de los datos de `sui-breadcrumbs` es
+  `SuiBreadcrumbEntry`. No son lo mismo.
+- No trae separador: el separador lo pone `sui-breadcrumbs`.
+
+## Ejemplo
+
+```html
+<!-- Lo normal: que lo dibuje sui-breadcrumbs -->
+<sui-breadcrumbs [items]="[{ label: 'Productos', href: '/empresa/productos' }, { label: 'Hamburguesas' }]" />
+
+<!-- Suelto, solo si de verdad hace falta -->
+<sui-breadcrumb-item icon="home-5-line" ariaLabel="Inicio" href="/empresa/inicio" />
+```