Data list

DataList is a semantic dl of label and value pairs, built from four parts. DataList owns layout, DataListItem is the div HTML allows around each pair, DataListLabel renders the dt, and DataListValue renders the dd. There are no value kinds: a value is whatever you compose inside DataListValue, such as a Badge, a Link, a Time or text. Layout lives on the list: orientation (DataListOrientation), separator, density (DataListDensity), labelWidth (DataListLabelWidth) and mono. Each value adds overflow (DataListOverflow), copyValue with copyLabels and onCopy, loading, and error. emptyLabel names an empty value for assistive technology, and emptyContent replaces the placeholder dash. Import the parts and enums from @prepared911/ui/data-list. Labels share one column, sized to the widest label. Labels sit above their values, which suits narrow panels. labelWidth is ignored. Each label sits beside its value and the pairs flow in a row, wrapping when the row is full. separator paints a rule between pairs. density changes the gaps between rows and columns, never the type size. labelWidth sets the shared label column to a quarter, a third or half of the list. A link is a value like any other: compose Link inside DataListValue. copyValue adds a copy button after the value. It can differ from what the value shows, such as a masked secret. copyLabels names the idle, copied and failed states and is required with it. onCopy receives the outcome. copyReveal={DataListCopyReveal.Always} keeps the buttons visible; by default they appear on hover and on focus. mono on the list renders every value in a monospace role. Set mono={false} on one value to opt it out. A value wraps by default so every character stays visible. overflow={DataListOverflow.Truncate} keeps one line with an ellipsis and carries the full text as the native title. Prefer wrapping, and truncate only where the full value is available elsewhere. An empty value (null, undefined, false, an empty or blank string) renders the placeholder dash and needs an accessible name. Set emptyLabel on the list or on one value, and emptyContent to replace the dash with short copy. loading with loadingLabel on the list replaces every value with a skeleton line; the labels stay, so nothing moves when the values arrive. Set loading on one value to load only that value. When part of a record fails, set error on the values that did not load. A status dot is decorative, so pair it with visible text. A decorative icon beside text is composed from Icon and Text. Compose Time with an ISO dateTime. Pass format to let it format the instant, or pass your own text as children.