<script>
  import { Button, Search, ContainedList, ContainedListItem } from "carbon-components-svelte";
  import Add from "carbon-icons-svelte/lib/Add.svelte";
  import Close from "carbon-icons-svelte/lib/Close.svelte";
  import Preview from "../../components/Preview.svelte";
</script>

## Default

The `ContainedList` component is used to display a list of items in a container.

It uses a `md` size by default.

<ContainedList labelText="List title">
  <ContainedListItem>Item 1</ContainedListItem>
  <ContainedListItem>Item 2</ContainedListItem>
  <ContainedListItem>Item 3</ContainedListItem>
</ContainedList>

## Small size

<ContainedList labelText="List title" size="sm">
  <ContainedListItem>Item 1</ContainedListItem>
  <ContainedListItem>Item 2</ContainedListItem>
  <ContainedListItem>Item 3</ContainedListItem>
</ContainedList>

## Large size

<ContainedList labelText="List title" size="lg">
  <ContainedListItem>Item 1</ContainedListItem>
  <ContainedListItem>Item 2</ContainedListItem>
  <ContainedListItem>Item 3</ContainedListItem>
</ContainedList>

## Extra-large size

<ContainedList labelText="List title" size="xl">
  <ContainedListItem>Item 1</ContainedListItem>
  <ContainedListItem>Item 2</ContainedListItem>
  <ContainedListItem>Item 3</ContainedListItem>
</ContainedList>

## Inset items

<ContainedList labelText="List title" inset>
  <ContainedListItem>Item 1</ContainedListItem>
  <ContainedListItem>Item 2</ContainedListItem>
  <ContainedListItem>Item 3</ContainedListItem>
</ContainedList>

## Disclosed

Set `kind="disclosed"` for the list title to be sticky positioned.

When scrolling, the list title will stick to the top of the container.

<div style:height="200px" style:overflow-y="auto">
  <ContainedList labelText="List title 1" kind="disclosed">
    {#each Array.from({ length: 6 }) as i}
      <ContainedListItem>Item</ContainedListItem>
    {/each}
  </ContainedList>
  <ContainedList labelText="List title 2" kind="disclosed">
    {#each Array.from({ length: 6 }) as i}
      <ContainedListItem>Item</ContainedListItem>
    {/each}
  </ContainedList>
</div>

## With icons

<ContainedList labelText="List title">
  <ContainedListItem icon={Add}>Item 1</ContainedListItem>
  <ContainedListItem icon={Add}>Item 2</ContainedListItem>
  <ContainedListItem icon={Add}>Item 3</ContainedListItem>
</ContainedList>

## With expandable search

Use the `action` slot to add an expandable search.

<ContainedList labelText="List title">
  <Search slot="action" expandable />
  <ContainedListItem>Item 1</ContainedListItem>
  <ContainedListItem>Item 2</ContainedListItem>
  <ContainedListItem>Item 3</ContainedListItem>
</ContainedList>

## Interactive items

Set `interactive` to make the items render as a `button`.

<ContainedList labelText="List title">
  <ContainedListItem interactive on:click={() => console.log('click')}>
    Item 1
  </ContainedListItem>
  <ContainedListItem interactive disabled>Item 2</ContainedListItem>
  <ContainedListItem interactive>Item 3</ContainedListItem>
</ContainedList>

## Interactive items with actions

Similarly to `ContainedList`, you can add an action to `ContainedListItem` using the `action` slot.

<ContainedList labelText="List title">
  <ContainedListItem interactive on:click={() => console.log('click')}>
    Item 1
    <Button
      slot="action"
      kind="ghost"
      iconDescription="Dismiss"
      icon={Close}
      on:click={() => console.log('click close')}
    />
  </ContainedListItem>
  <ContainedListItem interactive disabled>Item 2</ContainedListItem>
  <ContainedListItem interactive>
    Item 3
  </ContainedListItem>
</ContainedList>

