Dialog

Default

A centered modal dialog with title, content, and a close button.

PreviewCode

---
// GENERATED from packages/demos/dialog/default.demo.tsx — edit the source, not this file.
import Dialog from "@pindoba/astro-dialog";
import Button from "@pindoba/astro-button";
import Stamp from "@pindoba/astro-stamp";
import { Info } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <Dialog id="astro-demo-dialog-default" title="Dialog Title">
    <Stamp
      slot="heading-leading"
      size="sm"
      shape="circle"
      tone="primary"
      emphasis="secondary"
    >
      <Info size={12} />
    </Stamp>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex placeat unde
    natus ut ea voluptatum vel officiis commodi optio a totam repellendus, fuga,
    laborum voluptatibus recusandae eos. Voluptate, vel non!
  </Dialog>

  <Button id="astro-demo-dialog-default-trigger">Open Dialog</Button>
</div>

<script>
  document
    .getElementById("astro-demo-dialog-default-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-default");
    });
</script>

// GENERATED from packages/demos/dialog/default.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Dialog } from "@pindoba/react-dialog";
import { Button } from "@pindoba/react-button";
import { Stamp } from "@pindoba/react-stamp";
import { Info } from "lucide-react";
import { stack } from "@pindoba/styled-system/patterns";

export default function DefaultDemo() {
  const [open, setOpen] = useState(false);
  return (
    <div className={stack({ gap: "md", direction: "column", align: "start" })}>
      <Dialog
        id="react-demo-dialog-default"
        title="Dialog Title"
        open={open}
        onOpenChange={setOpen}
        headingLeading={
          <Stamp size="sm" shape="circle" tone="primary" emphasis="secondary">
            <Info size={12} />
          </Stamp>
        }
      >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex placeat unde
        natus ut ea voluptatum vel officiis commodi optio a totam repellendus,
        fuga, laborum voluptatibus recusandae eos. Voluptate, vel non!
      </Dialog>

      <Button
        id="react-demo-dialog-default-trigger"
        onClick={() => setOpen(true)}
      >
        Open Dialog
      </Button>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/dialog/default.demo.tsx — edit the source, not this file.
  import Dialog from "@pindoba/svelte-dialog";
  import Button from "@pindoba/svelte-button";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideInfo from "@lucide/svelte/icons/info";
  import { stack } from "@pindoba/styled-system/patterns";

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

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <Dialog id="svelte-demo-dialog-default" title="Dialog Title" bind:open>
    {#snippet headingLeading()}
      <Stamp size="sm" shape="circle" tone="primary" emphasis="secondary">
        <LucideInfo size={12} />
      </Stamp>
    {/snippet}
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex placeat unde natus
    ut ea voluptatum vel officiis commodi optio a totam repellendus, fuga, laborum
    voluptatibus recusandae eos. Voluptate, vel non!
  </Dialog>

  <Button id="svelte-demo-dialog-default-trigger" onclick={() => (open = true)}>
    Open Dialog
  </Button>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/dialog/default.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Dialog } from "@pindoba/vue-dialog";
import { Button } from "@pindoba/vue-button";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";

const open = ref(false);
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', align: 'start' })">
    <Dialog
      id="vue-demo-dialog-default"
      title="Dialog Title"
      :open="open"
      :onOpenChange="(o: boolean) => (open = o)"
    >
      <template #headingLeading>
        <Stamp size="sm" shape="circle" tone="primary" emphasis="secondary">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="12"
            height="12"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-info"
            aria-hidden="true"
          >
            <circle cx="12" cy="12" r="10" />
            <path d="M12 16v-4" />
            <path d="M12 8h.01" />
          </svg>
        </Stamp>
      </template>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex placeat unde
      natus ut ea voluptatum vel officiis commodi optio a totam repellendus,
      fuga, laborum voluptatibus recusandae eos. Voluptate, vel non!
    </Dialog>

    <Button id="vue-demo-dialog-default-trigger" :onClick="() => (open = true)">
      Open Dialog
    </Button>
  </div>
</template>

// GENERATED from packages/demos/dialog/default.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Dialog } from "@pindoba/solid-dialog";
import { Button } from "@pindoba/solid-button";
import { Stamp } from "@pindoba/solid-stamp";
import { stack } from "@pindoba/styled-system/patterns";

export default function DefaultDemo() {
  const [open, setOpen] = createSignal(false);
  return (
    <div class={stack({ gap: "md", direction: "column", align: "start" })}>
      <Dialog
        id="solid-demo-dialog-default"
        title="Dialog Title"
        open={open()}
        onOpenChange={setOpen}
        headingLeading={
          <Stamp size="sm" shape="circle" tone="primary" emphasis="secondary">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="12"
              height="12"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-info"
              aria-hidden="true"
            >
              <circle cx="12" cy="12" r="10" />
              <path d="M12 16v-4" />
              <path d="M12 8h.01" />
            </svg>
          </Stamp>
        }
      >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex placeat unde
        natus ut ea voluptatum vel officiis commodi optio a totam repellendus,
        fuga, laborum voluptatibus recusandae eos. Voluptate, vel non!
      </Dialog>

      <Button
        id="solid-demo-dialog-default-trigger"
        onClick={() => setOpen(true)}
      >
        Open Dialog
      </Button>
    </div>
  );
}

The dialog header renders a Banner internally, so every Banner slot is available directly on Dialog. Use headingLeading / headingTrailing (inline with the title), subheadingLeading / subheadingTrailing (inline with the subtitle), and Banner’s outer leading / trailing slots for content that sits beside the whole heading group — the latter is the right place for header actions now that Dialog no longer defines its own headerActions slot.

PreviewCode

---
// GENERATED from packages/demos/dialog/header.demo.tsx — edit the source, not this file.
import Dialog from "@pindoba/astro-dialog";
import Button from "@pindoba/astro-button";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { Folder, User, Bell, Funnel } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "row", flexWrap: "wrap" })}>
  <Dialog
    id="astro-demo-dialog-header-notice"
    title="Scheduled Maintenance"
    subtitle="System will be unavailable on March 15, 2026"
  >
    All services will be offline from 02:00 to 04:00 UTC. No action is required
    — your data will remain intact throughout the maintenance window.
  </Dialog>

  <Button id="astro-demo-dialog-header-notice-trigger">With Subtitle</Button>

  <Dialog
    id="astro-demo-dialog-header-files"
    title="File Manager"
    subtitle="Browse and manage your project files"
  >
    <Stamp
      slot="heading-leading"
      shape="square"
      background="surface.ground"
      size="sm"
    >
      <Folder size={14} />
    </Stamp>
    <Badge slot="heading-trailing" size="sm">
      12 files
    </Badge>
    Select a file to preview, rename, move, or remove it from your project
    workspace.
  </Dialog>

  <Button id="astro-demo-dialog-header-files-trigger">Stamp + Badge</Button>

  <Dialog
    id="astro-demo-dialog-header-account"
    title="Account Settings"
    subtitle="Manage your preferences and security"
  >
    <Stamp
      slot="heading-leading"
      tone="primary"
      emphasis="secondary"
      shape="circle"
      size="sm"
    >
      <User size={14} />
    </Stamp>
    <Badge slot="subheading-trailing" size="sm" tone="success">
      Verified
    </Badge>
    Update your display name, email address, and two-factor authentication
    settings from this panel.
  </Dialog>

  <Button id="astro-demo-dialog-header-account-trigger">
    Subheading Slots
  </Button>

  <Dialog
    id="astro-demo-dialog-header-notifications"
    title="Notifications"
    subtitle="3 unread messages"
  >
    <Stamp
      slot="heading-leading"
      tone="warning"
      emphasis="secondary"
      shape="circle"
      size="sm"
    >
      <Bell size={14} />
    </Stamp>
    <Badge slot="heading-trailing" size="sm" tone="warning">
      3
    </Badge>
    <Button slot="trailing" size="sm" emphasis="ghost">
      Mark all read
    </Button>
    You have new notifications about team activity, mentions, and system
    updates. Review them here or mark everything as read.
  </Dialog>

  <Button id="astro-demo-dialog-header-notifications-trigger">
    Trailing Action
  </Button>

  <Dialog id="astro-demo-dialog-header-filters" title="Filters">
    <Stamp
      slot="heading-leading"
      tone="primary"
      emphasis="secondary"
      shape="square"
      size="sm"
    >
      <Funnel size={14} />
    </Stamp>
    <div slot="trailing" class={stack({ direction: "row", gap: "2xs" })}>
      <Button size="sm" emphasis="ghost">
        Reset
      </Button>
      <Button size="sm" emphasis="secondary">
        Apply
      </Button>
    </div>
    Choose the filters you want to apply to the current view. Changes take
    effect immediately once applied.
  </Dialog>

  <Button id="astro-demo-dialog-header-filters-trigger">
    Actions, No Subtitle
  </Button>
</div>

<script>
  document
    .getElementById("astro-demo-dialog-header-notice-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-header-notice");
    });
  document
    .getElementById("astro-demo-dialog-header-files-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-header-files");
    });
  document
    .getElementById("astro-demo-dialog-header-account-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-header-account");
    });
  document
    .getElementById("astro-demo-dialog-header-notifications-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open(
        "astro-demo-dialog-header-notifications",
      );
    });
  document
    .getElementById("astro-demo-dialog-header-filters-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-header-filters");
    });
</script>

// GENERATED from packages/demos/dialog/header.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Dialog } from "@pindoba/react-dialog";
import { Button } from "@pindoba/react-button";
import { Badge } from "@pindoba/react-badge";
import { Stamp } from "@pindoba/react-stamp";
import { Folder } from "lucide-react";
import { User } from "lucide-react";
import { Bell } from "lucide-react";
import { Funnel } from "lucide-react";
import { stack } from "@pindoba/styled-system/patterns";

export default function HeaderDemo() {
  const [openNotice, setOpenNotice] = useState(false);
  const [openFiles, setOpenFiles] = useState(false);
  const [openAccount, setOpenAccount] = useState(false);
  const [openNotifications, setOpenNotifications] = useState(false);
  const [openFilters, setOpenFilters] = useState(false);
  return (
    <div className={stack({ gap: "md", direction: "row", flexWrap: "wrap" })}>
      <Dialog
        id="react-demo-dialog-header-notice"
        title="Scheduled Maintenance"
        subtitle="System will be unavailable on March 15, 2026"
        open={openNotice}
        onOpenChange={setOpenNotice}
      >
        All services will be offline from 02:00 to 04:00 UTC. No action is
        required — your data will remain intact throughout the maintenance
        window.
      </Dialog>

      <Button
        id="react-demo-dialog-header-notice-trigger"
        onClick={() => setOpenNotice(true)}
      >
        With Subtitle
      </Button>

      <Dialog
        id="react-demo-dialog-header-files"
        title="File Manager"
        subtitle="Browse and manage your project files"
        open={openFiles}
        onOpenChange={setOpenFiles}
        headingLeading={
          <Stamp shape="square" background="surface.ground" size="sm">
            <Folder size={14} />
          </Stamp>
        }
        headingTrailing={<Badge size="sm">12 files</Badge>}
      >
        Select a file to preview, rename, move, or remove it from your project
        workspace.
      </Dialog>

      <Button
        id="react-demo-dialog-header-files-trigger"
        onClick={() => setOpenFiles(true)}
      >
        Stamp + Badge
      </Button>

      <Dialog
        id="react-demo-dialog-header-account"
        title="Account Settings"
        subtitle="Manage your preferences and security"
        open={openAccount}
        onOpenChange={setOpenAccount}
        headingLeading={
          <Stamp tone="primary" emphasis="secondary" shape="circle" size="sm">
            <User size={14} />
          </Stamp>
        }
        subheadingTrailing={
          <Badge size="sm" tone="success">
            Verified
          </Badge>
        }
      >
        Update your display name, email address, and two-factor authentication
        settings from this panel.
      </Dialog>

      <Button
        id="react-demo-dialog-header-account-trigger"
        onClick={() => setOpenAccount(true)}
      >
        Subheading Slots
      </Button>

      <Dialog
        id="react-demo-dialog-header-notifications"
        title="Notifications"
        subtitle="3 unread messages"
        open={openNotifications}
        onOpenChange={setOpenNotifications}
        headingLeading={
          <Stamp tone="warning" emphasis="secondary" shape="circle" size="sm">
            <Bell size={14} />
          </Stamp>
        }
        headingTrailing={
          <Badge size="sm" tone="warning">
            3
          </Badge>
        }
        trailing={
          <Button size="sm" emphasis="ghost">
            Mark all read
          </Button>
        }
      >
        You have new notifications about team activity, mentions, and system
        updates. Review them here or mark everything as read.
      </Dialog>

      <Button
        id="react-demo-dialog-header-notifications-trigger"
        onClick={() => setOpenNotifications(true)}
      >
        Trailing Action
      </Button>

      <Dialog
        id="react-demo-dialog-header-filters"
        title="Filters"
        open={openFilters}
        onOpenChange={setOpenFilters}
        headingLeading={
          <Stamp tone="primary" emphasis="secondary" shape="square" size="sm">
            <Funnel size={14} />
          </Stamp>
        }
        trailing={
          <div className={stack({ direction: "row", gap: "2xs" })}>
            <Button size="sm" emphasis="ghost">
              Reset
            </Button>
            <Button size="sm" emphasis="secondary">
              Apply
            </Button>
          </div>
        }
      >
        Choose the filters you want to apply to the current view. Changes take
        effect immediately once applied.
      </Dialog>

      <Button
        id="react-demo-dialog-header-filters-trigger"
        onClick={() => setOpenFilters(true)}
      >
        Actions, No Subtitle
      </Button>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/dialog/header.demo.tsx — edit the source, not this file.
  import Dialog from "@pindoba/svelte-dialog";
  import Button from "@pindoba/svelte-button";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideFolder from "@lucide/svelte/icons/folder";
  import LucideUser from "@lucide/svelte/icons/user";
  import LucideBell from "@lucide/svelte/icons/bell";
  import LucideFunnel from "@lucide/svelte/icons/funnel";
  import { stack } from "@pindoba/styled-system/patterns";

  let openNotice = $state(false);
  let openFiles = $state(false);
  let openAccount = $state(false);
  let openNotifications = $state(false);
  let openFilters = $state(false);
</script>

<div class={stack({ gap: "md", direction: "row", flexWrap: "wrap" })}>
  <Dialog
    id="svelte-demo-dialog-header-notice"
    title="Scheduled Maintenance"
    subtitle="System will be unavailable on March 15, 2026"
    bind:open={openNotice}
  >
    All services will be offline from 02:00 to 04:00 UTC. No action is required
    — your data will remain intact throughout the maintenance window.
  </Dialog>

  <Button
    id="svelte-demo-dialog-header-notice-trigger"
    onclick={() => (openNotice = true)}
  >
    With Subtitle
  </Button>

  <Dialog
    id="svelte-demo-dialog-header-files"
    title="File Manager"
    subtitle="Browse and manage your project files"
    bind:open={openFiles}
  >
    {#snippet headingLeading()}
      <Stamp shape="square" background="surface.ground" size="sm">
        <LucideFolder size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm">12 files</Badge>
    {/snippet}
    Select a file to preview, rename, move, or remove it from your project workspace.
  </Dialog>

  <Button
    id="svelte-demo-dialog-header-files-trigger"
    onclick={() => (openFiles = true)}
  >
    Stamp + Badge
  </Button>

  <Dialog
    id="svelte-demo-dialog-header-account"
    title="Account Settings"
    subtitle="Manage your preferences and security"
    bind:open={openAccount}
  >
    {#snippet headingLeading()}
      <Stamp tone="primary" emphasis="secondary" shape="circle" size="sm">
        <LucideUser size={14} />
      </Stamp>
    {/snippet}
    {#snippet subheadingTrailing()}
      <Badge size="sm" tone="success">Verified</Badge>
    {/snippet}
    Update your display name, email address, and two-factor authentication settings
    from this panel.
  </Dialog>

  <Button
    id="svelte-demo-dialog-header-account-trigger"
    onclick={() => (openAccount = true)}
  >
    Subheading Slots
  </Button>

  <Dialog
    id="svelte-demo-dialog-header-notifications"
    title="Notifications"
    subtitle="3 unread messages"
    bind:open={openNotifications}
  >
    {#snippet headingLeading()}
      <Stamp tone="warning" emphasis="secondary" shape="circle" size="sm">
        <LucideBell size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm" tone="warning">3</Badge>
    {/snippet}
    {#snippet trailing()}
      <Button size="sm" emphasis="ghost">Mark all read</Button>
    {/snippet}
    You have new notifications about team activity, mentions, and system updates.
    Review them here or mark everything as read.
  </Dialog>

  <Button
    id="svelte-demo-dialog-header-notifications-trigger"
    onclick={() => (openNotifications = true)}
  >
    Trailing Action
  </Button>

  <Dialog
    id="svelte-demo-dialog-header-filters"
    title="Filters"
    bind:open={openFilters}
  >
    {#snippet headingLeading()}
      <Stamp tone="primary" emphasis="secondary" shape="square" size="sm">
        <LucideFunnel size={14} />
      </Stamp>
    {/snippet}
    {#snippet trailing()}
      <div class={stack({ direction: "row", gap: "2xs" })}>
        <Button size="sm" emphasis="ghost">Reset</Button>
        <Button size="sm" emphasis="secondary">Apply</Button>
      </div>
    {/snippet}
    Choose the filters you want to apply to the current view. Changes take effect
    immediately once applied.
  </Dialog>

  <Button
    id="svelte-demo-dialog-header-filters-trigger"
    onclick={() => (openFilters = true)}
  >
    Actions, No Subtitle
  </Button>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/dialog/header.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Dialog } from "@pindoba/vue-dialog";
import { Button } from "@pindoba/vue-button";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";

const openNotice = ref(false);
const openFiles = ref(false);
const openAccount = ref(false);
const openNotifications = ref(false);
const openFilters = ref(false);
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'row', flexWrap: 'wrap' })">
    <Dialog
      id="vue-demo-dialog-header-notice"
      title="Scheduled Maintenance"
      subtitle="System will be unavailable on March 15, 2026"
      :open="openNotice"
      :onOpenChange="(o: boolean) => (openNotice = o)"
    >
      All services will be offline from 02:00 to 04:00 UTC. No action is
      required — your data will remain intact throughout the maintenance window.
    </Dialog>

    <Button
      id="vue-demo-dialog-header-notice-trigger"
      :onClick="() => (openNotice = true)"
    >
      With Subtitle
    </Button>

    <Dialog
      id="vue-demo-dialog-header-files"
      title="File Manager"
      subtitle="Browse and manage your project files"
      :open="openFiles"
      :onOpenChange="(o: boolean) => (openFiles = o)"
    >
      <template #headingLeading>
        <Stamp shape="square" background="surface.ground" size="sm">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-folder"
            aria-hidden="true"
          >
            <path
              d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
            />
          </svg>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm">12 files</Badge>
      </template>
      Select a file to preview, rename, move, or remove it from your project
      workspace.
    </Dialog>

    <Button
      id="vue-demo-dialog-header-files-trigger"
      :onClick="() => (openFiles = true)"
    >
      Stamp + Badge
    </Button>

    <Dialog
      id="vue-demo-dialog-header-account"
      title="Account Settings"
      subtitle="Manage your preferences and security"
      :open="openAccount"
      :onOpenChange="(o: boolean) => (openAccount = o)"
    >
      <template #headingLeading>
        <Stamp tone="primary" emphasis="secondary" shape="circle" size="sm">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-user"
            aria-hidden="true"
          >
            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
            <circle cx="12" cy="7" r="4" />
          </svg>
        </Stamp>
      </template>
      <template #subheadingTrailing>
        <Badge size="sm" tone="success">Verified</Badge>
      </template>
      Update your display name, email address, and two-factor authentication
      settings from this panel.
    </Dialog>

    <Button
      id="vue-demo-dialog-header-account-trigger"
      :onClick="() => (openAccount = true)"
    >
      Subheading Slots
    </Button>

    <Dialog
      id="vue-demo-dialog-header-notifications"
      title="Notifications"
      subtitle="3 unread messages"
      :open="openNotifications"
      :onOpenChange="(o: boolean) => (openNotifications = o)"
    >
      <template #headingLeading>
        <Stamp tone="warning" emphasis="secondary" shape="circle" size="sm">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-bell"
            aria-hidden="true"
          >
            <path d="M10.268 21a2 2 0 0 0 3.464 0" />
            <path
              d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
            />
          </svg>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm" tone="warning">3</Badge>
      </template>
      <template #trailing>
        <Button size="sm" emphasis="ghost">Mark all read</Button>
      </template>
      You have new notifications about team activity, mentions, and system
      updates. Review them here or mark everything as read.
    </Dialog>

    <Button
      id="vue-demo-dialog-header-notifications-trigger"
      :onClick="() => (openNotifications = true)"
    >
      Trailing Action
    </Button>

    <Dialog
      id="vue-demo-dialog-header-filters"
      title="Filters"
      :open="openFilters"
      :onOpenChange="(o: boolean) => (openFilters = o)"
    >
      <template #headingLeading>
        <Stamp tone="primary" emphasis="secondary" shape="square" size="sm">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-funnel"
            aria-hidden="true"
          >
            <path
              d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"
            />
          </svg>
        </Stamp>
      </template>
      <template #trailing>
        <div :class="stack({ direction: 'row', gap: '2xs' })">
          <Button size="sm" emphasis="ghost">Reset</Button>
          <Button size="sm" emphasis="secondary">Apply</Button>
        </div>
      </template>
      Choose the filters you want to apply to the current view. Changes take
      effect immediately once applied.
    </Dialog>

    <Button
      id="vue-demo-dialog-header-filters-trigger"
      :onClick="() => (openFilters = true)"
    >
      Actions, No Subtitle
    </Button>
  </div>
</template>

// GENERATED from packages/demos/dialog/header.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Dialog } from "@pindoba/solid-dialog";
import { Button } from "@pindoba/solid-button";
import { Badge } from "@pindoba/solid-badge";
import { Stamp } from "@pindoba/solid-stamp";
import { stack } from "@pindoba/styled-system/patterns";

export default function HeaderDemo() {
  const [openNotice, setOpenNotice] = createSignal(false);
  const [openFiles, setOpenFiles] = createSignal(false);
  const [openAccount, setOpenAccount] = createSignal(false);
  const [openNotifications, setOpenNotifications] = createSignal(false);
  const [openFilters, setOpenFilters] = createSignal(false);
  return (
    <div class={stack({ gap: "md", direction: "row", flexWrap: "wrap" })}>
      <Dialog
        id="solid-demo-dialog-header-notice"
        title="Scheduled Maintenance"
        subtitle="System will be unavailable on March 15, 2026"
        open={openNotice()}
        onOpenChange={setOpenNotice}
      >
        All services will be offline from 02:00 to 04:00 UTC. No action is
        required — your data will remain intact throughout the maintenance
        window.
      </Dialog>

      <Button
        id="solid-demo-dialog-header-notice-trigger"
        onClick={() => setOpenNotice(true)}
      >
        With Subtitle
      </Button>

      <Dialog
        id="solid-demo-dialog-header-files"
        title="File Manager"
        subtitle="Browse and manage your project files"
        open={openFiles()}
        onOpenChange={setOpenFiles}
        headingLeading={
          <Stamp shape="square" background="surface.ground" size="sm">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-folder"
              aria-hidden="true"
            >
              <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
            </svg>
          </Stamp>
        }
        headingTrailing={<Badge size="sm">12 files</Badge>}
      >
        Select a file to preview, rename, move, or remove it from your project
        workspace.
      </Dialog>

      <Button
        id="solid-demo-dialog-header-files-trigger"
        onClick={() => setOpenFiles(true)}
      >
        Stamp + Badge
      </Button>

      <Dialog
        id="solid-demo-dialog-header-account"
        title="Account Settings"
        subtitle="Manage your preferences and security"
        open={openAccount()}
        onOpenChange={setOpenAccount}
        headingLeading={
          <Stamp tone="primary" emphasis="secondary" shape="circle" size="sm">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-user"
              aria-hidden="true"
            >
              <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
              <circle cx="12" cy="7" r="4" />
            </svg>
          </Stamp>
        }
        subheadingTrailing={
          <Badge size="sm" tone="success">
            Verified
          </Badge>
        }
      >
        Update your display name, email address, and two-factor authentication
        settings from this panel.
      </Dialog>

      <Button
        id="solid-demo-dialog-header-account-trigger"
        onClick={() => setOpenAccount(true)}
      >
        Subheading Slots
      </Button>

      <Dialog
        id="solid-demo-dialog-header-notifications"
        title="Notifications"
        subtitle="3 unread messages"
        open={openNotifications()}
        onOpenChange={setOpenNotifications}
        headingLeading={
          <Stamp tone="warning" emphasis="secondary" shape="circle" size="sm">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-bell"
              aria-hidden="true"
            >
              <path d="M10.268 21a2 2 0 0 0 3.464 0" />
              <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
            </svg>
          </Stamp>
        }
        headingTrailing={
          <Badge size="sm" tone="warning">
            3
          </Badge>
        }
        trailing={
          <Button size="sm" emphasis="ghost">
            Mark all read
          </Button>
        }
      >
        You have new notifications about team activity, mentions, and system
        updates. Review them here or mark everything as read.
      </Dialog>

      <Button
        id="solid-demo-dialog-header-notifications-trigger"
        onClick={() => setOpenNotifications(true)}
      >
        Trailing Action
      </Button>

      <Dialog
        id="solid-demo-dialog-header-filters"
        title="Filters"
        open={openFilters()}
        onOpenChange={setOpenFilters}
        headingLeading={
          <Stamp tone="primary" emphasis="secondary" shape="square" size="sm">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-funnel"
              aria-hidden="true"
            >
              <path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" />
            </svg>
          </Stamp>
        }
        trailing={
          <div class={stack({ direction: "row", gap: "2xs" })}>
            <Button size="sm" emphasis="ghost">
              Reset
            </Button>
            <Button size="sm" emphasis="secondary">
              Apply
            </Button>
          </div>
        }
      >
        Choose the filters you want to apply to the current view. Changes take
        effect immediately once applied.
      </Dialog>

      <Button
        id="solid-demo-dialog-header-filters-trigger"
        onClick={() => setOpenFilters(true)}
      >
        Actions, No Subtitle
      </Button>
    </div>
  );
}

Custom header

For headers that aren’t a title/subtitle — a search field, a segmented control, a stepper — the header snippet (Astro: header slot) replaces the Banner with your own content while keeping the header row’s styling and the close button. It renders even when no title/subtitle is set, which makes it the foundation for command-palette-style dialogs.

PreviewCode

---
// GENERATED from packages/demos/dialog/header-input.demo.tsx — edit the source, not this file.
import Dialog from "@pindoba/astro-dialog";
import Button from "@pindoba/astro-button";
import { InputRoot, InputField } from "@pindoba/astro-input";
import Affix from "@pindoba/astro-affix";
import Stamp from "@pindoba/astro-stamp";
import { Search } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";

const commands = [
  "Open file…",
  "Go to line",
  "Toggle terminal",
  "Format document",
  "Rename symbol",
  "Find in files",
];

const query = "";

const results = commands.filter((c) =>
  c.toLowerCase().includes(query.toLowerCase()),
);
---

<div
  class={stack({ gap: "md", direction: "row", flexWrap: "wrap" })}
  data-ir-root="dialog/header-input"
>
  <Dialog
    id="astro-demo-dialog-header-input"
    showCloseButton={false}
    passThrough={{ header: { style: { p: "xs" } } }}
    data-ir="1"
  >
    <InputRoot slot="header" fullWidth>
      <Affix decorative>
        <Stamp emphasis="ghost">
          <Search size={16} />
        </Stamp>
      </Affix>
      <InputField type="search" placeholder="Type a command…" data-ir="6" />
    </InputRoot>
    <div class={stack({ gap: "3xs", p: "xs" })}>
      <!--ir:2-->
      {results.map((result) => (
        <Button
          emphasis="ghost"
          passThrough={{
            root: {
              style: { width: "100%", justifyContent: "flex-start" },
            },
          }}
          data-ir-key={result}
        >
          <Fragment set:html="<!--ir:3-->" />
          {result}
          <Fragment set:html="<!--/ir-->" />
        </Button>
      ))}
      <!--/ir-->
      <!--ir:4-->
      {results.length === 0 && (
        <span>
          No commands match “<!--ir:5-->
          {query}
          <!--/ir-->”.
        </span>
      )}
      <!--/ir-->
    </div>
  </Dialog>

  <Button id="astro-demo-dialog-header-input-trigger" data-ir="7">
    Command Palette
  </Button>
</div>

<script>
  import { hydrate } from "./_client/header-input.ts";

  document
    .querySelectorAll('[data-ir-root="dialog/header-input"]')
    .forEach((root) => hydrate([root]));
</script>

// GENERATED from packages/demos/dialog/header-input.demo.tsx — edit the source, not this file.
import { useMemo, useState } from "react";
import { Dialog } from "@pindoba/react-dialog";
import { Button } from "@pindoba/react-button";
import { InputRoot, InputField } from "@pindoba/react-input";
import { Affix } from "@pindoba/react-affix";
import { Stamp } from "@pindoba/react-stamp";
import { Search } from "lucide-react";
import { stack } from "@pindoba/styled-system/patterns";

const commands = [
  "Open file…",
  "Go to line",
  "Toggle terminal",
  "Format document",
  "Rename symbol",
  "Find in files",
];
export default function HeaderInputDemo() {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const results = useMemo(
    () => commands.filter((c) => c.toLowerCase().includes(query.toLowerCase())),
    [query],
  );

  return (
    <div className={stack({ gap: "md", direction: "row", flexWrap: "wrap" })}>
      <Dialog
        id="react-demo-dialog-header-input"
        open={open}
        onOpenChange={setOpen}
        showCloseButton={false}
        passThrough={{ header: { style: { p: "xs" } } }}
        header={
          <InputRoot fullWidth>
            <Affix decorative>
              <Stamp emphasis="ghost">
                <Search size={16} />
              </Stamp>
            </Affix>
            <InputField
              type="search"
              placeholder="Type a command…"
              value={query}
              onChange={(e) => setQuery(e.currentTarget.value)}
            />
          </InputRoot>
        }
      >
        <div className={stack({ gap: "3xs", p: "xs" })}>
          {results.map((result) => (
            <Button
              key={result}
              emphasis="ghost"
              passThrough={{
                root: {
                  style: { width: "100%", justifyContent: "flex-start" },
                },
              }}
            >
              {result}
            </Button>
          ))}
          {results.length === 0 && <span>No commands match “{query}”.</span>}
        </div>
      </Dialog>

      <Button
        id="react-demo-dialog-header-input-trigger"
        onClick={() => setOpen(true)}
      >
        Command Palette
      </Button>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/dialog/header-input.demo.tsx — edit the source, not this file.
  import Dialog from "@pindoba/svelte-dialog";
  import Button from "@pindoba/svelte-button";
  import { InputRoot, InputField } from "@pindoba/svelte-input";
  import Affix from "@pindoba/svelte-affix";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideSearch from "@lucide/svelte/icons/search";
  import { stack } from "@pindoba/styled-system/patterns";

  const commands = [
    "Open file…",
    "Go to line",
    "Toggle terminal",
    "Format document",
    "Rename symbol",
    "Find in files",
  ];

  let open = $state(false);
  let query = $state("");

  const results = $derived(
    commands.filter((c) => c.toLowerCase().includes(query.toLowerCase())),
  );
</script>

<div class={stack({ gap: "md", direction: "row", flexWrap: "wrap" })}>
  <Dialog
    id="svelte-demo-dialog-header-input"
    bind:open
    showCloseButton={false}
    passThrough={{ header: { style: { p: "xs" } } }}
  >
    {#snippet header()}
      <InputRoot fullWidth>
        <Affix decorative>
          <Stamp emphasis="ghost">
            <LucideSearch size={16} />
          </Stamp>
        </Affix>
        <InputField
          type="search"
          placeholder="Type a command…"
          bind:value={query}
        ></InputField>
      </InputRoot>
    {/snippet}
    <div class={stack({ gap: "3xs", p: "xs" })}>
      {#each results as result (result)}
        <Button
          emphasis="ghost"
          passThrough={{
            root: {
              style: { width: "100%", justifyContent: "flex-start" },
            },
          }}
        >
          {result}
        </Button>
      {/each}
      {#if results.length === 0}
        <span>
          No commands match “{query}”.
        </span>
      {/if}
    </div>
  </Dialog>

  <Button
    id="svelte-demo-dialog-header-input-trigger"
    onclick={() => (open = true)}
  >
    Command Palette
  </Button>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/dialog/header-input.demo.tsx — edit the source, not this file.
import { computed, ref } from "vue";
import { Dialog } from "@pindoba/vue-dialog";
import { Button } from "@pindoba/vue-button";
import { InputRoot, InputField } from "@pindoba/vue-input";
import { Affix } from "@pindoba/vue-affix";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";

const commands = [
  "Open file…",
  "Go to line",
  "Toggle terminal",
  "Format document",
  "Rename symbol",
  "Find in files",
];

const open = ref(false);
const query = ref("");

const results = computed(() =>
  commands.filter((c) => c.toLowerCase().includes(query.value.toLowerCase())),
);
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'row', flexWrap: 'wrap' })">
    <Dialog
      id="vue-demo-dialog-header-input"
      :open="open"
      :onOpenChange="(o: boolean) => (open = o)"
      :showCloseButton="false"
      :passThrough="{ header: { style: { p: 'xs' } } }"
    >
      <template #header>
        <InputRoot :fullWidth="true">
          <Affix :decorative="true">
            <Stamp emphasis="ghost">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-search"
                aria-hidden="true"
              >
                <path d="m21 21-4.34-4.34" />
                <circle cx="11" cy="11" r="8" />
              </svg>
            </Stamp>
          </Affix>
          <InputField
            type="search"
            placeholder="Type a command…"
            :value="query"
            :onInput="
              (e: Event) => (query = (e.target as HTMLInputElement).value)
            "
          ></InputField>
        </InputRoot>
      </template>
      <div :class="stack({ gap: '3xs', p: 'xs' })">
        <Button
          v-for="result in results"
          :key="result"
          emphasis="ghost"
          :passThrough="{
            root: {
              style: { width: '100%', justifyContent: 'flex-start' },
            },
          }"
        >
          {{ result }}
        </Button>
        <span v-if="results.length === 0"
          >No commands match “{{ query }}”.</span
        >
      </div>
    </Dialog>

    <Button
      id="vue-demo-dialog-header-input-trigger"
      :onClick="() => (open = true)"
    >
      Command Palette
    </Button>
  </div>
</template>

// GENERATED from packages/demos/dialog/header-input.demo.tsx — edit the source, not this file.
import { createMemo, createSignal, For, Show } from "solid-js";
import { Dialog } from "@pindoba/solid-dialog";
import { Button } from "@pindoba/solid-button";
import { InputRoot, InputField } from "@pindoba/solid-input";
import { Affix } from "@pindoba/solid-affix";
import { Stamp } from "@pindoba/solid-stamp";
import { stack } from "@pindoba/styled-system/patterns";

const commands = [
  "Open file…",
  "Go to line",
  "Toggle terminal",
  "Format document",
  "Rename symbol",
  "Find in files",
];
export default function HeaderInputDemo() {
  const [open, setOpen] = createSignal(false);
  const [query, setQuery] = createSignal("");
  const results = createMemo(() =>
    commands.filter((c) => c.toLowerCase().includes(query().toLowerCase())),
  );

  return (
    <div class={stack({ gap: "md", direction: "row", flexWrap: "wrap" })}>
      <Dialog
        id="solid-demo-dialog-header-input"
        open={open()}
        onOpenChange={setOpen}
        showCloseButton={false}
        passThrough={{ header: { style: { p: "xs" } } }}
        header={
          <InputRoot fullWidth>
            <Affix decorative>
              <Stamp emphasis="ghost">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-search"
                  aria-hidden="true"
                >
                  <path d="m21 21-4.34-4.34" />
                  <circle cx="11" cy="11" r="8" />
                </svg>
              </Stamp>
            </Affix>
            <InputField
              type="search"
              placeholder="Type a command…"
              value={query()}
              onInput={(e) => setQuery(e.currentTarget.value)}
            />
          </InputRoot>
        }
      >
        <div class={stack({ gap: "3xs", p: "xs" })}>
          <For each={results()}>
            {(result) => (
              <Button
                emphasis="ghost"
                passThrough={{
                  root: {
                    style: { width: "100%", justifyContent: "flex-start" },
                  },
                }}
              >
                {result}
              </Button>
            )}
          </For>
          <Show when={results().length === 0}>
            <span>No commands match “{query()}”.</span>
          </Show>
        </div>
      </Dialog>

      <Button
        id="solid-demo-dialog-header-input-trigger"
        onClick={() => setOpen(true)}
      >
        Command Palette
      </Button>
    </div>
  );
}

Card

The dialog is card-based: the <dialog> element keeps its own surface, positioning and animation, and inside it the dialog renders a Card. By default that card is invisible — transparent, no border or shadow, corners following the dialog’s — and divided, so hairlines separate the header, body and footer.

title and subtitle become the card heading and subheading, keeping the ids the <dialog>’s aria-labelledby / aria-describedby point at.
The close button sits in the header’s trailing slot, always last: after card.trailing, then the dialog’s own trailing.
The children are the card content.
A footer is new: footer, footerLeading and footerTrailing — Svelte snippets, React props, Vue slots (#footer, #footerLeading, #footerTrailing), Astro named slots (footer, footer-leading, footer-trailing).

The card prop takes the Card props that make sense inside a dialog — contentBackground / content, divided, size, leading, footer, passThrough… The surface props that belong to the <dialog> itself (background, border, shadow, radius) stay on Dialog, and the heading comes from title / subtitle. Pair the dialog’s background with card.contentBackground for a shell with an inset body:

PreviewCode

---
// GENERATED from packages/demos/dialog/inset.demo.tsx — edit the source, not this file.
import Dialog from "@pindoba/astro-dialog";
import Button from "@pindoba/astro-button";
import { css } from "@pindoba/styled-system/css";
import { hstack, stack } from "@pindoba/styled-system/patterns";

const services = [
  { name: "billing-worker", lastUsed: "4 minutes ago" },
  { name: "webhooks-relay", lastUsed: "1 hour ago" },
  { name: "nightly-export", lastUsed: "yesterday, 02:00 UTC" },
];
const list = css({ listStyle: "none", margin: "0", padding: "0" });
const row = css({
  display: "flex",
  justifyContent: "space-between",
  gap: "sm",
  paddingBlock: "2xs",
});
const muted = css({ color: "panel.text.muted" });
---

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <Dialog
    id="astro-demo-dialog-inset"
    title="Rotate production API key"
    subtitle="These services still use the current key."
    background="surface.base"
    card={{ contentBackground: "surface.peak" }}
  >
    <span slot="footer-leading" class={muted}>
      The old key stays valid for 24 hours.
    </span>
    <div slot="footer-trailing" class={hstack({ gap: "xs" })}>
      <Button id="astro-demo-dialog-inset-trigger" emphasis="ghost">
        Cancel
      </Button>
      <Button id="astro-demo-dialog-inset-trigger-2">Rotate key</Button>
    </div>
    <ul class={list}>
      {services.map((service) => (
        <li class={row}>
          <span>{service.name}</span>
          <span class={muted}>{service.lastUsed}</span>
        </li>
      ))}
    </ul>
  </Dialog>

  <Button id="astro-demo-dialog-inset-trigger-3">Rotate key…</Button>
</div>

<script>
  document
    .getElementById("astro-demo-dialog-inset-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.close("astro-demo-dialog-inset");
    });
  document
    .getElementById("astro-demo-dialog-inset-trigger-2")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.close("astro-demo-dialog-inset");
    });
  document
    .getElementById("astro-demo-dialog-inset-trigger-3")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-inset");
    });
</script>

// GENERATED from packages/demos/dialog/inset.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Dialog } from "@pindoba/react-dialog";
import { Button } from "@pindoba/react-button";
import { css } from "@pindoba/styled-system/css";
import { hstack, stack } from "@pindoba/styled-system/patterns";

const services = [
  { name: "billing-worker", lastUsed: "4 minutes ago" },
  { name: "webhooks-relay", lastUsed: "1 hour ago" },
  { name: "nightly-export", lastUsed: "yesterday, 02:00 UTC" },
];
const list = css({ listStyle: "none", margin: "0", padding: "0" });
const row = css({
  display: "flex",
  justifyContent: "space-between",
  gap: "sm",
  paddingBlock: "2xs",
});
const muted = css({ color: "panel.text.muted" });
export default function InsetDemo() {
  const [open, setOpen] = useState(false);
  return (
    <div className={stack({ gap: "md", direction: "column", align: "start" })}>
      <Dialog
        id="react-demo-dialog-inset"
        title="Rotate production API key"
        subtitle="These services still use the current key."
        background="surface.base"
        card={{ contentBackground: "surface.peak" }}
        open={open}
        onOpenChange={setOpen}
        footerLeading={
          <span className={muted}>The old key stays valid for 24 hours.</span>
        }
        footerTrailing={
          <div className={hstack({ gap: "xs" })}>
            <Button
              id="react-demo-dialog-inset-trigger"
              emphasis="ghost"
              onClick={() => setOpen(false)}
            >
              Cancel
            </Button>
            <Button
              id="react-demo-dialog-inset-trigger-2"
              onClick={() => setOpen(false)}
            >
              Rotate key
            </Button>
          </div>
        }
      >
        <ul className={list}>
          {services.map((service) => (
            <li key={service.name} className={row}>
              <span>{service.name}</span>
              <span className={muted}>{service.lastUsed}</span>
            </li>
          ))}
        </ul>
      </Dialog>

      <Button
        id="react-demo-dialog-inset-trigger-3"
        onClick={() => setOpen(true)}
      >
        Rotate key…
      </Button>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/dialog/inset.demo.tsx — edit the source, not this file.
  import Dialog from "@pindoba/svelte-dialog";
  import Button from "@pindoba/svelte-button";
  import { css } from "@pindoba/styled-system/css";
  import { hstack, stack } from "@pindoba/styled-system/patterns";

  const services = [
    { name: "billing-worker", lastUsed: "4 minutes ago" },
    { name: "webhooks-relay", lastUsed: "1 hour ago" },
    { name: "nightly-export", lastUsed: "yesterday, 02:00 UTC" },
  ];
  const list = css({ listStyle: "none", margin: "0", padding: "0" });
  const row = css({
    display: "flex",
    justifyContent: "space-between",
    gap: "sm",
    paddingBlock: "2xs",
  });
  const muted = css({ color: "panel.text.muted" });

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

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <Dialog
    id="svelte-demo-dialog-inset"
    title="Rotate production API key"
    subtitle="These services still use the current key."
    background="surface.base"
    card={{ contentBackground: "surface.peak" }}
    bind:open
  >
    {#snippet footerLeading()}
      <span class={muted}> The old key stays valid for 24 hours. </span>
    {/snippet}
    {#snippet footerTrailing()}
      <div class={hstack({ gap: "xs" })}>
        <Button
          id="svelte-demo-dialog-inset-trigger"
          emphasis="ghost"
          onclick={() => (open = false)}
        >
          Cancel
        </Button>
        <Button
          id="svelte-demo-dialog-inset-trigger-2"
          onclick={() => (open = false)}
        >
          Rotate key
        </Button>
      </div>
    {/snippet}
    <ul class={list}>
      {#each services as service (service.name)}
        <li class={row}>
          <span>
            {service.name}
          </span>
          <span class={muted}>
            {service.lastUsed}
          </span>
        </li>
      {/each}
    </ul>
  </Dialog>

  <Button id="svelte-demo-dialog-inset-trigger-3" onclick={() => (open = true)}>
    Rotate key…
  </Button>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/dialog/inset.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Dialog } from "@pindoba/vue-dialog";
import { Button } from "@pindoba/vue-button";
import { css } from "@pindoba/styled-system/css";
import { hstack, stack } from "@pindoba/styled-system/patterns";

const services = [
  { name: "billing-worker", lastUsed: "4 minutes ago" },
  { name: "webhooks-relay", lastUsed: "1 hour ago" },
  { name: "nightly-export", lastUsed: "yesterday, 02:00 UTC" },
];
const list = css({ listStyle: "none", margin: "0", padding: "0" });
const row = css({
  display: "flex",
  justifyContent: "space-between",
  gap: "sm",
  paddingBlock: "2xs",
});
const muted = css({ color: "panel.text.muted" });

const open = ref(false);
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', align: 'start' })">
    <Dialog
      id="vue-demo-dialog-inset"
      title="Rotate production API key"
      subtitle="These services still use the current key."
      background="surface.base"
      :card="{ contentBackground: 'surface.peak' }"
      :open="open"
      :onOpenChange="(o: boolean) => (open = o)"
    >
      <template #footerLeading>
        <span :class="muted">The old key stays valid for 24 hours.</span>
      </template>
      <template #footerTrailing>
        <div :class="hstack({ gap: 'xs' })">
          <Button
            id="vue-demo-dialog-inset-trigger"
            emphasis="ghost"
            :onClick="() => (open = false)"
          >
            Cancel
          </Button>
          <Button
            id="vue-demo-dialog-inset-trigger-2"
            :onClick="() => (open = false)"
          >
            Rotate key
          </Button>
        </div>
      </template>
      <ul :class="list">
        <li v-for="service in services" :key="service.name" :class="row">
          <span>{{ service.name }}</span>
          <span :class="muted">{{ service.lastUsed }}</span>
        </li>
      </ul>
    </Dialog>

    <Button id="vue-demo-dialog-inset-trigger-3" :onClick="() => (open = true)">
      Rotate key…
    </Button>
  </div>
</template>

// GENERATED from packages/demos/dialog/inset.demo.tsx — edit the source, not this file.
import { createSignal, For } from "solid-js";
import { Dialog } from "@pindoba/solid-dialog";
import { Button } from "@pindoba/solid-button";
import { css } from "@pindoba/styled-system/css";
import { hstack, stack } from "@pindoba/styled-system/patterns";

const services = [
  { name: "billing-worker", lastUsed: "4 minutes ago" },
  { name: "webhooks-relay", lastUsed: "1 hour ago" },
  { name: "nightly-export", lastUsed: "yesterday, 02:00 UTC" },
];
const list = css({ listStyle: "none", margin: "0", padding: "0" });
const row = css({
  display: "flex",
  justifyContent: "space-between",
  gap: "sm",
  paddingBlock: "2xs",
});
const muted = css({ color: "panel.text.muted" });
export default function InsetDemo() {
  const [open, setOpen] = createSignal(false);
  return (
    <div class={stack({ gap: "md", direction: "column", align: "start" })}>
      <Dialog
        id="solid-demo-dialog-inset"
        title="Rotate production API key"
        subtitle="These services still use the current key."
        background="surface.base"
        card={{ contentBackground: "surface.peak" }}
        open={open()}
        onOpenChange={setOpen}
        footerLeading={
          <span class={muted}>The old key stays valid for 24 hours.</span>
        }
        footerTrailing={
          <div class={hstack({ gap: "xs" })}>
            <Button
              id="solid-demo-dialog-inset-trigger"
              emphasis="ghost"
              onClick={() => setOpen(false)}
            >
              Cancel
            </Button>
            <Button
              id="solid-demo-dialog-inset-trigger-2"
              onClick={() => setOpen(false)}
            >
              Rotate key
            </Button>
          </div>
        }
      >
        <ul class={list}>
          <For each={services}>
            {(service) => (
              <li class={row}>
                <span>{service.name}</span>
                <span class={muted}>{service.lastUsed}</span>
              </li>
            )}
          </For>
        </ul>
      </Dialog>

      <Button
        id="solid-demo-dialog-inset-trigger-3"
        onClick={() => setOpen(true)}
      >
        Rotate key…
      </Button>
    </div>
  );
}

card={false} renders the pre-card bare wrapper. Popovers built on Dialog (data-popover — Popover, Tooltip, Menu, Select, Combobox) render bare unless they are handed a card object, so their DOM is unchanged.

<Dialog title="Settings" card={false} bind:open>…</Dialog>

Migrating from the pre-card dialog: the wrapper <div> inside the <dialog> is now a Card ([data-component="card"]) — passThrough.wrapper styles the card root, passThrough.content the card content and passThrough.header the header Banner. The header’s bottom border is now the card’s divided hairline. Footer actions you used to place at the end of the body belong in the new footer slots.

Drawer

The drawer prop positions the dialog along an edge of the screen. Drawers animate in from their respective side and default to removing the border radius on the attached edge.

PreviewCode

---
// GENERATED from packages/demos/dialog/drawer.demo.tsx — edit the source, not this file.
import Dialog from "@pindoba/astro-dialog";
import Button from "@pindoba/astro-button";
import Badge from "@pindoba/astro-badge";
import Stamp from "@pindoba/astro-stamp";
import { PanelRight, PanelLeft, PanelTop, PanelBottom } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
  <Dialog id="astro-demo-drawer-right" title="Right Drawer" drawer="right">
    <Stamp
      slot="heading-leading"
      shape="square"
      size="sm"
      tone="primary"
      emphasis="secondary"
    >
      <PanelRight size={14} />
    </Stamp>
    <Badge slot="heading-trailing" size="sm">
      right
    </Badge>
    This drawer slides in from the right edge of the screen.
  </Dialog>

  <Dialog id="astro-demo-drawer-left" title="Left Drawer" drawer="left">
    <Stamp
      slot="heading-leading"
      shape="square"
      size="sm"
      tone="primary"
      emphasis="secondary"
    >
      <PanelLeft size={14} />
    </Stamp>
    <Badge slot="heading-trailing" size="sm">
      left
    </Badge>
    This drawer slides in from the left edge of the screen.
  </Dialog>

  <Dialog id="astro-demo-drawer-top" title="Top Drawer" drawer="top">
    <Stamp
      slot="heading-leading"
      shape="square"
      size="sm"
      tone="primary"
      emphasis="secondary"
    >
      <PanelTop size={14} />
    </Stamp>
    <Badge slot="heading-trailing" size="sm">
      top
    </Badge>
    This drawer slides in from the top edge of the screen.
  </Dialog>

  <Dialog id="astro-demo-drawer-bottom" title="Bottom Drawer" drawer="bottom">
    <Stamp
      slot="heading-leading"
      shape="square"
      size="sm"
      tone="primary"
      emphasis="secondary"
    >
      <PanelBottom size={14} />
    </Stamp>
    <Badge slot="heading-trailing" size="sm">
      bottom
    </Badge>
    This drawer slides in from the bottom edge of the screen.
  </Dialog>

  <Button id="astro-demo-drawer-right-trigger" emphasis="secondary">
    Right
  </Button>
  <Button id="astro-demo-drawer-left-trigger" emphasis="secondary">
    Left
  </Button>
  <Button id="astro-demo-drawer-top-trigger" emphasis="secondary">
    Top
  </Button>
  <Button id="astro-demo-drawer-bottom-trigger" emphasis="secondary">
    Bottom
  </Button>
</div>

<script>
  document
    .getElementById("astro-demo-drawer-right-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-drawer-right");
    });
  document
    .getElementById("astro-demo-drawer-left-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-drawer-left");
    });
  document
    .getElementById("astro-demo-drawer-top-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-drawer-top");
    });
  document
    .getElementById("astro-demo-drawer-bottom-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-drawer-bottom");
    });
</script>

// GENERATED from packages/demos/dialog/drawer.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Dialog } from "@pindoba/react-dialog";
import { Button } from "@pindoba/react-button";
import { Badge } from "@pindoba/react-badge";
import { Stamp } from "@pindoba/react-stamp";
import { PanelRight } from "lucide-react";
import { PanelLeft } from "lucide-react";
import { PanelTop } from "lucide-react";
import { PanelBottom } from "lucide-react";
import { stack } from "@pindoba/styled-system/patterns";

export default function DrawerDemo() {
  const [openRight, setOpenRight] = useState(false);
  const [openLeft, setOpenLeft] = useState(false);
  const [openTop, setOpenTop] = useState(false);
  const [openBottom, setOpenBottom] = useState(false);
  return (
    <div className={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
      <Dialog
        id="react-demo-drawer-right"
        title="Right Drawer"
        open={openRight}
        onOpenChange={setOpenRight}
        drawer="right"
        headingLeading={
          <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
            <PanelRight size={14} />
          </Stamp>
        }
        headingTrailing={<Badge size="sm">right</Badge>}
      >
        This drawer slides in from the right edge of the screen.
      </Dialog>

      <Dialog
        id="react-demo-drawer-left"
        title="Left Drawer"
        open={openLeft}
        onOpenChange={setOpenLeft}
        drawer="left"
        headingLeading={
          <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
            <PanelLeft size={14} />
          </Stamp>
        }
        headingTrailing={<Badge size="sm">left</Badge>}
      >
        This drawer slides in from the left edge of the screen.
      </Dialog>

      <Dialog
        id="react-demo-drawer-top"
        title="Top Drawer"
        open={openTop}
        onOpenChange={setOpenTop}
        drawer="top"
        headingLeading={
          <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
            <PanelTop size={14} />
          </Stamp>
        }
        headingTrailing={<Badge size="sm">top</Badge>}
      >
        This drawer slides in from the top edge of the screen.
      </Dialog>

      <Dialog
        id="react-demo-drawer-bottom"
        title="Bottom Drawer"
        open={openBottom}
        onOpenChange={setOpenBottom}
        drawer="bottom"
        headingLeading={
          <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
            <PanelBottom size={14} />
          </Stamp>
        }
        headingTrailing={<Badge size="sm">bottom</Badge>}
      >
        This drawer slides in from the bottom edge of the screen.
      </Dialog>

      <Button
        id="react-demo-drawer-right-trigger"
        onClick={() => setOpenRight(true)}
        emphasis="secondary"
      >
        Right
      </Button>
      <Button
        id="react-demo-drawer-left-trigger"
        onClick={() => setOpenLeft(true)}
        emphasis="secondary"
      >
        Left
      </Button>
      <Button
        id="react-demo-drawer-top-trigger"
        onClick={() => setOpenTop(true)}
        emphasis="secondary"
      >
        Top
      </Button>
      <Button
        id="react-demo-drawer-bottom-trigger"
        onClick={() => setOpenBottom(true)}
        emphasis="secondary"
      >
        Bottom
      </Button>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/dialog/drawer.demo.tsx — edit the source, not this file.
  import Dialog from "@pindoba/svelte-dialog";
  import Button from "@pindoba/svelte-button";
  import Badge from "@pindoba/svelte-badge";
  import Stamp from "@pindoba/svelte-stamp";
  import LucidePanelRight from "@lucide/svelte/icons/panel-right";
  import LucidePanelLeft from "@lucide/svelte/icons/panel-left";
  import LucidePanelTop from "@lucide/svelte/icons/panel-top";
  import LucidePanelBottom from "@lucide/svelte/icons/panel-bottom";
  import { stack } from "@pindoba/styled-system/patterns";

  let openRight = $state(false);
  let openLeft = $state(false);
  let openTop = $state(false);
  let openBottom = $state(false);
</script>

<div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
  <Dialog
    id="svelte-demo-drawer-right"
    title="Right Drawer"
    bind:open={openRight}
    drawer="right"
  >
    {#snippet headingLeading()}
      <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
        <LucidePanelRight size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm">right</Badge>
    {/snippet}
    This drawer slides in from the right edge of the screen.
  </Dialog>

  <Dialog
    id="svelte-demo-drawer-left"
    title="Left Drawer"
    bind:open={openLeft}
    drawer="left"
  >
    {#snippet headingLeading()}
      <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
        <LucidePanelLeft size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm">left</Badge>
    {/snippet}
    This drawer slides in from the left edge of the screen.
  </Dialog>

  <Dialog
    id="svelte-demo-drawer-top"
    title="Top Drawer"
    bind:open={openTop}
    drawer="top"
  >
    {#snippet headingLeading()}
      <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
        <LucidePanelTop size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm">top</Badge>
    {/snippet}
    This drawer slides in from the top edge of the screen.
  </Dialog>

  <Dialog
    id="svelte-demo-drawer-bottom"
    title="Bottom Drawer"
    bind:open={openBottom}
    drawer="bottom"
  >
    {#snippet headingLeading()}
      <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
        <LucidePanelBottom size={14} />
      </Stamp>
    {/snippet}
    {#snippet headingTrailing()}
      <Badge size="sm">bottom</Badge>
    {/snippet}
    This drawer slides in from the bottom edge of the screen.
  </Dialog>

  <Button
    id="svelte-demo-drawer-right-trigger"
    onclick={() => (openRight = true)}
    emphasis="secondary"
  >
    Right
  </Button>
  <Button
    id="svelte-demo-drawer-left-trigger"
    onclick={() => (openLeft = true)}
    emphasis="secondary"
  >
    Left
  </Button>
  <Button
    id="svelte-demo-drawer-top-trigger"
    onclick={() => (openTop = true)}
    emphasis="secondary"
  >
    Top
  </Button>
  <Button
    id="svelte-demo-drawer-bottom-trigger"
    onclick={() => (openBottom = true)}
    emphasis="secondary"
  >
    Bottom
  </Button>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/dialog/drawer.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Dialog } from "@pindoba/vue-dialog";
import { Button } from "@pindoba/vue-button";
import { Badge } from "@pindoba/vue-badge";
import { Stamp } from "@pindoba/vue-stamp";
import { stack } from "@pindoba/styled-system/patterns";

const openRight = ref(false);
const openLeft = ref(false);
const openTop = ref(false);
const openBottom = ref(false);
</script>

<template>
  <div :class="stack({ gap: 'sm', direction: 'row', flexWrap: 'wrap' })">
    <Dialog
      id="vue-demo-drawer-right"
      title="Right Drawer"
      :open="openRight"
      :onOpenChange="(o: boolean) => (openRight = o)"
      drawer="right"
    >
      <template #headingLeading>
        <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-panel-right"
            aria-hidden="true"
          >
            <rect width="18" height="18" x="3" y="3" rx="2" />
            <path d="M15 3v18" />
          </svg>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm">right</Badge>
      </template>
      This drawer slides in from the right edge of the screen.
    </Dialog>

    <Dialog
      id="vue-demo-drawer-left"
      title="Left Drawer"
      :open="openLeft"
      :onOpenChange="(o: boolean) => (openLeft = o)"
      drawer="left"
    >
      <template #headingLeading>
        <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-panel-left"
            aria-hidden="true"
          >
            <rect width="18" height="18" x="3" y="3" rx="2" />
            <path d="M9 3v18" />
          </svg>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm">left</Badge>
      </template>
      This drawer slides in from the left edge of the screen.
    </Dialog>

    <Dialog
      id="vue-demo-drawer-top"
      title="Top Drawer"
      :open="openTop"
      :onOpenChange="(o: boolean) => (openTop = o)"
      drawer="top"
    >
      <template #headingLeading>
        <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-panel-top"
            aria-hidden="true"
          >
            <rect width="18" height="18" x="3" y="3" rx="2" />
            <path d="M3 9h18" />
          </svg>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm">top</Badge>
      </template>
      This drawer slides in from the top edge of the screen.
    </Dialog>

    <Dialog
      id="vue-demo-drawer-bottom"
      title="Bottom Drawer"
      :open="openBottom"
      :onOpenChange="(o: boolean) => (openBottom = o)"
      drawer="bottom"
    >
      <template #headingLeading>
        <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-panel-bottom"
            aria-hidden="true"
          >
            <rect width="18" height="18" x="3" y="3" rx="2" />
            <path d="M3 15h18" />
          </svg>
        </Stamp>
      </template>
      <template #headingTrailing>
        <Badge size="sm">bottom</Badge>
      </template>
      This drawer slides in from the bottom edge of the screen.
    </Dialog>

    <Button
      id="vue-demo-drawer-right-trigger"
      :onClick="() => (openRight = true)"
      emphasis="secondary"
    >
      Right
    </Button>
    <Button
      id="vue-demo-drawer-left-trigger"
      :onClick="() => (openLeft = true)"
      emphasis="secondary"
    >
      Left
    </Button>
    <Button
      id="vue-demo-drawer-top-trigger"
      :onClick="() => (openTop = true)"
      emphasis="secondary"
    >
      Top
    </Button>
    <Button
      id="vue-demo-drawer-bottom-trigger"
      :onClick="() => (openBottom = true)"
      emphasis="secondary"
    >
      Bottom
    </Button>
  </div>
</template>

// GENERATED from packages/demos/dialog/drawer.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Dialog } from "@pindoba/solid-dialog";
import { Button } from "@pindoba/solid-button";
import { Badge } from "@pindoba/solid-badge";
import { Stamp } from "@pindoba/solid-stamp";
import { stack } from "@pindoba/styled-system/patterns";

export default function DrawerDemo() {
  const [openRight, setOpenRight] = createSignal(false);
  const [openLeft, setOpenLeft] = createSignal(false);
  const [openTop, setOpenTop] = createSignal(false);
  const [openBottom, setOpenBottom] = createSignal(false);
  return (
    <div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
      <Dialog
        id="solid-demo-drawer-right"
        title="Right Drawer"
        open={openRight()}
        onOpenChange={setOpenRight}
        drawer="right"
        headingLeading={
          <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-panel-right"
              aria-hidden="true"
            >
              <rect width="18" height="18" x="3" y="3" rx="2" />
              <path d="M15 3v18" />
            </svg>
          </Stamp>
        }
        headingTrailing={<Badge size="sm">right</Badge>}
      >
        This drawer slides in from the right edge of the screen.
      </Dialog>

      <Dialog
        id="solid-demo-drawer-left"
        title="Left Drawer"
        open={openLeft()}
        onOpenChange={setOpenLeft}
        drawer="left"
        headingLeading={
          <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-panel-left"
              aria-hidden="true"
            >
              <rect width="18" height="18" x="3" y="3" rx="2" />
              <path d="M9 3v18" />
            </svg>
          </Stamp>
        }
        headingTrailing={<Badge size="sm">left</Badge>}
      >
        This drawer slides in from the left edge of the screen.
      </Dialog>

      <Dialog
        id="solid-demo-drawer-top"
        title="Top Drawer"
        open={openTop()}
        onOpenChange={setOpenTop}
        drawer="top"
        headingLeading={
          <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-panel-top"
              aria-hidden="true"
            >
              <rect width="18" height="18" x="3" y="3" rx="2" />
              <path d="M3 9h18" />
            </svg>
          </Stamp>
        }
        headingTrailing={<Badge size="sm">top</Badge>}
      >
        This drawer slides in from the top edge of the screen.
      </Dialog>

      <Dialog
        id="solid-demo-drawer-bottom"
        title="Bottom Drawer"
        open={openBottom()}
        onOpenChange={setOpenBottom}
        drawer="bottom"
        headingLeading={
          <Stamp shape="square" size="sm" tone="primary" emphasis="secondary">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-panel-bottom"
              aria-hidden="true"
            >
              <rect width="18" height="18" x="3" y="3" rx="2" />
              <path d="M3 15h18" />
            </svg>
          </Stamp>
        }
        headingTrailing={<Badge size="sm">bottom</Badge>}
      >
        This drawer slides in from the bottom edge of the screen.
      </Dialog>

      <Button
        id="solid-demo-drawer-right-trigger"
        onClick={() => setOpenRight(true)}
        emphasis="secondary"
      >
        Right
      </Button>
      <Button
        id="solid-demo-drawer-left-trigger"
        onClick={() => setOpenLeft(true)}
        emphasis="secondary"
      >
        Left
      </Button>
      <Button
        id="solid-demo-drawer-top-trigger"
        onClick={() => setOpenTop(true)}
        emphasis="secondary"
      >
        Top
      </Button>
      <Button
        id="solid-demo-drawer-bottom-trigger"
        onClick={() => setOpenBottom(true)}
        emphasis="secondary"
      >
        Bottom
      </Button>
    </div>
  );
}

Sizes

size picks the dialog’s width from a preset: "sm" (400px), "md" (540px, the default), "lg" (720px) or "xl" (960px). A preset never gets wider than the viewport minus a gutter on each side (16px on phones, 24px from 768px up), so it never overflows a small screen.

size="viewport" covers almost the whole screen. It keeps that gutter on every side, so the backdrop and the page stay visible around it, and it keeps its rounded corners. Its height is fixed, so the body can fill it: a child with flex: 1 or height: 100% stretches to the full height. The body scrolls on its own while the header and footer stay put. Use it for file viewers, previews and editors that need the room.

size combines with fullscreen, and fullscreen wins below its breakpoint. size="viewport" fullscreen="sm" is full screen on phones and a near-full-viewport dialog above 640px. A left or right drawer uses "sm", "lg" and "xl" as its width. Top and bottom drawers already span the screen, so they ignore size, and so does "viewport" on any drawer; both log a warning in development.

PreviewCode

---
// GENERATED from packages/demos/dialog/sizes.demo.tsx — edit the source, not this file.
import Dialog from "@pindoba/astro-dialog";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
---

<div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
  <Dialog
    id="astro-demo-dialog-size-sm"
    title="Small"
    subtitle="400px wide"
    size="sm"
  >
    A short confirmation or a single field.
  </Dialog>

  <Dialog
    id="astro-demo-dialog-size-md"
    title="Medium"
    subtitle="540px wide, the default"
    size="md"
  >
    The default size, for most forms and messages.
  </Dialog>

  <Dialog
    id="astro-demo-dialog-size-lg"
    title="Large"
    subtitle="720px wide"
    size="lg"
  >
    Room for a two-column form or a short table.
  </Dialog>

  <Dialog
    id="astro-demo-dialog-size-xl"
    title="Extra large"
    subtitle="960px wide"
    size="xl"
  >
    Wide content such as a data table or a side-by-side comparison.
  </Dialog>

  <Dialog
    id="astro-demo-dialog-size-viewport"
    title="report-q3.pdf"
    subtitle="Covers the viewport, minus a gutter on every side"
    size="viewport"
  >
    <div
      class={css({
        flex: "1",
        display: "grid",
        placeItems: "center",
        minHeight: "0",
        borderRadius: "md",
        borderWidth: "1px",
        borderStyle: "dashed",
        borderColor: "neutral.border.muted",
        background: "neutral.surface.ground",
      })}
    >
      The file preview fills the rest of the height.
    </div>
  </Dialog>

  <Button id="astro-demo-dialog-size-sm-trigger" emphasis="secondary">
    Small
  </Button>
  <Button id="astro-demo-dialog-size-md-trigger" emphasis="secondary">
    Medium
  </Button>
  <Button id="astro-demo-dialog-size-lg-trigger" emphasis="secondary">
    Large
  </Button>
  <Button id="astro-demo-dialog-size-xl-trigger" emphasis="secondary">
    Extra large
  </Button>
  <Button id="astro-demo-dialog-size-viewport-trigger">Viewport</Button>
</div>

<script>
  document
    .getElementById("astro-demo-dialog-size-sm-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-size-sm");
    });
  document
    .getElementById("astro-demo-dialog-size-md-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-size-md");
    });
  document
    .getElementById("astro-demo-dialog-size-lg-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-size-lg");
    });
  document
    .getElementById("astro-demo-dialog-size-xl-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-size-xl");
    });
  document
    .getElementById("astro-demo-dialog-size-viewport-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-size-viewport");
    });
</script>

// GENERATED from packages/demos/dialog/sizes.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Dialog } from "@pindoba/react-dialog";
import { Button } from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

export default function SizesDemo() {
  const [smOpen, setSmOpen] = useState(false);
  const [mdOpen, setMdOpen] = useState(false);
  const [lgOpen, setLgOpen] = useState(false);
  const [xlOpen, setXlOpen] = useState(false);
  const [viewportOpen, setViewportOpen] = useState(false);
  return (
    <div className={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
      <Dialog
        id="react-demo-dialog-size-sm"
        title="Small"
        subtitle="400px wide"
        size="sm"
        open={smOpen}
        onOpenChange={setSmOpen}
      >
        A short confirmation or a single field.
      </Dialog>

      <Dialog
        id="react-demo-dialog-size-md"
        title="Medium"
        subtitle="540px wide, the default"
        size="md"
        open={mdOpen}
        onOpenChange={setMdOpen}
      >
        The default size, for most forms and messages.
      </Dialog>

      <Dialog
        id="react-demo-dialog-size-lg"
        title="Large"
        subtitle="720px wide"
        size="lg"
        open={lgOpen}
        onOpenChange={setLgOpen}
      >
        Room for a two-column form or a short table.
      </Dialog>

      <Dialog
        id="react-demo-dialog-size-xl"
        title="Extra large"
        subtitle="960px wide"
        size="xl"
        open={xlOpen}
        onOpenChange={setXlOpen}
      >
        Wide content such as a data table or a side-by-side comparison.
      </Dialog>

      <Dialog
        id="react-demo-dialog-size-viewport"
        title="report-q3.pdf"
        subtitle="Covers the viewport, minus a gutter on every side"
        size="viewport"
        open={viewportOpen}
        onOpenChange={setViewportOpen}
      >
        <div
          className={css({
            flex: "1",
            display: "grid",
            placeItems: "center",
            minHeight: "0",
            borderRadius: "md",
            borderWidth: "1px",
            borderStyle: "dashed",
            borderColor: "neutral.border.muted",
            background: "neutral.surface.ground",
          })}
        >
          The file preview fills the rest of the height.
        </div>
      </Dialog>

      <Button
        id="react-demo-dialog-size-sm-trigger"
        emphasis="secondary"
        onClick={() => setSmOpen(true)}
      >
        Small
      </Button>
      <Button
        id="react-demo-dialog-size-md-trigger"
        emphasis="secondary"
        onClick={() => setMdOpen(true)}
      >
        Medium
      </Button>
      <Button
        id="react-demo-dialog-size-lg-trigger"
        emphasis="secondary"
        onClick={() => setLgOpen(true)}
      >
        Large
      </Button>
      <Button
        id="react-demo-dialog-size-xl-trigger"
        emphasis="secondary"
        onClick={() => setXlOpen(true)}
      >
        Extra large
      </Button>
      <Button
        id="react-demo-dialog-size-viewport-trigger"
        onClick={() => setViewportOpen(true)}
      >
        Viewport
      </Button>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/dialog/sizes.demo.tsx — edit the source, not this file.
  import Dialog from "@pindoba/svelte-dialog";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  let smOpen = $state(false);
  let mdOpen = $state(false);
  let lgOpen = $state(false);
  let xlOpen = $state(false);
  let viewportOpen = $state(false);
</script>

<div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
  <Dialog
    id="svelte-demo-dialog-size-sm"
    title="Small"
    subtitle="400px wide"
    size="sm"
    bind:open={smOpen}
  >
    A short confirmation or a single field.
  </Dialog>

  <Dialog
    id="svelte-demo-dialog-size-md"
    title="Medium"
    subtitle="540px wide, the default"
    size="md"
    bind:open={mdOpen}
  >
    The default size, for most forms and messages.
  </Dialog>

  <Dialog
    id="svelte-demo-dialog-size-lg"
    title="Large"
    subtitle="720px wide"
    size="lg"
    bind:open={lgOpen}
  >
    Room for a two-column form or a short table.
  </Dialog>

  <Dialog
    id="svelte-demo-dialog-size-xl"
    title="Extra large"
    subtitle="960px wide"
    size="xl"
    bind:open={xlOpen}
  >
    Wide content such as a data table or a side-by-side comparison.
  </Dialog>

  <Dialog
    id="svelte-demo-dialog-size-viewport"
    title="report-q3.pdf"
    subtitle="Covers the viewport, minus a gutter on every side"
    size="viewport"
    bind:open={viewportOpen}
  >
    <div
      class={css({
        flex: "1",
        display: "grid",
        placeItems: "center",
        minHeight: "0",
        borderRadius: "md",
        borderWidth: "1px",
        borderStyle: "dashed",
        borderColor: "neutral.border.muted",
        background: "neutral.surface.ground",
      })}
    >
      The file preview fills the rest of the height.
    </div>
  </Dialog>

  <Button
    id="svelte-demo-dialog-size-sm-trigger"
    emphasis="secondary"
    onclick={() => (smOpen = true)}
  >
    Small
  </Button>
  <Button
    id="svelte-demo-dialog-size-md-trigger"
    emphasis="secondary"
    onclick={() => (mdOpen = true)}
  >
    Medium
  </Button>
  <Button
    id="svelte-demo-dialog-size-lg-trigger"
    emphasis="secondary"
    onclick={() => (lgOpen = true)}
  >
    Large
  </Button>
  <Button
    id="svelte-demo-dialog-size-xl-trigger"
    emphasis="secondary"
    onclick={() => (xlOpen = true)}
  >
    Extra large
  </Button>
  <Button
    id="svelte-demo-dialog-size-viewport-trigger"
    onclick={() => (viewportOpen = true)}
  >
    Viewport
  </Button>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/dialog/sizes.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Dialog } from "@pindoba/vue-dialog";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const smOpen = ref(false);
const mdOpen = ref(false);
const lgOpen = ref(false);
const xlOpen = ref(false);
const viewportOpen = ref(false);
</script>

<template>
  <div :class="stack({ gap: 'sm', direction: 'row', flexWrap: 'wrap' })">
    <Dialog
      id="vue-demo-dialog-size-sm"
      title="Small"
      subtitle="400px wide"
      size="sm"
      :open="smOpen"
      :onOpenChange="(o: boolean) => (smOpen = o)"
    >
      A short confirmation or a single field.
    </Dialog>

    <Dialog
      id="vue-demo-dialog-size-md"
      title="Medium"
      subtitle="540px wide, the default"
      size="md"
      :open="mdOpen"
      :onOpenChange="(o: boolean) => (mdOpen = o)"
    >
      The default size, for most forms and messages.
    </Dialog>

    <Dialog
      id="vue-demo-dialog-size-lg"
      title="Large"
      subtitle="720px wide"
      size="lg"
      :open="lgOpen"
      :onOpenChange="(o: boolean) => (lgOpen = o)"
    >
      Room for a two-column form or a short table.
    </Dialog>

    <Dialog
      id="vue-demo-dialog-size-xl"
      title="Extra large"
      subtitle="960px wide"
      size="xl"
      :open="xlOpen"
      :onOpenChange="(o: boolean) => (xlOpen = o)"
    >
      Wide content such as a data table or a side-by-side comparison.
    </Dialog>

    <Dialog
      id="vue-demo-dialog-size-viewport"
      title="report-q3.pdf"
      subtitle="Covers the viewport, minus a gutter on every side"
      size="viewport"
      :open="viewportOpen"
      :onOpenChange="(o: boolean) => (viewportOpen = o)"
    >
      <div
        :class="
          css({
            flex: '1',
            display: 'grid',
            placeItems: 'center',
            minHeight: '0',
            borderRadius: 'md',
            borderWidth: '1px',
            borderStyle: 'dashed',
            borderColor: 'neutral.border.muted',
            background: 'neutral.surface.ground',
          })
        "
      >
        The file preview fills the rest of the height.
      </div>
    </Dialog>

    <Button
      id="vue-demo-dialog-size-sm-trigger"
      emphasis="secondary"
      :onClick="() => (smOpen = true)"
    >
      Small
    </Button>
    <Button
      id="vue-demo-dialog-size-md-trigger"
      emphasis="secondary"
      :onClick="() => (mdOpen = true)"
    >
      Medium
    </Button>
    <Button
      id="vue-demo-dialog-size-lg-trigger"
      emphasis="secondary"
      :onClick="() => (lgOpen = true)"
    >
      Large
    </Button>
    <Button
      id="vue-demo-dialog-size-xl-trigger"
      emphasis="secondary"
      :onClick="() => (xlOpen = true)"
    >
      Extra large
    </Button>
    <Button
      id="vue-demo-dialog-size-viewport-trigger"
      :onClick="() => (viewportOpen = true)"
    >
      Viewport
    </Button>
  </div>
</template>

// GENERATED from packages/demos/dialog/sizes.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Dialog } from "@pindoba/solid-dialog";
import { Button } from "@pindoba/solid-button";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

export default function SizesDemo() {
  const [smOpen, setSmOpen] = createSignal(false);
  const [mdOpen, setMdOpen] = createSignal(false);
  const [lgOpen, setLgOpen] = createSignal(false);
  const [xlOpen, setXlOpen] = createSignal(false);
  const [viewportOpen, setViewportOpen] = createSignal(false);
  return (
    <div class={stack({ gap: "sm", direction: "row", flexWrap: "wrap" })}>
      <Dialog
        id="solid-demo-dialog-size-sm"
        title="Small"
        subtitle="400px wide"
        size="sm"
        open={smOpen()}
        onOpenChange={setSmOpen}
      >
        A short confirmation or a single field.
      </Dialog>

      <Dialog
        id="solid-demo-dialog-size-md"
        title="Medium"
        subtitle="540px wide, the default"
        size="md"
        open={mdOpen()}
        onOpenChange={setMdOpen}
      >
        The default size, for most forms and messages.
      </Dialog>

      <Dialog
        id="solid-demo-dialog-size-lg"
        title="Large"
        subtitle="720px wide"
        size="lg"
        open={lgOpen()}
        onOpenChange={setLgOpen}
      >
        Room for a two-column form or a short table.
      </Dialog>

      <Dialog
        id="solid-demo-dialog-size-xl"
        title="Extra large"
        subtitle="960px wide"
        size="xl"
        open={xlOpen()}
        onOpenChange={setXlOpen}
      >
        Wide content such as a data table or a side-by-side comparison.
      </Dialog>

      <Dialog
        id="solid-demo-dialog-size-viewport"
        title="report-q3.pdf"
        subtitle="Covers the viewport, minus a gutter on every side"
        size="viewport"
        open={viewportOpen()}
        onOpenChange={setViewportOpen}
      >
        <div
          class={css({
            flex: "1",
            display: "grid",
            placeItems: "center",
            minHeight: "0",
            borderRadius: "md",
            borderWidth: "1px",
            borderStyle: "dashed",
            borderColor: "neutral.border.muted",
            background: "neutral.surface.ground",
          })}
        >
          The file preview fills the rest of the height.
        </div>
      </Dialog>

      <Button
        id="solid-demo-dialog-size-sm-trigger"
        emphasis="secondary"
        onClick={() => setSmOpen(true)}
      >
        Small
      </Button>
      <Button
        id="solid-demo-dialog-size-md-trigger"
        emphasis="secondary"
        onClick={() => setMdOpen(true)}
      >
        Medium
      </Button>
      <Button
        id="solid-demo-dialog-size-lg-trigger"
        emphasis="secondary"
        onClick={() => setLgOpen(true)}
      >
        Large
      </Button>
      <Button
        id="solid-demo-dialog-size-xl-trigger"
        emphasis="secondary"
        onClick={() => setXlOpen(true)}
      >
        Extra large
      </Button>
      <Button
        id="solid-demo-dialog-size-viewport-trigger"
        onClick={() => setViewportOpen(true)}
      >
        Viewport
      </Button>
    </div>
  );
}

Fullscreen

fullscreen makes the dialog fill the viewport: full width, a 100dvh height (it tracks the mobile browser’s collapsing URL bar), no margin and square corners. Pass true to go full screen at every width, or a breakpoint ("sm", "md" or "lg") to go full screen only below it. fullscreen="sm" gives you a full-screen sheet on phones (under 640px) and a regular centered dialog everywhere else, so you no longer need a passThrough.root style override. It combines with drawer: the drawer keeps its slide-in animation, and fullscreen replaces its size and inset.

PreviewCode

---
// GENERATED from packages/demos/dialog/fullscreen.demo.tsx — edit the source, not this file.
import Dialog from "@pindoba/astro-dialog";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "sm", direction: "row", align: "start" })}>
  <Dialog
    id="astro-demo-dialog-fullscreen-sm"
    title="Edit profile"
    subtitle="Full screen on phones, a regular dialog above 640px"
    fullscreen="sm"
  >
    Resize the window below 640px (or open this on a phone): the dialog fills
    the viewport with a dynamic-viewport height and square corners.
  </Dialog>

  <Dialog
    id="astro-demo-dialog-fullscreen-always"
    title="Full screen"
    fullscreen
  >
    This dialog fills the viewport at every width.
  </Dialog>

  <Button id="astro-demo-dialog-fullscreen-sm-trigger">
    Full screen on mobile
  </Button>
  <Button id="astro-demo-dialog-fullscreen-always-trigger" emphasis="secondary">
    Always full screen
  </Button>
</div>

<script>
  document
    .getElementById("astro-demo-dialog-fullscreen-sm-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-dialog-fullscreen-sm");
    });
  document
    .getElementById("astro-demo-dialog-fullscreen-always-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open(
        "astro-demo-dialog-fullscreen-always",
      );
    });
</script>

// GENERATED from packages/demos/dialog/fullscreen.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { Dialog } from "@pindoba/react-dialog";
import { Button } from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function FullscreenDemo() {
  const [sheetOpen, setSheetOpen] = useState(false);
  const [alwaysOpen, setAlwaysOpen] = useState(false);
  return (
    <div className={stack({ gap: "sm", direction: "row", align: "start" })}>
      <Dialog
        id="react-demo-dialog-fullscreen-sm"
        title="Edit profile"
        subtitle="Full screen on phones, a regular dialog above 640px"
        fullscreen="sm"
        open={sheetOpen}
        onOpenChange={setSheetOpen}
      >
        Resize the window below 640px (or open this on a phone): the dialog
        fills the viewport with a dynamic-viewport height and square corners.
      </Dialog>

      <Dialog
        id="react-demo-dialog-fullscreen-always"
        title="Full screen"
        fullscreen
        open={alwaysOpen}
        onOpenChange={setAlwaysOpen}
      >
        This dialog fills the viewport at every width.
      </Dialog>

      <Button
        id="react-demo-dialog-fullscreen-sm-trigger"
        onClick={() => setSheetOpen(true)}
      >
        Full screen on mobile
      </Button>
      <Button
        id="react-demo-dialog-fullscreen-always-trigger"
        emphasis="secondary"
        onClick={() => setAlwaysOpen(true)}
      >
        Always full screen
      </Button>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/dialog/fullscreen.demo.tsx — edit the source, not this file.
  import Dialog from "@pindoba/svelte-dialog";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";

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

<div class={stack({ gap: "sm", direction: "row", align: "start" })}>
  <Dialog
    id="svelte-demo-dialog-fullscreen-sm"
    title="Edit profile"
    subtitle="Full screen on phones, a regular dialog above 640px"
    fullscreen="sm"
    bind:open={sheetOpen}
  >
    Resize the window below 640px (or open this on a phone): the dialog fills
    the viewport with a dynamic-viewport height and square corners.
  </Dialog>

  <Dialog
    id="svelte-demo-dialog-fullscreen-always"
    title="Full screen"
    fullscreen
    bind:open={alwaysOpen}
  >
    This dialog fills the viewport at every width.
  </Dialog>

  <Button
    id="svelte-demo-dialog-fullscreen-sm-trigger"
    onclick={() => (sheetOpen = true)}
  >
    Full screen on mobile
  </Button>
  <Button
    id="svelte-demo-dialog-fullscreen-always-trigger"
    emphasis="secondary"
    onclick={() => (alwaysOpen = true)}
  >
    Always full screen
  </Button>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/dialog/fullscreen.demo.tsx — edit the source, not this file.
import { ref } from "vue";
import { Dialog } from "@pindoba/vue-dialog";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";

const sheetOpen = ref(false);
const alwaysOpen = ref(false);
</script>

<template>
  <div :class="stack({ gap: 'sm', direction: 'row', align: 'start' })">
    <Dialog
      id="vue-demo-dialog-fullscreen-sm"
      title="Edit profile"
      subtitle="Full screen on phones, a regular dialog above 640px"
      fullscreen="sm"
      :open="sheetOpen"
      :onOpenChange="(o: boolean) => (sheetOpen = o)"
    >
      Resize the window below 640px (or open this on a phone): the dialog fills
      the viewport with a dynamic-viewport height and square corners.
    </Dialog>

    <Dialog
      id="vue-demo-dialog-fullscreen-always"
      title="Full screen"
      :fullscreen="true"
      :open="alwaysOpen"
      :onOpenChange="(o: boolean) => (alwaysOpen = o)"
    >
      This dialog fills the viewport at every width.
    </Dialog>

    <Button
      id="vue-demo-dialog-fullscreen-sm-trigger"
      :onClick="() => (sheetOpen = true)"
    >
      Full screen on mobile
    </Button>
    <Button
      id="vue-demo-dialog-fullscreen-always-trigger"
      emphasis="secondary"
      :onClick="() => (alwaysOpen = true)"
    >
      Always full screen
    </Button>
  </div>
</template>

// GENERATED from packages/demos/dialog/fullscreen.demo.tsx — edit the source, not this file.
import { createSignal } from "solid-js";
import { Dialog } from "@pindoba/solid-dialog";
import { Button } from "@pindoba/solid-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function FullscreenDemo() {
  const [sheetOpen, setSheetOpen] = createSignal(false);
  const [alwaysOpen, setAlwaysOpen] = createSignal(false);
  return (
    <div class={stack({ gap: "sm", direction: "row", align: "start" })}>
      <Dialog
        id="solid-demo-dialog-fullscreen-sm"
        title="Edit profile"
        subtitle="Full screen on phones, a regular dialog above 640px"
        fullscreen="sm"
        open={sheetOpen()}
        onOpenChange={setSheetOpen}
      >
        Resize the window below 640px (or open this on a phone): the dialog
        fills the viewport with a dynamic-viewport height and square corners.
      </Dialog>

      <Dialog
        id="solid-demo-dialog-fullscreen-always"
        title="Full screen"
        fullscreen
        open={alwaysOpen()}
        onOpenChange={setAlwaysOpen}
      >
        This dialog fills the viewport at every width.
      </Dialog>

      <Button
        id="solid-demo-dialog-fullscreen-sm-trigger"
        onClick={() => setSheetOpen(true)}
      >
        Full screen on mobile
      </Button>
      <Button
        id="solid-demo-dialog-fullscreen-always-trigger"
        emphasis="secondary"
        onClick={() => setAlwaysOpen(true)}
      >
        Always full screen
      </Button>
    </div>
  );
}

Nested Drawers

Multiple dialogs can be stacked. Lower dialogs scale back and dim when a new one opens on top, creating a cascade effect. Each dialog is independently closable.

PreviewCode