Version: latest

Server-Komponente

List wird bevorzugt auf dem Server gerendert. Nutze den Standard-Import (z. B. @prokodo/ui/list) — die Library erkennt die Umgebung automatisch.

List

List rendert semantische <ul>- oder <ol>-Listen mit optionalen Icon-Bullets und Unterstützung für verschachtelte Unterlisten.

Übersicht

import { List } from "@prokodo/ui/list"
;<List
  items={[
    { text: "First item" },
    { text: "Second item", children: [{ text: "Nested item" }] },
  ]}
/>

Live PreviewOpen in Storybook ↗

Import

import { List } from "@prokodo/ui/list"

CSS:

import "@prokodo/ui/list.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`items`	`ListItem[]`	—	✅	Array von list items with `text`, optional `icon`, and optional `children`.
`ordered`	`boolean`	`false`	—	Render as `<ol>` instead of `<ul>`.
`icon`	`string`	—	—	Default `Icon` name for all items (overridden per item).
`className`	`string`	—	—	CSS class on root `<ul>` / `<ol>`.

Siehe src/components/list/List.model.ts für den vollständigen ListProps-Typ.

Design-Tokens

List definiert keine komponentenspezifischen CSS Custom Properties. Passe das Erscheinungsbild an, indem du folgende globale Design-System-Tokens auf :root oder einem übergeordneten Element überschreibst:

Token	Beschreibung
`--pk-space-xs`	Vertikaler Abstand der Listenelemente und Icon-Top
`--pk-space-sm`	Rechter Abstand des Icon-Containers
`--pk-space-md`	Abstand und Padding für Karten-Listenelemente
`--pk-color-muted`	Standard-Textfarbe der Listenelemente
`--pk-color-surface-raised`	Hintergrund der Icon-Blase (Light Mode)
`--pk-color-brand`	Hover-Akzentfarbe und Farbe bei `color="primary"`

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
1.3.2	Bedeutungsvolle Reihenfolge (A)	🔍 Manuell prüfen	Die Lesereihenfolge im DOM muss der beabsichtigten visuellen Darstellungsreihenfolge entsprechen.
1.4.3	Kontrast (Minimum) (AA)	🔍 Manuell prüfen	Text benötigt ein Kontrastverhältnis von mindestens 4,5:1 (3:1 für großen Text). Prüfung im finalen Produkt-Theme erforderlich.
2.4.6	Überschriften und Bezeichnungen (AA)	🔍 Manuell prüfen	Überschriften und Labels müssen das Thema oder den Zweck des zugehörigen Inhalts beschreiben.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 2 jest-axe-Assertion(s) in 1 Testdatei(en) · 4 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 List in Storybook öffnen

Quellcode

src/components/list/List.model.ts