Slideover

<script lang="ts">
  import { Slideover, Button } from 'sv5ui';

  let open = $state(false);
</script>

<Button label="Open Slideover" onclick={() => (open = true)} />

<Slideover
  bind:open
  title="Basic Slideover"
  description="This is a simple slideover panel."
>
  {#snippet body()}
    <p>This is the body content of the slideover.</p>
  {/snippet}
</Slideover>

<script lang="ts">
  import { Slideover, Button } from 'sv5ui';

  let open = $state(false);
</script>

<Button label="Open Slideover" onclick={() => (open = true)} />

<Slideover
  bind:open
  title="Edit Profile"
  description="Make changes to your profile here."
>
  {#snippet body()}
    <p>Form fields go here...</p>
  {/snippet}

  {#snippet footer()}
    <Button variant="outline" color="surface" label="Cancel" onclick={() => (open = false)} />
    <Button label="Save Changes" onclick={() => (open = false)} />
  {/snippet}
</Slideover>

<Slideover side="right" title="Right" bind:open>...</Slideover>
<Slideover side="left" title="Left" bind:open>...</Slideover>
<Slideover side="top" title="Top" bind:open>...</Slideover>
<Slideover side="bottom" title="Bottom" bind:open>...</Slideover>

<script lang="ts">
  import { Slideover, Button } from 'sv5ui';

  let open = $state(false);
</script>

<Button label="Open Inset" onclick={() => (open = true)} />

<Slideover
  bind:open
  title="Inset Slideover"
  description="Displayed with inset margins and rounded corners."
  inset
>
  {#snippet body()}
    <p>This slideover has inset margins and rounded corners.</p>
  {/snippet}
</Slideover>

<script lang="ts">
  import { Slideover, Button } from 'sv5ui';

  let open = $state(false);
</script>

<Button label="Open Non-dismissible" onclick={() => (open = true)} />

<Slideover
  bind:open
  title="Important"
  dismissible={false}
>
  {#snippet body()}
    <p>This slideover cannot be closed by clicking outside or pressing Escape.</p>
  {/snippet}

  {#snippet footer()}
    <Button label="I Understand" onclick={() => (open = false)} />
  {/snippet}
</Slideover>