@litforge/modal

A modal dialog component with backdrop, animations, keyboard support, and slots, built with Lit.

Overview

The Modal component provides a flexible modal dialog with backdrop overlay, smooth animations, keyboard support (ESC to close), and slots for header, body, and footer content.

Installation

npm install @litforge/modal
# or
pnpm add @litforge/modal
# or
yarn add @litforge/modal

Basic Usage

<script type="module">
  import '@litforge/modal';
</script>

<lf-modal open title="Modal Title" @modal-close=${handleClose}>
  <p>Modal content goes here</p>
</lf-modal>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | open | boolean | false | Controls modal visibility | | title | string | '' | Modal title | | size | 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Modal size | | closable | boolean | true | Allow closing via backdrop/close button/escape | | showFooter | boolean | false | Show footer slot area |

Events

modal-close

Fired when the modal is closed (via backdrop click, close button, or ESC key).

Detail: { source: 'backdrop' | 'close-button' | 'escape' }

Slots

• default: Modal body content
• header: Custom header content (overrides title)
• footer: Footer content

Examples

Basic Modal

<lf-modal open title="Confirm Action" @modal-close=${handleClose}>
  <p>Are you sure you want to proceed?</p>
</lf-modal>

Modal with Footer

<lf-modal open title="Edit Application" show-footer @modal-close=${handleClose}>
  <p>Form content here</p>
  <div slot="footer">
    <button @click=${handleSave}>Save</button>
    <button @click=${handleCancel}>Cancel</button>
  </div>
</lf-modal>

Different Sizes

<lf-modal open size="sm" title="Small Modal">Content</lf-modal>
<lf-modal open size="lg" title="Large Modal">Content</lf-modal>

Non-closable Modal

<lf-modal open title="Processing" closable="false">
  <p>Please wait...</p>
</lf-modal>

Keyboard Support

• ESC: Closes the modal (if closable is true)

Styling

The component uses CSS variables for theming:

lf-modal {
  --lf-modal-backdrop: rgba(0, 0, 0, 0.5);
  --lf-modal-background: #ffffff;
  --lf-modal-radius: 12px;
  --lf-modal-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  --lf-modal-width-sm: 400px;
  --lf-modal-width-md: 500px;
  --lf-modal-width-lg: 700px;
  --lf-modal-width-xl: 900px;
  /* ... more variables */
}

TypeScript

import { Modal, ModalSize } from '@litforge/modal';

License

Part of the LitForge component library.