{"_id":"selectlist-polyfill","_rev":"1-de510bd56303280c618a5f92e771e353","name":"selectlist-polyfill","dist-tags":{"latest":"0.3.0"},"versions":{"0.2.0":{"name":"selectlist-polyfill","version":"0.2.0","description":"Polyfill for the selectlist element","type":"module","main":"dist/polyfill.js","repository":{"type":"git","url":"git+https://github.com/luwes/selectlist-polyfill.git"},"author":{"name":"Wesley Luyten","email":"me@wesleyluyten.com","url":"https://wesleyluyten.com"},"license":"MIT","homepage":"https://github.com/luwes/selectlist-polyfill#readme","bugs":{"url":"https://github.com/luwes/selectlist-polyfill/issues"},"scripts":{"lint":"npx eslint src/*.js","test":"wet run","dev":"wet serve --redirect :examples/ & npm run build -- --watch","build":"esbuild src/polyfill.js --outdir=dist --bundle --minify-syntax --tree-shaking=true","prepublishOnly":"npm run build"},"devDependencies":{"esbuild":"^0.18.4","wet-run":"^0.2.0"},"eslintConfig":{"root":true,"globals":{"globalThis":"writable"},"env":{"browser":true,"es6":true},"extends":["eslint:recommended"],"parserOptions":{"ecmaVersion":2022,"sourceType":"module"}},"keywords":["selectlist","polyfill","web component","custom element"],"gitHead":"937fcfbf84b77fc7eb0b0ef63933a52b357487f4","_id":"selectlist-polyfill@0.2.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-sab61t/wya9z5xI1vZxzAn7ceQX6rXQhpKvp1W6Of/3+G/x+fOvCtclD34sNKCrlagG6MnMaH6oM6lsq7x51sQ==","shasum":"2a2558ab250081cadf0a4bad6a8e4706a069d3b1","tarball":"https://registry.npmjs.org/selectlist-polyfill/-/selectlist-polyfill-0.2.0.tgz","fileCount":6,"unpackedSize":39490,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHCsxJPNPQsSTmTYve+m5Kc/dbUC9suATIW+zBf4fZi8AiB4gnWc/nOXyw/idZ0OSm+Q0cvAXlzR2Q6pdKRgdl960Q=="}]},"_npmUser":{"name":"luwes","email":"me@wesleyluyten.com"},"directories":{},"maintainers":[{"name":"luwes","email":"me@wesleyluyten.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/selectlist-polyfill_0.2.0_1691156944996_0.17769839947613209"},"_hasShrinkwrap":false},"0.3.0":{"name":"selectlist-polyfill","version":"0.3.0","description":"Polyfill for the selectlist element","type":"module","main":"dist/polyfill.js","repository":{"type":"git","url":"git+https://github.com/luwes/selectlist-polyfill.git"},"author":{"name":"Wesley Luyten","email":"me@wesleyluyten.com","url":"https://wesleyluyten.com"},"license":"MIT","homepage":"https://github.com/luwes/selectlist-polyfill#readme","bugs":{"url":"https://github.com/luwes/selectlist-polyfill/issues"},"scripts":{"lint":"npx eslint src/*.js","test":"wet run","dev":"wet serve --redirect :examples/ & npm run build -- --watch","build":"esbuild src/polyfill.js --outdir=dist --bundle --minify-syntax --tree-shaking=true","prepublishOnly":"npm run build"},"devDependencies":{"esbuild":"^0.18.4","wet-run":"^0.2.0"},"eslintConfig":{"root":true,"globals":{"globalThis":"writable"},"env":{"browser":true,"es6":true},"extends":["eslint:recommended"],"parserOptions":{"ecmaVersion":2022,"sourceType":"module"}},"keywords":["selectlist","polyfill","web component","custom element"],"gitHead":"b962b6e84476ebb453002388de2c05cd58e2ea95","_id":"selectlist-polyfill@0.3.0","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-ajsysILUVfKgkrFlRG0w0nS32xq/6FidUlk98GTL5HTJ0M/x1QuPNziCaWxi7RWIA+8xFWV0vD8Q32aqegKELA==","shasum":"4e0098d2544494333883de18e17ea9734547d488","tarball":"https://registry.npmjs.org/selectlist-polyfill/-/selectlist-polyfill-0.3.0.tgz","fileCount":6,"unpackedSize":39490,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWVadd2GJqviDjaXJ35lF6dZQvLP/Z574FaPGURlwbkAiEAqpwCEdpIGf7lnFzoOA61OO9DBrCXi8E/o/+V58J1YW4="}]},"_npmUser":{"name":"luwes","email":"me@wesleyluyten.com"},"directories":{},"maintainers":[{"name":"luwes","email":"me@wesleyluyten.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/selectlist-polyfill_0.3.0_1691157830502_0.8869375908522994"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-04T13:49:04.987Z","0.2.0":"2023-08-04T13:49:05.224Z","modified":"2023-08-04T14:03:50.757Z","0.3.0":"2023-08-04T14:03:50.649Z"},"maintainers":[{"name":"luwes","email":"me@wesleyluyten.com"}],"description":"Polyfill for the selectlist element","homepage":"https://github.com/luwes/selectlist-polyfill#readme","keywords":["selectlist","polyfill","web component","custom element"],"repository":{"type":"git","url":"git+https://github.com/luwes/selectlist-polyfill.git"},"author":{"name":"Wesley Luyten","email":"me@wesleyluyten.com","url":"https://wesleyluyten.com"},"bugs":{"url":"https://github.com/luwes/selectlist-polyfill/issues"},"license":"MIT","readme":"# `<selectlist>` polyfill\n\nBased on the proposal \n[open-ui.org/components/selectmenu](https://open-ui.org/components/selectmenu/)\nby [Open UI](https://github.com/openui/open-ui).\n\nThis polyfill depends on the \n[Popover API](https://developer.chrome.com/docs/web-platform/popover-api/) \nand comes with a light popover polyfill built-in.  \nSo it doesn't require the \n[Popover polyfill](https://github.com/oddbird/popover-polyfill) \nbut aims to be compatible if you wish to use these together.\n\nOne of the goals was to research and create it as closely to spec as possible\nand use the learnings for the implementation in\n[Media Chrome](https://github.com/muxinc/media-chrome).\n\n## Usage [Codesandbox](https://codesandbox.io/s/selectmenu-polyfill-6qky7m?file=/index.html)\n\nUntil the native `<selectlist>` lands in one of the browsers it's recommended \nto use the custom elements `<x-selectlist>` and `<x-option>` directly and not\nuse them as a polyfill. \n\nThis is to prevent breaking anything in the future \nif the native `<selectlist>` API would change and you would be running a native\nselectlist and a polyfilled selectlist with misaligned API's.\n\n```html\n<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/selectlist-polyfill/src/selectlist.min.js\"></script>\n<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/selectlist-polyfill/src/option.min.js\"></script>\n\n<x-selectlist>\n  <x-option>Option 1</x-option>\n  <x-option>Option 2</x-option>\n  <x-option>Option 3</x-option>\n</x-selectlist>\n```\n\n[See all examples](https://selectlist-polyfill.vercel.app/examples/)\n\n## Caveats\n\n- Firefox and Safari don't allow creating a shadow DOM\n  on custom tags like `selectlist` so the polyfill replaces `selectlist` elements\n  with `x-selectlist` elements via a mutation observer. If you prefer your elements\nare not replaced use `x-selectlist` directly.\n- Safari doesn't render `<option>` content not nested in `<select>` so `option`\n  elements nested under `x-selectlist` are automatically replaced with `x-option` \n  elements. Again if you prefer to keep the element instance intact use `x-option`\n  elements directly.\n- The native `<option>` has a `:checked` pseudo selector state. This is not possible to polyfill, \n  so instead `<x-option>` adds the `.\\:checked` CSS class to any selected option.\n\n## Related \n\n- [Popover polyfill](https://github.com/oddbird/popover-polyfill)\n- [Media Chrome](https://github.com/muxinc/media-chrome)\n","readmeFilename":"README.md"}