{"id":14990319,"url":"https://github.com/andreasbm/web-dialog","last_synced_at":"2025-10-23T17:02:38.240Z","repository":{"id":49494486,"uuid":"216672379","full_name":"andreasbm/web-dialog","owner":"andreasbm","description":"A highly accessible, customizable and lightweight dialog","archived":false,"fork":false,"pushed_at":"2021-06-16T14:03:29.000Z","size":4030,"stargazers_count":54,"open_issues_count":1,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T21:51:13.245Z","etag":null,"topics":["accessibility","dialog","focus-trap","lightweight","modal","web-component"],"latest_commit_sha":null,"homepage":"https://appnest-demo.firebaseapp.com/web-dialog/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andreasbm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-21T21:55:04.000Z","updated_at":"2024-08-31T04:20:15.000Z","dependencies_parsed_at":"2022-07-28T19:49:46.910Z","dependency_job_id":null,"html_url":"https://github.com/andreasbm/web-dialog","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fweb-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreasbm","download_url":"https://codeload.github.com/andreasbm/web-dialog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505928,"owners_count":21115354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","dialog","focus-trap","lightweight","modal","web-component"],"created_at":"2024-09-24T14:19:53.163Z","updated_at":"2025-10-23T17:02:33.222Z","avatar_url":"https://github.com/andreasbm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\u003ch1 align=\"center\"\u003eweb-dialog\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/web-dialog?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/web-dialog.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/web-dialog\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/web-dialog.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://david-dm.org/andreasbm/web-dialog\"\u003e\u003cimg alt=\"Dependencies\" src=\"https://img.shields.io/david/andreasbm/web-dialog.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://github.com/andreasbm/web-dialog/graphs/contributors\"\u003e\u003cimg alt=\"Contributors\" src=\"https://img.shields.io/github/contributors/andreasbm/web-dialog.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eA highly accessible, customizable and lightweight dialog.\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003eTry the dialog yourself at \u003ca href=\"https://codepen.io/andreasbm/pen/abbJvme\"\u003eCodepen\u003c/a\u003e. Go here to see a demo \u003ca href=\"https://appnest-demo.firebaseapp.com/web-dialog/\"\u003ehttps://appnest-demo.firebaseapp.com/web-dialog/\u003c/a\u003e.\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example1.png\" width=\"600\"\u003e\n\u003c/p\u003e\n\nBuilding a good dialog is hard - there are many things you might not think about if you try to build one. This dialog has been build using the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#dialog_modal) and follows all of the best practices. This makes the dialog:\n\n* **Accessible** - The dialog is accessible. When opening the dialog, the focus is trapped inside the dialog and outside scrolling is blocked. When the dialog is closed, the focus is restored to what it was before opening it. It is also possible to close the dialog pressing the escape key.\n* **Works well with [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)** - The dialog works very well with Shadow DOM and is therefore super Web Component friendly. Many people don't think about Shadow DOM when they build a dialog - this one has been build with Web Components in mind.\n* **Incredible lightweight** - The footprint of the dialog is around 2500 bytes gzipped.\n* **Customizable** - It is easy to customize the dialog with a few [CSS variables](https://www.w3.org/TR/css-variables-1/) or styling the exposed [Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/).\n* **Works with [all frameworks](https://custom-elements-everywhere.com/)** - It exposes a [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) that can be used with your favorite framework.\n* **Can be nested** - The dialogs can spawn on top of each other.\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#table-of-contents)\r\n\r\n## ➤ Table of Contents\n\n* [➤ Installation](#-installation)\r\n* [➤ Usage](#-usage)\r\n* [➤ Center the dialog](#-center-the-dialog)\r\n* [➤ Sticky header and footer](#-sticky-header-and-footer)\r\n* [➤ Customize](#-customize)\r\n* [➤ Events](#-events)\r\n* [➤ `openDialog(...)`](#-opendialog)\r\n* [➤ lit-html \u0026 lit-element](#-lit-html--lit-element)\r\n* [➤ Extend WebDialog](#-extend-webdialog)\r\n* [➤ Documentation](#-documentation)\r\n\t* [web-dialog](#web-dialog)\r\n\t\t* [Properties](#properties)\r\n\t\t* [Methods](#methods)\r\n\t\t* [Events](#events)\r\n\t\t* [CSS Shadow Parts](#css-shadow-parts)\r\n\t\t* [CSS Custom Properties](#css-custom-properties)\r\n* [➤ Contributors](#-contributors)\r\n* [➤ License](#-license)\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#installation)\r\n\r\n## ➤ Installation\n\nIt is recommended that you install the library through [NPM](https://www.npmjs.com/package/web-dialog).\n\n```\n$ npm i web-dialog\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#usage)\r\n\r\n## ➤ Usage\n\nTo use this library you first need to get import the library through code somewhere (`import \"web-dialog\";`). After you have done this you'll be able to use the `web-dialog` web component. In-between the opening and closing tags you can add whatever content you'd want to show in the dialog.\n\n```html\n\u003cweb-dialog\u003e\n  \u003cspan\u003eThis is a default dialog!\u003c/span\u003e\n\u003c/web-dialog\u003e\n```\n\nTo open the dialog you will have to add the `open` attribute to the element.\n\n```html\n\u003cweb-dialog open\u003e\n  \u003cspan\u003eThis is a default dialog!\u003c/span\u003e\n\u003c/web-dialog\u003e\n```\n\nAlternatively you can set the `.open` property of the dialog to true through Javascript.\n\n```js\nconst $dialog = document.querySelector(\"web-dialog\");\n$dialog.open = true;\n```\n\nWhen the dialog opens it will look like this.\n\n\u003cimg src=\"https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example1.png\" width=\"600\"\u003e\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#center-the-dialog)\r\n\r\n## ➤ Center the dialog\n\nYou probably noticed the dialog is not centered as default. This is because, as default, the dialog uses the container around the element to scroll in instead of using the inside of the dialog. To center the dialog you can add the `center` attribute or set the `.center` property to true.\n\n```html\n\u003cweb-dialog center\u003e\n  \u003cspan\u003eThis is a default centered dialog!\u003c/span\u003e\n\u003c/web-dialog\u003e\n```\n\nWhen opened the dialog will look like this.\n\n\u003cimg src=\"https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example2.png\" width=\"600\"\u003e\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#sticky-header-and-footer)\r\n\r\n## ➤ Sticky header and footer\n\nWhat about a sticky header and footer? No problem at all. Just make sure to use `header`, `article` and `footer` HTML tags for your content and center the dialog. This will style the content in such as way that the footer and header is sticky.\n\n```html\n\u003cweb-dialog center\u003e\n  \u003cheader\u003e\n    \u003ch3\u003eThe standard Lorem Ipsum passage\u003c/h3\u003e\n  \u003c/header\u003e\n  \u003carticle\u003e\n    \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing...\u003c/p\u003e\n  \u003c/article\u003e\n  \u003cfooter\u003e\n    \u003cbutton\u003eOkay...\u003c/button\u003e\n  \u003c/footer\u003e\n\u003c/web-dialog\u003e\n```\n\nTo make thing look nice you can add some CSS and apply a bottom border to the header, a top border to the footer and add some padding to the elements. When opened the dialog will look like this.\n\n\u003cimg src=\"https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example4.png\" width=\"600\"\u003e\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#customize)\r\n\r\n## ➤ Customize\n\nThe dialog can be customized by setting some CSS variables or modifying the shadow parts. You can read about all of the CSS variables you can set and shadow parts you can change [here](#-documentation). Let's say you want to create a fullscreen dialog. Then you could change the following CSS variable to achieve it.\n\n```css\nweb-dialog {\n  --dialog-container-padding: 0;\n  --dialog-border-radius: 0;\n  --dialog-max-width: 100vw;\n  --dialog-height: 100%;\n  --dialog-animation-duration: 0;\n}\n```\n\n```html\n\u003cweb-dialog\u003e\n  \u003cheader\u003e\n    \u003ch3\u003eThe standard Lorem Ipsum passage\u003c/h3\u003e\n  \u003c/header\u003e\n  \u003carticle\u003e\n    \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing...\u003c/p\u003e\n  \u003c/article\u003e\n  \u003cfooter\u003e\n    \u003cbutton\u003eOkay...\u003c/button\u003e\n  \u003c/footer\u003e\n\u003c/web-dialog\u003e\n```\n\nWhen opened the dialog will look like this.\n\n\u003cimg src=\"https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example5.png\" width=\"600\"\u003e\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#events)\r\n\r\n## ➤ Events\n\nThe dialog can dispatch 3 different events.\n\n* **open** - The first event is the `open` event which is dispatched when the dialog opens.\n* **closing** - The second event is the `closing` event which is dispatched when the dialog is about to close due to the user clicking on the backdrop or pressing escape. If `.preventDefault()` is called on this event the dialog won't close.\n* **close** - The third event is the \u003ccode\u003eclose\u003c/code\u003e event which is dispatched when the dialog closes. If `.result` is set on the dialog, the `.detail` property of the `close` event will have the value of the result.\n\nHere's an example on how you'd use the events.\n\n```js\nconst $dialog = document.querySelector(\"web-dialog\");\n\n$dialog.addEventListener(\"open\", () =\u003e {\n  console.log(\"The dialog opened!\");\n});\n\n$dialog.addEventListener(\"closing\", () =\u003e {\n  console.log(\"The dialog is about to close because the backdrop was clicked or because escape was pressed!\");\n\n  // Don't allow the dialog to close\n  e.preventDefault();\n});\n\n$dialog.addEventListener(\"close\", e =\u003e {\n  console.log(\"The dialog closed!\", e.detail);\n});\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#opendialog)\r\n\r\n## ➤ `openDialog(...)`\n\nIf you want to use the dialog programmatically you can use the `openDialog(...)` function. This function makes sure to append content inside the dialog, adds it to the DOM and removes it when it closes. You can give an object with the following fields to the function.\n\n* **$content** - A DOM element that will be placed inside the dialog as content. This can also be a function that takes the dialog and appends the content for the dialog.\n* **$container** - A DOM element where the dialog will be placed inside. As default this is the `body` element.\n* **center** - Whether the dialog is centered. As default this is false.\n* **initialize** - A function that returns an instance of `WebDialog`. This is smart to overwrite if you for example have extended the WebDialog class and want to open that custom dialog instead.\n\nIn it's most simple form you can open a dialog like this:\n\n```js\nimport {openDialog} from \"web-dialog\";\n\nconst $template = document.createElement(\"template\");\n$template.innerHTML = `\n  \u003cspan\u003eThis is some content for the dialog!\u003c/span\u003e\n`;\n\nopenDialog({\n  $content: $template.content.cloneNode(true)\n});\n```\n\nWhen the `openDialog(...)` function above is called it will look like this.\n\n\u003cimg src=\"https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example8.png\" width=\"600\"\u003e\n\nThe `openDialog(...)` function returns an object with the following two properties.\n\n* **$dialog** - The dialog HTML element.\n* **resolver** - A promise that will resolve with the result of the dialog when closed.\n\nBased on the information above, here's a little more advanced example.\n\n```js\nimport {openDialog} from \"web-dialog\";\n\n// Create a template\nconst $template = document.createElement(\"template\");\n$template.innerHTML = `\n  \u003cbutton data-value=\"no\"\u003eNo\u003c/button\u003e\n  \u003cbutton data-value=\"yes\"\u003eYes\u003c/button\u003e\n`;\n\n// Open the dialog\nconst {$dialog, resolver} = openDialog({\n  $content: $template.content.cloneNode(true)\n});\n\n// Attach an event listener that sets the closes the dialog with the result when a button is clicked\n$dialog.querySelectorAll(\"button\").forEach($button =\u003e $button.addEventListener(\"click\", e =\u003e {\n  const result = e.target.dataset.value;\n  $dialog.close(result);\n}));\n\n// Wait for the result\nconst result = await resolver;\n\n// Print the result\nconsole.log(`The result was ${result}`);\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#lit-html--lit-element)\r\n\r\n## ➤ lit-html \u0026 lit-element\n\nHere's a little trick for you if you use [lit-element](https://github.com/polymer/lit-element) or [lit-html](https://github.com/polymer/lit-html). If you want to quickly open a dialog with some content you can use the render function of `lit-html` like this.\n\n```js\nimport {openDialog} from \"web-dialog\";\nimport {render} from \"lit-html\";\n\nopenDialog({\n  $content: $dialog =\u003e render(html`\n    \u003ch3\u003eDo you like this dialog?\u003c/h3\u003e\n    \u003cbutton @click=\"${() =\u003e $dialog.close()}\"\u003eUmm, yeah!\u003c/button\u003e\n  `, $dialog)\n});\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#extend-webdialog)\r\n\r\n## ➤ Extend WebDialog\n\nIt is totally possible to extend the dialog. The only thing you have to do is define a new class and extend the `WebDialog` class. Then you can add your custom logic and define a new custom element with your new class. Here's an example of what you could if you for example want a custom dialog that shows an image.\n\n```js\nimport { WebDialog } from \"web-dialog\";\n\n// Create a template for the content of the dialog\nconst $template = document.createElement(\"template\");\n$template.innerHTML = `\n  \u003cstyle\u003e\n    #img {\n      width: 100%;\n      height: 400px;\n      object-fit: cover;\n    }\n  \u003c/style\u003e\n  \u003cimg id=\"img\" /\u003e\n`;\n\n// Create a class extending the WebDialog class.\nclass ImageDialog extends WebDialog {\n\n  // Observe the src attribute so we can react each time it changes\n  static get observedAttributes () { return [\"src\"]; }\n\n  // Make sure the src property is getting reflected as an attribute\n  get src () { return this.hasAttribute(\"src\"); }\n  set src (value) { this.setAttribute(\"src\", value); }\n  \n  constructor () {\n    super();\n    \n    // Append the dialog content\n    this.$dialog.appendChild($template.content.cloneNode(true));\n    \n    // Get a reference to the img element\n    this.$img = this.shadowRoot.querySelector(\"#img\");\n  }\n  \n  // Each time the src attribute changes we set the src of the image element\n  attributeChangedCallback (name, newValue) {\n    switch (name) {\n      case \"src\":\n        this.$img.src = newValue;\n        break;\n    }\n  }\n}\n\n// Remember to define your new custom element\ncustomElements.define(\"image-dialog\", ImageDialog);\n```\n\nAfter you have defined your new dialog you are be able to use it like this.\n\n```html\n\u003cimage-dialog open center src=\"https://i.ytimg.com/vi/NCZ0eg1zEvw/maxresdefault.jpg\"\u003e\u003c/image-dialog\u003e\n```\n\nOr this\n\n```js\nimport {openDialog} from \"web-dialog\";\n\nopenDialog({\n  initialize: () =\u003e {\n    const $dialog = new ImageDialog();\n    $dialog.src = `https://i.ytimg.com/vi/NCZ0eg1zEvw/maxresdefault.jpg`;\n    $dialog.center = true;\n    return $dialog;\n  }\n});\n```\n\nWhen our custom dialog opens it will look like this.\n\n\u003cimg src=\"https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example9.png\" width=\"600\"\u003e\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#documentation)\r\n\r\n## ➤ Documentation\n\nThis section documents the `attributes`, `css variables` and `slots` of the web components this library exposes.\n\n### web-dialog\n\nA dialog web component that can be used to display highly interruptive messages.\n\n#### Properties\n\n| Property          | Attribute | Type             | Description                                 |\n|-------------------|-----------|------------------|---------------------------------------------|\n| `center`          | `center`  |                  | Whether the dialog is centered on the page. |\n| `onBackdropClick` |           |                  |                                             |\n| `onKeyDown`       |           |                  |                                             |\n| `open`            | `open`    |                  | Whether the dialog is opened.               |\n| `result`          |           | `R \\| undefined` |                                             |\n\n#### Methods\n\n| Method            | Type                              | Description                                      |\n|-------------------|-----------------------------------|--------------------------------------------------|\n| `assertClosing`   | `(): any`                         | Dispatches an event that, if asserts whether the dialog can be closed.\u003cbr /\u003eIf \"preventDefault()\" is called on the event, assertClosing will return true\u003cbr /\u003eif the event was not cancelled. It will return false if the event was cancelled. |\n| `close`           | `(result?: R \\| undefined): void` | Closes the dialog with a result.                 |\n| `didClose`        | `(): void`                        | Clean up the dialog after it has closed.         |\n| `didOpen`         | `(): void`                        | Setup the dialog after it has opened.            |\n| `onBackdropClick` | `(): void`                        | Closes the dialog when the backdrop is clicked.  |\n| `onKeyDown`       | `(e: any): void`                  | Closes the dialog when escape is pressed.        |\n| `show`            | `(): void`                        | Shows the dialog.                                |\n\n#### Events\n\n| Event     | Description                                      |\n|-----------|--------------------------------------------------|\n| `close`   | This event is fired when the dialog closes.      |\n| `closing` | This event is fired before the dialog is closed by clicking escape or on the backdrop. The event is cancellable which means `event.preventDefault()` can cancel the closing of the dialog. |\n| `open`    | This event is fired when the dialog opens.       |\n\n#### CSS Shadow Parts\n\n| Part       | Description    |\n|------------|----------------|\n| `backdrop` | Backdrop part. |\n| `dialog`   | Dialog part.   |\n\n#### CSS Custom Properties\n\n| Property                      | Description                                  |\n|-------------------------------|----------------------------------------------|\n| `--dialog-animation-duration` | Duration of the dialog animation.            |\n| `--dialog-animation-easing`   | Easing of the dialog animation.              |\n| `--dialog-backdrop-bg`        | Background of the backdrop.                  |\n| `--dialog-bg`                 | Background of the dialog.                    |\n| `--dialog-border-radius`      | Border radius of the dialog.                 |\n| `--dialog-box-shadow`         | Box shadow of the dialog.                    |\n| `--dialog-color`              | Color of the dialog.                         |\n| `--dialog-container-padding`  | Padding of the host container of the dialog. |\n| `--dialog-height`             | Height of the dialog.                        |\n| `--dialog-max-height`         | Max height of the dialog.                    |\n| `--dialog-max-width`          | Max width of the dialog.                     |\n| `--dialog-overflow-x`         | Overflow of the x-axis.                      |\n| `--dialog-overflow-y`         | Overflow of the y-axis.                      |\n| `--dialog-padding`            | Padding of the dialog.                       |\n| `--dialog-width`              | Width of the dialog.                         |\n| `--dialog-z-index`            | Z-index of the dialog.                       |\n\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#contributors)\r\n\r\n## ➤ Contributors\n\t\n\n| [\u003cimg alt=\"Andreas Mehlsen\" src=\"https://avatars1.githubusercontent.com/u/6267397?s=460\u0026v=4\" width=\"100\"\u003e](https://twitter.com/andreasmehlsen) | [\u003cimg alt=\"You?\" src=\"https://joeschmoe.io/api/v1/random\" width=\"100\"\u003e](https://github.com/andreasbm/weightless/blob/master/CONTRIBUTING.md) |\n|:--------------------------------------------------:|:--------------------------------------------------:|\n| [Andreas Mehlsen](https://twitter.com/andreasmehlsen) | [You?](https://github.com/andreasbm/weightless/blob/master/CONTRIBUTING.md) |\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)\r\n\r\n## ➤ License\n\t\nLicensed under [MIT](https://opensource.org/licenses/MIT).\n\n  ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fweb-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreasbm%2Fweb-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fweb-dialog/lists"}