graycoreio/daffodil

<h1>Modal</h1>
<p>Modal is a dynamically rendered element that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.</p>

<h2>Basic Modal</h2>
<design-land-example-viewer-container example="basic-modal"></design-land-example-viewer-container>

<h2>Supported Content Types</h2>
<p>A modal includes minimally pre-styled components and directives to help structure the content in your modal.</p>

<h3>Header</h3>
<p>Header can be added to a modal by using <code>&lt;daff-modal-header&gt;</code>. The header includes a title and an optional close button.</p>

<h4>Title</h4>
Title can be added to the header by using the <code>daffModalTitle</code> directive.

<h4>Close Button</h4>
<p>The close button is shown by default but can be hidden by setting the <code>dismissible</code> property to <code>false</code> on the header.</p>

<h3>Content</h3>
<p>Content can be added to a modal by using <code>&lt;daff-modal-content&gt;</code>. It should only be used once. It's a wrapper container that can be used to place all additional components and text content within a modal. The content container allows for a ton of control and customization because it's minimally pre-styled and serves as a wrapping and spacing container that is scrollable.</p>

<h3>Actions</h3>
<p>Buttons can be added to a modal by using <code>&lt;daff-modal-actions&gt;</code>. This container will always be positioned at the bottom of a modal. The horizontal alignment of the actions is set to <code>end</code>.</p>

<h2>Dismissing a Modal</h2>
<p>A modal can be dismissed via the close button or the <code>ESC</code> key. The close button is shown by default but can be hidden by setting the <code>dismissible</code> property to <code>false</code> on <code>&lt;daff-modal-header&gt;</code>. Additionally, the <code>&lbrack;daffModalClose&rbrack;</code> directive can be added to a <code>&lt;button&gt;</code> HTML element.</p>

<h2>Accessibility</h2>
<p>Modal works with the ARIA <code>role="dialog"</code> and <code>aria-modal="true"</code> attributes to provide an accessible experience. <code>aria-labelledby</code> is assigned the <code>&lbrack;daffModalTitle&rbrack;</code> string. When a modal is opened, the first tabbable element within it will receive focus.</p>

<h3>Keyboard Interactions</h3>
<p>A modal can be closed by choosing one of the actions buttons, the close button in the header, or it can be dismissed by pressing the <code>ESC</code> key.</p>