list — the prose list, the list itself

<script lang="ts">
import { List } from '@ui/list';
</script>

<div class={cx(rt.liGrid)}>
  <List>
    <li>prefix keys freeze while the tail grows</li>
    <li>the tail mutates in place on its <code class={cx(rt.fontMono, rt.liCode85)}>:tail</code> key</li>
    <li>
      nesting composes:
      <List>
        <li>the inner list rides the same channels</li>
        <li>one level deeper, zero extra classes</li>
      </List>
    </li>
  </List>
  <List ordered start={4}>
    <li>the fourth finding — start shifts the first marker</li>
    <li>the fifth, continuing the decimal run</li>
    <li>marker ink is muted; body ink is not</li>
  </List>
</div>

<script lang="ts">
import { List } from '@ui/list';
</script>

<div class={cx(rt.liGridXY)}>
  <div class={cx(rt.flex, rt.col, rt.gap16)}>
    <List marker="disc">
      <li>disc — the ul platform default</li>
      <li>a core utility; the byte-parity stamp</li>
    </List>
    <List marker="circle">
      <li>circle — hollow, the nested-list word</li>
      <li>no core utility exists: the arbitrary [list-style:] form</li>
    </List>
    <List marker="square">
      <li>square — the compact marker</li>
      <li>same arbitrary form, probed against TW 4.2.1</li>
    </List>
    <List marker="none">
      <li>none — markers gone, ps-6 stays</li>
      <li>the indent is structural, not decorative</li>
    </List>
  </div>
  <div class={cx(rt.flex, rt.col, rt.gap16)}>
    <List ordered marker="decimal">
      <li>decimal — the ol platform default</li>
      <li>continues from start when set</li>
    </List>
    <List ordered marker="alpha">
      <li>alpha — lower-alpha counters</li>
      <li>appendix-grade enumeration</li>
    </List>
    <List ordered marker="roman">
      <li>roman — lower-roman counters</li>
      <li>preface-grade enumeration</li>
    </List>
    <List ordered marker="roman" start={4}>
      <li>start shifts the first counter</li>
      <li>iv, v — the native ol accounting</li>
    </List>
  </div>
</div>

<script lang="ts">
import { List } from '@ui/list';
</script>

<div class={cx(rt.liGrid)}>
  <div class="jx-pure {cx(rt.col8)}">
    <span class={cx(rt.text11, rt.inkMuted)}>in a jx-pure scope — bare anchors ride the B2 lane; the B8 restore out-cascades the nav default (disc + ps-6 paint here, not none + ps-0)</span>
    <List nav="On this page">
      <li><a href="#usage">Usage</a></li>
      <li><a href="#markers">The marker matrix</a></li>
      <li><a href="#api">API</a></li>
    </List>
  </div>
  <div class={cx(rt.col8)}>
    <span class={cx(rt.text11, rt.inkMuted)}>standalone — the defaults paint: nav alone gives marker none + ps-0; an explicit marker overrides the list-style default only, ps-0 stays</span>
    <List nav="Contents">
      <li>Getting started</li>
      <li>Components</li>
      <li>Themes</li>
    </List>
    <List nav="Chapters" ordered marker="decimal">
      <li>the arrival</li>
      <li>the turn</li>
    </List>
    <p class={cx(rt.m0, rt.text125, rt.lead6, rt.inkMuted)}>
      Standalone (no face scope), a bare anchor is unstyled by design — compose the
      <a class={cx(rt.linkAccent)} href="/docs/components/link.html">Link part</a>
      for the prose lane; chrome lists inside app chrome use their own controls.
    </p>
  </div>
</div>