Components / data
Rows
Plural on purpose. Rows is a container of row parts, the same way options holds option.
Summary
A list of items where nothing is being compared — settings, recent activity, a file list.
| APG pattern | none |
| Built on | native elements |
| Status | stable |
| Since | 0.1.0 |
<Rows items={[
{ title: 'Northlight', icon: <Icon path={ICONS.imageSquare} size="md" />, meta: 'Published', tone: 'positive' },
{ title: 'Motion reel', icon: <Icon path={ICONS.eye} size="md" />, meta: 'Unsaved', tone: 'warning' }
]} />Anatomy
A <ul data-se="list">. The export names the units it holds; the data-se value names the anatomy, which is a <ul>. Those answer two different questions and the anatomy wins on the attribute.
| Part | Element | Required |
|---|---|---|
row | <div> | yes |
Properties
_None. Everything it renders comes from its children._
States
_None. Rest is the only condition it has._
Behavior
None. It is a list.
Accessibility
tone adds a colored dot and tints the meta text — always alongside the word, never instead of it. The dot is decorative; the word carries the meaning.
A list of rows is announced as a list, with a count, because it is a real <ul>.
Keyboard
None of its own. It is not focusable and takes no keys.
Roles, states and properties
_None written. The elements carry their own._
Focus
Takes no focus. A list whose rows are focusable is a Listbox or a Menu.
Screen reader
Not recorded as verified. Stage 4 of the readiness ladder — driving each component with VoiceOver and NVDA — is unstarted across the package, and no component should claim otherwise until docs/journal/ records the session that did it.
Contrast and target size
npm run check:contrast audits every color pair this component uses across all four skins, light and dark, and fails the build on a shortfall. Two waivers are on the record in docs/audit/DEFERRED.md.
It sets no target size of its own; anything interactive inside it brings its own.
Tested
test/apg/batch-c.test.jsx
Known gaps
_No upstream requirement is recorded as not applicable._
Appearance
| Token | Used for |
|---|---|
--se-border | border-block-end |
--se-border-width | border-block-end |
--se-control-h-lg | min-block-size |
--se-radius-pill | border-radius |
--se-space-2 | gap |
--se-space-3 | gap, padding-inline |
--se-text-muted | color |
--se-text-sm | font-size |
--se-weight-medium | font-weight |
Motion
None.
Content
meta is the row's status in one or two words — Published, Domain verified, Unsaved. If it needs a sentence, the row is a Card.
Usage
If the reader needs to compare values across items, that is a DataTable. A list is for items read one at a time; a table is for a column read down.
When not to use it. For a list whose items are selectable or navigable by arrow key — that is a Listbox or a Menu.
Notes
Plural on purpose. Rows is a container of row parts, the same way options holds option.