Primitives

List

An ordered or unordered list with the markers toned down. --plain strips them entirely, for a list that is a list semantically but not visually — a nav, a feed, a stack of cards.

plain markup — no library on the page

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

Tokens are CSS variables
Classes are the API

Still a list to a screen reader
Just not to the eye

Tokens are CSS variables
Classes are the API

Still a list to a screen reader
Just not to the eye

Tokens are CSS variables
Classes are the API

Still a list to a screen reader
Just not to the eye

Tokens are CSS variables
Classes are the API

Still a list to a screen reader
Just not to the eye

Tokens are CSS variables
Classes are the API

Still a list to a screen reader
Just not to the eye

Code

index.html

<ul class="aura-list">
  <li>Tokens are CSS variables</li>
  <li>Classes are the API</li>
</ul>
<ul class="aura-list aura-list--plain">
  <li>Still a list to a screen reader</li>
  <li>Just not to the eye</li>
</ul>

Demo.tsx

import { List } from '@ilomee/aura-react';

/** Mirrors the `list` html snippet in the registry — that snippet is what every stack is diffed
 *  against. Both are `<ul>`: `ordered` has its own row in the props table, and Angular's
 *  directive cannot take it (you write the `<ol>` yourself), so a demo that used it would put
 *  the stacks on different elements by design. */
export default function Demo() {
  return (
    <>
      <List>
        <li>Tokens are CSS variables</li>
        <li>Classes are the API</li>
      </List>
      <List plain>
        <li>Still a list to a screen reader</li>
        <li>Just not to the eye</li>
      </List>
    </>
  );
}

Demo.vue

<script setup lang="ts">
import { List } from '@ilomee/aura-vue';
</script>

<template>
  <List plain>
    <li>Still a list to a screen reader</li>
  </List>
</template>

Demo.svelte

<script lang="ts">
  import { List } from '@ilomee/aura-svelte';
</script>

<List plain>
  <li>Still a list to a screen reader</li>
</List>

Used as [auraList] — a directive you put on your own element.

demo.component.ts

import { AuraList } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraList],
  template: `<ul auraList plain>
    <li>Still a list to a screen reader</li>
  </ul>`,
})
export class DemoComponent {}

A directive — write <ol auraList> for an ordered list, so there is no ordered input. The other three take it as a prop because their templates cannot swap a tag without one.

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
ordered	`boolean`	`false`	Renders `<ol>`.
plain	`boolean`	`false`

Name	Type	Default	Notes
ordered	`boolean`	`false`	Renders `<ol>`.
plain	`boolean`	`false`

Name	Type	Default	Notes
ordered	`boolean`	`false`	Renders `<ol>`.
plain	`boolean`	`false`

Name	Type	Default	Notes
plain	`boolean`	`false`

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-list	base	Required. A modifier does nothing without it.
.aura-list--plain	modifier

Tokens and rules

components.css

marker: var(--text-faint)
indent: var(--space-5) — logical
plain: list-style: none + no indent