{"_id":"@acab/tabs","name":"@acab/tabs","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@acab/tabs","type":"module","version":"0.1.0","exports":{".":"./index.js"},"repository":{"type":"git","url":"git+https://github.com/mayank99/tabs.git"},"author":{"name":"Mayank"},"main":"index.js","types":"index.d.ts","description":"Simple, accessible, unstyled tabs built entirely in vanilla JavaScript. Based on the [APG Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).","bugs":{"url":"https://github.com/mayank99/tabs/issues"},"homepage":"https://github.com/mayank99/tabs#readme","_id":"@acab/tabs@0.1.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-lVZnKycL4v4FnZnvBJtJvSBeXp9ylYiXifR2gl4rjSMfFSekp/pzWkJkGZMQdh9mdHCbsrfV86U+ezBbar//hg==","shasum":"0a6397bd57fe3562ff6c196cad2b2b8f3f7327f1","tarball":"https://registry.npmjs.org/@acab/tabs/-/tabs-0.1.0.tgz","fileCount":5,"unpackedSize":5084,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFCqkxk6iP6tG/uPKq4YfZgJsXh15Kda7MHcHywmtCvNAiBcrL3SKSaZ/y/JVDQZ5xy4Hb6yXm1Rl6uISlaBKS24Fg=="}]},"_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/tabs_0.1.0_1695780727161_0.28656604901587146"},"_hasShrinkwrap":false}},"time":{"created":"2023-09-27T02:12:07.063Z","0.1.0":"2023-09-27T02:12:07.410Z","modified":"2023-09-27T02:12:07.795Z"},"maintainers":[{"name":"mayank-99","email":"mayaank0@proton.me"}],"description":"Simple, accessible, unstyled tabs built entirely in vanilla JavaScript. Based on the [APG Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).","homepage":"https://github.com/mayank99/tabs#readme","repository":{"type":"git","url":"git+https://github.com/mayank99/tabs.git"},"author":{"name":"Mayank"},"bugs":{"url":"https://github.com/mayank99/tabs/issues"},"readme":"# tabs\n\nSimple, accessible, unstyled tabs built entirely in vanilla JavaScript. Based on the [APG Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).\n\n```\nnpm add @acab/tabs\n```\n\n## Usage\n\nImport the tabs and register it.\n\n```js\nimport TheTabs from '@acab/tabs';\n\nwindow.customElements.define('the-tabs', TheTabs);\n```\n\nInside the custom element, define the initial markup consisting of `role=tablist`, `role=tab` and `role=tabpanel`. Add `aria-selected='true'` to the tab you initially want to be active, and add `hidden` to the panels of the other tabs.\n\n```html\n<the-tabs>\n\t<div role='tablist' aria-label='…'>\n\t\t<button role='tab' aria-selected='true'>…</button>\n\t\t<button role='tab'>…</button>\n\t\t<button role='tab'>…</button>\n\t</div>\n\n\t<div role='tabpanel'>…</div>\n\t<div role='tabpanel' hidden>…</div>\n\t<div role='tabpanel' hidden>…</div>\n</the-tabs>\n```\n\nNow style it however you want! The `[role=tablist]`/`[role=tab]`/`[role=tabpanel]` and `[aria-selected=true]` selectors can be referenced in CSS.\n\n```css\n[role='tablist'] {\n\t/* … */\n}\n\n[role='tab'] {\n\t/* … */\n\t\n\t&[aria-selected='true'] {\n\t\tborder-bottom: 2px solid;\n\t\t/* … */\n\t}\n}\n\n[role='tabpanel'] {\n\t/* … */\n}\n```\n","readmeFilename":"README.md"}