github · koddsson · Aug 15, 2022 · Aug 12, 2022 · Aug 12, 2022 · Aug 12, 2022
@@ -1,9 +1,9 @@
 # &lt;details-dialog&gt; element
 
-A modal dialog that's opened with a &lt;details&gt; button.
+A modal dialog opened with a &lt;details&gt; button.
 
 ## Installation
-
+Available on [npm](https://www.npmjs.com/) as [**@github/details-dialog-element**](https://www.npmjs.com/package/@github/details-dialog-element).
 ```
 $ npm install --save @github/details-dialog-element
 ```
@@ -77,23 +77,14 @@ document.addEventListener('details-dialog-close', function(event) {
 ## Browser support
 
 Browsers without native [custom element support][support] require a [polyfill][].
-
 - Chrome
 - Firefox
 - Safari
 - Microsoft Edge
 
-## Development
-
-```
-npm install
-npm test
-```
+[support]: https://caniuse.com/custom-elementsv1
+[polyfill]: https://github.com/webcomponents/custom-elements
 
 ## License
 
-Distributed under the MIT license. See LICENSE for details.
-
-[fragment]: https://github.com/github/include-fragment-element/
-[support]: https://caniuse.com/#feat=custom-elementsv1
-[polyfill]: https://github.com/webcomponents/custom-elements
+Distributed under the MIT license. See LICENSE for details.
@@ -0,0 +1,11 @@
+import {generateCustomData} from 'cem-plugin-vs-code-custom-data-generator'
+import {readme} from '@github/cem-plugin-readme'
+
+export default {
+  packagejson: true,
+  globs: ['src/index.ts'],
+  plugins: [
+    readme(),
+    generateCustomData()
+  ]
+}
@@ -0,0 +1,91 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "### Markup\n\n```html\n<details>\n  <summary>Open dialog</summary>\n  <details-dialog>\n    Modal content\n    <button type=\"button\" data-close-dialog>Close</button>\n  </details-dialog>\n</details>\n```\n\n## Deferred loading\n\nDialog content can be loaded from a server by embedding an [`<include-fragment>`][fragment] element.\n\n```html\n<details>\n  <summary>Robots</summary>\n  <details-dialog src=\"/robots\" preload>\n    <include-fragment>Loading…</include-fragment>\n  </details-dialog>\n</details>\n```\n\nThe `src` attribute value is copied to the `<include-fragment>` the first time the `<details>` button is toggled open, which starts the server fetch.\n\nIf the `preload` attribute is present, hovering over the `<details>` element will trigger the server fetch.\n\n## Events\n\n### `details-dialog-close`\n\n`details-dialog-close` event is fired from `<details-dialog>` when a request to close the dialog is made from\n\n- pressing <kbd>escape</kbd>,\n- submitting a `form[method=\"dialog\"]`\n- clicking on `summary, form button[formmethod=\"dialog\"], [data-close-dialog]`, or\n- `dialog.toggle(false)`\n\nThis event bubbles, and can be canceled to keep the dialog open.\n\n```js\ndocument.addEventListener('details-dialog-close', function(event) {\n  if (!confirm('Are you sure?')) {\n    event.preventDefault()\n  }\n})\n```",
+          "name": "DetailsDialogElement",
+          "members": [
+            {
+              "kind": "field",
+              "name": "CLOSE_ATTR",
+              "static": true
+            },
+            {
+              "kind": "field",
+              "name": "CLOSE_SELECTOR",
+              "static": true
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string | null"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "preload",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "toggle",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "open",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "src"
+            },
+            {
+              "name": "preload"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "details-dialog",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "DetailsDialogElement",
+            "module": "src/index.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "details-dialog",
+          "declaration": {
+            "name": "DetailsDialogElement",
+            "module": "src/index.ts"
+          }
+        }
+      ]
+    }
+  ]
+}