<script>
  import { ExpandableTile, Button } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

The `ExpandableTile` component creates a collapsible content container that can
show and hide content with a smooth animation. It's ideal for managing content
overflow and progressive disclosure of information. The component automatically
measures content height using a resize observer.

## Default

Create an expandable tile that shows and hides content. The component uses a
[resize observer](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
to determine the height of the above-the-fold content.

By default, the tile is collapsed. Use the `above` and `below` slots to define the
content that appears before and after expansion.

<ExpandableTile>
  <div slot="above">
    <div>
      Above the fold content here
    </div>
    <br />
    <br />
    <div>
      More above the fold content
    </div>
  </div>
  <div slot="below">Below the fold content here</div>
</ExpandableTile>

## Custom tile heights

Set custom heights for the tile content using CSS. This is useful when you need to
control the exact dimensions of the visible and hidden content.

<ExpandableTile>
  <div slot="above" style="height: 10rem">Above the fold content here</div>
  <div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>

## Expanded

Display the tile in its expanded state by default by setting the `expanded` prop to
`true`.

<ExpandableTile expanded>
  <div slot="above">Above the fold content here</div>
  <div slot="below">Below the fold content here</div>
</ExpandableTile>

## Light variant

Use the light variant for expandable tiles on dark backgrounds by setting the
`light` prop to `true`.

<ExpandableTile light>
  <div slot="above">Above the fold content here</div>
  <div slot="below">Below the fold content here</div>
</ExpandableTile>

## With icon labels

Customize the expand/collapse button labels using the `tileExpandedLabel` and
`tileCollapsedLabel` props.

<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
  <div slot="above">Above the fold content here</div>
  <div slot="below">Below the fold content here</div>
</ExpandableTile>

## With interactive content

Handle interactive content within the tile by preventing event propagation. This
ensures that clicks on interactive elements don't trigger the tile's expand/collapse
behavior.

<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
  <div slot="above">
    <a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
      Native element
    </a>
    <br /><br />
    <Button on:click={e => {
      e.stopPropagation();
      console.log("Hello world");
    }}>
      Svelte component
    </Button>
  </div>
  <div slot="below">Below the fold content here</div>
</ExpandableTile>
