{"id":14990259,"url":"https://github.com/aegisjsproject/aegis-modal","last_synced_at":"2025-08-23T06:36:46.619Z","repository":{"id":225927520,"uuid":"767178210","full_name":"AegisJSProject/aegis-modal","owner":"AegisJSProject","description":"Aegis  component for accessible modal elements","archived":false,"fork":false,"pushed_at":"2025-08-16T13:53:53.000Z","size":1153,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-16T15:24:41.422Z","etag":null,"topics":["aegis","aegis-component","custom-element","dialog","modal","web-component"],"latest_commit_sha":null,"homepage":"https://npmjs.org/package/@aegisjsproject/aegis-modal","language":"JavaScript","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/AegisJSProject.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"shgysk8zer0","liberapay":"shgysk8zer0"}},"created_at":"2024-03-04T20:53:04.000Z","updated_at":"2025-08-16T13:53:57.000Z","dependencies_parsed_at":"2024-05-22T14:51:55.300Z","dependency_job_id":"01d025f8-a4d1-4c33-bf28-d3ccd0e71562","html_url":"https://github.com/AegisJSProject/aegis-modal","commit_stats":null,"previous_names":["aegisjsproject/aegis-modal"],"tags_count":3,"template":false,"template_full_name":"AegisJSProject/template","purl":"pkg:github/AegisJSProject/aegis-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AegisJSProject%2Faegis-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AegisJSProject%2Faegis-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AegisJSProject%2Faegis-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AegisJSProject%2Faegis-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AegisJSProject","download_url":"https://codeload.github.com/AegisJSProject/aegis-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AegisJSProject%2Faegis-modal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271745679,"owners_count":24813521,"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","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["aegis","aegis-component","custom-element","dialog","modal","web-component"],"created_at":"2024-09-24T14:19:47.532Z","updated_at":"2025-08-23T06:36:46.593Z","avatar_url":"https://github.com/AegisJSProject.png","language":"JavaScript","funding_links":["https://github.com/sponsors/shgysk8zer0","https://liberapay.com/shgysk8zer0","https://liberapay.com/shgysk8zer0/donate"],"categories":[],"sub_categories":[],"readme":"# `@aegisjsproject/aegis-modal`\n\nAn `\u003caegis-modal\u003e` component built using [`@aegisjsproject/component`](https://npmjs.org/package/@aegisjsproject/component),\noffering full built-in accessibility, customization, and enhanced security.\n\n[![CodeQL](https://@github.com/AegisJSProject/aegis-modal/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/shgysk8zer0/npm-template/actions/workflows/codeql-analysis.yml)\n![Node CI](https://@github.com/AegisJSProject/aegis-modal/workflows/Node%20CI/badge.svg)\n![Lint Code Base](https://@github.com/AegisJSProject/aegis-modal/workflows/Lint%20Code%20Base/badge.svg)\n\n[![GitHub license](https://img.shields.io/github/license/AegisJSProject/aegis-modal.svg)](https://@github.com/AegisJSProject/aegis-modal/blob/master/LICENSE)\n[![GitHub last commit](https://img.shields.io/github/last-commit/AegisJSProject/aegis-modal.svg)](https://@github.com/AegisJSProject/aegis-modal/commits/master)\n[![GitHub release](https://img.shields.io/github/release/AegisJSProject/aegis-modal?logo=github)](https://@github.com/AegisJSProject/aegis-modal/releases)\n[![GitHub Sponsors](https://img.shields.io/github/sponsors/shgysk8zer0?logo=github)](https://github.com/sponsors/shgysk8zer0)\n\n[![npm](https://img.shields.io/npm/v/@aegisjsproject/aegis-modal)](https://www.npmjs.com/package/@aegisjsproject/aegis-modal)\n![node-current](https://img.shields.io/node/v/@aegisjsproject/aegis-modal)\n![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/%40aegisjsproject%aegis-modal)\n[![npm](https://img.shields.io/npm/dw/@aegisjsproject/aegis-modal?logo=npm)](https://www.npmjs.com/package/@aegisjsproject/aegis-modal)\n\n[![GitHub followers](https://img.shields.io/github/followers/AegisJSProject.svg?style=social)](https://github.com/AegisJSProoject)\n![GitHub forks](https://img.shields.io/github/forks/AegisJSProject/aegis-modal.svg?style=social)\n![GitHub stars](https://img.shields.io/github/stars/AegisJSProject/aegis-modal.svg?style=social)\n[![Twitter Follow](https://img.shields.io/twitter/follow/shgysk8zer0.svg?style=social)](https://twitter.com/shgysk8zer0)\n\n[![Donate using Liberapay](https://img.shields.io/liberapay/receives/shgysk8zer0.svg?logo=liberapay)](https://liberapay.com/shgysk8zer0/donate \"Donate using Liberapay\")\n- - -\n\n- [Code of Conduct](./.github/CODE_OF_CONDUCT.md)\n- [Contributing](./.github/CONTRIBUTING.md)\n\u003c!-- - [Security Policy](./.github/SECURITY.md) --\u003e\n\n## Important differences compared to [`\u003cdialog\u003e`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)\n\n- `\u003caegis-modal\u003e` is modal-only\n- `\u003caegis-modal\u003e` **SHOULD** only be appended as a direct child of `\u003cbody\u003e`\n- `\u003caegis-modal\u003e` automatically adds a sticky header and close button\n- Provides simple open/close animations\n- Has an `autoremove` attribute to automatically remove the element once closed\n- Supports an optional `AbortController` in the `show({ signal })` method\n- Adds `whenOpened` and `whenClosed` getter methods, returning relevant promises\n- Adds a static `create()` method, which creates and optionally appends and opens if given a `signal`\n\n## Compatibility / polyfills\n\nThe entire AegisJSProject ecosystem requires support for [`Element.prototype.setHTML()`](https://github.com/WICG/sanitizer-api)\nand [Constructable Stylesheets](https://web.dev/articles/constructable-stylesheets).\nAdditionally, [`Promise.withResolvers()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers)\nas well as [`inert`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert)\nare also required for proper functionality.\n\nSuch polyfills are *not* included to avoid the bloat/duplication of polyfills. However,\nan extensive polyfill script that ensures compatibility is available via:\n\n```html\n\u003cscript type=\"application/javascript\" defer=\"\" referrerpolicy=\"no-referrer\" crossorigin=\"anonymous\" integrity=\"sha384-Shkrmxly5RI9mCU8DQr6l4VLVJzjPzgx9KP/f5i7pEcl7ZUt0wHiAweGjbpjU2d5\" src=\"https://unpkg.com/@shgysk8zer0/polyfills@0.3.1/all.min.js\" fetchpriority=\"auto\"\u003e\u003c/script\u003e\n```\n\n## Installation\n\n### Via CDN:\n\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/@aegisjsproject/aegis-modal[@:version]/aegis-modal.js\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"\u003e\u003c/script\u003e\n```\n\n### Via npm\n\n```bash\nnpm i @aegisjsproject/aegis-markdown\n```\n\n### Via [Git Submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules)\n\n```bash\ngit subomdule add https://github.com/AegisJSProject/aegis-modal [:destination]\n```\n\n## Using [`\u003cscript type=\"importmap\"\u003e`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)\n\nAll `@aegisjsproject/*` libraries are available and ready to use without a build\nprocess such as webpack, but will require a `\u003cscript type=\"importmap\"\u003e` that includes\nall dependencies:\n\n\n### Short \u0026 Basic\n\n```html\n\u003cscript type=\"importmap\"\u003e\n{\n  \"imports\": {\n    \"@aegisjsproject/\": \"https://unpkg.com/@aegisjsproject/\"\n  }\n}\n\u003c/script\u003e\n```\n\n### More detailed \u0026 with versions\n\n```html\n{\n  \"imports\": {\n    \"@aegisjsproject/core/\": \"https://unpkg.com/@aegisjsproject/core@0.1.2/\",\n    \"@aegisjsproject/styles/\": \"https://unpkg.com/@aegisjsproject/styles@0.1.1/\",\n    \"@aegisjsproject/component/\": \"https://unpkg.com/@aegisjsproject/component@0.1.1/\",\n    \"@aegisjsproject/aegis-modal/\": \"https://unpkg.com/@aegisjsproject/aegis-modal@0.0.1/\"\n  }\n}\n```\n\n... or ...\n\n```html\n\u003cscript type=\"importmap\"\u003e\n{\n  \"imports\": {\n    \"@aegisjsproject/\": \"/node_modules/@aegisjsproject/\"\n  }\n}\n\u003c/script\u003e\n```\n\n## Example\n\n```html\n\u003caegis-modal\u003e\n  \u003ch1 slot=\"heading\"\u003eLorem Ipsum\u003c/h1\u003e\n  \u003cp\u003eError aut mollitia qui alias aut. Temporibus vitae impedit deserunt repellat voluptatibus et. Minima aut et tempore. Ut officiis sed consectetur. Voluptas praesentium ipsam rerum eligendi dolorum. Voluptatem similique omnis quis quidem.\u003c/p\u003e\n\u003c/aegis-modal\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faegisjsproject%2Faegis-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faegisjsproject%2Faegis-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faegisjsproject%2Faegis-modal/lists"}