Lista clave-valor.

Patrón canónico de lista clave-valor para cochid, periodismo2, situación y admin.

Verlo por niveles

Primero el componente, después la variación de marca y finalmente su uso dentro de una página.

Nivel 1Componente canónico

Identificador: dataset-ene-184
Licencia: CC BY 4.0
Huella SHA-256: 4e2a…78bd

Nivel 2Compañía de Innovación de Santiago · variación

Conjunto: ene-ocupados-region
Versión: 2026-07 · revisión 2
Archivo: ene/2026-07/ocupados_region.parquet
SHA-256: 9c41e07b5a…d2f8a61e
Licencia: CC BY 4.0 · atribución al INE

Nivel 3Dentro de una página

Sitio · sección

Identificador: dataset-ene-184
Licencia: CC BY 4.0
Huella SHA-256: 4e2a…78bd

Ayuda · legal · estado

Ver y copiar el código de este render

HTML del nivel canónico

<dl class="ui-sample ui-data" data-key-value-list="true"><div><dt>Identificador</dt><dd><code>dataset-ene-184</code></dd></div><div><dt>Licencia</dt><dd>CC BY 4.0</dd></div><div><dt>Huella SHA-256</dt><dd><code>4e2a…78bd</code></dd></div></dl>

Variaciones por marca y sitio

Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.

cochid.cl

COCHID

Autoridad: core-style/DECISIONES.md M15 y LOGOS-CANONICOS.md

Identificador: dataset-ene-184
Licencia: CC BY 4.0
Huella SHA-256: 4e2a…78bd

Cambia 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

innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md

Conjunto: ene-ocupados-region
Versión: 2026-07 · revisión 2
Archivo: ene/2026-07/ocupados_region.parquet
SHA-256: 9c41e07b5a…d2f8a61e
Licencia: CC BY 4.0 · atribución al INE

Cambia 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

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.

Preparando comparación histórica…

Antes / r19

La comparación convierte una regla abstracta en una diferencia visible y verificable.

r19 · correctoContrato canónico renderizado

Identificador: dataset-ene-184
Licencia: CC BY 4.0
Huella SHA-256: 4e2a…78bd

Incluye fuente, período, unidad y alternativa tabular.
Usa escalas comparables y distingue cero de ausencia.

Antes · problema observadoAnti-ejemplo no interactivo

62%CONFIRMADOSin fuente, período ni denominador

No encierres una cifra aislada en una tarjeta decorativa.
No declares estados o tendencias que no provienen de datos reales.

Responsive

La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.

320 pxMóvil y zoom

Identificador: dataset-ene-184
Licencia: CC BY 4.0
Huella SHA-256: 4e2a…78bd

1280 pxEscritorio

Conjunto: ene-ocupados-region
Versión: 2026-07 · revisión 2
Archivo: ene/2026-07/ocupados_region.parquet
SHA-256: 9c41e07b5a…d2f8a61e
Licencia: CC BY 4.0 · atribución al INE

Cobertura

Dimensión	Contrato
Propietario canónico	Sistema de diseño CIS y COCHID · core/core-style
Consumidores	COCHID, Periodismo2, Situación y Admin
Dependencias	cochid-graphs cuando corresponde
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.

Ver implementaciones asociadas a Lista clave-valor

Estados

Estado requerido
con datos
sin datos
cargando
error

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.

Código de referencia

<dl class="ui-sample ui-data" data-key-value-list="true"><div><dt>Identificador</dt><dd><code>dataset-ene-184</code></dd></div><div><dt>Licencia</dt><dd>CC BY 4.0</dd></div><div><dt>Huella SHA-256</dt><dd><code>4e2a…78bd</code></dd></div></dl>

Código TAILWIND

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<dl class="ui-sample ui-data border border-slate-300 bg-white p-4 text-slate-950 grid gap-2" data-key-value-list="true"><div><dt>Identificador</dt><dd><code>dataset-ene-184</code></dd></div><div><dt>Licencia</dt><dd>CC BY 4.0</dd></div><div><dt>Huella SHA-256</dt><dd><code>4e2a…78bd</code></dd></div></dl>

Código REACT

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

export interface KeyValueListItem {
  /** Nombre de la clave (`<dt>`). */
  label: string;
  value: string;
  /** Muestra el valor en `<code>`, para identificadores, huellas o rutas que se copian tal cual. */
  monospace?: boolean;
}

export interface KeyValueListProps {
  items?: KeyValueListItem[];
  className?: string;
}

const ITEMS: KeyValueListItem[] = [
  { label: "Identificador", value: "dataset-ene-184", monospace: true },
  { label: "Licencia", value: "CC BY 4.0" },
  { label: "Huella SHA-256", value: "4e2a…78bd", monospace: true },
];

/**
 * Lista de pares clave y valor para metadatos técnicos (identificador, licencia, huella SHA-256); se usa en fichas de conjuntos de datos, versiones o artefactos.
 *
 * Los valores que se copian tal cual llevan `monospace: true` y se muestran en `<code>`.
 *
 * @example <KeyValueList items={[{ label: "Identificador", value: "dataset-ene-184", monospace: true }, { label: "Licencia", value: "CC BY 4.0" }]} />
 */
export function KeyValueList({ items = ITEMS, className }: KeyValueListProps) {
  if (!items.length) return null;
  return (
    <dl className={["ui-data", className].filter(Boolean).join(" ")} data-key-value-list>
      {items.map((item, i) => (
        <div key={`${item.label}-${i}`}>
          <dt>{item.label}</dt>
          <dd>{item.monospace ? <code>{item.value}</code> : item.value}</dd>
        </div>
      ))}
    </dl>
  );
}