#Property List

Property List presents compact operational metadata with native description-list semantics. It is suited to revisions, build evidence, runtime facts, and other name-value projections.

npm install @a3s-lab/ui@0.3.0

<dl class="property-list">
  <div>
    <dt>Provider</dt>
    <dd>A3S Code</dd>
  </div>
  <div>
    <dt>Release</dt>
    <dd>v0.8.4</dd>
  </div>
</dl>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import the base, Property List structure, and a style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/property-list.css";
@import "@a3s-lab/ui/styles/a3s.css";

Use one direct <div> for each dt and dd pair.

<dl class="property-list">
  <div>
    <dt>Provider</dt>
    <dd>A3S Code</dd>
  </div>
  <div>
    <dt>Release</dt>
    <dd>v0.8.4</dd>
  </div>
</dl>

#Parameters

#States and variants

Use the default grid for compact evidence. Use data-layout="rows" when values need to scan down one axis. Put identifiers and digests in <code>; keep ordinary labels and values in the interface typeface.

<dl class="property-list" data-layout="rows" data-variant="plain">
  <div>
    <dt>Conversation</dt>
    <dd><code>conv_01JY7K</code></dd>
  </div>
  <div>
    <dt>Execution</dt>
    <dd>Running</dd>
  </div>
</dl>

#Accessibility

Keep the native <dl>, <dt>, and <dd> relationship. Do not replace it with a visual grid of generic elements. Values may wrap; do not truncate authoritative identifiers unless the complete value is available elsewhere.