RowList

<script lang="ts">
  import 'portal-bits/styles.css';
  import 'portal-bits/tokens.css';
  import type { Snippet } from 'svelte';

  let { children }: { children: Snippet } = $props();
</script>

{@render children()}

<script lang="ts">
  import RowListExample from './RowListExample.svelte';
</script>

<RowListExample content={"short"} />

<script lang="ts">
  import { Badge, Button, Row, RowList } from 'portal-bits';
  let { content = 'short' }: { content?: 'short' | 'wrapping' } = $props();
  let saved = $state(false);
</script>

<RowList aria-label="Example records">
  {#if content === 'short'}
    <Row>
      <a href="#field-notes">Field notes</a>
      <Badge>Draft</Badge>
      <Button variant="quiet" onclick={() => (saved = !saved)}>{saved ? 'Saved' : 'Save'}</Button>
    </Row>
  {:else}
    <Row>
      <span>A longer synthetic record wraps naturally when the available space is narrow.</span>
      <Badge>Draft</Badge>
    </Row>
  {/if}
  <Row><span>A single cell can explain this record.</span></Row>
</RowList>