Prepared Docs

DataList from @prepared911/ui-core renders label-value pairs in a consistent column layout using a Radix primitive. The component wires label-to-value association and exposes copy affordances; your job is to keep labels precise, provide fallback text for empty cells, and surface copy confirmations.

What the component handles

Description list semantics. Items render as <dt> / <dd> pairs so assistive tech groups label and value correctly.
Empty-cell fallback. emptyLabel renders placeholder text when a value is missing.
Copy affordance. The built-in copy button exposes a descriptive aria-label and fires an onCopySuccess callback.

What you must provide

Precise labels. Prefer "Incident ID" over "ID"; prefer "Created at" over "Date". Labels announced in isolation must still make sense.
Meaningful empty text. Set emptyLabel to "Not set", "Unknown", or a contextual equivalent so the rotor doesn't announce an empty cell as nothing.
Copy confirmation. Wire onCopySuccess to a Snackbar or to a polite live region so assistive-tech users know the copy succeeded.

Keyboard behavior

Tab / Shift+Tab move between interactive elements inside the list (copy buttons, links).
Enter / Space activate the focused button.

Semantics and roles

<dl> wrapping <dt> (label) and <dd> (value) pairs.
Copy buttons render as native <button> elements with accessible labels.

Known caveats

Long values that truncate. Pair truncated values with title attributes or expose the full value via a copy affordance or tooltip so assistive tech can access the text.
Sensitive data. Use Secret for tokens and masked values; DataList is for readable metadata.

Data list / API and Development

Drawer / Usage

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats

What the component handles

Description list semantics. Items render as <dt> / <dd> pairs so assistive tech groups label and value correctly.
Empty-cell fallback. emptyLabel renders placeholder text when a value is missing.
Copy affordance. The built-in copy button exposes a descriptive aria-label and fires an onCopySuccess callback.

What you must provide

Precise labels. Prefer "Incident ID" over "ID"; prefer "Created at" over "Date". Labels announced in isolation must still make sense.
Meaningful empty text. Set emptyLabel to "Not set", "Unknown", or a contextual equivalent so the rotor doesn't announce an empty cell as nothing.
Copy confirmation. Wire onCopySuccess to a Snackbar or to a polite live region so assistive-tech users know the copy succeeded.

Keyboard behavior

Tab / Shift+Tab move between interactive elements inside the list (copy buttons, links).
Enter / Space activate the focused button.

Semantics and roles

<dl> wrapping <dt> (label) and <dd> (value) pairs.
Copy buttons render as native <button> elements with accessible labels.

Known caveats

Long values that truncate. Pair truncated values with title attributes or expose the full value via a copy affordance or tooltip so assistive tech can access the text.
Sensitive data. Use Secret for tokens and masked values; DataList is for readable metadata.

Data list / API and Development

Drawer / Usage

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats