{"_id":"@borvik/dialog-polyfill","_rev":"2-b6cc67e97f4774f2e72f07c76bef878c","name":"@borvik/dialog-polyfill","dist-tags":{"latest":"0.5.7-beta.0"},"versions":{"0.5.6":{"name":"@borvik/dialog-polyfill","version":"0.5.6","description":"Polyfill for the dialog element","main":"dist/dialog-polyfill.js","module":"dist/dialog-polyfill.esm.js","repository":{"type":"git","url":"git+https://github.com/Borvik/dialog-polyfill.git"},"author":{"name":"The Chromium Authors"},"license":"BSD","homepage":"https://github.com/Borvik/dialog-polyfill","devDependencies":{"chai":"^4.2.0","mocha":"^6.0.2","npm-run-all":"^4.1.5","rollup":"^1.3.0"},"scripts":{"build":"npm-run-all -p build:*","build:css":"cp dialog-polyfill.css dist/dialog-polyfill.css","build:esm":"rollup index.js --file dist/dialog-polyfill.esm.js --format esm","build:umd":"rollup index.js --file dist/dialog-polyfill.js --format umd --name dialogPolyfill","prepublishOnly":"npm run build","test":"open test.html"},"gitHead":"bf7588122281289863cdfc783f98eb79e1301cd9","bugs":{"url":"https://github.com/Borvik/dialog-polyfill/issues"},"_id":"@borvik/dialog-polyfill@0.5.6","_nodeVersion":"12.19.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-kQCNvXxWY4bmC7HI1ih2cx4icyxrQD61cAxcRn93m9fqjLAAoHt39DHwpYvlDCEDEZGRAP53/SJIYzKD9yu7KA==","shasum":"f3510676ae50e285be8af9d0a26065ed6b6462f0","tarball":"https://registry.npmjs.org/@borvik/dialog-polyfill/-/dialog-polyfill-0.5.6.tgz","fileCount":11,"unpackedSize":102108,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLy4VCRA9TVsSAnZWagAA/4sP/AxzWrqPG6ZcUQNsk2qs\neVP5Qp42hEPzLsK0dw1jNYPK+d+YoChk6zJ7c2e8puekagLKQvQotnl6JAng\nO6VYyxJ5pb36QXcEkGBigOV2O1LltTGBAGVi8YgxeX9ervL28B5246uOUiFx\nuKRK2r6jDLvgP+Z4VsPkbhtRa7/N9NMrmD5yoFbYWOh12+9KO6O534jr8ypj\nRMSemrirnkTLVWOeeIbQx+psa4MK1GhNaaX8N4wIapUWy0ZofnLuKAGoNpIf\n9OsM6SxLwvl4CCBHg8cuvgBON6+vyGZm2azEyOmbeRC4gha239ZvmAufCX9t\nax48L9TOuaGt6EEFLp5mlV4/eQPTI9mpdM0zil57fszGpYexdoONy0xD9qKA\n5WRXdhXxpGHrWaCnrPQ5olVf91slXTBdmCPcAuhyuOCoBgPTtsQGSKEHsXom\n1B8z0xZaaWNPfavkOVqG7l0tC6wA7kmaemPJ1o7yntQMWRDjHlm4yXqYpIUJ\nFZEj7xcEuoYVy4mbfb2s8UYA87ZvulXv3LaO25X6oi7hQSWOaJZ04fETMnrX\n9fPCuYgzWxsVtJdR1h4LLNx+MBDiWW/4ptuA7+eMIqUbCfeObYjP14Y2NB5H\n6gXn+3+JdwUMl+pclOtuzAu0t/t9j4e/+7zllUHvzvHvOn+KIcZAFJs/pA23\nIsYc\r\n=75a6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICV/IEUO0VU66E+IS7jmtqSLQxU+f5JputMmxmyEi4xWAiEAkExLxeG4pyrpxfloN+RK5RaxV9BANYZg40Uf7s07uHY="}]},"_npmUser":{"name":"borvik","email":"ckolkman@treorisoft.com"},"directories":{},"maintainers":[{"name":"borvik","email":"ckolkman@treorisoft.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dialog-polyfill_0.5.6_1613704725407_0.6569648219567985"},"_hasShrinkwrap":false},"0.5.7-beta.0":{"name":"@borvik/dialog-polyfill","version":"0.5.7-beta.0","description":"Polyfill for the dialog element","main":"dist/dialog-polyfill.js","module":"dist/dialog-polyfill.esm.js","repository":{"type":"git","url":"git+https://github.com/Borvik/dialog-polyfill.git"},"author":{"name":"The Chromium Authors"},"license":"BSD","homepage":"https://github.com/Borvik/dialog-polyfill","devDependencies":{"chai":"^4.2.0","mocha":"^6.0.2","npm-run-all":"^4.1.5","rollup":"^1.3.0"},"scripts":{"build":"npm-run-all -p build:*","build:css":"cp dialog-polyfill.css dist/dialog-polyfill.css","build:esm":"rollup index.js --file dist/dialog-polyfill.esm.js --format esm","build:umd":"rollup index.js --file dist/dialog-polyfill.js --format umd --name dialogPolyfill","prepublishOnly":"npm run build","test":"open test.html"},"gitHead":"08f18c6a13b6712d3a8eba011145b1fbec5c716e","bugs":{"url":"https://github.com/Borvik/dialog-polyfill/issues"},"_id":"@borvik/dialog-polyfill@0.5.7-beta.0","_nodeVersion":"12.19.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-7jfTP2Ov4pu9+O8zv+qekxHXtwdUF2SV3yrr5kPpzj5OFXbpqoao1AHbFziq6bB7FRJuQqnbt0dFe6KQAgMyNQ==","shasum":"aad25e835bf808a2148193d572998ff986c87181","tarball":"https://registry.npmjs.org/@borvik/dialog-polyfill/-/dialog-polyfill-0.5.7-beta.0.tgz","fileCount":11,"unpackedSize":101927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL6ZsCRA9TVsSAnZWagAAsQMP/jzYC8MlANhGbZEaz32s\naS7j0pVGoBTa6upUkjgs81Jlj1zf+zE7RNBs58UPsU5YLz4tapPjcnpmCAyw\n0MSkGqPXxfznxZvqNEhaKu0V69G/FtZbUueYJ0jrTsJBnTakmEz9CcSzHFNG\nqC6vRVo7GlDyNEVtBPCjNQ0958ulVvekt+sAxL7ogLk24vVwxZN0Zuvn2b+s\nyFU9SOpetUtZ8VLx9llvmYHPtcKvulwLd4EhU7zaCoW/suPpgOaAMpVZ0lJ4\nK9n9pSIzFxvXiuqx2m6djKSqvBKyvfYCi+hWBXjzvxROjjDvH4JQIR4e+80g\n6k2SLJbsvTa49rlw3p5Pun4glhLatYECP4JxO2xj8vJSG0r4gobae4iTK9L3\ns5eIE0uQqcc92bDF+Fho+fC05oWGhAxFtPKs4e5jdPASmr8sDJ4nR9pNYkJ/\n7VjYUMf8hmQgG8+aANKawcbPf82jJp+K9bQcTWLN/XQGWMLKe47jXT0SSEbm\nCTL7O9rloB89WYUuONPiPzBu2prSLIjA6W20A6fk8S6eOCec8NDg27X8mx+3\ni/++MQlOADTIet3ZY0QxzmJ6iamH3Sj9e3cyEwkeTUzXVlKaVEGLBk75qScf\nRJoNeIOFEWT+jVZcE2uWs8mpkTqvp4YBJ3CpdHIB7FyYYIFZrMg71eMCWYqx\nWmZx\r\n=l+qv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHH2hHqBUauVkF7qS1wO/k7ZrxRw10NPPZwGlyCXYan7AiEAqUTZDOjVPtn9RptJDi4AkS/zlPPEiGjlVqOOWY7Lib4="}]},"_npmUser":{"name":"borvik","email":"ckolkman@treorisoft.com"},"directories":{},"maintainers":[{"name":"borvik","email":"ckolkman@treorisoft.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dialog-polyfill_0.5.7-beta.0_1613735531741_0.7604386877269389"},"_hasShrinkwrap":false}},"time":{"created":"2021-02-19T03:18:45.365Z","0.5.6":"2021-02-19T03:18:45.583Z","modified":"2022-04-04T20:13:19.363Z","0.5.7-beta.0":"2021-02-19T11:52:11.933Z"},"maintainers":[{"name":"borvik","email":"ckolkman@treorisoft.com"}],"description":"Polyfill for the dialog element","homepage":"https://github.com/Borvik/dialog-polyfill","repository":{"type":"git","url":"git+https://github.com/Borvik/dialog-polyfill.git"},"author":{"name":"The Chromium Authors"},"bugs":{"url":"https://github.com/Borvik/dialog-polyfill/issues"},"license":"BSD","readme":"This is a fork of https://github.com/GoogleChrome/dialog-polyfill. Because of the polyfill nature, I'm fairly sure (but not certain) the feature I wanted would not be added (or merged back - and rightly so) as it would go beyond the polyfill it was designed to be.\n\nEssentially I wanted to transform an ordinary `
` into a dialog so I could avoid the `` stacking context and have a element with a `z-index` greater than the dialog show on top of it (think custom select/context menu or other dropdown).\n\n---\n\ndialog-polyfill.js is a polyfill for `` and `
`.\nCheck out [some demos](https://googlechrome.github.io/dialog-polyfill/)!\n\n`` is an element for a popup box in a web page, including a modal option which will make the rest of the page inert during use.\nThis could be useful to block a user's interaction until they give you a response, or to confirm an action.\nSee the [HTML spec](https://html.spec.whatwg.org/multipage/forms.html#the-dialog-element).\n\n## Usage\n\n### Installation\n\nYou may optionally install via NPM -\n\n $ npm install dialog-polyfill\n\n\nThere are several ways that to include the dialog polyfill:\n\n* include `dist/dialog-polyfill.js` script directly in your HTML, which exposes a global `dialogPolyfill` function.\n* `import` (es modules)\n* `require` (commonjs/node)\n\n\n```javascript\n// direct import (script module, deno)\nimport dialogPolyfill from './node_modules/dialog-polyfill/dist/dialog-polyfill.esm.js';\n\n// *OR*\n\n// modern es modules with rollup/webpack bundlers, and node via esm module\nimport dialogPolyfill from 'dialog-polyfill'\n\n// *OR*\n\n// traditional commonjs/node and browserify bundler\nconst dialogPolyfill = require('dialog-polyfill')\n```\n\n\n### Supports\n\nThis polyfill works on modern versions of all major browsers.\nIt also supports IE9 and above.\nIt can work when used inside Shadow DOM, but it's not recommended.\n\n### Steps\n\n1. Include the CSS in the `` of your document, and the JS anywhere before referencing `dialogPolyfill`.\n2. Create your dialog elements within the document. See [limitations](#limitations) for more details.\n3. Register the elements using `dialogPolyfill.registerDialog()`, passing it one node at a time. This polyfill won't replace native support.\n4. Use your `` elements!\n\n## Script Global Example\n\n```html\n\n \n\n\n \n I'm a dialog!\n \n \n \n \n \n \n\n```\n\n### ::backdrop\n\nIn native ``, the backdrop is a pseudo-element.\nWhen using the polyfill, the backdrop will be an adjacent element:\n\n```css\ndialog::backdrop { /* native */\n background-color: green;\n}\ndialog + .backdrop { /* polyfill */\n background-color: green;\n}\n```\n\n## Limitations\n\nIn the polyfill, modal dialogs have limitations-\n\n- They should not be contained by parents that create a stacking context, see below\n- The browser's chrome may not always be accessible via the tab key\n- Changes to the CSS top/bottom values while open aren't retained\n\n### Stacking Context\n\nThe major limitation of the polyfill is that dialogs should not have parents that create [a stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).\nThe easiest way to solve this is to move your `` element to be a child of ``.\n\nIf this isn't possible you may still be able to use the dialog.\nHowever, you may want to resolve it for two major reasons-\n\n1. The polyfill can't guarantee that the dialog will be the top-most element of your page\n2. The dialog may be positioned incorrectly as they are positioned as part of the page layout _where they are opened_ (defined by spec), and not at a fixed position in the user's browser.\n\nTo position a dialog in the center (regardless of user scroll position or stacking context), you can specify the following CSS-\n\n```css\ndialog {\n position: fixed;\n top: 50%;\n transform: translate(0, -50%);\n}\n```\n\nThis is also provided as a helper CSS class in the polyfill CSS, `.fixed`.\nYou can apply by using HTML like ``.\n\n## Extensions\n\n### Focus\n\nThe WAI-ARIA doc suggests returning focus to the previously focused element after a modal dialog is closed.\nHowever, this is not part of the dialog spec itself.\nSee [this snippet](https://gist.github.com/samthor/babe9fad4a65625b301ba482dad284d1) to add this, even to the native `dialog`.\n","readmeFilename":"README.md"}