{"_id":"@ambiki/details-modal-element","name":"@ambiki/details-modal-element","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@ambiki/details-modal-element","version":"0.1.0","description":"A modal component that works with the <details> tag.","homepage":"https://github.com/Ambiki/ambiki-packages/tree/main/custom-elements/details-modal-element","bugs":{"url":"https://github.com/Ambiki/ambiki-packages/issues?q=is%3Aopen+is%3Aissue+label%3Adetails-modal"},"repository":{"type":"git","url":"git+https://github.com/Ambiki/ambiki-packages.git","directory":"custom-elements/details-modal-element"},"publishConfig":{"access":"public"},"type":"module","module":"dist/index.js","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc && node esbuild.config.mjs --watch","clean":"rm -rf ./dist","prepublishOnly":"tsc && node esbuild.config.mjs"},"keywords":["dialog","modal"],"license":"MIT","dependencies":{"tabbable":"^5.3.3"},"devDependencies":{"@ambiki/utils":"workspace:^"},"gitHead":"f19c926847346cbb0159236aaeeef8b10f7a299d","_id":"@ambiki/details-modal-element@0.1.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-bIDuNDWZMQe7lvls5RJzGHEz8Sy8cX3QehVbXElvGYZqGlNE1nqjWBO+xuA29rvSeLsXU8VH7anT23EKKNZbUw==","shasum":"d44dc8edbc16c5ea78e4716b00db8539fe9c7f07","tarball":"https://registry.npmjs.org/@ambiki/details-modal-element/-/details-modal-element-0.1.0.tgz","fileCount":4,"unpackedSize":4819,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrHulcF9OUS7hRkCGCjn7iFHB/ssoXuKuNHvNdZFkXYwIgVnZRWekvUPwQYXw8CBwWY/Xr/TlJ/Wuy55SlM/1d8UQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitqkrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn3A/8DV4oQ78OreJLnmeoRtB0DSfPRuP/VTyVEEVRsOHpCHrz89JV\r\n7a+lrturrrZro4Uq9I6DL3quwUiAxoRFJnfFY31YS+SOfmTVJxYTx2r0Bu5f\r\n2dj+HV///f6yCf+81NY8S2dKs4M3G5mHqBOzbYvogPLXMoVe/zGJwTH8asBm\r\n8YSrDdzTf7MJ1JnbZtLwkyQ8Es0RShqPxFnHsBIuLoMZIDNIxA+u5RHyM0DZ\r\nQK5hEoS4AwVnAloL0TYgueNZIwXQZeRcmqkhH13zwC6dogutl2iJrK0MlBE/\r\nqJS8eWE6xT6YVocGVlfJQxA75QupuvVvzuGt8OAcedOHbfKWl5OBa6xnqU8w\r\nSsTKM1eU7gXvWxkbyCmsUB2oc7ktYy/BlR4j0jtSSD5cecJa4gCkBihkXKAd\r\nWMC9y/MN+ANsbxW5rF4P4DNBerYy7S9/HBriZEy2rxZ+iLoVBzgW59Os/PnC\r\n1ReK7Cjg9VqBz4MXytYH7B1g8H4R5M9kLkvHaMqy2L38tqB8Gpzer2lM6Ztj\r\nLrBNODlDwoOv+SZJeB7eI6VOup4BEcf25xCTauL6ph0UHtvr1YguqR1cbEbY\r\ne4gO3lvOY4J1KftkSyOdFK5+2tS6NIc+YwACbrS7Ut4xN6ESeLk4YE6ZiGtX\r\nTsRCvNteWzQQ0V50m7i3z9pi62JawwWwhjo=\r\n=/tGV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aahmed-ambiki","email":"aahmed@mysidekicktherapy.com"},"directories":{},"maintainers":[{"name":"aahmed-ambiki","email":"aahmed@mysidekicktherapy.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/details-modal-element_0.1.0_1656138027791_0.011178143989976075"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-25T06:20:27.706Z","0.1.0":"2022-06-25T06:20:27.946Z","modified":"2022-06-25T06:20:28.101Z"},"maintainers":[{"name":"aahmed-ambiki","email":"aahmed@mysidekicktherapy.com"}],"description":"A modal component that works with the <details> tag.","homepage":"https://github.com/Ambiki/ambiki-packages/tree/main/custom-elements/details-modal-element","keywords":["dialog","modal"],"repository":{"type":"git","url":"git+https://github.com/Ambiki/ambiki-packages.git","directory":"custom-elements/details-modal-element"},"bugs":{"url":"https://github.com/Ambiki/ambiki-packages/issues?q=is%3Aopen+is%3Aissue+label%3Adetails-modal"},"license":"MIT","readme":"# Details Modal Element\n\nA modal component that works with the `<details>` tag.\n\n## Installation\n\n```bash\nnpm install @ambiki/details-modal-element\n```\n\n## Usage\n\n```js\nimport '@ambiki/details-modal-element'\n```\n\n### Markup\n\n```html\n<details>\n  <summary>Open dialog</summary>\n  <details-modal>\n    <p>\n      Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n    </p>\n  </details-modal>\n</details>\n```\n\nInitial focus can be changed with the `autofocus` attribute.\n\n```html\n<details>\n  <summary>Open dialog</summary>\n  <details-modal>\n    <input type=\"text\" autofocus>\n  </details-modal>\n</details>\n```\n\n### Closing the modal\n\nModal can be closed using the `data-modal-close` attribute.\n\n```html\n<button type=\"button\" data-modal-close>Close modal</button>\n```\n\nModal can also be closed using the `method=\"dialog\"` attribute on the `<form>`.\n\n```html\n<details>\n  <summary>Open dialog</summary>\n  <details-modal>\n    <form method=\"dialog\">\n      <button type=\"submit\">Close modal</button>\n    </form>\n  </details-modal>\n</details>\n```\n\n## License\nDistributed under the MIT license.\n","readmeFilename":"README.md"}