{"_id":"@acab/visually-hidden","name":"@acab/visually-hidden","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@acab/visually-hidden","type":"module","version":"0.1.0","exports":{".":"./index.js","./styles.css":"./styles.css"},"repository":{"type":"git","url":"git+https://github.com/mayank99/visually-hidden.git"},"author":{"name":"Mayank"},"main":"index.js","types":"index.d.ts","_id":"@acab/visually-hidden@0.1.0","description":"Custom element for [inclusively hiding content](https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html) while keeping it accessible to assisitive technology.","bugs":{"url":"https://github.com/mayank99/visually-hidden/issues"},"homepage":"https://github.com/mayank99/visually-hidden#readme","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-t5H44Ktjs8KmzApp+13OFqquzPS+BcsJfkadcsIk4vJSdfFLvt4Nhbq6byirF4Nf9V35qvy5m+kxX//epW3nHw==","shasum":"b54bce050fd32e631f4ac65332772fde008c8cdb","tarball":"https://registry.npmjs.org/@acab/visually-hidden/-/visually-hidden-0.1.0.tgz","fileCount":6,"unpackedSize":4378,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCICqgctvng7TMcDgI930KJ8/E4oXXSbkaP+LS1kNjtKBXAh9r/Ps984qFy7qWJBo6DZAttt+q+GZiB8yFzGLT8Yil"}]},"_npmUser":{"name":"mayank-99","email":"mayaank0@proton.me"},"directories":{},"maintainers":[{"name":"mayank-99","email":"mayaank0@proton.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/visually-hidden_0.1.0_1708809591392_0.19400798527897045"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-24T21:19:51.293Z","0.1.0":"2024-02-24T21:19:51.540Z","modified":"2024-02-24T21:19:52.096Z"},"maintainers":[{"name":"mayank-99","email":"mayaank0@proton.me"}],"description":"Custom element for [inclusively hiding content](https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html) while keeping it accessible to assisitive technology.","homepage":"https://github.com/mayank99/visually-hidden#readme","repository":{"type":"git","url":"git+https://github.com/mayank99/visually-hidden.git"},"author":{"name":"Mayank"},"bugs":{"url":"https://github.com/mayank99/visually-hidden/issues"},"readme":"# visually-hidden\n\nCustom element for [inclusively hiding content](https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html) while keeping it accessible to assisitive technology.\n\nInstall [`@acab/visually-hidden`](npmjs.com/@acab/visually-hidden) (or use [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)).\n\n```\nnpm add @acab/visually-hidden\n```\n\n## Usage\n\n```html\n<visually-hidden>content goes here</visually-hidden>\n```\n\nBy default, the `<visually-hidden>` element acts just like a `<span>`. There are two ways to give this element visually-hidden styles.\n\n- **Using CSS** (recommended):\n\t```css\n  @import \"@acab/visually-hidden/styles.css\" layer(visually-hidden);\n\t```\n- **Using JS**:\n\t```js\n\timport \"@acab/visually-hidden\";\n\t```\n\nThe CSS way is more robust, more versatile, and it also gives you the ability to use `class=\"visually-hidden\"` as an equivalent alternative to `<visually-hidden>`.\n\n```html\n<visually-hidden>…</visually-hidden>\n<span class=\"visually-hidden\">…</span>\n```\n\nThe JS way is fully encapsulated and can be used inside other shadow roots, but (obviously) it relies on client-side JavaScript.\n\nIf necessary, both ways can be combined, at the expense of a small amount of duplication in the client bundle.\n","readmeFilename":"README.md"}