Hello! I'm an accessible dialog
\n \n\n```\n\n## Configuration\n\n### Global\n\nUse the `setDefaults()` function to change the default configuration for dialogs. It will apply these settings to every\nfuture instance.\n\n```js\nimport Dialog, { setDefaults } from 'a11y-dialog-component';\n\nsetDefaults({\n documentSelector: '.js-page',\n delay: 400,\n});\n```\n\nBelow is a list of all possible options to change the default configuration.\n\n| Option | Default | Value | Description |\n| ----------------------------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **documentSelector** | `.js-document` | `String` | CSS selector used to target the main document. |\n| **documentDisabledClass** | `is-disabled` | `String` | Add a class on the document (defined by `documentSelector`) while the dialog is open and if `disableScroll: true`. |\n| **openingTriggerActiveClass** | `is-active` | `String` | Add a class on the opening trigger while the dialog is open. |\n| **delay** | `200` | `Number` | Delay in ms once a trigger event is fired before the dialog autofocus. Usually matches with the CSS transition value to open or close this dialog. |\n\n### Options\n\nBelow is a list of all possible options you can pass to a dialog.\n\n| Option | Default | Value | Description |\n| ------------------------------- | ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **onOpen** | `noop` | `Function` | Lifecycle function invoked when the dialog is opening. The function receives the dialog object as the first parameter and the opening trigger as the second parameter. |\n| **onClose** | `noop` | `Function` | Lifecycle function invoked when the dialog is closing. The function receives the dialog object as the first parameter and the closing trigger as the second parameter. |\n| **openingSelector** | `\"\"` | `String` | CSS selector used to open the dialog. |\n| **closingSelector** | `\"\"` | `String` | CSS selector used to close the dialog. |\n| **backdropSelector** | `\"\"` | `String` | CSS selector used to include a backdrop element which close the dialog on click. |\n| **helperSelector** | `\"\"` | `String` | CSS selector used to add active class name(\\*) while the dialog is open. |\n| **labelledby** | `\"\"` | `String` | ID selector to provide a dialog label (a11y compliant). |\n| **describedby** | `\"\"` | `String` | ID selector to provide a dialog description (a11y compliant). |\n| **isModal** | `true` | `Boolean` | If `true`, tells assistive technologies that the windows underneath the current dialog are not available for interaction `aria-modal=\"true\"`. |\n| **isTooltip** | `false` | `Boolean` | If `true`, click outside the current dialog to close it. |\n| **isCreated** | `true` | `Boolean` | If `true`, create the dialog when initialized. If disabled, then you need to create it manually by using `create()` method. |\n| **isOpen** | `false` | `Boolean` | If `true`, open the dialog when initialized. |\n| **disableScroll** | `true` | `Boolean` | If `true`, disable scrolling on the page while the dialog is open. |\n| **enableAutoFocus** | `true` | `Boolean` | If `true`, focus moves to an element contained in the dialog when it opens. |\n| **openingTriggerActiveClass\\*** | `is-active` | `String` | Add a class on the opening trigger and helper selectors while the dialog is open. |\n| **delay** | `200` | `Number` | Delay in ms once a trigger event is fired before the dialog autofocus. Usually matches with the CSS transition value to open or close this dialog. |\n\n### Methods\n\nDialog instances have 5 methods available which allow you to control the dialog without the use of UI events.\n\n**Open the dialog**\n\n```js\ndialog.open();\n```\n\n**Close the dialog**\n\n```js\ndialog.close();\n```\n\n**Toggle the dialog**\n\n```js\ndialog.toggle();\n```\n\n**Destroy the dialog**\n\n```js\ndialog.destroy();\n```\n\n**Create the dialog**\n\nThe `create()` method is **automatically called on instantiation** so there is no need to call it again directly (unless\nyou have destroyed the dialog previously).\n\n```js\ndialog.create();\n```\n\n## Demos\n\nDidn't find the recipe that exactly matches your case? We have demos!\n\nThe [demos](https://github.com/jonathanlevaillant/a11y-dialog-component/tree/master/demos) folder contains 10 use cases\nof a11y-dialog-component. You might find there what you're looking for.\n\n## Deployment\n\nOn production use files only from `dist/` folder, there will be the most stable versions.\n\na11y-dialog-component uses [Rollup](https://rollupjs.org/guide/en) to build a development and production versions.\n\n1. Install Rollup `npm install --global rollup`\n2. Clone Github repo `git clone https://github.com/jonathanlevaillant/a11y-dialog-component.git`\n3. Install all dependencies, in repo's root `npm install`\n\n### Development build\n\n```\nnpm run dev\n```\n\nDevelopment files (`iife`) will be available in `demos/js/` folder.\n\n### Production build\n\n```\nnpm run build\n```\n\nProduction files (`cjs`, `esm`, `iife`) will be available in `dist/` folder.\n\n## Contributing\n\nPlease read [CONTRIBUTING.md](https://github.com/jonathanlevaillant/a11y-dialog-component/blob/master/CONTRIBUTING.md)\nfor details on our code of conduct, and the process for submitting pull requests to us.\n\n## Versioning\n\nWe use [SemVer](https://semver.org/) for versioning. For the versions available, see the\n[tags on this repository](https://github.com/jonathanlevaillant/a11y-dialog-component/tags).\n\n## Authors\n\n- **Jonathan Levaillant** - _Initial work_ - [jonathanlevaillant](https://github.com/jonathanlevaillant)\n\nSee also the list of [contributors](https://github.com/jonathanlevaillant/a11y-dialog-component/graphs/contributors) who\nparticipated in this project.\n\n## License\n\nThis project is licensed under the MIT License - see the\n[LICENSE.md](https://github.com/jonathanlevaillant/a11y-dialog-component/blob/master/LICENSE.md) file for details\n\n## Acknowledgments\n\n\n ![\"JoliCode\"](\"https://jolicode.com/images/logo.svg\"){kind=logo}
\n