Confirmación discreta.
Patrón canónico de confirmación discreta para todos los consumidores.
Verlo por niveles
Primero el componente, después la variación de marca y finalmente su uso dentro de una página.
Ver y copiar el código de este render
<aside class="ui-sample ui-feedback ui-notice" data-notice="quiet" role="status" aria-live="polite"><div><strong>Cambios guardados</strong><p>Puedes seguir trabajando.</p></div></aside>Variaciones por marca y sitio
Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.
Compañía de Innovación de Santiago
Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.mdCambia en esta marca
- Navegación y contenido propios del servicio
- Acento reservado para acciones y datos
Permanece canónico
- Mark CIS y namebrand de tres líneas
- IBM Plex Sans, foco, espaciado y anatomía
COCHID
Autoridad: core-style/DECISIONES.md M15 y LOGOS-CANONICOS.mdCambia en esta marca
- Cuadrado azul y namebrand de tres líneas
- Azul COCHID en selección, capas y series
Permanece canónico
- Estructura y semántica comunes
- Fuentes, unidades y alternativa tabular
Comparación histórica recuperable
Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.
- Estado actual
- Confirmación discreta no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
- Cambio propuesto
- Publicar en r19 el contrato de Confirmación discreta para Patrón canónico de confirmación discreta para todos los consumidores.
- Qué ocurre si respondes No
- Confirmación discreta queda fuera de r19 y sus ejemplos siguen sólo como evidencia pendiente de reformulación.
Preparando comparación histórica…
Antes / r19
La comparación convierte una regla abstracta en una diferencia visible y verificable.
- Usa HTML semántico, foco visible y estados explícitos.
- Conserva contenido útil a 320 px y sin JavaScript.
EN LÍNEATodo funciona correctamenteSin señal, hora ni servicio asociado
- No agregues sombras, radios ni franjas laterales decorativas.
- No uses color, placeholder o icono como única explicación.
Responsive
La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.
Cobertura
| Dimensión | Contrato |
|---|---|
| Propietario canónico | Sistema de diseño CIS · core/core-style |
| Consumidores | Todos los consumidores |
| Dependencias | HTML nativo, ARIA sólo cuando aporta |
| Estado | candidato |
Evidencia de adopción
Patrón propuesto. 0 implementaciones observadas en 0 repositorios.
La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.
| Dato | Resultado |
|---|---|
| Clasificación | Patrón propuesto |
| Implementaciones | 0 implementaciones observadas |
| Repositorios | Ningún repositorio observado |
| Snapshot | kit/componentes/componentes-observados.json |
Consumidores observados
El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.
Estados
| Estado requerido |
|---|
| información |
| advertencia |
| error |
| éxito |
Accesibilidad
- Conserva nombre accesible, orden de lectura y foco visible.
- Funciona a 320 px, con zoom de 200% y texto largo.
- El color nunca es la única señal de estado o acción.
- El contenido esencial permanece disponible sin JavaScript.
Código HTML
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<aside class="ui-sample ui-feedback ui-notice" data-notice="quiet" role="status" aria-live="polite"><div><strong>Cambios guardados</strong><p>Puedes seguir trabajando.</p></div></aside>Código TAILWIND
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<aside class="ui-sample ui-feedback ui-notice border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-notice="quiet" role="status" aria-live="polite"><div><strong>Cambios guardados</strong><p>Puedes seguir trabajando.</p></div></aside>Código REACT
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
export interface NoticeQuietProps {
title?: string;
description?: string;
className?: string;
}
/** Confirma una acción sin interrumpir ni agregar botones. Se retira por decisión del consumidor. */
export function NoticeQuiet({title='Cambios guardados',description='Puedes seguir trabajando.',className}:NoticeQuietProps){
return <aside className={['ui-feedback ui-notice',className].filter(Boolean).join(' ')} data-notice="quiet" role="status" aria-live="polite">
<div>{title?<strong>{title}</strong>:null}{description?<p>{description}</p>:null}</div>
</aside>;
}