<!-- Generated by npm run gen:skill from ui/List/skill.md - do not edit. -->

# List

## `<list>`

- `selection`: none | single | multi
- `open-on`: enter | dblclick | click
- `sort`: ascending | descending
- `virtual`: auto | true | false
- `paging`: none | all
- `layout`, `item-height`, `lasso`, `deselect`, `sort-by`, `loading`, `paging-max`, `group`, `group-label`, `state`, `draggable`, `droppable`, `upload`, `upload-folders`, `upload-accept`, `accept`
- bound state, `attr="{xpath}"` into the `state` document: `filter`, `selected`, `selected-xpath`, `focused`, `renaming`, `acted`, `loaded`, `total`, `drag-key`, `drop-key`
- Rules: `match`, `key` (XPath, e.g. @uid), `group`, `group-label`, `rename` (XPath, e.g. @name), `filter-by` (space-separated XPaths), `volatile` (space-separated attribute names), `label` (text with {xpath}, e.g. {@friendly})
- events: Select, Clear, Open, DoubleClick, Delete, Renamed, ContextMenu, Menu, Action, Change, DragOver, Drop

```xml
<list name="files" width="fill" height="fill" selection="multi" lasso="true">
  <rule match="db:container" key="@id">
    <div class="xl-leading"><ximage src="{folder-icon('icon://folder')}" size="20" alt=""/></div>
    <div class="xl-content"><div class="xl-title">{@name}</div></div>
  </rule>
  <rule match="db:object" key="@id">
    <div class="xl-leading"><ximage src="{filetype-icon(@xlink:href, 'icon://document')}" size="20" alt=""/></div>
    <div class="xl-content"><div class="xl-title">{@name}</div></div>
  </rule>
</list>
```

## Guidance

- Bind it to the rows' parent (`select="/people"` for `person` rows); each `rule` (`match`, `key="@id"`) is one row's markup reading `{@attr}`, built from `xl-leading`, `xl-content`, `xl-title`, `xl-line`, `xl-meta`.
- `<button data-action="archive">` in a row fires the event `archive` on the list; in its step the row is `!` (`change value="!"`). The selection does not move to it, so `#v1#list` is not that row.
- ContextMenu selects the right-clicked row first; in its step that row is `!`.
- Select/Clear follow the selection; Open fires on Enter and double-click (`open-on="click"`: a single press). Delete and Backspace fire Delete - the list deletes nothing itself. Renamed fires after a rename is written to the data.
- Give it `label="..."` in a rows/columns/flow panel: that names the list.
- The state attributes bind with an absolute `{xpath}` into `state="#ui"` (`drag-key="{//ui/@drag}"`), to read and drive the list without methods. `#ui` must exist when the view opens: a resource (`<item name="ui"><ui/></item>`), not a `create` in a step.
- An `ximage` in a rule needs `alt` (`""` if decorative), a text-less button `aria-label`. Dragging needs a keyboard way: an `event="Alt+ArrowUp"` trigger and buttons running the same step.
