Dialog

<nve-button popovertarget="dialog">button</nve-button>
<nve-dialog id="dialog" modal closable>
  <nve-dialog-header>
    <h3 nve-text="heading semibold">title</h3>
  </nve-dialog-header>
  <p nve-text="body">some text content in a closable dialog</p>
</nve-dialog>

Dialog with header, content, and footer structure for complete user interactions. Use the footer for action buttons, organizing the dialog into clear sections that guide users through the information hierarchy and toward decision-making.

<nve-dialog closable>
  <nve-dialog-header>
    <h3 nve-text="heading semibold">title</h3>
  </nve-dialog-header>
  <p nve-text="body">some text content in a closable dialog</p>
  <nve-dialog-footer>
    <nve-button>button</nve-button>
  </nve-dialog-footer>
</nve-dialog>

Dialog with event listeners for state change tracking. Use dialog events (beforetoggle, toggle, open, close) to trigger side effects like loading data on open, cleaning up resources on close, or preventing closure based on validation state.

<nve-dialog id="dialog" modal closable>
  <nve-dialog-header>
    <h3 nve-text="heading semibold">title</h3>
  </nve-dialog-header>
  <p nve-text="body">some text content in a closable dialog</p>
</nve-dialog>
<nve-button popovertarget="dialog">button</nve-button>
<script type="module">
  const dialog = document.querySelector("nve-dialog");
  dialog.addEventListener("beforetoggle", () => console.log("beforetoggle"));
  dialog.addEventListener("toggle", () => console.log("toggle"));
  dialog.addEventListener("open", () => console.log("open"));
  dialog.addEventListener("close", () => console.log("close"));
</script>

Dialog with primary and secondary actions in footer. Use cancel + emphasized action pattern for confirmations or decisions where you need to present a choice, with emphasis on the primary action guiding users toward the preferred or expected path.

<nve-dialog closable>
  <nve-dialog-header>
    <h3 nve-text="heading semibold">title</h3>
  </nve-dialog-header>
  <p nve-text="body">some text content in a closable dialog</p>
  <nve-dialog-footer>
    <nve-button>cancel</nve-button>
    <nve-button interaction="emphasis">action</nve-button>
  </nve-dialog-footer>
</nve-dialog>

Small dialog size for brief confirmations or single-field inputs. Use size="sm" for simple yes/no confirmations, quick edits, or minimal interactions that don't require significant screen space, keeping the interface uncluttered.

<nve-dialog size="sm" closable>
  <h3 nve-text="heading">Small</h3>
  <p nve-text="body">some text content in a small dialog</p>
</nve-dialog>

Medium dialog size (default) for standard forms and content. Use size="md" for typical dialogs containing short forms (3-5 fields), moderate content, or standard user interactions that need balanced space without overwhelming the interface.

<nve-dialog size="md" closable>
  <h3 nve-text="heading">Medium</h3>
  <p nve-text="body">some text content in a medium dialog</p>
</nve-dialog>

Large dialog size for complex forms or extensive content. Use size="lg" for multi-section forms, detailed settings panels, or content-rich interactions where users need more space to work comfortably, but consider using a drawer for large content areas.

<nve-dialog size="lg" closable>
  <h3 nve-text="heading">Large</h3>
  <p nve-text="body">some text content in a large dialog</p>
</nve-dialog>

Dialog with text wrapping behavior, where content adapts to dialog constraints and maintains readability in limited space.

<nve-dialog closable>
  <h3 nve-text="heading">Text Wrap</h3>
  <p nve-text="body">
    Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content
    in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some
    text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a
    small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text
    wrapped content in a small dialog. Some text wrapped content in a small dialog.
  </p>
</nve-dialog>

Specific dialog positioning example, with placement in optimal locations for user interaction and visual hierarchy.

<style>
  body {
    min-height: 200vh;
  }
</style>
<nve-dialog size="sm" position="bottom" alignment="end" closable>
  <h3 nve-text="heading">Position</h3>
  <p nve-text="body">some text content in a small dialog</p>
</nve-dialog>

Dialog with scrollable content while keeping header and footer fixed. Use scrollable content areas for dialogs with variable or lengthy content (like terms of service or detailed descriptions) while keeping action buttons always visible, ensuring users can complete the task without scrolling to find buttons.

<nve-dialog id="dialog" modal closable style="height: 400px">
  <nve-dialog-header>
    <h3 nve-text="heading semibold">title</h3>
  </nve-dialog-header>
  <p nve-text="body" style="height: 600px">some tall content</p>
  <p nve-text="body">some overflow content</p>
  <nve-dialog-footer>
    <nve-button id="cancel-btn">cancel</nve-button>
  </nve-dialog-footer>
</nve-dialog>