{"_id":"aria-tabs","_rev":"2-8368ae1e81e465c81d2fdb08246d840f","name":"aria-tabs","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"aria-tabs","config":{"port":"8080","ttd":false},"version":"0.0.1","license":"MIT","author":{"name":"Thorsten Roggendorf","email":"junk@schrotie.de","url":"https://roggendorf.pro"},"description":"Accessible, responsive, themeable, small footprint tabs web component","homepage":"https://github.com/schrotie/aria-tabs#readme","bugs":{"url":"https://github.com/shrotie/aria-tabs/issues","email":"junk@shrotie.de"},"repository":{"type":"git","url":"git+https://github.com/schrotie/aria-tabs.git"},"directories":{"doc":"doc","test":"test"},"keywords":["browser","javascript","web-components"],"browser":"index.html","devDependencies":{"@babel/cli":"^7.2.0","@babel/core":"^7.2.0","@babel/preset-env":"^7.2.0","@webcomponents/webcomponentsjs":"^2.2.1","body-parser":"latest","chai":"latest","chokidar":"latest","connect":"latest","del":"latest","eslint":"latest","eslint-config-google":"latest","eslint-plugin-html":"latest","gulp":"^4.0.0","gulp-babel":"latest","gulp-better-rollup":"latest","gulp-cli":"latest","gulp-rename":"latest","gulp-replace":"latest","gulp-uglify-es":"latest","jsdoc":"latest","lsr":"latest","minimist":"latest","mocha":"latest","mocha-headless-chrome":"git+https://github.com/schrotie/mocha-headless-chrome.git","redux":"latest","rollup":"^0.67.4","serve-static":"latest","uglify-es":"latest"},"dependencies":{"shadow-query":"latest"},"scripts":{"build":"gulp","doc":"jsdoc  -c jsdoc.conf.json","lint":"eslint . --ext mjs,js,html --ignore-path .gitignore","start":"node ${PWD}/server.js --port $npm_package_config_port --ttd $npm_package_config_ttd &","stop":"PID=`npm run --silent pid`; if [ \"$PID\" != \"\" ]; then\nkill $PID\nfi","test":"PID=`npm run --silent pid`; if [ \"$PID\" != \"\" ]; then\nnpm run run-test\n else\nnode server.js  --port $npm_package_config_port --test true\nfi","pid":"ps aux | grep \"node ${PWD}/server.js\" | grep -v grep | awk '{print $2}'","run-test":"mocha-headless-chrome -f http://localhost:$npm_package_config_port/dev/test/"},"gitHead":"24955e5e2eb437425c07eaedb428da45105cbdab","_id":"aria-tabs@0.0.1","_npmVersion":"5.5.1","_nodeVersion":"9.2.0","_npmUser":{"name":"schrotie","email":"junk@schrotie.de"},"dist":{"integrity":"sha512-UQ5kkUyU54P1Fiv44uAaSR3jujAM2u7Q4J7aZ4MFkthsqLc0bttKp3XML6kFNfh0KHf+sE2QoV+p1sPnMc+/FA==","shasum":"ae3df8c0b8c74f7870f5d0bb7749369fa1d01c43","tarball":"https://registry.npmjs.org/aria-tabs/-/aria-tabs-0.0.1.tgz","fileCount":22,"unpackedSize":449972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGS3fCRA9TVsSAnZWagAAcrQP/2bL/uebAo2HQOHApLGl\nfjRjYbdoiz5tJjHbYh27lcp54/dDxFaMQHIbHqktUCSwaoRczQLvgSyx4Xry\nVHjmm7/9EzTiUnMCjsb7/YurBpuFFGCzPRe1xxYss0/M5vlU4H10pjjwX5cu\nCaTQysbRMoZyUoJXV1ZsMVMa6WXB/R9Ql5gMhzReG5EDwbY6iPUqwg5aMQSI\nATSaB0AnT+QdN9l0WH25lmzvkWiNMsaJfTGLOQHhKjRSFApoNFEzGwkWQu9e\nmypnzwbJkUljVXRGhuqN6EOHPuW4dvyhxWeeL93Q3EfEC9+v+KM83nfcbrgW\nuzmw9OY/kZexzsfyzA8OkUF0ZRPL/Sh5yTNiQxY1YNH6GY4g58ZY90IIujE8\nu+wlHJXz6+1qFQ7cju/vIYDlgAWG6iuwo/4LniLisu6UlfxiM/RCMMWxth9X\n/6LnQd5ysFBVJ/mveLXXq10teJjsY9O7tkDOd4O7JjnTAIbrxVj6r/CjB/wF\nLwrQi6tEh6uBNgc0XgYyl8WSbxuy38tAVB7FJRSMnBl7kRd42ZwLO8j0F9wl\nLBffV3z2RUB9sBWS2zeUnsh6qOVCfbkAdTI4hH2AKojoP2H8sENxkerIVQYx\n9W4yiqiTHmniuvfg9974fC4VY9PTeYAPZIwrTofC0GL6Ki/Kia4grpWZjYVt\nP8HZ\r\n=dpUa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHURrsoxYeaaDiSzzJh2sXgLOAKJ7ugdq6NCFJYLa1rQIhAN8heNTwkY9L/0gtsFOhKJ9/aucRzSs7OXSjvB96EOib"}]},"maintainers":[{"name":"schrotie","email":"junk@schrotie.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/aria-tabs_0.0.1_1545154014491_0.9621050509378712"},"_hasShrinkwrap":false},"0.0.2":{"name":"aria-tabs","config":{"port":"8080","ttd":false},"version":"0.0.2","license":"MIT","author":{"name":"Thorsten Roggendorf","email":"junk@schrotie.de","url":"https://roggendorf.pro"},"description":"Accessible, responsive, themeable, small footprint tabs web component","homepage":"https://github.com/schrotie/aria-tabs#readme","bugs":{"url":"https://github.com/shrotie/aria-tabs/issues","email":"junk@shrotie.de"},"repository":{"type":"git","url":"git+https://github.com/schrotie/aria-tabs.git"},"directories":{"doc":"doc","test":"test"},"keywords":["browser","javascript","web-components"],"browser":"index.html","devDependencies":{"@babel/cli":"^7.2.0","@babel/core":"^7.2.0","@babel/preset-env":"^7.2.0","@webcomponents/webcomponentsjs":"^2.2.1","body-parser":"latest","chai":"latest","chokidar":"latest","connect":"latest","del":"latest","eslint":"latest","eslint-config-google":"latest","eslint-plugin-html":"latest","gulp":"^4.0.0","gulp-babel":"latest","gulp-better-rollup":"latest","gulp-cli":"latest","gulp-rename":"latest","gulp-replace":"latest","gulp-uglify-es":"latest","jsdoc":"latest","lsr":"latest","minimist":"latest","mocha":"latest","mocha-headless-chrome":"git+https://github.com/schrotie/mocha-headless-chrome.git","redux":"latest","rollup":"^0.67.4","serve-static":"latest","uglify-es":"latest"},"dependencies":{"shadow-query":"latest"},"scripts":{"build":"gulp","doc":"jsdoc  -c jsdoc.conf.json","lint":"eslint . --ext mjs,js,html --ignore-path .gitignore","start":"node ${PWD}/server.js --port $npm_package_config_port --ttd $npm_package_config_ttd &","stop":"PID=`npm run --silent pid`; if [ \"$PID\" != \"\" ]; then\nkill $PID\nfi","test":"PID=`npm run --silent pid`; if [ \"$PID\" != \"\" ]; then\nnpm run run-test\n else\nnode server.js  --port $npm_package_config_port --test true\nfi","pid":"ps aux | grep \"node ${PWD}/server.js\" | grep -v grep | awk '{print $2}'","run-test":"mocha-headless-chrome -f http://localhost:$npm_package_config_port/dev/test/"},"gitHead":"36d00069cdbd22a5487e0d59ffd37b5605c078ad","_id":"aria-tabs@0.0.2","_npmVersion":"5.5.1","_nodeVersion":"9.2.0","_npmUser":{"name":"schrotie","email":"junk@schrotie.de"},"dist":{"integrity":"sha512-VMUTJx/+UnHSYs0dO8wKKnE7yzF32pGe/mZ/Rg76sAIQoloMFDfV2QP9C9ModQogq0OkF3ZKi0G//xwsumXLEQ==","shasum":"b8bd874fa7e1e468b93c825e57bf11e35e660aa7","tarball":"https://registry.npmjs.org/aria-tabs/-/aria-tabs-0.0.2.tgz","fileCount":22,"unpackedSize":449978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGTBfCRA9TVsSAnZWagAA2TMQAIRSMimJpT9VVIKRTeKr\npUKXyWPkx5ZIoM9/iBAeO/fwRlHJ78XkrlwfEI9PYkMeLmGlxQnIFDDZBKny\nPXeuiKmZl1n6+GKZW7wa1Q+vPyvHrIsDbcnLACbX+5DqcKU3eQdiE4eyZRfB\nIZF1ol90EhER2csYpB6eQ8bFAQMeerAmd7VSKxhyz1mpn+sQn/sPUTme0THW\nmG603VJFv2ZhbxdMmW8wf7cYOA3F+3JgtR2ZQMQAhsPkzTpR8fLztHix4q/g\nB77CWKlzv9MEpmHTy2XsyZ7WDaynzNv2fcLu9e5mzSVQAcOjPxSsnIjiALzu\nmyC7IsMrIZQ/IZWqNgDzrnKRQaVm9Smszgbl1QvPv6VRCTJdiQJy+wAGpDFD\nDzYCGX1JRexYOM7bXZyXmRAOOD0BGoapFv/EvOC8yLreERBf8RO0hKlIv9S0\nsH8W0xNpN5ohYs9QhJ6m5es3ir+r5CkKHDE5WkGL+rh1f3Q95zglPaTOaqbT\nzRYJANRxFNgWHbLLn99IIthphak0SH8wF7A8Gdnbjh9x+20LaJQPoWzD0DAT\n4a6I8SOTwY7uKXwRsf2ppZJs3aBfCF6J8m4ix+5ZL6fawESdPPkQh+GKg41o\njqlNtkiUqNFY6LaUsnuYhEsoFHCB4PzRMwd6PsDoC+tT1fzM7YbakwbcJ1tX\nBOl0\r\n=r5hz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGPSj90EixagYpWx2ZTjvOcf4p/fIoguBFkIa90k+HfVAiAnaUum7dk+eKgUx+npsPVeta+FQv+UcXYxIl/XKW1BVg=="}]},"maintainers":[{"name":"schrotie","email":"junk@schrotie.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/aria-tabs_0.0.2_1545154654941_0.8584955471894491"},"_hasShrinkwrap":false}},"time":{"created":"2018-12-18T17:26:54.491Z","0.0.1":"2018-12-18T17:26:54.666Z","modified":"2022-04-11T15:05:05.409Z","0.0.2":"2018-12-18T17:37:35.058Z"},"maintainers":[{"name":"schrotie","email":"junk@schrotie.de"}],"description":"Accessible, responsive, themeable, small footprint tabs web component","homepage":"https://github.com/schrotie/aria-tabs#readme","keywords":["browser","javascript","web-components"],"repository":{"type":"git","url":"git+https://github.com/schrotie/aria-tabs.git"},"author":{"name":"Thorsten Roggendorf","email":"junk@schrotie.de","url":"https://roggendorf.pro"},"bugs":{"url":"https://github.com/shrotie/aria-tabs/issues","email":"junk@shrotie.de"},"license":"MIT","readme":"# aria-tabs\nAccessible, responsive, themeable, small footprint tabs web component\n\n[Demonstration](https://codepen.io/schrotie/pen/margpb?editors=1111)\n\n`<aria-tabs>` is a customizable tabs web-component/custom-element. Simply load the script, e.g. in your document's `<head>` and add checkboxes to your document.\n\nOkay, it's probably not _that_ simple. `AriaTabs` is a class that handles the _ARIA_ (i.e. accessibility) aspect of tabs. `<aria-tabs>` comes with two themes:\n* __classic__  \nlooks basically like a classical tabs, just themed and with some gradients\n* __material__  \nis a material design tabs variant\n\nEach comes with a simple theming interface. Decide which one to use. If you are happy with the look and feel just include the respective file, add you colors and enjoy:\n* `aria-tabsClassic.mjs`\n* `aria-tabsMaterial.mjs`\n\n# What File to Load\nYou only need to load one file. Which one that is depends on your specific needs. As noted above, `<aria-tabs>` comes with two pre-built themes. Thus first you should decide which theme to choose or if you want to build your own customized variant.\n\nThe pre-built dist (distribution) files are in the NPM package but not in the GitHub sources. If you loaded the latter you need to do `npm i; npm run build` to get them.\n\nIf you build your own, you should `import AriaTabs from '.../src/aria-tabs.mjs'` and do your own build. If you build a web application with static source code (as opposed to a page that is dynamically assembled by server side rendering) you should import the source version of your chosen themed tabs and have a custom build for your app.\n\nIf you want to use a pre-build tabs decide which and next decide which build to load. Each theme comes with three builds. `<aria-tabs>` uses the [ShadowQuery](https://github.com/schrotie/shadow-query) micro library to simplify web component implementation. Two builds bundle it, one doesn't. If you use more stuff that also needs ShadowQuery use the version where it's not bundled. That way you don't have to load it multiple times.\n* __*.min.mjs__ minified EcmaScript Module without ShadowQuery\n* __*.min.js__ minified ES6 script file with ShadowQuery bundled - use for all modern browsers except Edge\n* __*.IE.min.js__ babel-transpiled ES5 for IE (and possibly Edge?) with ShadowQuery bundled\n\nFile sizes (gzipped): the minified tabs without ShadowQuery are ~4K, with ShadowQuery ~6K and transpiled with ShadowQuery ~16K.\n\n## Deployment & Polyfills\nOlder versions of current browsers and IE don't fully support web components and may miss modern language features. For the former you need to load a polyfill, for the latter you need to load the transpiled `<aria-tabs>`.\n\nIn addition I strongly recommend that you load the polyfills only where required _and don't load transpiled code for browsers that don't need it!_ Transpiled means that the code went through babel. The code is twice as big and slower than the native ES6 ... and simply won't work in at least some modern browsers.\n\n# Theming & Customization\nIf you want to theme/customize `aria-tabs` you'll need to write your own component and inherit from the `AriaTabs` base class. In your constructor you can - and should - pass a template to the `AriaTabs` contructor. That way you can generate the custom DOM you need, along with your styles. Please check the default template exported by `aria-tabs.mjs` and check the (really simple) implementation of `aria-tabsClassic.mjs` and `aria-tabsMaterial.mjs` to learn how this is done.\n\nIn addition the are some methods you may want to override in order to get you custom style for all aspects of the tabs:\n* \t`get deleteButtonTemplate()` to create a custom delete button on the tabs\n* `get tabTemplate()` to customize tab DOM\n* `renderTabs(labels)` chances are, if you want a custom tab template, that template also requires custom initialization. Check the implementation of `aria-tabsMaterial.mjs` for an example. You don't need `get tabTemplate()` if you implement `rendeTabs(labels)`\n\n## Note on IE\nIf you want to support IE you will need to coax the ShadyCSS polyfill to actually handle your component. If you just need a custom main template, just define your component as shown in `aria-tabsClassic.mjs` and you're fine. If you need more, check `aria-tabsMaterial.mjs`. It uses the `iniCss` export from `aria-tabs.mjs` to handle that.\n\n\n# API\n\n## Attributes\n* __data-deletable__  \nmakes all tabs deletable if attribute is present\n* __data-persistent__  \nwill show last opened tab (index!) when re-opening page. Pass a string that will be used as an ID for the persistent data. Uses `localStorage`.\n* __data-manual__  \nwhen present, arrow key navigation will not activate but just focus tabs, activation then happens with space or enter key (useful for tabs that load additional content like whole sub-applcations)\n* __data-delay__  \noptional delay when navigating with arrow keys - ignored when `data-manual`\n* __data-label__  \non the tab-panels, sets the title of the tab-button\n\nSeveral attributes on the associated DOM are set automatically for accessibility support.\n\n## property\n`aria-tabs` automatically initializes several properties - for its own use and for inheriting (customized) tabs.\n\n### DOM accessors\n* tablist\n* scrollButton\n* tabs\n* panels\n\n### Attribute readers for the respective `data-...` attributes\n* delay\n* manual\n\n## events\nNone so far.\n\n## CSS custom properties\nThese are specific to the theme you use for the box. The shipped themes support the following:\n* __--aria-tabs-bg-off__  \nbackground color of inactive tab button\n* __--aria-tabs-bg-on__  \nbackground color of active tab button\n* __--aria-tabs-fg-off__  \ntext color of inactive tab button\n* __--aria-tabs-fg-on__  \ntext color of active tab button\n* __--aria-tabs-flex__  \nflex mode of tablist when not scrolling (space-between, space-around, start, end, center ...)\n* __--aria-tabs-highlight-on__  \nhighlight color for active tab\n* __--aria-tabs-highlight-sel__  \nhighlight color for focussed tab\n* __--aria-tabs-border__  \nborder around tab buttons and panels\n* __--aria-tabs-shadow__  \nshadow of tab buttons and panels\n\n\n## Method\nPublic methods should be considered `protected` - they are there to allow inheriting classes to customize certain aspects of `aria-tabs`.\n* __initialize()__  \nOn first rendering and on the change of certain attributes, initialize is called. If you overwrite this method in an inherited class you'll most likely need to call `super.initialize()` in your `initialize` - before, after, or in between your initialization code\n* __get tabTemplate()__  \nreturns the template (string) for the tab-buttons\n* __renderTabs(labels)__\nif you want a custom `tabTemplate` you likely need custom initialization of the tab buttons. Check aria-tabsMaterial.mjs on how to do this.\n* __get deleteButtonTemplate()__  \nreturns the template for tab-delete buttons\n* __delete(tab)__\ndelete a tab\n\n\n# Accessibility features\nSee [W3C example](https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html).\n","readmeFilename":"README.md"}