Modal is a dialog box or popup window that is displayed on top of the current page.

<>
  <dap-ds-button onClick={() => { document.querySelector('#basicmodal').open = true }}>Open Modal</dap-ds-button>
  <dap-ds-modal id="basicmodal" title="Modal title" description="Description">
    <p>Modal content</p>
  </dap-ds-modal>
</>

<>
  <dap-ds-button onClick={() => { document.getElementById('tray-bottom').open = true }}>Open Modal</dap-ds-button>
  <dap-ds-modal id="tray-bottom">
    <dap-ds-typography variant="h1" slot="title"
      >Like a tray?</dap-ds-typography
    >
    <p>Opened like a tray</p>
    <dap-ds-button slot="footer" onClick={() => { document.getElementById('tray-bottom').open = false }}>I like tray</dap-ds-button>
    <dap-ds-button danger slot="footer" onClick={() => { document.getElementById('tray-bottom').open = false }}>I don't ike tray</dap-ds-button>
  </dap-ds-modal>
</>

Modal has many events according to its state. You can listen to these events to trigger some actions. Most important event is the dds-close event, which is triggered when the modal is closed. The events detail properry contains the source of the event. This can be ok-button, cancel-button, close-button, overlay, or esc.

There is a know issue in Safari when using React. When the modal is opened, safari does not recognize the content in the modal content slot, and the content is not resized to the new height. This is a known Safari bug. I this case you can set the modal to a fixed size, or use the the followin css:

#modal::part(panel) {
  height: auto;
}

import { DapDSModal } from 'dap-design-system'

import { DapDSModalReact } from 'dap-design-system/react'

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSModal } from 'dap-design-system/components'

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-modal::part(base) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-modal::part(base),
.my-custom-dap-ds-modal::part(panel) {
  /* Shared styles */
}

Example usage:

<dap-ds-modal class="my-custom-dap-ds-modal">
  Modal
</dap-ds-modal>

.my-custom-dap-ds-modal::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-modal
  style="--dds-modal-max-block-size: value; --dds-modal-max-inline-size: value;">
  Modal
</dap-ds-modal>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-modal {
  --dds-modal-max-block-size: value;
  --dds-modal-max-inline-size: value;
  --dds-modal-padding-sm: value;
}

<dap-ds-modal class="my-custom-dap-ds-modal">
  Modal
</dap-ds-modal>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-modal {
  --dds-modal-max-block-size: value;
  --dds-modal-max-inline-size: value;
}