Holo List & List Item

<holo-list> renders a <ul> or <ol> (set ordered) around <holo-list-item> children. Each holo-list-item reports role="listitem" on itself. Setting interactive on holo-list makes every child item focusable and clickable, supporting Enter/Space activation and emitting a bubbling holoListItemSelect event.

Live Previews

Default

First itemSecond itemThird item

<holo-list>
  <holo-list-item>First item</holo-list-item>
  <holo-list-item>Second item</holo-list-item>
  <holo-list-item>Third item</holo-list-item>
</holo-list>

Ordered

First itemSecond itemThird item

<holo-list ordered>
  <holo-list-item>First item</holo-list-item>
  <holo-list-item>Second item</holo-list-item>
</holo-list>

Interactive

EditDuplicateDelete

Selected: none

<holo-list interactive>
  <holo-list-item>Edit</holo-list-item>
  <holo-list-item>Duplicate</holo-list-item>
  <holo-list-item>Delete</holo-list-item>
</holo-list>
<script>
  const list = document.querySelector('holo-list');
  list.addEventListener('holoListItemSelect', event => console.log(event.target));
</script>

---

API Reference

holo-list Properties

| Property | Attribute | Description | Type | Default | | ------------- | ------------- | ----------------------------------------------------------------- | --------- | ------- | | ordered | ordered | If true, renders an ordered list (<ol>) instead of <ul>. | boolean | false | | interactive | interactive | If true, each holo-list-item child becomes focusable/clickable. | boolean | false |

holo-list-item Events

| Event | Description | Type | | -------------------- | -------------------------------------------------------------------------------- | ------------------- | | holoListItemSelect | Emitted (bubbles + composed) when the user activates the item while interactive. | CustomEvent<void> |