➤ Install

yarn add dialog-lite

➤ Import

import { DialogLite } from 'dialog-lite';

or

import { initDialogLite } from 'dialog-lite';

CSS

import 'dialog-lite/dialog-lite.css';

or

@import "dialog-lite/dialog-lite.css";

➤ Usage

const dialogLite = initDialogLite({
  closingButton: true,
  closingBackdrop: true,
  injectCss: false, // since we import CSS separately
});

button.addEventListener('click', () => {
  dialogLite.open({
    stylingClass: 'dialog-lite--first-window',
  });
});

Classic (class) API

const dialogLite = new DialogLite({ closingButton: true, closingBackdrop: true });
dialogLite.init();

➤ Markup

Use hidden for the initial hidden state. Do not rely on style="display:none" (the library toggles via hidden).

<div class="dialog-lite dialog-lite--out" hidden aria-hidden="true">
  <div class="dialog-lite__backdrop"></div>
  <div class="dialog-lite__container">
    <div class="dialog-lite__container-inner">
      <button class="dialog-lite-close-button" type="button" aria-label="Close" tabindex="0"></button>
      <div>Your content</div>
    </div>
  </div>
</div>

➤ Options

| Option | Type | Default | Description | |:--|:--:|:--:|:--| | closingButton | boolean | false | Enables close on .dialog-lite-close-button click. | | closingBackdrop | boolean | false | Enables close on .dialog-lite__backdrop click. | | dialog | HTMLElement \| string | '.dialog-lite' | Dialog root element or selector. | | mainContent | HTMLElement \| string \| null | '#main-content' | Element/selector to set aria-hidden on while open. Set null to disable. | | closeButtonSelector | string | '.dialog-lite-close-button' | Close button selector inside dialog. | | backdropSelector | string | '.dialog-lite__backdrop' | Backdrop selector inside dialog. | | debounceMs | number | 500 | Debounce window for open/close. | | hideDelayMs | number | 500 | Delay before setting hidden on close (should match CSS). | | focusOnOpenSelector | string | '[tabindex="0"]' | Element to focus when opened. | | lockScroll | boolean | true | Locks page scroll while open. | | trapFocus | boolean | true | Enables simple focus trap (Tab cycling) while open. | | emitEvents | boolean | true | Emits dialog-lite:open / dialog-lite:close on the dialog element. |

➤ API

| API | Parameters | Description | |:--|:--|:--| | new DialogLite(options) | DialogLiteOptions | Creates controller instance. | | init() | — | Attaches listeners and resolves DOM elements. | | open() | { stylingClass?: string } | Opens dialog, toggles classes/attributes, focuses inside. | | close() | — | Closes dialog, restores focus, sets hidden after hideDelayMs. | | destroy() | — | Removes listeners and clears timers. | | createDialogLite(options) | DialogLiteOptions | Functional constructor (returns { init, open, close, destroy }). | | initDialogLite(options) | DialogLiteOptions & { injectCss?: boolean; cssText?: string; cssTarget?: Document \| ShadowRoot } | Creates instance, optionally injects CSS, calls init(), returns controller. | | injectDialogLiteCss() | { target?: Document \| ShadowRoot; cssText?: string; id?: string } | Injects <style> with default/minified CSS (or custom cssText). | | dialogLiteCssText | — | Minified CSS string (useful for Shadow DOM). |

➤ Events

| Event | Description | |:--|:--| | dialog-lite:open | Dispatched on the dialog element after open() (detail includes stylingClass). | | dialog-lite:close | Dispatched on the dialog element after close(). |

➤ License

dialog-lite is released under MIT license