# list

The markup of every demo on <https://kuiper.oeds.it/list/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## default

The component with no options set -- what the markup alone gives you, before any parameter is tuned. Read this one first: every other panel on the page is a departure from it.

```html
<ul data-list><li>list item</li><li>list item</li><li>list item</li></ul>
```

## type

The marker vocabulary, one specimen per `list-type-*` value. The marker is drawn by Kuiper rather than by `list-style-type`, which is what lets the frame and dash forms exist at all.

```html
<ul data-list="type:none;"><li>none</li><li>none</li><li>none</li></ul>
<ul data-list="type:alpha-lower;"><li>alpha-lower</li><li>alpha-lower</li><li>alpha-lower</li></ul>
<ul data-list="type:alpha-upper;"><li>alpha-upper</li><li>alpha-upper</li><li>alpha-upper</li></ul>
<ul data-list="type:circle;"><li>circle</li><li>circle</li><li>circle</li></ul>
<ul data-list="type:dash;"><li>dash</li><li>dash</li><li>dash</li></ul>
<ul data-list="type:dash-long;"><li>dash-long</li><li>dash-long</li><li>dash-long</li></ul>
<ul data-list="type:dash-medium;"><li>dash-medium</li><li>dash-medium</li><li>dash-medium</li></ul>
<ul data-list="type:dash-short;"><li>dash-short</li><li>dash-short</li><li>dash-short</li></ul>
<ul data-list="type:diamond;"><li>diamond</li><li>diamond</li><li>diamond</li></ul>
<ul data-list="type:diamond-frame;"><li>diamond-frame</li><li>diamond-frame</li><li>diamond-frame</li></ul>
<ul data-list="type:disc;"><li>disc</li><li>disc</li><li>disc</li></ul>
<ul data-list="type:dot;"><li>dot</li><li>dot</li><li>dot</li></ul>
<ul data-list="type:frame;"><li>frame</li><li>frame</li><li>frame</li></ul>
<ul data-list="type:number;"><li>number</li><li>number</li><li>number</li></ul>
<ul data-list="type:number-leading;"><li>number-leading</li><li>number-leading</li><li>number-leading</li></ul>
<ul data-list="type:roman-lower;"><li>roman-lower</li><li>roman-lower</li><li>roman-lower</li></ul>
<ul data-list="type:roman-upper;"><li>roman-upper</li><li>roman-upper</li><li>roman-upper</li></ul>
<ul data-list="type:square;"><li>square</li><li>square</li><li>square</li></ul>
```

## separator

The three separator modes -- none, a rule, a gap. The rule is a `::before` on the second item onward, whose top margin collapses, so measure the SECOND item and not the first.

```html
<ul data-list="separator:none;"><li>none</li><li>none</li><li>none</li></ul>
<ul data-list="separator:divider;"><li>divider</li><li>divider</li><li>divider</li></ul>
<ul data-list="separator:space;"><li>space</li><li>space</li><li>space</li></ul>
```

## caret

The caret color family. It paints through `li::before`, so the color is on the list and not on the item, and `list-caret-color-*` is the one parameter whose class name is not its own name.

```html
<ul data-list="type:disc;separator:none;"><li>base</li></ul>
<ul data-list="type:disc;separator:none;caret:black;"><li>black</li></ul>
<ul data-list="type:disc;separator:none;caret:white;"><li>white</li></ul>
<ul data-list="type:disc;separator:none;caret:muted;"><li>muted</li></ul>
<ul data-list="type:disc;separator:none;caret:primary;"><li>primary</li></ul>
<ul data-list="type:disc;separator:none;caret:secondary;"><li>secondary</li></ul>
<ul data-list="type:disc;separator:none;caret:tertiary;"><li>tertiary</li></ul>
<ul data-list="type:disc;separator:none;caret:danger;"><li>danger</li></ul>
<ul data-list="type:disc;separator:none;caret:warning;"><li>warning</li></ul>
<ul data-list="type:disc;separator:none;caret:accent;"><li>accent</li></ul>
<ul data-list="type:disc;separator:none;caret:success;"><li>success</li></ul>
<ul data-list="type:disc;separator:none;caret:info;"><li>info</li></ul>
<ul data-list="type:disc;separator:none;caret:action;"><li>action</li></ul>
<ul data-list="type:disc;separator:none;caret:emphasis;"><li>emphasis</li></ul>
```