<script>
  import { InlineNotification, RecursiveList, Link } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`RecursiveList` provides a flexible way to render hierarchical data structures using either unordered or ordered lists. It supports nested nodes, links, and HTML content, making it ideal for displaying complex data hierarchies.

<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
    In version 0.86.0, the <strong>children</strong> prop was renamed to <strong>nodes</strong> for <Link target="_blank" href="https://svelte.dev/docs/svelte/v5-migration-guide#The-children-prop-is-reserved">Svelte 5 compatibility</Link>.
  </div>
</InlineNotification>

<InlineNotification svx-ignore lowContrast title="Warning:" kind="warning" hideCloseButton>
  <div class="body-short-01">
    HTML content provided via the <code>html</code> prop is not sanitized.
  </div>
</InlineNotification>

## Default

Create a hierarchical list using the `nodes` prop. Each node can contain text, links, HTML content, and nested nodes.

<FileSource src="/framed/RecursiveList/RecursiveList" />

## Ordered

Set `type` to `"ordered"` to use numbered lists with proper indentation.

<FileSource src="/framed/RecursiveList/RecursiveListOrdered" />

## Ordered (native styles)

Set `type` to `"ordered-native"` to use browser-native numbering styles.

<FileSource src="/framed/RecursiveList/RecursiveListOrderedNative" />

## Flat data structure

Convert flat data structures to hierarchical arrays using the `toHierarchy` utility function.

<FileSource src="/framed/RecursiveList/RecursiveListFlatArray" />
