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 wraps each child item’s content in a native <button>, so items are focusable, announced as buttons, and emit a bubbling holoListItemSelect event on click, Enter or Space.

When to use

Use it for:

• Presenting a short series of related items, with bullets or numbers (ordered).
• A simple list where each item can be selected (interactive).

Don’t use it for:

• Rows of data with several columns. Use Table.
• Navigation or commands. Use Links inside a <nav>, or Menu.
• Collapsible groups. Use Accordion.

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>

Accessibility

<holo-list> renders a <ul> (or <ol> with ordered) in its shadow root. Each <holo-list-item> sets role="listitem" on itself.

With interactive, each item wraps its content in a native <button type="button">, so it is announced as a button with the item’s text as its name, and emits holoListItemSelect when the button is activated.

Key	Action
Tab	Moves between items (each button is a tab stop)
Enter, Space	Selects the focused item (interactive lists only)

• Interactive items show a 2px focus ring on the button.
• There is no roving tabindex and no arrow-key navigation.
• Items in a non-interactive list contain no button, are not focusable and ignore key presses.

You provide:

• For interactive lists, item text that says what selecting does.
• Plain text content in interactive items. Do not put links or other controls inside them, because they would be nested inside a button.
• A <nav> or heading and label around the list when it acts as navigation. For navigation, use Link items in a non-interactive list instead.

---

API Reference

holo-list

Importing

import '@philbob-sideprojects/hololink-ui/holo-list';

Properties

Property	Attribute	Type	Default	Description
interactive	interactive	boolean	false	If true, each holo-list-item child renders its content in a native <button> and emits holoListItemSelect when activated.
ordered	ordered	boolean	false	If true, renders an ordered list (<ol>) instead of an unordered list (<ul>).

Slots

Slot	Description
(default)	The holo-list-item elements.

CSS custom properties

Property	Description
--holo-list-color	Text color of the list.
--holo-list-indent	Inline-start indent of the list.

holo-list-item

Importing

import '@philbob-sideprojects/hololink-ui/holo-list-item';

Events

Event	Detail	Description
holoListItemSelect	void	Emitted (bubbles + composed) when the user activates this item while the owning holo-list is interactive.

Slots

Slot	Description
(default)	The item content.

CSS custom properties

Property	Description
--holo-list-item-color	Text color of the item.
--holo-list-item-focus-ring	Focus ring color of interactive items.
--holo-list-item-hover-bg	Background color of interactive items on hover.
--holo-list-item-padding-block	Vertical padding of the item.
--holo-list-item-radius	Corner radius of interactive items.