{"_id":"@unifyux/web-components","_rev":"199-158d88c9a1a7fecd0a9390af1adf1545","name":"@unifyux/web-components","dist-tags":{"canary":"0.0.23-1ed434625459a788fb185797067e1c1783e45a24.0","latest":"0.0.28"},"versions":{"0.0.3-alpha.490":{"name":"@unifyux/web-components","version":"0.0.3-alpha.490","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"stencil test --ci --spec --runInBand","test:watch":"stencil test --spec --watchAll","prestorybook":"yarn build","storybook":"start-storybook","build-storybook":"build-storybook","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","chromatic":"chromatic"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"^1.8.11","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.14","@storybook/addon-actions":"^5.3.14","@storybook/addon-centered":"^5.3.14","@storybook/addon-knobs":"^5.3.14","@storybook/addon-notes":"^5.3.14","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-chromatic":"^3.5.2","ts-jest":"^25.2.1","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^1.0.3-alpha.68+0257c9e6","@unifyux/theme":"^1.0.3-alpha.68+0257c9e6","classnames":"^2.2.6","string.prototype.padstart":"^3.1.0"},"gitHead":"0257c9e606849cba39f378ab5d508518d81ef08f","_id":"@unifyux/web-components@0.0.3-alpha.490","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-ox0XOznnEcj9Zod4OdstOf+qxNke//8EqnYRqv8BYVtG9qli8Tx98mReB5uRvTa8f3CB/zOMPc/Vr9GSQD700g==","shasum":"762efcaefd4a6e8d6bf792aba58c4f38ec4281b4","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-alpha.490.tgz","fileCount":115,"unpackedSize":1200178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemH8SCRA9TVsSAnZWagAA4dcQAKC2pVhdt75OthH/kvXM\nkl0W/6G7BIeEDj+t0x6rz4Wae040RePBcVvpgZJX8V3EXMoPrV0ITmCM5mXy\nprEeRvuWde8pwc7TZuueZYJ64L95weaxu6Q8wdwaODx/frppgmlAXnl0IpR3\nkPBhQFZYAUts5zc5YSP8WISLc3wMSVONUE+afjvCAq8tTI3fmKLSCPbod++6\nW2hVB+yKzgsmOBBv684d7wegWsY/e8BmbVqOgOfWGpFMxdeaOMYdAK9iB6vf\nwLWS40nZIGmQWCiMNsfeXWuh7EEmyypmcGXJyGlREGvrJuz347c0/Hi05yBE\ncdxn092HaMn5y2HiBFp6n07oE4Fd16Kl+t5H+Yg5qO4CsR+mvs2669SJil2o\n+wVqpHm8qR+epK2l2Mlf98WVq0WJr43sP8pYYvYZMsUqMcmntwTp7+pxYfRz\nVsCPWrv0Vt++YRicvjCLlKNtItBMjKj/jeAlblKBvIb02APFLnKOxfgxEsu8\nTMUrT9mU9bqc+v6lF4zpYkm6uBZfrEAd+7wYwXPMExeyVkERGc+9GHSnLYC6\nIadWZqBTqQ76A33U2HzbtmGJztSSQT8a5Jv86NhA5edENa4FY+F56/u+/PAe\nO6OqR6X20cGfG7Uk8VJUjU1uEU843mfvq18ri9pvtCDU3XKX9DMvEpqKn5El\nDfmn\r\n=Tphm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoNcR0J8x55SjxbcsAAwTeRd1nIEFCGdERtm4dXIf7NgIgFTS8Ri44HxN5em4yOLlviHZuFVcQrdzHQJ0Q+KlDihM="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-alpha.490_1587052306053_0.4183575033741229"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-alpha.465":{"name":"@unifyux/web-components","version":"0.0.3-alpha.465","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"stencil test --ci --spec --runInBand","test:watch":"stencil test --spec --watchAll","prestorybook":"yarn build","storybook":"start-storybook","build-storybook":"build-storybook","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","chromatic":"chromatic"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"^1.8.11","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.14","@storybook/addon-actions":"^5.3.14","@storybook/addon-centered":"^5.3.14","@storybook/addon-knobs":"^5.3.14","@storybook/addon-notes":"^5.3.14","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-chromatic":"^3.5.2","ts-jest":"^25.2.1","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^1.0.3-alpha.43+6bab5288","@unifyux/theme":"^1.0.3-alpha.43+6bab5288","classnames":"^2.2.6","string.prototype.padstart":"^3.1.0"},"gitHead":"6bab5288f8396f3467c73cc97112e25ea68cd3ca","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-alpha.465","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-lUWHOdmZUvJNdsaUsWpECwSIwY47bGWMUYFDPYFxlNZuC2MEB4sXVtUKp8iSUQrnyYsJYMRkU/3W8+exe2dlUw==","shasum":"bc5659849902f5fa161267a16f04adb27da29440","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-alpha.465.tgz","fileCount":115,"unpackedSize":1200178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJ1qCRA9TVsSAnZWagAAKqkP/AlQVUmOgYBgo+BrG2Dc\nKt8Sgmek1wy2yMFHkq5Q4kyfG4Sw7o/ZlWrMtaHatGoRlNx31ucx3iBUBMKt\nlnzPVuwiYDACmu98lFAc6VN7P5ec5oyE0HH7jad7HRqaHr8yIkde1uTckHq4\nGwqcJqW+t74GD2R50BqaM3IbCUZMcbwaDHwd6ZUdif+4X95+pssfM/5hfXY5\nJE+uTYfJ6C8BUOPVbZGvIhXTOzKIrr2/rdlT31/8RRPvoJbs9Oua9Kk9Nmpa\nY0roN0BtZCnc9Lyc0f8IXry9EsuXTghwH6VShiakzK9Imba7D2hAIWRJT6B2\nnbM6TxmriDIQ+6xCguGcSIAsFw7IlInB2ub1eK0ogUJiV/DkwYDKwsXoik39\nKEB4p6kHnu7SMbktFGIApD94/StBQhOjmoUH0rIND89a0wTwn0+fiRg4LBuR\nbMimeCfl9JZjLTR6SXzQ/4Pboavkj6qQvWBYQ+bNFcWd7HQyPe9cDnUvkf+x\n6Q9gheiwSBptk6LPCytugUDJZK8pCWALFX1eZOiY+rCoka+qSeXYvBOpTEk8\nz38L36lwwZkAiieWPVc13lk8/jI4kKScjarToyotGIuSGTATHfVe7i2NmMUM\ntUGDReS0tUQLIpGiGKLqrUkQjxzjRis2g2jtGlWh1IQty+up+rjXcYR1Frnr\nZcgB\r\n=OAHn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+yhiDhn+itm0uDsDIjAz8Lc5/lPCvpYiI5HyFRaz0SAiBBAJnRFxcRVIkManHrhdXsQt7Al2ZOkPVwP97pUGC+yw=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-alpha.465_1587060074182_0.3197749206231726"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-alpha.478":{"name":"@unifyux/web-components","version":"0.0.3-alpha.478","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"stencil test --ci --spec --runInBand","test:watch":"stencil test --spec --watchAll","prestorybook":"yarn build","storybook":"start-storybook","build-storybook":"build-storybook","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","chromatic":"chromatic"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"^1.8.11","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.14","@storybook/addon-actions":"^5.3.14","@storybook/addon-centered":"^5.3.14","@storybook/addon-knobs":"^5.3.14","@storybook/addon-notes":"^5.3.14","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-chromatic":"^3.5.2","ts-jest":"^25.2.1","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.1","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","string.prototype.padstart":"^3.1.0"},"gitHead":"8558045771496ce65ce525319cb8ae8de57ba668","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-alpha.478","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-l9wImXhbpa+QTdtXsDbJcrdo1yulzL/XEZt54uh2p4VhHXNl2MtyYPowPWM3WvU0iHfYoQF3HUX3tB3LuTTGnQ==","shasum":"26ad0574c81959fcfb37556802186b26435014ee","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-alpha.478.tgz","fileCount":115,"unpackedSize":1203234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMSUCRA9TVsSAnZWagAA1owP/0c3iqb7LBzcmCKEBQ1R\nb1VoRqxBIp9wsNzj/LdIuatFEnHXrc1zfNSUMS4siA/ewLUa2cb42aOraIY+\nUOrfn99lVW3PdzD7SpXxzcftzsT+vtByaTsFItD6fxwmd/1K2HQiXLy4fDWE\n/9rdTTBOBf5GWurFUlg8LQbc8mhv17uMoKOxGWmumaB8u3vaRDvP6tH0RRXn\n3L5/8OYK6+QrW5JYUPch6AJ1IYQvVbDkXMvnUurUCxXnELDZJdzHxBf7QjjV\na+31HGt4nNf0cqtwBM2Y88kBfhBR1Q1bqa9YyfpAMfU+3J410gm5jMY/88oo\n/3MjIb65rNRtAeg/GtMVO1WJn/vsUIIisgxET4zV/P/+Nlxc6i1RJvfpoWjb\ns9UXNUvG62OKXeMbKURugOGhPwlirdJz4zMrK6N7ZU+HCd7p5wcheTw1EFJh\nd0F6AnrxsqqiSXyhSgFIfExb54efckjxU81PptcYj9+VUP2tR8YXOBe6H5AT\ne8oXNWuMtPuaSTluxju8wGIbRjmEE3PgXRe0gi61+UBIYG8oT8ww5FwA9Y8I\nWqfRaichb/pWQskaW5V/Nf157IhXI7uYf+o3poxz/MFDBD/AzVEWy6bLTTTm\ngKiOeJJaA0NbHizx+vZzIS+femax1KvVBhD6O8BOC8/sUjvXQ/GnEHLTWPzz\nZ+Zc\r\n=tc79\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF+gQJFNsz6HBJVfDCCVkuGXmvwNWnNU0Mv7GLk0A7X9AiEA1D/lzEp6AcWXUm4VFmbYSf34RAXFy3XCiNFkFxyRWe8="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-alpha.478_1587070100373_0.28868791956091"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-alpha.480":{"name":"@unifyux/web-components","version":"0.0.3-alpha.480","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"stencil test --ci --spec --runInBand","test:watch":"stencil test --spec --watchAll","prestorybook":"yarn build","storybook":"start-storybook","build-storybook":"build-storybook","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","chromatic":"chromatic"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"^1.8.11","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.14","@storybook/addon-actions":"^5.3.14","@storybook/addon-centered":"^5.3.14","@storybook/addon-knobs":"^5.3.14","@storybook/addon-notes":"^5.3.14","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-chromatic":"^3.5.2","ts-jest":"^25.2.1","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.1","@unifyux/theme":"^1.0.3-alpha.52+b9497aae","classnames":"^2.2.6","string.prototype.padstart":"^3.1.0"},"gitHead":"b9497aae917ecb129df9c8b86ad5bcacf50fdf6c","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-alpha.480","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-hSnXfwOUkDvomJGhoSI5saRpYQtLJZZWH/MM/TI+7RDw+sevaOZiD3ssO5XT3xlayF9I4TWcMP5Zs+60rqBnOQ==","shasum":"855c7bee6861475baf038cae675446ccaf69ebcb","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-alpha.480.tgz","fileCount":115,"unpackedSize":1202994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemNXRCRA9TVsSAnZWagAAiTQQAIuaZjiBhMc6jep1MbNJ\nllh9e+9QipnnqXHI6kEl5PFCvJ8ZbRqHKCe1FfVRT1LwhB6hdf2NZDqXAy66\nODxc/vsMyolWxGxVLPl2KhrYgXSIH4abWxMJ5dYvky+iAGBXOPFid1T1YbLc\n2ejzuMmgan6L3cAeJUiJSfRkGO6D3nDyG5WYiX9A44CoFyBw0sMlIPMs8D2r\nvlVLD91Tm48Kr2ZpAaYhSiTZ6QWNQbPv6/xfyVSMvekU/PrTKKSsN+ZxIO2Y\nim5mXON9jHAgmhT6g+yLuQXWX/Crei63D9NgLEhHgB7+EQmWlAQrLCyaYtAP\nf5xlQm1MWYJ91ezYo63O2Hy1j/GB7yulrTZbtJK9nISe1bdHaM8hBGwqL7z3\nVYol67CmCAY4o/vLI0lL1GF5Tl/kyTzKP808DIvIHV8mBhJM9ixH616RwGIC\nFVstmHCRrbST/N5WAGe9HWDj38p4TcgR7T/oOWMsXtWVozxaii5lRVqBq/fM\nghM1p038VQI4w29i1vLG9jcdfAdPNEveJKdiafnp5jn/f6yiVyO7BPy5nCeL\nu87THMYcCh6TNhACSMS1lvFLf8f5jjtDFjCJldIOCmDR4qgOWIqOPODnrwoV\ncEofie58mM3hm94BlNqxeV5M/dSlcO1NCGGQaOHj8d5rU1lSaj99i8xVjhyW\nIA9H\r\n=WrFM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH+BQrdbzU2qjRvlWnFqQHELKZERWvzCQi/YaCID5G1+AiEApncTRukgd62OBDOzfutMK9zqCWBJX7LcMeWl1ICXlNk="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-alpha.480_1587074513237_0.11885387443039086"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-alpha.481":{"name":"@unifyux/web-components","version":"0.0.3-alpha.481","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"stencil test --ci --spec --runInBand","test:watch":"stencil test --spec --watchAll","prestorybook":"yarn build","storybook":"start-storybook","build-storybook":"build-storybook","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","chromatic":"chromatic"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"^1.8.11","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.14","@storybook/addon-actions":"^5.3.14","@storybook/addon-centered":"^5.3.14","@storybook/addon-knobs":"^5.3.14","@storybook/addon-notes":"^5.3.14","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-chromatic":"^3.5.2","ts-jest":"^25.2.1","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.1","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","string.prototype.padstart":"^3.1.0"},"gitHead":"80326cb8696f56dc3dcafbfbe4162ccea43f204d","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-alpha.481","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-uA/bDAPMQyTMDXeRzaIlMzLo2ewQaNtpb5s/9yVKjJt4XXu74AtLaZUAdBkUdgV97JRV3+JXS8fSO21HdV5h5A==","shasum":"5cafe47137c63b0a99f75b8ee1dad55ecac5e360","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-alpha.481.tgz","fileCount":115,"unpackedSize":1202880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemNhHCRA9TVsSAnZWagAAh8UP/ivPTiCzJDxl52/rcVxz\naCIlZWjcn4eqUU+ukArP+zXkTyHd6CuuiDQNhLuhwg/sM/kEjn+eblQ20/e7\nFc0TIWXo9Z1nafz8Z1favxlsp7Ws6xdx/caDGbOqRXy4FRPjIbaoB2csaDeJ\n+A8vf94xjCix9jvmtmdK43MCVcR3bjvxeYpx4BuY5e1t4wWbQvfijBJNvUL5\nlIDYtQ8XwBbvWMyH2Itix1xBxhp43u6kd6fZZLrGbFVa2lDvSBzSEYjQqsEU\nHYxpbu08zZGTGNfbonxeki4HgIaet6JQZQ+AWFK5XA8hg5yXAYPzYUMBE33X\nFyNdmSacKGbn/O6vJhsaitDyV3Xu6Cj0ZEfP8hG+LUvIjJ8QLM0SM/hjWP1g\nOriEH/c2J7lmeqb5G5kIaZaJnk5U1DxlLyhtDbm7xmVR/BxW6HON7Q0vkJcN\n3cA5NoIGhqkGi3Mk3j1SDYWM+aI+H3R0mGBSTdBh2ZibcoxozWaDLikfxjX/\nh5B8iAYvT3DL1M1nXuZCkw+Viu/NkJUxdF+WfxuE63Zd6a1T1K9xsL+8leqO\niZ9rQfmInpZWWLjGcmuUvSZhmXtfXQwHo1HX/vVvb+Gphfh93/X6WSbPCtRR\npWC1Dhn4zOB5isaNsV7+PeehQ0yauCmWKN/NU4iTvCnwmhk63R5YLS0KJkW7\nc4Qf\r\n=lfIY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUW9dITMCPBVaKO5P0i4OV+Enh2c8/NXvv0/K0NRWm5wIgObhh0yRmxvaJS3xUX9mdeTp2K2Z8TNBNCKjh5s3sBqE="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-alpha.481_1587075142851_0.31200676858854237"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-alpha.483":{"name":"@unifyux/web-components","version":"0.0.3-alpha.483","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"stencil test --ci --spec --runInBand","test:watch":"stencil test --spec --watchAll","prestorybook":"yarn build","storybook":"start-storybook","build-storybook":"build-storybook","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","chromatic":"chromatic"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"^1.8.11","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.14","@storybook/addon-actions":"^5.3.14","@storybook/addon-centered":"^5.3.14","@storybook/addon-knobs":"^5.3.14","@storybook/addon-notes":"^5.3.14","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-chromatic":"^3.5.2","ts-jest":"^25.2.1","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.1","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","string.prototype.padstart":"^3.1.0"},"gitHead":"753a32f61f6bc4239093b8dc767008a49bd2df8e","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-alpha.483","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-ut+5eWe4sU9ukC0lJseQwH8qzjsXXTM2tvNNyEibEx6BxfpeWsEjKluup1wT7BLDqMlQhKvRuG8SinnhzhoPNA==","shasum":"8043e63074d15361f6205513746c839cacbbac80","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-alpha.483.tgz","fileCount":115,"unpackedSize":1209033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemhvMCRA9TVsSAnZWagAAcZcP/A7h4oR6TgxTNTrrSm/1\nwBDZxM1bKnrFD1j1XfURUcI0jXYhgzlqGKh3IfWUHyNDllhVVk0hRw1eksfq\ndEjnq5BkI1eoP+XvRpZeAu8vo5YJPxmzqx/n4MV+7Yppj9RRMEo3obIUyRbc\nMMQOK4bBRDZr00Hu0YRtZbhKXVpvJmoljMvwniZuYbqu2TD5M0DXE2nvqZyB\nuzi6tln4mTg/cZdjKnAlZzA4pDC+Egbn81D2c6SA5JueDbusQOl78Co+hxbG\nZzppNi/Fxv4laShGeiIxhnC+skFTrJR0cwY9/ayYttSce6Yswulp/mhEY6S5\nRofTQHHccfrxHy3NeyTAL5ylWL2lLHGL+fc2WESDmFVxzhq2YQxASe6R/NPH\nSv0ZMAgdXbSJ/JuKCEzm0JBdzOhKKzXKqeEjxSvAewkqbwgl/jK3bViAe80l\nIs4HB1N405vd7JV2//muk3XY/DiS/r1Qfuv3FoNuJqHs06Rgp9aTrUm8vVmX\nnoDlMlMQ6M4nScs1EBUNS6qbm6I/m/xzETwYz1UQ1sp65araBBxI8phBJyR0\no1L4UP5uiDsndiIKFXDYypxyShNECE/NP11SgaxS9Bidlf5gkQU2OBJBkmVU\nUjVwg+KRSbddDp0BbKoy0ydpPwTM8nphxLIJbHm6bQ9rwE4ChpN8XVhqKhiJ\nSDps\r\n=lOe1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFshZQ88PUD4hZqr9Jc+naGE/W6avZsWlQUu+60JXQ5AAiEAwh/07WDFIXnZulPrHEtwGopmLAuUigR+mQe8KzY9p8U="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-alpha.483_1587157963984_0.2318503169153796"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-alpha.488":{"name":"@unifyux/web-components","version":"0.0.3-alpha.488","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"stencil test --ci --spec --runInBand","test:watch":"stencil test --spec --watchAll","prestorybook":"yarn build","storybook":"start-storybook","build-storybook":"build-storybook","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","chromatic":"chromatic"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"^1.8.11","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.14","@storybook/addon-actions":"^5.3.14","@storybook/addon-centered":"^5.3.14","@storybook/addon-knobs":"^5.3.14","@storybook/addon-notes":"^5.3.14","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-chromatic":"^3.5.2","ts-jest":"^25.2.1","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.1","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"c4caf40bbad5aa65b97d196fbb04086d8221de9b","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-alpha.488","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-FTqs+jezNrqohS49nde1XUNS8oCh2gNw1W/F+Y1UgKyhKiEMzraIh9LeRkXeu2RJ3nGEBZurPty8jpb06xfUrg==","shasum":"be03de4ef9089e10e52ebd48b4104e7720201990","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-alpha.488.tgz","fileCount":117,"unpackedSize":1243245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenfGmCRA9TVsSAnZWagAAH8AP/0GjqPfLLtTRlw/Vvt8y\nVnumI32NNlnYV2+qG105NGsihvOtNi4V8r8M+zsxHp8uNd5sN4j6uL0lokiK\nko7IUCGd5wfuMa8pRsCsAuR4YAI5gBftaBMs5zxw6cyEkeOP58mCfmYp82ih\nfRBYVuJlV8OeDfQRmi3Y4YHtpeRNJA1XTbLuMpfjjt2QHCyeNnuFyF2lX4R8\nBvR9EuC0keoinnv7xl0YfoWmEkOQkc5HGhhzf9z2ZrV3pOYUZVftPl8q6yOe\nGMG9pQKpPA4mD89S96nuHENqmaKErMFaNJe3JJYYXU/ktxng3kd0gck6RH+B\nGuecVtBsS61swxXyauKlo3Jd2mvapBvwVd408f9pFkAUUv9VKbE4SycGA77d\nN23lgmIc7koOtdawfog+G1gvcJkH6wOCcAXGlla/6g/y0JeB+d/V8acx5/du\nMATMPNlYdTqdA0WT1ZOzoAHR1BIeQfnIfmduKIILOzOowMoDDBYgszrfOP46\nHQfenvhozD+AdNbz1RyNmoWL0hx8taaU2yirfGd6jRaWy/0X49v156Cnui9J\n9394DBBh8Q1rW2nioRLKTKAdmtdupMdWFHEmnRGpv1BxKoEdfjA3zDc1mXhF\nbu7mRvhpghJ5jB7otYwQxTaXPuu/XgLIsQlDfQvk8N6b5qTMFVXYtlukVJDa\n4uHS\r\n=YFCA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFs4W+JsBpp7c0b79CIZCaK2dMnVkhiEf8f5Tk+lZiiQIhALg33lAyD9XqvtZcYAikoP2BewqLya2dUtsRKJTYwyeI"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-alpha.488_1587409317854_0.7927931677312843"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-alpha.474":{"name":"@unifyux/web-components","version":"0.0.3-alpha.474","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"stencil test --ci --spec --runInBand","test:watch":"stencil test --spec --watchAll","prestorybook":"yarn build","storybook":"start-storybook","build-storybook":"build-storybook","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","chromatic":"chromatic"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"^1.8.11","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.14","@storybook/addon-actions":"^5.3.14","@storybook/addon-centered":"^5.3.14","@storybook/addon-knobs":"^5.3.14","@storybook/addon-notes":"^5.3.14","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-chromatic":"^3.5.2","ts-jest":"^25.2.1","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^1.0.3-alpha.46+faada92b","@unifyux/theme":"^1.0.3-alpha.46+faada92b","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"faada92b3a8be22c5e0c0291c0d789cb90527ced","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-alpha.474","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.20.2/node@v12.16.2+x64 (linux)","dist":{"integrity":"sha512-w6Qpn2NzKPdd9fu4wuGhWgD7oPGiPs/CMhgjcPiNXTrioZeHS841yt1sewKd9ffz1QIhPLUX4gE4ZQpjXC3PAA==","shasum":"3f4a71ece8db26f6c474e34fd35236bcc0d46595","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-alpha.474.tgz","fileCount":117,"unpackedSize":1243281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenfPACRA9TVsSAnZWagAACFoP/3u1MdiHLNxHV2lSL/XK\nfXM8S+8qXdc9eE1lU209+ZRK615bJgmyK+nFbNhUB+Kw+D/fl588IoCF05Qn\nkK7dLV5K35hNZnyOovTeYAjbRk1ci4ISsAZui5sRonNIpJjDXLLfxv8qgubV\nQh+w85J7h2nahISgA71Zc8Ixtorc+t2qctLM0YW1ZPL9v2sPWsvTt07oH7HI\nuUfgVxamtwvtusgoLIaj7ZrXE+BZcrSWBCorcJg3DCmIiuvrHtfl6TfigpSN\nlSE0ECQGTRYKRIBGVJdJAtJqNj3eg2pm3i+xPSsCuDDb+1a28rq5H3F5l5zk\nmFt2hS8Icgu7tQoAZpH0yYdKtuYR2HXYa6ZKsKCNMz2jk9N+T5fud0VUptvA\n2yfRIyVg6WEeeQSTYu6NjMv7Szz8x6V7VLYASmdbBoX0zDx2AbBpP0TG42Mc\nSba1tqYy63TObitbgXpVyQt8BPiu3XqOoRTt0QofujrKZicrlnK+7JcSP7CL\ng+ydREUPF/vC0VKRH6qCKJY//HYgyI0niPLR6Xq8WTKydbGQfqJeGwa6KYhj\n4WYLtpgE9L0uiIaeJf79fr4pMjV6jdxNF2GkbbLNYqoZA3peg40AAtFzTaDL\nHBdpKNauFRVX8PMDqhtuQrp98jQRCrAlcpPkTlCvd0SiW9KYGlzLfLLQIiE+\n94d5\r\n=DnAT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICUl0IfX9RTfEa7Ah6MCrOE0hx/pLuYthlQv424ziQ4oAiEAq6KSflpiRLhh20A2CCSvx4KqcvBhW79whxKBojn9g6E="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-alpha.474_1587409856151_0.49833974782589063"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-d898ea2a6d3966a7724b1e2b11f406701628037a.494":{"name":"@unifyux/web-components","version":"0.0.3-d898ea2a6d3966a7724b1e2b11f406701628037a.494","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.1","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"d898ea2a6d3966a7724b1e2b11f406701628037a","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-d898ea2a6d3966a7724b1e2b11f406701628037a.494","_nodeVersion":"14.1.0","_npmVersion":"lerna/3.20.2/node@v14.1.0+x64 (linux)","dist":{"integrity":"sha512-fdLVcQr5gPBp4KnGFm1jJb1Z1FSjr7cyBn6GbfrHmDcuM0YVOuWy+gk9+04PTI63UuSW3dAwM5RIhzmqFOblEw==","shasum":"2aec1d1c82aefa08853b0f76e9cb4cf92a13f53e","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-d898ea2a6d3966a7724b1e2b11f406701628037a.494.tgz","fileCount":124,"unpackedSize":1287966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerC9BCRA9TVsSAnZWagAA084QAKS/dmZBBJPtrsj9lrKY\nVxgD9iM5wjfYu6VMiZZoIn+/tqq658kDmbY4SAFGpFUimcy2S0ZJrL3LDkx5\ntmHgtjfT+yE5sd8+Bpzpg01J2YnvFZv5SThCyVqOsMfDXySBIoR8A3CjajER\nftzwdAtA5M9gRJOhFUbHj3b5c462JYSP5kVEVuVz7OrgIOlQBGBjMJGdIVe+\n4c975CK4FMODepkYitcTvvUS3Wxyp8sfa0m5aIx2YwEKY/olLk9hJ2Lnz9+P\noSkcGpZ1OIpDBVookqc1kl3leU64ebCjtAl34MYsu/CREeFHyXhUG1s9hooM\nkKrSTMg1NzAVJ81/87XCpdH6xpS26drprgnjxckfNu/dc45QacOFJKotRy0X\nx/YKXG5SoLaBxYNyzL0lhAnRRone2rGPU3GEtHrAm/joUz0bZEglUsV/QmpS\n7FqVwSvLv4dKrGouGf83012Y/3dD7BCbFrY5hvW9gC/0ZZ4H8kzPUsoALXZ8\nstxBjKS04qh7oWgvHVXbeAgdAE1X5q8g/NB/Ngejez5Djml4UZCgmNDs594o\nxUAk/kMQgks94CXCvdiUaDvh86p1ahkJCN1GOHjUcv25Wy14SnFPhiNF30Vz\nIhlegv/ZDnj/eUJMbq0JSVaNCT7RwkTUOb4St0rRAMjrrqiGU5ew2nEXS7jV\nh7+U\r\n=UdFy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDphCUr+zhUFdsGQKUzuyDqaC5vYtBlHCcGM+1x4skTpgIhALtHYXWDgvDCJ7xLwELQSHyJa1mRNjaovcISgmiMLIQm"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-d898ea2a6d3966a7724b1e2b11f406701628037a.494_1588342593323_0.23107384678404275"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-5f5c34fc190281e686300c37d76fd4909a415cf2.479":{"name":"@unifyux/web-components","version":"0.0.3-5f5c34fc190281e686300c37d76fd4909a415cf2.479","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.1","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"5f5c34fc190281e686300c37d76fd4909a415cf2","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-5f5c34fc190281e686300c37d76fd4909a415cf2.479","_nodeVersion":"14.1.0","_npmVersion":"lerna/3.20.2/node@v14.1.0+x64 (linux)","dist":{"integrity":"sha512-qO//mNozYP7bTfBnSqU3k4Zk/O9IXiXK2uDC//ZQ2fSLnmi4Xox7miLLfGfE9lRPiz5OXAAAUPWYtGmLCJrTTQ==","shasum":"c50c0e0a9315feacc6c56ce7368200c6ff6af3de","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-5f5c34fc190281e686300c37d76fd4909a415cf2.479.tgz","fileCount":124,"unpackedSize":1287966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGdvCRA9TVsSAnZWagAAeB0QAIQacnAn0l22M01zBQFH\nvxAKsaAY+Wb9/T04qnO6IpiLs4+hZZjVyxpFWCo78AmFU6xlOT/OKTBrLomk\n8uvZoWFtDXq2ylA7uKw+C058RdCD9/i1shZJUY8B05xzN0giE9IVkuvzzXxm\nswUngXQZcnuH7hlQ+O84ZF+TRzDCuDrpJ8Rq7Y5c1HjBb/57JI7hpCGc95Oe\nrP3I4gM9oMQMf969oUDES4LSqQrUrLzjS9/Ee6J/d+KH1NwL0s54XiP5veFE\nfdrrObiCYolGsahbo1+PJ3o5rXWyQ4Q4MApvm5gBaPvXKBjRT1/8w89yMHTu\nx5S461YmWfI31U74JnirEapWS+Ok9GsU8mk1JEXS6Qtbl+TycH6c4MIow9Rz\nXampkJu9Cwg3HCasZ0G7CnEDcuJHKqPTDjTQ5k7nK8Fo5jHc7knf/wZLGDe8\ngwfjK/yPccCvGk04gvEryj3ieE5p4FHTID8tUU/0goH+2OD4UsXthRBD1v4g\ns+3e6dESuUmrTrAwkHpNYwYji3HMyC9xehLSRVgN3F29X7UyAEoLnBvi/o5L\nCOn9ha8PZsoYJBMk36nlcO3vMjIwgPWs3+X0hZ/UFoXN0/dxCMjLj+0Wk9bY\nQyrW+1UIoqwoE3fyAJtcu/fOprKlovuoiEksz/AlZGQGVEf3RfLf8ZVLMFN6\nl1VC\r\n=rdUk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiR8jRAEsBGBp/li53amsBlXFFe3c/t9P3WypJaWP5XQIgQ57iFhn7I2GUB+69/Q7/3mcfXz/bw0VhQ+/liC8qo0o="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-5f5c34fc190281e686300c37d76fd4909a415cf2.479_1588356974796_0.9736394777823183"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-bc7270126ecd06f24513418ae5c7454d57be891b.482":{"name":"@unifyux/web-components","version":"0.0.3-bc7270126ecd06f24513418ae5c7454d57be891b.482","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.1","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"bc7270126ecd06f24513418ae5c7454d57be891b","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-bc7270126ecd06f24513418ae5c7454d57be891b.482","_nodeVersion":"14.1.0","_npmVersion":"lerna/3.20.2/node@v14.1.0+x64 (linux)","dist":{"integrity":"sha512-sSkDWhIheqU9iZc4Jyc2ho+0fcdr9m9FqFAtV9a2XtknL4FXohaSb5TxACoYp59YWICPQPrKJZQwnSQ29SZmmA==","shasum":"c2127acab0187de59162d7f5ac2e6fbeec628e0d","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-bc7270126ecd06f24513418ae5c7454d57be891b.482.tgz","fileCount":124,"unpackedSize":1287966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesWd7CRA9TVsSAnZWagAAZH8P/0VIEfjwWdgXat2MEz68\nGSF2Gqs4Q7CHUIRPl4PJLAb6ns7qV8+rWZw6CAqgmehXM4Ae//ZI0XIZ4kno\nyfhnboS3h1a43OupuUY/ePAMgXbt0w8BGu35tHRCj2SHiswVUw1sxC2ObwWC\nh+QI/Z+VDPNkL80duwpmZnBOhll5trecGHf6Dhq9qn9yVP+ZZtJun6hJOeXi\nG5SoovUtxlLe9Qtp2QH9B+1NPge5Ote5deu8Ol8jF5cfPylYgp39QrT/wphl\nOb5ryhIjatZ2mp1p86j0luqz4X2oetbaStXA+Jsivs8UmZrQVX7E2q0anVoc\nG2733Eyt0e6XnhpPWIbbIBs0mxWqxSrMpE4gAgxXCe8a5f0VbM4tpFM/n+Uq\nbrFsVS3X3UmVlW1cGjVbyxfBRVY6mQz2xaT+IaUbf7qO1qUmviRs5G3SS559\nF1dqGFlVoHQIYO2smg6o/Gs8iy6WDP+MFEkEnu2aGeaoJFOpt/rOOqG2jkrP\nzPeA8SIoj6wn8ExSn4MVo/QF7eb1rot0TdT0DLx66hYUsUhrQPHLUxfMW/4n\nIdux8rQcj1xetpWD99wzS/vdJTxB1e2PBniU2eittBd6X8HxqNI/BhM3xhkg\nzxLRCF37LOsDfyWpOaR8291RDWP9Np4xoK16Xey6aVZLPOeABVZCTUyI4EMd\nx5L/\r\n=qqsA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0bT26/TcJIM4kk8SUvbfyClZmrIqwj/BUaPw6NkOQRAIgKKbzjG8yJqQSK7UCl0odD1KH6zZLmRiEKU/qXrBACC4="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-bc7270126ecd06f24513418ae5c7454d57be891b.482_1588684666715_0.5948849804497789"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-5669f70340ca5baf165267f55e01dbf12c4933e0.481":{"name":"@unifyux/web-components","version":"0.0.3-5669f70340ca5baf165267f55e01dbf12c4933e0.481","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^1.0.3-5669f70340ca5baf165267f55e01dbf12c4933e0.52+5669f703","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"5669f70340ca5baf165267f55e01dbf12c4933e0","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-5669f70340ca5baf165267f55e01dbf12c4933e0.481","_nodeVersion":"14.1.0","_npmVersion":"lerna/3.20.2/node@v14.1.0+x64 (linux)","dist":{"integrity":"sha512-2Rfzd5NEFIz3UyVnkRL4PQYxB27Cmq43sctozpRaqMtdecoPH7dwpNJUB1iLnR+EGdQyrfhqvr6yRZt4a4J90Q==","shasum":"e9b64446f0f180da82baeedb896722c70926320e","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-5669f70340ca5baf165267f55e01dbf12c4933e0.481.tgz","fileCount":124,"unpackedSize":1842113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszmrCRA9TVsSAnZWagAAl0kP/R5f1K2w7zLLrs90QS0x\nP6E127unJz0JqbAULM86GIdd7rT2yTeLJaM7eoj7OgjsATFsOLIc5nxdhlms\naw2uhzIWRDKCvMFKL5f9PmFKPi52K2u/8jX8Wpx2oYeq2CRabiweMsP8WAEh\ng7BcdbkYEwP/3DHtvRaHMNGz/zqDbh+quCuw+QuKlzkuNFjpmjhltI/Ru7o6\nHZWbwijQ5BXxEf84srVGlxuzkHHRw9qeVU/7oY0tWsVUrL1vMxy+wn3nXJWi\nz2M7+oqMLE27qmILZDrpjVpCb9k00sW8IDZL29ETHZeu/q37RJuI+Mde9G0L\nrTOcU8mBjRBk42JReP4fiSCu8JIRkJ5w3hTJ79zOHgwl15OVIooyv7A1Yxni\n/pCrf4vTxloD+ckGCmlaaa2UiUPSN+AorXaroD8JKgDjUjAkSJOurpF4jRYs\nceXOtKAVr30F+zK/LtSrrqnaCM432LY00fytHVVLqyMskjQDIoSekVTUO3uy\ndCEwbulBvbgmVn0Cb2cpX2BhmQVhCsEwbJLN/y42xV5yL7rww2ZBHfct1GJS\nylLhoxlXmejtjmRLCHNQgdTUNyzuoFO4mGI6heuBQL3pPnK6yq3WlpDfKhQO\nPq+VRYFQDNTdGAF6UVY4DtTkQEHbu79SSB+GYp+5zHDhqBWURWs4ntF54qck\nbvt5\r\n=nWQA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICdGbiDBDLpXTBW+VbbabS1opbyipBAPEGGLFEIR1iIvAiBqIw2yI2mOotKl/do+0hYcOdap5jZUOE/hXnBC9CTCfg=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-5669f70340ca5baf165267f55e01dbf12c4933e0.481_1588804011237_0.3217241220672862"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-1d21ac15efd91b2130283faccd5500013c58f2ac.485":{"name":"@unifyux/web-components","version":"0.0.3-1d21ac15efd91b2130283faccd5500013c58f2ac.485","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^1.0.3-1d21ac15efd91b2130283faccd5500013c58f2ac.53+1d21ac15","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"1d21ac15efd91b2130283faccd5500013c58f2ac","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-1d21ac15efd91b2130283faccd5500013c58f2ac.485","_nodeVersion":"14.2.0","_npmVersion":"lerna/3.20.2/node@v14.2.0+x64 (linux)","dist":{"integrity":"sha512-vMIhSEzNi2aKCTO6rrfqOfzcy9ScPBunODwKwYkdVKl0RQmQpNnkRUymkfLWBMKXi1k/6N7StkyjsZKKXEhoVg==","shasum":"0100a5d92315e87693760d24f776cf37010bf52f","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-1d21ac15efd91b2130283faccd5500013c58f2ac.485.tgz","fileCount":124,"unpackedSize":1842113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetC27CRA9TVsSAnZWagAAKP4QAJUfKJNrltk3r+v5tfi7\ngm1lpoidFCksZNF/VcKFi40A1/Re0emWSGcXnTuc/DKh7y2q1CP0CM1QUIe+\n8IbhcgxwjD4eCSM0ObmX7+bz68X3ENEgtv/A12backGx51vA3oMSGbsnATcl\nLjmC7uMXMAKXCWJ0s/DrFa4YacvBZAUSIa/4x3EidBTEYlI9iv/JShifz5Bn\njaPF7vEiI0HElWmzwwzwABuclpo2RcLXO1XTC7qDOnZuc3/ixT456aLUIRy9\nBDove/+zqAOG5vlVePrAVJsEKxDcqLPTmjMdOEv+H0V7JKfEL7MOI/97uUu9\n1hRo5n4HavGGHVg5NT/wbBlq4A81AsBOjIPzuJmSTv1IOzLL1rhfnE0LDl4K\nPuG1oO+ZHi7E94H4F17uGSU2cY63J90MsSMZhLfz9iy4Gs1VJ7zw6O43+XUS\nz/zuu34QHOV4ypjvlwVoRQ5qp8i3+aAVj17hzNWZHh2iaq83Y3Ag/1vq8aXY\n93mOsnzmGkgws3LzT6kkWwFAwyFy9K9rc8mUQJndLH5Fxv5MPg3BRikjgn5X\n2iiSZ7yLVa02AyGXN18CJ4OYyrBr+2HkiFP4SMBbnNbfKVQb8I/J1OUveEQa\n9h4nH3BFw0LyXPw8ZsXPS3KTRRLR0gxNunxvgTusBLbfGySMXNj0z2zrbkVn\npx3b\r\n=X35q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICRWyPtSbVkEwRZGrOYHcdTn02nz+mDzixCymixB6lolAiAr1JvyePnAjvAfNF0+GGzM2RCfPOucFLSXCl25fBwxkw=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-1d21ac15efd91b2130283faccd5500013c58f2ac.485_1588866490866_0.12550815556712958"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-e51862b15cb56bcb733b1374719759bed5534785.486":{"name":"@unifyux/web-components","version":"0.0.3-e51862b15cb56bcb733b1374719759bed5534785.486","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^1.0.3-e51862b15cb56bcb733b1374719759bed5534785.54+e51862b1","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"e51862b15cb56bcb733b1374719759bed5534785","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-e51862b15cb56bcb733b1374719759bed5534785.486","_nodeVersion":"14.2.0","_npmVersion":"lerna/3.20.2/node@v14.2.0+x64 (linux)","dist":{"integrity":"sha512-dDQS1rVqybaVnalky18npboHb9AB3T5ropNYKh3IO8wo7+HE5b6I8PKUHh3LDDHd2qYjmw/nD2o5nPQ8/UdxPw==","shasum":"cf7537aa3762ccd009341fee9bfc23898a4766a6","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-e51862b15cb56bcb733b1374719759bed5534785.486.tgz","fileCount":124,"unpackedSize":1842113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDJtCRA9TVsSAnZWagAA7MEP/2L1fNxFnm41d/pHeHPI\nzH0nt/aUiNmaGizbvxYBIVhEZ8E0ojSHyo5bH8esLtpQ8otc9v8HLmxswwEQ\nA9jxMgWn34glHTFPFsYec+JvrhTGswYtGjYLA3LI5hluNnXZ6dNIAnZav05r\nHrId0WCO2IkTQJQkeuA2H3aiA3YLjQ1MPVL+TX33duIZSACkvWUFL4MRj78Z\na2dV+CHJQI6n0UP4VwEpRmHYGV7bUAK0+6obYD0HGU8ultsorj6z0preDHHb\npkdf+cKfAfOkHf4YI9Fu1hCf9kBVyceN7IzJbhcIbZH/PLLxm+5+srtLxmOC\n8hFke8L3U37XmcE3MbKAlfVTXOyanQtoj/2CPP8ovgYn7807hKcwBTY7A+Hz\ngszRudaMVeSR4EwM5imGED8CLVIB7z64oiN9vdcT9+N+yxyJeW3Dm43z52LW\nwwzs5tGNto1MqGv1crIZ2tp/x+8n1S5rqKL/5UC7wAYpGPkG1v/dhe6z5GnY\nT/Tz+EgEABwjwzYJl+jtBNDwsRLJRisGkOX8J/5IovINXH0zI1GaLzVsRj7i\nggvEuLZdKKAomtbrAGd+J/CSV7HS1H9JMdffvO/IU/wfH3+A+UJpFzlbj0Wi\n8XT7DZ7vsBm8XXFNwdNvYSladcd77GWWUsQwhx0xT82Ve33SCzfmhdGXI4Iq\nOWK6\r\n=ltnE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWQpi5S2fQY9phlgVTWRnjjRkOmNZebOkwZnuSE8ri5AIhAJUBilUODCGpaGSm1qmHvAVpGKdvSFAeNh4q92UNSnHA"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-e51862b15cb56bcb733b1374719759bed5534785.486_1588867693388_0.32814559124243314"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-02413ef471054de5dfdcff73c68928ef5d078c6a.492":{"name":"@unifyux/web-components","version":"0.0.3-02413ef471054de5dfdcff73c68928ef5d078c6a.492","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^1.0.3-02413ef471054de5dfdcff73c68928ef5d078c6a.60+02413ef4","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"02413ef471054de5dfdcff73c68928ef5d078c6a","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-02413ef471054de5dfdcff73c68928ef5d078c6a.492","_nodeVersion":"14.2.0","_npmVersion":"lerna/3.20.2/node@v14.2.0+x64 (linux)","dist":{"integrity":"sha512-mmtOhyl1t2Bg979dg/sVcyvz5iwfhmgQZlwJri20EQPv3+w/7ajq+94x/ZH8oOIz6W7p4amwccZdDbVFnjU2VQ==","shasum":"b268921c1d4f7b78faa9d7ef4a2806478032ee6f","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-02413ef471054de5dfdcff73c68928ef5d078c6a.492.tgz","fileCount":127,"unpackedSize":1847628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetYeNCRA9TVsSAnZWagAAIBgP/iWvm97dfFomfBj/Lams\nDLu1VZRqGvNaSGTUB7k2/p0KaxSJfDxdgDbt73YvcKtn3ierR6gY0hLE6yY3\nqKAvxhB7Ef2XIQGIqrrRFL7wIIBga0JwZyEyrR0FdWYdI8zk48TeIUt1TRcq\n+68Ol7DdYUjOqqMhqnAf4JY2Ttx8Ucj/jhv/ElIFyZygMos3WEAbVGvmfHQP\ngu1crHJljsTOqMZKBAr8XISWITyMQ9IGM+AU4Ezooo622bnh9sqss4moQoWr\ncUCCryF1qy2YrcUP+ytgCFvBFVeMc3M3Kep8etYpkn6Oi7BN0k5edK+XkNyW\nWXouWN+BhjXzUs2fA3wC+/kRmKcFoKwuxEuVNYAb5RxeyZdeUU2TYh4Nh5dv\nZoxn67wUlv/j2MBZn8injgAblLpHRDUfLb94vaZhR1tlSDCZPoQoxmhCetFp\nAmiLtlQJZMBiEcu+VD3gWFkJpcnWW0w8La6BW3Xd4pjMJonHM9YrCWyq6tR6\n+tTBA0vjqNg/dz77B3Xp0Fmo8xd51Wgu9onodt2/k8PbCzcgML9EzyBn5Xct\n9s128zzK+0vvjQ4Az9O0z9CziISDusAU/2Kk2iOOM9dafYtseSydrqNyxNy5\nvqNOScx+/0U6bN39T0eD8kbuDK6epb4yueJCaE6JsIq6sdhxUWnmur5sev+y\n89FW\r\n=GFzD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDHzhznxg6cKMqqkZobwJY/lan18LZSMy2YQQTnOqlArAiEAnOKX0tkJCz4Vl7M9UVhgcThQ8v3oK9cm5sOJTHi7GKs="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-02413ef471054de5dfdcff73c68928ef5d078c6a.492_1588955020546_0.20747491514401228"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-a15def823975c01335e1f7bf20411d41c7b3f873.496":{"name":"@unifyux/web-components","version":"0.0.3-a15def823975c01335e1f7bf20411d41c7b3f873.496","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.1","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"a15def823975c01335e1f7bf20411d41c7b3f873","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-a15def823975c01335e1f7bf20411d41c7b3f873.496","_nodeVersion":"14.2.0","_npmVersion":"lerna/3.20.2/node@v14.2.0+x64 (linux)","dist":{"integrity":"sha512-VmLhs+zYO83xTxf6iWj3TmBaW2L0NOAEVOMOxMX1ZXAPMU/DN6uC2t9haArlz/kFIrwnGdAyvxsfSgcHkRw/Pw==","shasum":"93d4dd5ffeb814faf1e2fdd7673db26f590b23d2","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-a15def823975c01335e1f7bf20411d41c7b3f873.496.tgz","fileCount":127,"unpackedSize":1846640,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcGaCRA9TVsSAnZWagAA/HEP/1SM2aAXSrIqQq7tS/ji\nNDq+Jb5IveCG9l12EmqMBaKsMN+df5vyq33gT+ukZb0ZXUOub37Yvyz2yaPY\nzbX3vZY9wslrwHGQ7NCwHJ0+2cPt+1iZdHrAsjMLkN1pMZM1bfPjAJmQ+wEL\njMK+E+9W4FwW8JE9I2db8+e4tRgc5GtBcyay3FkivpaL55fLGSwN89RI13wX\nGz0csQNXB27nHEgSbB7OLccbkDj6CUWy7VgN/QIWqybg3U0CCSuS8MM9e/ZL\nv7afPlV6WR2vNb6FhT2g/y54bEngqdiOgSVLbfDbD+dA9J4z0K/mywMcdPxK\niZMG3als6yn9hpOCgzYxzBhRvDlzjK0JJNVb1TqJTzZXz8kPSvbBBbsZ1NyP\nZwMmnsEJDy1PTXzZM57HsJI4ZIx+MUQ2vo3W4CEM3L4nGwAJxoW+E0wosR7b\nKWuBq9sm15Uu9ARR2NVHelUdftgVjyKB2cirrG5778RcxVyf6Fy4ZxnMc+kj\nebI6DqyZSYPG6wgjhZ3RfxuX6wqzuuHvZeJFFsOTiBD0ApbJFdFQJhI/pzBA\nbrZideb+wIesI5JQmVNV7gz8zMkFYSDqEFASk3M4+5z42aOL4VpBr7rTxvvg\nNNWE+e/AuleO4Aq4eUi4/Qxau04BeljSbhX2hUiIcuuJeIZPZ6RDIZqMQZWF\nz1rs\r\n=o66q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcMGl290HLSkubbpnJIN/nIZ/NtArZ61wmwuMqeSnjSAIgMqmdGtIQ+YniSk+2nFt651LJ00AFBFdHmb2nmnPIR2M="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-a15def823975c01335e1f7bf20411d41c7b3f873.496_1588969881736_0.3710520291885093"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-ab47c1988d78cecda38b08ad71a6dbf9bfff5949.487":{"name":"@unifyux/web-components","version":"0.0.3-ab47c1988d78cecda38b08ad71a6dbf9bfff5949.487","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^1.0.3-ab47c1988d78cecda38b08ad71a6dbf9bfff5949.55+ab47c198","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"ab47c1988d78cecda38b08ad71a6dbf9bfff5949","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-ab47c1988d78cecda38b08ad71a6dbf9bfff5949.487","_nodeVersion":"14.2.0","_npmVersion":"lerna/3.20.2/node@v14.2.0+x64 (linux)","dist":{"integrity":"sha512-8xISVF3Ys4mFDSD19Nyu8GZgMcYtkGQVvzOmN3RcTp6N04ABjVJtfhsNdJOHWWfdW4YsdhxHQMEsJeF8MfS4zw==","shasum":"c2a54f9102067b27e6c3c5af59bc2d5defa767d8","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-ab47c1988d78cecda38b08ad71a6dbf9bfff5949.487.tgz","fileCount":127,"unpackedSize":1846693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcRDCRA9TVsSAnZWagAA8ewP/AgVAmgwOm34JGZfd2gq\njKALBrrhHypu99cjKoOPG/WqrBKWUEYTUgyNpiR9cuM+Rf/j+8u5EGftj2rV\njhSwMJLoXM9YS+XJ1S8RA7VUqA/n+HcehIQcmZMwbQM0c49h4EeQnTsHBVWU\nM9UYTPPWBj5Gwz23cSPrMs/rHKvBqVW1D+FdaQn1ma+5muZ9WUbfIcF77Tqq\nWyq2rliUgc0aFFOOipvs5h8Ylr5/YuDTmWko3YDs3rlRlBqhOzKiVVW6NuOB\nievpR/ohTE7P6FFIrmoyaTNMVFpYs28MoMXrVnieH8IIjKgZ95CTdSM5UZXu\nOvQsxgcDlkqRhzMM+T1rbkH8B36zvK8ivTJVBBHSZkE2ytFb3eYxlsmO577O\nKFz2gg8M9A9E1B46xQPlJ2CuI63jpCP7ZILaEYNZwDW6YHOKECoyMuzIDWTC\n5cXsaw/l8bwwyQdukvVLgBFFlZ5z5bNvKaXWVOgIp3EhC5YmuqAjyoR35I9U\nGmGFEiMg7mSuZnm9DfT7QjRoXCI8QwP0d854kw75oNbcrR1v9tkeCfUP+Tgo\n41I0izERAZTi+LrjuoVAuhG5LVZ9cvEkhFQOIU5+AjoQBZWKgzNE0z9FSpip\noV1m4p7UIWY/a+4Z2ZBxg/4P8NAsSaJ8adc0MuRIbNuQDVAOcttMWHwudAPo\nE/dN\r\n=kB9I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCG0s1wodq1GRFxKGaGuIw3+ccyLEYTiQgJXPloWN2scwIgJ1kRNXpZchGRUbAlXuLXAkfzNJSeZ9a+xYyl/lISMuU="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-ab47c1988d78cecda38b08ad71a6dbf9bfff5949.487_1588970562773_0.3516114473404297"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-157a6581535050f2d8653a5c6c55b14f0e9e7490.491":{"name":"@unifyux/web-components","version":"0.0.3-157a6581535050f2d8653a5c6c55b14f0e9e7490.491","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^1.0.3-157a6581535050f2d8653a5c6c55b14f0e9e7490.59+157a6581","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"157a6581535050f2d8653a5c6c55b14f0e9e7490","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-157a6581535050f2d8653a5c6c55b14f0e9e7490.491","_nodeVersion":"14.2.0","_npmVersion":"lerna/3.20.2/node@v14.2.0+x64 (linux)","dist":{"integrity":"sha512-SDDwLBPlDO4Q6mgWGYn98unHLBDvvBCZGMgt8MQkXe6u99mIztRQZ/H7kXDGJ2xrfUOX/8Ee6PPAXLNQbhl/ng==","shasum":"533cb95d20d87978521342853a1bd06521d873cc","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-157a6581535050f2d8653a5c6c55b14f0e9e7490.491.tgz","fileCount":124,"unpackedSize":1845239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeus3kCRA9TVsSAnZWagAA8tQP/0T6RPmmOdsonyQst/3n\n/UXTKoLpH5cFQhyBc02G+QXeNZ9IZUeskQrkFguIqiMjcV/gYLATbDk+50zw\nKLL53Ai21oTqbr7cwfjmo8LckFy2BRfg/Esm/stIjQ5KJSpjj/+4GXS9Y6io\nJLrFtPaTRf/E3VdEBW6anAGki4uLKJPFG/CJOBHrn9zmHygF/gGpHApHu1gn\nCNNZItJSsxKM73VkkDHf5iC2VE6+FnCfcSNbvCsWhtYYPZiB4h3lr0gPkQVG\nwjc1dgLmFFQDmJEindKx7OyUJ6DDXXeqRqc/L5ozeB6nDU+AUKVHAdVD1oua\nC/tXzbfHgyG6YB1WAbFH6zKJNWOo47k49D+r++p5p6uMW7nqNaRFQ6+bAPEU\ntxqWY6Rz20BCmkF9sNmCnin44SXoYjMVGRLTxU2BOgm2FnYJnG1r1NpLFwEl\ntel5B8ePFmcavU/9EeuMOe5cPs1U7uR7zdlh0o9mrZf3h3x+65irEk3HvF46\nrb4wYHTXDoBBnogk7ffsJGac7tx+rZ5nnJCO66uLz74BRQwtR955hLqkOyc/\n0nr+1qYEiuTDE5xgG5eL1tgdfffJH8udEbs/TkdTBS//SSXaG19xtpQBQoxj\nAUkSlqf1Jofw0g55oYTFdaLEMJV2nNT4lAV0o7+0PY1UG2vmudmTMFy92e6L\ntj0s\r\n=sjY2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDO0iVpcfcF5DSSe5M91OqMIwsto8/HTIlIeYCjpZs9dgIgTzBgGP2THFkPYUuRThQEobFmkdiy0txmLw3GuPwAaLc="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-157a6581535050f2d8653a5c6c55b14f0e9e7490.491_1589300708014_0.300903995617372"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-b03994724d6e6033f32c340f4c607b463b015f39.492":{"name":"@unifyux/web-components","version":"0.0.3-b03994724d6e6033f32c340f4c607b463b015f39.492","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^1.0.3-b03994724d6e6033f32c340f4c607b463b015f39.60+b0399472","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"b03994724d6e6033f32c340f4c607b463b015f39","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-b03994724d6e6033f32c340f4c607b463b015f39.492","_nodeVersion":"14.2.0","_npmVersion":"lerna/3.20.2/node@v14.2.0+x64 (linux)","dist":{"integrity":"sha512-neVQdL4yCkg+NdSjo02bmGsssK+OscxCgLfUAoJi6nNz1H6cFEsNqNvSAvrPYceiJYRnqIWFnwOgizjS47m7kQ==","shasum":"bfedea3a484489109bbf18b6c13234da87f10459","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-b03994724d6e6033f32c340f4c607b463b015f39.492.tgz","fileCount":124,"unpackedSize":1845239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevTpSCRA9TVsSAnZWagAA040QAIYQRgjV0FLuCV8iCPDU\nPtN/DFsRU+OpSSX3SE4rZ+iiSNVv4mebCPpgaJTDjwBxoWLnHFeKU0LIrww+\n/yxIrW64fHy+7Fk6qTHdLfMujDNaYHbrvVov7kWBxL5krdrGPKPpqO0dgSwn\nfRKjGzlVdryFxHlFAHNUr8RhsySTdQAQsWbnNw+jdX3OokmtyclQtOsZJJlu\nRGWzakg65KAPmet1MQnWePNZPzcZohmckrj2npeYjxG77G2pSdFZIVyJZfE+\nzE281wQ3GzRiCrL4ykevVXg2DB4z4MrLcbpUxBb016Nej3UkKwvazVHPQR8u\nAZBKukHttauhJK4/HqFlA+RhzxE3Vu+xIrsWUEB9j2yyAlTOXvfR3JErmFOb\nrzTQLQfusbYng7cx7IDDA6dZZ/k0RCO+rIjNbgceC73tCUy1CqxYSeNvOQk4\nszGaZshDQV32OoGR3izD/IRxgdKgx/iNwQYDGht813mjVMuiHY3wqGOZ/bzV\n6MDI0HA83k3wKIjiMXDW6FlGCFnKnEeZipZ1QbrOAOyeMfcgSUT5vzvlkzQk\nc/wnLpf/e+BhrfimOI+WszEITZLyKDOMGKa6RFi9e11X5PSyg0ndxi1Son1s\nG9yuVprRSehtHshdd9AtCAbm0KTz5ZL9rfAqxnrnx/Jz/MHRy9rs/TOlU28S\nCe7M\r\n=pJ90\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNWfHw0S/IykBybN67LQqaE0z4sQ3SgvdqfQ1xkkHFCAiEAmZAKX7a31zMdad8JmEtE+6/IluJzRL6EzMwUoA7+nTY="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-b03994724d6e6033f32c340f4c607b463b015f39.492_1589459538154_0.3784016940039363"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-07cac97cd3f6cedd29e4f2f8fadbf5793e8389e2.493":{"name":"@unifyux/web-components","version":"0.0.3-07cac97cd3f6cedd29e4f2f8fadbf5793e8389e2.493","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^1.0.3-07cac97cd3f6cedd29e4f2f8fadbf5793e8389e2.61+07cac97c","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"07cac97cd3f6cedd29e4f2f8fadbf5793e8389e2","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-07cac97cd3f6cedd29e4f2f8fadbf5793e8389e2.493","_nodeVersion":"14.2.0","_npmVersion":"lerna/3.20.2/node@v14.2.0+x64 (linux)","dist":{"integrity":"sha512-YEcfp9DXduZtdKHnzHH+eSTOyr6KtCgbEzT9rZkyPEu8XFjgwpgpkFmICbQQFJNp7tOVsfmEMnw4+BnSNE6pQA==","shasum":"41b22c1b60477c91f856ae181f6d1fe5b38a0646","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-07cac97cd3f6cedd29e4f2f8fadbf5793e8389e2.493.tgz","fileCount":124,"unpackedSize":1845239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevT2dCRA9TVsSAnZWagAAwbYP/0G6S7hx2IvXYYpVOgwL\nX8WAkC2syYB71K2e3JNgeRu60HG0am5Ji1d3hZZTSFNab7ViH9I1qc/CxdPW\nBvRlUvCAHiNyUNZuClAd2OJuY/5GTuBM/p4VKNKw9c19nMOrnEQ1VAHWX9R2\nWzt6dH2wLZZfqGLK0xMnjyla2U5ZAJT7B41Is34CtGIRhO+q6C6j6icJRI4Q\nS6vRU6aaQZMnJ840m3KYYjgmnklw0g8x7r1ueeMDodf2mDR1AykWGsmwsXyZ\neVnRHh/6jvVw59PlThPq+zRq/V5DXXH9dN5pIwYDDNStbPi77YrS+wJp+Hzy\nKztCGtRvoIe0+Je6o70ZovBjNF1q+7nveT0FzKNZxHBrrLLuee44l/PerpVC\n4FTuN2e4g1y4x6JfGCPeoNZLOZ5n3/AAO/9PgOVemJIE8sfsl8z7kocIgYtp\nwSLMJy8p+lDY7Rd94JjtiryDIvCxmVPQZqcpsn2j1eMaGJ06O//jPGFMRUjL\nn4E/Ir8kOe6F9hlzz/6pJy4g0lPux+zMBq8NIvN0pq44gvePEfPBmand/dlk\nHq1hpTJ6N21idHwP7lxObYq2R8BFwE7z/ryQU69EbTtL2p7kEp9xXj7aUFzO\nHIGPggBDBrB5sSHOforIJkTakObrYyDdTnsFL8s5ujWyCI6rk3V6Ru7j2A6q\nk52z\r\n=rEHF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8g4QG57tAYI8CiJo8kOWxreehq77HEg81ejitEqqPQAiEAoX5Geo93VzCL0Q3fhMXqMXUMR79MfQX+uA38cTcwATw="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-07cac97cd3f6cedd29e4f2f8fadbf5793e8389e2.493_1589460381279_0.8091260320310161"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-94fe342982c70b19df6841228a9dd0c81d54b7ef.488":{"name":"@unifyux/web-components","version":"0.0.3-94fe342982c70b19df6841228a9dd0c81d54b7ef.488","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^1.0.3-94fe342982c70b19df6841228a9dd0c81d54b7ef.56+94fe3429","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"94fe342982c70b19df6841228a9dd0c81d54b7ef","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-94fe342982c70b19df6841228a9dd0c81d54b7ef.488","_nodeVersion":"14.2.0","_npmVersion":"lerna/3.20.2/node@v14.2.0+x64 (linux)","dist":{"integrity":"sha512-2ekawdIhv09DkNIfrYauFNEy8UeqP/6CiXIoSBKEDHTTx/021RIU8cHLSdMq74gZzka0cTnUaJ2GDsCYriNUjg==","shasum":"a113d91ef2fc1e74c8102824eac785ac64b9f132","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-94fe342982c70b19df6841228a9dd0c81d54b7ef.488.tgz","fileCount":127,"unpackedSize":1849819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVneCRA9TVsSAnZWagAAdEEP/jXS/6uWESpTdwkPHmvz\nDzgZRKFsAC7SPYbGv0G61ZiXCbHrJnQeJCxVZU7Y1hfs+KdyZsZDFeJOvA2G\nY1VIyHEXvHlcNLD5S80zvl0zyaA/ZgCtqznjJrcmbmQ9tVUr/1u8V28CS//S\nc8NywjGxApeo4BBbjkgYpKE2F3qdgEYlV9LVEFQLY//IIfn/WnOArYKQKxSj\nckzPBAfnJl+jsBh6vljyUrZUQZVk17TpgwSzYbOS8NOXsC4OrgBYq0sVA+ap\n79+T89Df9d8J4HiQXnnehXR8iVq2DyysWOwyBWDErfywWbTGF9QOllRXhNsQ\ncaC0ScUb7PLXWjPxLWv98xUss6b1Wl5+P0mVvStULJ+oalZEHIMIQ6wCuJCU\nA+RuvUA6Z1CzCF1qi8Mq1fTTCsEhSUUPb0u1SXu+/1gwsoAMfyIc8KOcVuEB\ntNeGaq9S8XJy7CkMBc9/sgQzpUw9z28jexkYx24s/vjtcaY2uQc9H1pFlb/Z\n8DYFjO8siDZJ2YJOs32M6Zx4RHRsT37/hiNe0AF3ZzcPB6sFRzj4vAT/YCOF\n+Uc2RP1vaSwJIV6yREjkmsG4rzZWNwKYnTBC3FW9wqi5NJXacWA1I1lHTqBp\nag3O/Rzk/SfmzrDIe+UILKo0ATwmtfqjTH2X1oeMqG6BUUdeThRLmh3mfEGW\nLIBP\r\n=CVNC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFtsG5l9bmdB6IZN4n5ljrM3u5scFopHxjKw6h6Q95NEAiAV7itFE3wQ+UrCFnIKJeY9PTHcUnkiRRptky+xSpHJgQ=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-94fe342982c70b19df6841228a9dd0c81d54b7ef.488_1589467614467_0.4840021457621668"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3":{"name":"@unifyux/web-components","version":"0.0.3","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.2","@unifyux/theme":"^2.0.2","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"979733686c030b6992d82261da8eddbaa8982665","_id":"@unifyux/web-components@0.0.3","_nodeVersion":"14.2.0","_npmVersion":"lerna/3.20.2/node@v14.2.0+x64 (linux)","dist":{"integrity":"sha512-5jPFrFi6mn56f9/Bx3803ugzV0PRLwn6AFmNwuyL1s6LHHCLullRNAQyYysmgG49iEZlBhj1ctWjCmmGXkAZOA==","shasum":"88250d7d435c4b8e35e8faf6ee943f7f58b158ed","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3.tgz","fileCount":127,"unpackedSize":1846586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevWPICRA9TVsSAnZWagAAf9kQAJjbeVgo3aKNZGO/4oPa\nTaYzCqODut9OSiiZq48rp/RSgBM5fQVuD7SA3iBHUvV13v3MMf8pEGPUrW15\noVtlWC70rHQ23StssKZa1KDPH3f7hHHnmGlGx3CTPz7QQ89393vhcF+j5kLk\nJ2XLp/bT/caol8TdRJB7G5witigmwC0HKw/jd2eqyABRUH7FJiBTGZw8XGIM\nzm+YWB10iLXUlqrd+h92/6Ct6N5YzCSLuWfsx8GpFzGUxMj/bc7BAWxVs6IT\nsvjReScL1DQr8bSfLwvW0wr7KD+4tk+dJW+J9IwTnovwkc81QJBf2lkxWk2x\nuhidUVD4D5hvfPhAJ5IRqNeQrGzb3B9qxH6Fh7SqNrgaKESfdUnCoDNaqIWh\ncH4tSKqcHN9JcHK0LwIL0h0rtZ/4CEV0J6wofgibQwqvMazF1rWlrmuH3Y2f\njrB4AivBjVVUIEJ60IIKDZ4pWgFUr0qkeP4bEW3QPhPFHoabW+EcfTmUsRY5\nDddz+AwdDY/pUgHstd29eaYAc55n7mNx2JwuGQBji3pTmzQDYxcdbzKq5vxn\nQ7xnz2+K3kavQ80oIHkIl7jkL5N6KlJe4EQpgLPNKz4JXdLaNDBkD+T6FyVn\nbo08XlVgTjwCSqZ3MwIiyU2DZeMvJIks19FeLLZkSBQzYnyBJFZKeUYqNTBD\n0s5j\r\n=GKBj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiK3FyiFLz9p1+u5iWg5FtqUX/URmrheN2rU7zvl+GwQIgDmGUrP+i4p5ttbp+e76sGwQu7+qHjH67MJ270Hu2tNc="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3_1589470151620_0.5796922557964623"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-874762bf093d6137fe56e56792c4f262fafc3af2.489":{"name":"@unifyux/web-components","version":"0.0.4-874762bf093d6137fe56e56792c4f262fafc3af2.489","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test:watch":"jest --watchAll","test:update":"jest -u","e2e":"test --e2e --screenshot","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^1.0.3-874762bf093d6137fe56e56792c4f262fafc3af2.57+874762bf","@unifyux/theme":"^1.0.3-874762bf093d6137fe56e56792c4f262fafc3af2.57+874762bf","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"874762bf093d6137fe56e56792c4f262fafc3af2","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.4-874762bf093d6137fe56e56792c4f262fafc3af2.489","_nodeVersion":"14.2.0","_npmVersion":"lerna/3.20.2/node@v14.2.0+x64 (linux)","dist":{"integrity":"sha512-IwFvVDK356zDaD3oIuWXuamc4girb6mcxswIsMmFi3dfG3fyhT9hj91+AqQux6+8/wSVeq+kO8c91N95l3LqTQ==","shasum":"05457db8f08b9a383bf4973234cf0468efb7422d","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4-874762bf093d6137fe56e56792c4f262fafc3af2.489.tgz","fileCount":127,"unpackedSize":1849872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevW2pCRA9TVsSAnZWagAAkJ4P/02yCopqzPTGlPdAxZiB\nBYRW0KODhHkq+XNLVRJFzx8U/idE4udVXf/LtNL9EmE1Y5o7HqNEg+/YTRfs\nk68YO+95Y3dxXhesIHIFhB+jov0AuqlSWmf6FvLkwhxi0jIaQAR9lr1/Yw6Q\nEH+TQvYY+dtp2sk/o4y4QFp289rIutbLN1qBFKJ6kSnzQl6RrBjbifdMotJk\nUIwCFrrKav/kOezu5yjIdEd/NbubtR3rjGF2EnW/mghUo8KB9BZPrnVGP1oy\ntZ48R1DwVVv5Vq/6n+Te0LfXla2nTHYMT071tdrqk9SQDOGEd9wLKG4OY9eX\nSztruYWH3WUaCohugdzKZTt9/kRzco1ag5apUpjLkMv79IQ+NdabQBf48N1W\nYKxXCq0UJtZ58/S6cIGcPHw9h/KcJtNLOt+LkGyiAdU+9EjvFRqi3VXWAV3v\nzHKcaBMnRe/lw77sjT+uOWVAahEDTZRLHthHp/FjqEErssXLpLW/aNZZL5v5\nqTxJEmXnV3cFRuUm8k4rdAQw8U+IgU8zSliUdC8p/UdejQR2dXG1CESeY8QC\nKjf86QQBEOL7T5sdsj2VYgne/8r1wNFSiDJzUNsAMh5W1y9J+DLOY4vEvBnd\nlBNiwLamoD2OTTPkpGxYdGK27JoVvS1czdhqD+mIEUKhRIJdbOMHDqaHO8tf\nby2v\r\n=8cni\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIFbH+miv7IiNTn2EQh9En0RYixfVCGwDHGOhYvQeL1QIhANtSAg3sUZ15SRE0eaeXhAJ81Q4FRTbcX7+LdG5iVOOV"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4-874762bf093d6137fe56e56792c4f262fafc3af2.489_1589472680993_0.15529807561833953"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-70caeb9965add27591c9ada8b3dec8cee594a8f9.543":{"name":"@unifyux/web-components","version":"0.0.3-70caeb9965add27591c9ada8b3dec8cee594a8f9.543","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"stencil test --e2e","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.1","@unifyux/theme":"^2.0.1","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"70caeb9965add27591c9ada8b3dec8cee594a8f9","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.3-70caeb9965add27591c9ada8b3dec8cee594a8f9.543","_nodeVersion":"14.3.0","_npmVersion":"lerna/3.20.2/node@v14.3.0+x64 (linux)","dist":{"integrity":"sha512-aAjhx7z9STNwjOKyreBl3rb5ooKuJ1hLwcvAWlH9GPx/JnJIRzoBth9rcxSQ/z3+C/9xPZW9IcXot38ArQGHQQ==","shasum":"6e8a8613aeb561c96237f1fa50ece806f6b24799","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.3-70caeb9965add27591c9ada8b3dec8cee594a8f9.543.tgz","fileCount":231,"unpackedSize":3800398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1m/LCRA9TVsSAnZWagAAOEIP/iIdcT9pvJhPcTinPJqb\nzn/hNATvlrfnwkyWLdSb80CouXuDUkZn+s0qmMw2fxKA8ia0ry4u5Lkbc0hI\n/OgXajcId+OMmVJN0ESGvPRqPfRtFhkxxlgUePI1mji+LPQfU0sbqAGdBdBU\nyJH4kR48cYxFFEhVYpRFqkMBmXTMnAP3H5+7A9lSE5dkabX+HyOJXlBCYMoP\nH3s1PZWNnHgbKuKTULCLpKr7TyzzBHpV1pbsgVhUrl3DnXy0qYW7PK0oCFnL\n5Ub0rvVgIxnoLVy8OpyU89KWNVRA4QQYxkRj+ibnH7wQt7zgURHpIDrfPvG6\n2/kGggjwuv/9C/ShHGXR8PjjUG7PoEsq5WBg0JI/tzOel5r//TSYC6/tPK4Y\nQOg5vB7LxTCNHX+ywt4kbh1yd/MdU9w2iunbRhainwX8Vh22FQEh1TDx8JyN\nSrMpcDW/3rqshzTBLDadeg2n9kLoToDJ+0FdvLPpqRA4nZXhPzxDpfbrg79a\nnecbl4SLq/tTN852pOf5SMgzYBMY5SWVZS6WXONUVDncRLSULO1dp+4RHgDX\nZA10q8iI5Q/+ExVJ8qnWb/u7kkYQzaNBk2JQhnToK6VZnoSsJbWoW96pdhae\nfLbMlzW0W6u2l0Qxl5nXW9XTxAspaNxtlkPcKc0vGftlw5lMgnClUbXXyWv9\nOwfF\r\n=nSeX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICljTZS7SrJAiLPN0LFUFpJN26wGsO1uZo7W3B7YLzprAiB5GPpgc7VjSfyS5bz4fKym1Bwp24UwOsWpfw3pku3hVQ=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.3-70caeb9965add27591c9ada8b3dec8cee594a8f9.543_1591111626242_0.0554986295039368"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-4aa2d74fd11f1d7b522dbff23dc28dd02cbdaaf7.490":{"name":"@unifyux/web-components","version":"0.0.4-4aa2d74fd11f1d7b522dbff23dc28dd02cbdaaf7.490","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"stencil test --e2e","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","jest":"24.9.0","jest-cli":"24.9.0","jest-junit":"^10.0.0","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^25.2.1","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^1.0.3-4aa2d74fd11f1d7b522dbff23dc28dd02cbdaaf7.58+4aa2d74f","@unifyux/theme":"^2.0.2","classnames":"^2.2.6","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"gitHead":"4aa2d74fd11f1d7b522dbff23dc28dd02cbdaaf7","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.4-4aa2d74fd11f1d7b522dbff23dc28dd02cbdaaf7.490","_nodeVersion":"14.3.0","_npmVersion":"lerna/3.20.2/node@v14.3.0+x64 (linux)","dist":{"integrity":"sha512-2qzSsfK76wz37N2xDUJyhNCpF5KOZsbsoymAVk4WpsbLfXdscQPeepOhMxzqrMvb39CAAbkjRvBF/JG+ZBii0g==","shasum":"fb99baab3e828feeef451258c58e5ba3700f8c32","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4-4aa2d74fd11f1d7b522dbff23dc28dd02cbdaaf7.490.tgz","fileCount":231,"unpackedSize":3806149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pfICRA9TVsSAnZWagAAAVAP/iFILQVahp0vrnAkGVtc\nRM5DPI9c58JzbDdDbomVh/2ukz1m1jqMI46wgjC4pDBI4SFtH0bXjRkJ5eFf\nOgTcXr3JFc8rpKU+pODfY4ORcvWONGq4W2x2RdJY7x63IoT24FWt4aTTPuAg\nI4RV5bl9j535OD+FpoKJhqIJyUS9A35Nd/CvuATsE3P2ptM7vGIUocMcVcKf\nXYiilCGQ6j4aht9iOiF8Il3xO63ozGrYRDW/VuEKU41JKxPUbDn7BLwPopR3\nBB6Cfvpz6Ud1W659TZw7jXE9sqvUmb0zjuLvt50Joc/37mm7QP3+TYWESeH8\n0L5IamszwCAYiVUliUlPe4gZvmV8u336jfFFcpGvPWcSD545w1LdWO3ZpHk0\n0bC5bsxL1Fv/wkNN+XXYW9JGr5+MZ6LmQ1IUkPRHcmroFmiGQP73NwxnHMGw\npIUDwYgigBf//wYgYkWQ6qAl6my+ms/fewuQUguZCgIdn57GfgILED58f1FD\nDDq3p69Y0Jdah+Me5u1NgNLhG2NAixr2bXwtonuQ3564A7rMPF2dM1wEBs3l\nW8h7/PNQHdHS8grG8c4NbZOlmh9q52e0uP4/BBNOUP7f9HvfT7DPcWce1cFF\nYn43/f3+cfqOuXL07K+OTi/oPWOSbkJy0AiwVRssSExwtRqpX1YqKZV9Dgk8\nOmqJ\r\n=/cfU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICoaPK6imwpvRzPuhS0FEljPQ1M33l0CEMzB2FOOsJyNAiEA6C8fVabpVqwN2P/JSko4HK0reFhVDjXrUXxUCONcmoA="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4-4aa2d74fd11f1d7b522dbff23dc28dd02cbdaaf7.490_1591121864419_0.3677771132691061"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-ac29f7c7e4323046ba45a0706bcea4a274c0b10f.505":{"name":"@unifyux/web-components","version":"0.0.4-ac29f7c7e4323046ba45a0706bcea4a274c0b10f.505","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.2","@unifyux/theme":"^2.0.2","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"gitHead":"ac29f7c7e4323046ba45a0706bcea4a274c0b10f","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.4-ac29f7c7e4323046ba45a0706bcea4a274c0b10f.505","_nodeVersion":"14.4.0","_npmVersion":"lerna/3.22.1/node@v14.4.0+x64 (linux)","dist":{"integrity":"sha512-fG+G31axWkiW7p4/vgrbeQT+Qx/mCDnAIKKi27zP3HgyuhYb8WZVvX/SrhyVJlN38SFuVO8pjxwWZWzK/jQBPg==","shasum":"d54bdc646f7ed389f8460440fdcb7583e09c8e39","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4-ac29f7c7e4323046ba45a0706bcea4a274c0b10f.505.tgz","fileCount":165,"unpackedSize":2254199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UpQCRA9TVsSAnZWagAApZgP/1GUI3MAszKQpLVeo24e\nAUopuKx4HR9FpVXQr2L+PJgNdrxa4rAW7eshrOq4/zMiCh2OrmpArNj68zfs\nHxC7ixfzz4GVibhSKQSemxGx6bt9qG4udJpUtx5tqViCWfOUaOGYD4lPZZJP\nUnt2KtvxHgV0EXQCReezZKOqCnSSTPLmfJBz9zVyXk7PTqY+sMUbPbwC9PIx\nHe4fiiknMaqkYL/roQaSZViqw2CF2abnL12ecTJiPUdTBL6LUd6SQ1k09Xio\nqH/T7dYQ+TkVWHBgASBuAORpTXDCZ4blKmtnK9o57zZeCcuTpOGXuNJQkyzC\nGG7jvD+S49Rt4m+ahHmzgTo8snpCLu0Ey4ier3hgejJVxIttx+OFIHh1smGR\n1P072C2fQABFolxKrmed5ytOCyVtCjoC5sDB3gJQMh+QDw8eAr61ciPovPoG\nrcUzUTlwZnVs61AuO1kBCxyGMcXmuYWqUU/kPRIvt5NClD/eXXmA7NMTivlP\nIj9J3FJ+r+Pag4TcM13bHEw5NUPbT9ivGNg3nuRN/RSq8moe23OkQviR3VzN\njxNCCXEbzrLkRdcWLk2JvLw6Xw9GwJRIHhtb2C6ihUKOOoDCeVG1o+HZUwY/\nGdhT72togBVIc/LJThe3bwFZJLIuFofVv3udExV1uYBdyjxVQ5JuHgH5+Iuk\nJF7V\r\n=BGGH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqLIDxFoS6NxjodoAMcyV2W9AXfqJ8GFfqigMPU/0j/gIhALNNIT1tBpt/WXeXEs2ZsqLITjjMamtdxCm3J3AqpmDa"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4-ac29f7c7e4323046ba45a0706bcea4a274c0b10f.505_1591822928278_0.18864313395719745"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-bd9e8100be328e3d5c6a144b55ced9238cee7701.513":{"name":"@unifyux/web-components","version":"0.0.4-bd9e8100be328e3d5c6a144b55ced9238cee7701.513","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","build-storybook":"build-storybook","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.2","@unifyux/theme":"^2.0.2","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"bd9e8100be328e3d5c6a144b55ced9238cee7701","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.4-bd9e8100be328e3d5c6a144b55ced9238cee7701.513","_nodeVersion":"14.4.0","_npmVersion":"lerna/3.22.1/node@v14.4.0+x64 (linux)","dist":{"integrity":"sha512-HnCJ9MOQlPtYJVSVPuL3yhSFdb/PYKF3D3gRxE638I7oUx++XdZLI+4P0YDk+bnQDqgxF29i45ZuLm7IF2ow6g==","shasum":"d175e797ac765c7834759e3d1c73ee1961349b04","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4-bd9e8100be328e3d5c6a144b55ced9238cee7701.513.tgz","fileCount":165,"unpackedSize":2254332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe45GmCRA9TVsSAnZWagAAIvEP/iVVmjPgV3vNuQmL79Nn\nZtUMg8jQJBQeCA2O9PQL2rYLmX0cfCGU2w/NWv5nqKmEJxxKPBoMnBtxO4p3\ntvRTSGYxe2Qavb0AypjICiKRuqJ5YDn0uLRlkSTw9SyrENcwv+KjEgYsS+/D\noEsqc7UzN2retZ6CTxu4ErYiE0fWR21Bkl0NLJJeObukzSheBc5dveM9sdqG\nFE+NT/WQUBNjG0s42IVEukC8HTtaifK7nZO6uxaKLsolbC0UMN4OlVMxlp73\nnfGFTVRN2uf+KgGAm+AacCPhwguQxJzBWqre+fZJHgTtJcpKOkmEA/TGKzQR\nwCndLE3Sk7XB3OGzTlQkzHzF4XTN4LdwFYykJqDVU631kbM0VX2u6DMPuGvr\nOT2b6eMW/CQTQY7XAx46ZgfIkU21pmrQiRaSjoE8uU9GqYitmG3k0IfG1wE1\nKmNo+64xcGdlfMZukNegOF45ArJemslWaA7sU8lZGSIESNENX/U7ufapT6vG\n8IdHW5wGEnu2kwRkFlhlMYgSY+vSgj6MXntepkqa91IGEWa4V2j+BfktHElF\n11owOlqRXXcYm+ZZB7vPa679Jhs8hvuXfc9s9rvTvfEJVt8vqCdVjcY24lrD\n5+2IY5y/doxqrrDXiP2WNFLs9reSexiFe+mtiD2U+nRMwByJns29pWbHwaqR\nRzTz\r\n=fgue\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDE+Xd3giM/52e8bSNWmHiLRdOK9BMxolDz1XCpRstL5AIgDDTqXq/GnILd09WqUHt37Ey+KqttyCfaS3QxnupMeOc="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4-bd9e8100be328e3d5c6a144b55ced9238cee7701.513_1591972261480_0.876210180590709"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-04a00eb74cfdee55be2b17ea2c1be7f9b8ceaf35.517":{"name":"@unifyux/web-components","version":"0.0.4-04a00eb74cfdee55be2b17ea2c1be7f9b8ceaf35.517","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^5.1.1","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.2","@unifyux/theme":"^2.0.2","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"04a00eb74cfdee55be2b17ea2c1be7f9b8ceaf35","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.4-04a00eb74cfdee55be2b17ea2c1be7f9b8ceaf35.517","_nodeVersion":"14.4.0","_npmVersion":"lerna/3.22.1/node@v14.4.0+x64 (linux)","dist":{"integrity":"sha512-obQtVS6n3Ht+C4IG6moBInU8R8Kq0MurbBFauaS5nbf31y0qrp7O7UjvTp2kye+Pp7p9RYXldksD/8f+a7p+3w==","shasum":"3ed3fd3ce5ae29e07c9534b513acc142d34c5a2f","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4-04a00eb74cfdee55be2b17ea2c1be7f9b8ceaf35.517.tgz","fileCount":165,"unpackedSize":2254340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4+j+CRA9TVsSAnZWagAAMTMP/3fT3c+tR0CKERFaulbE\nYrJRlHh0VAfJVgeb98ZedhBKiRe2q0hcJGTKXK0riQ2zgoMk4K642C8IgAgo\n3jvCOMlDZkMRMrdOjywirGDCcYEYTNAsrC6iDkdUBasjfu/UlKGyPW/o+2AA\nd69p3M0hSSER00mEpGKmdFQZ9PfH5R8iGpy6fAG4MDfQ1pvKCPlWSolBERET\nhsnCp+DO6GhFqeHxijBuhIogkhfJPhi3xNyx9MCEdfiDEbH5hasYGO4KfZ3R\nIo4BVt8l9eLcDQSmWMa61Oie6urUGsXkcUwU/fj8G7nNMcgM2m2sI6QztHfQ\nlM4U9JsYVHuXFyEnPLwttCmL2uKR2cxHMvpMn6xmjqGSMmj1chuhKkiafRU9\nR6LRXXmyy6sMGeX9KZmTyNx3K8q45Qy9Fxk5kNO79nxY3f8nzptmM4oYuoJC\nJHg2d0ok1NFOJimbN/sJ1OLJ6CiNqAxaTN2VNFwTEIKVFIyGrKUV/Yxjk9U2\nonoV/J9gfRx3MHvRxZmiQ7PBH2oKVIDGl7Ttc+klfiHOVl3uc+peh6/5oOwe\ncqEU7hddXFF/2IBeKQ+4+VEXfogSvFxS7zeYR1VIedspgm1rnrMIyCcF6CcE\nGFyskF0t58k9xbc6a/uIupNgfNhHQcDJVYop6vwBoXad4opW5cigLOVJj30I\nCiPr\r\n=YnBg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlpCwH4o88VDBFLt0E1v8TPEXfLHV58jlMg144Rvc1RQIgCZNkODFSOsnZvplRKcWAlsr9AFcdzykOB+lCKI5nd7o="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4-04a00eb74cfdee55be2b17ea2c1be7f9b8ceaf35.517_1591994621260_0.642868569219305"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-ecedf3657c79fece88dd42fc83a6788a4df565fc.519":{"name":"@unifyux/web-components","version":"0.0.4-ecedf3657c79fece88dd42fc83a6788a4df565fc.519","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.2","@unifyux/theme":"^2.0.2","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"ecedf3657c79fece88dd42fc83a6788a4df565fc","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.4-ecedf3657c79fece88dd42fc83a6788a4df565fc.519","_nodeVersion":"14.4.0","_npmVersion":"lerna/3.22.1/node@v14.4.0+x64 (linux)","dist":{"integrity":"sha512-O3ia+FzS31waasEzUTABFK0q+75Jibdj9Ogru6RpuGiNok/DWxz0hKGqHKYMQQgPDdMsa7OXW5wVmhe0iLRnIQ==","shasum":"c50c8fa633c9b983fd2f682de52b2b3d4679fb0f","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4-ecedf3657c79fece88dd42fc83a6788a4df565fc.519.tgz","fileCount":165,"unpackedSize":2254340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5B8vCRA9TVsSAnZWagAA3OkP/jFCPHCEgPVo3vjVJY/T\nB/PROxPfLBFr382VxVaMryMz2NqG32FI/ZNXFqFxAjbSUTGhxlakDRUhkeWQ\njBUct2X7FMJU/dWLDuieA6R+exK8oSfviC+EwuXNtVppv7d4uPc9mAch06JY\n5s3CM0FT0htSs/fV3GpycbC2DTN91i8oIFt5X9j4NlMx9u0v5s8Vyd157Ka8\n2AKryW/flHfG+qlzkFP+gVX7kmwGCkWjBK6wmaVpwuSEN5KN87tNsOqOe+Gj\n3YOCkdw1KJqtKx+YGedqesd8cW5oJG+Aqf0UfldOpbsr8JwaoVkP7nR3JEdh\noM4pImmqiTHKgRS7g8pCBN0aCUq8o+RSD5ORKKyu/EctKLAbiQvIHr/0fhNa\nWtyQLUd/ZtOeDl71m11cWk3nPU1vf6gOs9h4/gkjY0/3mfa3OtL//4YIZtHy\n/fTQ19EsKHC/AaPqIm9VnF8Z7bw/X8MErBQca1aHsQODW9dEchx22iMI6Fol\nOcIRdkIUOrVYr0oOt0IHrSxX/xyqXA72dHtqriOr+xS3JQV9pnIonZnndMYp\n/SG6FAHba4Ah8LApy/fLZHE/eTMjwc5+ep9KjNgQJBMlCx4iuNbqnIdzaRD6\nre3M2FbTIZyBODMP683DRHScGktgSDUEtIGSAgSeF47+lF+MDlFN2TmcdXZ4\npmAi\r\n=qWdS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD98jY60EnTERFriTPcwuZI3NU4nZZangBJ3/u25B2SCgIhANkQO5RiCSD3N3KcHxcoyAn1eiN2TEdJfLgVgawVLwx5"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4-ecedf3657c79fece88dd42fc83a6788a4df565fc.519_1592008495150_0.6524505714994158"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-d04786065833c5188c6758b86dc72c001ae9bb86.520":{"name":"@unifyux/web-components","version":"0.0.4-d04786065833c5188c6758b86dc72c001ae9bb86.520","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.2","@unifyux/theme":"^2.0.2","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"d04786065833c5188c6758b86dc72c001ae9bb86","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.4-d04786065833c5188c6758b86dc72c001ae9bb86.520","_nodeVersion":"14.4.0","_npmVersion":"lerna/3.22.1/node@v14.4.0+x64 (linux)","dist":{"integrity":"sha512-ImYHUxaloAeE+icwwOPYoYP/Cra9Y75ZROywHM/DAMUDpWQ0tvDLd9vCCIA70sGD2Wzx+LgsTjGn/xjrtyaaqw==","shasum":"3aedad4cf025cd7678e7aacd06bc37179688e5f8","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4-d04786065833c5188c6758b86dc72c001ae9bb86.520.tgz","fileCount":165,"unpackedSize":2254383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5DN1CRA9TVsSAnZWagAAfyEP/1lAeH7nldw6ycxc6IqR\ngSwKVyJWE9hJyy1q1j1DtDlLEWg/+bQ+9LZA25hNsYHRTVYvgsnmKFhXoVoB\n7beaig6Q/wev0pryHED0I2cV3cK/irWvgyF9SriGqcTnNvuqfvGJlRHnKnyA\nrJoA4yAHWEhyz5enp6hJi6VPIblILWYlUQaEJOZXrKEp106UEuaPrRi7WR2B\nLLKwzLrYmZ83Y571Fa8B/hopBNsxj2KeK+RoWzvLYI88HUWmNK9b2mdkLoBu\nppU98k/U7hrgp2j5EiTs1gF1kWcGQ+e0h0j/LsZZbBt/50yvWYlP+cz53sdv\nBuzZaIlg6KsicsDs7MBrsEnhnq1p/gAOqAksIxbKjF9GtLTmmllI6ldkbco7\n0gCK+euA+7vIgHZaET8xVkg6TP/A0KgdnFgblnBV1w6K1IWuGSlCsaT31sQm\nOIXzWRNLRWWjV2FjrS1xkW6YavAiyz2edDcmMMtgkZlEvm46jlwXNGXX2nch\nOZ2ZOoT1l7dqg0Bd36BSx0XincMnwupyfivujMmlF41negFA1GHnveGSVqjZ\nEVB+MOuXgtiUXvj4djj2MFsIuJJ1z53EXs09+BFqqk5YiF33O4xbnX2ZkYvk\nLo84WYZf3MwQ6ol1mo51JMaZKrxqLKBk0XwMQo/EkwDUfCWuWR/ByboHRISh\nEFDF\r\n=aO/Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+avnnGwhJyDF1yJeG/SRI8JRrHH8tk35ylLqKFchbwAiEAg6NCfPZkgvpedP8Lc2rQ7M6nVHr8kzz4hmV+2zk0PU0="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4-d04786065833c5188c6758b86dc72c001ae9bb86.520_1592013684518_0.45078661829956657"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-76cf6645d81796b4529c323d715c5fc719de2c87.0":{"name":"@unifyux/web-components","version":"0.0.4-76cf6645d81796b4529c323d715c5fc719de2c87.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.3-76cf6645d81796b4529c323d715c5fc719de2c87.0+76cf664","@unifyux/theme":"^2.0.3-76cf6645d81796b4529c323d715c5fc719de2c87.0+76cf664","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"76cf6645d81796b4529c323d715c5fc719de2c87","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.4-76cf6645d81796b4529c323d715c5fc719de2c87.0","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.22.1/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-EMhcQLIKNjtq14wZUte+hcuQ/6T1/n7z3uVtcyTzTmi5syvMCqcwgwF7Ilpm5Lkquw26B6Lgrb2HFnkrBNj33A==","shasum":"34ea40e61eadfe556c49b3cc713f0ad7d61a1383","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4-76cf6645d81796b4529c323d715c5fc719de2c87.0.tgz","fileCount":165,"unpackedSize":2254482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe55lNCRA9TVsSAnZWagAAVBAQAI3thT6c0ty1HeRoHBrl\nVVxzwO40iEEH5MYyhVMq2YKsj/ysszy4c7Rwm6RYfCoygbIW7KiyAOjEs5Lw\nTJxC5JflKc6gaBUo3R8T1kbtoqR82nM2XksPuUGi9HoeBiybQ1onzLJy/3P3\nIB9xSswISuyT4+qpkqIZKEjM9HTvHu91JBAimROWMyfyNn0xM3WK+aBFizu/\nqNbYXiN/CxaO+kT4odgEjvU5si39BewPCQhnqdHuobTIKsJsApHJaCv/JPAD\nv11JgOPiE4ajpIJbtEL+uAq+qeHzQeZb9qSHkgWuqxYkwvLbR4JG3GzLPypK\nEmKfI58S3oBg9ge+p8NYjXv0+a+qVyk4XAT/J6+U61SHONzaYZLTEit3fQNZ\nqfT7GeLQQqM1dPcOcUQu+c+JNrVe433lzm4f12PFKx7arhLlgSjHtJqjh1K5\n8+6cecO61ROHrEyRf1OSoNMXFudklpVDaaQf0wNcTXjvl+c7vGPeqjx0Ld+2\n7zRpTXNN4BFs1+Y6qLZOFsOJa5x/oL/FyjD6Cf2ZnAjv/GUuU9Xh4+t3LQRz\nvFvZpgdbskarlNP1WjoapShMod9FVPW0WVxCmNZeS4btBXxyk8f0JW6j+qkG\nBlngIYL8uOQuKvr/jEZvdE2tXoH+8P9sBav8ELqO61BGnVXfAtcYWP/Y1IbO\nDdLH\r\n=pXsc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGzShHfVndZYsh3otcHAIOIdDrFqtUEKJ56fVlccoWuXAiEA/gVpTgKn9yQ4PPuY/PgJcvTk1vsQ0BpEPm56iazzUcE="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4-76cf6645d81796b4529c323d715c5fc719de2c87.0_1592236365438_0.7353992892003474"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-efbecfa9bfb474035c7588dfb4e17f19bbe56286.0":{"name":"@unifyux/web-components","version":"0.0.4-efbecfa9bfb474035c7588dfb4e17f19bbe56286.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"prebuild":"rm -rf ./docs/components","generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.3-efbecfa9bfb474035c7588dfb4e17f19bbe56286.0+efbecfa","@unifyux/theme":"^2.0.3-efbecfa9bfb474035c7588dfb4e17f19bbe56286.0+efbecfa","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"efbecfa9bfb474035c7588dfb4e17f19bbe56286","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.4-efbecfa9bfb474035c7588dfb4e17f19bbe56286.0","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.22.1/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-fP7aI1bGzb5gLnv54yDdmrKmm7czC2JVGyV93IXL+Yt9On28X/fnVRacyWJqcDtTzqf7hJ8aVdeqZv9Asvul5A==","shasum":"98e7f93b25fab3486c1b9142143e258e09288e88","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4-efbecfa9bfb474035c7588dfb4e17f19bbe56286.0.tgz","fileCount":165,"unpackedSize":2254482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe554CCRA9TVsSAnZWagAA9B8P/i7385L6bwakbbI0/m8t\nZ6cxLggCZodHEgeNc8utAHyS+ZswmUkh3SJsZASlyVgV50k4SM+rwPfhssdL\nj/8PZtNs0V6Rzg9iwPgD6C45aqwYdTCckKJBE30rxGpV/KLuLVa6KJNgFmZ0\nQXSGJHl2AyHo3JRYl5DD1HKngkKcRlRuQi2R+N4mAT1XpuXBWasvrb8SiGE+\nLZ9hyvtjPJTETUe561qcI4zZU9xC3qnx0K74EDfoQx2AzNxqHkrP1AnoyPVi\n+2wpLFHIUDJT35qTBueOIKMXGjsCPUu7xQX2pxjQxLbb+Ccq3jLf8PZmaM2I\nZA5HCtDDnFU16NR8Cdnf4eKwOEikDkvEPuxZHRHYGkMpt8TwOFTXkKE/aStP\nANbrgkDBaxLAHLm14L6zhetzV5osx3+ySdBV8SjheMzkjW+qND8nPZwgF8Xh\nq53AEOW8M/cxfYiURupIQuVSFzQrTr6xD1+qRR1lXEYNk1loaA0N/+W/nb7+\newcx6dJDRlztxV4V+8Fd/iegzPM2FYjLXZzWNPN/MNM+Sk2Wu6xlxflCNWYW\nSSi+2rD152c6FQ/bWvDhBb9Js4frUZqZLraS9K0R/MYn4pfF2NUvN7nS8a++\nEgjg6aBJezzAJZAUG5HUiuWv9MV69AUUI5i1KYbwAWk0vExS3OiU1hpMHhGw\nAPJw\r\n=PjY4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH1L1oOWASMK47yA+0Thr0uPTbmcuBfoL9/qadMWp5qmAiBdEP6KCOBukvU8BBUR8pVjH+Abh5V73lpGDbI90YJ3mQ=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4-efbecfa9bfb474035c7588dfb4e17f19bbe56286.0_1592237570163_0.0010278069553339986"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-24f97786e23fbc74f29bdcca6d6652eb2b24c2ff.0":{"name":"@unifyux/web-components","version":"0.0.4-24f97786e23fbc74f29bdcca6d6652eb2b24c2ff.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.3-24f97786e23fbc74f29bdcca6d6652eb2b24c2ff.0+24f9778","@unifyux/theme":"^2.0.3-24f97786e23fbc74f29bdcca6d6652eb2b24c2ff.0+24f9778","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"24f97786e23fbc74f29bdcca6d6652eb2b24c2ff","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.4-24f97786e23fbc74f29bdcca6d6652eb2b24c2ff.0","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.22.1/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-iV1WKR6hLFQ6v8n9m3/5WD7LgddwFjPDgcxm0gViDbKEfYPOUdQuWktopUxR4zVOjqKvkkbJfb7VTxA+vsLvOA==","shasum":"6c9401de2f6a8e60ebcf53c40a365451e9b2efd9","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4-24f97786e23fbc74f29bdcca6d6652eb2b24c2ff.0.tgz","fileCount":165,"unpackedSize":2254613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6jjYCRA9TVsSAnZWagAAzAsP/A9zDZBPyaJp8LeJ9btR\no71zL0vSALgXXRJg6DaHpdP4JKbhJSAD3WOkOB6oyDwZdv5Q85sBx1YYCdN9\nTgsU2fYZnaQVZSqJRBD2xnyvGD9YzzFOMDGIXc1Or9Oj6uwWGDFG8YUjHW4p\n23N+5pYKskv+zFqVeHy8582noC6bNNXe9Kq5RTruef7ecjLTemFwOgHMOuwK\nRAXqZiAHWh6yv8f6vbPD668vazYsHhaShZ6n/CP2KBOLbaD6CsXvqeXq2Ao0\ncu3uwRTmkxZBrHM2WZ9SNVUs3DDYcRRZAiA8vyiQvVpmfyGp0DRJU5LQLiZV\nlfCnIGSBir6N6F3F6l2LdXcQUDORfEaTwtFn2KUTWi3axBXkyVX/CfAUsTJj\nZsWbLSEuDrFjgxvGISSyjcTHpNNJnYESosC2rynMdLVNUeBClzE/It4ELZmc\nqzCldsbFlDVRsQn7JDPN3NJ7w6u139Jj4x+8dI0v1aiNuxJSmNrBN/lz5tF/\nSH5Bmp0dQb+9OEYyvWh+se/exUdYy5Xbp1s2kLVPACZ8A/BedVZzIF0JjCbu\n+7cC9fscAZKJ6p9IklThA9348WV5U3nCRr9Abg5Fk+lqb1UlHZ/wBD7wYb2e\nNOt8GvqrNHClo4OdYAMBBFhPXP2AJRGiatL28GGVqKiQVT8D1ABa0kcETprU\nmyz5\r\n=oLgc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtWAWsr15MTt9pH7QuE58SoSgk/r1IEcl+XePnGz8cFgIgPmnKuMUne1Y+o2+tYcPbYx2zsV3syr9LxwtPu8nr4wo="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4-24f97786e23fbc74f29bdcca6d6652eb2b24c2ff.0_1592408280263_0.0857162159618785"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-5bba792479244f55fc999fc2204081c3558c11ce.0":{"name":"@unifyux/web-components","version":"0.0.4-5bba792479244f55fc999fc2204081c3558c11ce.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.3-5bba792479244f55fc999fc2204081c3558c11ce.0+5bba792","@unifyux/theme":"^2.0.3-5bba792479244f55fc999fc2204081c3558c11ce.0+5bba792","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"5bba792479244f55fc999fc2204081c3558c11ce","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.4-5bba792479244f55fc999fc2204081c3558c11ce.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-pPXkLDDNBDRffx8+WiqgZYjPyvKqbb+MoOBvPq82E/RaRM64M7hkZ6IRCoRnt4d0K90wlyfkZSFY+vo70wsfng==","shasum":"facbe296a046da543739d973b2c2b140697df0e6","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4-5bba792479244f55fc999fc2204081c3558c11ce.0.tgz","fileCount":165,"unpackedSize":2255116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7NqJCRA9TVsSAnZWagAAQRkP/0zXO7EAwL2MBN9fqZmW\no0GAZPs2nCYo6JnrCd2vLcFPn9N28a+c2yzNZz7PVO5pNQoFC0RN0MOUC8y7\nOBA5mTuyE6LeMzRx1TNQ+vc6Y7E/Nkcb/5WBLICzMcc7f0mc7Ik5er1PhyDY\nBLDO2P/GU6zCGXSjimrzFDazhNLVO6zTiEXTzc2o5FgUfEiGpbdhkwvbBjLj\nfTfz9HeP1I3xBgPGusGSNAOBuzBX+atizSZUlTzgYmNPCVe5EGLLoeVlm5fZ\nDNrFFlB9srU3zGeYaqFr4huVQVlGc7H/vNnzL4zmyfNdaB9cHOyR2iPePMhH\nxR6619+ZWZeWhNK4uzbhaSO9wc9q09mB+ySosIGHHdjqXkRkmhGLYyvZSLBL\nYJy9fgkYJsnLQHYBrMIpJNn9UFDH2vHK6/1negaLyjZ2AxnAiYF+7ek/qmvu\nxOu8BCC9tyxxtrDy9aElmA2rZRw4F0YymWg7LCITRB1cqsFwKL8wXue5wf2X\n9E7WxOE7l9qxsAfWCpPm8hGjitWDSuxjGFjHRgdOM/+0YgkeYveVwMF/gH3A\nqWJyGL6IOQAjh/VNce0SVXBTYnH8OYldywsf4PjLiTHw25ouCrPD0p4T/GrX\nQLj6/I7qG788wSrcZJUiIyzDb5FNGSqd/8eacJMhFukMy6UzRstx8gmui2jj\nDcoj\r\n=yQWv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyzf+uX0H3PfhF2f5S8loQJnhl6RKYHffWo5ayJvoWYAIgHOzjrNi/hkeFElnX6O25mfdsv50Jc+MFO9RPe/lM7os="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4-5bba792479244f55fc999fc2204081c3558c11ce.0_1592580745294_0.7078186087217502"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-5595f9d6a7f76a2de97f7690c6e6024672df8bfb.0":{"name":"@unifyux/web-components","version":"0.0.4-5595f9d6a7f76a2de97f7690c6e6024672df8bfb.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.3-5595f9d6a7f76a2de97f7690c6e6024672df8bfb.0+5595f9d","@unifyux/theme":"^2.0.3-5595f9d6a7f76a2de97f7690c6e6024672df8bfb.0+5595f9d","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"5595f9d6a7f76a2de97f7690c6e6024672df8bfb","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.4-5595f9d6a7f76a2de97f7690c6e6024672df8bfb.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-0o71V/e9UYey3NBobQrGoNAXpeHofEby+2qfrykGPnzFE5HBapztg31dEaApVRhBKd8wT+4w+7Ylg4BYMyB8Dw==","shasum":"5ae38f701e7d4e5b97d97946a1c893385a0d8950","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4-5595f9d6a7f76a2de97f7690c6e6024672df8bfb.0.tgz","fileCount":165,"unpackedSize":2255116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7QjYCRA9TVsSAnZWagAARHMQAISt2jY3I0m8WemDc7rr\nET/oZv3v6FV4zcNl3eNQv8Neerq6ZY9AKkROyrSggzNWJUB8IEn10N3zCJGy\nYlknTfp++9eSMpkQb22WvO0mOv2iiQNgLLQK8c/ivCn5onrQV9XbjJfyfRF7\n27B0pB5XlV9QPpFb5ImxwbwVqlVbVHcX7JtfrMVIV3rR7jSCNv5/wqYN/ffQ\nPsjjjZj9VN9uJ3kXgWo8pPO1OaCDJBSsWiU6+Rm79TTqpmj6Wpo5397sUzDK\nIigv6n9uaJllorvj8m/sQnK08z5tWsPJkJw6LuD5CS80bKBENAyJwODU0SX8\nY/YGGyzhWJZLginF/We1SF1jEc93p6+0ph1tRdA+TcvpEHmNl8oulP5zZ1do\n48nlAAPd8M7Df/zSPj6U6GNOS3ODDba9XKXGZFdr5S2PwN36AYc8kef0S5Y7\ndyGZ4t0n936gp40vQDKq7ugttYxp/iMDovrTIWHrPrgcc+t3xlrEbftG+6as\nVCQRUrM+++fnNCtgf768lgSV22VqeP4eniTgQYLV5WG6cn21BbGam2xjPUU7\n1UVXhAJJBIZMfnY+bfWrV10nPEZtU3O+F67LklT/ql86LmaYle4f6F28mvdi\n8LZvqtwMzrwFpcr1bDEJ5LNL92znnJB7Qu4qKlvs3CZyVikrEO0zPwq/DGZ4\nGAdJ\r\n=rs5e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhNFWWDCGQT9dXS73EhC/egAQh6sOz/fq2EmqTP5JRgwIhAJWUdsXp6xeJT7Q7ZRNXl6vwCWc+RnoaSxdOpjblsmbr"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4-5595f9d6a7f76a2de97f7690c6e6024672df8bfb.0_1592592599572_0.8395471068670393"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-af907db13dfdf344f24746cdd8bf02d146881152.0":{"name":"@unifyux/web-components","version":"0.0.4-af907db13dfdf344f24746cdd8bf02d146881152.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.3-af907db13dfdf344f24746cdd8bf02d146881152.0+af907db","@unifyux/theme":"^2.0.3-af907db13dfdf344f24746cdd8bf02d146881152.0+af907db","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"af907db13dfdf344f24746cdd8bf02d146881152","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.4-af907db13dfdf344f24746cdd8bf02d146881152.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-rrjBW1Op7Z7xd7TOtgqja+wY+fUQE6SOTSODcI6oqfFRfPj/9Vy2AywtEB/y4PZsXF/s4omeifrMqtjEI3+Q1Q==","shasum":"1d6ef0b9e252e950ab238a6c18736aa6964318b6","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4-af907db13dfdf344f24746cdd8bf02d146881152.0.tgz","fileCount":165,"unpackedSize":2255116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8LbzCRA9TVsSAnZWagAAkogP/1Um0tOxR2WX4BE+ucZK\nBnDyHREYA9qWr8BUybG42qCPc7SAhGTVXnpD4lrXtpK7AGLoNiFw/oasLBba\n3bNgcYbMwlDk47zMSclEicFByASoHv4Gr+anLhK+4myQopL5qcKO9vpsYLn1\nsxnJw3/ZEjiZvnOMgVsV3RsuvMGUzyPJLeFHfbKuCG82zDujK28G5o0XojjI\nKEsYhIymxjEpkKoMzzo/bFJZfbrwM7hx8hYP369nNublk1M4H07lZw0OU5ap\nSUzGTLCq4voM/d1GQQjBwuC0382zFzwujCs0Ia62umiNfP/RJcQi743kNvGD\nO2kA6TKp62puowVGJwZQlwZCuwmkdBWf/n7cJhMZSLm9RzktXSDOApzUPqVv\nqm2/jj9J26RWIpppQROCRrZhQkLbofGFj2lG/fvjbtOhx3WnzbiWYZGoHUvv\n7zOpvpRW5ZphAbY4xYHqZwojqiPbSwy8WQ27uKnaJwe+KPICYjYxk/UZx0gs\nYwBR8QUzZqi9iZjpsVIbATXu/5jrC6uIB9MAfUKlJI5/ZdedgI+15KtbS0tg\nnaROi6t5lbUiBphXkOinE35b4GEZHhG78nKHSj5drtGXcTUrnxohEyY4wPKI\n4059ofia4+t2fH6ZGnYvCoxKAXgqVBC2r9b8brbzXDL4dY8sVqG60y+ytPPz\nRAxw\r\n=FdnP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGVApb3do/Ui+ibhOaqaxFXv4GmKlSgXynd/6JbRFiLKAiBgzmZM8uy8qpjaPJheDlL5V0ZvvgCbN7fQLuBowBDzIA=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4-af907db13dfdf344f24746cdd8bf02d146881152.0_1592833778866_0.8909370761791864"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.5-db712e3b717c912e13dd096359d3535016301bcd.0":{"name":"@unifyux/web-components","version":"0.0.5-db712e3b717c912e13dd096359d3535016301bcd.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.4-db712e3b717c912e13dd096359d3535016301bcd.0+db712e3","@unifyux/theme":"^2.0.4-db712e3b717c912e13dd096359d3535016301bcd.0+db712e3","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"db712e3b717c912e13dd096359d3535016301bcd","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.5-db712e3b717c912e13dd096359d3535016301bcd.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-2Om7tBGlfFYNkB57DtUyojOw27PXjg95Bff5QpdNhjj5LfUgogHwtIWW+8TzDivDJImqFybN9DRmHDyGQHgraA==","shasum":"f24a29fab53ec9fa2e87108cd6f05444168eee2c","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.5-db712e3b717c912e13dd096359d3535016301bcd.0.tgz","fileCount":165,"unpackedSize":2255116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8L84CRA9TVsSAnZWagAAmu4P/3oRSyR1Ncu3vE38m0D+\nCxxPE7qNA2bn9jWLj/4rM47LathIkb+VkEXsLlkmkXjqA0NIUedPOcfMyxjw\n3ql7FQeaAnSBuyMYPQY5dJS2guEAk7wmT7qLSTZP9XBEFb1hkxIn2O3nrQAO\nIR76YHpjHHX+0FI3mHZoNuAr1uCH/FH76PGqriAHNRCySs9FYg3WSE4YSxTx\nsnJE2GI2jcLnYTeAcszc8m66v/x2H0yt2RAEuGHXWy2K5cpjGfcN2TdAY94j\nZfzl8hN34iQMWi34QA08Q4PICALYg2RxDBECGLoWuEgDnewsN3zAVZq8/sPf\n0hh+8fsJcfJuryc9autqvEwJOEHygMKbQugu+/CXbfo9hkRXgxd3dW3wsFWX\nkkT0YSnCGBwQ7kZPSlP4j6yoAZ1OSdqPSUtZWoB4mMooUqadzJPNs9HAvFoZ\nYSn2iCsPuPOT6e4Qat9h8s9KMi/xQ8CpwvncKSck5LuZz61tN1h6vxsH7izr\nfYKQTwFvV6dlFk1Db76JVMfh5ykd4cGv3N3f8goCuOW70VSDxg+R3Gm2xr54\nJk1fc+27U8Bssha1xmyFX193drc3oGFiuIOKnMFzCklGQz+OReB23OOIDrlY\nKEzdlTCTKi7uf6+EyPOY+BEdH6dDW6wZQNKKFceADy3tVuzI25OQsNdPyMu+\nGz9I\r\n=DbOz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFA7ryh6ZSD4k0WYpsO0poAONip2KkHQP7nhN+AuiXMTAiEA/dWyyKxi0Xv5qJGmlgcB/jffQI1cZBfj8U2pje5U2DQ="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.5-db712e3b717c912e13dd096359d3535016301bcd.0_1592835896572_0.6539045431228627"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.5-380612d78ca3bd4cce2e675fefb9dbdf1b614a84.0":{"name":"@unifyux/web-components","version":"0.0.5-380612d78ca3bd4cce2e675fefb9dbdf1b614a84.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.4-380612d78ca3bd4cce2e675fefb9dbdf1b614a84.0+380612d","@unifyux/theme":"^2.0.4-380612d78ca3bd4cce2e675fefb9dbdf1b614a84.0+380612d","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"380612d78ca3bd4cce2e675fefb9dbdf1b614a84","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.5-380612d78ca3bd4cce2e675fefb9dbdf1b614a84.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-sZwZ9B3foNYTbeCi49c9G+bOcGZGi6i/dBd85Cxt3VeWtSN97f13N81WDG9DbjFcfBY9KF/waG+wWLB6g9wS9Q==","shasum":"4170f838af7c23ceca1ef1b3dc3310b665095fe6","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.5-380612d78ca3bd4cce2e675fefb9dbdf1b614a84.0.tgz","fileCount":165,"unpackedSize":2255116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8M46CRA9TVsSAnZWagAAF4wQAJX0W1Hiaosa7/euMmOJ\nRtDxVKSp8DmxrqEVujiCNjuoU2yjR9K49bKWRNtTd2zDT+6PneqReEg5wBcB\n48mZ6UhKCPqxKtALNsri8t6Nxtg/8LEJJsazPbn7o4Yfq5E0Qtvfwr55CETN\nlQGzwVENy3clWLaq2+v7vml2CAykge3FWu3IuNEtKwVYkRiUuiYfhDJxFeWP\nNz/b0mR9EYqFT6KWv2LRt0gyc7hgrdrOtfgbl4U6LPW9lS6S39ETJs2CEqlK\nVJRM6kwjusIebS23Uvj0g75BNgdJLiLnj+Rl+q3T11WnVnrr7BXPZTLlvzfo\nS0TeGbXKezU6nGMfFUgqD+2IWYhVF8J5W1dUx19O1xfwC7yA87aALwuxQHco\nxcz9F/VExchDgUufD47HcJ1LMWo+ol0KkJx3XmOl0Vkwv2YwwB9YbLHv86pJ\nwayEhznYIWvmQ5AbgENrFSu/XizU0fGnl8NR/+98FF7UALO5vs54DyLaUzcj\nGyu3LNWHVJGjPrbvKAbdYjlaVRgaPJ28U83y4/BEOgx8XKUIG4p5V7+Bh13U\nCCZiznX34Cn0eLdzDMbbhrz/zUQcL/faDr4k/cH7J/xfogJ/7Qxfoe4MOxYT\nhrmv/zK3s04HQfzWxTmnm2N4rUmsOCy4OSphB436VhUJp3r3eWpdzBgbz/sb\nTTjs\r\n=tZWO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/+StFP/pCNfvCpzfH6zetAPLO7c6VpBXEeeql6a0O7AiA2jphQDJvkD9tFn8V0nsgHqhZWQoFhVR3KeqVDFAXDSQ=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.5-380612d78ca3bd4cce2e675fefb9dbdf1b614a84.0_1592839738186_0.39801110045510324"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4":{"name":"@unifyux/web-components","version":"0.0.4","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.3","@unifyux/theme":"^2.0.3","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"e940df0a678e7a11ca911febb54373fe5a48cc77","_id":"@unifyux/web-components@0.0.4","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-Sd9QJVaXjEbahQKTGeIykuAcxaOmf0bo6/+VueTLNTvbpI/cUuLr5wZFBClaLhkaTixdsnGik4NA6D7DBMjKRg==","shasum":"9ed2953975b7221ebb08f2a0a35d38d3b036c509","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4.tgz","fileCount":165,"unpackedSize":2254963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8NPXCRA9TVsSAnZWagAAdxYQAIfZfPNsWhneZ8tE67V7\nATt/GqmDVmtQsm74tLhb6fWK+aY5Hs2dRk5jApxNo8w79x/ZNP5nYVHKWpu+\n7DikXt7Dx4dC2yAtB4cQ4annZPL00R1E/FoKLIeiFgqZ8FoaHihuLGQvi7/Z\nRrq5j8r8bWbqX6L+xT4D97/Lw9CWa852V8YZLhbzU6mTjVo9NjTDRrgdkCY7\nZFubzJ4cz9vcMm1jdCN1RQXTtoi/iNB+Dqo6IAUIRYBH05R5FTbH91+A7B5L\nZ2CAPmqeAX3Qi35qhEKTwY/2N4x4fh32iN+S4W23EwaA49b8c+oewQtN2asX\naJOkjmvDbFn2Thlf0e/7AGLnXsy8BuMmoKK50YxpFQnOUNUyBGql+GKxuQ/l\numbh61ej6qA+480hS/ljfV8pDYASSeJdFohqOVWmk3oL9OqQKjWhL8P5c69+\nT0xEFALoqgW5uD2GsBIwqnqO3k9zi08SB2g/P11/o/ZYtCKrOGS/avcZMVvc\nqWr0Lamps2qv/Ak+qYQlFN89dT8ToLS4TX18zGgFe2if5cPKb0REAk7eNtgL\n/7AKYqV+vgDJ+MQuwcTz1XJG8mJjm2GD9aTcZL1//DdT/Pnjwvw43a843qAs\nbl7Z/TdY0cJS4aDAUGT0U9rjk6uA8g37RSOLvr2RrObPc6o2zldPjnp8d11k\nEnUM\r\n=BC8p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkcPGmoh2t0oNpQHUjptAPa6//owTcu+1c30UJxmGFmQIgbNlKCU5A2VlfS5glJFk8lvPnljhzs8VHiiAGVWzhfEM="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4_1592841175289_0.4074336504624665"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.5-ffb4fcaa56b7ca4d9846d41ec34d16352c62f923.0":{"name":"@unifyux/web-components","version":"0.0.5-ffb4fcaa56b7ca4d9846d41ec34d16352c62f923.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.4-ffb4fcaa56b7ca4d9846d41ec34d16352c62f923.0+ffb4fca","@unifyux/theme":"^2.0.4-ffb4fcaa56b7ca4d9846d41ec34d16352c62f923.0+ffb4fca","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"ffb4fcaa56b7ca4d9846d41ec34d16352c62f923","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.5-ffb4fcaa56b7ca4d9846d41ec34d16352c62f923.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-HU357OomAJLzfFN1GWP/0m0BKtlDqQWS/WBtgAqOTXGoGZ7/iB0TQW4VjjHFlh6By6lE1vvJ24UgQFXN2PLeMw==","shasum":"3ec358a038e87fd5e143212774b5df2264124146","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.5-ffb4fcaa56b7ca4d9846d41ec34d16352c62f923.0.tgz","fileCount":165,"unpackedSize":2255116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8Nc+CRA9TVsSAnZWagAAiB4QAKBoWV1Pu82GxaOOceX1\nYMWp8kU4mXriyuGdl2uGgTh6m5VDICgpCeJ9a6nzQDX2cehjvbCaG+BsY+Ny\nObppPN5sPwzjCdxW8qNak0gIp5blge6bsEwHAtAWfq9vYbw4vuVPCa1SWFNC\n1dLvNeI/kqj/DSh7wQ6hJqRqeRN1IgAR2A7oKKSSayaALCdeAb502OCMI42W\ntb2LQBVOXTX1fj9g2WPMYvq7pAgzM2zJLpANtc/++NEsolLLlIxbaZgyj7S3\nnk+xqwp5SZnltECAyu3uNCiF3Ux1EY0YQqjhnnZ/IHEqeT/sbARKrk92bASy\nH9bvRSU13hx/Vb5KoSHbNo0is6mlWO33r/ZEmRwlh983aBMqNc7AQvXbCQsi\nTUPnWihwtGDzZF6X0yWQ2eBfSG714jalMRXFEUzItJdWSGPwqPAIlatCkAKV\njPd8FissKrqjExH/7FwP5sQqQwb9nRQ6YH3N3oodx1oN35WGytmQX4N80FpY\nRyYws7I6JmxkSNkKw7sDK5adIGYjS7MsNANY8SprhQu0E4mG7eosEjGWsHh9\nKcwp6rFOgoQwaBoR0pzrTxuXMLzqoLs+kVXrwH5MIl2KcM3uhLvnCBCj8XMl\nsVjFmGjJkaamRPo07esQ5RcOzqcSKZURj5yEEJZqv9A8ODHm0Lw0ffHAnpcf\n81gx\r\n=Edcb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5yyz80I5EKnVJTAjx6zWfDbL0uoTcGVpIBm0oB5YlaAIgZTP87RqR64Tn1ynHF9PgOZSnr64kJq1OLVMdMkE3rJ0="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.5-ffb4fcaa56b7ca4d9846d41ec34d16352c62f923.0_1592842046015_0.20748397345972047"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-00e7da3c62b129e7c80d70e65e76fdd8a6a3eae5.0":{"name":"@unifyux/web-components","version":"0.0.4-00e7da3c62b129e7c80d70e65e76fdd8a6a3eae5.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.3-00e7da3c62b129e7c80d70e65e76fdd8a6a3eae5.0+00e7da3","@unifyux/theme":"^2.0.3-00e7da3c62b129e7c80d70e65e76fdd8a6a3eae5.0+00e7da3","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"00e7da3c62b129e7c80d70e65e76fdd8a6a3eae5","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.4-00e7da3c62b129e7c80d70e65e76fdd8a6a3eae5.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-dWf10d8bqNaNJJXGgGEx4l2ioXw8gDZS/xj2y5Kg7l+fMNbxMnPMlq39iJFloEHuQSgXGxEPbUxCSCHmPy9PyQ==","shasum":"0b0737eb2f8a4b2b6315a4a3da376963fd1432d7","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.4-00e7da3c62b129e7c80d70e65e76fdd8a6a3eae5.0.tgz","fileCount":165,"unpackedSize":2274211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8rKHCRA9TVsSAnZWagAAl54P/15oM6z77ncu71WeZWmN\nPr0/WAcXVM2khIlQQGYSAFGPY8OTGH32PWJ27iW6Mwbvl/WE4iRsliOidYF+\nhQsfFK47Kh91+6kIcGrHVhLQTTBcSTo0dceiCQ12TThXsb/PuE1mn0TfP3AD\nkxJNsDpF126eIetn6hHdBcsYaEZlPVR37xmesW/svztJ0J58WhIaxWIEsmra\nbzpBExFG3OMKWlZx+BsnCBtF5+/+jkZZfgQ8HF6dRRWVWu9jlWuN2GrSvYAU\nKtBakR/SokNMyRsg00CvqPhpbmpJsVj53+4UEZkM8KMMFP+QZuGrEd6vT1iq\ncx6n7Kk+8prnHFVoGTKmWLtFfTM79Z2gMnddIuQVoa4I1yWsC2qvxjZlY9RV\n3rtV0zwKGL+E7X4ahcSW5jr2pVrMh4flNuT4q9jKZuCzW/2KVWNVWadnRXIC\nAT24KpC76KQAPPPofrRnbj/6UKO0iVfkU9cCYHPMTwDULw2SuTkRJQYong1I\nhWLekOUKMulvGCK/hKdC85gbEcWQ7N23MSc8Xs8bNJZJUv7zV67ge06+2Jbn\nb/tG037NCq8ZsDUFc0LAIPXTHBfZ9yZcV2djci0esTI8viH2Skv/REhlx0p6\nHY+KEUYLrsbcZClq5C3CV2Q3tz9HvjAN0hNbe787xpMyLgmuvpD0a85m8hqU\nSNwj\r\n=fBjB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGu0wcd4UNRPkw8cn1HTOFTTt69QG2suVgncJA/r7B0PAiBZ5cneWR/FAodqKCxdQMivVdUBV1QVj1apoIyPlC+Yfw=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.4-00e7da3c62b129e7c80d70e65e76fdd8a6a3eae5.0_1592963718777_0.468416648360952"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.5-92520f1a57ca29a75790b6e679abdfb7975e947f.0":{"name":"@unifyux/web-components","version":"0.0.5-92520f1a57ca29a75790b6e679abdfb7975e947f.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/icons":"^2.0.4-92520f1a57ca29a75790b6e679abdfb7975e947f.0+92520f1","@unifyux/theme":"^2.0.4-92520f1a57ca29a75790b6e679abdfb7975e947f.0+92520f1","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"92520f1a57ca29a75790b6e679abdfb7975e947f","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.5-92520f1a57ca29a75790b6e679abdfb7975e947f.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-2KdCG0m1A4hE6utnGxXuPC1tIS0wbllDFcWDRFZPPSTVuPqCPOc0fXzVhrKTM1Dpk43+MK/PN5War8l+kH07yQ==","shasum":"6cd79ee6f6c6e6e478a488ed4495b3b0a7ed9c5f","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.5-92520f1a57ca29a75790b6e679abdfb7975e947f.0.tgz","fileCount":165,"unpackedSize":2274211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8rVSCRA9TVsSAnZWagAACRwP/RksTC5S7gJPeblawS8A\nASoHD3OAtUZKvTdE6L0SRP5fVcbsgkZRb0cSkFaKr3md+jRGmrIbjQYES0KT\n3ETLWBfhwBvsYWEOXATsipKWtIlbT6AeHm7T5QG7IpnRcfl5PGvLGDjj3/wb\ntljBJJOMb+Npm33mY02ymVgxN1RIaBJWo/z157NpZvXlixCp0VcC2bjMqwa5\nyRRr66NVTF6Y8zRdvSNguHYIHfiCZwN8SgXr9V+ETjEbpE1DW/4U+SywSI71\nqgSa0WIwOCAPnsbaHdg6YRd+Bervrn+qqmvTFKyGks20IYwhnZIUxGP1ndee\nhmm7dCDUQQLRaSoUZ3mBuMMJsVTikMVsvg/SucBhGiuwhHEf+M3D+cdei5YY\nddz1dzyQsy38KIUCViSSeYOlCjFKJp3rjC8bEDeqS2PITijRQh+sbGRlQV7u\nj13vmF3IqY5wh4pcLh2bnljKTxmIu9SVVEV+a5rTwyaSj9vXZhv3rc32AulJ\nB2csTHtRijkXLnft/SLHqpz2q/Q+2KPpf5uYfAQ1pwWfXa06MeCV1lEQ5oXL\nXtQl/5f7kzSe02rhGNFL/yRbbDajSWb2KcIqsdBPgVis1q7evbSHZLkRDBby\nXJkn0cpcVT/BxXUPzT6flGO9/B9oes3lKUp1dB+JzUBXADEN1G8hhm4u9trL\nH0gv\r\n=rg7c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGuSfDcOo9R0mvPYRw9BaDlQyqZLVYEytPD9KdFf5vf8AiEAh3DX5UAACjZ3IVUmtT9wwPOiYaDGAYeMCMEee33/u5I="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.5-92520f1a57ca29a75790b6e679abdfb7975e947f.0_1592964434402_0.9251668149405681"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.5-e6a5a88d0722881c4f8269a471a6c80c5e5c7787.0":{"name":"@unifyux/web-components","version":"0.0.5-e6a5a88d0722881c4f8269a471a6c80c5e5c7787.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/brand":"^2.0.2-e6a5a88d0722881c4f8269a471a6c80c5e5c7787.0+e6a5a88","@unifyux/icons":"^2.0.4-e6a5a88d0722881c4f8269a471a6c80c5e5c7787.0+e6a5a88","@unifyux/theme":"^2.0.4-e6a5a88d0722881c4f8269a471a6c80c5e5c7787.0+e6a5a88","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"e6a5a88d0722881c4f8269a471a6c80c5e5c7787","readme":"# PerkinElmer Web Component Library\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.5-e6a5a88d0722881c4f8269a471a6c80c5e5c7787.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-iymFWklvRbiQr69thbHBotfOBlrO/cO6i1FRiRZ8yWRBvxfnUG5l8pGByTIjX5Dc5ReqgjukV+lD3dC+KU1osw==","shasum":"042fbbb205b642315fbd825ac89d3c6a0b55e007","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.5-e6a5a88d0722881c4f8269a471a6c80c5e5c7787.0.tgz","fileCount":172,"unpackedSize":2712117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/jvdCRA9TVsSAnZWagAACzYP/jKMO+ZabpL/NEmNKCV7\nsvDNGi9k9y5Va5/n93VyG38jZs3vjFyRRj3RVelRaeQFgv+OhfqlJsTItR9N\nozdlNFE85jvJBgxg6SSbq1rFv5gpxAQVHZkr5i0zexQYPF2N1cfof+6CmHC7\nYxmWrNgMpljPIYm7aFdpWBD89asOxSv0eW4+SiKDtLy+B4Q4GdNOQ8gzpUiX\nY3F3OML8F2hONH8e4fMHz3rpGPx6cWBj9Wqo32SwQ0k6cW6WpT0utbOFMXGp\n73w9QmZE/Y8oO+JhwzTQgqRtuuaZ95nRS4X2T7mYNcTvEABR9tjTE74ADnOD\nhNSZqnDQbfpyWLX9d7mry25Na2i/7o/7I3WJjdfjYSnd/byS/iSjGoXfZ6jq\nUFVrLqXrZ/71f87H/Was7bh/we363ql+bFaLzg31O7WQq61rS3qHJX6eM62G\ns4fddJce6X/CIU2RdwlUk/pgtd7idjKX65L1Jok5Vx1pK8RiFjr3F7g6nyTi\nXBmVElUM2OdCVBrZ3ZafByWFWTuwP3PXq3E1Rt67RGmYTAMQFl391AHugodl\nXWef5PGVZfuJuFMwiG/VeUpLA17DXT12PM9tKdYnfrgRD99HrtjFeAVDo/mw\nxyw/WLBwm1Vhbv0bzoC2yPw50Gg1IS2gjWsN3hNw+i/JRmOtZjsrro2GsWAa\n35rS\r\n=UR4u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeACh01eua/qArCLaXYkQj1yJOK9oxliaedlWcBGcNlwIhAPDgwkmV9XGMBdyEqxjZ/STifacjg99s+SvZCpFIuA23"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.5-e6a5a88d0722881c4f8269a471a6c80c5e5c7787.0_1593719772612_0.1736461746879514"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.5-a6b15a87f099545866f9675a972e04a66558f1c6.0":{"name":"@unifyux/web-components","version":"0.0.5-a6b15a87f099545866f9675a972e04a66558f1c6.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/brand":"^2.0.2-a6b15a87f099545866f9675a972e04a66558f1c6.0+a6b15a8","@unifyux/icons":"^2.0.4-a6b15a87f099545866f9675a972e04a66558f1c6.0+a6b15a8","@unifyux/theme":"^2.0.4-a6b15a87f099545866f9675a972e04a66558f1c6.0+a6b15a8","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"a6b15a87f099545866f9675a972e04a66558f1c6","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.5-a6b15a87f099545866f9675a972e04a66558f1c6.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-3UJETCvpQtTzeAPDEdfC6LbubXxsjqCTcSgS4afvAvv7oJZy+flj6/6SlamoQ05pO+D6FqfuFMWAVDvN8fdZbA==","shasum":"d669421cec5fec0991d61d85e81418139233885e","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.5-a6b15a87f099545866f9675a972e04a66558f1c6.0.tgz","fileCount":181,"unpackedSize":2788905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA0n6CRA9TVsSAnZWagAAf6MP+gLRPTh2xT6YiV2NNcG4\nt4GzYtOKEyUpEKDooSPVQGDK0exd6p0Z7T04xzj01hhEjwW/etZ6EBQmqpXn\nnSRgyv7Fv5oRIfwc8yDOqYAQZxy+m2DCvfF5oVtwT07HtgnN9YM0A5NWlwIx\nKVe74h0a4bRf5J+PVLM2hN+iV5w5k2VsgIN2Dx1xZpVIBmTFBXZb+tH1EPlk\nWoKqPPs4Dua63tp2PjxGcyZTQXtu03OnS/+664XG5ncecmoW3r/04uPJY1K5\nREqdkqG/2B+vN/JLZeVw0ZftYGMMmxPkddYzol/Zc0JUv96rk7oZsqdFKN5e\n0MkkHbZcK6Vho5lDLF1jIma5Psr5YMK7917V1mKoy603xZhl6sZT91Upz/K5\nqLddiIir88nQYz+uzj/PnGR0vMH5nJ6234AvAtU8BfJvU0QpTqZm1IarvWY8\naqz04Y7ZvtFP3zloFSMD29sL/unu+A8029nU0pMvmflPZcB3eaK9MLMJcW78\nDBk9jRYTB4xN6gQq3ctM0exhJL7X5ldh2fFX1JBmX1CSGNROR72w8BZ4oN2v\nrk7/wh9VT9PRsHfZHU4SKdRQbzKdxrkD/kYYJ2PZMnS318DQZl+NhpeoMD/n\nsucNCffGengxWNx0GM/ksFt0w5juoMDxb6JusMsIIhGAWmhSg2t6yAVLVJAN\n8S0U\r\n=VW/n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAyKwvLkkkjZgbEiHjG0ygKQFeA7PGq7yhm/cg2s0UIeAiEAshzFhX13oeGPS0rHbSTPSOObkuP4Xowj8luobGn7mKk="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.5-a6b15a87f099545866f9675a972e04a66558f1c6.0_1594051065565_0.6253992815145173"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.5-539073b53e71e6c52ab324842627a80dbee5ff83.0":{"name":"@unifyux/web-components","version":"0.0.5-539073b53e71e6c52ab324842627a80dbee5ff83.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/brand":"^2.0.2-539073b53e71e6c52ab324842627a80dbee5ff83.0+539073b","@unifyux/icons":"^2.0.4-539073b53e71e6c52ab324842627a80dbee5ff83.0+539073b","@unifyux/theme":"^2.0.4-539073b53e71e6c52ab324842627a80dbee5ff83.0+539073b","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"539073b53e71e6c52ab324842627a80dbee5ff83","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.5-539073b53e71e6c52ab324842627a80dbee5ff83.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-kwxprpExx5vIgSIZI92PsbampWKVMSw3oUyyexuZu/pr91qXuAMQzSRnc0UIBonAfHLzW0Y9KDbnEJ6e5T/DKg==","shasum":"1ad76060ddb70df560423be7dcb05c5158077a40","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.5-539073b53e71e6c52ab324842627a80dbee5ff83.0.tgz","fileCount":181,"unpackedSize":2788905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA022CRA9TVsSAnZWagAAR60P/2w+6TBs6/B0452xZVDh\nhcvj6b4XdRof/sxDEFHxV+iHwa3hyFWkVH7+1N2ZiqxzdX3H45Riq/NJVaPp\nubu6Bz09DQYGhuMAkM/KRkTb+sApcfxbvJAu1rqRJeOjt6XVVrZ2R/J99t56\ngh0WD28/hj6E5H8C8Sl/05BBl5bT/V8pF2DehdUUGCvfg/RTwd04/GmPzet8\nHh2PQ6BnyrgbiKONbbSlo5f4LpzC6cZyYOZbAWpO3Q/c4QLpnMj9VihBDj65\nXSwMrhxvgbIxicEVCEoLgHaMkGvy5f/un0Ycpa5pm6dsarMftmoHPYk+TWYt\nWjiGvrKozHI1kLRkeFsPxlw0b1gVcPMpWZbX1CoQkY9WVdy5x4HsK7vql875\nAsdYTYLJIv+0FYMK7ALNz4/qqJ+j/6g5lj3LsSDxuF5bqi6hZoKyzXTpt+Ag\nVFdwI37iVF3qWgbqiLxHbvfPi9oRCcrN5enB5/oqQLoVYpnahNL+IQqixbm2\nWhtg/oDX4iWgUXd2NmDtYFEZd8QUrfw/ZTvRxtNclEUi1+AcOVIrV/cRjQrN\nnw0IW5P1NAH+UbU/t1XWayytUnhwk1txsEqhdOhrsHXZ1WEcgAH71isTwjxP\nBu9EfR1bFSePtML+h+f8bovbvGMtmIomrSiAHNn4Oa/b3yaDxfDUnp3BYdPg\nVVuo\r\n=oTFG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX/ySn0W8ewn7V7o3QA9K3yXUFtzh3j43JK3977wNsKQIhAMQvNHMYRs7oQLvJzwwdBEdVMRKPB2RApJZY6mBvGHKj"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.5-539073b53e71e6c52ab324842627a80dbee5ff83.0_1594052022095_0.26737773662788245"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.5-39dfe5ee2f3d32d5a4c6daaf026f2ea1c004d079.0":{"name":"@unifyux/web-components","version":"0.0.5-39dfe5ee2f3d32d5a4c6daaf026f2ea1c004d079.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/brand":"^2.0.2-39dfe5ee2f3d32d5a4c6daaf026f2ea1c004d079.0+39dfe5e","@unifyux/icons":"^2.0.4-39dfe5ee2f3d32d5a4c6daaf026f2ea1c004d079.0+39dfe5e","@unifyux/theme":"^2.0.4-39dfe5ee2f3d32d5a4c6daaf026f2ea1c004d079.0+39dfe5e","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"39dfe5ee2f3d32d5a4c6daaf026f2ea1c004d079","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.5-39dfe5ee2f3d32d5a4c6daaf026f2ea1c004d079.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-5iJI86kZXC9aaXcFVBmXI/hiBfVOKzqgtXn5kDpsfUdh2t2ZOkWiEUf0FDLwWJNQV+CRdOzp+TKQt7rurOYm8g==","shasum":"ec1cd8437e81682d7643de56a46a299206631b61","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.5-39dfe5ee2f3d32d5a4c6daaf026f2ea1c004d079.0.tgz","fileCount":181,"unpackedSize":2788905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA4NiCRA9TVsSAnZWagAAIC8P/1fOmukzFfwQS+tpyKdD\nS2t9eVa6AwZhDYVePBlBhWvgFOk5o5VDxFaq76L9bhJbAdy6xQr4qUv7bl7O\nepzus6RmbHnshkGB46sp6I8sK7BfFtzrnfa3nTF8Dwe5+UZ4hz844k6US4S1\nXfnRsvrQKOYrsJZPMhiBIGNZyaAL55Q3woCscs1+kRGclH//7evdOf0V4tIG\nnJX/lGyySorKquD7lAG+bFs+B1JYMiWp9uQJrnf5KnHK2SC9XzfhVry6MLp4\nm9u7nd8UoFOVsCKd6o8dJYeR3Tg66SLzesjbDs7zu/MmopYfB7N1lIqG6Xqy\nP9gc5OhwklisMTgmurfVlNuYa0sdVC/a4p3bYH7fTDXiXeLdEiAhRPka5daq\nFKt2ugjOlh8LxC1/picGxD90N3jYqXaVrT73YCcomPNYB2crBmJlN6QPkEe9\njAGHW8Q6ybweH0cjpqD3otECrFfP8bBTwc17+9PE5ZytIRy+WkbGoqJ1KP7B\nYMR83LTWU4AFj612E31csAMnuXtS6MgvBcVyGPtPjq+haU2vatYrtlGqhRX1\nf5Qx6OOssXj2PNGmgZWQwE7/AWODrZ3oaBqjU2kBuaqiNsTf5jyiaQeNFCtt\nv7NGHTCOBGwvs6J/+nyD1DaFZSfaiqJ7YbUQCmcFrqk6t1rrpC+hObF6Vswx\naTvz\r\n=z5LI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSMqf7AfYDHFSGwJo6oYjxqNiVElcMwZg1k0oOoxCOUQIgX39ZS3c5FnbQwRM/7h8cJEbiPiOPhnaaOhfbfpd9mjI="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.5-39dfe5ee2f3d32d5a4c6daaf026f2ea1c004d079.0_1594065761969_0.02686655494223955"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.5-70b2d204e9f01f004837d796e3f320f10762ed1d.0":{"name":"@unifyux/web-components","version":"0.0.5-70b2d204e9f01f004837d796e3f320f10762ed1d.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/brand":"^2.0.2-70b2d204e9f01f004837d796e3f320f10762ed1d.0+70b2d20","@unifyux/icons":"^2.0.4-70b2d204e9f01f004837d796e3f320f10762ed1d.0+70b2d20","@unifyux/theme":"^2.0.4-70b2d204e9f01f004837d796e3f320f10762ed1d.0+70b2d20","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"70b2d204e9f01f004837d796e3f320f10762ed1d","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.5-70b2d204e9f01f004837d796e3f320f10762ed1d.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-Tn0IfLoiDcTbYJsdHPU6G4zSn8qV+yLSshXGmVEWT4PGfsXokT9Fj99/IBSXzNF9XaJlrH9BpgZX62/byM/ZXQ==","shasum":"ddef23e2f1759d4483c243b686abb24212567f91","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.5-70b2d204e9f01f004837d796e3f320f10762ed1d.0.tgz","fileCount":181,"unpackedSize":2788905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA4dvCRA9TVsSAnZWagAABosQAJBawiT3lxnj9bHI0qez\nRaRhCMKf3ajDq+vKcvNGWvOqqK9YeKbV1H0Rujp/eS85RR6lowcGreBfWD53\nyNmwU4oQvLDVBcND7xG6nwQS9FLUnfnlbnjrGfVRA/PWTlDb0K7vUYT53iWr\nSjI4aUgaroLfHr44ZSyn2byERm87XXkwGs8lZkL33wkWJ6es9T3FDP3gHH4X\nSKy06ce8ywE/k1Mb9gZdaOa9NaERN+NZXtxyswlxAX6HtQzTwmb8uQqY5PPd\n+AdMRDIWD49nOjjeZ2cQxAk3GccRYmYphCaOT8n55ZH2Mya9i1pjJgO3kgj+\nA8Rs1v79Q1r64ryMBQvGnhM6NmUpiSRj0kiPkbV/Kc/EU/ESNCJDFJZwsHmV\nlv/Igb5Q2vvzS71cHPbrsmqKM7O8bbFuPfN6jlVZAvpbE8QwNSNdOhUewyON\nQm0kjLmLPvvC6EbLMF4O7ME3LtpEsMOd1WPUx8/ejZ98M4QSUZBcQ1uC4RZp\nIf7wynlbK0tPJf9mwTWmH0UB5Edc1Xev0hDIDDxCdz+gp4cLnqoAXC6wGtaM\nYr6tNCE/kAj/1SQ7IH/EEXib6Aa7YxE0eJ86p1MDkb4hV/iBzgEi4u66pLoR\nnJp4LyY4SIMeEVAYAt0uD1R17jS9Pafxie8v3KzrPIr4iNbC3QP2maZ+m7cF\noktr\r\n=3uiA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvKMiZ3z73oxlZ6kEm67ewNTVKHIe6F7wVcp/iFxU9PwIgTnLt/vLegxUX7CajkCtG9fz2Yub42/XTp+3dAl35mxs="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.5-70b2d204e9f01f004837d796e3f320f10762ed1d.0_1594066798848_0.3363294182922134"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.5-cef7f76778b44253a035a37a51d957640a148354.0":{"name":"@unifyux/web-components","version":"0.0.5-cef7f76778b44253a035a37a51d957640a148354.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/brand":"^2.0.2-cef7f76778b44253a035a37a51d957640a148354.0+cef7f76","@unifyux/icons":"^2.0.4-cef7f76778b44253a035a37a51d957640a148354.0+cef7f76","@unifyux/theme":"^2.0.4-cef7f76778b44253a035a37a51d957640a148354.0+cef7f76","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"cef7f76778b44253a035a37a51d957640a148354","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.5-cef7f76778b44253a035a37a51d957640a148354.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-vZDQeiF3GX4vHf18UYik1dXizz+8z9N8Hz2KjHS+D9RVPil8HOKXlglM1f2qhAMhKPoZtuJmG0VJHftG+15ciQ==","shasum":"c6c48e7aabcde896a7baee959239fa25eded9624","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.5-cef7f76778b44253a035a37a51d957640a148354.0.tgz","fileCount":181,"unpackedSize":2788905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA4xBCRA9TVsSAnZWagAAscUP/29X0xkpiFFD9OBimKgl\nB0+2UgYIdEg0WJSrO+zJljVCfv3lJqNXRmOVPNRLbTRJzBzYCC7ojSIksQI7\nlIU14Uto2Ld3BZg/5avYn5QdDsf1WNNFzC7FZvhOhAIeoHJezy5Fn8a35LTI\nYCtzn2fLuRtiKBgzh00FgT+ZFFy3M7yim5STmv8BK/cZ8wtJShPohRJ07JrX\nkmLb59VrRNJNBAZ3th20iLwweHLikLyJY8xes++rcN1Siy5oAFBrRmtWWkPr\nu0+6OW+LPvqR7uBVLuI2nlyMBhLDgLK+009FLfz2+Xaf2UxpEZgRwR3WukHV\nGmhy9FtCFuDNCfLFC58gmeSHvDRx7YQPnFkiFeN5A6m1muiAlT8Hjf7WPaob\np17kVN0wE5HXL4KjceQxy8D9Nu+MCnKmSyWn1nazK/Pi45NR+ecU8M3eyNG+\nZecDPxboEsKcDvObXOsut6IFLowYnJdarQSyA/0HDRu4rG+M6Iwog7hpdfbf\neo+67nfji6R/TGNuktkzuR70HA+5sahytkgbQ7XraDbnKuLy8DYZOB9OqjrY\nZFY1Pe6HM1z9fZHJQim9a0wCANOKX7Yufes9qdy11fgqL0PJLGLOG/y+fn+h\nZ/KiABDHkFSTQ+/Vj6PFS2oBGgvxSkMuxIusKghBpNFNylsLsRtCpNhEw4m2\nU1Jg\r\n=N3nf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE/1HJFIl1azn0+DGbDafeaVx/Xxq+VWIlVWYk/gHhVbAiEA1LFoq3SF71373YbjKSEqMGjC8eAbCgPUFv920yMNr/A="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.5-cef7f76778b44253a035a37a51d957640a148354.0_1594068033474_0.07676232474307487"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.5-597ed4c23d673fdcff6ad5ba5a42764fd634731a.0":{"name":"@unifyux/web-components","version":"0.0.5-597ed4c23d673fdcff6ad5ba5a42764fd634731a.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/brand":"^2.0.2-597ed4c23d673fdcff6ad5ba5a42764fd634731a.0+597ed4c","@unifyux/icons":"^2.0.4-597ed4c23d673fdcff6ad5ba5a42764fd634731a.0+597ed4c","@unifyux/theme":"^2.0.4-597ed4c23d673fdcff6ad5ba5a42764fd634731a.0+597ed4c","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"597ed4c23d673fdcff6ad5ba5a42764fd634731a","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.5-597ed4c23d673fdcff6ad5ba5a42764fd634731a.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-W16D24cB2bQtaY2uWoFl/412l0n1FdBMwKQzX86Q08FnK0PLhroKTs9MZ5W/QEhRgsi+CuhMgf7FI60zijAOCQ==","shasum":"b39663405ab20ec1f5f6bfdfe663337d5c277331","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.5-597ed4c23d673fdcff6ad5ba5a42764fd634731a.0.tgz","fileCount":181,"unpackedSize":2788905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA490CRA9TVsSAnZWagAAAHoQAIwoGQn2y4mp4X4ScZCP\ndIY3g1fPb5BWbnDjyQandsChXSRfZYxSY/Kp5h/1IrM/ZpzLLcFY1yQm+JXw\nE0ebFv49LRXldDGOxg7V7DYCRQnrA9KIhH6VcoVQCRT7+GB7La3b0tCsuAqo\ntnNVncPJPY0oJ8L1E2T9H+8/823x/c5d2nfKrFiL/z/pkdcAU2xzDb2wbi3o\nUIk+6f47Dr/SNHNjBM58VZo9fBocy0y0FoDw885ngH+WOj92cLS80nBv8UuP\nAs13BmVhza53oooh9NLOJ2U8kYu7y234FRonh3rfh/dGoBWtvRbTS7yRMMMO\nsXY+07kIJy8TYtbWL7Ob7FjwzV1HD++5Tcash905kYSBE01uMTLZm6eEdQhp\np5OFAsaeOm6evU9AisUnMTZmB17HgdpfdppI7ZN1SJzTfsvULdTw6UuWBiwM\n+D8hZpo/RxYMi/rjUK9G6CgxIJW9aX0vIs43lRpSAntxGS99+2g5u09A+BD5\n9MGriCGmp0PJpcy1dLbzDrRxHXgq+8zVqFdeeYgTUhpSMC98YK6rwAC25BlW\nGIx4tDDwotujiS6v+ueKGCtnsdU+Fp2wvkoR6BqFtYO4zWRs9E++EgdmbXSC\ngbqdy30Ca6WIFXx4YvmoRvlqEHhFa25glVanGtuaDDjqSD77PR1JzoXmb4qc\nqGNi\r\n=HLTZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCG9uQmS0Kt+HpxbXxG6TjJOR8+DyLyJ9JeSv6iVCVZiAIhAN1EtiVHM4HMgNu/h5Er8X7GdeQwUJHi0jsI7k0hJ5Ju"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.5-597ed4c23d673fdcff6ad5ba5a42764fd634731a.0_1594068851711_0.23657356328995793"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.5-33b8ad030e5cf2b10ac8a99bd6259e9682e0d162.0":{"name":"@unifyux/web-components","version":"0.0.5-33b8ad030e5cf2b10ac8a99bd6259e9682e0d162.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/brand":"^2.0.2-33b8ad030e5cf2b10ac8a99bd6259e9682e0d162.0+33b8ad0","@unifyux/icons":"^2.0.4-33b8ad030e5cf2b10ac8a99bd6259e9682e0d162.0+33b8ad0","@unifyux/theme":"^2.0.4-33b8ad030e5cf2b10ac8a99bd6259e9682e0d162.0+33b8ad0","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"33b8ad030e5cf2b10ac8a99bd6259e9682e0d162","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.5-33b8ad030e5cf2b10ac8a99bd6259e9682e0d162.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-iq+EuTbwmcihVJoh+DhV2+VBaqAYhbNkrYY01ktIa8HodKUUX2MUzBEeCsrXnNSXH3RgVnA5h3+SRNzZiJZuWw==","shasum":"18800988901a16607b03409fae49ff6815fa8567","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.5-33b8ad030e5cf2b10ac8a99bd6259e9682e0d162.0.tgz","fileCount":181,"unpackedSize":2788905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA5JZCRA9TVsSAnZWagAAwTsP/3zGmkH4RnSs9PqAHrbX\nIKdm6rK9sm+OTpseVPCfh3IlSfY+oiZ5so8YQ9qfEwkx1gA/mfpwaTb8jR+N\nU9pdl0u7UGpBRJdXgfkZr2pzPC6avQmWsWvf6Oy2wHmPRzX5qI9lgZgWXj14\nxS3PhiZGFP2PVKKm0l0vzT45SZh3Y1zuwDVLq1cvdtvEecnshPL8S3nZNEJW\n94PdoaQwsAz6lq6L99ugLTkbUv1jsuWLoBUPt6nQ1w+1x1TidN3phXvSXxAI\ntqcUGrjCiTBsGC/RHoM3IqHPdheBkoRvOLjppXgxI3ur4BrEWAdl3nY4Q5qk\n2AOnqNSUeRlf999EsEr9UGvDQ/PZ0ve5vWzan7CAQcD8HSeOwgD/DEVsb10d\nBjy1IYPsjR9+4GK3uYqdSADp/Viy6HgV03HLotFS1G4TRgOh7DsDl1264n6/\ny0Q2zMhmpodUPIwscrc6hHX75k+omR81uFVaMzbDA0uXdAX/Y0VLY3Du+0+r\nrfrv/wjt+MCWSbuJHrONviFVtFZ9VCPkCo+JI42gUgpqVvow9hGljQs/rTRv\n8XwMCWlhhZIw7XCx7p9ZQl8XIDvXFGwCrC3xbUG9ie5ai9sLpdeEgrQcRIzP\ngIkCMQ3lfIRl/3zuXu8vOfV5vSTZnvwX5+lp7lAcBbgDRoB5k920bmerQTrz\nW/0S\r\n=sbbx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEf09f13mlL6H9cKNwNp51vMNXcQeBz+32mU14lFnbm+AiAOeS18WWRxSh+apCPETl5SKQKN6fOirSNsFPf121FV/w=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.5-33b8ad030e5cf2b10ac8a99bd6259e9682e0d162.0_1594069592682_0.6437409279874824"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.6-327324f62160baf50eded6752d62b961001525ce.0":{"name":"@unifyux/web-components","version":"0.0.6-327324f62160baf50eded6752d62b961001525ce.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/brand":"^2.0.3-327324f62160baf50eded6752d62b961001525ce.0+327324f","@unifyux/icons":"^2.0.5-327324f62160baf50eded6752d62b961001525ce.0+327324f","@unifyux/theme":"^2.0.5-327324f62160baf50eded6752d62b961001525ce.0+327324f","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"327324f62160baf50eded6752d62b961001525ce","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.6-327324f62160baf50eded6752d62b961001525ce.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-1Cqu0RTnhGjKsShFh4t3oGx9Octw9npgcJLdTm2tbMacarPMCFgA+IIi2irlA2n5HhL8Udz58gFTwfzGNTe6vg==","shasum":"985692d6b401359acb05b736b89829d9d616c8c7","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.6-327324f62160baf50eded6752d62b961001525ce.0.tgz","fileCount":181,"unpackedSize":2788905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBIITCRA9TVsSAnZWagAAxnQQAJ08WkexVasXXvv6feSH\n6KUiId0Id9njM1btDNKt9ZhJQC074hxW/Fr7TCnvQeAX9T62T7ZDUkPNjGV6\nDxBgVX1GPrluO6U1/cXXcLJvOvsWenpUB0ZV5xgPTSPo5ZTqJ0lyc/KRbgN/\n4oDd6jB2B3NGasP7nyLa6O5ZqkdciXwG0g05figDK8f8CACXpXibgEmaPF8O\njczX/qarf00kgr9WWSyOf9FWoUYEPGTrx/toFMsPmKy+FLLWqbm5aU2oEaDf\ncaMjTt61RjTaVi+9kO+8gL46S+P8h8kIY8mBJgy10j44wT8F7mka/lReNPFf\nh+2GL5tDSsRNefO957mZBiTcNLNwzQChA80bG7XJ69FuKw0yIHIW4KFtywvd\n3UFYFGyyqTWKW5cv554ImnlfBh3BIZRnrzlC51CDGJXFcOc+pUMFonGHXypi\nFnB+iREXLQwMVf0AENtv+o6QEfTidGw7TOaHgT4ob44mAInlkm1U8Un+lTZS\nnGo0Bt9oiXtIcumCyy84fL+shuBLvKmbzWQZsoZYmq8BMUZLUC2EsanJ3gDg\n5gQRTaOrqRgoGNNFlGdbt1zntjmwlFsx47K4yHJTX7YhQvLkembPA9G6xbf+\ntoFD1rq7khbQUXHnWvImAvWMktChmMU3T9J9M5xJZc/YYTuh9Eoj7IR4CVL4\nN410\r\n=/qaZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG9ADPyS+Oj5/oRY3QsYjAdR0rWyAsPEdYfSEbAILDUOAiANoHNhilR0Zur7QIeKHIqaqflPIbGCTRIMm59zpcrjFg=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.6-327324f62160baf50eded6752d62b961001525ce.0_1594130963527_0.3374773045557333"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.5":{"name":"@unifyux/web-components","version":"0.0.5","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/brand":"^2.0.2","@unifyux/icons":"^2.0.4","@unifyux/theme":"^2.0.4","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"eb9dda0601026a2701dfd013ef4b9a5bb9c98177","_id":"@unifyux/web-components@0.0.5","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-lfrfwEqPjFZCiDnisOX7vjvT1xXlxGdVZ2xFC61vcKyaT0C2XJ7xlMtYsWiWfrqH/5ZiOl+zFi1EYWzZSZPJvQ==","shasum":"eb0076ceb92ccb1c9304d5c50e47626dba053681","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.5.tgz","fileCount":181,"unpackedSize":2788701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBIcnCRA9TVsSAnZWagAAqtsP/j5p+p2zuA79cJEtF44T\nH3liftyP9AJuGq+5k8LKxexmISgHsu+Ap4JOb0OogXz30lVZ73dNOW5Q/PDY\nJuxQXhv81ms1M0nQfsV/2CCiGy/zPOQaMxvb+g6y5y1Rox/u9S4S3DXpKRQL\n4XSAx6dThELIQcH0c3BB+YYpn1njaXbWnUxsHciSFpEtbH6jzF5OWdEi5/x0\nyjfyq8xr/Jr9udiBcqpTnvLTIA9+f4P8/K8OUC6HMoD1IdGKKNejHx/rqJgw\nkjgSl7uCSaGmEYq9ObPdTfM3TkZLwO9BM/GEDyKp7KnEnWdGHKcH9lJNk+PT\nkYHEv7KKCjF9JTZ8Jujm6pY0fP4iaejLJRt9uxvQm3kmwGrSv+R9XDR45LqG\nIDDQYV7SfC236ybfoaGisrB07exJEK5VY7woIfgKdeFsL3VY/kjWCEITtBd3\nDTwUlU0fRs5NuOWJO4g1pcAVCTP3FZJOt2p9eAEGEZkQff7SuJZv80SHljFZ\necp1CVqSnk5QkFP/PC4wtRFMrQVg35nC3vdFlJtnObmF/SO+D9T3g5DsjdN0\nXtHKHoZOrveirsrfvqycXAlG9qNyNwPc9C355kvWr9jA8vtn322wLHX0YDYz\nCim3z6kk9S3qpzAQb2d5BZdgYnyiHQBJlIVC76bUvZ0WPkgmdSr6uiJhL01g\nrbis\r\n=xDxB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClpZH4hy1NtGgc65dIQ6HHPa/QrR80ImnvsSMKNbjs7gIgbPeCsZ5OheLg/WrTIq6UFPWzEnfNoKChi6AiH/443yo="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.5_1594132262706_0.701456650398641"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.6-6b313ddcfe1b389c8727717118f58d99b952bc43.0":{"name":"@unifyux/web-components","version":"0.0.6-6b313ddcfe1b389c8727717118f58d99b952bc43.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.8.6","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@unifyux/brand":"^2.0.3-6b313ddcfe1b389c8727717118f58d99b952bc43.0+6b313dd","@unifyux/icons":"^2.0.5-6b313ddcfe1b389c8727717118f58d99b952bc43.0+6b313dd","@unifyux/theme":"^2.0.5-6b313ddcfe1b389c8727717118f58d99b952bc43.0+6b313dd","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"6b313ddcfe1b389c8727717118f58d99b952bc43","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.6-6b313ddcfe1b389c8727717118f58d99b952bc43.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-a7PVmt8mhdUQagv4jAE/owsakOWqbF5tajjTzgs9rEXe7Uz73L3Dtimfte58OOgoy6DJ6G+4eXZpD1fN7SQMSA==","shasum":"fc4ece4177a839f78f6feaadf1a10e5b38aa6253","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.6-6b313ddcfe1b389c8727717118f58d99b952bc43.0.tgz","fileCount":181,"unpackedSize":2788905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBIonCRA9TVsSAnZWagAAzL0P/05wz+5MXcwJBBR8RKvw\ngjIICQiuOckMMcORP/A0MYIvZWi3poZIc38/23YUPDst2yT2AQcHDgwR4q72\n3LA2fG91XW1GfNGVmjywhm9g75g6aj2ZfHv4edh5n+CeK2TODIMDNTIb1ccy\nZ8XD7nJ55CPpVuttmiGwgZ3J4abYeIF/dymfbVyRMdOvgWpeIbC1IDgud05D\nsQ/PAEVFyX/5LeJyVrEEm3S7I5ByOp3H1IQv8ymnm9NiB4WIGCTIMxUboJ1h\neoDJSdqhN+31mPOWUBR0Tx2kgpvDIXGa8ZWU9RJ9x2gg6p7F5Ee6ouX4Hdff\n5UPcpxg+CBd0ChCsNO8VODYli1vnrDttIOvkMOqB8IjA/pwYW5icyVa8ot68\n36Z4BIEeCgqGrMUMSFuThvkgaQTTNYwHlnKuwmc5g/QfGMmCIVKJYT9tUIZm\nJSf3M/awlQtXyWbv4EJPVVdImuqBg6acKNIHy8nLPufPFmfZlBbTNHIjG0q6\n2GJJBYjveMdW0E4OIWjcyPewUWFYUbh6xrmGq5pXL82xpuieP27qR0w9qTvj\nl75A4MYv2ZmGMEiQQXcp3OsXY8bASvbkoYfcgQergV/pcE1GHvXE+ZuPM0HU\nJOSnGmL1NLUjlcQQKM/M+e0Ry5eami6s+KvA9fzHrN/2GMPALChzv4RPJYg9\nRtb1\r\n=1fYM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICOrx1ft+HTH9WL6X4LSO3V11sl9wBBVLtNTSz5CfhIWAiEAg43gPw60NDbdo1R7q9qx854vOQ03KVTu0O9VN7N3t6M="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.6-6b313ddcfe1b389c8727717118f58d99b952bc43.0_1594133031120_0.8719608192542896"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.6-b831a3cdab4ebe4ab4988f8f805fbf154c32aead.0":{"name":"@unifyux/web-components","version":"0.0.6-b831a3cdab4ebe4ab4988f8f805fbf154c32aead.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.3-b831a3cdab4ebe4ab4988f8f805fbf154c32aead.0+b831a3c","@unifyux/icons":"^2.0.5-b831a3cdab4ebe4ab4988f8f805fbf154c32aead.0+b831a3c","@unifyux/theme":"^2.0.5-b831a3cdab4ebe4ab4988f8f805fbf154c32aead.0+b831a3c","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"b831a3cdab4ebe4ab4988f8f805fbf154c32aead","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.6-b831a3cdab4ebe4ab4988f8f805fbf154c32aead.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-L9fF61fxraq6YnYv2idt0+WNogwd6pL9g/r4pogqHy1GlMmm6zf/Cxl3N4iTQ6xup7PyOL13At1bHjRlWQ2Opg==","shasum":"78d66bc4524962ca7ee5987e559f4245800f011c","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.6-b831a3cdab4ebe4ab4988f8f805fbf154c32aead.0.tgz","fileCount":191,"unpackedSize":3022329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEg/wCRA9TVsSAnZWagAAnDkP/26eujP+KSjcY3iHlVA9\nRcl49ZvhHgypvLnQSJODyXXqnRHi3gVHbhaOQZy1lPwNnesSP/+IYENExa0E\nm3qQOghUd18ft8jcTg3XTmwS4vtSSa8wjIKSFjdECtKU5P64wGUyipFgMzkm\nbbKFgpSkB1oqW0LbA1q8uscxN/QDLO/p06AmEwL4sfRW4m6nvx+EH3ADx4P+\n3BuEfmN2AEpuQT4dK30+/3BMibtsKuPEEUjLV7Pc+Lx7E2ai3xw1HbGYHQpy\nS72ZjNpO1qxINm2ruXfh+dD1GYn0P74IElCXnQHN2fBhL0FRMKE40NvuuTkj\nXBap/b37ZbzeJGicYxSNkeN4ZKC9hQ8auhdiabtlyvLSW61q1UJGX+w/VIVT\na5jjU6l4AvqdPaQvf9J+lDlQo1/Z5+w4nGCnGdhixiqFOz/neBvEWfwDRfcV\nHs6WO4oHBvvHPgwB7f/rBCYEmOZOwW9u8SWPa8iX88vEWLdxnNCqd31XvoKP\nbQLcPLuaXjVBVUORZ7waJ6Cu8hmIflD0LfWJ7KipmrHgnzwjdWIEWbIMSTyX\nxrgZkIHZPm0cBk3efA8tcjvFGsjCdvqoM0zdayp80LamBqbDUf263Qg8llB4\nzeVw+SitV9D2SuiJ4X40NTt6W5BHjmWOq8Xm9fi+XEoKgtQ0h2Bhhd15/z3n\naMl0\r\n=85cq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAVh2sxcC5j8cplbBXjGOhfP/y/MCExMC/Nj7eKeYERgIgBFJmXZUXQYOleqocXZwt3+A+aRHu83A/3VupGRxb5jg="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.6-b831a3cdab4ebe4ab4988f8f805fbf154c32aead.0_1595019247698_0.9315104231321543"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.6-3aba2da4c55aac5e86b52f5b129996b21bd13b66.0":{"name":"@unifyux/web-components","version":"0.0.6-3aba2da4c55aac5e86b52f5b129996b21bd13b66.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.3-3aba2da4c55aac5e86b52f5b129996b21bd13b66.0+3aba2da","@unifyux/icons":"^2.0.5-3aba2da4c55aac5e86b52f5b129996b21bd13b66.0+3aba2da","@unifyux/theme":"^2.0.5-3aba2da4c55aac5e86b52f5b129996b21bd13b66.0+3aba2da","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"3aba2da4c55aac5e86b52f5b129996b21bd13b66","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.6-3aba2da4c55aac5e86b52f5b129996b21bd13b66.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-FvglMBq3pfrEttn+3TrDhiFaMIsDW+n7D0/BcwJJ/WiTYNlcAue4WJaksZziD4ujRasTxbCk2fuow1E6wcSt2Q==","shasum":"cf841a3eba4a48667b3d729a345edc01f80003ff","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.6-3aba2da4c55aac5e86b52f5b129996b21bd13b66.0.tgz","fileCount":191,"unpackedSize":3019764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFZwjCRA9TVsSAnZWagAAXgcP/AqrEPwKT2KPL04J5tWy\nZY56MIKDBKyN1dg1F8ZuJNSPREyDnjKSwPMg/jawpxzHFm1FmQRtfUx/o9Zk\nRjEOCfcNQxnbqsR4Jyq4udy7oM4dZVsO3UtIm5GswGZ6TSq2mVhqvD0OGLq+\nrwRqLJhl88xd2uGQvYMoSe2+UQBg9GdfhR94Xb0TziapMDGpFk0F0xnKg4wS\nYe+2d4Z25wWm45AgL+qF6J4owe9aIym3f2HPBgNQFB6yABnu3PXnnSc9MA0J\nYO73OuUsvFdjtAZ3cm1OE6NgPftVbnC2E6vVAVhEy++bMCcOs2Mt2alYAd4O\nkEad6rkuEX4FjHG1cx/nIgUQ8vVGLystRhzFqYOwqDiVCJF6ykTmWvzImnpm\nB4+NrrE+RGudtwNdSgy72ThrHefS+7mfPxz3sYZWA22UOMaPdNLXNIXj5Q0/\nv77mSZV/iaXh+I2SzCsLUZ/fvsgHV3MSsVX6NdPk71ElJX17jcuIDOiHFRim\nWPiIyKAsVcvFszkVwBzerNF5PMfHXUwPnCpQy3R+xCP4vxvt0Hk5vC8+znT3\nPBVH77Zq1TwhsPwL0nhoVVBhKtQRJxtSrKmc2+ETUhAsoImlTkKD6gU6Pvgc\n5akoAueJphewVq8Ny6EUnDuRxcAwauA0WqQePvTs5VMGis7e+yqEV3sHrZR+\n0HCf\r\n=mzjq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK4KLBgvSLx42ADHNTQA5J0J/fsuTT1Rwk9PcyIxKhkwIhAJqp6j74iwfVmCb6J20RVdt5rFJqz8JUDiNJwzxNBmWh"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.6-3aba2da4c55aac5e86b52f5b129996b21bd13b66.0_1595251746753_0.17725049093232315"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.6-690f7c890b8467b375d7eba5f78e1e0e0af884ac.0":{"name":"@unifyux/web-components","version":"0.0.6-690f7c890b8467b375d7eba5f78e1e0e0af884ac.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.3-690f7c890b8467b375d7eba5f78e1e0e0af884ac.0+690f7c8","@unifyux/icons":"^2.0.5-690f7c890b8467b375d7eba5f78e1e0e0af884ac.0+690f7c8","@unifyux/theme":"^2.0.5-690f7c890b8467b375d7eba5f78e1e0e0af884ac.0+690f7c8","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"690f7c890b8467b375d7eba5f78e1e0e0af884ac","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.6-690f7c890b8467b375d7eba5f78e1e0e0af884ac.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-qR505Vq9hLioqNmiRDj4jFPtiO/EsstPe7XgV7ltd21tCox2bLrzxsb2TBtm3TpXXmMXAIr6E4Zw+iOZupx7/Q==","shasum":"ada1039d6cab3bb0917fdfe542dbee2c3bec6ff6","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.6-690f7c890b8467b375d7eba5f78e1e0e0af884ac.0.tgz","fileCount":191,"unpackedSize":3019764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFZ+MCRA9TVsSAnZWagAAl10QAJNvHSECJKEHY6s02n+B\nOZ5bdgpR2VZJa0modF0HAcyKzeTE5HD5F7B3NP49efjv5d1SZZVpAJ1H58Yz\nUQxv1HYIGg91VdTtVzBTtvqp1wUAJ+Cu2zkhBrrvSSK1+7IJ9yLpoO59RJrl\n49G2Luf4SFOGKYq/VZVcJ4EhbUO0xVyMEiN3utHerKO6ikL5fildUyRb0kE0\n4arOmfGjwIqJ9yJFEdHP4hNaKnh8+Ivs0J+2TCp3IehnYuwjHpwyIzGYZ+r7\n2hVYXIi76rCscKphR0ZIhSLZGsYpsiKX7ejn9bg/+tCJKMRRf5PLdnTzcYgb\nThBGVFDPs4AJQIQqVmHdyE8CXLD9OgBvXyPbrsol6Bkgcas5FFnBw7YnD0sF\n/fc11ZhpBzDibiQRAcKUJYPZgosfe2KnIFDugA5zba0X5DjClyTjoW60S0JG\nMGLBUu53ckPH63s5J5OmFO2k2UKqTByPoHPnqxZYfDDATvLNNDk+JV95tyPb\n9te/TzUDxe0eskSox3uO1LvJvmd6G4WnoZ21drTNuKIKN117HbEl7wU9mP2f\nH8VuWS14pZZnP/qiLaUc7v6K/jH8rMhiYKJ3QxjgAcsLLZzM04WAmeY5MTQA\nUlZ82fElF8hUfKYOiBCW21w0v2Hzim2N/8R5F8g67q6/FjerBLPJnvtDZE2q\neMGb\r\n=Irsk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDS8l2SbXMZgcZrXpG81PqCfwfbbjDhoMgnS770QDuw+wIhAOKgTSU2V93ijLXZETk8iEDGWBvGB4E9Xu51DMeAF2l6"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.6-690f7c890b8467b375d7eba5f78e1e0e0af884ac.0_1595252620394_0.19192539849960188"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.6-8588bd6c9251723e6d0a79e938b306f12109ff3f.0":{"name":"@unifyux/web-components","version":"0.0.6-8588bd6c9251723e6d0a79e938b306f12109ff3f.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.3-8588bd6c9251723e6d0a79e938b306f12109ff3f.0+8588bd6","@unifyux/icons":"^2.0.5-8588bd6c9251723e6d0a79e938b306f12109ff3f.0+8588bd6","@unifyux/theme":"^2.0.5-8588bd6c9251723e6d0a79e938b306f12109ff3f.0+8588bd6","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"8588bd6c9251723e6d0a79e938b306f12109ff3f","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.6-8588bd6c9251723e6d0a79e938b306f12109ff3f.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-UprKfeAgDSOGNusv3ZmVWKhbqBCS7x1A8JQHdJAzyLuafnJQEOerJC7VmSAwkVkcvlWNSxQfzFw/IOMUkKv10w==","shasum":"a6a8f1e023f17d3983ecab1c39429e0d3ccf2c0b","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.6-8588bd6c9251723e6d0a79e938b306f12109ff3f.0.tgz","fileCount":191,"unpackedSize":3019764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFaBGCRA9TVsSAnZWagAA/x4P/A8u5rJ7hTkcB5TU6P8v\ngVNpD40kr+E3sFJT6oo7lYHq6uBKUlynuZmRU+4f20K35CsunDDaUecMLX93\nyzZDRM9xN1Z+m9SQl2KldCd0W8Ql/Nk3Mn6UEHoAeE6KeWtsY15/5xQB6ecA\nXC+wOBtRoa7e+R/7Rh/hM7e01MaPA9Y3mvrL5fMhifS6bqJyeP1jDcEW7xek\nEKMaLsdQA+229sYSVtymHM3raWtxoIK9LblEc6dMVhxdZbBKXg8Y6A9xz9Te\n/rf3dVJZQF6efJOZL4gmAwqV/vRATzeM2nTTUjaPcDoKyv8/JDRs8x8F/avN\nW8h9cyg/rO1wC9ROrxCk0CvdX/fGUQUeWdd7whI/BLtQlRfUnkWqxb8DAIuv\ngfUO0Mhwv5IT9QfMHh9aq+67OWwL9rCnKgUy8Ks76B3OSlIppQzEkRM+MIIo\nX0TaRCCQEB16/iB2bRl5knF8kieRtrK29EA9ueXawad699wFiByexZhmtxKn\n3vQFZ/Nf8FNeeNMp4HfVMBrJua/LNYaQeQkG8OAnkAkLn5XYQxIhE4Tf7/Xh\nMEesdzkUW0vWSiYLCF0OhiXFKgZdy+o4KnlM800sUyfW4kYFSQJhRctH5kO/\nVtaLPrfAegCPJuG12zgI8B8ft83T58FdWQu3yx9BtEfQ+QiLPz2vjvv3piGV\nTw/i\r\n=4d6u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWLt3m2YhqErWclw5k3ONWuJQC1mg98uBCIvf3deTSQgIhAK3vUq0orqwRRp6XdzYreMb7dON90kqt2G75twy0xsB5"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.6-8588bd6c9251723e6d0a79e938b306f12109ff3f.0_1595252806361_0.7290207992853406"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.6-d6f55a7a5547699a53187188a53448aaac04ca09.0":{"name":"@unifyux/web-components","version":"0.0.6-d6f55a7a5547699a53187188a53448aaac04ca09.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.3-d6f55a7a5547699a53187188a53448aaac04ca09.0+d6f55a7","@unifyux/icons":"^2.0.5-d6f55a7a5547699a53187188a53448aaac04ca09.0+d6f55a7","@unifyux/theme":"^2.0.5-d6f55a7a5547699a53187188a53448aaac04ca09.0+d6f55a7","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"d6f55a7a5547699a53187188a53448aaac04ca09","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.6-d6f55a7a5547699a53187188a53448aaac04ca09.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-gJeKpmiW7ot6491wpU7spYKQugTVz+pUcwFuFwWe9i9/EqSaBbmh9v0rHJubuCj0/SYxcvfF5YLzoq9R6ATm7g==","shasum":"63938ed9034e9d6ee4ec0a12c3a381dcca198145","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.6-d6f55a7a5547699a53187188a53448aaac04ca09.0.tgz","fileCount":191,"unpackedSize":3019764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFayRCRA9TVsSAnZWagAA7WkP/22i4z4B1yL9BJYp8kQI\n0U7MfJYXn1wtfAX2ffoHN/5cX3vUDTVfdlS9Qr3kBMacPtbbaJBhJuloPTx9\nTFVAySvKuutmeADmnvEpf59zYWt2ctB3VuxfqXh6YBumDzH0Rw7UvgbGSEOd\niUn7GitQNvmO/movIXBt1pqndvTiI6Yuu/wzmasSPdMwYBIi1lJh1LrsL+eT\nOlhaapgSxmvJG21YwsVZpt2B/q4whcUiaNCuw+9P5M0gbYEoIVgepuO3P5uj\n48s282bEihPGQ0z9fwJQm+nmbCmznpT0/brqygkrqX55jHlZDlZMpLbiZ3om\nyVhSdl0kgX+5VHN3GFshKlBczoY1f9V4xeTfOGlzKHxSSfi5ymajEttfVeDm\nceCQXSn2b73psK5Ua35fJrtHkhN3ouxdkMbgkkoD2yxCK2U5RHxFIZx2nyAq\nuyq3gq1FFEfrHFEsREcHhom1IhcsnxYJP8kD6kG4UOF4JoPjIebL3HEeaFua\nPtIgrxIOdFKgF3VPhAW7+eI25NlImSZ5z+zz6nWCd63OLkQiwNFm2Zod2WUh\nZgY2e9Us5YCUbQmvhLCvAmPWJstOLF4Y3cs8j0bFxQEsWZD/v50YwBVa1APz\n9Xu9CzuhQYMMIHUEd0RhOSAAmewsr1JS7O8jeKkYqRs7ol+UuVIZ8ovlBS5x\nqc/i\r\n=4Whi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWBZiBUblPYBgACvBa2Gf1Ez5xMknCuaZ9ydpnoP7IIAiAS0lzXaM4OZHFJ7HA4HnlAZAnoPxemZR9EAlWd2U0pfg=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.6-d6f55a7a5547699a53187188a53448aaac04ca09.0_1595255953445_0.2165327905344021"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.6-6e773c1eee581dc2bf7c057ae80c20628d31faff.0":{"name":"@unifyux/web-components","version":"0.0.6-6e773c1eee581dc2bf7c057ae80c20628d31faff.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.3-6e773c1eee581dc2bf7c057ae80c20628d31faff.0+6e773c1","@unifyux/icons":"^2.0.5-6e773c1eee581dc2bf7c057ae80c20628d31faff.0+6e773c1","@unifyux/theme":"^2.0.5-6e773c1eee581dc2bf7c057ae80c20628d31faff.0+6e773c1","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"6e773c1eee581dc2bf7c057ae80c20628d31faff","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.6-6e773c1eee581dc2bf7c057ae80c20628d31faff.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-j+UPJEUnhDn712kCJDJMB/IcTFnzV5nA/AMqRtWVfkkznWBVu5NBTvU0xfdNNrPBpuMPjjuofpGNSnLumt9uyA==","shasum":"a7fb0e6f5ccdb6f7677e088088822c0787e794c4","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.6-6e773c1eee581dc2bf7c057ae80c20628d31faff.0.tgz","fileCount":191,"unpackedSize":3019764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0UTCRA9TVsSAnZWagAAw4MP+QCjO9TvCkP5Crsoa3zg\nl6FitEjlrpdkeUg1xN6MWucZOkQpBfgifIFP7nBNslKcG+4KKoflVsBL5689\nvWcQGxLT9359OUPZhDyHxlwiHojHd8iVP0orD6qOXtpKRVIliCU6bVOdAKt7\n7aIo6Pt44JYmyjImaajtOGeXibZj6nJAkpyGhoqY4Nh+ToVt9EBV+fd8f2Cu\nJb1n9sfIraAYItJtCPkZVm35QY3LUce8kCbcrDa9DZw2gU9xZrNin0ouVfHa\n3rYDrMAxn5QSCIulD4bmREoDF25mDRuPRpGAR2lrDoXjfj2d+8vyjyz02H94\nXy0VXhTcuxWF2eqEVK5w3OXzA34QVzSbHRw35UuOXFl2fweSXMCTQclGk+dU\nY2kbNjWLAA8CBl4MfeIR444aQJN5SqpxFN3UV/sVVf4LcroywmGt6Wlq9Lks\nSbLAs74nW+uxLoMDV+gGHg8NJgBDS8teZjlY+WyJnwDpE6yrx+alClveu63u\nKGqgFHH7EZPy+zu0ZuhPXBy7rguvHWFCt+oOtJtkXJacEuiHHHKWWgcShcuf\nwFI0S39oABxs5GLZiBQzTxptbrRXScix8OvH3ed+ikoh7BXpLwLKzsp5dqdk\nmRMmETOxVHeGWDwYZcNit5zIlkOUd5+PNuVZRnZSozAIaTSoXTIfkdW2M/iJ\nDCke\r\n=tpo9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDT3dRBl/Z+5bLYFRqOdyCbV6hgN2tuOCox7sNywy6SlQIhAKTYplERzI0RLfAnlJKrSQESTwS49jVK09ma+y8bGC+Y"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.6-6e773c1eee581dc2bf7c057ae80c20628d31faff.0_1595622675159_0.15559863826147802"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.6-6a969288e67d9103be7e34303a038ec0fe53034e.0":{"name":"@unifyux/web-components","version":"0.0.6-6a969288e67d9103be7e34303a038ec0fe53034e.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.3-6a969288e67d9103be7e34303a038ec0fe53034e.0+6a96928","@unifyux/icons":"^2.0.5-6a969288e67d9103be7e34303a038ec0fe53034e.0+6a96928","@unifyux/theme":"^2.0.5-6a969288e67d9103be7e34303a038ec0fe53034e.0+6a96928","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"6a969288e67d9103be7e34303a038ec0fe53034e","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.6-6a969288e67d9103be7e34303a038ec0fe53034e.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-mXLNiYCKfORARqkmS2g0A1GC22u7/vODIDeDLyk98NZwmufJ2xvf29P14zufmr6FAy4sb7SNrpvobUAAqUt4TA==","shasum":"399783103234b83011eefa8c01bb81437898d9e5","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.6-6a969288e67d9103be7e34303a038ec0fe53034e.0.tgz","fileCount":191,"unpackedSize":3019764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0e2CRA9TVsSAnZWagAAWsAP/jZv1rMYWo5t4RB7GESD\nzItp5ZYD8NRh7tKBu7ST4E//4fdWls3BtpSumSdjs1R8EoHhFg1oTAlb1nO2\nakym2tL/lYF8GXB+v0nANnHdhOkUs/yJtbMCC9FSyPWNS+o5kf5I1BRJ11fi\nuq8Xgl4cO7GYKkZhhMBJBvPwjYnGJqs575hOMnyCOk2GzbYHpqsowWRAIW+i\ntWpQ97zsh5ILwlD2JyyRP7qMR8Bm7liEdKN5xBRZdrBoOjk1aHPUd8DdTu7W\n3QcHIelEuzbklqgG4B1Un5lV1C15Dceq9oiMMojWTqbhqrws0kNDXQGW4ogj\nnzf5DWV5IvmwOlOxnCF6CELae+Lt8y38q9FohzleV0FlsRnXvsxgKNmcLVnI\nlaZh9NdcYKazWVWnk0+vqbnFBB3int5NVZI2rea65oBzWwLAaofobtpZD6gp\nmvP0mEuDzmQtcjSaB8GHepW2xU/cwym1xMPJMI8pwmnCRrQPI7jnlv+f8tzP\nVI7OSLd2lwaI6D4RCDMbepFgK63riooAdUMcEmKzULw1aE0ML4tKbrD8BHno\ncRF2ZhVB/QKiUlYXitkRXjn0cHt1y4wDQQJFU1q6rQvWQyDxLuvjQDlalapY\n9wyarod4/QBD7y3JHaZJknL0nRn6q3coVjwfQcXjIjwF8H5nDNN3Alz/QQMv\n/gNQ\r\n=ESz7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFGDKhIrDwMTGAsGwBhIH5L4+iQsPPxJzYREMrtYzgXeAiEAvbJeGwqtbD6jtqgeE6HoOtFWZqW/265JbAELf7Q8WA8="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.6-6a969288e67d9103be7e34303a038ec0fe53034e.0_1595623349539_0.9795830818730726"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.7-f215a33d48290d66b1dbbd11dc7a13b11be50a14.0":{"name":"@unifyux/web-components","version":"0.0.7-f215a33d48290d66b1dbbd11dc7a13b11be50a14.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.4-f215a33d48290d66b1dbbd11dc7a13b11be50a14.0+f215a33","@unifyux/icons":"^2.0.6-f215a33d48290d66b1dbbd11dc7a13b11be50a14.0+f215a33","@unifyux/theme":"^2.0.6-f215a33d48290d66b1dbbd11dc7a13b11be50a14.0+f215a33","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"f215a33d48290d66b1dbbd11dc7a13b11be50a14","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.7-f215a33d48290d66b1dbbd11dc7a13b11be50a14.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-DjVbd8vP53aCqYcSwOKRDOppDky6C0iUmilqBVXRb+rURShv/plvNg9r11mQvpTX6A/+Zw/OMF+VXeSd6Me/Sw==","shasum":"ee8e1c41edefa7481299133249e1df58dee77b5e","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.7-f215a33d48290d66b1dbbd11dc7a13b11be50a14.0.tgz","fileCount":191,"unpackedSize":3019764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0o/CRA9TVsSAnZWagAAmLEQAKFzNWz+7IPu7Xm0cu3p\nVm1+ih4Yi0FoyHeLwBz45hOIR2ddhgahDKJv6+YD+lVGwP696ZPsearzbsbu\nMMpZklcLNVVIvMxy/8wzShbBcxCZ9WAXD5c1mDO6TgSuN1srVX93WQzRf6iy\nJqWiuwzfP1gZ51MLfR/gzMJAhvs5Fags+srGzoBIXvkBm71xz5Sm1CQaPrKd\nFCw1XHApVm2brTM8co84GsKxM5eLrGbVIZQiZOFfNGLNRp2woREjj5GuM9cE\nCkLDMC+t3bqYGGmxZYsZ725DIK7XhZ4hOrjxAt0p3AKcDr/TB69m7IWEEweh\nr1SBWcvlt4uisFDjFbi3dwNZ/hfIPl/anrqeHB3kq8bplP7RQTqjqufR+T/e\nRSX0m5t6CUD85BnSyw135sGzkRhd51thaU+M+88BumHlFOvbbbxUDb6wqYtM\nz4rHArBSTh1cGne+6TqBP+kRg8B8ADenRiG08CWwEfGC7sOgsdkrkp8MqQJ8\nDPm5E2drjE37fip+KK/w+TER6OkTGSKMlZ7hk67eKblfwmgxI7xu6dpg9Xbq\nR0zm65nw/NEonZr9YqbKfRFmy6MVs1/IYhBhiXq9TiFRJW85n9LFE6e2uZXw\naWQ1nF3BAJZeJZwYU+zHQo06F42X5xwe+ZZ+7QKByTCLqBMEic/2nhIFy6nn\nSuEZ\r\n=2nXO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6wKPM2H43QffEKhITHbwfjidGhN6s/MkPv3gfxhgHNAIhAK1q4YThdFQ8e/9SAx9bCAhMGtHBh2+rOpFXpzCMtIII"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.7-f215a33d48290d66b1dbbd11dc7a13b11be50a14.0_1595623998943_0.6884586457878508"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.6":{"name":"@unifyux/web-components","version":"0.0.6","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.3","@unifyux/icons":"^2.0.5","@unifyux/theme":"^2.0.5","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"08078b73c947a5be6ea6b7b35dec76e5108b040d","_id":"@unifyux/web-components@0.0.6","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-lN6C0yG4VP9/qCAYj0QAMhGjisyHo0vYQejl/glXWEvTYjeWSS/0Y85bKien4SxpfYhC/lX1iPXzk5Rw3Xl5Xw==","shasum":"b90bd1c1aafb2aad067b462145152f65faebb6a1","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.6.tgz","fileCount":191,"unpackedSize":3019560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG00oCRA9TVsSAnZWagAAdIMP/j9YGpuTg4PblVmzpYJi\nk9tSZqC+nSw2LxB+Jl4neTaKPk+2k5NJTGuyA70RCxzUHxlfvsD/yCdJcgqX\noejGX8oR5bX9CfJBKCpddE/FM7Z9cKt1JOYLifTLNHtyklMk8gWeOhMF5Tkm\n/o7upgyGWVlMkLw3JfQysWiQ1mfjyjFgXOTN8D6AXVSc8joUbomQvqIGD5bl\nbxnS+yaPBfa/Tz8l5bbihC+b1lOgo+aegpYkENunOT7EqtFjR+gMlXlm6lJQ\nn0ky5srsmfnjSPHT/QBMdDRSF+AWeEx3Yls2KsrEYvJSBfFF3eh0E5rKH6v0\nbgyk9Kkl3NqDsJcS83fNP7N9Q8v2CrsdCjV5ghPMZE9wxL5xNvAKm4KC/m/U\nU+duc3G3iQ/cI7FOsPQI7uhB1Hdvz6WJtwMWR5kRTCvNrbOobFveLSr9KyZO\nYU9qan4pzZuYuxCedLchCnkIZv8X03piIgsSyyek3BTPBERazpXCtHsRFQhf\n3dUUrSAnYPSUi8U6GEvCyt6u/CjrSJ2mxPjGnNXIVaQV2R2EOLVx31RAMUKs\n10R7Bk2+v1S4fjU+aFvY4eqL58MyB9A4xMhdtJ6NUfgTg6xPTiqRijQJbL6d\n+dSlAxYiHzS929Z9xbtAWuJ3M1ok1QrGkXb6/R7kquSRTWbWtBTzGoNQd9z1\nb5zG\r\n=EcKA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHo1C5k8g2e8ClCUcJNeD6V/7DaQfBLvXE8719ThZImSAiA2tyx/mfdkzBX/OC/kLX3d/EmKN625C95PFF9+AT5pJQ=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.6_1595624744111_0.9248554578219095"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.7-7d660efb2fd6d0be79f3b89a51708c8b11b4812e.0":{"name":"@unifyux/web-components","version":"0.0.7-7d660efb2fd6d0be79f3b89a51708c8b11b4812e.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.4-7d660efb2fd6d0be79f3b89a51708c8b11b4812e.0+7d660ef","@unifyux/icons":"^2.0.6-7d660efb2fd6d0be79f3b89a51708c8b11b4812e.0+7d660ef","@unifyux/theme":"^2.0.6-7d660efb2fd6d0be79f3b89a51708c8b11b4812e.0+7d660ef","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"7d660efb2fd6d0be79f3b89a51708c8b11b4812e","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.7-7d660efb2fd6d0be79f3b89a51708c8b11b4812e.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-iIM6tWbwDdelUpMTY89c9EhpuBq9Kx0ROLAeNZgT/TT9GiV+e/05pwEFZjrEUXBRq5dXXLNtnVhwreq9hqRIfw==","shasum":"1d1df83ad7f416b641e2b3bb3aad34fa1e2e23c8","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.7-7d660efb2fd6d0be79f3b89a51708c8b11b4812e.0.tgz","fileCount":191,"unpackedSize":3019764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG05TCRA9TVsSAnZWagAA+/YQAJLUAlnSqOFSGrvVWZZ0\nffCrlVwjJmf7jqomuXx7qZa5lnP7RPsQG3w6cbgneRJ9hZ8qgBTjYMOeTdGg\nyAr6BXfzevdp5R8w0+PRGT0MWMYr+Tw8AU/ES4PNtIzRLDmI96KlZMj1fuwk\nV9GmqI4HZb6p1VrRf3JeIcTCsD/8/WCU9NbvWHjDVr1SaGKJQIGgMdDlmoN6\n55AQSoud9yASRrqnAAmnYCm/TApO9pnEvzXkeejb6CkJxwr/2/ydRBYKdsH0\nGiUzoJcicS7wf6Crmu8lisPTxhZpMo7Z7WMNYvHrthbDgYn26ziz8DG5Hq6d\nRdP4dleizPe0T8KiuQM6bKQqi+ffy7i1zYBD3/H/cwnaB76MIiDSRjvu77SR\nI4CVvwq1XNbtyOZxf6Wyf+u0yLIiPaXsHa3gCvMD1yWxwNiUh+AiQG0jS0NQ\nlJ7CuYwOuoxzQkIsm7VaAAP0wWbRGZmYCZi2SX+xGo6o4/Qwk7wabfhdFIEG\npeNAGTPfmtlM7q0EQwTpsn07rqZtF92stkiNDwrkCua1qnyXV79KBobwGkr1\n0u6oTquJqWttmSmDehpbnNYIaKhHoq5wwV6qivaOGGfGsd+mvwKF8rcfzzyb\nQeKM6as5z49kMJfDNzq0vcDLmsS1RUKeN3xFHFHy1QL00NW/fuL4ojMJL7w0\nlVvl\r\n=kTKa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCc+fm2WOo8NQNn8c69gKAxsuFRiE2Aik4cA+PNDGKwQwIhAIxllc32Rrz8FcTeSdzqWq5Ii6E+dF0M3LMo+avpK12u"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.7-7d660efb2fd6d0be79f3b89a51708c8b11b4812e.0_1595625042784_0.5480668526299084"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.7-faa5136dc55d35ac62428c7de5c99afa813a8ee0.0":{"name":"@unifyux/web-components","version":"0.0.7-faa5136dc55d35ac62428c7de5c99afa813a8ee0.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.4-faa5136dc55d35ac62428c7de5c99afa813a8ee0.0+faa5136","@unifyux/icons":"^2.0.6-faa5136dc55d35ac62428c7de5c99afa813a8ee0.0+faa5136","@unifyux/theme":"^2.0.6-faa5136dc55d35ac62428c7de5c99afa813a8ee0.0+faa5136","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"faa5136dc55d35ac62428c7de5c99afa813a8ee0","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.7-faa5136dc55d35ac62428c7de5c99afa813a8ee0.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-LU/Z3GiEK4lgjhbm59tZKivC6wIHZGfOtsAmPqFu+xUmQaTabZeKgLUqJnmsIC1LfLujr0exqjuhZskePjL/eA==","shasum":"39588d8f1d5a4b780df5ca87cb42394095c0b737","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.7-faa5136dc55d35ac62428c7de5c99afa813a8ee0.0.tgz","fileCount":191,"unpackedSize":2993008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLWgTCRA9TVsSAnZWagAApdsP/18TLiHK/4eN+ID5l2fF\nz5Zdp5vpFZAac1uAyuVrRKeQ2YoE9MNmXEr57YqfyhJ0DC25tN4Cyc4mSZOF\nJLRmYcrAwaazo9+dbbBa21kN3My7HpN5KdojINFictJuI1HziZc2SILSYgOR\nir2EYv2E7tXGdg9GqKKIqwhR9moysEpV1khZXO+B9l4m/yldJNS4/8/W378p\nreHklRs4Ox5Y1hgS9RE4hphiIRw+EcpxozzlxHrnSCu0hgr1L160dNR3dC1G\nRj/+3B4R4XWfqjpjzuhlu55fsr0sSoA0e5zMDbjGkWVvZ2iPrQDH/Jng2MT9\njoOqDArvb2Mpbr1EhhoQkTBOL3c2oJF9XxYI62XNWvQ9e5LTUPvw7Hs0HD/V\njaTU0i0p0zDvpnricnD4UYQrKVRpH3nUKRj6v5G3KafxM+MPyUGrqLXi4gtO\nDiNri2FnBPOlUswCpVGHdHS8udDwpC3nhZ0olfoKp0Jd3LE/c+5XVVwv8WTR\nBc+WvOIsOl2GahCuplUyS4Vf0wHA5QS6jeeJIjPNQS4O37oeOHIv2MeyWzhU\nHFPp7J+QhA/iwqjAuxAr1TotOX17OlWLdh11xp2jLPHu6XX8z9pgt+HvkeC5\nE2iGP8ichmBn96J3TMItMEFUn4bFRGjmVge+C+/TWCopEtRc2+i0fAUUYvhf\n3fvb\r\n=7/WM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDODsQO3TCLwlxWgv393QAXVjSxTm0/kxCOm7Qea0LyYwIhAItdCOg/1ZxUQB4HKp2ICPaFYqCMosXxtZDAX+703PqX"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.7-faa5136dc55d35ac62428c7de5c99afa813a8ee0.0_1596811282574_0.7742442870598667"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.7-2cb223cf45f333b26add7225fc106dd928649905.0":{"name":"@unifyux/web-components","version":"0.0.7-2cb223cf45f333b26add7225fc106dd928649905.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.4-2cb223cf45f333b26add7225fc106dd928649905.0+2cb223c","@unifyux/icons":"^2.0.6-2cb223cf45f333b26add7225fc106dd928649905.0+2cb223c","@unifyux/theme":"^2.0.6-2cb223cf45f333b26add7225fc106dd928649905.0+2cb223c","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"2cb223cf45f333b26add7225fc106dd928649905","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.7-2cb223cf45f333b26add7225fc106dd928649905.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-MRmm5IJ9U9m32ZbNpga4ylQWD4w9gPB0U46DETru7L1jG3yvGy1jORqDHJF2nk5l7VBC39DThoi7NkoBVIxVpw==","shasum":"a2ea66220aa25bf6750e4615cbc71d197c809a25","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.7-2cb223cf45f333b26add7225fc106dd928649905.0.tgz","fileCount":191,"unpackedSize":2993008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLWkpCRA9TVsSAnZWagAATxsP/jmnAMMTpKe6oO9vg38h\nPPCh8XCmDZjaSOR+xjc1KpHnCeSTmZV/fgDZ6fPd5LnTFR8TP46xIaMqyfcH\nmUWRMzUDdWHBAS54bI/8+mkH+3feGpyHqXLiLrXXNxETfl7tDP3QJwm83frx\nvGJrZuLcCzZaQBG6NCkFNque2T7F9drr4Sa7lPxD6QMAtg01SAJt2mK1uakc\nIpUyv64Cews424NA1A7It95L6WfB6sMDOqaVRgmsePXo7GVEpETZ6fqCAuOn\nAQUDtUeBGWNmgS+514xnT8g5y9tEpaRFGh6LYxR+j2AZ+bN1fVM7nxs2cll5\nn6iAGFOCy2ZuSx5mlSXlOJIQBOmKyoIo2WI4MShhetar4QMzxS0USmmLkJV7\nr45ysfa/xCL96o17t0AgK7HjmPpk845nfNHw4NuxptGVAFkE6nY1EsPCGXmL\n63gqlwuQMI17h6o0nxkZoDY/FmSImkcyTCD8WU4n98Mt7Oke8ynxaruDbgU+\neskouUhzusOldTjfNPbj2JsBx7ZXMWV9zlL3ErxAjos8njbp0nhYwWQpl1Ll\nbXAZbHjAQLlPh8UTIzpPvFHKVIVCP3g+Nxl0I0p1Chx9ElDGUDYgoU5pFCv1\nQEWdiiseGr9xDkBjf0eA5DEvZaBw1g5m0TlsxhReJgIxunwm9/xlRX1U4jec\nHgCx\r\n=eLi/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDd1DZ7nz4h/I5A36oDC5R3XYSS0ivsj6qLjHLEXm6AwIgAuN1v3hhGaw9N0RYIr/J10AEOfFLx5XwfvPZSV+4ias="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.7-2cb223cf45f333b26add7225fc106dd928649905.0_1596811561006_0.2639188740231435"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.7-21f5a423f3e03e162d997ca54280531230f5ccb9.0":{"name":"@unifyux/web-components","version":"0.0.7-21f5a423f3e03e162d997ca54280531230f5ccb9.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.4-21f5a423f3e03e162d997ca54280531230f5ccb9.0+21f5a42","@unifyux/icons":"^2.0.6-21f5a423f3e03e162d997ca54280531230f5ccb9.0+21f5a42","@unifyux/theme":"^2.0.6-21f5a423f3e03e162d997ca54280531230f5ccb9.0+21f5a42","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"21f5a423f3e03e162d997ca54280531230f5ccb9","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.7-21f5a423f3e03e162d997ca54280531230f5ccb9.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-dxdk8dWgNSXsxO4TESI3hRph71uIbwo75sqIpsQRawPlXlgDG2CZDYBVZjtVBak9fdkbMjXg7wBFFGwX9Ndp4g==","shasum":"7b3fd4197d3f1487ff1f9009c9224f3f6d3252b8","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.7-21f5a423f3e03e162d997ca54280531230f5ccb9.0.tgz","fileCount":191,"unpackedSize":2993008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLWvwCRA9TVsSAnZWagAAd5AP/RaqtsSDXWilQziCFkKx\nh3FApG8Vax1rFzxg4sv1pvbN7LxsdQu9Qk3lbSrYdsJ7PZMcRj+5NkCVaPIP\nkfAC8PusoaDiO6Ieg37S6B6OoaCi5+Gi/KU82aVVoiVeCNgcxn2JOvQmOch0\ncioh5jctHY24SNBpAFH2gC2rvve+e3ksqpzXQGYzu8Gm9RzZ0W8QouALQg2t\nyzL3C21ju7S+htQeASmP3f5X0GjFwZ8EGdT0C57T9s3F9CM1Z6IITM+0RKOQ\nkHTFSmODvIoFW0XgSstt0+tHrcSF28BkNEtrMhrNOoSaBe0hwpyFU7GFolnx\nUuUG/YjL302T/tbXiU2tmdCn0KNa7ZbEtKDJm7KfneputOiTZxuqaFo41SF6\n/Wb2kTE9i1vLgjE/4VlaSmAlrDsiA7zCnW7yjyWZxDhP562OXwrr6uuMqTbJ\niSwDteZ/kB7sSmt/b0KG/bWp/y3U275IaYbDKn2zLK4sn3v+bUX5X+PsCtYJ\nI+WrE0cNjnOBbx8v71AdYyOkO2CarWUy86js59eIjkBh2we6SHfNE+zyzTsp\n5jV6q6fOIGOQxzOVWaFNMhnP1ghfhevnOwk/l4yShs5KNScFMBzySlPU08y7\nCiWdKVs6AViPGwJEHOx5mZjnvrmwc1MtWRX3QrSexyQNUiZQZBlI4xYQa4S9\nI3a6\r\n=7/zL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmQqQyz2U8QmR9CfM9xSTzulSGppwod+9L5IZP/rsWOgIga+aCzd0c5GAsy9F7hO081J7DYK8b7i+218cnfKJOHTM="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.7-21f5a423f3e03e162d997ca54280531230f5ccb9.0_1596812272063_0.5596913532369745"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.7-280c173efa6b8c4a68fdf45acceeee4b3a73cf8e.0":{"name":"@unifyux/web-components","version":"0.0.7-280c173efa6b8c4a68fdf45acceeee4b3a73cf8e.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.4-280c173efa6b8c4a68fdf45acceeee4b3a73cf8e.0+280c173","@unifyux/icons":"^2.0.6-280c173efa6b8c4a68fdf45acceeee4b3a73cf8e.0+280c173","@unifyux/theme":"^2.0.6-280c173efa6b8c4a68fdf45acceeee4b3a73cf8e.0+280c173","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"280c173efa6b8c4a68fdf45acceeee4b3a73cf8e","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.7-280c173efa6b8c4a68fdf45acceeee4b3a73cf8e.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-Ivcsfc7F+e+6OLGChknSrfIhilFiexlXmjWMuTtH7rjYFlqmTJvJLAfR0TG06VkwmW53gGnti1f7z4L1BKGD/g==","shasum":"570cb790d4d6fb19d39864ad82775deef488699c","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.7-280c173efa6b8c4a68fdf45acceeee4b3a73cf8e.0.tgz","fileCount":191,"unpackedSize":2993667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLW7UCRA9TVsSAnZWagAAfJQP/2umHuyc5FFzyopr8now\nFxZFvqjn9fNHW4bN+HE7dU83BppHaXb1EsemICvvoBuWgLuHuj9Xm2uVVbOc\nfg1u/IAq0XU0fmU0h4ku+ZVreb4wV+OkGzICjhQZMEIV/fnPDU18S1refaJ9\nzjPg+lO8E4Te1ujZwwpkcTqym5T0H7ZX6X63wH0H9nh4G9x8HWqp6Ajk8KjV\nWDWfZeXcC8UQ9tPeGK+j1nDF36E6hkIT+WiAcLQg6oo6FBJzy/iHOGbc2kOe\n3gymuGueLN2aNWokc+y0IxsSU4J/66bFDGLdZNUNw8ikunefDnaw0yxUXaUt\nKJgosXPkkR6kScs3ZVYPsoyU2VpEK3ry+1UGYHNXse08okE+XFKSMDx8N66b\n5/ET61abysa8FeqXyV+ZmFrkydTm0ian/saqvPqKD9B3DkJ9YtTQVv6HY+yI\nOoMzZaxUL1/jKF05hDw+IG2IgD+yS8QXPzrHApMHDaTXqrMy3/QRz0i705gt\nfyDMx5EsD5tKd6Poi+N67caDVgGNxXKFDqG/YU7R0bu+C13MJQjupT5O66xI\nrJybw+ViBM3DuRe6nBcp3igaeZmFbzaqwA5dc6eM0XAqsqwnx4yORdHJE3lZ\nVxeR/1anqZ30t+08ogNmUR3LXC5hTK2DYYSqRawMod+jE/alBEd3i/tIuccG\n35Bb\r\n=/K2F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUPhXx9AY9MCxKHtK5DbB3clssKbbHfndl+Fqmld9KnwIgVq8OqKiz80hQOsr9i3I8/uzL9r6MoyMTgr/LhdMHk44="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.7-280c173efa6b8c4a68fdf45acceeee4b3a73cf8e.0_1596813011442_0.36111656696561867"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.7-4e5e1d01c13b430e3837b7c5db4c8e759f7aad35.0":{"name":"@unifyux/web-components","version":"0.0.7-4e5e1d01c13b430e3837b7c5db4c8e759f7aad35.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.4-4e5e1d01c13b430e3837b7c5db4c8e759f7aad35.0+4e5e1d0","@unifyux/icons":"^2.0.6-4e5e1d01c13b430e3837b7c5db4c8e759f7aad35.0+4e5e1d0","@unifyux/theme":"^2.0.6-4e5e1d01c13b430e3837b7c5db4c8e759f7aad35.0+4e5e1d0","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"4e5e1d01c13b430e3837b7c5db4c8e759f7aad35","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.7-4e5e1d01c13b430e3837b7c5db4c8e759f7aad35.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-tthnRjPdEcBr1e1qNkkIJeJ9RiYZ2PFp4y0FuEXkxbtM8RNLtWS1HsLgVe9bHySsiFdJAOT72HCbhS3EN8OntQ==","shasum":"99a35977bbe162cb9b5e634497d0ffd58b05499d","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.7-4e5e1d01c13b430e3837b7c5db4c8e759f7aad35.0.tgz","fileCount":191,"unpackedSize":2993667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLXJHCRA9TVsSAnZWagAAQC4P/2dAIbjLruO8o54mke8s\ndV/K3etHDtVi70rhn6IYfqZ78ybof63Nw+2aC9Puras9oh6R6CHlcme6K5AK\ny5n6z43xxTHGa2M2zjSgYYSUo8BBkLqCuE8YZgoGsXLssf92UCUgAKUDf4hb\nGQNQH9qauEcVgVPnVkWli6iHQqPj0vDk+cGvJ3rc/oMU/okpDOa+TOM1Ugm0\nRrCUzqwmjP5Dn0/9FVC54oUdS0vOCppzNMY16+IAAUOj9zgfZUGoyvs8J21/\nCAcVlvtvKEFJ2juOOhqf9O+HMzuh+/ErN55G1PIouo4dbJKQBHK0+t9sgBZE\nMxP4SKAjiMkwn838uBy/luWSEU6nC4KQbHre+mr49Z40d9Jo7IvlZJiIMBMc\nQ3ixZDQHaqNnhoagj6x9aU+1ucqULo2z5R5Iz2yaojV1hgbmZrrV4QNNbIok\nbRo5pbrURn51SRdbZ71uCujH4CYyj0RaDensppHKA7e4ECscNPfTKz6xEKma\n7w9KgfyP+Z4IdPI2kCqw3nQLTGd3w1Fp7EWDRJEhmOetXoTgpl21dJSXZrqg\nxb45aUIH7dEQSapwZ0UmSV9OXuaFUSPKdi9A3t5ZUG9OvA8dCfawPZhT58KZ\n14L8yscPn8Nfus9PWqM29jtaNz7mVgiVy2kj9+FzrCUsrICiNJmhY/1VoNKG\nL4jB\r\n=phCy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKqmC0iLjkGlaHSnPINF8Sfsl8fwDWVeSxpIr8gep3cAIhAN0NJbvagOZPhfi91y/UIAuVpEVj+X7pTMWq8w5ghhEJ"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.7-4e5e1d01c13b430e3837b7c5db4c8e759f7aad35.0_1596813894930_0.11942590343552606"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.8-032a367c3e5ce02e6f02d4787d4a9b1c003fa09f.0":{"name":"@unifyux/web-components","version":"0.0.8-032a367c3e5ce02e6f02d4787d4a9b1c003fa09f.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.5-032a367c3e5ce02e6f02d4787d4a9b1c003fa09f.0+032a367","@unifyux/icons":"^2.0.7-032a367c3e5ce02e6f02d4787d4a9b1c003fa09f.0+032a367","@unifyux/theme":"^2.0.7-032a367c3e5ce02e6f02d4787d4a9b1c003fa09f.0+032a367","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"032a367c3e5ce02e6f02d4787d4a9b1c003fa09f","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.8-032a367c3e5ce02e6f02d4787d4a9b1c003fa09f.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-V4wL78uUaKOJPI9oWVAEFIH8V5BEW2ONDBRVA5vEyH1xd8KE0W3HhbSRO0hxzP61ZJE4nvRi53qREZI/pidc0Q==","shasum":"f4d9ac3c276bfc1bf5dbd9309e393b51f3683dea","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.8-032a367c3e5ce02e6f02d4787d4a9b1c003fa09f.0.tgz","fileCount":191,"unpackedSize":2993667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLXvkCRA9TVsSAnZWagAAztAP/jBVUP5ZGosslZ2D44Bq\n8+cMR6aTM/Tym8TEIM1NK+omWMbOosQXZ8agBVlHoUXpjmQR3FkMRjyh7ya5\nv3q7d/8gYSht3rUFD2iEDaa6SYFVPbbN4bdWAdB+LEDxfhisho8bDZT1wW8J\nqmZ9cvAOdRjMFTtUv026enKnCd9LO2sx5i15z1bT6g1awYaj25HdNyg7HzCY\nkq7PjEbZMuNTL55sYgQsb5ShZIizO22QjX53cnB5RXknvW1PwfUSnEVBVdja\nA9Gy8iv0MEw1qFE+fgeBvL54rJsdCsb5QwDHa5m97LE1L01Xa9mI3ZvBklIt\ndQmft2/1WlwIOFDxgHYlK+jXmTu2uoZLGjhgor4qRj9/yQCR9+2pkmFLttWU\nAJzthJMtlfZwlkDABYPZQe19Wa9IAhiV2SScD2s3e5lizpvlTRlSmc4up4Ru\nkfyi9MbtWzd/pmmFc8X86t3WC+B1GXNPnVKhB8xXoIgzRaqKRRGQOPqa3P09\ns7uXpYMVF0ZEF5rULB9NND3oRcrvnsWS8Tr+85ql61ouAx71CnUIP477JGDO\nzcElJMCcdJi9zyqB1mDHu1tYpp8xW+Jf37MDuDHcIaCaUDM5kGQItxtvM+fr\nSeKa/dzrUN+U5cEdYAcM8o+oNcelXkeKIYspgHwx9T9eJU6IPudlJNc5TH6Z\neQwT\r\n=eLxz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID8KsetdvwjKrGBlvnEAWUTa6GjPVFqp3WRTC9EfUAS+AiEAxCiXkW6uGjQdfDXTa5/6X7luoQ670o2B9I4ugyOhabg="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.8-032a367c3e5ce02e6f02d4787d4a9b1c003fa09f.0_1596816356332_0.18459905978261193"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.7":{"name":"@unifyux/web-components","version":"0.0.7","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.4","@unifyux/icons":"^2.0.6","@unifyux/theme":"^2.0.6","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"0165b50ca7dd67ef2a2f1491675acf514697bb75","_id":"@unifyux/web-components@0.0.7","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-XlJtIcN1vUE2xWJneni4d1iPi6cEt5sfnIN3IvRTKJOItaiKNq0r5J60egR65VoOcQRKSD0EAsdf55fL5GE5rQ==","shasum":"a1c2101c19742a3aa4c10f50357e67c8de8a62eb","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.7.tgz","fileCount":191,"unpackedSize":2993463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLX7wCRA9TVsSAnZWagAAGHcP/i+GZr0dVlqPxcvGgXHf\nm8IpjAJIkI8UeIIf2AM68BxBRvuqY2nk40LkK7QTsI3Y9pZsz+bfFygX/oWw\n29BxPh7I/6z+3iTYnwhkeMMELxIEZIJQiGZnKVHR/7ANaFYql8oOGTQ7kKbQ\n4FakiJPfXEqAQ+O6DtcoQRzPi6uHsBHghf5igxw7XR1QC7lMfpIPatkE/WuT\nk/SDQkYkgtQeUvNj6WO0YNJ088q28uI8vwxkad9s/0PLSoW+Y5Z7Bs7mz8mW\n0Xv/EPzNidILLXs6MUKmpTR10cD2LPOZ52YbYKzaTspYblXaufplUHNVg8d6\nY+nHgFI7vO0RktK+EJb+D6+zmkNTnrGN/6P8CM72+5C2rQGzVQXLtjR2UKM1\ngOPuY+q0dyIie2aB30xLQKqVEHRabNZDlyM6GhSifw924Nt7h3lgAuNts21F\nT7ZAEBuHrNoANbLizuF55z2zZTl+GxQwxXiTGwhSuhVfC3KX4Mcbw3c6z3wh\nMEhEW365F63ljXnV36Aj+NKXMFHx1BCIxZt3sv17bOBP03WE9JJy2d5/9Ixe\nzGn5N4pz7SBxT9DYyjQ9uyAJ+YTUv9I9fSn8N24szTU1kFXwiBxehYahhte2\nwdf7/c/qypXV+q9Xwh3fK+CyFgjOLst7iYHXIcNtMQ+BlhNQKTx+cHBpGNCY\nbc6t\r\n=iAxi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGpQ2AnOrsSnoh7ochPJmalwcCzyJ7+H0eRvHp5IMgDyAiBtXtQ/UTAenn7k7J9rVQb+m3UmfLDjoZ8Bexrdksbbfw=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.7_1596817136036_0.012498542271501156"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.8-ed61f690db58560a9c041cbfb1ca6f660114e79a.0":{"name":"@unifyux/web-components","version":"0.0.8-ed61f690db58560a9c041cbfb1ca6f660114e79a.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.5-ed61f690db58560a9c041cbfb1ca6f660114e79a.0+ed61f69","@unifyux/icons":"^2.0.7-ed61f690db58560a9c041cbfb1ca6f660114e79a.0+ed61f69","@unifyux/theme":"^2.0.7-ed61f690db58560a9c041cbfb1ca6f660114e79a.0+ed61f69","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"ed61f690db58560a9c041cbfb1ca6f660114e79a","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.8-ed61f690db58560a9c041cbfb1ca6f660114e79a.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-fsBOA08z/90J2hRMDmVhXegNXX39EMrSY0q8XV+RGshT8t0ejRXUzU7ceHswcdX9DfKbw0ilHilJH5H291cTHA==","shasum":"823290e256bf1b2280550548c8500294c07610d3","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.8-ed61f690db58560a9c041cbfb1ca6f660114e79a.0.tgz","fileCount":191,"unpackedSize":2993667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLYMJCRA9TVsSAnZWagAA4g8P/1Hx1oVB5Rff8BOb9aj0\nK4rrPdeq90YGod7+xuR3DH3kArDdKNXvK/zbbqx9zHpPcJhtK3aCvf7D9ZVY\n0UMxwrnPHx9N+Ex5pReU9aMe5j3gYXhrRElvmEtOFMi5IqODezD9uSsSo6nB\nCMUeBfcAJuz+1OI18VBXqzurliVTTAVYdW3wyk3/+4+ztr+9KZt31jViHxQn\nqOTg+Tex3oLudlzdbKD53+9h6DYyzLCrYtKx5HDS1qMTgqGnY8vcOuJ1vDPe\nIgGOeCiNyhIKc9GjCRWJ6oUJoq5VRDeKRXTj+KbVnB3+bzjp57vwXXf+94UH\ncsrHbFzHbB1WYE5IPxECXXnyZPGRs/PEol5ShzI0anmTIwf9oSmfcHRME3CW\nvuqxyd2xQHzWMemLrkAvZtiJCIDfoUcBpB237zcqdhR/V2kgLgIYDgVSSpjG\nxGQopS5buHS/deOLorfmK+LElA4t2UmuIuSYLfVHwGAOjezgznL9lr7U2/nj\nc8u/8ofW48xQcokxfRTSYgNXwgoCHvKUjhbKxDMdcmtKDFREP9XbBoJ6G9wp\n18a+u+lF2W9R3AFIV4C90uDpd3xm7yCANydUAxZG3DCmYMR35TNze0g/UFpO\n0bhAMB15R7YW4kGrNPFE1yt4FzOaAKKd+4kixcduVKriZmEN8vE7n6dhdgQr\nb1w0\r\n=JHEg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFW1wJJ/G2Zzu1E3cgdv7dFT7x/UCU5rWAngfwpiNXnBAiEA4+JRgDDYcqHOcnykPccyMPxXPbS8UQbyKrZhKaXMhxo="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.8-ed61f690db58560a9c041cbfb1ca6f660114e79a.0_1596818185267_0.948681626619718"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.7-9c2d7b84602dcf2ac3c6b9c82efbe00179138155.0":{"name":"@unifyux/web-components","version":"0.0.7-9c2d7b84602dcf2ac3c6b9c82efbe00179138155.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.4-9c2d7b84602dcf2ac3c6b9c82efbe00179138155.0+9c2d7b8","@unifyux/icons":"^2.0.6-9c2d7b84602dcf2ac3c6b9c82efbe00179138155.0+9c2d7b8","@unifyux/theme":"^2.0.6-9c2d7b84602dcf2ac3c6b9c82efbe00179138155.0+9c2d7b8","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"9c2d7b84602dcf2ac3c6b9c82efbe00179138155","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.7-9c2d7b84602dcf2ac3c6b9c82efbe00179138155.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-t7SyMrfYYU/oipXuqG9wNijZ/CUFPqTtdCtxHiRf8kQfS8CXKKpAtfHer5mOfCJH5arbZaOGiSNN3rK8jcfCHw==","shasum":"89ea251b97dd9ab8d8ded4ca993ca8ce1fe7165c","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.7-9c2d7b84602dcf2ac3c6b9c82efbe00179138155.0.tgz","fileCount":191,"unpackedSize":3005947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvT+CRA9TVsSAnZWagAAXLAP/3K8bJJVKT4ettbCDeJH\nM4+kGbIFKbpULe3Mi5TPY4wr4DKsDCEOJ77ytbRHAPkXxXFmshcetMnMX4Ct\n8ywzRazXbHNsBbbR8a5S52FCN+jqpY9D1YccGmrq1kIzjNer58xBdlJSSLRw\nVJSHa8BOXF2TuYtTB4LpGW6Rj+M2XhhOYPX/7NHAwlf6gPzRArNbCvqoTU7Z\ng7GZ5ziiHOT4nEGR9olDs95A03dS4PNFW8Elm+/WzJaMYra7sChplI77QEmq\nlgoAophW8B4YzAHZuqpw9mokvrG+bwkKiHrjnOkvjFKZ0sK8bm5slwSbO6FE\nEvdBJWViwHwxtzmnYOilM7NMJKx7psxXQPYSDZHspCXNUr5aOMnhI55ckP45\nTgyB0+Gm9sie9Kh8TFP+IqlIlyAq3zUQhKnVCLhrSUwnMXp2h8jQBeoQ/DZJ\nCQ66jEMGTH2KiBzqMnZAGjv2QIjtUj7aoSGen3+cxPIJFXDYYMJ6OFZx9R1Q\nwUrNPNxQqHZ2jMtUhqGulgUdPLuwgNgQx71EAdwjlUppuqKIsZcPdF3EQPhm\nISWhd5bcbSFd9ZUzn7gOwpx29lx4gWtKex5jOUZ+dixms3Ckf0Xe1SzLYi8C\nvaKblS/MR1oD7FuOnaCxe24Kx1xCnrVWroFP81pczHd4AbVWC7u2TRQbKpIn\nbAj9\r\n=vtBF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfDgjH2LdPCY0woqKjxj2VcqpiOe6mWlO7K+9SlOa7LAIgYQy1kWshFek4kjK3LLP003jPYaKc6H3N7aW9b9PElpU="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.7-9c2d7b84602dcf2ac3c6b9c82efbe00179138155.0_1597175037604_0.7903179814726404"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.7-9d13f89529c289d268d5bcee636e9f3e87140bab.0":{"name":"@unifyux/web-components","version":"0.0.7-9d13f89529c289d268d5bcee636e9f3e87140bab.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.4-9d13f89529c289d268d5bcee636e9f3e87140bab.0+9d13f89","@unifyux/icons":"^2.0.6-9d13f89529c289d268d5bcee636e9f3e87140bab.0+9d13f89","@unifyux/theme":"^2.0.6-9d13f89529c289d268d5bcee636e9f3e87140bab.0+9d13f89","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"9d13f89529c289d268d5bcee636e9f3e87140bab","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.7-9d13f89529c289d268d5bcee636e9f3e87140bab.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-mPPIPbmOFEYI27rzS87jwbqfkgOJ5xxDaPk/Ieg06koQ8IutktgRUKXNhkMNDPFTyLuQ792O6wSfEKV/e+jnkA==","shasum":"4086571a8be734895e275e8ea24278fce4ec1cea","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.7-9d13f89529c289d268d5bcee636e9f3e87140bab.0.tgz","fileCount":191,"unpackedSize":3001826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDHNCRA9TVsSAnZWagAAGSIQAIDMiflS5bISyCF+lDzV\n8SZUZ6QjpmEAMFS0ZiU/bKpo1fWHYxbo9VN6QSXCpOXSdm1pv7co+RrZFb8R\naRsn3S9subl8jDgHRqAVpGuyhMtg67RGljC3j/Ymgvo6J1ry9R1gCAfiVq2M\ng8IJl6OdomAUZt42KygTKWKLLNMiwAu83yb9ljJIMU0LvvD3BJ/RtyFITEd1\nuUrr5rYCn8QkTd9Wn0SZi4S/Bcs5rm93WJuc9jZBOt5WS18wnHnylY64v+1N\n6Fbg6OFa818rDWVJbDwSAzRoove7Vtz4Tpj2yfnIPPxWlFwPq6GJp/tVuHH4\nqUxc2+ipoH+/avojI0lCX4psDsJmo4UUcE2fgeFsHtOE1eze4c/jU906TKc5\nOfAqepSOpsz6Z/IJeL+ArPzpWZWBVriTSJ206GLxduPaQs28xTX4n8GqljFh\nBAQsdkmnGxoVkQaIpp5xcQotsxIZZMlW9SL9il8TjegxDAKocXZN0b+/YXwQ\nkGXMblnH+fmeDMEIWSFSUas6LBYJplljOkEq4FDhsl20Rxn+CO0VbWoQH9Iy\ndjlB0ifArx8R+J6nN+a0AKxQXgLkGmVQnw2xeF02gZWbNUlt6iqA33/CkW6r\n8Q6uyKVpdj56HSrkIvzTnwadjLZT4V6DV6K3VSfiUuQmnVleVPTV+Ww542NG\n5C0c\r\n=Wi/J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEO70WlSDW/nwGusZAfiy/8GVPxBnz3oAne8LQF2umD2AiEArh+wgLe1uPb5tViBxLM7FKchlivx3GII4+rJjIkXgcg="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.7-9d13f89529c289d268d5bcee636e9f3e87140bab.0_1597256141201_0.4573990796961598"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.8-81e21c088039079f3ad1f58140ee0e531beab04a.0":{"name":"@unifyux/web-components","version":"0.0.8-81e21c088039079f3ad1f58140ee0e531beab04a.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.5-81e21c088039079f3ad1f58140ee0e531beab04a.0+81e21c0","@unifyux/icons":"^2.0.7-81e21c088039079f3ad1f58140ee0e531beab04a.0+81e21c0","@unifyux/theme":"^2.0.7-81e21c088039079f3ad1f58140ee0e531beab04a.0+81e21c0","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"81e21c088039079f3ad1f58140ee0e531beab04a","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.8-81e21c088039079f3ad1f58140ee0e531beab04a.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-mtMLnXKiW1TxN7yurMMWEhQAlbXMcpatSqUFmr/jKgmiWqm65P9RoppmQYAmbgYCnjOS18Ao86JWTS+Sc6wp6g==","shasum":"91fee815cb298559cd67546532a8a635f37ea121","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.8-81e21c088039079f3ad1f58140ee0e531beab04a.0.tgz","fileCount":191,"unpackedSize":3001826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDTaCRA9TVsSAnZWagAAzSQQAJs3daQiEUFK8ZihkeSa\n9r7Vl7OHhiD7yp4VThoW7CChq0+RnFvEenAYKeZ7piltSTLio2kRr32HJp0J\n+4VZMuo+uZNKH3OIH6tvYX3Zsj7e3qIfm48E2rkYV0QgIY2rEHgmwrL51vCr\n/UZ8fm+h+09qc8wBRmaR8DiUX4EFwoi7iT7ICwhCc6CWIJcDEbdigPW8aRtT\nI3XD39dCqCv4c+DAt7vfCKPhlxFz1B5ItGnaAumItlX6+dGdpFJ18zA55msU\nIh2jnSFIxJ5qmHh6nkW/7CW9+z26D2lEzXqtmVrptD61L6KSdUQu5ESsQVJg\nj+U1Nhsl3+h8Qja/vfqw8+8SWDX2LssOQAV5oCu3F2E+9WZ7E/Ko3W6WJCTR\n7LfFaCVc3S/Jq75wKFzooJzAFn+WNA8h6yei7yzx1T2G0eVIfiFedR4qe1xK\n5IDXtaRyJOKwBWRAvnNS4sY21ylBKSxG5SUZ1iBO6aT0zQnDTyl5fpi4rzzn\neA7gDATGRb0LP0QJfK9g0N03fzpX3zLff4fzAeNJqYXaVhpQMSAOJQQwfPTO\nDN/UP08l4v/3e1SemlZNedTY+chfLUsxF+BaPJbf/pHc+ZW2fFGDjSbg9XSI\nQphSfURXPPSan4IOmmHUQ6mTTK7lfyX1ElZsHiaC/QtC+p80rYoaRkVONE8t\nlwOC\r\n=EKL/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUMpi6ZIURTUqVz58QBLIzzi3betlFeKcobr9iudxMRAiEA5Fychj4fZiiOrivcstNftuLQOKfjVEXxW7eanLPjoP0="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.8-81e21c088039079f3ad1f58140ee0e531beab04a.0_1597256922386_0.0935912765919078"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.9-82cee0170516e8763eaefc41d119091a76a286cc.0":{"name":"@unifyux/web-components","version":"0.0.9-82cee0170516e8763eaefc41d119091a76a286cc.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.6-82cee0170516e8763eaefc41d119091a76a286cc.0+82cee01","@unifyux/icons":"^2.0.8-82cee0170516e8763eaefc41d119091a76a286cc.0+82cee01","@unifyux/theme":"^2.0.8-82cee0170516e8763eaefc41d119091a76a286cc.0+82cee01","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"82cee0170516e8763eaefc41d119091a76a286cc","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.9-82cee0170516e8763eaefc41d119091a76a286cc.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-9I70AM0zcY2mm2PcxW1iYE28YhPcAr+PlMpW534NcyXz4dx8CzvRjDEkF+p3BZjDGr1qij/XtUFHuHoOOMcqYQ==","shasum":"5614df1485c1eb024c861f352ad8b2656d7b2a8e","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.9-82cee0170516e8763eaefc41d119091a76a286cc.0.tgz","fileCount":191,"unpackedSize":3001826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDVUCRA9TVsSAnZWagAAvFUP/REmwGLh6itX/UVYDLBG\ndYxffsc9We4wh7MoU5joScq8SsbEq0Tony1XUCSRSpVUIWEGInrs18o+yK1m\n3JIU7fhGu358ZneI21j0eKEaUPEWWDs33i7jdemEobqv5iC9GQwflWWktDS7\nEC1VzqguZWX9B//5K0X5CWbRVfkqJOMfn7Cd8qSHzVvABO71vqPmuy8YPc7K\nTTA4ei7uWFALo/CBJKuZdOhIkPjfEROitjqclOL7Vl6c0ipMPQt8+iua1KMU\nPExzRUUypfbW9AmAL9UEQeH/p2/NH8Xb7IHHlApKBycUtOailfo/rQnL3U2z\nU7LZN1DDR1T1YNjbgJ0MtkSjK2HSD1cSUFNt4lbcm8c/3sASFT3q1OoEXsVr\n/nOVrYXwsq8CQVGpwHloceiH99mOygehg5KXlwpdk1phW7c9yJrBnPiu7rwi\nqQOHJopBGRwOUq/KSBjZlYfrFcnC5h/if1vjrs/+lQH0e8QOD1B2JikCtstH\n/JQmRv3ydXh/1xfZIOTBF97RRbV+7+Q3U3GJzRg7zmMzlKrdbx+rarLsh6lA\nppDUHMvNvcpRrDMt6uLn+g+lHCCXFKGDBgNzQ1MAQVdNG4DZbTTP7dcYtuGr\ntPP0hwPRFdAaj4WvuidwxmRAfEh6AaXn3VgZaZ+5KKb3ZVv6ivioytUlqNDp\nNvcf\r\n=K0Kx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjjZE1JOJfvkSnmVSExuC0/lq/ylCI+QHKS6dTOugsFgIhAIIqVdBnMwl0MTzFVk2ThLsCILZzGzm9Z77epJhXEIKF"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.9-82cee0170516e8763eaefc41d119091a76a286cc.0_1597257043559_0.49582425932532015"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.8":{"name":"@unifyux/web-components","version":"0.0.8","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.5","@unifyux/icons":"^2.0.7","@unifyux/theme":"^2.0.7","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"f157dc489ca23d1fe615e4571a21c733e1fe8a16","_id":"@unifyux/web-components@0.0.8","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-1S86cmImNEq0v2EKHLWt1aWLmnZHxhwCcseu9d1b0vhO1uoLCs2QXyQpLXVtTOFiniIxBXml8+Fmx4AV+P8Nzg==","shasum":"375c92f35dab18e87222fb8b916df9a88bdffd27","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.8.tgz","fileCount":191,"unpackedSize":3001622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDheCRA9TVsSAnZWagAAGkEP/jE9ArRN9DN7qSmCu7fJ\nij1VP9WfBsjhPfrfQ/Fx+3OhyIsB8cIKc3FQh+veyPI50WcsPbhIm3Vhr39w\nmYCp/qG8Mu36ETcXGrzRIWKJ9nvHLlxSJ+y9XmSl1nNvenuFgFmT0tpTr3uA\nmU7Q/mife1CZW2H4ZT1RETjn/sALEP+D4FnlbqDGdFE8w98jOxrgeV0vxEOW\nQsKmnxv/GEZIYNQbJMSDYgTG0R+Jss+3OwwvsnZNk0cz2zqOfT76+0xchxFS\n+0M4uujYOY2RfPLrzbIZgADM1RNJgsL7xe/UgFs96qd7BslM0gX5qVuU3UBZ\nUmuB4TlZkiU3gqN7wnyOq1buCGnJXP7Q76E9xi8KE9BIhpc72FADCJtbWER5\nYUf1y1Y9sfXBsrEifbg/0Vw1ZzSzhyNxgpbkwX8g5fIpJIpEJGY/1XvLPjr6\nNw8/eELOP04Q0706tT0FYW1Ofl/cGxVCeLWDlEpwkbx3655Y1VUZ1JVt2+gh\n0L9hrDrrIJOTzqSW0GK4dYRTKvh9wi5CkzW0zIOeDcWohRSuqPJlKbRTTUvt\nDtxKxozYdHFpu9UT0bDVY89jg8ev5pRl81htvEOsq1v27XrIu7tQ4z5AkuFL\nY2Ju9u2ewOlHYvJUiTrcG819OuwZIujVGgcJqUgwEbYbm8pKROvQreytQA3Z\nIJlz\r\n=EK3m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCq0YJBtJMu1dkgwTUyQ+X2KRf2tdqDQN59SjfZcLllAAIhAO4kSQqg4+YUAyh3KnH6ooBSUEL5c5bXJ41OQIe7sgcs"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.8_1597257821431_0.3801955879603618"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.9-b08af7c12e8ad0c7951ffe555644d1951abb62fc.0":{"name":"@unifyux/web-components","version":"0.0.9-b08af7c12e8ad0c7951ffe555644d1951abb62fc.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.6-b08af7c12e8ad0c7951ffe555644d1951abb62fc.0+b08af7c","@unifyux/icons":"^2.0.8-b08af7c12e8ad0c7951ffe555644d1951abb62fc.0+b08af7c","@unifyux/theme":"^2.0.8-b08af7c12e8ad0c7951ffe555644d1951abb62fc.0+b08af7c","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"b08af7c12e8ad0c7951ffe555644d1951abb62fc","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.9-b08af7c12e8ad0c7951ffe555644d1951abb62fc.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-If99aimIBnZYCUBBfoJmsxd6VgokAWkxvOUHirVxX9eFYfdhWAgkFJZLLxrbujGMsBkFX8YQCYhMztumkr0WUA==","shasum":"58d97fdc1db0f8fab3251b9800091379ffd1ee18","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.9-b08af7c12e8ad0c7951ffe555644d1951abb62fc.0.tgz","fileCount":191,"unpackedSize":3001826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNT/wCRA9TVsSAnZWagAAK9EP/3q+tK8D/Utke9E5FiV6\nO92I7BgT43xUOZ2uUxToyJfqCJxvZvQo8zKLLLU2JHMPnbRwthruyJ9Gc5hd\nPE+nmFjkBTMpaPUMYHbecYH9Y9404jPRRtMIfPuJrf20CtmZhzFU1rCDXKTi\nU/9nzbFvChy5ICZahOmxG7sJhHWlRThEQbqRGn8ntMRZPdy3y1nYsVUQWetX\np/VWt49nNl0YtL7N9HD7dnC7AWzInFPfNmEosdGzOm0TF15HadUkQtnnAA9m\npaBjmllITkPdyhpv7jwuCDebnxCsm9Zg/xTcgrqx/+B+6Uz3Ill0yVCIFa8m\nl1PG1My4ceKhVklX7VjESE0zpP1Pb31TELpULuQarpwagPn/Srn52yHeeRvY\n4VEvmV2+/pD9jaF/LYWqO7KvDpPesL7KuF3/yFM1udRzOIfdCg/CdKMMphl5\nIDWu85n+MpUaWCCy0R88Q4ehWDblC8wNbFW4eQV7GHpGyoOZzWP0ttcLteqi\ndIbnAEyNvhK0j0OldBm54kPeBY2rAWRyxWjwjen5FaVJPQEN3smf56uxI9gJ\nJg9KF9ixIrtrZpxcIdBKTAsrxRtJW7/oXToic8sRBGLwZBqA2aAhz8QlvteX\nz7qXuEFo6BCZBCdGHP4Av+lFKQ9lHZvDhbE/yAn6An5tFOTHIU8W91t1l3XV\nCUAK\r\n=WcFS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHOIpD9PHszCttlwWOElXGKIPVkgN6Fkx0sFB0ucdey7AiEAmCifcu6NPNl1UkUFkbV/WqC0vrm35uB1waHOc8aQTZk="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.9-b08af7c12e8ad0c7951ffe555644d1951abb62fc.0_1597325295609_0.0692936819916119"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.9-a07e7ef75fbc876dc0f30ca97bd5053edf0add21.0":{"name":"@unifyux/web-components","version":"0.0.9-a07e7ef75fbc876dc0f30ca97bd5053edf0add21.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.6-a07e7ef75fbc876dc0f30ca97bd5053edf0add21.0+a07e7ef","@unifyux/icons":"^2.0.8-a07e7ef75fbc876dc0f30ca97bd5053edf0add21.0+a07e7ef","@unifyux/theme":"^2.0.8-a07e7ef75fbc876dc0f30ca97bd5053edf0add21.0+a07e7ef","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"a07e7ef75fbc876dc0f30ca97bd5053edf0add21","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.9-a07e7ef75fbc876dc0f30ca97bd5053edf0add21.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-JI4nCRdDWfQWiiyhgc8TtP9wxHXO+tMOPB4QlTmmuwJwXXW7H4e1p79TrRpgAJAPYH6OIMCQNEKOQwWMJkhMzQ==","shasum":"61796ddb8f888df133c6523f74faf0832abb5c4c","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.9-a07e7ef75fbc876dc0f30ca97bd5053edf0add21.0.tgz","fileCount":191,"unpackedSize":3001920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNUBMCRA9TVsSAnZWagAAnRcP+wQmUrxEe1iP8hwe0luP\nUBPgSZRCasYKOYBA7OGFUXaAXFn2QoK3zYSTeitg6dbjPZxKNs/6dvd1Llkj\np6TUQiWfEu8Nze5WPH4H0TFM4JhKDMvNNRQcy6bUp/u4DWglJlkcFazWWMVv\nf1Uar/3Nc6qRr2vynEvyrGiFi2fXblnKkSQanE4ynqJFKOY4vzKTK7LtxQJg\nA49/7JIe+fez1bOlHYPIE+bbNSSHwDB/tVi24VOvkKGVJCnFmqT5ODpDMcFL\np6HvgAMHXZ0S+stM0vjYl5EzKzn5uHQDoEJwuONS+iaXkdV46r1jScFnnJL7\nQnKjSmcoPqASD/25kZg3LxmTJeKmR2gwsMKF41UtAEqTDCpyNrz0O08fFL/M\nWQt0gayftkeOTMmJzuUxTJ000qiEOENibYqpkVL5l9/kEJsmiK+SAUo1Oq5N\nW7+gaLIq49wvwZwK98xOIs3WNEqPaXJr9ZUIQAlQ+fbhqr8VmxTXsC+vmi18\nEwo6NNfrwPoeIjz+3+5hNwDrI7b47LNN409M+Em4Xs9QMB7VPqsXwXE8nGzI\niFAi7p9sC8cbJfCtVO+aPnrNmXxf42KhAwmJnTI6R5AmFU+aRqZ4S0GsGy+7\nIbN9NRRma0nsdlVZ36XyOyJIarfam0oPXYTuB/iv53m/gTJcoUjpvh98xvt0\nmZn7\r\n=0AzS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDdMcKlyARaQBM9GkWGxTjd99hQX9H1JY5VPffLO79WrAiEAt3ucDdfc4+SStXx2VK3uDPjU0OUx+FqPgrNkspyXfoY="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.9-a07e7ef75fbc876dc0f30ca97bd5053edf0add21.0_1597325387601_0.7281399621660716"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.9-bdf2d373046c2d9d7f3a0e6b67ed16b3a89f0d80.0":{"name":"@unifyux/web-components","version":"0.0.9-bdf2d373046c2d9d7f3a0e6b67ed16b3a89f0d80.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.6-bdf2d373046c2d9d7f3a0e6b67ed16b3a89f0d80.0+bdf2d37","@unifyux/icons":"^2.0.8-bdf2d373046c2d9d7f3a0e6b67ed16b3a89f0d80.0+bdf2d37","@unifyux/theme":"^2.0.8-bdf2d373046c2d9d7f3a0e6b67ed16b3a89f0d80.0+bdf2d37","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"bdf2d373046c2d9d7f3a0e6b67ed16b3a89f0d80","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.9-bdf2d373046c2d9d7f3a0e6b67ed16b3a89f0d80.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-awdFuP3CX1etY4O6wfOUwrojs7VeABLSuccjJHsGAIvYzFPNnnwHNaIoChlAU+hywPOXxXsKHBs9gz9BigjYXA==","shasum":"f3599c8727ac8c0e0598273d954e9259f6abbd00","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.9-bdf2d373046c2d9d7f3a0e6b67ed16b3a89f0d80.0.tgz","fileCount":191,"unpackedSize":3001920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNUe3CRA9TVsSAnZWagAAnZUQAJpW18i9ND0mqe+6HSyt\nu/+L4p1Vwm5HdbOaaPGh+mQjwD4uaIhCNeyUgzjKQo9Bn3lp0qTFpchO4Ezv\nE3C6DHknGS9szMIHE3h6YI4PlU/+/N3M9+G2anjQF5yM557WM5me+AbaXjO+\nzLBKT7/t8y0xY66vcU4UAXetGu65QpblkTCgTHfioQ8AEXCWiX+OLQFz+46x\nYY/wFiTqVWUWrYn4+gewgU98RgD29xEroXiCWNyZ+kESHVn8HNAucf7rejIW\n71oHpisEmxF6YanunZ9a2EQD0E0mNCvNejTjEV5bhTfdUpf1SOHx2rC8VH1h\nUNHqMQ/KELdg/B3L5lQYfJ7SuHZM8uOwn+ehQfAZc+YUSzYwnTuGAAHLs9gY\nCLUaWEZ4Igo6JApKfwSlCKSwZRAdV/iJ0OpzIm9vbEarJ2JJuAUf+ypPFB4H\neTF6V4Q2iGXaAcoEHlrdTtTOmwTZ4Q8KdBi7sgb2fUEgdq4udsQD6oUvqgE0\n5LpAj4/JKr4r/n7IKuOE51LvExzw3KO0jwhfVcGzniIuPSuC01Uz0AE+pWBK\nAIz3y0A24zTiIVYb396L1uefLPMaQWNVwJy4W3yzQugHcHwR28s7BI5Yok4S\ndD4qyeMS3iO4bCH3l9gzPSFpnunWsrV+GoYyH72RSSYzpkjV655QwMAZbgYe\n6W7N\r\n=ZIBz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB7uKo4vNzvEkGVBKgbSFk16JS9LFMt/UIa3Ef7KwFXkAiAa/6QaxxyF/NQk9P/SkWKHh1w/GRUSkFPWXIRJ01GO0A=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.9-bdf2d373046c2d9d7f3a0e6b67ed16b3a89f0d80.0_1597327286650_0.018876330964240795"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.10-566d849e496250ce420de81591214dfaa86832ec.0":{"name":"@unifyux/web-components","version":"0.0.10-566d849e496250ce420de81591214dfaa86832ec.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.7-566d849e496250ce420de81591214dfaa86832ec.0+566d849","@unifyux/icons":"^2.0.9-566d849e496250ce420de81591214dfaa86832ec.0+566d849","@unifyux/theme":"^2.0.9-566d849e496250ce420de81591214dfaa86832ec.0+566d849","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"566d849e496250ce420de81591214dfaa86832ec","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.10-566d849e496250ce420de81591214dfaa86832ec.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-5+DWvVN3qrFNwZzo69a3e8kuQLm6eboj7HrApNCbpxBXx/p2CuxnE+3/VY7MqXPqePhVd7l6q+PJGjQQtnAkeQ==","shasum":"6d0b5f8d393d1af5e9391b7bdaa39cd8a48c8e12","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.10-566d849e496250ce420de81591214dfaa86832ec.0.tgz","fileCount":191,"unpackedSize":3001921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNUhSCRA9TVsSAnZWagAAFt4P/ijUkIwyd+zVIoVv4njH\nqjjyZo9UelqGMJCnuhVPxZq6XEH8J11OdywjrbGwS/W599TJbQ49LwU2lvCI\nDsYtLzv2O7Ccaae3E2lKFlPdOjEzE3Kv4t9Sw6G5cq4cEY9kcZzBiJUHteUi\nwP3c3bMlc3DV6MNRYxKoBrdvY5FTQjoR11RbDer/cxY+Oxoe7uVQ0pSsUoRM\neDwXAz2uK2y0i8PTa/7OtPEKtAxVivwWI01XZjppqDQ2FUIdJtByl8yXHHfJ\nkToc6/rNJfbSMBmPS4RYeW6BD3TuwnyzwSjoeFtFpzyh59dJbEpC90beaMaY\nab2nMYuPaEDJlQVHnV44KIKSkvPyFrARcmH/zLyPGgt87eB1jl+vLraHk1dX\nQ0SxuI7OiKzxrLST9zmt5LS3zPKg7XRsASwi1mam6O9kwonX1t58h7rMAWFV\nMFF+aR4BgZD3kvzsNfVcBbt0yuQGq/O0jzM04vYez+Q/HOLJbV7Qk93z8Hvg\n59Xp7opPraerp9iONO6hAPdR+gQSXqcGmmvO04uULUw1+3Nf//QdpEJvOKwB\nRmo0RVQAXNzuhhALFcXk1bzDBuekmXfBcVvnhLm0usnO8rlH5vXdsliplXZR\n5B7SqIvJ/M8GGv5lDhDoC37cqKSLizcUFpQTM4XgcOMFmgTBicBYN2WFXrpp\n1wuL\r\n=DmOG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICPmolXH5SsrgW0h1eCIk2pI2UFQFT0fOYfzhASTKlG8AiEAi7w8dU4RrKmu6MrhDDuGJQaGYtnBaMbGbcWImMujmNs="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.10-566d849e496250ce420de81591214dfaa86832ec.0_1597327442379_0.6654740378640607"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.9":{"name":"@unifyux/web-components","version":"0.0.9","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.6","@unifyux/icons":"^2.0.8","@unifyux/theme":"^2.0.8","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"d8cfda02b900108e2887eaeecad6aaddf2a86420","_id":"@unifyux/web-components@0.0.9","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-uLngmOgfKOyrzL502REmZjrg6kjN4TU6bEfGJEBvZS4A09z9kLCQh2Xvb+bzp8w+3VGS7u93/QMbs5yK1BKOhw==","shasum":"74b0cefcfd00ad0ba2370809fdbd49c357003fae","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.9.tgz","fileCount":191,"unpackedSize":3001716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNU4MCRA9TVsSAnZWagAAmiMP+wXEFoUtT5IqXh0507PR\nTYaxzZpxGSraNjbR/rVd51QPdGcBHLcEZVRhdBLyv1O+f38rPTAwZfInjuw1\nv+OkNQ8KGMycWxN21/URthBJrO7Jf7BfSWojc4jjQGuY1kBn7MHocMOLetyp\ntJrjGDT6FqyPgeerpAP48kGh+mfNBHKSj/xUr7I/s3idyMHcIQRmKTr5fr4/\nTwwbNqX7WwXoBPJI4r4GkcFQU/WNlhhqEstnrFhozL4avuBNwhbfXjwg62qt\n0SH635qNQ1KDo+16y5uC+vNJ9jBBmncHaoD8COFDwA5xp/7ALCs7z0ZjNlxD\nuNyVaNULwN51nj4NNDVCm79VeUbgG1XP9aLDEAQr+b3bf1QNDL1QtkpBzUnK\nY5b4n1xMHKDAQrEgUDNzPs2BkbDloABUlbfiU7Yy7v+UjZ8BFycp5ZfTnYl5\nx0zwrEtIK0tFakKktycvi1Qhixdnz1swhtn7gZhEPYbHAyQx3rjD1seWYN+G\nQ9o6muSz/7PG3QQEj9PMAPcMUSTKEaQkFSxGEmNwy6J6B9TFuiVNU44QFuQS\nKALcRKqIfaRYbC5lBnipAzjIjPRLZ6BmBsg4l8pHfPF+ABtVtQgRg/8wPYbY\nQt2D3XlJ3ue5Z7aAiUIGjTWCddot1mA/Dy2abiFyIP33r4gQHL22uvF+aMmA\n96FR\r\n=fwMo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQCM1SqIqX2ZgKBJ6GHYeeZr5UxLhmH2+0oROWCp5Ny7xwIfH1v7LPe5O0dkQDnPNW1LspB1CbxqrdbxmnlruE0Thg=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.9_1597328908485_0.22710753455245758"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.10-7369bdd89bdbedd8d5e0db3c4666ff241b5e3c81.0":{"name":"@unifyux/web-components","version":"0.0.10-7369bdd89bdbedd8d5e0db3c4666ff241b5e3c81.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.7-7369bdd89bdbedd8d5e0db3c4666ff241b5e3c81.0+7369bdd","@unifyux/icons":"^2.0.9-7369bdd89bdbedd8d5e0db3c4666ff241b5e3c81.0+7369bdd","@unifyux/theme":"^2.0.9-7369bdd89bdbedd8d5e0db3c4666ff241b5e3c81.0+7369bdd","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"7369bdd89bdbedd8d5e0db3c4666ff241b5e3c81","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.10-7369bdd89bdbedd8d5e0db3c4666ff241b5e3c81.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-tbezgOL+Scy0FhOgcAJzZIeJpSGzEl57iguGZzVTnEfnXTJHZhHJgh5Twtiqaygice3YNW7Wtg9vimMjkzD/Lg==","shasum":"0606cf1d600904ab3f5aa3742b9e218fe65b7d93","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.10-7369bdd89bdbedd8d5e0db3c4666ff241b5e3c81.0.tgz","fileCount":191,"unpackedSize":3001921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOpD3CRA9TVsSAnZWagAA2oQP/1Js96XuW9SXKE+Ma+jY\nSKfsgaSFU058tYcnhyZDT4C5HWNWVWk6z3uQFcJl2qkyfrDvn94oCpAltVu2\n0swJu6/pkSoqPCBPXh5mcZFCoRMrVvzVDBcn+F6kN4z19J6F0Ftzw0T/qVL3\nTiw8eIHYa6r5eOIlLoutCn9CAJdoNKk7xkBiwSot1ws82/q3VESMVytjuS/v\nydDkFJWQLS4CCsJ4qcwKcHl9JXstyHVn+r2f/fSswACnbszYAKr1Jj/V3umQ\ndhlC6fOgsqjWUrizq0Vne7DFt1QfQYQQeHirOMJ2RgD4J4VEb6gdtLSDPDBu\nEw5OL4WqzE5dOcE9D0/zQ2kIHjGCksLFpTc/kX2MaXAx/YHrl6cB8pmzKcec\n7m6rUk2G8+yu5auXdc69J7RIcLilGxs5A9utY79hGSDhY5lg3nPVB7BI2ugA\nFga7E5HHAQmNL9SZ9ao5xIRUayXZgEyD7IJpeenEoiwhkUCdqtVQmbaMz5YE\n6hSyTiG3Sy0NuNShr4+yJECJxdcka8bax+7DD2ATTJJjboq/oYyK1eCRd/AG\n+XKsgX3aqjgnwNeRk2rPrPbrgbeArluAUWIsoY9miHS/LNUAndbjW3TXJ2vi\nvbUMd+jM6sT/P24bOEb4DyIuZQvx9fHY++HJabOfn7TxBkfqQM3QhVnr5KNT\naXe9\r\n=14zG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvJshCMHeO+OjF4s1yF3D3c2ClihRnPiDWi+LSYMWOWAiEAumX+XR5mPbLd6RMxdvwdnPfcYZzW+HUqpJGQ+6/u5u4="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.10-7369bdd89bdbedd8d5e0db3c4666ff241b5e3c81.0_1597673718978_0.7780531680693723"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.10-67d9a240bc26252e5d3c7e42e996c95ac7378609.0":{"name":"@unifyux/web-components","version":"0.0.10-67d9a240bc26252e5d3c7e42e996c95ac7378609.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.7-67d9a240bc26252e5d3c7e42e996c95ac7378609.0+67d9a24","@unifyux/icons":"^2.0.9-67d9a240bc26252e5d3c7e42e996c95ac7378609.0+67d9a24","@unifyux/theme":"^2.0.9-67d9a240bc26252e5d3c7e42e996c95ac7378609.0+67d9a24","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"67d9a240bc26252e5d3c7e42e996c95ac7378609","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.10-67d9a240bc26252e5d3c7e42e996c95ac7378609.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-4CsQDyqNKiSdHZ0R9cn1vtbkfXKljSVqtNEx6LvEkBU2gYs6rUKp6bKAOK93JgLKjRvD55TYhSO9XAaL4IBEqg==","shasum":"4a46e22c333c0de7f11fd85effafba3c6a6a16f2","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.10-67d9a240bc26252e5d3c7e42e996c95ac7378609.0.tgz","fileCount":232,"unpackedSize":8339804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOu71CRA9TVsSAnZWagAAAZ8P/0EZDiWRnBXFeldR0L0m\n8XJBb0uHuvnOcsUmXcHxej+7xtZXAhlBUE5/zOXEaVBMmc45HvlLcRg0FIli\nnCIkxBFOkFDcLtzu5lpnVVjhrU312J3d/kO2E1orCxAbGOdchpcR6T9zsaUh\nyYAKs1A9EiuK+w53M4mgt+TfPYuoYu5uSBxJx5FC3oYbgDrCBX1y9208wFvW\nBWata9ERRgOyNwVDLAFeB71qgeMBgmF9eAhI89KaF8X0itFVJteXM2Pus03G\nI5yjSeRtkXSp3VeMjOXFhlC0o+Ub/b85Ui7hwi6lEWpdiT0JbgSDYQcZO/8J\ntMZzQr2YIib4b+eyKIwwKPn1bddIJCat7GJs3xk7kCmhKCQ7XTi2i6GtW14h\n+QoMjEk0ycnEM1mE4BrkgyKkTMZ828PjTbryAoOUgXNCHrqCl3MekvdHhXAa\n5usla17F+iEHDtWQU2j4RxKhDMipKT4zpP3/u3lz9eoLCHUreyRzX9RsTSW5\nV6ho7m9tR80eiYWXlBgHmdxW6HIwe5gxhs7yimzlsHHeajKSXK4i4c+YYRIN\nZ7Qg2GLe1/60sludpOwU6Pg0uFAHggmyX8zryfmPsU+MxIRkYQzL0whRZf79\nqneiZbla+m1s8bqHbpxa2VTDQvuI7ixTvgw5CHE5xZat0SE4py1sWmxs2SRg\nGc0f\r\n=m9qo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhfwOt8NE/38fiEEPMqZhrT4dZewg+dF5EHUEavLC4YQIhAIBF+YvGsuQeXqeNJXpgws1nXn7JDbb1qDEB5CMe9RYV"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.10-67d9a240bc26252e5d3c7e42e996c95ac7378609.0_1597697781078_0.4934838333909113"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.10-9af7030ebaa4454d4882c4ae8463a8bcf7205018.0":{"name":"@unifyux/web-components","version":"0.0.10-9af7030ebaa4454d4882c4ae8463a8bcf7205018.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.7-9af7030ebaa4454d4882c4ae8463a8bcf7205018.0+9af7030","@unifyux/icons":"^2.0.9-9af7030ebaa4454d4882c4ae8463a8bcf7205018.0+9af7030","@unifyux/theme":"^2.0.9-9af7030ebaa4454d4882c4ae8463a8bcf7205018.0+9af7030","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"9af7030ebaa4454d4882c4ae8463a8bcf7205018","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.10-9af7030ebaa4454d4882c4ae8463a8bcf7205018.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-RkK+IINMk16RMO+hOYWMtJsl7OeSB6tugkM6RdTqsmMyz6ZBRhpKjaCydvh0q3+FaHFcPDyPaqlwoF+IF7k8XQ==","shasum":"9c812feeee75a0e6fab4eb9309c9ae6ae9dafdf2","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.10-9af7030ebaa4454d4882c4ae8463a8bcf7205018.0.tgz","fileCount":232,"unpackedSize":8339804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRmcHCRA9TVsSAnZWagAAmS8QAJNWgpdZ92ZRYGrGHkvW\n+6QXqQKoOIG9BRTj3yESrpe/hcbxmfjs0B8t3z2PFeKbcUPnjo7nG++NHgkZ\ndsP/kVephz16UfjlF2S+yNDn9PtEDzFgd5crAWrMG8IWRzDjNp2YGAJVleKr\nbWme01Lopv4XqV/2uRKtD0zSHJGOoVVNOIqtkwIhIzD4H/977vVONK0o/9pQ\nqo8ttB0ZLeuuv45X5IyR8VUrMwGLKxO3eOZV758YTlMmxLHRaNKXcUoLflue\nZjERj0rYbx6h12V8PbzJq4Yql9IrYW5FY8OW+aJMDwT6rB51wkgH8VOo5Blc\nQr/+H7ktGo39iiR3EyYDJmTSJvlgYyiTGwjI3WgaSk2pjuhBDMkkngmmLrsC\nCkesxH5W1PLPFO2a3Yqf6WcyIRU/h9omsjv6ouHYFcHFPdef0VBL4CV2odjW\n3s0KcjP0GT47xGayeCy6CNFLM/XgaMU+bkQ0oW/SxqMu7oQk3hV8XUYam9ye\n+M/P3oO63ZlRyo6SXMQgH2CeLCnlXaK1PPFTvZJtWyHteSE/JYqtOsvB5o0Y\nSPCtvOY8FT9sbHXq5FbZfaY4aJG3jgWrPqGUutajAw8XlNZ9myN0fqO+y3ns\nUVHPBAwXdAjTv5Y4euKHKItEP6mJHtuVt9YEQSOrhrc80QmyqIM+KsfzJjYq\n1CN9\r\n=QHdT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTAd7Ey0DK7KU6l510WRlbjzWKS3N4PRhU2HFWToe4+wIgA/aE+LiPBqjSK0bT6ynIOlOq9oIs0842E8CphaKj/KM="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.10-9af7030ebaa4454d4882c4ae8463a8bcf7205018.0_1598449414564_0.7042113458410588"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.11-70a4edf0886e93362255b5f8ef06acdd4365d1c8.0":{"name":"@unifyux/web-components","version":"0.0.11-70a4edf0886e93362255b5f8ef06acdd4365d1c8.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.8-70a4edf0886e93362255b5f8ef06acdd4365d1c8.0+70a4edf","@unifyux/icons":"^2.0.10-70a4edf0886e93362255b5f8ef06acdd4365d1c8.0+70a4edf","@unifyux/theme":"^2.0.10-70a4edf0886e93362255b5f8ef06acdd4365d1c8.0+70a4edf","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"70a4edf0886e93362255b5f8ef06acdd4365d1c8","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.11-70a4edf0886e93362255b5f8ef06acdd4365d1c8.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-BXWZ0MGaYdxu3egF/wqf7G8SrLAJ1L7fDG1EKwq4GKSzrKyCgUR0tIA82UyMsn0ABc8XWZYCBTKpRsRzkhLR+Q==","shasum":"81693ef10c1b0a2a95f12736648998d33b9c7bb8","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.11-70a4edf0886e93362255b5f8ef06acdd4365d1c8.0.tgz","fileCount":232,"unpackedSize":8339806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRmhMCRA9TVsSAnZWagAA7d8P/0+C3Cf6bQStUZG70mAl\n39tO90TFFPur5SZJ5CiOYtSFAVwnv+7iv2gFAO6ODjYMTjXvLAbEzuGml5No\n7YU8C6jWfYQc/37dyNwk5diG+w5meCxUKJOLjY+xjiKoWbnyMHKJd+KnyOFW\nVnwcuJoiNmBG+8FuTMCl48vfdfcjikdr3hxzO4aOHNRpoRKq5D8t8LxkvyCW\ngCz+mldrJIi7cDtewsDIulBEjwIJIZvisiCubjLq3BwkzjYZ0FKaudoCfW3v\nAMpKIJq2p/ZRUNFRvttPSt6bOb2pfd8LC+oA6QSmMMQIFDuMH9FTXoX5WlI4\nvpYRA5/zUxKabR1O/Tr3lfrQNN9gh/L/3Evzgl+PeZbWhwzim/1oWcQ60ycV\nHH4mZtjhU9AtPnNYsQ79C9eu+JEzzbgkkivtVN2FuqihOwQzBW2LNmlSFvhE\ndrHH64m+ZVAEPEtPyJQ64odYegp/ImkDYsNpOKWxMFXDOyIX7EFPuiTiOvLf\nSP7S4k/vnDL7gwbIovH+4gK5TAWvnR+kghd0Pz4VDIVBm+TMYw0wLOsPjEnz\ncK1EV6wCksXN2AuWkeFkfDl62a0hOD5tzh7vwM48F3YNVj+EIqn9Nuvc5il3\nAjxfdrlIWqCd7Rnk1uDQzDhudh9wtpQ2CjIOf5m0EJi6iKMecoiwvfFm0ik7\n8dwF\r\n=Vlkk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH9dgkaYFopx9Jke93sdftwjuPK7uOLWo9ZoKyd9j3IqAiEAoUTtVM20JR6KIh6z7WJ+e2cr9Wx53scsXAJ6Siy6BOI="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.11-70a4edf0886e93362255b5f8ef06acdd4365d1c8.0_1598449739442_0.4190104605567373"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.10":{"name":"@unifyux/web-components","version":"0.0.10","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.7","@unifyux/icons":"^2.0.9","@unifyux/theme":"^2.0.9","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"fc1a051c95cd473c2c8d02daa43394843ecc7c31","_id":"@unifyux/web-components@0.0.10","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-aKZ8whwnNkdnS7VW4XZPbcs15yzFlxnEWJmCppsFotH3G0e/NJyfEuLEVK3k7UwlYdcd+Ay4GhvNtWK+rmI/+g==","shasum":"70276662893a7bdfd69edc7288f55fe912f2b24b","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.10.tgz","fileCount":232,"unpackedSize":8339600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRmuBCRA9TVsSAnZWagAAWPIP/1YUKgoVxzsALOkIq8oK\n5OY3AwsPO0ph+njV/2cpbYod/SydUbjHzI8luYFFGtUEDNrF/isM2EatN61J\nDJWHz7F1ucsqTnV4fbwN4eGjHI9MrHzMLEZLB2TDSzPC0SgJl3EgJeXpqdI6\nmvIfPuJ6dmFoTowI06NJ3hZQCLIXn5imuyA/Np9BFlEla6hjYa04SrUiWdB8\nV26llKHAuv/adhiF3A7KY03DIp+TOyvE9mE/S/z8mBY0TlCFZwFaHZRxygUq\no33hYGzMtlwRBgQKhBUOdaFYrZLMHae6EkMXoefdDgDVtzKridjlIsgsNase\nyaMjzuqNH8W6KT0CZKqE5XitDfm0qCE+RttGq6+NixOXyEinvjlWx/aPv4rX\ndB7u6BSROmipwFoxPAmCvPNsvfAOhbb5BTmRa/fQXQuPPfBt/W3p3uCroky/\nSDKtWOGJW7no9e5h3k7enedQ0W3qZXc82cgbpujy91CCvgOvg7yvKzAmq2+X\nKk9uOGzO8OphZsD1y3bpE0v0YfB0eoxMNKqhcW2+T8cuIzbOGV0TWXd3kyVV\nmnxn81CLbuGnKmewrIngQa1T0sECb4gErJ8tyUlEB0BkQSXZeD+KinM3lbBC\naKx3nBe0EkppFLm3+JIVEp49t2sFpRyzINuxzQP8vzaBI0j5AGziLbrlQ8D+\nO4rn\r\n=1UGe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDZbYfflJlhEVo192qRM8pdCUHYiBVqXzDq3Dklf5chlAiEArH6vaBe6tyU+F2vtttbIeXFU6n6TboljmF8ih7qvRDo="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.10_1598450560825_0.17329163946815407"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.11-8df7d5ddc96c4726634e967f8c70c5b1a81b62c3.0":{"name":"@unifyux/web-components","version":"0.0.11-8df7d5ddc96c4726634e967f8c70c5b1a81b62c3.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.8-8df7d5ddc96c4726634e967f8c70c5b1a81b62c3.0+8df7d5d","@unifyux/icons":"^2.0.10-8df7d5ddc96c4726634e967f8c70c5b1a81b62c3.0+8df7d5d","@unifyux/theme":"^2.0.10-8df7d5ddc96c4726634e967f8c70c5b1a81b62c3.0+8df7d5d","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"8df7d5ddc96c4726634e967f8c70c5b1a81b62c3","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.11-8df7d5ddc96c4726634e967f8c70c5b1a81b62c3.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-BtT80lpnWMKKc513rsFGFM5W9113sQVS0qpB875P0gqt8bGlC9mKsBK+FP7+YiqizzgXQdJTrzzcZ6+XFxBiuw==","shasum":"ccb7b29fb8bbb9e9971bcd52d10061b7cfa18a2e","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.11-8df7d5ddc96c4726634e967f8c70c5b1a81b62c3.0.tgz","fileCount":232,"unpackedSize":8339806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRnNwCRA9TVsSAnZWagAAQBIP/0JSWKyxX0wgjHdFTUUC\nIiaRN1OV2MK2T4kGgs9rCwRrl8jsAGLzRPkmvq22cJiJXQR2nnL+n5OxZUxa\noErOFtKcbntXLy1sIjLVlf0bt7fBvvGnbUlMc8t/evzb20GR/EaFfr0UBA3d\nPXMLdszXkgERnMeo8Tf/vhCX3R1i0hbzlVsk/MKZJXEmLAPtcdbu2ZwVV5g3\nB/OKMbg9WoSzdJ3LLElomAE1L5Qj8M7+FngksXD4FRFUCPBkQOAAlP7hhekv\nRY6fkbHx73DbBYcqD1LI3vi2MqMs1wuLhRRjvuqVQnAFZHL3wur5mQzTRDAZ\nkreVXq0E154cWLAHzTmq+avw1jck9Qza9nvP/DDsvJiDGN9evoIazNzoW9yk\nylkHT87RK6L3lYRU23xZt8rOD86cuUT/UWAjduopb+eKsntEEp4NvNG4UihD\n5LyT2saK75vnF5U+2rukrY7hzj7ooA3HtJRUdbCxSRPG0sA8nM5vd0yLsy+w\nA4FGkt9gJrsjgdxOAGWhWRSQN+UKAik7pC2bRks2KLcFL/NnkOZH2f/AGTJt\nEQK4gBpN3hms1I2PotXmSxnlWqPdsBLZxcqjQMYCdgIpqJU7qg1Y1xKqXpaV\nkTi/gtzVxl0qgWud2unbTEwi5oXOnmS4/j54sF5Gtie2JGhDtHg4CUN/BrJU\n0oYy\r\n=Fo0/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2/6xnBPNr24ncpaxy90JYBTS3JtriA1dYlQzT6X2iBwIhAOvnqAkJgdSoBdo8utAFeK2oPtAlAT19r1jesjzzZpmO"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.11-8df7d5ddc96c4726634e967f8c70c5b1a81b62c3.0_1598452592050_0.3019680226102286"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.11-c83a0c1277ceb6ddf56ae1da9621c5a0c6d1c2dd.0":{"name":"@unifyux/web-components","version":"0.0.11-c83a0c1277ceb6ddf56ae1da9621c5a0c6d1c2dd.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.8-c83a0c1277ceb6ddf56ae1da9621c5a0c6d1c2dd.0+c83a0c1","@unifyux/icons":"^2.0.10-c83a0c1277ceb6ddf56ae1da9621c5a0c6d1c2dd.0+c83a0c1","@unifyux/theme":"^2.0.10-c83a0c1277ceb6ddf56ae1da9621c5a0c6d1c2dd.0+c83a0c1","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"c83a0c1277ceb6ddf56ae1da9621c5a0c6d1c2dd","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.11-c83a0c1277ceb6ddf56ae1da9621c5a0c6d1c2dd.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-MizI47nYZ0bMJ9Kr5YeLsPymNNGSCHwySWXuRlyjBOTnRg+aTxPT+qdF8tt44sI541FrdOPblvs8jyI1VFRNHA==","shasum":"aca3b63399507ff3ab6e471798329329ef1d30cc","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.11-c83a0c1277ceb6ddf56ae1da9621c5a0c6d1c2dd.0.tgz","fileCount":232,"unpackedSize":8353567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWSpPCRA9TVsSAnZWagAAr7EP/icsHVN0kY4ptdnPdofo\n3SMU3Yh48qmf/vXt2QavGSZLZzVlteWWCYSWGLY1PxNKBHxin5VnTncd6odh\nnVxV2jVkAm4XJwZiFS9h+qwN/X3XRVb5B8aDXXNOCRPmbUBCF/truhewjMNV\nZ6xFiCL+5NfUa4J98w8GomNwA0C+qU7t2N2Gc9s0JsiB+GUwTQm4S+fFP0Ny\nr88geu4xAhxy1kxLWOypRBpk7h5C02OfOX6/rHtgNCRtPJlMfvMZQFrFWPVx\ngExrLP3YD5vahpFpmI29T4oUhV+RXX3mFAnQc6GqmMpUv4M/D//cIv/oukUe\nhDNj7cFWNocUG5ycTbD8mcp9QF/8ym69nIu2czHfdJZYg6X0+puDftRjZyPd\nlHSo2ErPIV7L3WYTFIoA3zcUQFeb4rtlbrvK+6sSf3bsJASltN/14D9XyA+4\nklJKCyUrEQWxEjdIIiKJngcrSG8OmjpA8r9kmvY1LExnP9kazBO6nsnLGScP\n5Xh3VP0X3MDq/kEYTWRIJBGeU0RHUTcemGmviVOA66EXsgDKKkKUn13gINLM\nEZIaCmJ3zRmrsIv+MBPR/iku9QdqmA7+cmfG2NJzKvXEN25xtpO19g/AsKJK\nBNlePC3itk1j5EmT+Py1LJYOoc48PB/vgLNd6wQnaEd9ymOk7FOXKxrZ+LT1\nhggZ\r\n=0kaK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPJdz1PpD7dtpoGFN1gqI6R2zUmH8XagSh5idKmUVvKQIhAJPf+a4lL4Z5bIHfu2grYFkKwaRsQTIRFkG9dCzyUPeN"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.11-c83a0c1277ceb6ddf56ae1da9621c5a0c6d1c2dd.0_1599679054451_0.9943051270306829"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.11-e1ab9142002c747c41e976d4abb556e7406d60b1.0":{"name":"@unifyux/web-components","version":"0.0.11-e1ab9142002c747c41e976d4abb556e7406d60b1.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.4","jest":"26","jest-junit":"^10.0.0","jest-playwright-preset":"^0.2.3","modernizr":"^3.9.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.8-e1ab9142002c747c41e976d4abb556e7406d60b1.0+e1ab914","@unifyux/icons":"^2.0.10-e1ab9142002c747c41e976d4abb556e7406d60b1.0+e1ab914","@unifyux/theme":"^2.0.10-e1ab9142002c747c41e976d4abb556e7406d60b1.0+e1ab914","classnames":"^2.2.6","focus-visible":"^5.1.0","playwright":"^1.0.2","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"e1ab9142002c747c41e976d4abb556e7406d60b1","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.11-e1ab9142002c747c41e976d4abb556e7406d60b1.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-Kloc2CqrT6QUk5+OKcZZTU8WPZtsSE9Br3Cgr6Tmx2Pzeqrx93AY/A84imbwcrZGW+iPIsRJ1hYu5r9xxA30yA==","shasum":"b4b9f7d8c56753192736e2c258af00c20caf3bd2","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.11-e1ab9142002c747c41e976d4abb556e7406d60b1.0.tgz","fileCount":232,"unpackedSize":8353567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX4cdCRA9TVsSAnZWagAAsroQAJKAfW/zcdsLKveM7iUT\nkVaUkp2xHG5j2p5LnflOQfzllJCYf8ySPSZOrapuAJJc3SauKBW+Y/NBUxl4\nHzyEKhJW6rZ8EijjNuHLEB+lXGZdHa6rpI4oZZBqJQwNMY12VPsHECTq5hDp\nA1uB+6JwIcR0ONQ8/sM/K5t9972t+H9vwS8vaIP/Sx58iRKVT9QjtlkuBRAf\n0gH+9g/iofThRmWHfMl6DAy946my65anqmqXXaHACoCjBId4tClAA+Y9Lpt4\nmRzXWImd7d10dMNbJMfsySOzxmrvEHMrfy4RGMGtFUuGI2QiSOIbHdP+nJdL\ngQyZ/NvfmontEsxWBa85izmIAs4oRaYe5bUG62Y/j+Z6m2MZoH0GZMhEE46y\n6EqEBBLrYqc5qzgVHLOxeeNpIvue2CX5z2rXRjwuLn71TYRoQGBQozrF9jMv\nxq1n4MZqz7ur8TtTgAJzDA3MXdfaRH/PIIjpP6LhrAc6jfp8EfhK86uWsyT5\n84OH81TF0nT9sPE7NmPS49SeHpwEyPAiD+Db3CBB12lQgYSgvwkHKDHxR38n\nAuZoCKvGhpUaGTgdi2+n6Jy01WLC+dMxyFH6Paka+TrDfYqk1RpQRbXm1JMM\nf5mKqdlytJvlzcZ5RAisz7eAtjq/DB5H7Hs8vOisykw87MK7y5CiaHCv5ZoX\npnR5\r\n=xIJl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICI7oTGrNwjOXUnzKTAhx8UPKfiLLVBPBHe0bnTH6YXqAiBCe66ixa6h3jer0W8/09/NLql+t+QkzxxQ+tOG7WVbvQ=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.11-e1ab9142002c747c41e976d4abb556e7406d60b1.0_1600096028476_0.7650756577886222"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.11-dcb55221ad448c30b0242810748ea7372410abc3.0":{"name":"@unifyux/web-components","version":"0.0.11-dcb55221ad448c30b0242810748ea7372410abc3.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.8-dcb55221ad448c30b0242810748ea7372410abc3.0+dcb5522","@unifyux/icons":"^2.0.10-dcb55221ad448c30b0242810748ea7372410abc3.0+dcb5522","@unifyux/theme":"^2.0.10-dcb55221ad448c30b0242810748ea7372410abc3.0+dcb5522","classnames":"^2.2.6","dialog-polyfill":"^0.5.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"dcb55221ad448c30b0242810748ea7372410abc3","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.11-dcb55221ad448c30b0242810748ea7372410abc3.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-wS09rnnRpYXcL465sx7fyoaqMDTpd+h9nVxMwBhsC3l/liv4supCK2MGvSwTQT4g0Ia7U8lMgGMaC9z8bhf65Q==","shasum":"137e6173f486c617cf436648edb0c9ddf39c3714","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.11-dcb55221ad448c30b0242810748ea7372410abc3.0.tgz","fileCount":227,"unpackedSize":8523440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfal4ICRA9TVsSAnZWagAACewP/RzVKBtrL57zN8SihdVA\nT3KPDeWOBMaNgj8Jikyu4U4Q3yhh0Mpd3sPYfMMjdc0l4lY8dwIjiQddv7bo\n4zUZxfHr9Owfq0omTZiCn+NUqiCLJCdszTPlbp4P5ORUh4AFLlvIW7eLB/mZ\n4YiiH0BDpJnSoGMO5mkNwYNBwpEG0sKV7jN2Eg9ofRZqckHZBtCsNJ4tlk8R\nHXmnAYH8JVdpUb7Z/CnT9Z12TbZPFZNua91cEawZp9RGx+gRt0cz5ms8KjX3\nwuEn7syfPJjZrn0LXoVtKrVVmFW8WdmW06w+Ajp9SdGbPyKbgceU7JrzYOlX\n1KONldANWlBj14iYKCnk8NDn8JfCZT71GXpzjtteMyvpjeH8nOVh9Ta4PUBn\nJdJ3DDpBxf01Cq08ekFnZhl4Ezw9ZDSR2cSfg5KYdTHOF1bmnWiw6IW5XlhM\nx9Jb8wKJfpUp8wxDZilYw9Sq14pE/omlfNwb6IGaKT9fpQ/2k+gqxq1Wvs8j\n831TYMVbUKQLVkjAxsbEniiXdG7T8YKKJHlZOK2QfLnDvZeO7ikQv9cOiyXG\n62IgyEAmkTqBW+4ei2Tb1nfPyh3DZXjYC+8kcCjAdRb5bYjXLrrBqdUHHySy\n1inypI5PoA3wQBK0rGfmiWk3La2/JPbwuZNC69C/YUVmfNC8ggSv9UDQ0JFb\nAUf1\r\n=o14R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHIXDwqVJzRB11FemJdJok1YrIznC/452/cyEt0J4YvnAiAXy5dkUShEnUNLRO/dFAqUZDhxZfqsFCiUXnt5OcYvpg=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.11-dcb55221ad448c30b0242810748ea7372410abc3.0_1600806408122_0.09583385548999801"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.11-4b2085f47ba759f60a8b2404282e7c89f433ba6a.0":{"name":"@unifyux/web-components","version":"0.0.11-4b2085f47ba759f60a8b2404282e7c89f433ba6a.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.8-4b2085f47ba759f60a8b2404282e7c89f433ba6a.0+4b2085f","@unifyux/icons":"^2.0.10-4b2085f47ba759f60a8b2404282e7c89f433ba6a.0+4b2085f","@unifyux/theme":"^2.0.10-4b2085f47ba759f60a8b2404282e7c89f433ba6a.0+4b2085f","classnames":"^2.2.6","dialog-polyfill":"^0.5.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"4b2085f47ba759f60a8b2404282e7c89f433ba6a","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.11-4b2085f47ba759f60a8b2404282e7c89f433ba6a.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-sXQPwVb2vTPjFE8KaekH/6lrGROaSjaD9sTcrJ3fClzpW6yjm/maUMxSgMnYbA+fNmCxPDbCQCwgzzOTzu3CwQ==","shasum":"24b28c48af2aa411d0c55d189d6ffe00877b909b","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.11-4b2085f47ba759f60a8b2404282e7c89f433ba6a.0.tgz","fileCount":227,"unpackedSize":8523440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfal7OCRA9TVsSAnZWagAA2bAQAJAru7pDOnI0hZ6HUFAK\nQDMraUZZelIN/q/OdKC/Jz5Pi4vwgZ3ltzF2z1tFq5uBE8P3NSeGonbn+1K6\nhXzXy/R4z1S7s4DsZgloqaOjTHO3evFwiWrFu0G6Y/rjBCAshhURyyQ2oFJM\nFgDUj/gC0DsHsK0xnopUBhDUql+VKSGqusodtqvbMAKcKZJ2aNLT+sw0gnAs\nzBAC2ysWHxvBH2idAhX6RhUH2l6sQgzJTkq6kueYEZvHfV/1ZnPErNAhF/k0\nEGLBYzhREmifaHM9quUmibeaaf7fiHhU42IuEZrstVwoesbqmWXFVTfgzRlZ\nE2bonEO5yp0pCS3WtAknsTuFrfdo4VDer0AtSLPeSzfll+eafHu0Szb9a66a\nG589I55tyUNSxYFDJI7+70WJwamLDil/lMEMJ33BGCdHEsmEg+Jfo6O+SbMU\nHHgJBy2p5KdVZYNrk55lMAGMT0GBIsbsjuTsi5gc50BsjirTeOYlmNz2SWj2\nxLW5CQTluwrqYrz/6X3UK7hXXDnAJK4OpYk2gv4l4J7kCcOOZhzIaKKLiWWD\nyfyLtqmkalq4d1fK9KHHVFCscwwDW51maYJA1vuzxwP2g+wUS7nCuqDbTRmJ\n/H5BQj7FWxr18+mLj9KucsCEO54NNA972Wrpeq2uVcX2BkDanvQcErksWiEu\nzgfl\r\n=1+Ne\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaUiGOfJYIVjgMeeYoRH5x9nweJDqPBxS8c0Bu0JRMcAIgaYPbA+vDFv7oX13rOL8/HflDSYqxPD+PIdvQWEZe2Jg="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.11-4b2085f47ba759f60a8b2404282e7c89f433ba6a.0_1600806605415_0.6677347472762021"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.11-ef5f51c548c7077815715825cfff9a30a8d5b7cc.0":{"name":"@unifyux/web-components","version":"0.0.11-ef5f51c548c7077815715825cfff9a30a8d5b7cc.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.8-ef5f51c548c7077815715825cfff9a30a8d5b7cc.0+ef5f51c","@unifyux/icons":"^2.0.10-ef5f51c548c7077815715825cfff9a30a8d5b7cc.0+ef5f51c","@unifyux/theme":"^2.0.10-ef5f51c548c7077815715825cfff9a30a8d5b7cc.0+ef5f51c","classnames":"^2.2.6","dialog-polyfill":"^0.5.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"ef5f51c548c7077815715825cfff9a30a8d5b7cc","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.11-ef5f51c548c7077815715825cfff9a30a8d5b7cc.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-EkfmZOfIvn9ddMnw8SFe4jS7fWV3gB2EMubP/n1kYpnAQvlxZVKzKr1gUaQxkiGQtB7aZuj3SQrzc8Rw4Fpmbw==","shasum":"9a79fab0ff44380434a18f2596f481f0c3f0cec5","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.11-ef5f51c548c7077815715825cfff9a30a8d5b7cc.0.tgz","fileCount":227,"unpackedSize":8523440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa1NbCRA9TVsSAnZWagAACjcP/0w5Zqs3JTDJ/Fx0FscS\nwIQ4CpFN7WwMawyvcZhVgDfFdWfIp4F9lxzFvmb8TEW5LhRY+GskTO5GTThA\nt6LFR8kX3trQA6iP0SQOrLYL7Pgm3GnS+teg3ZbdZ+0MFEPGA9mn+tDIZksK\nZyfBX0SSFSstXmYkL5qgD5DFWPKW9/GvKuIMu0mO8CY00ej67R6XiIGHY8dg\naNmboQe5Mwn0xaOxELZ2WluHfviB9fwj/BmJNlVCfCtfnl/y5X16lvWN2sSI\nscP0ISuvs+rxCeXoxhOPxNgbuIIWPDpgQNQA/fW4CrJ6uqBaw94BnEeDYjEC\n/VlCrDzihtii5ujeHNznR+IDqfYGwJrdpmOECbSV96nPysCzZucYZH+GozqV\nhs4FiwhyAUkPoEjFz9qHBBUs9U9c+BnI/vGcJeSZoTmjd8lR+j5Sy3ydDqNC\n/SXC8GKAwzF9gGb+2EwC7Bt/kwOoCjOdUeEMV6rkzy5DilCd434XYPS5GwAe\neMSrZ4bp/X6bO2IRA6o+Sp4Jn+hOwyiiVGSq9kuKCYYrKEYyGtiBwVIZCBYd\nnXlASi4YwBtFxAQ7LuIj/a5XJkZyYN39vw2uJgmFoQAn7spycfFTlmwdFY/d\nZhf6p/8OmLdTuQScQsAipNuhckVoEQdC7Pk9BUrpjvFRNxS64YPz9MY+kl2U\nfehq\r\n=FBUV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdIYAkE8I9qbzjcVjoKUMUTa08xBkt3ffJiQGGUKzMYAIhAJWSFvzuhgcYHUkdBXrLdR+atQWhZ6dhjoQU8scZPaES"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.11-ef5f51c548c7077815715825cfff9a30a8d5b7cc.0_1600869210559_0.03924341882012894"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.11-43814241adab71ace78b62203bc05c300ddd587a.0":{"name":"@unifyux/web-components","version":"0.0.11-43814241adab71ace78b62203bc05c300ddd587a.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.8-43814241adab71ace78b62203bc05c300ddd587a.0+4381424","@unifyux/icons":"^2.0.10-43814241adab71ace78b62203bc05c300ddd587a.0+4381424","@unifyux/theme":"^2.0.10-43814241adab71ace78b62203bc05c300ddd587a.0+4381424","classnames":"^2.2.6","dialog-polyfill":"^0.5.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"43814241adab71ace78b62203bc05c300ddd587a","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.11-43814241adab71ace78b62203bc05c300ddd587a.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-ANTk3LoTjyW8cODq0CpfzPtDH32kxuJakQO/g+u47UB3ubpxaVnAhThLtAkDQaVlTNTaTerFOtBNCm20QSeQgw==","shasum":"3c666dcfd0a0ed62a9efb15fc8927395418cf26d","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.11-43814241adab71ace78b62203bc05c300ddd587a.0.tgz","fileCount":235,"unpackedSize":8572851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd9d0CRA9TVsSAnZWagAAL+UP/3UM7Bcsw3VtD7MIO02K\nK6EbW8IFBHQiahTxxLNVB274HkBpO7o1Gt9bpS5yyrqtI+lCIPeASbP9Ua4l\n8gq47S/ptytp/fhmsV0fma8BJsFCV+9VIaA7Zp3KROz/8Sd2qAujHXsCEgib\nbZ2M7ZgXyVwb33czXyIcLYzWydw7XsNpNIRC3JS2oylHr2Uv6CDaIdcW47hD\nGHpDDxy7kR2I1jaPDNUo5qa/uOgRZbXhbEBGHygKi5I1e9M8er3go2pMAgug\nMJ/8ecSFHw24usLJCBQ3u+yM6HqtcfXYKyDoRicoDo5I1Ha4NuBZZ7PsXA5v\nTwUs4Aj/YQIF38sjciOj8oQkH1cYHSw+gN8N8YvOmpAd2C6Xy647vfgf+a+E\nD2iy5IocnYFT1z8cWza0N+8NztB+KJ538O0poXxTjCQVVy6eaBY7U58puvDH\nY1SekdSYuvM8UyEO/pttxofzalP2N1jPeOxl2hVATj1eBFiFLUQ7EsWs5E3A\n9LwY/VvEX90tJ4wRPVSkU6xwQub5S4a3s4My9Atj0SXejnYaxPH+Vrd+tge1\nzs17CkA0raReDFtDWeEU7oDiWTz/yupw+B553/SODMPyaUSuvk8QKpo5XpgF\nv707Yk4um+MJFLgoWjd5T3hUQj/gyFRyGM6wPVHUQ9kC6N0xIF/ySAxTnu81\nSsuC\r\n=BDSZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeeZ6sFA2gXWTmJgIC0/guJU7hv2zOkTtlpFtMTsZ6pAIgOgaCGEC4VGOkYUJ+INk7DsaNo9AMjYuFten85GfXRpA="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.11-43814241adab71ace78b62203bc05c300ddd587a.0_1601689460083_0.22689273037625668"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.11-4e1e7c1aa9602a25b01cea8594611d5b86d90ca4.0":{"name":"@unifyux/web-components","version":"0.0.11-4e1e7c1aa9602a25b01cea8594611d5b86d90ca4.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.8-4e1e7c1aa9602a25b01cea8594611d5b86d90ca4.0+4e1e7c1","@unifyux/icons":"^2.0.10-4e1e7c1aa9602a25b01cea8594611d5b86d90ca4.0+4e1e7c1","@unifyux/theme":"^2.0.10-4e1e7c1aa9602a25b01cea8594611d5b86d90ca4.0+4e1e7c1","classnames":"^2.2.6","dialog-polyfill":"^0.5.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"4e1e7c1aa9602a25b01cea8594611d5b86d90ca4","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.11-4e1e7c1aa9602a25b01cea8594611d5b86d90ca4.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-1//ShPOh3JyvJsNUsssOihn/kE3zy+O6x236HSbdxfOXUcn1G9tv6HGcy2Dwg+RlXxsFMbJ7YAQEGkt2DtQQJw==","shasum":"87ffac17983a3cde2cdf57a449164e40ff2d2809","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.11-4e1e7c1aa9602a25b01cea8594611d5b86d90ca4.0.tgz","fileCount":235,"unpackedSize":8572851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfeyRpCRA9TVsSAnZWagAA5RMP/3uyzi359Hfe7eUgsF2w\nEDO06u1KYc4wpPP9MPJHL3rwFRsHppVKsXlVrVPXvlqTZihtJ5WWrAInC1BR\nIx/XQksYQ8xURg/uSRP0WZ2Y9RQc5rXKIx4y9IcQKXPQv8tsCHtQ2JvpnS4I\nO7LSaUoZ10IXre4cJRXs87Z+GRHFtz9i7H+lgFu9N3FSaI6lOBHPY22btShf\nKmTz6Fh4oZ7PWsud/0vzSjKAG+tXFNKa6wIERGNGif6oy4PHGX6Hlz+geOR7\n+5rB/pQ7O2K6foMu/5q2zCcVDKlwzGtxfbla6bqx/Lj6VvJwAR056frEyF4r\nPOh+xkGm1WnKBO4HHbDcXYZilM/a5Euo4xsFoMVDcvF1/lEjYF6eO3z6WXyQ\nPlJTz/yXoR/XnPQYzMiruclG4azq/7e3WWI93NinYvvFYvGQRaPq6ZAVm0OA\n8aDppeEWqvnO3FCB+VcThX4wzof4PyNYSRmkASJJol5lysoQ4cgwIugF0ILP\nQD7m2QkFpUUBBM657T/Ozr3RZAicftaJKHugNs2de4lEBVb8Cy/Zp5/x+ZSm\nkqEU3jF9NTxv0nW2dqy4zZtiu++BoOKy0DIXdLVuxiP5EjbHX/CWOxznqQdI\n0Sggs+c1IjXu9adl/KFtjYEXgpruENHRFORiVev47k4og9nYVii9/u6MjeG1\nU+0E\r\n=uAJ+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwYdINelM/7Ep/AbeFf/OJn/4K1X2Sk6JWmC/XTR0DFwIgWJlvs050ioNPhbznXH7MsLPHiaIrZljTH9nLyuQoyV0="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.11-4e1e7c1aa9602a25b01cea8594611d5b86d90ca4.0_1601905768974_0.13915388955029218"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.12-85c20d5920a33e51038d4a48d8676e292e727493.0":{"name":"@unifyux/web-components","version":"0.0.12-85c20d5920a33e51038d4a48d8676e292e727493.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.9-85c20d5920a33e51038d4a48d8676e292e727493.0+85c20d5","@unifyux/icons":"^2.0.11-85c20d5920a33e51038d4a48d8676e292e727493.0+85c20d5","@unifyux/theme":"^2.0.11-85c20d5920a33e51038d4a48d8676e292e727493.0+85c20d5","classnames":"^2.2.6","dialog-polyfill":"^0.5.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"85c20d5920a33e51038d4a48d8676e292e727493","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.12-85c20d5920a33e51038d4a48d8676e292e727493.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-14dkOQuQ83dqo1qOKJkaCts7pp7HKL4FBOAxRdJPiEGO6TGs37/YoKjNm9Wu/OxAOrLyY6WMM5El4+3bLrCxBg==","shasum":"d73f7e8473090d43d26663a94fdd31d43fba0dc3","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.12-85c20d5920a33e51038d4a48d8676e292e727493.0.tgz","fileCount":235,"unpackedSize":8572851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfeyaYCRA9TVsSAnZWagAARaMP/AkONbDVdWEMElKi8mF7\nW+XmExdcirHVNvVkENPRlrN2/FuJK1affMJ8KhJMNb9VpxJV+qE5clZ1Syza\npNF1ysmjx6wB3qDbsjncny+ycR8OUMZily7RfiOh5HaS8b2RD2qXz27FlUBV\nAq5QCucXkjXSeD+swOcXSlMRceGt4gmW07JSXvz5eFhlkmgeTpdz5kCDssj4\nbE8+PvsweKtJTgzU1c6NR3F9DSLwANn7rxBikFbAGB8+1L9KA4uqLAkz+g+f\n+r/KX8Y2AGJ9ypqxaEK6/VIGWJXBJ6SyyjXQN3gVEg7pCpX3dtfB7eLcB/7j\n1SCA6V8IfeHcVc1ed7aQz7q6PhrTLdOtLPDAM4U9nDyks5e738ekIylB86G3\n2dVyzd2dr1VN+1ozFFtlmwxU/r3vDFnYi7auERcjA01SD0rs8HDIoJPI3+94\nPJ7Oz9uBY+ipUy0lg0aHD3M5sNiGeyyc7H7RVWPtVKZ0arBtohWPRnps8wdf\nmwye973F+Luvvxh8r6SNJK+vb/EvwWkjGflrdxiaTB1rc078k9Uxt8Vb2nDc\nZJH/jeiKbtuggNDLMoSbLfnPdOkF2ErPDKZRSsAiBgmba+p5FeAR832zA83I\njUto9UD0917yQjPBwXF8e+d7L1sJfnLFzBWKJ7R4TGae9+P250Rppn2mdhyv\nSkU4\r\n=a8jE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVy/4uN4epIfOx6Qv5+vtF4niwEjccrAGxuOIFldBMEAIgaKuxvxBiP+xFOvD/3HQgYmNUsj7d1iHX9ybPOLtlKWM="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.12-85c20d5920a33e51038d4a48d8676e292e727493.0_1601906328118_0.21691421571118874"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.11-2e30b1f5b804a266ad11c59bd2fdaf5086182db7.0":{"name":"@unifyux/web-components","version":"0.0.11-2e30b1f5b804a266ad11c59bd2fdaf5086182db7.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.8-2e30b1f5b804a266ad11c59bd2fdaf5086182db7.0+2e30b1f","@unifyux/icons":"^2.0.10-2e30b1f5b804a266ad11c59bd2fdaf5086182db7.0+2e30b1f","@unifyux/theme":"^2.0.10-2e30b1f5b804a266ad11c59bd2fdaf5086182db7.0+2e30b1f","classnames":"^2.2.6","dialog-polyfill":"^0.5.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"2e30b1f5b804a266ad11c59bd2fdaf5086182db7","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.11-2e30b1f5b804a266ad11c59bd2fdaf5086182db7.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-U2CiMOET8WiGZfnZZelh9l3NqwD8x7oyRMAq/fCT74p7jEVECkgjFLsQC/Kp8FrWnHiMTPpdxmrHg9lCiMzL8A==","shasum":"cd9e0a0901a9e47c9e1fb9bd7fcd20be0d0f46bf","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.11-2e30b1f5b804a266ad11c59bd2fdaf5086182db7.0.tgz","fileCount":235,"unpackedSize":8575226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffJKfCRA9TVsSAnZWagAAkDkQAKOOKIvZ8IhLhtEUoGE5\n9EYKD3peS8+0Mmo6IJ4CVv8+mFBtngOzcTnoMHE9pxAiCw5L6ivnHX0tuMVo\n4RhhtGWhagebn5B+MCXyG8ZKX4DG0I/8LRHZdFwakPwPA4EucZ86GYPlry8W\n/yP7uJE10ShFlWIg0kAWEcNB/w3NFEOrSqYlg4OoBI/iACUwdOVpYGmmIiIV\nsS8K0BKcjttvgJKvzfpLFo393niHdl2UtiGEdK2IaiK4g8BoIgPW1+fMVe2d\n+Y/0LKVaUmyJd3uox0jguS4luFtMdu4UACm8mzDI+g8ps6oGPIQkxjQjUO5f\nnV/dPJt6hUUeADgqnogN1EjTH5wbBVy5hZh/eNN27ktOLYDvoHoboneLKRlc\nE76SUZPtTozZRLAeY9ZzQeWeeYgp7jJwg5t1NQcWFrpky1phqjhejquJCv5o\ntnHcs251XUGSl9XO56UQXcVuQ/KRIA1VYQaOJFl4mtFDqQNJGBtGqcZqQkBs\nb8HRWy7tKOfVdhO+i+ytt3ZiylM3w5nU8JuGvyYkOUgr8C2tL0zl8ZO50tAZ\n6ntZTpxydhzoANe4P1OZ7hksvAiQueIGQ7Ngk+wV5C8V6H4h6/y7d2UUmx8/\n5pggNub36UgoWpHa2S38HLy9AOz+2ZCilf06UyXq5/In6lVTebd1qtstmYWU\nsy5L\r\n=JKcl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEskARSaSH1FqfTe35uXUVvoAWxifcMeNTWCmc80vGgPAiBDOMZzATynKixa+6RG6h5GdgOkcuA9iS1XX3xoj++0vA=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.11-2e30b1f5b804a266ad11c59bd2fdaf5086182db7.0_1601999518976_0.875720344186182"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.11-018bf6796e30d13349944e9bece956c9ef8a2e29.0":{"name":"@unifyux/web-components","version":"0.0.11-018bf6796e30d13349944e9bece956c9ef8a2e29.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.8-018bf6796e30d13349944e9bece956c9ef8a2e29.0+018bf67","@unifyux/icons":"^2.0.10-018bf6796e30d13349944e9bece956c9ef8a2e29.0+018bf67","@unifyux/theme":"^2.0.10-018bf6796e30d13349944e9bece956c9ef8a2e29.0+018bf67","classnames":"^2.2.6","dialog-polyfill":"^0.5.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"018bf6796e30d13349944e9bece956c9ef8a2e29","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.11-018bf6796e30d13349944e9bece956c9ef8a2e29.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-ZXbZT9mK4333UYt8B0AUN6ubatOxSAkRqRgDW0BuXhJJrax4Zaao8F0CAsEmAUgwWwT1CIqHWganGy49Ctr9HQ==","shasum":"62b01971947f58aba932db96e4b34f0be1e81c49","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.11-018bf6796e30d13349944e9bece956c9ef8a2e29.0.tgz","fileCount":235,"unpackedSize":8575226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffJOTCRA9TVsSAnZWagAAmroQAJqycFd8/U+Mw81FO3+O\nfdYNLZ3p0jSp6WUHEnJVBWw8DNX8B2UUccnvENH7si5x++3ekszRYWocO6We\nfKAzN9fqDodhvKPTEU94YedTq/oLNw2uMZ2Cfcamu8OjQ7KnaPvpmav1FaH4\nUSponC66vVgOKbj6RZwRsa2XfS+dvcY9/uBod42wVxk2fd3GyZ9JJw0ZO8Wy\nfKynVRR3AvpgRqfGoM1vXxsRF1sFMAZmQn9l0aFNuVG7olyef9gnz9fxwPH4\npnTDNTgNOdf7okZnuZH9Mmc9EDuAooBSRu5aHiIwFqqZJhOQbm8O1lF6HmuM\nAeD7Qr54pR1hLnhtPlpHJuVFfLoJHJiYL6UTxUCkKBjjEjUVWAehLu17lB0j\npzKFaFzKgpICwvstuJzcbBOEHC8SS2tsH6+NKG+nxD2uQ/AgiFi1HpCvB93Z\noOMTSKDpFRDf3saD/RJrBu4tKbrKgLDCQ5PHhzXNOtgdm2NLfw2jFcC9zah2\ntvK0M4vlLCYLPPnBKeAxyuZ1uoX+klhml8EdGbtfp3HSTAsyih5dzoI38KDT\nfrsFF7O5LICXXggAgd7rYink0PFT8utGk1Z604LMVBO+jnnE3hfIbMuuMVUg\nZwsSjNSi0TuYxa+SR8k7RvFmyS0hjpifADNQYeOg3+UT/LIUOHk2PoW649IV\nwc0s\r\n=oeJ6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/2MZRGN3BXiiulab0cWuo26k/PkZ3NWFeC73YeL5XGgIhANcxMjTajwEjXJBdyPT25+wvw3LymfhS6JKu2RGLAhAb"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.11-018bf6796e30d13349944e9bece956c9ef8a2e29.0_1601999763165_0.12117069415436221"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.12-1a60fd138e52053d5c669df0ce29140fe117a06c.0":{"name":"@unifyux/web-components","version":"0.0.12-1a60fd138e52053d5c669df0ce29140fe117a06c.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.9-1a60fd138e52053d5c669df0ce29140fe117a06c.0+1a60fd1","@unifyux/icons":"^2.0.11-1a60fd138e52053d5c669df0ce29140fe117a06c.0+1a60fd1","@unifyux/theme":"^2.0.11-1a60fd138e52053d5c669df0ce29140fe117a06c.0+1a60fd1","classnames":"^2.2.6","dialog-polyfill":"^0.5.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"1a60fd138e52053d5c669df0ce29140fe117a06c","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.12-1a60fd138e52053d5c669df0ce29140fe117a06c.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-JJne7EF5l4s16v6H5IeBJSvfjYpSQZmKvcq34afu5HTeNxtZM8OeiNlYaXXm8aBC7mgaSU5FARijVbVDo3Effg==","shasum":"16817abf08f12cd16a680c62e6f0e4658f240750","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.12-1a60fd138e52053d5c669df0ce29140fe117a06c.0.tgz","fileCount":235,"unpackedSize":8572851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffKzCCRA9TVsSAnZWagAAH5wQAIpP7iL/MbtOEe2Jqapi\nbxt0Y56CfD4GHr95+jWJle8ao3eUwaKiwyDSHX6CQK4SFcX0UdDRdrsjvMql\nD3Hiz7EDexbhCA7+xBo80OVzlF8OTo2D+IMEBUur9R2xOP4TZN8o+cubXua5\nA9ULdXb8ZBbs392HpXuHqvK1exsulwIYN8tzEt9eKGIChzNLy0at+/8GOEMg\nT2Ln9XPz+bMiNtfMVDwWrKbXcTQZQfVZndxSn6e1Omk8aLPEbY93xY7mvYnc\nKBuH1B1+kO+h2lmNhY+i9qEpi0D0/Yh06Iu2XjHPh5jqoCpfTDGpkJEhfN2U\neRO7aIF90s8Zpg8R9qhMbsi2bjz6ZCFggBbwSxfFEMTOfGGTXOjlS8VbyWKs\nlogT6jmK3MEwZUgIkc/RgVY0FMqg9TlqTU13c0B3fXKMXD0tmeEZei6BD43G\nyRT8T3evAVs+l0ftdyMII4GB3GH0h8/7l43mi36dr7WIJnU9qVgyj9aqnQkl\nMyAyPFYpglibFhxg8tngOAoty8GrHUHNdDmgroVVwR1O4KiH1iyiNFoskI4n\nLPCRbUATL4ss3JZibzMVCWwFw6pxddpLa0iHpCx8syRZiVRPaQ4w6sBytHjx\nEMf8yV+wZqrh+60KoHrbNqytSwhSShydCTiBmLixXIdqpknOFdxPqhWqQh5F\nU5qs\r\n=tBmn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGVXXOaccT2rE2Pt+hNiT142qXrysxVX8APUAD13kc2oAiBuu3RQxeZCTfHDWfbsGtVDeszEhbk36yp6WaWmqYuPCQ=="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.12-1a60fd138e52053d5c669df0ce29140fe117a06c.0_1602006209535_0.9982114091520651"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.12-531ae77628d27aaba63b0c7c29c56bbf7f1ffd85.0":{"name":"@unifyux/web-components","version":"0.0.12-531ae77628d27aaba63b0c7c29c56bbf7f1ffd85.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.9-531ae77628d27aaba63b0c7c29c56bbf7f1ffd85.0+531ae77","@unifyux/icons":"^2.0.11-531ae77628d27aaba63b0c7c29c56bbf7f1ffd85.0+531ae77","@unifyux/theme":"^2.0.11-531ae77628d27aaba63b0c7c29c56bbf7f1ffd85.0+531ae77","classnames":"^2.2.6","dialog-polyfill":"^0.5.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"531ae77628d27aaba63b0c7c29c56bbf7f1ffd85","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.12-531ae77628d27aaba63b0c7c29c56bbf7f1ffd85.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-2cVXdMtnjVZOPMt9llnZhq8KKHcAh6NV503WLPT6I35x7Kc+G43TDwbZAIJ54YFYsy0N+tBGjPnvkaD9bWaEEQ==","shasum":"6caae658044622e5da42d21bc0d9075068b5480b","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.12-531ae77628d27aaba63b0c7c29c56bbf7f1ffd85.0.tgz","fileCount":235,"unpackedSize":8575226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffKzXCRA9TVsSAnZWagAAwSoP/je2TPFpdH28ui2Pv+0J\nZxpVVt9H/wWIvHMNcta7i6zU0LhPCONjBR0GKKulwBEmOtwFex5lE/Q2W54v\n56/gZW+BboLSMORCk4L+OgBtQai2PG28ZHQm0DOxzGT25BhsOQOFnwrrB6nf\noQMMM8+0aw+Bw+dFUvyruyYx09fLYaU9kuIj6PnZx2xxzaVyB6ePytyOyGMu\nUpHr9xq6Tj2ToHAy+G+hda98EC1ibt7mutsCSskNIKoHsj6vpOggQ7A4MOYm\n1liLZl3VvG84wcWSJ2dZu0CIRm7f6XOkNlTkxqbvpJDTHVL+vUdf2Rj5iGEB\nD3ws4KCBjNcZN3UU597Hh+N4g30teKXJ/olpe0qYQkV7ZJ1O54W01ScaA+Qd\nhSHrPy4vrJ7HlSFw9DA7WlrFL6pXtlXNWld7+JIvK+6fLcfHmT9zyvTg3UYM\nTov4UnjD/rvD+rKxeHUciFkrQ2Yz6EYgtC8QKxVtFExgHVHyi/E+aMAjA+54\n3+QI0IenpR65KlEdDquq5opqI1C03+LDUhv8skJ9PUOGdwQMF1TTgnsUbb1R\ny4Y6wOankP3I4ukXjRaJIJN7sYFshkA6/tO5JIY/cX/6qmjc2Os0k9gjAjTG\nfy97/nvuF9P7Uipe2UsDDSI9U11dsgx6/xXzNF09m7XFyjf0c6EhO6t08Y7C\n/50/\r\n=XIEO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyyBLbbLi0Ak+fQqDWtK1B4IEWGuxZOfCgrTjGq4LeXgIgdBQALeuC6Bx6XjADn2aW33WYDZgcQcM3ftHkhy6wKP4="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.12-531ae77628d27aaba63b0c7c29c56bbf7f1ffd85.0_1602006230943_0.3250361524819523"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.12-d57b1f57cfcdc32af00583887e65a9db36af39b6.0":{"name":"@unifyux/web-components","version":"0.0.12-d57b1f57cfcdc32af00583887e65a9db36af39b6.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.9-d57b1f57cfcdc32af00583887e65a9db36af39b6.0+d57b1f5","@unifyux/icons":"^2.0.11-d57b1f57cfcdc32af00583887e65a9db36af39b6.0+d57b1f5","@unifyux/theme":"^2.0.11-d57b1f57cfcdc32af00583887e65a9db36af39b6.0+d57b1f5","classnames":"^2.2.6","dialog-polyfill":"^0.5.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"d57b1f57cfcdc32af00583887e65a9db36af39b6","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.12-d57b1f57cfcdc32af00583887e65a9db36af39b6.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-+7qAopsFCvKzvG8SS2wD//eOVeKcOyO2RGIu1kXjliOHYHUBZ8FKDWRUMFDfklc0rvISPq4eDYW7ovT+qnUGuw==","shasum":"c24553ffb2601a7caf920dbc08579864db830e27","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.12-d57b1f57cfcdc32af00583887e65a9db36af39b6.0.tgz","fileCount":235,"unpackedSize":8575226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffK9RCRA9TVsSAnZWagAAHogP/3o1oenTZB6RZ9JxzE7Z\nUtegNLaCXd44i1yM2OyyNLaoa/6PRm7lIDMxF7FJE3+cU20IrqEuJcGBIAkW\nueHV404xrzP4B1OGdxrNyMceVSGLnnZkUc7jS3hMO9bC95Qqqy90a0lmBeQf\nEmhaH//WI4Yv4yFNuHvT2555ltYuKnSESnuEH65QoehhmezR6vJaiLWBcza3\nE2qfruq7ZuU+jIKyiphOIa4aILi2ntlAtdu2qEzGy2GA+KkIPHMBYG10xis8\nsCdOhEe1NS4jNdOJ28VpKY5hew2kcPQpRKCojHWws30QK8P0xddRDdyso+zK\ndGyZ848F2EXpBq4j5M8hyxqex89cqChlg+MV8K4wAqyuC8hCJYe8GnV2pPdl\nDPFS+xjswNf3CmvoV4HPeaxZs5U/bjGZGHqSWbkDIakN09syY6+vzCZncmZY\nb6HFAaWsD86+S3nXGafkQwHGRdymVVzT+JUyxcmWDxAiCi99GkRcdrI0cJYR\nh8v+Nrw65daoiwHVng9B2R8wGcbS+k5Ff5kCA45NUoi2vxPC1awOC0d3XTlj\nCutkO9iJbS440hW1m3fzt5oBA4otsxieh7ii+DCC0wRb0ngl1r8QXr7mEsJE\nC7i/x6NortuNSARj16sh4X5Zc397EoFTYc2MIVeYpQljsdbuhdspSYY9EH7J\n/3/u\r\n=ej47\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC53jlnwyPVMeouQ8d0CcutpJDYYPwPOmSAQWFns4a0HgIhAJlSHNzaMCRyxsSmGkJ9r4z0UOopUGJWQAiwyUTd6p/i"}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.12-d57b1f57cfcdc32af00583887e65a9db36af39b6.0_1602006865272_0.41677032228003985"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.11":{"name":"@unifyux/web-components","version":"0.0.11","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --watchAll","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.4.4","@unifyux/brand":"^2.0.8","@unifyux/icons":"^2.0.10","@unifyux/theme":"^2.0.10","classnames":"^2.2.6","dialog-polyfill":"^0.5.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"5904360f785a638b253ed38a9d9cc5704022efa0","_id":"@unifyux/web-components@0.0.11","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-LnF7qf7iI5nyqHj2i477SjORSU4DNRjANZx7dLSn5VfWSMOmgqPF5Qu4nXsYuZkh2fQbj5bqrGnHMPGLqm6oJQ==","shasum":"a92ed46cb96b05f4b6fdb72ab39da1ae55c8b7fd","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.11.tgz","fileCount":235,"unpackedSize":8572647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffLJyCRA9TVsSAnZWagAAevMQAIV0iC4OJ4hIliacH9Lp\nWR8Ko3v9dUQy9k49DnAFvApY+fPqamhuRYxPqJVRF0ysziC2miJ3kDfQFvUu\nhqv3w6nnOltD1T9bqumm6q6vad6yo5x2USeBCpS3AkOk+SobOqknx31xADCJ\nAAGMwB7mA02fUo/UpzJ3Xdt56hwq/pqRp9/4StYOlIsUgNmLvuofbapDegih\nEKSae9Sqdd/nPs5GJ3r2qfxfxN17oohOD8XjUUCOB+qsbuSLkeBPDof42NoR\n9rm0pFa9hoByn6i7dNV0K2y7C6T+mLqrEXtjzzb4SGTuewlvaxkZvbpkrAeg\nfZBSUdpxweZksdNp9X5L+pG+iuJNzxHEpMcfgXEH4XKaA4rzuGzN/fsojHJ/\nFT0R8YRR5LY+uQqTpuMKAdSrxLwNNNDnD/TFJbATuDp1w41iL4kZgxwSPE6i\nnzG71jL05/7tvzqA0Sdgg3HbLzPHo0j6B0rBIndZkxy05g16adr/6lDz2djp\n4aebyey0XuDp2zH1KByhT7/IvDQoM4gZTsVyxqKTS6PyusGJJgYYHYmqrVRC\nsN0sqlxxwvISb4S3xcWQ4k1Ofd0itfQguaGS7ock2j2827WKMjQIcbiFOvzZ\nRzVMke3AIGKpF4XjT6EFQFLLj6+Ql3pBG6dcGEOVdpi/woNaDgWSfLk2HAMF\nuHgh\r\n=SDKJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8m9KbnW189tJbJqDJwkX05TiWYg+U/ZEPZb0lzA+FnAiEA/MljQtyJ2clgDecR8T1zgFhKAMDNBcp+Cb56ng+dWTA="}]},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.11_1602007665826_0.16826746094208844"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.12-a7c2e4f5bcba296d1cc1fa4abf3edf6056e7998e.0":{"name":"@unifyux/web-components","version":"0.0.12-a7c2e4f5bcba296d1cc1fa4abf3edf6056e7998e.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.9-a7c2e4f5bcba296d1cc1fa4abf3edf6056e7998e.0+a7c2e4f","@unifyux/icons":"^2.0.11-a7c2e4f5bcba296d1cc1fa4abf3edf6056e7998e.0+a7c2e4f","@unifyux/theme":"^2.0.11-a7c2e4f5bcba296d1cc1fa4abf3edf6056e7998e.0+a7c2e4f","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"a7c2e4f5bcba296d1cc1fa4abf3edf6056e7998e","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.12-a7c2e4f5bcba296d1cc1fa4abf3edf6056e7998e.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-xEl004tKPBjnW7/052PHt38cEOS9gQNRvWrUBep2IzWd9AyAkvz977JYgSLhZNFl/ohnA29ApIQx1VhbWhLfAw==","shasum":"156a88a6ea0a566cb2081fde988608885e32ccf6","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.12-a7c2e4f5bcba296d1cc1fa4abf3edf6056e7998e.0.tgz","fileCount":254,"unpackedSize":9013503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWHdCRA9TVsSAnZWagAASIsQAJ/yJmrrPTc9PdfR8kgk\nQ6zEM7Xake6mag0jXWqaIsyRsHNZRbQIRTYQiQ+Xx4PmYbm+JJ+sWwUrUaM+\n80mC6++jsafwvkM8Zx4S9ZGrvBu6k2adjhuAiLsC7PZU1i+hT3DaszlQICYz\n72793ihHyiUY+BZkVA2HCa7xg2N+boS/jXHXG42ZHDOGMMagnUsY0OS3XF1x\nRZ1/e6FC9MJImP71LvjqjgNBYV3Cs3+kcFBGjLsUNb4K/aYIUzQfIE0rj8J8\nAlCYtz9msKihLMIdFgdaom3r2p1Na9RkL/8X/CpYmnA4z482lB1DupOfjgW+\nNRn7PEzJUc3Ah0sK/tDnmlpuPLKzSgxK/wMW47dEWJuX81A+Xslr7h8hod5F\nt8/sk44352XTCWXFGimYRdkiQMHO9uyRmDAl6nl1XtBXPJm8hV9eV6Q8DW63\nul57X0sPsj7qCiY/Sp5YY9tZzcqfFLdYVOUT22XdKXBtsVoJpSVj1+Hop0ra\npwS2FdjCF9BhzdcdkdoJAke553fyObNXnFbYPo8IKXB4fTB1hDmdvKRYgRXy\nKM312EYJvz3cNuZAsuHkuqE2fAJkJduQ4LC6eOBH1IYEBPHrpHgU+Mn0Kdrd\nMYqYb8YP/WbXf+IsNehMhHWlXn1x1ENBN/qQlkhTEvMq0Y8GL6dXwKf6yQ1L\n0cjA\r\n=+OuG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMr7kYcCwMaXx9BSlgt0hQlBJEAnQM+I90Y+/PV2KQigIgX/oD9RDKNsUAWpbvWN/kjN7OPOcmd3v1jBrG1IhSuck="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.12-a7c2e4f5bcba296d1cc1fa4abf3edf6056e7998e.0_1607033309109_0.4909768909898844"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.12-1a21e287ec35d4f493886393f12242223d25cf3f.0":{"name":"@unifyux/web-components","version":"0.0.12-1a21e287ec35d4f493886393f12242223d25cf3f.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.9-1a21e287ec35d4f493886393f12242223d25cf3f.0+1a21e28","@unifyux/icons":"^2.0.11-1a21e287ec35d4f493886393f12242223d25cf3f.0+1a21e28","@unifyux/theme":"^2.0.11-1a21e287ec35d4f493886393f12242223d25cf3f.0+1a21e28","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"1a21e287ec35d4f493886393f12242223d25cf3f","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.12-1a21e287ec35d4f493886393f12242223d25cf3f.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-FSI+EQ0Hw41sXzfspBpoZ1naT1jPcxi1AyPRoXJmXMEiwubhHDsTNNzoUQwgrUzpsd7vZCVl0yPe0lsGqT8+9w==","shasum":"85c8a5941b8ae59b0b7453a9a049161c6f850946","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.12-1a21e287ec35d4f493886393f12242223d25cf3f.0.tgz","fileCount":254,"unpackedSize":9013503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyW7qCRA9TVsSAnZWagAAZgkQAIbYDq13Ygx1qgYLtiZo\nc751hmiDMxzwj3nNpkHwj8v7M1KXLkyJHcXTEcskJu4+S0bkIMf7dHlyRHcE\n2nKp/YEGgYzGZFtYRFPtswytg63qWCbQagBRh7FsPhzDsFVydfbjfJ2A/lCO\nzgj4oUV7FNxa7TFmAI2tAxWkbx3kHTPud6TXsJ8A2T5vhodPG/P8s6ZO8ITV\nN2CmXdUwZ2kQPTyis3wH1wkFJWBPJH7TaTVQqaBjKXkvgO8cPIdWKLMgylNz\nRE4ae2ouQugzm+iaKNzlZHcptW2vbBVEqnmZlS25Il8TAloso188/1G9BcPp\nMHnM9FF/uQFzfoO9JzZ83JI71aRzmbcYoLWMIzVuSDB9fhrtyzl0kPYIdPjl\n0uRLy3HtEHDXAFFmdZeVKTNGDOmV3A0hHrGnRQV780Umx7Cd/piI/EayX8yo\nu877ryZuxbucWPRzWSUGW9YMaKa4rX0txaWUfnZFYtJi+7UCND86rnzeZ5oI\n/h9pKI5QFx7scxnCLl3gfCWrGCB/nuBiQVTzQEBgdf8713mr4/hZcqtPzAPl\nfGL1qIhp8RFUSNPFTzzHK5IA6QZMkXitZ7GyyVijj5TwVTxRC7zMQ4QlFXhc\nvzd0pJrUOvgE4u34noPJWZCTLlUn/eyswBFcaJWu6wtvNo6ozCg1uJxdci/+\nydqa\r\n=YMCz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErhn+sp0s+qVaCwk7KC6p7nP3iZfVtXKPWvC69ZS6oOAiBIwKhw4fB0rf+DDHuVij8FnFT70+pPMbtz4G1oV9yAww=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.12-1a21e287ec35d4f493886393f12242223d25cf3f.0_1607036650103_0.012268792968766817"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.12-31257c73ff90a542225257fdb41c56dfa7556b1a.0":{"name":"@unifyux/web-components","version":"0.0.12-31257c73ff90a542225257fdb41c56dfa7556b1a.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.9-31257c73ff90a542225257fdb41c56dfa7556b1a.0+31257c7","@unifyux/icons":"^2.0.11-31257c73ff90a542225257fdb41c56dfa7556b1a.0+31257c7","@unifyux/theme":"^2.0.11-31257c73ff90a542225257fdb41c56dfa7556b1a.0+31257c7","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"31257c73ff90a542225257fdb41c56dfa7556b1a","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.12-31257c73ff90a542225257fdb41c56dfa7556b1a.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-LzGO7+2jlLclq95S9rbZSs3e/3DJUIfhUXMnmOxAuRbUKXb21w22atdo5heCSXtjsfPJlXkRkQz4Xq1WSBpsUA==","shasum":"b10ed1135aae9559c3da0dbc7fe20504db44571d","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.12-31257c73ff90a542225257fdb41c56dfa7556b1a.0.tgz","fileCount":254,"unpackedSize":9013503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyk2VCRA9TVsSAnZWagAAs58P/A11Fvw0cQ3OM+Jdsemf\nM+YMzf0fGR9S8ZLJKobdvj/bhUbOneMpvqGTQY6Ux5DPf+uTzUKfJPnldjv0\ns8+ZsB259Y+4zLwciD4CVF1cI56IViXobbHXQxzKEVcHdVlxs4lfOGxV0k6L\nbvJy2G/o4vSIJ1v7w1OkHaHvhOC1ygZ0lj9agZevdXnnI2s19ebN7Hk0HRhD\nFPlLCWoYTZDAt9U2IMIwEJ+AwdrLAsNNvehYbKqL6iRdAuZXHDBFXTWcscw/\nl0M4MCiNmB5Vk/PDxFY6pwdzFfjTyvgE8jFbnKHECQqAh5l6OJqtkzsceKsH\nNAPhdSoj7/lb9YJXdJk7C8NMBlGodiyJ3PPgSvEisAY19PL/gKaDCVbvmPm9\nht58vkaROJon/MsMTBlFaICp+KloxdyG/gnp+miexcQeUkSUaBNxt8p6cvP1\nD8zS0LQmrDZ/pwAj+KwBGauLeC+cssnJ4HC9dILcZ/D1OHqgMoJ4Jhi9VXLN\ny1j5UeeruEUqFVhJwMxKUQroxzB2SGSDsU19UvhIzQKBtnLM2SogzJxU7DwF\nDvGVWMU4UUqg8AJlKeYx5TUblYgncgU4aioHCK4QpzXTJQN5afR8PpSgl/fR\nwvTb+En9LeCacqO+zX8UHNZf3LKMP8Q74PB8ecsVaLk8BnKXlxErKXAH4AWz\nDO7Q\r\n=v4qg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYn2xSVcb8ip+mr8tvUCF+MH+e9EfMIKS27dytJP4rRwIgKl+1tUv3yI9AoTU4VnQA605fgRt26hS4FCZCCRm+mO8="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.12-31257c73ff90a542225257fdb41c56dfa7556b1a.0_1607093652904_0.5557020812757905"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.12-24c26accc62b2cc71f2ddc86251e34694e2f0fce.0":{"name":"@unifyux/web-components","version":"0.0.12-24c26accc62b2cc71f2ddc86251e34694e2f0fce.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.9-24c26accc62b2cc71f2ddc86251e34694e2f0fce.0+24c26ac","@unifyux/icons":"^2.0.11-24c26accc62b2cc71f2ddc86251e34694e2f0fce.0+24c26ac","@unifyux/theme":"^2.0.11-24c26accc62b2cc71f2ddc86251e34694e2f0fce.0+24c26ac","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"24c26accc62b2cc71f2ddc86251e34694e2f0fce","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.12-24c26accc62b2cc71f2ddc86251e34694e2f0fce.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-XpYbhOfOliyKWCl+PApJ0ngN2HyViRj3njYKTsWTnxY+W9Iz4yIp0qYTIJpyc+roYdXcRX7ZWAfln6M1Ncid2Q==","shasum":"7d716b05edfba37f74ec9951f455d3bf8c7275ba","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.12-24c26accc62b2cc71f2ddc86251e34694e2f0fce.0.tgz","fileCount":254,"unpackedSize":9013503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfypn3CRA9TVsSAnZWagAAqpYQAIlV5vgu4mQwhierbaYi\n1oNb0QBheYg5C6ep/orLS1U/YeeQ84Mdh5GWp+DyrIwORNr4uNShivtC1ATq\nawdBBBxg7reO3HmPCIE3r8egfFlBa6zi8knT4h/UbsVonJLvaoFgTfNl4B3b\nyBqOFLxRWBRL2/cir8Se6j5C4MoD+U4XCpjadlTVpx1D+G2WUF2ze4xaIpNk\n/qI73SVxOpwlHPdp7UuGHz03e2FiG4XoxZ9Q9kb+McvcvL4lcvdywz4ZgR7F\nA7vyQWHlefCSzvgrn+xJiKrHrumW9a0FYtL8xmviujmzF+f+YwORU4L1lEkM\n/pZao+Z7z3mauQS/JHS9Z22iN/nEZs01uwBQr1w/yM/mI/Za5cJn5aSsQs48\nFV/lem8Y8yPnIFHILWYTRyJfod06EQrEFx8/L9gShvSgde2/z9ul9WacJn7T\nYL9mzpx2ShIipXt+EvEBVz3t/gXIeSckVS5lKVTWSNgq8z6WJDsmUvqYehxw\ny7ZO5pAaCTF9wK0drsDtXyQF9/RaBAV/hKalqD8hgU7JVWfttFhCArzl2fsh\ngfjhG5yvZuEBS4QvBGBl+83GmAncfZHTgG7LNP3BEN8/etQPsZFF+zJ+XSah\nmGfqwOCvMj3gIMtJM+Ky4Xf/41GmzOwyng/tZkQi+onh5MEX4iR+dv8865VV\nkJtO\r\n=/HNT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLGn7l/KsjX1O+ZEDMnmq7laW9if7Tozs+A3i/6JHJcAIhAOdK2TfduvEEeH+6Vv1yt9dstt0O4brHuBr//Jw7NcmT"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.12-24c26accc62b2cc71f2ddc86251e34694e2f0fce.0_1607113206396_0.31892063156480743"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.13-205dc5e534a85a8a8caf02b6774997ba12e7f6fb.0":{"name":"@unifyux/web-components","version":"0.0.13-205dc5e534a85a8a8caf02b6774997ba12e7f6fb.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.10-205dc5e534a85a8a8caf02b6774997ba12e7f6fb.0+205dc5e","@unifyux/icons":"^2.0.12-205dc5e534a85a8a8caf02b6774997ba12e7f6fb.0+205dc5e","@unifyux/theme":"^2.0.12-205dc5e534a85a8a8caf02b6774997ba12e7f6fb.0+205dc5e","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"205dc5e534a85a8a8caf02b6774997ba12e7f6fb","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.13-205dc5e534a85a8a8caf02b6774997ba12e7f6fb.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-Y0rwKIskF7SwNRoUJZw1Q1hc9+sDTjcKj+/fdHV/pBa/Uxv1qS2zksvORVSbLeEcKPF8P7Bekli7j1xFf70/OA==","shasum":"64735193bf403e1ff2dae76beb55a443e073f874","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.13-205dc5e534a85a8a8caf02b6774997ba12e7f6fb.0.tgz","fileCount":254,"unpackedSize":9013504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfypoNCRA9TVsSAnZWagAAaUcP/joYJQ9MP269WJbLwyNd\nUGTXEtTxkjEl+k+IXAqKWV18/1ee2f+EnyYIUGROHCcCTCcMRhHawFzYVmMn\nJBG1GXYy7ES17fUkIN+E+04xycr0ImPnjjpI3JkehfFTxdEQQI0Ey9sOcaT8\nnH3pPlZQKK060gFPwQ7I+INiXWO/Gz2ntRASGr0sfbhk4SiyFsIHmDjt0tMQ\nyyFEqlodoIiAMPOWZyou/Nf1XuuRs4SXUkU7bC0Ao/+DmUy/XOckIZENcOw2\nsc1/3WF/MepK0oBEL3/2vFThjOzYOUWJE2MuNAlOHMYLFvmdSd8Xx66aHJAf\nNloqpJs0phRIaJCtF+jzLeOiCBE/7cGKCLp0SgqXkXDKbL7MtuzfmpccMycS\nhSwP/DzSikuttcqVWZVHoDxYZZ4q/JumPT0eVSMOdZULfM/FVtU5XUEDV674\nb9jdvCxXRmjmxNy+BoJlmnHvNr6vuviAe1bkNySLLmYTZZtyBg8bov6VXfaQ\nVysb57TDoy7hLJnkIKGpRC08nWXi0ZsDOCqcRZH2IKH8q5vpmdkN0Y3z8gBf\nzBbwVHkZOrE3V2HOOcvSE2HQqhw6n6YYcgQwNs+CX4NtqXdrC21ma7Z7b3Wl\ndvqY2OBP1I4VFbOiaac+TL1T8p8ncAkF9kBTgacIX5rAZvENmyaUosVLyx/S\nzoHn\r\n=sEPm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHry7djRtIpFpAMqAlAnWsjCi9n+rpWV00n93+3f1x8FAiEA6qkpYVPZ0LtamEKQgY5Agl6kzy+VWltaIz+MmLzgiK8="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.13-205dc5e534a85a8a8caf02b6774997ba12e7f6fb.0_1607113228615_0.5184039309282125"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.12":{"name":"@unifyux/web-components","version":"0.0.12","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.9","@unifyux/icons":"^2.0.11","@unifyux/theme":"^2.0.11","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"7e31ee908aceaebb433890de0bd7cb3191be6365","_id":"@unifyux/web-components@0.0.12","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-qicZBduh75W+yqfw5axRa6zD+HzXhQO212hG6aslyfJbRM+EhM1Gc7g0rlT2p9A6umTkHXkgCa/kmPB0wfCxSg==","shasum":"de42caf60f41642dbdaffb4a72cf372379140612","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.12.tgz","fileCount":254,"unpackedSize":9013299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyp+KCRA9TVsSAnZWagAAQEwP/RcInZ/0o0v6NINnY0XX\nreReXdbrepVsHktORVkThNc7c1pnPgAcFOW4flUnVe2i7kQGOo4je/cxfCvy\ntW3+MIeZtRTXfUifPr4+gaqk92rnMX571mKkeLANkzSej06hIPgGL7ElGGLu\n7LXvj6ExJEM4lo2q04128oL8Vsx1HZeeM4awddXpRL2VnPIAT2OUEZVDt8ll\n/Pq/FgZARsvTtvgrpWfEPS5qEBCAbEdA91ZwNQ/bFfZuC9pqW/ckcVZ6Aa3a\nP33SDctIdocfjxGi8JSWGkGSR92v8vB4hbOcAOz8r/uqF27JeQ3sLsEY7aui\nd+jcvKGPO+fEbnv49ZsOC01u6863VbV01BrSXbZV4zzlWEzWLL9KYumIflZt\nqJHJz8c2DFWYf77kjZWTq3yRc4Zj07pzGfiwBoC3GqchzHW7Mh8JS91LgXMw\ni01AbuaWtxtemf5BgrdWFnpOApnjYrilJsyaGYem8MCeVFiX8DPcIJg3iI5c\nlMg2BATpTFNi6yhCZm21prFNMcL/L1hVj54I6nbpln89ps88+1Rn4RDehBO2\nUa179c26/DzskUTWDfZY8ex6TMEgc1nac3P2YayxfRtkjhkMe8xy9jdmyohD\niVoE+nXlL+8ZJLff6vSCLw5h4y9pkRr3YjjcdNgFcp/bLiCHrsScN+jIjDQr\nXQxv\r\n=Paqb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID/OJMjI49YRaPtymeGvGgJE1QhosGOQp57zQUHFvcK/AiEAsBeq4yU0pintwoU/liBkdNtd7CG2cQSab3X96hR67qU="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.12_1607114633541_0.8296332294968709"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.13-5ff1bf807ee5feb34b436523f4d83bb95cf515fb.0":{"name":"@unifyux/web-components","version":"0.0.13-5ff1bf807ee5feb34b436523f4d83bb95cf515fb.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"jest -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.2.5","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.3.1","modernizr":"^3.9.1","playwright":"^1.4.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.10-5ff1bf807ee5feb34b436523f4d83bb95cf515fb.0+5ff1bf8","@unifyux/icons":"^2.0.12-5ff1bf807ee5feb34b436523f4d83bb95cf515fb.0+5ff1bf8","@unifyux/theme":"^2.0.12-5ff1bf807ee5feb34b436523f4d83bb95cf515fb.0+5ff1bf8","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"5ff1bf807ee5feb34b436523f4d83bb95cf515fb","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.13-5ff1bf807ee5feb34b436523f4d83bb95cf515fb.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-+mmWDOsnYkDy9J3yIVDCo6JcraR375SfKSYscWpx9mOd+o7HiBksJwWPwu2Q89qGVkfECCpLjh/ygsUZt4s3xw==","shasum":"6aa8e97c085b88e9d2d6b201b079e93f8bc5e512","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.13-5ff1bf807ee5feb34b436523f4d83bb95cf515fb.0.tgz","fileCount":254,"unpackedSize":9013504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyrN2CRA9TVsSAnZWagAAV0QP/3H+EDezTGpakHe4TosW\nuf4CpTld1eSYvlF+OMwqc4roWIj5ikV7pc2Ul8sBc3LPccFGhrrYr5HLSpW2\nmdIwhskIUZcSjhlMxa9b7gEc+QQVhlkUAV1YjQ7O62eGUaOYwHbh1fEUUSJH\n83O8mVX0eqKcMcDYs5v65dLYLdSZLaCZWVN6mFcgt6BsH2FOX/EpNEbblCJV\nPf+gLTxL4ppdTZ5REWLNIxc2JBlMJfLYdZs/GINtpOr+CVU7uFGBmsWUtP8y\nIuMp+8LL8duT+YRCuxrTuaS4Sjl5T6Euaj3tUyLHqoPLDVwr7pQ0vlfp4yFx\nlQgL+lgS4A5BCb2Ul00q9MrO2VMckVWmNb8Drqgc8ZqzD4zZx+1VNmSFn2cm\nnxSRl5JxWZHCKXn0UsukeJxDDDf1FXmAMhB2ZnScKdDGJKevoEkNnfb6ABMZ\nuuW4oLDes9MGRIF4ifW8Y7DUxfq+mP136u5JoziZ5HEDHd9Jru43UMPFInn1\nhCCxTl1/G2QVuAhOVG5q+n3+2cezjEkuUgiiKnTSkMBf/bJdgHfnwcc3K0rh\n7OBh/bRDue/y5fsOCaM9DJod3a83o2h2CEq70wd2B+GS4x9JxbOd1yFy1yWL\nrQho2Xx7QXLE5Mf2Ktoa6NG0O8lHvUeqSsHmLxXViP6fpJ+lnFxegsBIt+Xu\nwH2z\r\n=MMc2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaf2pVmV4cASZsfmAcGp8RyK4KaY4z2KyydrMDNpZj/AIhAL727NmjgkawXYIYGKgsT8whesHt/k9KnJS0suB2pPJF"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.13-5ff1bf807ee5feb34b436523f4d83bb95cf515fb.0_1607119733809_0.8071216508447452"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.12-441e506f4dc45291234d227cee518aef347863ed.0":{"name":"@unifyux/web-components","version":"0.0.12-441e506f4dc45291234d227cee518aef347863ed.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.7.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.9-441e506f4dc45291234d227cee518aef347863ed.0+441e506","@unifyux/icons":"^2.0.11-441e506f4dc45291234d227cee518aef347863ed.0+441e506","@unifyux/theme":"^2.0.11-441e506f4dc45291234d227cee518aef347863ed.0+441e506","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","playwright-chromium":"1.8.0-next.1608058261773","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"441e506f4dc45291234d227cee518aef347863ed","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.12-441e506f4dc45291234d227cee518aef347863ed.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-EUuFDMH/bqfzuuaLSbNbf/43Ej66+fIvNEwP1BDbR9fAc/e2Pf5ut8A74f4uDqutBWCwUIuFaAjCKFb4Dan7Ew==","shasum":"32cbc341ccc27201623a886d94e44e5ce778aad6","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.12-441e506f4dc45291234d227cee518aef347863ed.0.tgz","fileCount":270,"unpackedSize":9265790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAKZ8CRA9TVsSAnZWagAANLsP/RX7xR361oUrm4Hgexxe\nIeaCBlbYR87Iuqc4BYKpDRu5/lSTvYfHyW2KxxmjdC9bIL41gxr2g52F1+bp\nJ2QlJu6OVePMpfNftP3puVID/HhmbhQQwpFAvlRADCeqeZoO6hEXgSUe1ocY\nYoz5RHjqeTJh/lb2Roh3kPXI0BD1XJrem16/9gpLNytprBt7Yf+JJiS8MwDf\n2gu67lvkAIkuFEB9ahzZ0HhLB31aQYRqqp49nwQsGQgdz4vlOIym7u08oppg\nmUc17Up3r3oMyu1icYshEkOJmMk2nzTuEujYQr5q0Fufpaohv5/b8ud3DzGS\noiNakww5X/fbkCEEI6te8TTBJUzFVnzxglWWeX3SyW8CsYemV67fvin+S7/R\nZdVl1qaEFm9+5AoiTg8nfP+0j3yXjz9ALug49otP1YPACYEzvNt4nCZqbdQ8\n1r5qfY3y/3iymLmr56CF4NvNkIiAQJ/0mDoufUVKAM+c39iwWdU7FbucAS9k\n4fPuaaRVOJf8Mjv2dejjvMbzSxu8tarn9Uke1m5SS/gkFJp6wwCRWpy5Qthx\nVzuAM7GAFXQK8sIAZZMCxRLHl3gE6kAA0GqYaGpn7diw1z10ywpYRIbvTFVb\n0I3pOV7ZzbzAM5eiUXoiGNhtz6wfhocMO1FRQWUd2xkz0fE8kw5Zx6Gc88/x\n9uXi\r\n=0C0a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFyX15evgmH56mYmV2YWcvTOJfDbWdsGg6mUNK7RhDNyAiBKuPFbVseJFNGX2PX3HMSMvvEc+EE/9S+ykgOkRTLG2A=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.12-441e506f4dc45291234d227cee518aef347863ed.0_1610655356064_0.7338159362523333"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.13-77755403b1039bcec886d58e9004ccabf6b611fe.0":{"name":"@unifyux/web-components","version":"0.0.13-77755403b1039bcec886d58e9004ccabf6b611fe.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.7.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.10-77755403b1039bcec886d58e9004ccabf6b611fe.0+7775540","@unifyux/icons":"^2.0.12-77755403b1039bcec886d58e9004ccabf6b611fe.0+7775540","@unifyux/theme":"^2.0.12-77755403b1039bcec886d58e9004ccabf6b611fe.0+7775540","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","playwright-chromium":"1.8.0-next.1608058261773","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"77755403b1039bcec886d58e9004ccabf6b611fe","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.13-77755403b1039bcec886d58e9004ccabf6b611fe.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-V+8mFO+WW/Htq119kbqQH0DhKqvbeY3Q6KpovfqTG5ZrDdtBYpv6A8EXOhywvPjiFpjQ+AwF88wuiQEyL5Oeaw==","shasum":"dccab36f8f79e3d54c008f5e4180a0213caf0f0e","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.13-77755403b1039bcec886d58e9004ccabf6b611fe.0.tgz","fileCount":270,"unpackedSize":9265791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAKsWCRA9TVsSAnZWagAAfrkP/2TryDtwncdoQyHu50e6\n2EgB4/MEmuYqUju8KcVc35rYDDiB1cY4iUG5YGssh0HvKUkCEBbsWOkmvHZS\nV90hcFqTPe8KA9w2I7tOpHV/I/oHgnDJ4Z78xZLd2Mq+ImarfEW5p39T6hDG\nsaBvf4yNMY0wLk+/q9wZ4r29Fv6Qk0hnEP9yT8Wp0O1f4JGOh0oj6xNPd/hT\nb711Bc+6yNaqJFWBCpTWjuuoj1zn4ZXD6lLDLRkKy2PurY27sVwGiOsqXyH+\n9h95PCO8tiugLDbGcO2CCErMZtA2sDycsAB5+PvK1pPtIMSrUO2McCIhZNOT\n/2/f2z6Usm0y/4JOQT13MeqAfav21Zk4JaSQi/c7jgHQ8+dK0kYp3/SF9U3N\nAgSfKzi7pu8hUxy0FaXy0mL2cE/A65j8xjuQ7qVnk2Nmx0bQRUu2aBXYcCuk\n3zlpNzugduBEtLwZuYHcreIWP7KjPiL/N1AzCAw8tu9K6Vydum51jduwPI6e\nnfhRl2/ozd3ymgqlJg5icmjE7uaQ0OnKkpZi8SgvOJZd4MP0EqgkyMzTNl1R\nDx6H/sI2pOP5IuxMP+SPBye/SYvZmTiqFLx3OgV+oPTbckjKhyXezWEZRyLi\nePPsh2iyJ0k462qCdGGlsvPqEiP2Ehq0oIfv2Ov/6Ui5f+X9e0RKnI7zPqBR\njsMP\r\n=2U4k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAFAMXGmKo6OSZVeuY9CLmQ0QS4ivp/qvdQ42pDVuV4LAiEAwFK2uM0jMZTki+WcvNRZp33A8EQKtLsKsHDMWCfPX1M="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.13-77755403b1039bcec886d58e9004ccabf6b611fe.0_1610656533972_0.9801074334878721"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.14-1590f26c988179a1c294ab11e56ff0e30a28f3c2.0":{"name":"@unifyux/web-components","version":"0.0.14-1590f26c988179a1c294ab11e56ff0e30a28f3c2.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.7.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.11-1590f26c988179a1c294ab11e56ff0e30a28f3c2.0+1590f26","@unifyux/icons":"^2.0.13-1590f26c988179a1c294ab11e56ff0e30a28f3c2.0+1590f26","@unifyux/theme":"^2.0.13-1590f26c988179a1c294ab11e56ff0e30a28f3c2.0+1590f26","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","playwright-chromium":"1.8.0-next.1608058261773","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"1590f26c988179a1c294ab11e56ff0e30a28f3c2","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.14-1590f26c988179a1c294ab11e56ff0e30a28f3c2.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-ffAYDB6ev99EKG6N4wgI2FJtzGk7DxQckL4o2weI/5LgXGQkFj782tmuV1hnSohyvYgZp3e9MYLHkGGKdoAkoQ==","shasum":"4821b905b5b6dc45645f16102adb2c6dffa3f452","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.14-1590f26c988179a1c294ab11e56ff0e30a28f3c2.0.tgz","fileCount":270,"unpackedSize":9265791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAKs3CRA9TVsSAnZWagAAd18P/28ZHX6sXQS7m+hWj8K3\nkRthIoFSV7mVtMNVhQ6lXwvIEiQh+TEXX3sZlPLKCSTU8EkI4VvyajIiNFmx\nFwEqrQ8ECBiL1S6zAR75mEf7kindbNqnIlcavVyska3yF+Lg3E53B7mgXrSw\nrVML1b1pkoJsylvyok6ss+7RdHkOFFLFqV2Khrk0M9NqOr4mei/yM5J1fU6l\nhGqUYkIy5zbloz7tC8hTNNSD4al25ergi59fo2eu6nozT33Jx/L6hpnOLni/\nxbwm8wlDLST6eO5n7zU/QPctGggk06k0hw6IOWm7Jqr/kyEVdVoteAqeJi28\nL1AYCrOUg+yuTrmnQoegGkTdadtNreWDExPGTfzXYsQOeMGAhnFpWni8fbdy\nX7dPHxewLMLIlxuPzm4ptw5e4w5z+rm7ptm1mnY3FvBdImlZ5rhASiqXCq1Q\nt7X0i+iWqtQlva/JBD6mzgGYy3wVN2IIt4883vgqq5mw33+irLeS0AciApxz\n5fndYMkZiswJRxYM9uqzdhsk3++QHm7af/Wb1Qy9E2RCpi5PEp+hqFyhhT2c\n1oBgTPf/aGhDlaiB/R/DE6KM3urRd9ccERnMGHn80U0sRH5Ja6LtBwU6NoTq\nPO2Se3fOL53lvuzEgIOBBCew6YmOKOmHeogwTz4jC4ClCKSwKG0LutCyBHZQ\n8pXm\r\n=iwPn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDanIuWBTqUuc+8FWlhNgSsTMT0cD4hnEy/3eP9ANpDuAiEAgVYcZbrRm5NpRgrTLHUBFv71oqV55ZOQekMekbXnRDs="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.14-1590f26c988179a1c294ab11e56ff0e30a28f3c2.0_1610656567217_0.8833062817583364"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.13":{"name":"@unifyux/web-components","version":"0.0.13","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.7.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.10","@unifyux/icons":"^2.0.12","@unifyux/theme":"^2.0.12","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","playwright-chromium":"1.8.0-next.1608058261773","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"574a852cb28ed67ec3bd1d70d8708a0dfec2e12c","_id":"@unifyux/web-components@0.0.13","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-WiEx+4fANOsSuyow2cEU5GmN3dExAP5bd8cBj7fwPamZUJO6KNL7RbZzUdYfsTFODYvFLwmKPxQKYd0WfZ1hjA==","shasum":"705792cb1be2d8d852a3b13791b1ffe21e969322","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.13.tgz","fileCount":270,"unpackedSize":9265587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgALEWCRA9TVsSAnZWagAAVrsP+wW+v3O31SFdpKjYTbcC\nfw9Ctk4gDdO75aI0pOcwAjkDU8UP7yBX6SynVlhovM8WxFYEF/JagPEXuqFr\nUi7iV7Uy6PuqVVjeSY3asCuiDtZqlQLj4CKhm/5xnroV1pTv10vCyH5YKtO6\n+6wgHdbtt6aG5ra0SZXRKvrVNvOad5wytW+zXazvZicQLoBari/bxkGq/F00\npLOBR9KfjV2UuvK2I55EFuKhS/IpFyRfa7QWsAPDA+DPIf0v1BsvXkYSACCx\nvZith6JxcdcKp4S8lh85aesorHJN0IVDfe9/Zazp6PDJcpnS2Bg6TCymjQVT\nJmNQeyns9pEI0KUueNjDR+mp0+gYJPMYCXWc5ouJdTupZk5ow3UxfcM9IYWo\nYeuMjvSAQEWc5zefrrhWX3wpL1yg8Ty09/Z4l+YFHZrkWYu7I3sy46FZrEHT\n+20hwAMvZJN6hrtWoEbwyP39uO609Yc3IxDlkgyQE3Hw+25sabDtlqeC0Xxl\nouJNOK4+/RH/qOoYiDQ4c+VDST5KH99XJyH/lXRGdPEIF15Uye+L+QTQNdKX\nrlUN6xtwjFhT73Afa1X3dXb2ry1pTK0+/swwGhfJ14cKQffJ/okb6xigmHug\nNX9rMaf0jfthCgh1/t1sloW0sMdEaSGhpFAp3y7BsMSPCc2RbeO9KMccBqcM\nMrVv\r\n=4aT/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDke5SmjS9+Zype0T3hTz+FRg4zYoRX9y6l3qloCu8+YAIhAJHW0rqH+t/H88jjSX+5OdI1dL+k3Vx5x7z/mrT/6PeB"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.13_1610658069422_0.16471834925926276"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.14-2e5133f57cc52853a0256cd1ddf10376c2b71265.0":{"name":"@unifyux/web-components","version":"0.0.14-2e5133f57cc52853a0256cd1ddf10376c2b71265.0","description":"PerkinElmer Web Components","main":"dist/index.js","module":"dist/index.mjs","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.2","@stencil/core":"1.11.2","@stencil/postcss":"^1.0.1","@stencil/react-output-target":"0.0.3","@storybook/addon-a11y":"^5.3.18","@storybook/addon-actions":"^5.3.18","@storybook/addon-centered":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-notes":"^5.3.18","@storybook/html":"^5.3.18","@storybook/theming":"^5.3.19","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.7.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.11-2e5133f57cc52853a0256cd1ddf10376c2b71265.0+2e5133f","@unifyux/icons":"^2.0.13-2e5133f57cc52853a0256cd1ddf10376c2b71265.0+2e5133f","@unifyux/theme":"^2.0.13-2e5133f57cc52853a0256cd1ddf10376c2b71265.0+2e5133f","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","playwright-chromium":"1.8.0-next.1608058261773","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"2e5133f57cc52853a0256cd1ddf10376c2b71265","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.14-2e5133f57cc52853a0256cd1ddf10376c2b71265.0","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-cavED9K552pxzxJQVuAWTUUgU4PzpoI+T8A0JY/1wF0n0C7iNELl1nW9yepHuaylRN+fLrvE3hgJNqlIKSK/5w==","shasum":"6f9aef707c1362995e1b50d51c6a7d859d62264b","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.14-2e5133f57cc52853a0256cd1ddf10376c2b71265.0.tgz","fileCount":270,"unpackedSize":9265791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgALtqCRA9TVsSAnZWagAABPwP/jOdf6/zI3M3YmOj57Ug\n8yELPJzo/vnQd41pYM/Jsn+fv+23tejI4I8hi8Q8nfiDTZ3JW/j4aE6x8RVF\nSZ/UfXsbgdVT2tQUgZ/V/yo3zgZ4lmbvXRX4Rawgwn6esMtO4SWytbQmV5tT\n+YctakRNvTG/J0ryqP9TimyQoUQPbsTIkxmee17ZR7qifyPWd+QOmLudAptz\nSmnt0KDKnFl4BMwoVCOqRoTSdxrksWQWVSg/+76mJpqXCVRK2AGCQrs69trp\ne/aWZalgcaiCGuqpkmB6KkMvf0Snuo+lkw4uMi1yuSCIYQw7zp09Hg+wNhSc\nytPiYKSnzANBwt2ixDoIN5lMo316OyB3RaYIFCIJ3CJGI6utsn0HDLjY6dg+\nIsLdmH60YYd+dpu89OYP2aMEY4XzgPgcdjWrk16iEsIjGHNbrXBHvRTZD0i0\nfjK+VrJp3FWcHINKKMEUfz3K/QM0pEhPS2Zem/TLoI9Ss/5Mlvo2/a3GXjE9\nEblHdTEJG3rUMSgTjp3bWBd11c4XLFJ+0+zq1hf9hmgZe4p14cjJvJHOTWsI\nX1wLNvGA0BS3OtgwWs7VweiMfEDB4GTXWUrBt9G6lfpQ6xx2uldTVagTL66z\nAqcOJFSnZCYG09tvxbud+Hlax1fPQQGBZ+tZvUax2WEqanEpDYBHaRE0g3AD\nuqow\r\n=zysj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmPXqUs1z4IOamOI0FO4FqGFwTvQxyaB839aqIRjGXTgIgZdWDHmVPIrSEHPALEGGbnzJt3I6CsIRBMAHKU9X8s9g="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.14-2e5133f57cc52853a0256cd1ddf10376c2b71265.0_1610660713847_0.9851759838131513"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.14-02c4343681a8e9cc9e98d94171d826a9fb55edef.0":{"name":"@unifyux/web-components","version":"0.0.14-02c4343681a8e9cc9e98d94171d826a9fb55edef.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.2.7","@storybook/addon-actions":"^6.2.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.2.9","@storybook/addon-knobs":"^6.2.7","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.2.7","@storybook/theming":"^6.2.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.11-02c4343681a8e9cc9e98d94171d826a9fb55edef.0+02c4343","@unifyux/icons":"^2.0.13-02c4343681a8e9cc9e98d94171d826a9fb55edef.0+02c4343","@unifyux/theme":"^2.0.13-02c4343681a8e9cc9e98d94171d826a9fb55edef.0+02c4343","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"02c4343681a8e9cc9e98d94171d826a9fb55edef","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.14-02c4343681a8e9cc9e98d94171d826a9fb55edef.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-17rLi/gKmC0vR4ThcjmERFN5U1O9S0QelzJwX+SeYChB4HQzUVDCFHRIgKiUeJOe+uN/kJk159GQI/5bPfWsnA==","shasum":"7efff2a4fb8faafd1b21cab53f68c6c3d420644f","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.14-02c4343681a8e9cc9e98d94171d826a9fb55edef.0.tgz","fileCount":260,"unpackedSize":7844837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjH07CRA9TVsSAnZWagAAS24QAIIoa/h/id9ydWG7MD49\nYvV2qKk330r1CjW2rkPkyK9uTz8I+Hv14RUl5gFxoB9+gWNaKG2l6HKtFeEY\nuD2JXtoodFcGiHZ2eNwn4Io6rZvvgP+RBUQippCoXJCIe27lRCbxrBuj3+sv\n/D/qgYmbh9K/HPHNh0KEFn5z+g+gpNGNWMmcvfu50G0td/VEorWkPkmKneVx\n1gUlBBVrHeyFFy5pShk/gLUeNqcIULRUpJO1A6DpzPaUfLLFzxrlMF1ohmu8\nFn9vLCjFaPujSsldHQFM6I3AsUnEWN6z0Xer0HuHuingzjKn1pCZ6gWSwJ6q\nLJpuku3IfhdUsARjgpf6O0Wh+N2CUi/jaonIwQ+AyVtdhmvyUJ1ZQ35DgJR7\nTjn+i2n6GEkZJCkE94nbqDoUEW3xY2y7HTqbUb//TyG45XL/P6MIenkww0g1\njtR85IL03EznzHHcpFhE/gx1942sQ5sYSfAulNY7pMyBN3excFDgdmT9ceZ1\nH8tO43OzBWEAesd+o7diNNRQz0rJsj9c4gV0YDJV1cxqZISCjThhVkMcMqJn\n/OUrKLtgbnCa8GdvybwY3uY1ve+6RNmUuh4iHCI0lMebynQEyoqZKuCsFCvA\nc2cNvQWLqRWBbmfKUOOjmgguULcpwyXUywm70JMNwT4tJcL86xyRFyURZaOX\nv+Zw\r\n=rhTz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwGUsa+f0ZVPdK/XUYjjSa2+bMA85gDUbFrzrGe+GxsAiEA+JJe9r3h6KyqG7jeDD/YmsS9//hc5H6BBJlY03KViXY="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.14-02c4343681a8e9cc9e98d94171d826a9fb55edef.0_1619819834969_0.008640524096656943"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.14-daed1f2fab20e757166b1c62d28d6cc144eaa970.0":{"name":"@unifyux/web-components","version":"0.0.14-daed1f2fab20e757166b1c62d28d6cc144eaa970.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.2.7","@storybook/addon-actions":"^6.2.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.2.9","@storybook/addon-knobs":"^6.2.7","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.2.7","@storybook/theming":"^6.2.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.11-daed1f2fab20e757166b1c62d28d6cc144eaa970.0+daed1f2","@unifyux/icons":"^2.0.13-daed1f2fab20e757166b1c62d28d6cc144eaa970.0+daed1f2","@unifyux/theme":"^2.0.13-daed1f2fab20e757166b1c62d28d6cc144eaa970.0+daed1f2","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"daed1f2fab20e757166b1c62d28d6cc144eaa970","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.14-daed1f2fab20e757166b1c62d28d6cc144eaa970.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-eYAMy4PrTnBJ5ZDfbmDVeoRq1CuMS878T7zf0E/hNw81I2oEOEfHK1t+cx1RbTaMNJkevSjqn9NaeXVK2Kh+Mg==","shasum":"4c4d95346b36e4cbe6eaecf9df876a0aa73ff286","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.14-daed1f2fab20e757166b1c62d28d6cc144eaa970.0.tgz","fileCount":260,"unpackedSize":7845587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmUoCCRA9TVsSAnZWagAAM6QQAIjUgNoxbuJJJTH5+BxJ\niQsJ/bvMAm+TJIo+c3OgDn0L3dm9HNSol1+MUPDqP740/NRCMTCsinc7hWC1\nMIAFw9I4+siUmz77Q0uhKQJGD9s75BKI6NvY7ruzjfsOXClQxS5h1fEwpcQt\n469LdDYCBHqS5XxCgMMA7WjU3aJivdmVDv14yNrApPxknKdxidcIoTohp1Ut\nD9kGVQvtKGcYX30yX3YCynNgdhIsVQJy6Iu27DXK2UcWeY1t2lUkqzC/OgrO\nH0q2NOqNvPpT/hAa9HvOgxSVcJzGaX1r2AfCtvlszMTANidHxPO5caMTQXtL\nVm2kwoC7y+XGlFQMTYgVxWdRcYx0FNKOuI6iAbz0lwDc89u8VUvGJc7G1/E/\nICF0V2kOMT2cHv+YWZx9/A4Sg3mWPl62w0HcU8w/5r9r20FdgVg9843EFnNw\nqhMiUFJjX+kycnCRGk36qXKVWz4d+mIB23Ze7wUjrJIIA+6RtmXQXBBj0XhE\nNjO1iEkLzPuxVuX7qU4tqc+B7QynTVq3HCVcLSZJcRqZzMTXAMhLcArH4s4s\nN44BxVCD4AajGbkdp4RK1+IggHGFyOSY13tq23Gko/K6QmtVTcU2wnQeI3ze\nbLu9o1jlJuxQKOYHwhZcako+ewvie7oYIgX9q5KlxpJHgWu/FhXLpZm+CZAj\nPq+P\r\n=kAnb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhJDrCvJiUN9+HL+Alk96dfvSHdl5nKbxeHampsnbR4wIhAId+mYsd7U+dHY1iZXO2kkFhS04Y0xIuOQDt7nqEBnE+"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.14-daed1f2fab20e757166b1c62d28d6cc144eaa970.0_1620658689472_0.41500643629695033"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.15-e4999b903a1c409d16777c498b413849b8c64499.0":{"name":"@unifyux/web-components","version":"0.0.15-e4999b903a1c409d16777c498b413849b8c64499.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.2.7","@storybook/addon-actions":"^6.2.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.2.9","@storybook/addon-knobs":"^6.2.7","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.2.7","@storybook/theming":"^6.2.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.12-e4999b903a1c409d16777c498b413849b8c64499.0+e4999b9","@unifyux/icons":"^2.0.14-e4999b903a1c409d16777c498b413849b8c64499.0+e4999b9","@unifyux/theme":"^2.0.14-e4999b903a1c409d16777c498b413849b8c64499.0+e4999b9","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"e4999b903a1c409d16777c498b413849b8c64499","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.15-e4999b903a1c409d16777c498b413849b8c64499.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-6l4MpQ4n30L1xbwMtdDYjG2JglCNYN95Gkj5N8uS63ua5NTO6UUNriirg0cq+Zmzx5Xrr4k0bg9kzKIfg4KmRw==","shasum":"600ab1eb2e566721ba17a0b3cee8e6ad5301f781","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.15-e4999b903a1c409d16777c498b413849b8c64499.0.tgz","fileCount":260,"unpackedSize":7845587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmU2oCRA9TVsSAnZWagAANicP/jtCqZ7aqW+gO8WoiQyd\nM0eh65fwf/32bz1tv/UGEubSlGYmE8A5GhYw8P0ktLZ2Eh8AxoaINcXqlUY/\nawBpIB1WPS8I38iISW1UBoX67rdgAhHhCR/h22AA3QtviMYYrslgz5jV1Wa7\ns++cJblLkTJGiNPEZ4RVo31HJyyiBvUxwJ51y2OzxS4Gk3r8aQvZ4O/2gNyj\n7+D/0vZl+BIo7oVM5amDJF+lGuM7kHIJH3hLSC2Xf9rvYz/adFLIb1ilrsuW\nCA+nJ2B8BQLbGq04E7WQnBjpSExdWDT21wMvadH30HC/w9Qf3MZTRetHoqRa\nkvVzueceC03tthd5HbqjXPkRmUV5IzEyv9kL6pe0ZDxY5YLhlKk3v8w6S1Qi\nS6vWvLlWnExPBiyaMC0ZnA+CFEA+RwDCWAZm+dGErTUNLdWT8LhQU2uFsz59\nt+4GCLvTNJfVKscq4Q2oE4kWgI6rxZwxBHUkLSaSPBRRXRXmWZWpbchDf+PK\n6jWaX9hEAHTk3hx+9k4fgCsei9qXlOFnq/zfHER6sHqQuwVKEC07CnDAG1i2\nLYYL2+g0qJFgocVrE1Vj6TZdZgHAX1rqq8/5EvhVaZDyA5g1/rdlPLcCq7Yk\ncrS/kab+Rn4ZCSyfKBJsAHTYuBiynveb5i7id0iaTGDHc8BmYBIfbHl0fQrP\nySD3\r\n=ICG5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzcC1R/kVgmeAAEXiI1S1hv11HprCZNO3tjbWRX6PNzgIgR/pOIyrOOHhpThpP3qB/ncKnhict6Hw7U9mnvUpe7qs="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.15-e4999b903a1c409d16777c498b413849b8c64499.0_1620659623604_0.11625161517084281"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.14":{"name":"@unifyux/web-components","version":"0.0.14","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.2.7","@storybook/addon-actions":"^6.2.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.2.9","@storybook/addon-knobs":"^6.2.7","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.2.7","@storybook/theming":"^6.2.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.11","@unifyux/icons":"^2.0.13","@unifyux/theme":"^2.0.13","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"48fb536d5e00f71df16027aaa13ede3f095a9b86","_id":"@unifyux/web-components@0.0.14","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-SiIukS99GrskBbt0kY4lzIADm0KJhbfooDAjXtXYw3f3o78Xs7FuZoO70iI+T386YSqE+NplFl76Crag6S+lBw==","shasum":"6c465dbb597ab0fe42a5de419678c01fd38a32d6","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.14.tgz","fileCount":260,"unpackedSize":7845383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmVKHCRA9TVsSAnZWagAAht8P/j0rMvnoXlx//kwxUTmQ\nrxpuygEHSPadDKCjLjxRw7HhlEqGCmKiRtuqWBTiOWuIbknTLxVt7TuO5fMy\n3KhZ8XnPz1EKCPccz/0apRezqxA3+AkRvGbyB2xtC4e2mHoul4mi03nOtXJg\nuuTSfEp3xEXIiri3fT2QIMvijColzcbScDAiyGguG4LM1BTPfoA3+7oZDMgA\nMdmFBXdUJsvojwIc0QvPIAhH/RjJCpyPRLz9beohnUryukWwFruHtcxfH1BS\nuP420b/3D2SGYFu9TneIoWl1YWrvXJ7rZqkEvRvD91iOoUbEIr81wkYOVcmA\nMBrUYGrvRRHGReV7PY1endTXP1PfTfvynIxh/lFmRYSBpnYmoTvQilbyaBX1\n9x6kEBTebBc5GO12hDB6hbMBDZEBgGHFB/6/+x2noJjCCaJIANcdLYApL8fc\njBKJtmCcfWzWyhFMZtSxoxjXlZMjxGQkrGbAKTaVWrIcxoYFqB7aIGbd8FxW\nr3ouQkiL8Am7J2EpD7zo6kQwZawCiRP6R4bJy7pH9i12zknOScdQRexIMiCT\n0kEimlQAbfuUOWfQ7/50bqnhPUgz707rD8TpwH3f8/jNeXSdyb8voreFNbIF\n9EKIhm6IbK4W59YaNLZK8m08wru8yUV4OvwAnCxysahuaq3SnH4RRc7eE9k9\nnznD\r\n=kIc3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvlp+K9wlfSqwM6BT4xflhphmHJ7S/3HQ+yQT1gylZ7wIgHTk2H5Z1ceOKLelwnUmHuFbeoY/6XjWeMHGXKrXL3zY="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.14_1620660871107_0.3485486054147018"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.15-2bb82a29965af1e8f9160ad62bf41c9e7ce1bbda.0":{"name":"@unifyux/web-components","version":"0.0.15-2bb82a29965af1e8f9160ad62bf41c9e7ce1bbda.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.2.7","@storybook/addon-actions":"^6.2.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.2.9","@storybook/addon-knobs":"^6.2.7","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.2.7","@storybook/theming":"^6.2.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.12-2bb82a29965af1e8f9160ad62bf41c9e7ce1bbda.0+2bb82a2","@unifyux/icons":"^2.0.14-2bb82a29965af1e8f9160ad62bf41c9e7ce1bbda.0+2bb82a2","@unifyux/theme":"^2.0.14-2bb82a29965af1e8f9160ad62bf41c9e7ce1bbda.0+2bb82a2","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"2bb82a29965af1e8f9160ad62bf41c9e7ce1bbda","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.15-2bb82a29965af1e8f9160ad62bf41c9e7ce1bbda.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-CvkZmkqd2il6W3pdkaPSKQMCRU2czI+6vmaYIihUak4JJ1iGN7pjiFmyeY8HSTpVdcVY4bj+PqxCm33wPXCXHA==","shasum":"077027912b6cbd9c27b0508a25ae7cc6812f4e5a","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.15-2bb82a29965af1e8f9160ad62bf41c9e7ce1bbda.0.tgz","fileCount":260,"unpackedSize":7845587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmVX6CRA9TVsSAnZWagAA4H8P/3+ouM9IhIcarrM0AD3+\naUfi0v+rT9dLdqY6OhfQhPFZ0D5YHWM1D5+rTvpphgncS6oexEZ2HmG34pYQ\nTfIAHv6XCP3yzwTEZLx7rP16ct4NlgjkDwqvntvADuoEo4FM0GSdSAo1dzHn\ncd9jblxFf5e+mwWUBw2vUufwnXe7dkuQMpWoYoxEZNkRqgZ2fbddb0/3wuOR\nFz3lPxIDZT1/7ogFm3gMHm7X4TZRNG2bme2D7mJL2P8uH4eoZFkZPLDY0KBB\nC/3VF9TkEs2TO/Uis8r5YuflQxbrS1HnBH0QmhkXm2X84yUoLIkgG2D2wHbg\nvE2LpUPcE0HXjkXA4vdU+Uiz2VYtmwVBwZYo4rftavcumlr4lQ1CmCVfOvKb\nHm5ub6u6PCqYhFxkHgs9DZa10rw25w9fn8tHhiLukSM/VFQJTSDRMxDATlhY\n+1+2H7Bh+usJIdJH8G9Scd/zpRYvwA6NNmnApNwwDsu5Ae4SP9fFCxm3+8HF\nbLYIZzPnSsxrEAXWQ1FZw+pmJceSnamRjmF5tdiK2wmuC6CfqdThwvIxKUHX\nUNt8RIwvHrsG8zO2STJRioYcONk3ACQeKqeQNd/2juKMHm6N0Y9O0gi6/24j\nC/GizLDVtCiYBQ8uAi8KwoL0qOTuuTM8mpYxifYDwf0PpABhYXr7N1mja8BV\neRqZ\r\n=NPdm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt0u6TqmA2wM91PI/9UFJ5CFk6i13pkCDx7Q2sY11GcwIhAMuI2InRgWTKYCnnyrzXQphwfJhgu8LtPVIuoQRqgHnE"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.15-2bb82a29965af1e8f9160ad62bf41c9e7ce1bbda.0_1620661753561_0.9966087307501699"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.15-f68faba36fe2c64908165607a04d2c227ac7e4da.0":{"name":"@unifyux/web-components","version":"0.0.15-f68faba36fe2c64908165607a04d2c227ac7e4da.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.2.7","@storybook/addon-actions":"^6.2.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.2.9","@storybook/addon-knobs":"^6.2.7","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.2.7","@storybook/theming":"^6.2.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.12-f68faba36fe2c64908165607a04d2c227ac7e4da.0+f68faba","@unifyux/icons":"^2.0.14-f68faba36fe2c64908165607a04d2c227ac7e4da.0+f68faba","@unifyux/theme":"^2.0.14-f68faba36fe2c64908165607a04d2c227ac7e4da.0+f68faba","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"f68faba36fe2c64908165607a04d2c227ac7e4da","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.15-f68faba36fe2c64908165607a04d2c227ac7e4da.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-2LkBgs+9brK6jJ4XiFd9IGqQ1scipJEm1MLbyvVTrvXd95nVXIwW7VuUAFLflQWEIX6+7JjZYeXCG1IxlOmEOQ==","shasum":"b39ce5661ebda687df46e5d4714a9d113cb40c66","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.15-f68faba36fe2c64908165607a04d2c227ac7e4da.0.tgz","fileCount":259,"unpackedSize":7846927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgp8WNCRA9TVsSAnZWagAAKAsP/jf55NqTc5b2788EentG\nT76HaT2X/0irGbNUgxufQH8NtbmWJ7ZK9oNuIAYIkqvyEmFSbVEdABmnPruz\nYPiCQlkU0HjlJJoXqrorS1ZZjLbjGJqwT2K4Y96qFJK0YJr0aVBPZdwnSySm\nH20IFSPp5KQqIC7q4tTpSGAVbwz3rq94EH9tNydTrvCRLnXyh4K55WsKuXLZ\nQHUjRnz/e6Z7Nw9C4ciBDCuRl06zdYBeMLrFLQw1i27nv4Wzp0+kfuCwrdlx\n3/s6ACzNRjkE688YBpCCxW2L22lABblchbjehJCDC14v4xzJmNfcoCtzYBce\nr5p6nqXoHCz23c5DDT1fxA/apEEbGp+8bmAe+L4/LRy74+w5IrZCvefSIART\nzDGUyRLkyS/JwNgL+F/eEm4SHmUYclPhF7un/R40mVRXXwILG7Tp9ACFqXeP\no6vcNeJl9e1/u8BnKJCLIxcT6k0lKRimO3KRJMgpgYkl1vi8Gc2m/Cd/ORXm\nYcgjNZ5k+VdOM9yRiB5BMfJflPvp+05L6wMQoh1CFBkTLcwlAJ55ydYBU3ho\n1UNpgfzcRf/Sh69JITD9Y+HN7DlXB4Dyqo2U7Zx2SXOlhadUzfxaGFZ7ODRT\nyNl4HmD8+PwYSKK40Y+D7voXGPFOuPXcGzxbeZg+tvM7WkHGLwAuqMZ2Q8Vu\nGeEz\r\n=m8+f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDXDU1utiemTh89rkkE+G5rmeI+DddiyTPfrqhRheIFEAiEAoaFYSBF6qKOPt/1YRJCf3z7v6mf0KY3XNG2aR8KUBLo="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.15-f68faba36fe2c64908165607a04d2c227ac7e4da.0_1621607820815_0.2987053089518581"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.15-75825932d96af182fc25751705a044487d945f9d.0":{"name":"@unifyux/web-components","version":"0.0.15-75825932d96af182fc25751705a044487d945f9d.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.2.7","@storybook/addon-actions":"^6.2.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.2.9","@storybook/addon-knobs":"^6.2.7","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.2.7","@storybook/theming":"^6.2.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.12-75825932d96af182fc25751705a044487d945f9d.0+7582593","@unifyux/icons":"^2.0.14-75825932d96af182fc25751705a044487d945f9d.0+7582593","@unifyux/theme":"^2.0.14-75825932d96af182fc25751705a044487d945f9d.0+7582593","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"75825932d96af182fc25751705a044487d945f9d","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.15-75825932d96af182fc25751705a044487d945f9d.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-NuhlJsvv7yCz0s3Hnoqe2r2da3a+6VHEKLcTTPob6FHXoGfZ45ArSg3ge0usUHBPk8RQXPsHHni0AmWm+ajKvQ==","shasum":"afd800f73f7b1be3514339699cdea083ff32b3ff","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.15-75825932d96af182fc25751705a044487d945f9d.0.tgz","fileCount":259,"unpackedSize":7851813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2ULsCRA9TVsSAnZWagAAShsP/jkrxCVse/mzz8sm/yBu\n+ajbpHsoL+Q2hx3i922H19CSlvopUvkN1PXK5ishaFEXZbEdXoTJXnswCT+Z\nCd4QRvMbAgsjmykgfbNDLY/xLBt09cpfjFeNtOC6s0volOArFa2wvoZsEgmX\nM+S5r1jhmBdK+nPuo1oG3KUXflheRjQRv+oJc/Nd1lbI6iUTiczUyThZxypv\ngutjpY2CZF/ekDkKZMUDzvCGlKY/dwIWSoULCd4d0vJEwna64ceSoQxTGPlg\nQouVjiQapB/tdc+Kift1h4UsbCBjstbvpxY/+be1X9lk0Nmh1UCnnZeEd+vh\nhg/AoW2tYIK2fSN5vN/4kTIJ/JYulFfO4hZii1NT0PbzuiBuj32RCbQ6079d\nxoD7J2EjVNCnS+emm4lbe4Vm2tv0DZxBVwMSPIsQcpoK4YN1a3RA0oe6/2M+\n29frTqSzlE/CWu2066ay8zSdyocv7MxeMvK5yjpTfDu4G4zCKIHJDIaWD8/m\nnY6RfQjMxupaOlGZbdEp3PFYAr0MCS2PAIh2M1sc9uPgzfTyVFlr5CRFSgLZ\nC7H+olLgCRzU72X4jTw6rCLj1/1lQLoJcHYoJ6QWuicfq3Vv4KkVvt6S/+XW\nXWT5V2la6Ie4PCabnwV64LcCnA515VMdn+8dCLUH111zOhwgJDGwDosRuzTI\nPD+F\r\n=4EGl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1KEnaU2WeWGtuUlhZy6oLUoH5O29r8FEZK8QcHs5giAIhAPzbWvx82I10USq0tBxEmFnf/XgCRk+GfUTpPXsOb3No"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.15-75825932d96af182fc25751705a044487d945f9d.0_1624851179637_0.3597380731772686"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.15-96beca7fcd10c0448271c34589a09d1c36aa5877.0":{"name":"@unifyux/web-components","version":"0.0.15-96beca7fcd10c0448271c34589a09d1c36aa5877.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.2.7","@storybook/addon-actions":"^6.2.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.2.9","@storybook/addon-knobs":"^6.2.7","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.2.7","@storybook/theming":"^6.2.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.12-96beca7fcd10c0448271c34589a09d1c36aa5877.0+96beca7","@unifyux/icons":"^2.0.14-96beca7fcd10c0448271c34589a09d1c36aa5877.0+96beca7","@unifyux/theme":"^2.0.14-96beca7fcd10c0448271c34589a09d1c36aa5877.0+96beca7","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"96beca7fcd10c0448271c34589a09d1c36aa5877","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.15-96beca7fcd10c0448271c34589a09d1c36aa5877.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-GEwVa/Hpv2EX0C5DYxj7o1UUKjnDZMPAzTKN2S0JGjqvoEqVfWopbVAJZPSiMKvkaJRfkSk6MqOT95yPSy+x8Q==","shasum":"670888c2c62d1f925446463a8e4d6ced08f1aa1b","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.15-96beca7fcd10c0448271c34589a09d1c36aa5877.0.tgz","fileCount":259,"unpackedSize":7846927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2U65CRA9TVsSAnZWagAA6jEP/jl/Ze+aZntnvYzXy9oN\nLhcrc+AextaVv7eIm1XFLShjdoxKy0qlXrATBaSPVYNF9duzQtlmmHPh4V08\nWOuKmhC0VEv9DNvf52mPKU85i+xwJiBKs6kuXOXOhYfp6OcQe4UUs9DmkD77\n6JlfUrTZYIE+7+dHK4+ZgpqF403yVNwsMa+RUmJbVPYwaKmECBV5TuPJnPOq\nLXbKtJY6kbR6Prf65HimPCvuBiolh0W7n7A86d/hSMZdalaOGaZB3/492FWs\nTBtj1Na0XNBhhLDTU0DMDJTBZkrp0sXv7xn3VnZz2Vm3OF/mc9hsBZMR/ua+\n5X1G0/X+aG6QkzR5qtxQd58sXnJpgx/uxTL7UQgfXXWfcjNf9rd+ci0to6Uo\neg21dBSFVWA9rp9AkVF+MOks5lakOPvNnoIWng7ph5wk2cBr8vm+pbYL4Z/c\nWlly9qsvRMcGfE70WoHkk7PSdu0HeI4Bp80ru+S2NXFgUL18ePCLI+BniPUW\naEuqsd/rw07pwgS9HzX91kNR2NY0cu+p1hlbbb8adD+hK63OW7REqM4D8as0\nluGzdBqrB6hltLaRIN7DIhjsEOp7MLbGy+u6U7fN0T3gX/5JICJyI08/u9wt\nAxK999hh+ortue8DVvSrsZ/euTI1Hvr4jPlGfS7U9CCP85Z5bx8b0QAZsNzJ\nR/Qg\r\n=OwR4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC4dvKl60OVdYlATLM/cFsIxRpzaGBIX6Zd3Cd/A/wuAAiEAkOVZezQic/yFSjsyCqGreaewRoYFm53BrZbx3lSmhAo="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.15-96beca7fcd10c0448271c34589a09d1c36aa5877.0_1624854201493_0.6287749038724784"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.15-e314fb11ac8eb719a5b1a3e0b15e047fbf639bc5.0":{"name":"@unifyux/web-components","version":"0.0.15-e314fb11ac8eb719a5b1a3e0b15e047fbf639bc5.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.2.7","@storybook/addon-actions":"^6.2.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.2.9","@storybook/addon-knobs":"^6.2.7","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.2.7","@storybook/theming":"^6.2.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.12-e314fb11ac8eb719a5b1a3e0b15e047fbf639bc5.0+e314fb1","@unifyux/icons":"^2.0.14-e314fb11ac8eb719a5b1a3e0b15e047fbf639bc5.0+e314fb1","@unifyux/theme":"^2.0.14-e314fb11ac8eb719a5b1a3e0b15e047fbf639bc5.0+e314fb1","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"e314fb11ac8eb719a5b1a3e0b15e047fbf639bc5","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.15-e314fb11ac8eb719a5b1a3e0b15e047fbf639bc5.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-axnyxAkPr4Ye8e5iTsaG0waKG56T80lhCBS6iXKXlYNHGF2szkmL8oodSg/OXwNeLBJBwb6TTBblnGD7TFGfLQ==","shasum":"d7e39405ca77a043ea0e20f2035dddc4c7dcc6c7","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.15-e314fb11ac8eb719a5b1a3e0b15e047fbf639bc5.0.tgz","fileCount":259,"unpackedSize":7842490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3nC5CRA9TVsSAnZWagAA+fQQAJmXs96fGC02xJsQKzB1\nsxuw08RVmWQWLdn5GcYJTexUjBtOKOO6G8DDLmPaXYGB5YexPjVfpHpOLU6z\nUF/rscjYQGH4cIGdtIUuN4KS2P5Vr7Br/c1NmG17s6oIcDYAhtnRDeVLUPhu\npUVP806l7BgLMdiTd+law8CXziULWNowvgUQXJ9gmbt3Usq+b9Y5H2TMRRCS\nDc0HOznNaMxoYnKJB9xiVMg1ZDNFBRHiiCMjCGl/nyfUnY6UsY9SG6xtHQa9\n0AzcrW989Q+GlOpv1jwRD1F4SUjpVs7uXzUNUucH4rRFR08Ul77zeeLsIRtu\nqllsBBgtPSdxZ3mu1RLqUmnopSz+II5Lt13o/aBR2Pirl1JVutN16KU2aOPK\nKJq3WUbth9FrnsWZaJHbChfKma+AiAENPyMmn7umTxUopUEUp/T5KX/3SVmu\nczrvxHZOjv1KfIzlsgsenA+CQv6bQu86jvuRFF5ctpFHpc27f3AkgV8/5NRa\ny6GkAOBX32YMe6dI/WtrDUkgSD1mNjyhWYc9Lfa3i2ZK4Ph+YXwBEsRx1Zx1\nQH4fX1zDB+I3BIooVSPBa79nNkjeW/Mtp5E2QJ/3LkQv/gGlVMsqx3TXcGPJ\n1LALvfwN9q1gnqvkdkz3ILakSDsA9TFAJw7wZRCI0ukdENJUWxMu/lsvWPxo\n6vBl\r\n=VPiN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOZHjFvILYjdyQD30vX8WVfkEJyVRj2R9Rrds9PYFd8AIgI+FBjnOR31Wndgz9AURF8UGhZ4+77FYOO6JSyQinMzo="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.15-e314fb11ac8eb719a5b1a3e0b15e047fbf639bc5.0_1625190584827_0.9437111583297655"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.15-248d167530c7225f42a17e74a4b1c7461776729b.0":{"name":"@unifyux/web-components","version":"0.0.15-248d167530c7225f42a17e74a4b1c7461776729b.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.2.7","@storybook/addon-actions":"^6.2.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.2.9","@storybook/addon-knobs":"^6.2.7","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.2.7","@storybook/theming":"^6.2.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.12-248d167530c7225f42a17e74a4b1c7461776729b.0+248d167","@unifyux/icons":"^2.0.14-248d167530c7225f42a17e74a4b1c7461776729b.0+248d167","@unifyux/theme":"^2.0.14-248d167530c7225f42a17e74a4b1c7461776729b.0+248d167","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"248d167530c7225f42a17e74a4b1c7461776729b","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.15-248d167530c7225f42a17e74a4b1c7461776729b.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-sTgRK6JJf+okKuQAbn+c6ri82cndY3esw7nZydLZ+JUh+TQxcqnzsAaTF4pireAiUI8Qir7TZ4vn5Fq4etdKzQ==","shasum":"444fc59e3f9f4e450895788341de12ed5aef0b5e","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.15-248d167530c7225f42a17e74a4b1c7461776729b.0.tgz","fileCount":259,"unpackedSize":7847376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3nDICRA9TVsSAnZWagAAkVcP/i6RcKD7Mlb6MBdH7zGv\nrxF0A6qrEzVklSXH5QkWkjyojeSWS1uXTW86eAJHJi9fV8L08ZO6cqPp1GDg\ne4dqsmslMuWOLKjvg2p6vjC2uP6HFyCHr8vvgeq4rCUMD+HdlGPxevkmSaKo\ngx+udeiKoa5z20NCQFxw3PGWATuW4soTJAfLudmqtmG3RePfakuhVbm0LFMp\n87zA+0HB4b2Eq9fNpbRhAMHxhabDLGczgPwN733y39ShZVlpGOBj/FEncO/7\ntsHuDrIEAUgMUVvu4wVH9XK1l2LeYwLzNepbDU5GPPo911O72lLbz9wLDY71\ngQGOVC4eVoQWbc788M1gQJdpEE6qNw1gajLR4FhGr/kzqpTHVd/OHNoEgAuo\nFyLVDdsa3Kh6lf+PDq5QTHAvWM7nqrebXoi8OsyQi/B7oscrgsJlLNqRkJui\ncMzobmrmLM6NuO/ZcKAnYAFpLF229hzRPI9IiTtHspNGK1H7+EczvrKj+2B0\nXV1yvFSy3x+gdlhKg7Zv1H0G+vXIUVT70U5wpBCv/afq+j+KGn4wMvwt85K4\nKBOQVqyJdv/sSurtrfLAsk11z2wEgyt9FaNDc5tTJ06vTC+ChrBaTNqhL+sU\nsH9qGzl5hKbzTG42DAmS/PfBJmx70DcFI/wmkxLzcfImiHAiNsFd3TcX+IQa\nsxva\r\n=6SdW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4FWM4M1f72ap5g48Hn+geRVGkhhvPBMhAF/TBjorF2AIhAN4qarV2Au/eWYThnMRu5ws24VhcfpDQ93UTSwCc66ox"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.15-248d167530c7225f42a17e74a4b1c7461776729b.0_1625190600086_0.03609098697236113"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.15-6bec26e4dd2487188d4a39790535571634f80999.0":{"name":"@unifyux/web-components","version":"0.0.15-6bec26e4dd2487188d4a39790535571634f80999.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.2.7","@storybook/addon-actions":"^6.2.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.2.9","@storybook/addon-knobs":"^6.2.7","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.2.7","@storybook/theming":"^6.2.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.12-6bec26e4dd2487188d4a39790535571634f80999.0+6bec26e","@unifyux/icons":"^2.0.14-6bec26e4dd2487188d4a39790535571634f80999.0+6bec26e","@unifyux/theme":"^2.0.14-6bec26e4dd2487188d4a39790535571634f80999.0+6bec26e","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"6bec26e4dd2487188d4a39790535571634f80999","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.15-6bec26e4dd2487188d4a39790535571634f80999.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-vCsS/9u9RYAY3foWbpe1li6om6hPSoIUOmZCoOSbbIwwQI8alBEHwszGoPGT6Y7oPliERMZGZYN8SacSV0IwWQ==","shasum":"f2784dd7aded40c0cf5749be1413e3f15c54a25d","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.15-6bec26e4dd2487188d4a39790535571634f80999.0.tgz","fileCount":259,"unpackedSize":7847348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5A4WCRA9TVsSAnZWagAA+h0P/3h+oati9ku8wdBTv122\n7LfICBQ6DcqgAaaxKi3T7bT5pVpKSyd9afjSSR3A1nmn9itog/iuF05kKV0d\ncIp2qdn9+bsyBpyMsSqI/MXazwysxqOEglgPwiA3rWgaSIP3Z6gHfTVs0tJV\nXZw4nv/Qxjg0OXbpXBn6eftcsDtvfpz8skWlrsZN3LtsWYCgj8ahEtAohRBQ\nePsXs3JW1G5ucXHAfe/EWgu9bY3RVNRTLuASc+djIxie4Ca6LPVj2BalhiyA\nO5j0TmbzyaTg/bNQQYqt+C0pMeRTsekYZeD6YR+90e1E2SZEHQExQ63hM5k7\ngJzz0gFLJy6rJwd7rurnSePBJh095/w017C7xhtQRjHIw4IdMZ+fK3PC9W6x\nmm6DOTJ0cAzTsUZs3WAbF2si0iaqWTN5FSmErj/esRBXPTNoN5aD7oquPFv3\nKytwfjy0L8CSx4zTvCTT1LLVPY+b+fonUff+qoJX0c4toDR6E1V7xUu6QX66\nZUOlj+7ZOSdiYjSqp4v+1OhQdY5P/vezIzOiDINNp135v193kXkcU0lSLEsl\nxHwS0ID0hd2zeegtFh/NBXEL6E++svlWyUhtV3FXKG0uL4yBCYP2loiBykHW\nI5rguCsZNQvyM3clk5fb9ZBLljx4APWwJIaPB1kdAjlY7191ywlzlsFBa330\ndc8y\r\n=Br2c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmd/F/lo9RhG7e7g5S8ZxcBiupOKeyeMNb40SsJozwdwIhAMkjmqzSfxwZ1FZCYkEJ6GLegOcTH6duvyA5/tNwXGj1"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.15-6bec26e4dd2487188d4a39790535571634f80999.0_1625558549166_0.29587097337913626"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.15-49e5a561dee16d3e24a2f2672d308ae6d28e4c0c.0":{"name":"@unifyux/web-components","version":"0.0.15-49e5a561dee16d3e24a2f2672d308ae6d28e4c0c.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.2.7","@storybook/addon-actions":"^6.2.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.2.9","@storybook/addon-knobs":"^6.2.7","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.2.7","@storybook/theming":"^6.2.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.12-49e5a561dee16d3e24a2f2672d308ae6d28e4c0c.0+49e5a56","@unifyux/icons":"^2.0.14-49e5a561dee16d3e24a2f2672d308ae6d28e4c0c.0+49e5a56","@unifyux/theme":"^2.0.14-49e5a561dee16d3e24a2f2672d308ae6d28e4c0c.0+49e5a56","classnames":"^2.2.6","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"49e5a561dee16d3e24a2f2672d308ae6d28e4c0c","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.15-49e5a561dee16d3e24a2f2672d308ae6d28e4c0c.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-/Et8fiiRiD3XFHPArCFjP62q/nYEPzCDj5ZGslBNGhL7zmx36J4omi1uBfbfioI3l5f4oAMFP8pGu/7nktYdmw==","shasum":"cc7ea1cfb302f17af2d35f28a011d11e4d5892f7","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.15-49e5a561dee16d3e24a2f2672d308ae6d28e4c0c.0.tgz","fileCount":259,"unpackedSize":7847348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5LgNCRA9TVsSAnZWagAA1KkP/ipObIbLiZSfQE5/7M7x\nIpZ7lwCcS4n+0hpyvtSTU/yOXaDRvmZbELvRy1YRaCb5jdU5j7B4Z8qwbz2Z\n+rEabmpASJ+8h66R2dzQJQEcD7CWtPjcJgNXOoQ3NkjFVGAtc44LsHeYIoaW\niJe33fSg7ivKMY+T5xsylYkdpJ6TIY4ClQUyvkxkA2aGgn75S57aY9XWD+Iu\nayDUek8Pwhd2/X2JdMZuKwADtlHq+9dHHkdSKkSwHWLdWSt2I+ZooJa3o4NX\nj1IjPfmexrVPVp1v4ta1Z0zrIi0WlZi4iEJImTBOisZFFwCO4Pqxw6ni6ACo\nuT2j1ns88LFCKcXVSNuw86SoglkLkpQf873KdJ/seR0sS+VY7ZTXO/0p2/vm\nDGbEuefN2AYmRFAqojc7/ZBnG3hpzELbkz7m60PIx6b0HFMBhdi+4Ajq6phg\niFFF+zs67S2QQAJgkJKAizP2G6nMQzzgKfAcFuG9G2PmQ01TDnMHhlp6HAnv\nEeGrhF2NieMNPzELViW8anWK4rQhXzhK8DTDuIpzryFS2nAtI5G4UAbUyMmT\nSNbsP8VpqAPv8k7RRtWNm4rcf9JpwJyESKMBcB/lLhyYIa2wVH1fXhPyMy3M\nlimbY0UvjrNb5cqMlfOY1TXBsoF+1idCQyczL6H150FzcqHPMjJEoJyaR7z2\nOynN\r\n=lSP3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGfmPXHqG0FGddth5ZfbWDRFfeOez9ZZEbsl5GRQgjMYAiEA8uiME3iPuKL7Jf18rajxNUvbMPQaM75C/V7kHCdggVs="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.15-49e5a561dee16d3e24a2f2672d308ae6d28e4c0c.0_1625602060787_0.20853318936135468"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.15-56722f391b3c6b31a03bdd5f32ebb46e81b0d048.0":{"name":"@unifyux/web-components","version":"0.0.15-56722f391b3c6b31a03bdd5f32ebb46e81b0d048.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.12-56722f391b3c6b31a03bdd5f32ebb46e81b0d048.0+56722f3","@unifyux/icons":"^2.0.14-56722f391b3c6b31a03bdd5f32ebb46e81b0d048.0+56722f3","@unifyux/theme":"^2.0.14-56722f391b3c6b31a03bdd5f32ebb46e81b0d048.0+56722f3","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"56722f391b3c6b31a03bdd5f32ebb46e81b0d048","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.15-56722f391b3c6b31a03bdd5f32ebb46e81b0d048.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-QVunNG9btWT03zhMRPInlaXBNz3Ob2l3AMkmQOieOvSRKyn78ZM2Idbj8ugO7hyCbmBtORWmmCKpR2ovtKwIqA==","shasum":"ef51bbd50486362a807df0d6d3dcd3798145adca","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.15-56722f391b3c6b31a03bdd5f32ebb46e81b0d048.0.tgz","fileCount":293,"unpackedSize":8128840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI8M9CRA9TVsSAnZWagAA5VoP/0jtiW/hpa6IWMvRZkfw\nT1nEmX7dfoE2NpeH13Mn/MsiX/DGmlsTC75U/gLbTtPLmcDEcPmuXkxUg0Ai\nc9f0mJgxGnIdMpMWhiXocNeCdaDaIzCgEv5fju9PDgzh93Zbj+NemOUYCRVC\noix+v6DPH4x8HHKq6bsbvsNmtjpSwu32hpXQ2Fp56/jcoQUYaUPcxcTXtPJo\nA1WElA8nBBczWY8NUb/P5bf3UYHa2hrFapQUGUH6+iyi2njHBwZ2509hvNn0\nvFrYItootJ60I+ekHkk8c7UUl14LCFOE6YCRDjByYFvL69zFp/q0miywrh3v\n8OLd0Cr8sZau3sjZMDR8WjeuYIsKTAs0s26cSwiLuLqUbyMoDqA8X9sJr9Vq\nej0qM0koAYimgYxYL1Zz6pMvGq6Wbtf1s0M4IICy/h/6/DYMQcxIwRJI+QCZ\nzyaGW2GPZZY47GeI8UUAeTuovQgnNtETLxPWm8LRO6hhm3tb8my1dbVvSWBq\nGSGzcwUtz5zYmqdEM6Qy6dKoqO3DeGQJqozNOAunydDpdYZVkccmoTBhCHIK\n4b5LJ8zxzgJ8u57ZIB/uj9EDxK9tsJQGaBwGZA3umbSXAaytXBn89HCqc4yn\nhs7BhFdjL16xCsFCNeVv+w0D8vrVUqhecH+hutROudNJoBii3R8auAJuX2nF\nRxzZ\r\n=EWE0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAUHTpJCEFzzpoM/Pbe/TiBVHoaInPX9nK+Jaq/Yp0TiAiAvQfCzWNjiXgGvuFCA889+wMNDC8ST/8o0wP5wlOjTzA=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.15-56722f391b3c6b31a03bdd5f32ebb46e81b0d048.0_1629733692709_0.4709894042365683"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.15-99d863066f7996c6315d8ef7a2e3faeb3d336766.0":{"name":"@unifyux/web-components","version":"0.0.15-99d863066f7996c6315d8ef7a2e3faeb3d336766.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.12-99d863066f7996c6315d8ef7a2e3faeb3d336766.0+99d8630","@unifyux/icons":"^2.0.14-99d863066f7996c6315d8ef7a2e3faeb3d336766.0+99d8630","@unifyux/theme":"^2.0.14-99d863066f7996c6315d8ef7a2e3faeb3d336766.0+99d8630","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"99d863066f7996c6315d8ef7a2e3faeb3d336766","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.15-99d863066f7996c6315d8ef7a2e3faeb3d336766.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-+oxAzb/AZYwzt2un3l8amGAE86BWdvUVMd7m1dGybxZgaBkDBlfXGNezGZ27gqeoe1rYyWt5ghAAd/AIsZw0Gg==","shasum":"201f787a14d5a7093a600aa719119b02cf84683f","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.15-99d863066f7996c6315d8ef7a2e3faeb3d336766.0.tgz","fileCount":293,"unpackedSize":8128840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI9h1CRA9TVsSAnZWagAAbCkP/Rl9TidG/AO1yhdBrAwP\nZ10MJeJGs0Lyuxbu9gpndBimABKgz6Y113/nm4FexLdzQEImVU+xlkdwFR5h\nqy3KCj6e+vQiJPYVAstdL5WH/SaN/V8d0XdLUNoV+NH8aRACAAL4LExW8sq/\ng9L03yy0LvBBYPAcSxnAt2a7psHuCAe4p/NJy2Nl063xlva1Gq07QJhrmWkM\nmIb3CbKq2ouos79Ose8Y9vnjQki3o03IkMvJUZk46gYcIAPExx/EiCttXkjO\nH5GNYg0eEZVIGF4qUO3EQmSlrmIn9qQ+LVM6gkmPpdbvNe155Xs75a/aCFQA\ncI3/Flo8amhGst433rA208sAJsMNp+Xo69Qpea9jNjNLZA4ojrBSuN12TKf7\naSkP/tXpD/b1NhAtLOniSY0r6OkILW95l/4OAtd1rZx+PE7E2a/P5icvnktI\nyPXGZIV/IsZvi90GTiq8zke3ADzBottkwO9V8YJBVu+OWWhVfqTVD1gYMwAw\nt2oEdjBzGG/voWuvmjGn/QbIEr6GVny3JZkqvdTTD9JbVHIosGIyd1jYIGxp\nhDudEdtDDNSkRDtWJVd8Cka5u6tujyx5BbgfvjUgEgvuIUFxgNuFmrlhT9nf\n0WsZvflWNvvHoochjJeYb8+XCOKQ9tOof2DrTR4T+veyC0jkOHy2Zyjeo05o\nd2zv\r\n=M7YA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJ1bpB8M91qRonxVp11VHD+KThRYgpsJaU0iZDwMR0/AiEAjiSleMUFKGO8vF+iyjYfuKgtyFrmH7VL2dv9ZhMo6Xg="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.15-99d863066f7996c6315d8ef7a2e3faeb3d336766.0_1629739125501_0.5385676373482786"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.16-6ac471ad5f7abf7bd4933d3090db2827ecf5fdf8.0":{"name":"@unifyux/web-components","version":"0.0.16-6ac471ad5f7abf7bd4933d3090db2827ecf5fdf8.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.13-6ac471ad5f7abf7bd4933d3090db2827ecf5fdf8.0+6ac471a","@unifyux/icons":"^2.0.15-6ac471ad5f7abf7bd4933d3090db2827ecf5fdf8.0+6ac471a","@unifyux/theme":"^2.0.15-6ac471ad5f7abf7bd4933d3090db2827ecf5fdf8.0+6ac471a","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"6ac471ad5f7abf7bd4933d3090db2827ecf5fdf8","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.16-6ac471ad5f7abf7bd4933d3090db2827ecf5fdf8.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-w+qU+S46LPhSTm/wKr1vwQb5lpjt2p6syMIzG/lIE8jnnWPW8AB3jkZUGNVJrJlI8lzBkJxtCWmApQ4t0ty8+g==","shasum":"20feaa2a4d64bd069031c846a85910d8aa4e0085","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.16-6ac471ad5f7abf7bd4933d3090db2827ecf5fdf8.0.tgz","fileCount":293,"unpackedSize":8128840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI9oeCRA9TVsSAnZWagAApeEQAIs/JBPHcSUH/TG2ZehP\nTpyEVWQM6t8OJ06ko7o+frJQW3nQdyPnyorM112pXDmUnJ0y/oEOxh41d/o2\n7qikuf1MYiXSeCNMwz9Ac9FuuoBL5evWwHGdTfCsiAhApSX31/S+0qbE1g+6\nBsxs1mpR1d2irWZlyG+bZQIzaDtCO4iExF+RkU2TwNfOabQEHIUNP+jP197B\no2gKrlI7AsWeLThGv0oTLTzI0KW+MSLkfEuk/29mSpJv3diyXNhTolq3QcR4\nD0qDvSPlzTLt5aBWgwCZvR/4arrhcYo/ItNchgpc4p4Io8Zh8VJXaSNAsU5R\nIC9niJRYYehHrSx08H5l93q7ABGbLaNCLcw0/IgCKugvNTM63ZL9T2clog5q\nafLTp6DbT/LQWnQvc8dKC9CzeULi+usRfNVx7NddOmdWcC8eoVz1C+sUM1Ap\n1kW9AyZpDXZsfbgZe6Ix2d5HQHc5I6IG3ZX7hKWkpUkzqZ/PGgnkFSrH62u9\nOai1cCJrj9a0BnM9si7RDuL16V3bT6BmuAE1PTMqSZSPz5prCENArIdayt0s\n2QhRJaQR3HLw2kyArvl5IWLBToy2yE44XASUH1OfkMTDbX7VNjykNEe/LmoC\nqppXsiNJFyqL5SvM/vlvbCnED6IMqzfaM3Pl+t1SNI0DI7j7/ZaKAoNYPkbb\nn/TU\r\n=bei0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa2vSc9qRnXj+XEFufBnrSEXhBY4z2UnEwpMMQMIAzOwIgB6C7qhilnevoTyCHCQ92GYoEYuftDg6YPRVLnLgjzeA="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.16-6ac471ad5f7abf7bd4933d3090db2827ecf5fdf8.0_1629739550276_0.410267182551072"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.15":{"name":"@unifyux/web-components","version":"0.0.15","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.12","@unifyux/icons":"^2.0.14","@unifyux/theme":"^2.0.14","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"a97c20c65e0413e4975b5b3423a066ea9d5922d0","_id":"@unifyux/web-components@0.0.15","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-GShQ8BD8pXlS3xf6dWTFjh9r1wi2Tt9SM6PMLE5LVpwEY0YxIZKkAJkyC/+c71VDbJITuefD5e2BDnyQzu4vRA==","shasum":"90473d763716f94c2f950e810eb36e427bd6dbca","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.15.tgz","fileCount":293,"unpackedSize":8133615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI9+BCRA9TVsSAnZWagAAvGoP/10QOhz356eyGo5DJgrZ\nlTwKvSwuShbh/vM6JXNSfFZluIzrT6Xeey7RRTUVU0dAXAkI+m+TXUHo3nze\nQ2IgEWRhJ9LVCMOt1uOEqmWQFrTEADlDgyRi/8TUjxa/y2xh8Q+vqC4xUoTU\nh5DheBNp9sRlzlH8Fqpd5XSwHS0KAk3KHpc5xj+1VJd5ZVugvDR/BbBJFyx5\noQIfQdfEtdAxsFVrhGinZNKnRF3UKNPbg4TK+in5TWy7phcrfNE9mQmgfeev\n1+lw6dPjNO6PAGE73WWkec0TDZiqlKUId4D0qBKpMATgAsXsWaqayU0z4xLh\nJilRBcQZ1NhsGEbbVohvZffwAJ9ff7Q7mBbyDt/jCnRuslhZ3NbUqu9Lfioc\nk2/CcPpYILh5lu0xVb6Xgy2V5nVvzkI2XbUqWsktJB4HcOsAW9gBf88SMUjN\nsYNvM1qaiazisb1XDIiRU+YTpJYGPUv58EtLsD+fPc/6FrkoxuTSTJPY1WXT\nj+d39Y7/lAqAZWDIPHs/hFoJOK6Xbo5rmwRhSoVF0d+bxRhN4fuoxuDXBWe/\nfFeN/k5lcYYnb5rbxH3Hm/rj9ehj/ZeoLy6Ry8bMqMxfqu4ZUsV3cYoDjxMu\njorukuYwtu//0Qy/gWDzDxKOXEgxQpNlDpfi6yIwmmC7iMcBRLYG2NtsvfaD\nJixL\r\n=kwrR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHUCjIWYiRdUSTQ76xQfsOFYN8Cv6OizRSAc+Vsyr+B2AiBABy4ZfOZ3Hko639vqpuAPs33pQ7TbPzdEPthvrVpgrA=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.15_1629740929512_0.8501003406103333"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.16-ec7e9c806a1d8b24c9340832624910c8a1317177.0":{"name":"@unifyux/web-components","version":"0.0.16-ec7e9c806a1d8b24c9340832624910c8a1317177.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.0.5","@stencil/core":"2.5.1","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.0.9","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"24.9.1","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.4.2","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.2.3","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.13-ec7e9c806a1d8b24c9340832624910c8a1317177.0+ec7e9c8","@unifyux/icons":"^2.0.15-ec7e9c806a1d8b24c9340832624910c8a1317177.0+ec7e9c8","@unifyux/theme":"^2.0.15-ec7e9c806a1d8b24c9340832624910c8a1317177.0+ec7e9c8","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"ec7e9c806a1d8b24c9340832624910c8a1317177","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.16-ec7e9c806a1d8b24c9340832624910c8a1317177.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-2bXn7Q/ZnC2yNHT8tRYk9Hp0sg88LJjq5+shdfVOGqHFqUd+OspXxz8ZRr6YCxc0Mmaukr94LmgtjvaQZeadzA==","shasum":"d7f849d3a61c8c8c67f2d6e08be076fd81553379","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.16-ec7e9c806a1d8b24c9340832624910c8a1317177.0.tgz","fileCount":293,"unpackedSize":8128840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI+KLCRA9TVsSAnZWagAAtvwQAIbqDCG2QETmsLg5RsyA\nVqm23mLzNg3sLd17vvdKQIzlCk4x/m0rlzx0faxRPOdBz/31KuYrd7gSsQN5\n5XY7yIbyP7RlC66dv6j1ZzjzbA7t1Dl9HQ1o5R7PYJ3lak08ZIQ6Y0IrZgtd\nG2m6kPTD3590fH39UZhI3XrmaZp99SLwCh8SEF/39++/J7zguqTV1gJDLlXa\nvRqsdRyVLWt6clTUbJkZ0hTtEU35oVjzVFkf0pUv5TapWSq3gXc+l5oacWYF\nz0mbdeFaMBo98f9XB1wCze47xq0nd637uFnwe3IWYGzqhAeoqNuqyOncMUgI\n0Q5v3NzXYptQWRrn3kev7tx7/FniC+xOA4wwHdBWNRh+dDAGmRXPYmaMUjB8\nJZHJvAtDInZZJAG58ugpCejSzq9Axh/o1lLiLJhmnQo8S4+o6MrH0eBLkCGy\nLmjZp03y/hf15lyWauHvWBC7kHW7w5UlyNudJf4xe3xm9SavSPqCF/7dVfqF\n9Sa18h5TZdB2Dc7zlr0SMTH+imrb2rnOAw4ajfndrrgsRc4GV6p/lzVTeRaO\nDsn8XixCOxn+QyszWXg4Hjw6uwcbhZtTirCH2mGKfdUW7LEuBKo8pa7A4srS\nUn/kgilsamwYPLZYibNxO1A9hsNvdMXhhzJpwai+Iuubd2kF2QDdWIbWHVnK\nx9YO\r\n=jfkI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIClRrgVTTJWwIG2QmEC1l162Ih7y8XXflLLZELCr4G0QAiBbSnmpZJjZ/uLDFLafPfaft8pph8R+kP3CR688DHsVFA=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.16-ec7e9c806a1d8b24c9340832624910c8a1317177.0_1629741707106_0.42643624192212704"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.16-4b4081c3ff82a2946297a1ad3c1ce669cc2aba15.0":{"name":"@unifyux/web-components","version":"0.0.16-4b4081c3ff82a2946297a1ad3c1ce669cc2aba15.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.13-4b4081c3ff82a2946297a1ad3c1ce669cc2aba15.0+4b4081c","@unifyux/icons":"^2.0.15-4b4081c3ff82a2946297a1ad3c1ce669cc2aba15.0+4b4081c","@unifyux/theme":"^2.0.15-4b4081c3ff82a2946297a1ad3c1ce669cc2aba15.0+4b4081c","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"4b4081c3ff82a2946297a1ad3c1ce669cc2aba15","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.16-4b4081c3ff82a2946297a1ad3c1ce669cc2aba15.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-2yaHBQlF9dX9do+mqMChIlBvX/trhYLwWwZiRtfQbqvYqARZ+mYQGKqg+AiCD310lRSqD4KBbsEw3nIXJWQHPA==","shasum":"ea8fba9bfc4f37b4e056d5eb45fd04854fbcd996","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.16-4b4081c3ff82a2946297a1ad3c1ce669cc2aba15.0.tgz","fileCount":293,"unpackedSize":8141257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuSwVCRA9TVsSAnZWagAAfhIP/jCjNljxz+EgrKbjW45C\nTmtfFueTExqpwIiYgBL1P1fZ3ZTUwIWkBLB0XhoPKusDyTLr1RFwrzALV/aY\nfoSFevgCi19dYh4R5/R+0sV2PruhFxjcKvARZbyVRRWYP2oEay6RNs8XxdCQ\n664jUfJqzLsN510PJ6jbW6U6/yU9K2jBEIR3+NeKuqi8qF5xhbCHFRiSpEhS\n5M2aPUCu0rIWTv2sGSy4NE1BD0yAqjNJmVfZINtqbDKR1U54ZPJPOmDoQswX\nE1+cXCJjjPpvvB6FqyxWBGBymrEQRoQ2KdI4LEz3cKT5wAyonFGJus42gGDr\njQryswU9D2qtE5E6VB+mRWIEp5S6oYBzwipI0ApjPMibRV8J7fOeD7+ZAppv\nDER0ttAUerI34T9wPNW1IA7w9JOcE6x7IyOk0rFReAr4pdEW7ziyN79GWdJM\nS3mVkQy/BEFQVb44NrlibuYfNaLR66gkxAlvgTLTbA/lTwujzLCD9H6CvbL7\nBmWSpJU3lK6aDEnKwkHUBF+rUbitXTNzKzyR+vpYeE87QTAq2tzpegLCVIej\nqJySUdUfcm+ujConwDooNRayyu+JqM6M+6YurvrlHBscM95df5WqLG+YOONh\nKsveMNPJtmPaiCv3vXmB3/EmaiH0qPKviEm9esRgp8XjI/DHqL2g2vVtniMZ\n35km\r\n=PLr0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGd/6CwyBIlvCJhb3ILohHhUfmn67uHp3M1wf1AOjFFVAiBCTcE5oa6eBL6/dYZc2LVe52yQSGROWPNxa1CZrrqtxg=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.16-4b4081c3ff82a2946297a1ad3c1ce669cc2aba15.0_1639525396853_0.36816644958634726"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.16-7db6a0522d96beaed9eaa7c9960191a05567c325.0":{"name":"@unifyux/web-components","version":"0.0.16-7db6a0522d96beaed9eaa7c9960191a05567c325.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.13-7db6a0522d96beaed9eaa7c9960191a05567c325.0+7db6a05","@unifyux/icons":"^2.0.15-7db6a0522d96beaed9eaa7c9960191a05567c325.0+7db6a05","@unifyux/theme":"^2.0.15-7db6a0522d96beaed9eaa7c9960191a05567c325.0+7db6a05","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"7db6a0522d96beaed9eaa7c9960191a05567c325","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.16-7db6a0522d96beaed9eaa7c9960191a05567c325.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-4GzBpNRJGEmfIwwcBP8JaZf+9INJv+3f03gZn/pxLHCDmdjIeVPk+62gpVrq5yhE54qyQ3lmEHnb7Gym+H4CeQ==","shasum":"f7f4fd170d1cc262f9bf5804868845130b400115","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.16-7db6a0522d96beaed9eaa7c9960191a05567c325.0.tgz","fileCount":293,"unpackedSize":8141257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuS+sCRA9TVsSAnZWagAAnmgQAKSaEq+llU/EVAJdFPza\nKGSrLCSBJ0QO3jxOYSGX6O8XXxJafuJoce4OGDr0oKdcdXaCIwStdIXk3KJw\npVg8ypIqsyNC4L+N0/x6WgV8YVALb7zb8NRnyGaOKUMNsouK217jmCOxtKA7\nf6mEHS3sew1tONGfz0zeIxhDuHxASi8da+rVELT0yMDQU2mkBRZUCsFEkFdD\nTnC25nw/pXCSFbuZfvp7l50t0CjqMVCN09YmjS4b1ahrBGASKzJ3jd6WJTMh\nN+Yemk1V4NRjWfhHSvfPQDfiT7HG+V5HQXfFGORndttaavbMTnF0AV2wKAu1\n+MrM7ydydfHAuokX0/6gaEIt+jXIxxN407mL2mqUZH6nby1xuPSmf5oIPW/n\nMI0DEoTQ18SCXDFbkUPnwCUl/uJ9VT8to2Ju39QMYkJAHdFwPK+7iZh7ztCc\n/9RYgkhKRypIJwXp6b0+jaBSFveCDDLLT0tBdhpnMsE190KM7kd3MuQqVUzs\n/1DJtgm4g0cg+pn5mYnjB8KEyXpWLSMn1jLiES4mdk20hUiSeiRVwq6oV4PG\nDBV6fgrUQAYVid1X4CrEfqM36c4g9ygAmLRiGNOMzUhxQNYtpEwXk/8aSffU\n6a1LB9HteEmHE7sLdsNjPlRZIJ9xGHyf23g5J1znmP5dS9QWX3bsbeawwcvU\n5d1t\r\n=NZa0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAl1SoTmjVa6zRLdWw/pEkab3ZPMfGgasBs0h/VKl/NwAiAHiy03Yb3z0fV/q3w9xBlQVLswhPGlt0H+P05SH0gUrA=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.16-7db6a0522d96beaed9eaa7c9960191a05567c325.0_1639526315796_0.22151808929216865"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.17-62d938aacf286ffd4ca82e4b9357936e40779a47.0":{"name":"@unifyux/web-components","version":"0.0.17-62d938aacf286ffd4ca82e4b9357936e40779a47.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.14-62d938aacf286ffd4ca82e4b9357936e40779a47.0+62d938a","@unifyux/icons":"^2.0.16-62d938aacf286ffd4ca82e4b9357936e40779a47.0+62d938a","@unifyux/theme":"^2.0.16-62d938aacf286ffd4ca82e4b9357936e40779a47.0+62d938a","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"62d938aacf286ffd4ca82e4b9357936e40779a47","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.17-62d938aacf286ffd4ca82e4b9357936e40779a47.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-O4Ta3ByENh4rVdif+fLfQ37DlKj9y+0v7LKtnfEUlb5p0mvfnD8adYIelQcgkYpmWf23gpPjGzLS+a4+pUXBiw==","shasum":"38f42eec637ecef397af1f0b2d773e7226fa4ab9","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.17-62d938aacf286ffd4ca82e4b9357936e40779a47.0.tgz","fileCount":293,"unpackedSize":8141257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuTEUCRA9TVsSAnZWagAAEJIP/1HQc4J7Y65uyl0s6seb\nA8U07lLxPehwHSDSenQ0WKBZ9dH1Pj9QuFbPmja6ZjJ2zmQ+5HwkC24ZPytO\n6JhVqIicr5TiWUosoarsRNQqcdx8ZSCCJ/ceDeYR7yrjVkcC9pmr6XkQrBwS\n3gZ69uEAk43lGerG3ki08RYEOI7GArBefZm00Z75DK3LX5SLz2T9ItbpC+BQ\ngfTsZp1Dntx3CN9uM8dnb4AXpS78dL/Ch4C+dXNbw8oWqIGM/dNMFiZFLpOV\n6PtexOIBBB6vUR4WxUZ1jLDWVL1+7cAl4tFKmT5a3VUfy8PIlMTlL4Be/06o\nSB2lehGJEV67Z0C60f+KpB/UPsrBJpJuRa0DNcpvSoMXDNK+IdJAy7HIzCL6\nWP3x3DigTQBibCJaV9Gi2FqNfFWxXFsa+1gLwG0r4LsmMyu8Z5AjfBleplZP\nU49sax9gNrNpJxDUGMynx4rC/33adgC6wUgVTCNv29hDKLFEWpHZQT8jX7QU\nmuXJ3WR59IMsknmIjtk974A6ITY9KnuTuc8RcAgb6zgb0f4AyFVpAZsuMe3j\nsJ8vTvpEvlUspzak/Zdd1GiyBha6inLQd2WFXo3BrjvJ5heAIhZU8YkQfNDV\nHTt+CBDtihOeZPQxLD/NA9PLU7h+Yc/dwsi8RlqntPh288xvCn6UySkEoScU\npRWf\r\n=fBjx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD73n1HVpIb9fZG9Xrg9WmzQymceFZgWD1r4m6onsiC2gIhAOo95XFeYFZvPc8MqQDvBF/BZY+OXRQPFMr+XihduaE/"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.17-62d938aacf286ffd4ca82e4b9357936e40779a47.0_1639526675797_0.7687667360339323"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.16":{"name":"@unifyux/web-components","version":"0.0.16","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.13","@unifyux/icons":"^2.0.15","@unifyux/theme":"^2.0.15","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"c6b1fcde21c475408061a159b0de89a819205a48","_id":"@unifyux/web-components@0.0.16","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-nNDc6vq8wK4G9rLq905YJQoIwQcc8uyxUo2XUP05EaKCM++Eb2Z4aHp1eA8pNb9ot0tBvbxMdFQfAejHhjIHXg==","shasum":"6a39f26acbb458b3113098ed571144fccc08b55b","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.16.tgz","fileCount":293,"unpackedSize":8146032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuTP5CRA9TVsSAnZWagAADJ0P+wXI/30IGgTI2gWru72G\n8xa9FWvkYMmj7iM2A4b81mUf85KiE0yVS8EUYa1kjA8iNojAsA7XLYXodyEC\neI0wxdTlw2GV/doWv4sbovRL2yPeGxfIer6+R8K7X7FGn5HpeK+wQbLrTrWH\nDrywhJxqyNFBewziJb5+b9u1TDGpLx+ejdMSNZEqbiwvdioFPnyYyV6FKS+k\nVaoLGAk7w/nB0GvMvhB7j1AkgKSFN17rUwdACP7cBc/yrp2qo1pH8j0yT/4E\nmWRJUpwho/+hM/BJu549e6iImJfEWABXEx2jSsKlR4fUhu1AQtYkSYQt8zO9\nJdO9bKI5howK2/Gm+dr474uqvIL076GBIUaz+7EI96YcubcC0IpCiIudYmPj\nZ5UkY5ZJlUbyNTmZk2RM8lXB25q4bS9p58yHPOXD/30fysEl7zi1dBfUHHV0\nTr0nIJj6TcC6GO0pVNIYKr+QL1bXwjlj+GQGsQ8z3vCykGxeFsUqgiKSiBOh\nGQxCy3Zf2tUoJFMmr7xcOOdQkzdtK/lTQmKGEBoegbQFnK3TUiOFh2RHmtf6\nx+eP/Rz/GMu38IRPK2Si9RAaqTL00bKMCv6wz4R1qjuLxblQmPQhXbpW1J3o\numCWuGc+wHs2vXZ1HRZjneG+0IgJufMhOHpWfJGmAQqEYsf58cHGQpgdScPI\nNNH3\r\n=Ed3l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7w1ipVszclMyb20GbHxu5XdPTB3/lwPIQ/CLpFlWJkgIgTXGkio1b8ZaSfHNCf9IHTomKQYaGhlUqkC0Bhu3MY8A="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.16_1639527417404_0.11462429515482064"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.17-91032ae56aeb6129218cbc8428f45471b0a43b2b.0":{"name":"@unifyux/web-components","version":"0.0.17-91032ae56aeb6129218cbc8428f45471b0a43b2b.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","build":"stencil build","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.14-91032ae56aeb6129218cbc8428f45471b0a43b2b.0+91032ae","@unifyux/icons":"^2.0.16-91032ae56aeb6129218cbc8428f45471b0a43b2b.0+91032ae","@unifyux/theme":"^2.0.16-91032ae56aeb6129218cbc8428f45471b0a43b2b.0+91032ae","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"91032ae56aeb6129218cbc8428f45471b0a43b2b","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design Sytem team's research.\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.3-alpha.480/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes.\n\n## React Components\n\nAre automatically generated in the sibling package `web-components-react`. You\ncan import and use these like any other 3rd party React component. See the\nexample `web-components-react-app` project for an example of how to do this\n(Specifically look at the `App.js` component).\n\n## Angular 9+ Components\n\nAre similarly generated in the `web-components-angular` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis should be possible by using `yarn link` in the `web-components-react` /\n`web-components-angular` package directory. Just be sure your app's version\nmatches the one in the `package.json` of the component library. There may be\nsome issues with this approach however, since Lerna 'hoists' all node modules\ninto the top level `node_modules` directory, and symlinks the package\n`node_modules` dir to it. Some libraries may run into issues following symlinks,\nso it may not work... you may need to check out some StackOverflow issues for\nyour particular app bundler to sort these issues out.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.17-91032ae56aeb6129218cbc8428f45471b0a43b2b.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-DHbsqo6cE3yzOOIYx9/E4jpKzErvLFjQKau6oH/rY/VfvtJpYfxubwz9McrsSQe8zT7E+Df78ISw3ifrTy5D+Q==","shasum":"cd8e0ba13a7cd864e6230e1e1c6cf4609e906705","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.17-91032ae56aeb6129218cbc8428f45471b0a43b2b.0.tgz","fileCount":293,"unpackedSize":8141257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuTaQCRA9TVsSAnZWagAAd64P/0C5LeX/ch0Xbsn6d+bF\nUy9ZYZxMSKHZv5bqLAsVvJE8bjjBohIa5QV8LobUTqBwxX3jMmjvpsLQpN0R\n+5WdGUxFwufyG8XPPUW/3rbMR2LOPFQk+nY0kvap6OXQdJNXRS1v/1aW1vqJ\nxLH1rj89R8BSw43NQX9IDxQIk4A7xtmsLi2ybxKS04hYXNdFHgyE4Aaiq15P\n++qCP4FV0ZSUwT/uJZGopkiSGFSIwHA6zQl8DrMM36nSQWmAsU8nEh7kr67y\nDDv68vkOq2W6BGy/dec9rRVb4nz9823/2kP+iWJ5RkinwSc0zRfctAZZdV50\nlnsoX3j2Wtp+WxiYu8PLhMBr/+ohAOthDHhgmSytKXnu6C5E+0YXj33aW2Vk\nOuidl+g9ylLL15tqxYu//EDpZRYwmSvE3lsluN3wPOVHy3XjPZL2l52adc5D\nfePGUPk7zONHcO/H5EWps08+gczK1muy0FfVGuGw6LkoX59mDWJ7eFVCvp3J\nmXt09AzTgWR0hkXN6Mss96WM7WjoAbMO732VmHiCVMMOpShn9+tINvD5o+M8\nPdmVPwfYB1SSacNS1mqaskgC1Za3XH0JevPJQlN1t5TK5/NPLmL8FrU+Ipt0\nrY6N5Q+XrJQd9KIEL44z56Zmaay8y3fhCqmsN92VTr6rVUVH2xT9VY7Q2X76\naWyn\r\n=vpdT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD64OWlNLq3C3VuQDCGKBod+Tn063Tyi+k02V37wWwpTwIgFtQhltro3mIObTQKRPFwB9D9f3Q5nqAPrVOGbe51pn8="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.17-91032ae56aeb6129218cbc8428f45471b0a43b2b.0_1639528080202_0.0998047314264836"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.17-aff898b442e25ab342aa7233b65f08255617b5ff.0":{"name":"@unifyux/web-components","version":"0.0.17-aff898b442e25ab342aa7233b65f08255617b5ff.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.14-aff898b442e25ab342aa7233b65f08255617b5ff.0+aff898b","@unifyux/icons":"^2.0.16-aff898b442e25ab342aa7233b65f08255617b5ff.0+aff898b","@unifyux/theme":"^2.0.16-aff898b442e25ab342aa7233b65f08255617b5ff.0+aff898b","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"aff898b442e25ab342aa7233b65f08255617b5ff","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.17-aff898b442e25ab342aa7233b65f08255617b5ff.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-kSaUOwKh0y2nGpK+AJlQ3AARCllGVX9KprfqPFHJqJFFC5ilVZqj7Vh+X7VRvK3/NkDvylBHWIJJRN1Tj/H52w==","shasum":"986032bf0abf4294aef0f004e9d677616608e843","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.17-aff898b442e25ab342aa7233b65f08255617b5ff.0.tgz","fileCount":310,"unpackedSize":8429770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3vfaCRA9TVsSAnZWagAARKUP/jpA28OJPSFmzlgmVbAr\nucQy8hmEgrPfjbrbaQvPa6udTPsDwtXRz86rc3pO9bhQBCW6YZ7UHHVb4vBk\nVHAMR3YY4CqMceZcCu/NFDO/p7a1EhW5sBsNyUOjftIyNToVWwXfIaGDouVK\nZ8dFI5271BHZ3y3XtNWORzJvZkfBK906JcTd1O5G4vTuxkpVjYLTPigJWxD4\nWcD6nNelADl7Vw8l87d9DG0uNKIsQIQhgwlFdLi/a0wmHkuD8t8ZdLzrNLI/\nzTGri0OvlSzes+KCXStbhnFUCHgpXsCv3mZcFw90CbROuYEAlfDLR5Im3sAX\nUWQy/gG2pOGl6Pjw7B9L3ShZlsBLM8lhvHumPXUG+wscDG61PINrNdCw7lfv\nld/TjF0ykcM6UEVbeh/EAXSTK2PRrvM5DqLIF+kKnqzgyFu+JhVlT89xWmAJ\nYCXZUB87n+emn9dV0uY7SdQLTEWi7JoiwjfCAMevEGxN2C/Kw58Lx9BFg2c0\nCacpvRYXM+V8daqJZKrUY3aZW8OBqlQ6ryZLHAl1w9dul/SKD/GR7iVXSPXa\n63uLBFMy0mR7FjcrkM75pjLmoNVskS7MJqYgvsZ8+zvbho8tUs7vwj+W8m2r\njEcaUZlBdmjlndz/EjTnVhDYGHd7APH8LKdDQWQoLzBsQX9JzcKuWpGvvKEN\nvHoF\r\n=op2Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICflUORJMLfHChUCT/MmXqpTbFC/sO7drfL0f5EbjEc3AiEAuvwzreEaNpIYHtlljcVepz+267NlXp8rbHzFmj7zoJo="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.17-aff898b442e25ab342aa7233b65f08255617b5ff.0_1642002394417_0.6262681430625134"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.17-847ae4cc05a0dba56bccbb0a7aa782c89d99d720.0":{"name":"@unifyux/web-components","version":"0.0.17-847ae4cc05a0dba56bccbb0a7aa782c89d99d720.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.14-847ae4cc05a0dba56bccbb0a7aa782c89d99d720.0+847ae4c","@unifyux/icons":"^2.0.16-847ae4cc05a0dba56bccbb0a7aa782c89d99d720.0+847ae4c","@unifyux/theme":"^2.0.16-847ae4cc05a0dba56bccbb0a7aa782c89d99d720.0+847ae4c","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"847ae4cc05a0dba56bccbb0a7aa782c89d99d720","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.17-847ae4cc05a0dba56bccbb0a7aa782c89d99d720.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-VbIUhxOpHWaD1O89Y9L9UZG593Xz+oFZaw9+m245bM6wb3MMmoiyK0s9dcHP8Yq9gM7JxBJNjffuuyd5JcIVIg==","shasum":"663e8a9f93026fb398f9192680052f22ed698d7a","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.17-847ae4cc05a0dba56bccbb0a7aa782c89d99d720.0.tgz","fileCount":310,"unpackedSize":8429770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3vsUCRA9TVsSAnZWagAAp/sP/0ki/vgfuOq0SVJjErq+\n5rz7+XGOWwhUK6WzDabj0cjI1l8trYUsFNZfexPV3dxBGiKCButaqJ16V1oG\ndRFy7CXau00S4GMS9UjsdNu/28nhvA8LOqO+zwQ1JBwqeoXZad/CoId0IlQr\novqKJscvEDFDE23F9E9NJXRJO9ih3yjOqL9nj4QXZ4iq66dnzRpHv7a1iMzg\nQfTOu2sdmpo6XD8/vv6E7IgJyg5MPpZG/ahVGuSayopkTBrDcQHYZDey1XFz\n8utd70vO35i+Xqnfl8GliKFVROYODu2yP9Zyp0jluUJgcfbptPeezsG20adP\nNnO+X8x1aj3rO6xlMeKk28bMS6bWtDlvE0egCEkWgZa+FKN1m1Ekaz/f2jyT\n43lcLXTr/2oKvHPvA6lehU386H/k6ocElbRnDygYfiNoiLaFKAwq86xNUXk9\nWGGIIRkK0JOcVDizLzTPs7vmlwd9+LbP3K11BK4ai30sJmMWRkAmYg07f83k\nioFXxeg48ISfbMeY8KLgjHuHzoq3aaD16ZscUD1Fl3MBCdFJxQrfDZXU/J2d\nRPPk6gZMLyo1NS0DcYtzpw0GBaQfQYJOfO77iiP65He398WeFqGufl/FM4ct\nSRb+snkRoaKKi8jqTsrSCO9h96LNs/9IBYee8A8QULMwUFmO8LJVGG5/qVpW\nbFWi\r\n=ix/T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhpcpX2MoVK8f2vYpjIW431DPE3A32m6yEZsHoCdZYUwIhAOG5DwgKxCrMKBxwbTOwhRqpf7SY7Sh/ma8o2xr6MgOy"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.17-847ae4cc05a0dba56bccbb0a7aa782c89d99d720.0_1642003220162_0.7079095730760292"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.18-612b49ef84175fa44e55df3fc934e2635390d131.0":{"name":"@unifyux/web-components","version":"0.0.18-612b49ef84175fa44e55df3fc934e2635390d131.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.15-612b49ef84175fa44e55df3fc934e2635390d131.0+612b49e","@unifyux/icons":"^2.0.17-612b49ef84175fa44e55df3fc934e2635390d131.0+612b49e","@unifyux/theme":"^2.0.17-612b49ef84175fa44e55df3fc934e2635390d131.0+612b49e","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"612b49ef84175fa44e55df3fc934e2635390d131","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.18-612b49ef84175fa44e55df3fc934e2635390d131.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-cTNv8P4vT4H1V4Au8iD4Xdgha6qMmDWiJ5DN7tfcrN9iPvdySmOwkfoYYXR5GV2mDD5maJHZ80/rGInbHn+7Ew==","shasum":"4227f44891e659c81e18588ee167190e5b96c3d2","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.18-612b49ef84175fa44e55df3fc934e2635390d131.0.tgz","fileCount":310,"unpackedSize":8429770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3v7MCRA9TVsSAnZWagAAK7MP/iwHvgiC41oMGiOk7/nV\nMB0RjJI1PEH2opXhNSnNscDPz2s3viEnF6WEM81GNKA6bbavQIFfUavrx1AR\nFTlUMlgblMmlNYGxUwyM8Mc+aG6uSLEZ1z7pFf/5dn7OlDSj29U45f2Vbl9/\nC6aKnNB/JJ/vvgwUFTPiLROmgxdy3689A03UkANtNreDKN4/zQtF3VEXgPqD\n9GaXkvY0F0lUoBUUY1AUhrjnJgj6KSPHyCHdeiRWggPZlcIjg1w4Ft7VT0eq\nEfPs9QECvMHvesYinaBWrJNHt/4Kz+rbZivTacENzouhedotGmJEwilEhGIy\n+ApkPji1hFAg34jYxzMzpCRfO/5SMYNeso9fc7nhGis6o66PbO9UY0up1nEc\ndX+FLbJOFcEVdYPXTXAYrJAOgdiFmIKiyNbG2Rt7t8mcM36KjoSzCvzA04vn\ncY85ia9SAOmhC1z/KoaIewBhcGybWAhkIadNgbv3fXwWG9y0brEgWdJtPi4E\nZRu/HWI85UtcZdIyKwKw9hz3T8TupmdN2DKV7QcXEdaP4gHHtkTdxyvG1DLu\nfWux261h7yhgB6pKKQlKtwynrVlo5LYs0fQeFsWNB2gutMQZFTNQfcbyQ0MK\n1/5Y457FxXNMvXV62W9+N6PwCzEbm5OqJvBF759x7jNUco57qim6UpS8FGqr\nQ+dV\r\n=cBFo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPeS8KPZPRKffsQep1hB6zBb94sPS33auo3y0/xVXkAAIgS/SpBXg52O4LWwx6CJgJ7hPrSzwFJJzmbdw7R5RdONw="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.18-612b49ef84175fa44e55df3fc934e2635390d131.0_1642004172372_0.7311330585914528"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.17":{"name":"@unifyux/web-components","version":"0.0.17","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.14","@unifyux/icons":"^2.0.16","@unifyux/theme":"^2.0.16","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"26ffc03dbfedc541d53d48d9285912dfb0e8aa1d","_id":"@unifyux/web-components@0.0.17","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-y/Z40i0dqocCGnSnYaXATtf2nZx4eMZe3zHpRyvdXbMckFGZhS/T6XeFurXyxavEmlMPCAHvVJhK3KD5EycKuQ==","shasum":"66e1b2d4e399475577bfc53b2c8ba3876b22855b","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.17.tgz","fileCount":310,"unpackedSize":8434545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3wGxCRA9TVsSAnZWagAAU8EP/17iiY5lkp63f/pCkxh+\nrzD9bjYFof8OEnt7kqVd2glqrnlH+p5xXno18OBSXPeVensR7Ej3Z080j+zA\n5wRfGRt8hvibNIcXQ6ZfLo5vUziDNyNRWeTpaksgMuvL/Jjm/NW3HVqienSP\nCl8ux1pP5q3VJFTK9Gr28E3NjTMM/Zn9qa4dhcmTw4CvN0Hy0hgw/asEABIy\n9O6WiDxDV7ZOmI5yAtns3m68BrHsQE3oCCzE9TE2VRRPrqPfc/k5MqeDSj/e\nHpxCKHjeY3dPYWDoXiFHxXvPUrgoF6eTrXnYSPLBfw0LKjgW8JVx5KpbygkO\nLMbYXXL6xBRqZRHbTBM+QejzciV+zw8UcszApu84AIO0dyV59XRdlY9n2w6J\nvqsCgRqZPEISN+682vAT6qk62pI3MJDqq+EByi1mEW6qah4CxS6Mkb53fwnG\nzmnKIix4OhF0h+5QxXqowvEVqe/H2YgH4zhtSnTostOHW/8vdhleUgembrZU\nI8WO+T+NDuQad770+Vx+5qzKNkNx+Rq1piilNh0Va1vs9+oytfrEucp4nLlm\nNnTg+/6J0j49nul+QF7tF3KBN+XplH0CRPudhMBKslgXjS3795RuUrH8jxmR\nqc4jVTSHIJuSuvuYawz3nccKua6rGGBs/N4TA/Y861m75BV6JmzQZckOskW/\nVjFe\r\n=Ce42\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHTLYoJzIaLVO/l0wpp6Ykr8O2vxfL2wME60mFZu5qppAiBlnlywALV9Gy3Nq+b7EaI3Z1kEZeuUInBy0ifKE2HYig=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.17_1642004913484_0.7964556450904818"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.18-442a5139eb70a419cc962d4838bb2bb71cca6d24.0":{"name":"@unifyux/web-components","version":"0.0.18-442a5139eb70a419cc962d4838bb2bb71cca6d24.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.15-442a5139eb70a419cc962d4838bb2bb71cca6d24.0+442a513","@unifyux/icons":"^2.0.17-442a5139eb70a419cc962d4838bb2bb71cca6d24.0+442a513","@unifyux/theme":"^2.0.17-442a5139eb70a419cc962d4838bb2bb71cca6d24.0+442a513","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"442a5139eb70a419cc962d4838bb2bb71cca6d24","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.18-442a5139eb70a419cc962d4838bb2bb71cca6d24.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-2PSNsMJ+Ry1NxvUd1H9L8nXSOF2UaQhyMzBdsZD/pOVIjHNtxA03ObhUaqZ6ZHqoNNG3aO2zp803CObV93DAfA==","shasum":"e8f8c06c729e875e856917b4c42f5d082a847a4f","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.18-442a5139eb70a419cc962d4838bb2bb71cca6d24.0.tgz","fileCount":310,"unpackedSize":8429770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3wRHCRA9TVsSAnZWagAApbgQAKNl+Hk8KPt24OIzDrbj\n21mHrzyvWs7tt3Zq+OoEJ4HQ3LWEDSxBev0VZTtKs97GPcXKMK+r3m7gA6B/\nxsudsOBHrI1f57e7K8Qd/yjfyyJb8pWkiupLcP3L8mFlQleak3SR+u2d5m3R\nSKux1QRFo3hBYzoDU3IENvc9DfC+XKxPbJ/+1FVGhBE96fWaQh90y3SA1rCz\nnz+UnlFFPapEgkmnILx0kwy+TREtq0CIk+9TEMDDy/FZ8MKsLJ77iSkKWMNf\npQvI0m4AEJpmjwwVifJ+pSye3inu3UV1j6tB9t1iq4qVVw8ZrbFOTsZml1oo\n/MpjUWZl0iPSRwHh3DdbPRyXufoQ3FvnhW8h+RPG2V4wx4wUNGo5+DTxhSyZ\nkRTCs24hFyFMKuh36peiWjSwe8FGGoQy+jqWmlNPitVB3Y5KNISosvwSzhmZ\nDgsA4Q7JA+9pd3grarZch7x7QFT14a+2Hd89AWBEs9KrYuYD7U95PPLn+zVZ\n1Jw4kv7g0DbyqUqbeuOSjjignsblsJPTS/1tTk030fGWl9HLoUOtCjNWquIE\nZ0vWxSwTw1+2/77fTE+XF/VTFTFd+9KQgtU+84qS2xoMCHGqxusj05JLqycf\nddRg2niI0xsdDuM5NTbKAluGB4rDiBibU+9dNMhu0AscwoIR+sABwl+Q042T\nVvFT\r\n=CY0a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuF3SRBybtnJ0PO64Koukx2SaBcfrNmtkhvMh152QDqgIhAMUUsVgsJq5Y5UWYuO2+qJRwfSasusqp5Cv3TAr4eGpZ"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.18-442a5139eb70a419cc962d4838bb2bb71cca6d24.0_1642005574715_0.6036783889053576"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.18-cd348d104810134066b87e79c0e973bf646c2e7c.0":{"name":"@unifyux/web-components","version":"0.0.18-cd348d104810134066b87e79c0e973bf646c2e7c.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.15-cd348d104810134066b87e79c0e973bf646c2e7c.0+cd348d1","@unifyux/icons":"^2.0.17-cd348d104810134066b87e79c0e973bf646c2e7c.0+cd348d1","@unifyux/theme":"^2.0.17-cd348d104810134066b87e79c0e973bf646c2e7c.0+cd348d1","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"cd348d104810134066b87e79c0e973bf646c2e7c","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.18-cd348d104810134066b87e79c0e973bf646c2e7c.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-oIaDNeyLzX1DKipas4U+qAmH5qkWz40u3gz9YShydZjybxnnqheTIXYJDtowwk9tE5VlN3Y+Dsd8LRD5B6Rt4Q==","shasum":"eac802b50251685c9106dc80b2a2f9b290a7afe4","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.18-cd348d104810134066b87e79c0e973bf646c2e7c.0.tgz","fileCount":310,"unpackedSize":8443302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8a+LCRA9TVsSAnZWagAAEyEP/RdDfE90fYWlA4cb9eHJ\ncBo3kD+/5Q1y90UcsM5qYZqA0XCvAUpylHiyzQ2SLpdekGQSpUQl7KPWN67S\nmJsDM3AzlZ+x7sFyP9R+mcIbr9M+PnDBtcMQ02meAm6VWk5vWFLFpuMlvUHr\neydBHEnM9UH7AET8FTKTEfhkuvjO0a0r/bBdM/dBjsCI3Wkcr/xRFxJr5R6j\nLsZ8bEAGyJU/L9PWjzUzok7cB3AW/bnx+pFax+yqUwMRZTAZy8I49CLcusQS\np1MGTqMm3ab7Uq/QUbDY4qgYgzp5oRfD9YW4gOf/tl1cFGx54wE+l8kjfuHu\n1bPZSh9XMgEIuxejek1ocGAhFCrUJ6E934xi/kfrkFc0vr9OLCNWI04o3Y66\nKfGeXMzbzmKd6OaDFUmQLNNfnUq8XkUFoqSXbkYHBTWNp+RD3yW3GZV0srXP\n1WGoS8MiLTwYYwTm/WOGlBmPGbTsET7GpvT5dJ06WyegAXazZjIBOpwTfrXP\nK7pqZQB5Rd+i6v5WRuMEjhlQmPejKY8coeb/FarXwaMfWd9e9bhERTs4Paiu\nXmi8HZ5Ifv3belqsa+hgVw4LrmAdXn+K4w64eLY4/jhaKqX8GZmKDtj8uBdY\nBjZJtWs69ugivxxuca6sJGKf3eAQMffyuDaPprXSNcwuCMNNCIGw6qmCGKzn\nMGt5\r\n=khjl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG5rPALwUYyIeTPn3cl0jJtk5aSzF3QzQUfwhWdlMz5CAiEAqGD2yjfrBdxYhlHqcEl5wrXxmlGO3/IrpISWw1b3FBk="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.18-cd348d104810134066b87e79c0e973bf646c2e7c.0_1643229067143_0.43432475643561896"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.18-fffb4e3a81a292638e7a597921b7a6c2ebb56174.0":{"name":"@unifyux/web-components","version":"0.0.18-fffb4e3a81a292638e7a597921b7a6c2ebb56174.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.15-fffb4e3a81a292638e7a597921b7a6c2ebb56174.0+fffb4e3","@unifyux/icons":"^2.0.17-fffb4e3a81a292638e7a597921b7a6c2ebb56174.0+fffb4e3","@unifyux/theme":"^2.0.17-fffb4e3a81a292638e7a597921b7a6c2ebb56174.0+fffb4e3","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"fffb4e3a81a292638e7a597921b7a6c2ebb56174","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.18-fffb4e3a81a292638e7a597921b7a6c2ebb56174.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-KX1fHeu20SY+jdKD72R0LGSlNlW5XA8HbenAcjIpbG3PyISnZG6yAhxSFZyUdE0Pk1D4RzyipXguJGocCKkh2Q==","shasum":"2454d9b511bd9db9b8e905d9f63c825cbb39ee21","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.18-fffb4e3a81a292638e7a597921b7a6c2ebb56174.0.tgz","fileCount":310,"unpackedSize":8443302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8bw9CRA9TVsSAnZWagAAHJEP/3gcIM/RXcJJq9pfWAYN\nXv12PIQnyMrLIHhA5xv/4c41BnjmZhjk7ry+4nu1laqCA4y/d//2bOewYalO\np963fPeDSmNUTr4pK1tB2OtOf3C++EftSQPsmGW4+G5c2z4ogtewWi/Rc+Qn\n26Ergm3/Tb6vNReWkmOe0TqrvygKgcKswJfQrPZtS8iNjfsGxIWEn/5dodCu\nhDy/bQwqTsMK3j+Ntuax5VTAhMjxi+4B/eVYp+NxFDuWtBx3RPkRoCxjTHRf\nRzQoFdTRU0YgMq6cXT67wAsxGXzihnJy42y6t1p6ERe+YTjigAZ3Upf3ndO+\nHKyqOEWq2rIzFmufH27/t1qheeBxjggU86oeMS90jS7JLzhkgKW5RTWjdqH7\nUPPSsT0NMsWTljqBg1mF+kdiDiaWXIh2JMZ5LjyPuDQzzcNiRnFBtwTTsn2t\n/KkQkw0gZgpUqoTKIa7AUIgl57++mfBuH/U/k+BNUxcqaWfXLA9uHVA6/WCM\n+GxYOxvW4pAS+H/5tE4jlnOr2YkWSgffZUsUL2zmhVA9n+Ja26IpprDE9mpP\n6nIyQu3jbZ4bKIZbjZ36b4b2Y2hYM8Ky9//uWeoQa/AYOrqCwq0pRCyTbIuB\nrm9NTzKTqylz9LYRZSXHDSlCVNfyuvQieFuznD7j1Lvywd0vorOqWC6mdRkx\nnm4a\r\n=Jahd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRYKXtbDj42TX49Uh9beftMWYU41Vzk0UHMMFX5VL3LQIhANktgG180H+nCtDPdmYAHK/vDoLDYRj0A10pAzthVhtU"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.18-fffb4e3a81a292638e7a597921b7a6c2ebb56174.0_1643232317558_0.039031640066460316"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.19-3b90c05572909b0711ad7532035fbb817127c930.0":{"name":"@unifyux/web-components","version":"0.0.19-3b90c05572909b0711ad7532035fbb817127c930.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.16-3b90c05572909b0711ad7532035fbb817127c930.0+3b90c05","@unifyux/icons":"^2.0.18-3b90c05572909b0711ad7532035fbb817127c930.0+3b90c05","@unifyux/theme":"^2.0.18-3b90c05572909b0711ad7532035fbb817127c930.0+3b90c05","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"3b90c05572909b0711ad7532035fbb817127c930","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.19-3b90c05572909b0711ad7532035fbb817127c930.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-7cN11kHLYPfgi0JGwuFD7OUNq2dPF6zL9HvE3nzdRPVSHQXOAE0jfNUg6Du3NlrS1MbH4QgjtM/Ckm4E81Sxiw==","shasum":"b3c5effd26615f85ff63cb8f05cf02ed3af43059","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.19-3b90c05572909b0711ad7532035fbb817127c930.0.tgz","fileCount":310,"unpackedSize":8443302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8bybCRA9TVsSAnZWagAAuHgP/iLiff8gM8ZADFqV/GKQ\nqFP8ddBazxDHKbPUuYXgJg+owiBCJIgrI3FbDYUprLxtIS+tqWw8Brmp1KUU\nZMkSFnHW6TGIn4I6KVLHYQcqk4+XliKoloeV65uSZuevuB1lZO6o+mtheQyc\n/hMH1MyAPPTudAYY5aFYCPNELJoo7NizqOGVuKuYtLF9Y2oCxEZLaZe0a/EF\n4m7DPGyxif0lwS8DethQhOuYmtO/9/JCk2uFnqBpyu5yXInXM1esBAZhFtdD\n344rOiV1ktdjZvWixJLn2Qxt9aqsXf3wVcZpWFIx0rIht2t9r0IqqWw5SfTF\nV7X68rVEBBP0vA8srY6194jD+cTsWIi2zideiKHhhl9vf7gJaRbGxIzUNoSm\nU1hp+ZLDoyWb0pdrGUh7xkM5FcjL1z4c8YctLrfUBriVOOKCfNnltZnLxwAC\nv+DG74etiLo/5AkzMGYHjpFwSy7bc7IOYSoPULvFdoE3w6PqozKT0ctQRfrz\n9bEGpfV30hM38BhqjFJtEtIDF7fufGnLUEB/oD/KEdwLSLEOIcW6GULCmwE2\n1/umrCiTqNUXvshqToXcdlXBPh5ZjcaeWhgCjJlPk9qH+fIGMRoSC1Xe1Lgg\ntlz3XfGry13XNClKvYx048P/isL5H+sc5UuqZnS6OAm89F+lXJz61G9ejJC7\nHKXR\r\n=E8wL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEiPqmhYDxKwMlFosC0oeMeLNUGKoBSPGnGCgAHPaOxgAiB/rNx80Jp1FTPTCc5LdracD7WgYRrQF1a85krmRcjvUw=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.19-3b90c05572909b0711ad7532035fbb817127c930.0_1643232411164_0.2955600105439189"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.18":{"name":"@unifyux/web-components","version":"0.0.18","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.15","@unifyux/icons":"^2.0.17","@unifyux/theme":"^2.0.17","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"e2a52de79cb3812d98a382ab77379d4f58975138","_id":"@unifyux/web-components@0.0.18","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-LNuv62ac4mao1ybreTCEvMVcnr9oMEJZRhnWsQ6fF0Ko3sfAtosBhK6Apnrx5eEv7i6YpRTwl2KGGdxuFS2GMQ==","shasum":"c9c7046b88971081c1aff5fa86cef6db31e10d7d","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.18.tgz","fileCount":310,"unpackedSize":8448077,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8cAyCRA9TVsSAnZWagAAqzkQAJDuQTD9HNKXiYVBzaF0\nRUI3v/q8M9PwZCYRaZ6IoG4w3QDRE0nxRqH2dnztMlCxjZnYNsS/ZLeJ3pDL\nJ5XNWQ3S/EWPVwmtigWZjo8VuNlEHLTP6kJ0Af3ADS1Az6ScquUexsdtgG91\niinqR8Yh+aqoSod/PLdJ2ne8X7c3B26g8fDbVRtcAbZAZUSLNS3SQ0wYOvx9\nuEfooBVuydgn0+KMytGz/5vkzSADXd43nIT9JUqv7mE7E4ow+lK5D/h8SKJq\n4iFj63dPrTD/tUHTxPnoQDuUlgJBiMQJZCL30VZ0rrWHQF+1NlYqhPq354CO\nRgKGo25X8GO43mlC0NDl8pmx9cLiqaeWZbQkAHRy4cfL1XSpTMxKvLL927H/\nBb/pXV0gxRfQBfkLQGpJkHcG9MZ9iTEMskibgA6bSXmIyFxUWrVbqZgtDkLd\nssAOYZhorYPmyD5q5xgIiFq5Sd7f9Bfre5dbOk6k+05aW2MctvMAnSd3rVX1\naeQVB2d/PsUu8pe+Fc0gFP7Cs81h43htSQDyxHMi2oizNoZBvN7GZPiNithn\n7g+hfLHaoZV5ZnjG4xWexFryD4u8/8KQp8XF9m7O/XhHAUcnOP7xj+SjzLI7\nl5d61eF1tPVkTDaxDW1TBZhq6k+/LDjqrKJSFJJlghGmDGYE8I/rdI1nStdl\nFvQJ\r\n=o56r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICzrX5AuxCG1nQT96RcmlmU7Zfu/fxdWQOZUqZwzKv4fAiEArf4SsiznEyPBcvjHTcRI+rwzD+8QfEPl1MnYnhhc5PY="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.18_1643233329908_0.3836462330168122"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.19-9e40319f57a8baf831e30bb9b0edb0fec4719b95.0":{"name":"@unifyux/web-components","version":"0.0.19-9e40319f57a8baf831e30bb9b0edb0fec4719b95.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.3.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.4.4","modernizr":"^3.9.1","playwright":"^1.10.0","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.16-9e40319f57a8baf831e30bb9b0edb0fec4719b95.0+9e40319","@unifyux/icons":"^2.0.18-9e40319f57a8baf831e30bb9b0edb0fec4719b95.0+9e40319","@unifyux/theme":"^2.0.18-9e40319f57a8baf831e30bb9b0edb0fec4719b95.0+9e40319","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"9e40319f57a8baf831e30bb9b0edb0fec4719b95","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.19-9e40319f57a8baf831e30bb9b0edb0fec4719b95.0","_nodeVersion":"14.16.1","_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (linux)","dist":{"integrity":"sha512-iTvJR+vd0PvJUXnIjVAae1gtz/8r3ZhMSV0x+gdK0JgSsm7LVN2uSI/3ZUEGHfAgAPJDO2O/zr6tOkPFi3OR0g==","shasum":"2c3fab94525db88020bd188a3753d5fabfe475fa","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.19-9e40319f57a8baf831e30bb9b0edb0fec4719b95.0.tgz","fileCount":310,"unpackedSize":8443302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8cLOCRA9TVsSAnZWagAAmdEP/0VhmNZDNz6bu8eC1cA2\nCyE6yLG169CBqd4e7sIWo+tSSVBlLgze/Otx6BCWOPcKtcF4nGTE87XzwMfB\neUu3AC8s/FzNavpDGf51XQDY3jPVeyrwFvP3ujx0WFegS/DKt4PIqHAstYTV\nfr/NN6i3EDH706BUxri5DCfpoCjGdI03k1riDzaXL1P1fXjRHQzAhHIohcJY\nUAKGKWv9wObEyq/T3p0/jxu+1C30wWz88M+JHte8FsTO808GbhzetDIx7UT4\njoEJlJsab61b4mB9xEVJH5tJYaHSh99ux+Lit7Rwm5i6x5t4eseXN4wzX3Uc\nngVkZuzFd6PCz4Erv+4enZcKxjkRl74V4iR9KcCuIUm5B7Ae1/5modrU5EyH\ntJ0qJV+oYy3luv+560xpGZG+2aD/ND4OLeW+LBZN1POAesg2BQB9La9NCHPk\nSgJoQR985GQzHb2E5jMBjE/jSkHvDixvsF6pc6HVf/x73QJBl3EslBnIe9I0\n86LrfWG3uEUL1sKLFUKRnT7u0QVfD8Uzwy9J+Sjzy1XPqnmZu6DhHAVxlytH\n70+M9cU2vPkUV29fsN43cjH0vetvlhJWXFPCYZcgW3acmqL4xDmD4/0jnKg7\n9OOgmgwHEvAhUDss3UsFyB95ERYnf4wXRKIpPp88AWY59VyrIYV0fDSlfzAJ\njarc\r\n=N+Qt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG5HlnHxMkQGpHtWtH7YMpGgsviDkaN/nIJFlOvYRQfoAiAvLn+r++S40ADx9vATWWkRMHVuF7YiSrnitdsN4DblZQ=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.19-9e40319f57a8baf831e30bb9b0edb0fec4719b95.0_1643233998483_0.3898670319402229"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.18-f68b548bc564ca74f95387801d571a319b95b724.0":{"name":"@unifyux/web-components","version":"0.0.18-f68b548bc564ca74f95387801d571a319b95b724.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.15-f68b548bc564ca74f95387801d571a319b95b724.0+f68b548","@unifyux/icons":"^2.0.17-f68b548bc564ca74f95387801d571a319b95b724.0+f68b548","@unifyux/theme":"^2.0.17-f68b548bc564ca74f95387801d571a319b95b724.0+f68b548","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"f68b548bc564ca74f95387801d571a319b95b724","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.18-f68b548bc564ca74f95387801d571a319b95b724.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-rb9XVNXSa44kgwFe6/PeBzhTPUBIvUjllNMVM+wzEIGhityqEl3QuU9JitlkwucoLidLwhUPUpdIoKjWOSE49g==","shasum":"6cb36e88062d0863a87e934fd98575c1b95bb0bb","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.18-f68b548bc564ca74f95387801d571a319b95b724.0.tgz","fileCount":315,"unpackedSize":8519132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAtMdCRA9TVsSAnZWagAANmwP+wcQTgQg2t4BknSh8COk\ngds0CYcUDLyC6BGUwmG47VyywzULcqU0Px7+NrJJ9T2zicZQKbp9SlCyhJyg\n3+pwynjB7OUsqvE1nt7ZrH/BI7oM+I130f5Au6d2Ua5chkoh0xUM2kgYFfEW\nIu7mVLwsAfnCdvNmQnkHQivZIOw2I2MKuyH6Q8g8JPgd44yoxTgf2sP8vt+c\n9NnsBRJ5Tb0Hb8mzcxgnOxw8UkgO2e0JbBplPZPqIjvmQPqEUsORYb8j4sVA\nOimw0DgcY9AryYbg4LHZKuul7MweJ9HEk5vPl1c7ZxqSLwTeu9gFie88ojgb\nBV4TswGItwgoCyXCWsSk8iVdBuJuKydWZNx7UkS4pnvVi7eYS/uhlcpV9tiG\nT4JelvrwBRVwr68JieLiaVVeHu0sg2Rj2ZatYKhUFh9+LvWe2QUyFnkQszCL\n0gPdAARNI+R0LHKXYlBtv7U3+xYFrM0SJ0ipgyAD4kBq3lYMnQl9rbv3oK+K\nDmlQhzNQ/hcvl2HEBWJ+eKALE6bzzZ9G/43nhQf4NWOyyBK1skF7mzra6dli\nHdKNbYsWiQfw2bVV1KLqck0Jmx1gJm+gtsxnph8l/3XmQDvkmK+K+8FKcxt5\nVpfXyPLxP9+03+HWm+Vf19DsHgXDivsKukPeJXK2GwSNN3toDfvb0N/0NxTZ\n3cz3\r\n=vfUy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrnGwnOsmqeRmffhaYmpf5RmP2qNh3QsDhUtaTALLl1QIgY3NaAO1vYeNHO6C8izCM1qggay6UgTXljaz/CQTLe0Q="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.18-f68b548bc564ca74f95387801d571a319b95b724.0_1644352284818_0.2735726608866491"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.19-ff6f6b78be09b0eccdf7fa43f8019cd1ad49f9c0.0":{"name":"@unifyux/web-components","version":"0.0.19-ff6f6b78be09b0eccdf7fa43f8019cd1ad49f9c0.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.16-ff6f6b78be09b0eccdf7fa43f8019cd1ad49f9c0.0+ff6f6b7","@unifyux/icons":"^2.0.18-ff6f6b78be09b0eccdf7fa43f8019cd1ad49f9c0.0+ff6f6b7","@unifyux/theme":"^2.0.18-ff6f6b78be09b0eccdf7fa43f8019cd1ad49f9c0.0+ff6f6b7","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"ff6f6b78be09b0eccdf7fa43f8019cd1ad49f9c0","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.19-ff6f6b78be09b0eccdf7fa43f8019cd1ad49f9c0.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-92YBLagmLGM1liL4jmGlrdJJw0wCNzAU5mfRmWeBLFlNtFX0c02c34z5g0saPFFPsdl3H9KbdwCiG8P6h4qGJg==","shasum":"96055e6a11a5d8ae9419e3e508b063186234999c","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.19-ff6f6b78be09b0eccdf7fa43f8019cd1ad49f9c0.0.tgz","fileCount":315,"unpackedSize":8519132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAuXrCRA9TVsSAnZWagAAG90P/i4utBPd2qWOJe3m/cnx\n5q5TNLcRSGdX4wUJ+3RU+T/wLMWrgoPCqXjJEz6q5mA48n80P8CuFGnuxwpV\nI1lS0CjbEumaMmc/bxJjlszzD1Ww9z5SCzygXr11v3OvbHZqUEPkNkQV4sTu\nSpy/foegGLMStYwN+x6rtvcEKwiXJcrh8dNQ47c5QVsUB6uXC4ZUMdXOGEpr\nm6kygI1tqx4AfgGRB2ZYZwJetLKJJCbX8vw8OrgD+KKcqhpitVLP7T8Fotzv\nI1vi1LwMU9Yv9cLxEh8ogmnUv8kbPgu+GI/1jNfdLaNQD6h941hA4i9BZm78\nn4FpIT9Uv9yHtuv2nfqxls10ZYwCPIltBR/GnnodHcVlQY/Y5ep0cFFiPkN+\nvyUW6LzpeIn5Ooo8+YVnEprqJh5K3sRF40/pyDlkagvhy9snQc7TuC53NAfl\n2/2nL/yJw0BvTlKeNvB5Ar3Rh5Sswya5Vtsi3wACCVDHGal7d8Qt3KL8z3R9\n4JU1dcNHZRwi1LjyaHp2us7sYENPVnPlO/zvE1GWZTftmg/hY+CC9qOK5Bf+\nbWJK2ENhoeXxzz5WOgqo4XRZHYXKE+cXY+V9JuwHB/MOWI2ozJcZao5GUYB9\nNNiTCxxaMEoVBK9OXy8Rlzxtny2cANalpLfHzWZwYEH1hlmpiWA5nRFM7KXf\nvM75\r\n=ncev\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA26HXp8sG1oHhWLFovl6YWo/wigmhxONc2iVdUGM6e2AiADzowdBjW6GClrjYiFGRm8VIpwHrAZZLxO8Hm9J5aHyw=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.19-ff6f6b78be09b0eccdf7fa43f8019cd1ad49f9c0.0_1644357098969_0.5572978881933157"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.20-2aa3b1aef411d55bcec5e1c8c495d3fc0ea438d1.0":{"name":"@unifyux/web-components","version":"0.0.20-2aa3b1aef411d55bcec5e1c8c495d3fc0ea438d1.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.17-2aa3b1aef411d55bcec5e1c8c495d3fc0ea438d1.0+2aa3b1a","@unifyux/icons":"^2.0.19-2aa3b1aef411d55bcec5e1c8c495d3fc0ea438d1.0+2aa3b1a","@unifyux/theme":"^2.0.19-2aa3b1aef411d55bcec5e1c8c495d3fc0ea438d1.0+2aa3b1a","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"2aa3b1aef411d55bcec5e1c8c495d3fc0ea438d1","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.20-2aa3b1aef411d55bcec5e1c8c495d3fc0ea438d1.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-dUJKjUVqCCqh/M5JHvydwECTORMwVRl4y5K/456VT9jdP70K2IciVTDhpq1Gwi97ufHJrATAjpRhJhnQRoK/dg==","shasum":"cfff6683d9b07ff5653eb209147641ced0ef8902","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.20-2aa3b1aef411d55bcec5e1c8c495d3fc0ea438d1.0.tgz","fileCount":315,"unpackedSize":8519132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAvBsCRA9TVsSAnZWagAAtm0P/jjwFZuKlksJrBTj7DgF\nah2l9NuckbAmoSPFh7hBFXfwejK/WQriFS2L5NNW/UabasNCJVAiATIgQcLQ\ncDNCD9PcEJzRcAB5sBFIDAVotYCd0LW0C/Od8HX6AOEChl7+QWWI759U78Ba\nps8ci+EJyR9Om9UddRvz8wCXQWuucudtWhH4Oi/hqJjSBJuTcCxUp/JOo9sh\n9QomTUFLRAiaF02EESm5xkQ/UXITdh8WebO72dUH98YPiFNV+fL3TpiHEPA6\ntfUs9/a+mDHvKhM4Tj0Uz9WqJfSQSK6j98/l4x/F7tY5jg/ykaIgbosLACgl\nxpMSyXt0AdYB9g/dP5RpSM+9m0ku6UfNqJnJ9GrPsGVABfuaPbsAgjvdKvHv\ncIljfwWLvh1IYoyI0WpBfXK14NMZH1hF2tEgY+WamWs66y6xyKtjLvkQPcK5\nUOjJY75K5pOnIIc380DfmWz0N0pvo/oYxPggEpanmsqyZALzhNMfVre73pA1\nKYGjGa87pIjC8YuO/vqPjdBhCJgUGqP/hT7EQKZUV2bkBtU9AYMJ7cI27aeX\nCD+gO+9yvc7SsgbWS0al8CrYmYslyFZw69SkE0QqAZFEe7wsRSqVGF/hCfMA\nx1Z0fMBGIDPhmMyJNNr2o372cS8iuwPWmfNmyRs2Ku3Ks1DnDozxHdCY/XOn\n8ZBQ\r\n=DaQu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4UAtiTSYalkqv6WolXsL0oHzoxBrT+8S0nd2tV3lnaAIhANd1Cp1/rvWguPeVT1c2TSeRKlCSbeNdkWeL1j8zvb2I"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.20-2aa3b1aef411d55bcec5e1c8c495d3fc0ea438d1.0_1644359788626_0.05293908838167649"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.19":{"name":"@unifyux/web-components","version":"0.0.19","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.16","@unifyux/icons":"^2.0.18","@unifyux/theme":"^2.0.18","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"4f4869fa8350d5a4a8d2fc06b8f1b4967ab3050c","_id":"@unifyux/web-components@0.0.19","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-2ENhXkTXM4XNtDbsM/6bvdtTCEqkkbGCMc2m+IDCXTFpVK4TYRyfGKEzdkzoh/G6DdagMEF1X3VQOYxdALi2EQ==","shasum":"b6eea5668afabad48fde5b5758f954cbe5439446","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.19.tgz","fileCount":315,"unpackedSize":8523907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAvXoCRA9TVsSAnZWagAAu3UP/1qgt2Xe06EklBC0cBeE\n7Tc0qN/oADkMHxGOl0CXpWoUaNgP45B9KsgvuKuM+cuMk7c5kmDFiZVe1quF\nPlvO0+PLrxn1nmWBgs+HBDr8cWfHJLivg9tk9QKz6y/qJv5RCR9FM+QuvviY\nZrgmIBZdjux7JC1uM86vMxiLSzjcBMUcg2+pC8JcvqnyejxqGkRQA1VtdguR\nOfwzAml+n/obBYyLiPqoKZCT8gmciHctagoWbq8DHkbPee99nbxEUzY11Xzl\ndlm7ybBNyn9XQCqvHkSZI1Wz+7gZR1bIBk02m6wExLjwPbRMYJQJP90W+f0T\nScA0avonJZdgV/lmOU9v0DPAuPxzjh7fBqfM4+4DOAOhzJGw2InQsRDi2DER\nMka4BBmkMTuJRN3WdhX12OKv/mD55f0OF+PKiOEhJoMD71M9GA5gBVKZ9rRt\nmiBCktMOIyuMBfZLRvtC1eDYiVF5O8dm2+wJb0OzYBk+hVwdqRBJbpvE6Meu\n9Eh/qV0HtQpHZBwQqlfsaRDTaFL2T5eFV45JvExWIHchmM0T0ZOxq0hJvubP\ndsrjkForRe0OrSSbvn7v2GUgv8Rnbc5VSVdvIXW1KPzu62F165fqKLvM6u6e\nwWSRU2LKj9qfoMIlFhkCCVsLDBkHSLEt0u+4fWyNZirKouYUwHZn5FyWtLzc\nwC8t\r\n=gWBz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1ub8vfMHcDiCeDGz+gpsIYVA2fpKEgsa2dsDQ7uUM5gIhALKjtIMu637hP3/i1agPimMHtkIoFltWPoMut2vye1dd"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.19_1644361192067_0.9314234787872016"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.20-def0c56af4a71e435f6920456e09a945598413ea.0":{"name":"@unifyux/web-components","version":"0.0.20-def0c56af4a71e435f6920456e09a945598413ea.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.17-def0c56af4a71e435f6920456e09a945598413ea.0+def0c56","@unifyux/icons":"^2.0.19-def0c56af4a71e435f6920456e09a945598413ea.0+def0c56","@unifyux/theme":"^2.0.19-def0c56af4a71e435f6920456e09a945598413ea.0+def0c56","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"def0c56af4a71e435f6920456e09a945598413ea","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.20-def0c56af4a71e435f6920456e09a945598413ea.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-N54wRhy788s2NzmoS4U10AYElRizxKJhCELPvQ4klVWYlcEU15LDCT+dd/ug5T8v75Sr+Vbkf/9mPaJmtWjacQ==","shasum":"53f652c3af260224d4439187070e18c9357bcdb3","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.20-def0c56af4a71e435f6920456e09a945598413ea.0.tgz","fileCount":315,"unpackedSize":8519132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAvowCRA9TVsSAnZWagAAlD8QAJywA4fsN2lxHXImEpit\n5mpANKDmi2TKrYhH4VD4BTXFHnAueJpslfNcau4WaaiSHIi9AX6xyWXPrhTO\nDnuff4sl+GOlsREVCImBwvUTwIYEyI5BCT3lHj7zgn4ajauEzAyWfdjqlCfh\nf6V5rHWpq2gRcx0Rsd9y8tRxkbpLKflpSGHXhyQW6vCe3tdCFJc6DyuzlC/3\n6r9ZI5mUmz98U1SG3sFvb5HJRVIcFJ1/7Kexk+/2mbe1hB+MgqGQUrtRyBbO\noQOyP+xnQwP5T3bT8arxXn58KGIt/yov1U8DMXrrQXqwCCzth1W5QkW12t3l\nG1AYqp8DDxjj9jHkyX19KbL9JiqRr32Ll8eaMNx+zfz2o8W3dZ6MKCDbrO6t\n+w6+zFVRaUZG6BM0ssdIwuSmoDQTo6EcQCfTEQiHS6FgSMcminQ3Ry8Rv/kl\naOmLY0XzKjPnBxQLN6UfVkyeNWsNXPnkX3mM3RWG3kQoWQ+NBJtlA4tMc1hv\n31ZeaIFN0WBrUBsNxNcnXoElY28o17I7wdkAVZGeNEjPv85PPAyTWyM98Opt\nyHFpH8CdcPeMhzAEmWnu3Ml8cKl1xcMGN/bbZzNKyqF6QG1eezjL2xLJwoex\numIRc7VQlxYznFba+FAtKDd0iPHjmiwGy+B+U0AHGHI9rM5n84e+kriF9d1T\nXIvg\r\n=RcWb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzoQoS2DrQP0yhDYnCT3ult0Dlm8pf/nTnUParKiQ2QQIhAIUfV96/rx5k0lFCk815V8tF3piS2wE3KA3iak5S/hbO"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.20-def0c56af4a71e435f6920456e09a945598413ea.0_1644362288264_0.23034761370837886"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.20-f88b670a1a161cf223512f6ef4eeb78d04740cd4.0":{"name":"@unifyux/web-components","version":"0.0.20-f88b670a1a161cf223512f6ef4eeb78d04740cd4.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.17-f88b670a1a161cf223512f6ef4eeb78d04740cd4.0+f88b670","@unifyux/icons":"^2.0.19-f88b670a1a161cf223512f6ef4eeb78d04740cd4.0+f88b670","@unifyux/theme":"^2.0.19-f88b670a1a161cf223512f6ef4eeb78d04740cd4.0+f88b670","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"f88b670a1a161cf223512f6ef4eeb78d04740cd4","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.20-f88b670a1a161cf223512f6ef4eeb78d04740cd4.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-8bBxZ4vpHVgdNw5vuOVfLMJBINFR0wMM2PF4VXX/61fgVCSkkZIygv8v3ZtwOStWgSx5KeO6ShxWwheXedTOpA==","shasum":"888afdf6f2edbcb43454ab9f9e473bc10ad8f96a","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.20-f88b670a1a161cf223512f6ef4eeb78d04740cd4.0.tgz","fileCount":318,"unpackedSize":8529628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ3AgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlHg//ZjYNYGOlzOW+TCJMC04dJLfiz4FT4FCmEpPMwMXpceRO95jD\r\nV+p2GMNyG9+Ux29sWmzscvZiE54NKi3Tc5QofDS7GKawQF5LVCPlLrYriOzK\r\n1Lu6MWK00aRs5yKj4i3qTNHW5eSbYIvSzvepWmB974vpCQUaZzQfIY//OF7/\r\nymfPQg96OeoSOapzmUW6rk3cWZ3Q+tGi/ebOooRQ+kOGmwM3W8cwtXhR2HvG\r\nVkzUIi5gkvwGI1rpxoCv2SNKn8rt7SCucWmh1iEmlLCHcQABRZihNc+9kD2a\r\nkGrH4st6AD0WnfLf1v8EVzUzqPTTXZrakqO9BIK3CeQnYGlySyONKkhRMjUw\r\nqLi6GSFybp7NZeOJ58ottwwqnDFHAsp3b7VxpKqxjnqexF+plHuJIuxV4w80\r\nrauJH6G+Fj6JtUmRgq9WnrfOs8Pb5f2oTS7aBRIHItYBJhcD85TeJSx8xxLZ\r\neCFYTuiEFCK8gNBHgtx0D+JajEg0MHQQZrlrCgPkQOeCSfrwQ4X5qwp1UTd+\r\nKvkG0zFo8CxoyZ7dm9gsO0cI8uwR+kVZJ5U4q02vTpazdCn23bPbhxnZTOW9\r\nTP9BLvQlIHFcxax7kIMB+vxhKpwL8K8AcBLyc/DUVC+J0GuAW7c1CgURk2aO\r\nzttgMim0wJj+CZD1elyBtdHciPwTUC7kkVU=\r\n=h+5z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq5qfHrijoqWQEXc9ag0UJLdHeRNl3vcKWvtsBi/aKCAIgNMXIO92jytSgVpZZBJ6PxKX0dXBuGZVnT5fOobiV+5Q="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.20-f88b670a1a161cf223512f6ef4eeb78d04740cd4.0_1646751775848_0.24851062064091178"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.20-c1eb514596e1389d4051e51be66e8f666500d184.0":{"name":"@unifyux/web-components","version":"0.0.20-c1eb514596e1389d4051e51be66e8f666500d184.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.17-c1eb514596e1389d4051e51be66e8f666500d184.0+c1eb514","@unifyux/icons":"^2.0.19-c1eb514596e1389d4051e51be66e8f666500d184.0+c1eb514","@unifyux/theme":"^2.0.19-c1eb514596e1389d4051e51be66e8f666500d184.0+c1eb514","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"c1eb514596e1389d4051e51be66e8f666500d184","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.20-c1eb514596e1389d4051e51be66e8f666500d184.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-F1Oe+cz67coprL2EyZoI//WX3yDKIjCKIB83HtXPmxvt7R1MxNLCn/B2vcr1Au8CRPp6iYCgvt8yKNVvyJvezA==","shasum":"b218943d7d6a0306ffeb132fe4ad4a1572597c31","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.20-c1eb514596e1389d4051e51be66e8f666500d184.0.tgz","fileCount":318,"unpackedSize":8529628,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ34dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7chAAkJDrvR/qD355UWhHFkoCuDTw/2q+cicJsWTJXxWkJYJ4mvpw\r\nctqdJPTiyLvGvRd4RgCxGr5bJNjSc38rvUCYJF7IBEVMNHu97BeJ5cqFJLVh\r\nRsAz/pDSbPO9IuSae3Uw6PCTd9chxs9o9j83jVyTPPtUEIcoS25rVTtajRRN\r\nDbAN1/7q1IwXRtmarxVSZfHQGo6LB9zhCboexKTGtb9bKUFD8KCaNgbPN0s1\r\n3gFCJXlWsQJ280TsSQZX9YBn4pxVWqyLZdxpIcbCHj/qVFKzIYgpF++v8cWP\r\nxmsE15KtnrtMPVtAOdZL3955ideGVWYccPxo3G5Q3wJGez4KFDyYhMKx5Hci\r\n1aoqvwCAd4+agMR2TvKM0aGzMzd1Za9lwI3q3YH63qFTB21SjHqcbYB6Zkd8\r\nRR8UbhuB50RrzBfAWxHRzp3AFh/Odhi+G+vlm1Pb9qmoJ61AMM0ok/VelI8M\r\nfDwPAyIYPvFUHCE19uekc0UEBi0TGI6NHVcPetYk1/o25jk6RCSNL7lx7ZzB\r\n354BeHW7C49RHHLNS6HiFXvsbAgetIyx1LPP/GAcJp0wWtD0oiEmHWCl3Yml\r\nx6Zg84hOZZsxNMRvkvxeRP+hFAPJbs+jX2QrsSI/lz4KjHCtDtfxL/dqhel+\r\nxCY86ecNkEf79amPl/d9fKk+dInYg/BWAnA=\r\n=VVIw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtx7/GFb1SMfnGBz0aLFApCmnV3uSzij6aVuJo4Q9pxAiAW7mNwyl9GSE5Mp9XSGDwtu87v+n90a9slcood96Mtnw=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.20-c1eb514596e1389d4051e51be66e8f666500d184.0_1646755357319_0.2787740782040229"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.20-d00c773ed84f4111f9178e4a6ed1aca33202398c.0":{"name":"@unifyux/web-components","version":"0.0.20-d00c773ed84f4111f9178e4a6ed1aca33202398c.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.17-d00c773ed84f4111f9178e4a6ed1aca33202398c.0+d00c773","@unifyux/icons":"^2.0.19-d00c773ed84f4111f9178e4a6ed1aca33202398c.0+d00c773","@unifyux/theme":"^2.0.19-d00c773ed84f4111f9178e4a6ed1aca33202398c.0+d00c773","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"d00c773ed84f4111f9178e4a6ed1aca33202398c","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.20-d00c773ed84f4111f9178e4a6ed1aca33202398c.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-mspv3rkcUzFdAlCCWUIiPMrzQf7D2AYeepA4dgeuDvvNofLJ6xmObiCBg2+ISiiHnsw4yJA/k3d3SYGi6bsshQ==","shasum":"cd2d5216d686fff17d813b97c005a55aa6ccfe8b","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.20-d00c773ed84f4111f9178e4a6ed1aca33202398c.0.tgz","fileCount":318,"unpackedSize":8535606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKM8RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzXw/+L6ZSdsycmKMrOrqzCQadCKMP0iHpjoTH8mbbfFLPMXlucu4U\r\nXg/VpkkWVFx9QiFHL52dqrBZJ9QV0y7bKwF0sK51JBe/I1z2MYENBfy+oluO\r\n194kTp8z67IURJ64+Jhaw+EAs4LymqZQOxhk6be2DhV766C5uXK2k6v+PNCp\r\nVH+TLktn4mb0DaGmIJvzQb4Komd0RM2uQoPPP4DfpQr2zVC/YFRHWOxg8P5X\r\n4HD2gZcwup93Xffi638cv6sXJejNdBSkIH5W5VRKZ+69Pjn+nVrgb1/G/2Wq\r\nj7sppZ4X12KWvyPINNpDok77JEfgVXFABIQLz39vbXYDxDADBc9IfylMzBYN\r\nZ55hhWOpI6VhIWaccUJNn87llXXYcQHvdLzRrZJxSDk88OaR9Guu08shV4cW\r\nIxuev4us7IQAm+QaTy1Zurnaco9sLKzPLH5E7x0TEJPbgHQECBCL/g87rwSI\r\n2cmy2Rw5tIhHA10/GG89N5oygq7NK6CDh7a9E7CS1/Jay/hZEbizBYUVkOwV\r\nU0wKzXjWgmUpbK7ZNmWNl9Ckwzu3+H+ahvF+btJkRYiH0Gm90UZYEdloDH3b\r\nreF+55KaIy+pQbiJSAgeqNl1W4mpflzO8LuUU8ucz/KZ+RnOQIwKMhBQCmts\r\n+NDhN93zM/id39VhYXfIP0a5tE7UAoJ/qXE=\r\n=ab/4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBOFvWpvupPKrfVmrOgxxhnS76gjksjvFsPWmGjDc8yFAiEAlA40eSh3FqjkQ8/1L+9n46npMjQ92+78KAS5rhcpQf8="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.20-d00c773ed84f4111f9178e4a6ed1aca33202398c.0_1646841617311_0.2011800842153011"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.20-07dff60022f59ee27a72a253c77a7f1fd7d5cad4.0":{"name":"@unifyux/web-components","version":"0.0.20-07dff60022f59ee27a72a253c77a7f1fd7d5cad4.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.17-07dff60022f59ee27a72a253c77a7f1fd7d5cad4.0+07dff60","@unifyux/icons":"^2.0.19-07dff60022f59ee27a72a253c77a7f1fd7d5cad4.0+07dff60","@unifyux/theme":"^2.0.19-07dff60022f59ee27a72a253c77a7f1fd7d5cad4.0+07dff60","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"07dff60022f59ee27a72a253c77a7f1fd7d5cad4","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.20-07dff60022f59ee27a72a253c77a7f1fd7d5cad4.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-GLjw7yLrMgVoTjoeymSzykw0gmMK97bRGlf2cVUE/yWqOCy6CIJ9W5JhcBzl6/uoHCw34BJuW8tTK8B6fsEbHg==","shasum":"7cfbcad22c24a0e896fee0a3cfaafc726bf3daea","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.20-07dff60022f59ee27a72a253c77a7f1fd7d5cad4.0.tgz","fileCount":318,"unpackedSize":8535606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKNyzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLqg//RmBuwroQzLAP13q2MFPCH3F0VnnAuEg54cDxC5Ux5AzcNUGq\r\n9hHa7z3fehIpCfd/ScxFQaivxmg+K/aHlZUdfub3gkIjr6OK7JF61YL4SEZm\r\nAO4l16/3tJZ+IcxQd+tQ2GcdT4Mnz4csnzD3EtdHXpBlAl1D205elXUdpKLS\r\n3+AaiutLp4gzJQf9gjjEJZMM0Cw/E/UGA0YgH20XbWCR84x8FWzUvjAYIusE\r\n12Ukd5O6j+J95ilpUcZxoh29Lb4Y63BVwo6Q72654f+mP96auVW/23sGFjBJ\r\nZrfLQUG6BDsK9Mg1Hiq8gGpchNavPokY8yliKYzN8lMjH9+oF0GtMfT+SB2G\r\npTdZVsOwGc1t78vlt3OIvqLoNcROtjtZkNX1DbaJmc8qwjz2b08V1ElMFHdX\r\nFsND/sp9s5R7hE7ROiPEkq+19vqJFvENLtRSX8TKBshEzolDKZG68wpfU8Je\r\nz6gqOMB1z6j3JmvmIWy5WGZJqTPe9FG7yIbOLS4/ZpE42HClGwTtvkBKa0Of\r\nZNSco1OpWzc5FNR7aLQi6UqJdyDN4ynX/teUSNBzlsoDZSAqSclv52xl8Cvb\r\nu1JQSsoO5qLCKWwwDppvRbfN/Eeb/m1elFgRDTZCvE+HyVZrZD9esdvaHGMk\r\nhLOB30kegraCyAgP0vx0QLJiKU/1vuf/CMw=\r\n=188B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDo6l0Or1Jpe7UNiL1l8xRwkXEhYW5pr7JWqqbrJuX0MAIgTYd3DDyFZ8KuEpwUU/TLwbYhzvm0nCh8RzfFVWtSXyk="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.20-07dff60022f59ee27a72a253c77a7f1fd7d5cad4.0_1646845107282_0.5855179046816239"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-47d0aa90c7bd811e203236ae9c28987edb39b260.0":{"name":"@unifyux/web-components","version":"0.0.21-47d0aa90c7bd811e203236ae9c28987edb39b260.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-47d0aa90c7bd811e203236ae9c28987edb39b260.0+47d0aa9","@unifyux/icons":"^2.0.20-47d0aa90c7bd811e203236ae9c28987edb39b260.0+47d0aa9","@unifyux/theme":"^2.0.20-47d0aa90c7bd811e203236ae9c28987edb39b260.0+47d0aa9","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"47d0aa90c7bd811e203236ae9c28987edb39b260","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-47d0aa90c7bd811e203236ae9c28987edb39b260.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-h1xKKDA0sMtUeiF5YvvNxa//hpmkR/JL6n9riECym/CiuwnOOTsfUl/moYsk2ReQ0DlYLoQWwfVmv4BOZQY0qQ==","shasum":"3e0475eff5059254e9986ab6f4421c0800176f76","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-47d0aa90c7bd811e203236ae9c28987edb39b260.0.tgz","fileCount":318,"unpackedSize":8535606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKkd4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquVg/+O+JEdLeJ6jX22RxvYpvwhTQP0VxlNuLNNTjUsI8JeOWyaWDw\r\nmOdnkx8r8vlwaJRe+n5R/RGsfliLEG32JZyFCUZjtu5DCDudHSO3GYawldGb\r\nggxf1iauXLWWxluiqKefi6BSxWLZry8r7hALusCKTcl0N2raopk4gqfOAtEr\r\nua8HZPqd170N0ReSdXuKE7k9SWf5cr7Cf6DhySGVlQ8QNRromN2krL4zNzzB\r\nxxwkRTYHW8DxINMLDq4X0lPSLHLbQKIg2UmJ35SWgW9LVy1V0NdGh8ENFf6Z\r\nGrAOcLCY47iuc7bIeZSMQO3NH0s+bQApdgRetlpCOpZXB+huD8oCMJM/bQcA\r\nRe4vYite1dvRGjg9INIqLkmhwqqYwYp40LxFADwu+pGiTZ/Fysdv9kPoIKld\r\nhNrwhf9nNebcIOMwq1g62u/r0XQ44FGpCEb007pEg28/E6mvwVAVijm+NGKf\r\nbVtK9/uuT1klMPcN0merwBf6KhUjJynrJc//t0KpkNU10rrNODl9XF/oHM/7\r\nZ1L+4oKo9T0v9OZy+8o3FUu3DXy6AUPliCSB4G0YKy/B/tscDMd22Elq96G2\r\nlxJAuGXuctDFUk1nI3nFu3lo2rtd34rvqpetxd7mxmfI71sggXFJxSUwD1dc\r\nR+sWCIjSo/AdUlNShS1M4CYp5/yph1HNMHw=\r\n=0c2K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXTRhJ1vklvnhTqRhsjs1BnUzRPJbolunY7Vl/aJT1BAIgU5qvaDyZ0z/zhUlIIZIllxZ1lQ/bpQlP8BuGsFQTQNw="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-47d0aa90c7bd811e203236ae9c28987edb39b260.0_1646937976317_0.14449323615381604"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.20":{"name":"@unifyux/web-components","version":"0.0.20","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.17","@unifyux/icons":"^2.0.19","@unifyux/theme":"^2.0.19","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"f103796e22ea53b7e658964db553503d9501a846","_id":"@unifyux/web-components@0.0.20","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-M/1AqEyvdFBvlPeOJMPlTVys67vuFYQCUA0aaywCYNfuCm6Ly+mf/6F5+a+VvsiTA1FrInHMx7W4zNjyPe4eXg==","shasum":"6109d9b94e72ddf5e4dae36c4d77dbf92ce8f294","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.20.tgz","fileCount":318,"unpackedSize":8540381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKkpyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4Mw//caw9ycyj9wYx2+uEVoPayRHc8RZ14eYE9Cfa9l/H1T5HAKvx\r\n4cNJvM8u9Y+GmKWvIm69gkkwAc+TOgvTqfQ71wcRpCv1BorGXvxoA9FlhcH/\r\nabj9yGBT37V+R1v+36QqQ+WbEWVyGJrPJZwAFGE4tRD9l7aCcsDCFbT1GIBU\r\n9cg2coBatDLfKSDuq1agIw/4V1EYFNkdCPp3i82S8vKosmexW1EzLwAIURJx\r\n8vFLV8XJ7oQdOyZjdC87dS+aQWelOdh07YvAlAqQzfC41tKUPI+kiPbk9bCz\r\nN3O0rckZZXDXhtBjcRWaRI5H1y5t8q12PTGzYoBMOSFAHNUG+BPHcJ0ZQoUZ\r\nIgHN1FQkblschgwpFtrB0HUobl9XHeSqbag0RVLxiN0bC5zkwm8rkNTdPHl4\r\nbFUFh1UE7QCBI5TH5fKafmB+XddkCHiHLiBTVKTSN5QdfFUiMWdss3eRaxje\r\nkj+4f/JbdrwtVeLGhivFsjm4GTmWDG7eAXKAshd8p8G1g8PpQayFdqlnuj3P\r\n+XmCqBmxlG24wA/eYRR4yBAeraM3L21nLTJ4LjlLbvESz9ZdYsyEjiMBdSDp\r\nMLnFRWHwniu/ZTHl9a1PcexG3aPvEgt020mNI/zoLklbzO0bchEMCsEy/iSp\r\nKR6E4eUBedsx3WV7fp5A2avocPS83zWLXHM=\r\n=/t7n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBVfxWfLTzl1QTO8W4YYL3NlKJ8hk2QrV2YWCcPHRFT9AiAhenBBodbHFtwK6w4cSl8oiQvPcZR1Ohjlj65GOLdQEA=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.20_1646938737708_0.8800464896617144"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-c95439da693e6cf405eeb7452514af4992370f8b.0":{"name":"@unifyux/web-components","version":"0.0.21-c95439da693e6cf405eeb7452514af4992370f8b.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-c95439da693e6cf405eeb7452514af4992370f8b.0+c95439d","@unifyux/icons":"^2.0.20-c95439da693e6cf405eeb7452514af4992370f8b.0+c95439d","@unifyux/theme":"^2.0.20-c95439da693e6cf405eeb7452514af4992370f8b.0+c95439d","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"c95439da693e6cf405eeb7452514af4992370f8b","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-c95439da693e6cf405eeb7452514af4992370f8b.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-EHPqxB8Lv97G2R5yD2cXw8LaHERym9nswScGIEMQYoY2u5e+wzf4gZRem6rW5wu+GAd5e35SEcnLlS8SZxYlEA==","shasum":"1c6d2ec8ddaad74e3ba2dfd4bb3885e401e7d853","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-c95439da693e6cf405eeb7452514af4992370f8b.0.tgz","fileCount":318,"unpackedSize":8535606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKk0XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoigg/9HxpALKJgToenerzBgPwFgytFghfWW88N/Aq+7DJlLAYb5wnU\r\nI2Ke0yIpf+hD5tMDv6fgCTGicYZS59TmH7Tn2IvfYIHqUAV6bkO7fIZo9DLZ\r\nzkOE5MbhOtvWILTR9YE3pIxsbo8wS5PyLXc6BaEea+HePcTHtebPC76Yz3FP\r\nXhxFl31vf2Goi6wrfYa6fFwBNXmq8cHm7u+J915U8bbFmIrVtREwYfbEXvYA\r\nX4UplntKKA/fazOK5vG5y9D1Ehm2h76G8vh5gfwuFiElQYCIwtuaM7XHcn8o\r\nGKUJ1B3Kt+zh41pH/SP+zhz3dPYph1QAsByWHBxaHtFhHjxEWD+/whGNl+dq\r\nC0gUAvK50m0se6JHdVJ50Op3TvwGwZ1shelgEvDuibyUNvIsF9kbDDLMYUWC\r\nizfNG09QZStSEicQy4pOyReMplRF6PYeu+OCQgZSPF5YaoS2OtaeTbyH15NU\r\na8uc1XxcxTMjxEyGwCiqAC1/kqq84dTmJUq3H8v+W3ddQnycVd8H2PGHSSkE\r\nZ8EzFlvZxk95f9D9GVkELFt5eYs3EVG9xB7TbsQk9Ac7VmWoqqi5waKysnu1\r\nudCkg6xcgpOXjE0EHJPDB4vnO03P8C19MYgk2Hfj4jAJu9QZ0QHTjqddWZ7a\r\n4vGouaCEvS1kR2nJ2RxGwSbyZrPdteKjtBs=\r\n=4eHT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDDJ0JK58RaTiSRpJi6XO0KWnpGIm40zD3Bk5hRHsK24AiEAhvPb4EsjWN165JolChPkSGAXGmehrtHbLKm7uDqZ8tI="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-c95439da693e6cf405eeb7452514af4992370f8b.0_1646939415031_0.5179819606285652"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-d4cef5110ef8c91e31b4804da7df59a41a948799.0":{"name":"@unifyux/web-components","version":"0.0.21-d4cef5110ef8c91e31b4804da7df59a41a948799.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-d4cef5110ef8c91e31b4804da7df59a41a948799.0+d4cef51","@unifyux/icons":"^2.0.20-d4cef5110ef8c91e31b4804da7df59a41a948799.0+d4cef51","@unifyux/theme":"^2.0.20-d4cef5110ef8c91e31b4804da7df59a41a948799.0+d4cef51","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"d4cef5110ef8c91e31b4804da7df59a41a948799","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-d4cef5110ef8c91e31b4804da7df59a41a948799.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-jpdkzr6q9ByTmdzwpqu7NC3XeUXbodT5Nbx3NbIq5PhkZo0xqCiSa+8u85CadZqjYAFQQFCmMAghdrkeCoSSJg==","shasum":"a894f3480f58fb27ac08c5e4bec22450024b0b4f","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-d4cef5110ef8c91e31b4804da7df59a41a948799.0.tgz","fileCount":325,"unpackedSize":8613232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOzyAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAhw/+OjwAJo5hfrMtqAqOMn6WGJ4TqhuMC/tQXlAJJItNkq8/N/N0\r\nJq8wCXnQWc7DeTVTRWezYtnWUCQXuUw9jAIpDpxCuFz5UAwCM6eUR/8sTnTx\r\n6Js6t9vgUQ5alyENMXchzd1gY01eMD9E7P9Cn/FjfNzG7gS9z09hwz04zCjx\r\n930qCx+WzWkwLwgvZcLBl9kLxAPqpfDjq1LnEXuWPB9XPy6h5UqYa2Pp+Lz/\r\nPdailU10Bmi6XTJqKXpHlelT0kAYl4g6mzEJZHp/jyZvphggi0hCmd70g+iT\r\nIQpGIcq1mDaqoDA0Xy0Ez5rpn8Yf7RXVP/LszAipuxXLLjxYfy7giM40s10H\r\nWw/w5De4rn7s7NNdbdytgZyhlPqxl2TYBS9Jt30k98QMO4gXYjeKuj8cDhbK\r\nSEPIKnLMqGB4AC7Kc730WDOCtjvkuojuvjxojUjhjjfKMeoLexG2eDJH3oam\r\n+rVcQMQszlWYr6A+i8xMm0DoNyGVqH1tqL0osj9jEmnvFGfYL9S+HA1C1HPM\r\n4JWcirixjU8LqAwXUrULbXdoThnA8v7s9LO83u6+bkSpiqbTkv5LUsgdCJLc\r\nlspXbNA3nqySWhgXsKIFY9Bcwc4s9YKpYrbK1SkdhVmu6TBdVocqe386qUvs\r\n7sdz+8+XtPy95Hc+ebnN64MtjcUNIDyfKDs=\r\n=W9DP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAcmPmFBEQLOHdJnXaNOKkDPMwpbRUioCClOZXPSnYdMAiEAlzpvD1yvYxboCtY1kC6nIcfETopdDePEupLEppvcgFY="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-d4cef5110ef8c91e31b4804da7df59a41a948799.0_1648049280210_0.037507204016565376"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-a39e448ca4fd961d27f6fe615e2779f1f38ea683.0":{"name":"@unifyux/web-components","version":"0.0.21-a39e448ca4fd961d27f6fe615e2779f1f38ea683.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-a39e448ca4fd961d27f6fe615e2779f1f38ea683.0+a39e448","@unifyux/icons":"^2.0.20-a39e448ca4fd961d27f6fe615e2779f1f38ea683.0+a39e448","@unifyux/theme":"^2.0.20-a39e448ca4fd961d27f6fe615e2779f1f38ea683.0+a39e448","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"a39e448ca4fd961d27f6fe615e2779f1f38ea683","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-a39e448ca4fd961d27f6fe615e2779f1f38ea683.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-eK6N4b271EIWdrSw0iLALJnDS6yEy5Kof/BjIhoepXntvt9OdAmE1n21pPoDBpxx5ntvRC2Nrk80AncrpkxZtw==","shasum":"9b6d73fc6c0aafb0714149571da3141144ecfab2","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-a39e448ca4fd961d27f6fe615e2779f1f38ea683.0.tgz","fileCount":325,"unpackedSize":8613232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiO068ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr2xAAmwd50TPyHG9wpeHibCs7awMFqXCcZyYD4BR6Z0xSAOMPJP1K\r\nDwFMes3QAO5ZV7l7COoUoVJF4YIyz3wmRSX3EGmcUNsU71PBdleyVfFRhLJA\r\nGenMdT67sxckSXup+tvnI0nujgkm+Z5yVq1RdqaSgKj+vUtYzwLBSFoAdcqX\r\nHVb0rHRvtb5VQ1FbRlKM0HKNykrS2KXzoAVwvlzKPhBLzOCYkBNWRNxj5Ixp\r\nQHsl82ztOFzNKZvaVlIUOcvNAukNL1OVSDOenTHjEU33gx3nNMnBd6r77QJI\r\noqcyNyk+IoqSvX7E4mJRdc1ZTL3wAPCI5ZpKaZf5lDt69O2e56WqXr6mj0Ms\r\nzjnRTvYKEe+JviV2pFHMbwYyGlvweW18jPMLnLPGHUDJeMkTcHjIXm5p3XdI\r\n7exnlqOZ5XdT8PoDStUbbiPKsRsVfcjES1zHRhF9wbbEEClZe0K7EhNZnebj\r\nDqemjcaDDZ9u/ym16gnq1mxgm61oa6E6gqIw7Ol4dUtc/lE/O2oTkXOi2y59\r\nha5jNSZhgrTy1AofdAN70aFy4CFILUno5D/ALwEL0qz6ViNuFbYV0bTfjfe9\r\nMJ2A665uUpfM1UaitbmwGrtgQUipW9+1i6VdlY/YRc5uZUa7DlmCKZbYSiUw\r\nhWGMQHtqjxfp+2nu7JrtbtR2gU5vX7BXln8=\r\n=Geo8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFHKFWamxSHMfDxbZzZE9q3blheebCE1kySCCZ7Onb6KAiEAnWKMHbqAGyco7nF3I/vmLOGA+VrkznVBZxpV0CNQKe8="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-a39e448ca4fd961d27f6fe615e2779f1f38ea683.0_1648053947644_0.5241201530223125"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-24da9cdd2b9911595def43661aa7316ee339d53f.0":{"name":"@unifyux/web-components","version":"0.0.21-24da9cdd2b9911595def43661aa7316ee339d53f.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-24da9cdd2b9911595def43661aa7316ee339d53f.0+24da9cd","@unifyux/icons":"^2.0.20-24da9cdd2b9911595def43661aa7316ee339d53f.0+24da9cd","@unifyux/theme":"^2.0.20-24da9cdd2b9911595def43661aa7316ee339d53f.0+24da9cd","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"24da9cdd2b9911595def43661aa7316ee339d53f","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-24da9cdd2b9911595def43661aa7316ee339d53f.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-zedltUter1PBiSwiV4oxel9iA8V3CBe1pp0BJ1Rat1j6Zyno9fbceAyb+DWjxGzMC1/8qQe8fdHEDFObNR8T8Q==","shasum":"ff9601585f9312edc14dcd78896415337db3443a","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-24da9cdd2b9911595def43661aa7316ee339d53f.0.tgz","fileCount":325,"unpackedSize":8613232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiO1GAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoonA//ViYLqbbL2crTN3tvKUo4Og5QvD/fONjYsnTk8rUJmqrDGMA7\r\nOEjSSPLwdvX/OP7K3PzTtPzEumM8yRJj0a1QfrA0KRKxQ5yF7XcPqtqMLHOf\r\nk5bQ21R6NeJqof1D5FhtlMmyG51Cwm5LgopXjJ/8ugQe09QWpaN1o8JTFErn\r\nfTnwO+mHVs38Kv51T3IF7CVcoxMuzWhhWrjnWckq9SS09Cgahp7k9IuJCzCR\r\nI9FN0E2UUrnPBK40m/XO+seKn/gmkNfc6WqR4tNMOMhvpvwZ6OGndrInHXLi\r\nMrFPvaA2EHpoDgc2m+3MOClcih4DM0fbu81MNMx8BbdsjK+xF7Pdb21tVs0U\r\neGWA1fjLwCCs35nz5GnqicQZtc+M2+gH5FkPhkR89ysrCviDYGJtREg2ajFO\r\nQGb1yR6doF7M9vJe9SbHJDSZY6Gxh6BRSc9/kjUlq+yKI90mPwh6HsuWGLwv\r\nRMLXxnIk0TuibjJNlu9cAKH6/vO43b5jsK8l1OEsE88VTtlgBqa1abAicrqK\r\n13rAL5wWHNCW1Uy9eQcjNYUk/UtqpBSLEx15dryxK6hqzqb6//Sx6NON0s/q\r\nRMReeYFH7+hsfFnVji6qDDeMhpFVw19CU9UHqtUsErgkHSV0i2LAocQT5SyN\r\n2zqghE6WfF/B+rLjA3cRD7/b6aJN8IqafXI=\r\n=a3n6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDciy7SaFCD0Yf5aRfjowxFhFP25cMPyjjbwqaQZ1x/NAiB4r3WnvnT3BVrlABTEO0rL9T07Vd7jfvQrbFW1n/VNzQ=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-24da9cdd2b9911595def43661aa7316ee339d53f.0_1648054655572_0.7172276753939517"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-a85e9f32ee7ee63f09cb05dc40f220d652dbba3d.0":{"name":"@unifyux/web-components","version":"0.0.21-a85e9f32ee7ee63f09cb05dc40f220d652dbba3d.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-a85e9f32ee7ee63f09cb05dc40f220d652dbba3d.0+a85e9f3","@unifyux/icons":"^2.0.20-a85e9f32ee7ee63f09cb05dc40f220d652dbba3d.0+a85e9f3","@unifyux/theme":"^2.0.20-a85e9f32ee7ee63f09cb05dc40f220d652dbba3d.0+a85e9f3","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"a85e9f32ee7ee63f09cb05dc40f220d652dbba3d","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-a85e9f32ee7ee63f09cb05dc40f220d652dbba3d.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-0NbL8rKJm3VD9kzFB9go5fK9HpceiVfwtLz6aFfmT5wl5TWYIhNjj6pxIGAMJQbLtFPMX/U2TQuoY5Ywwaagrg==","shasum":"77c4b94da0f28b5f4cc5db4d56b27bec79f397f9","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-a85e9f32ee7ee63f09cb05dc40f220d652dbba3d.0.tgz","fileCount":341,"unpackedSize":8676693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiO3rDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJDQ//eEa+9cevhtdIgcmQTTC11Pdb/e+dAXrQXDWX6cBepOTBt7OR\r\n6O5fmSwd6GyPKKG9cJBx9i9ASWqy1aphAqMJ+IR9Lz9DKQdQismhjjlBmdzk\r\nCi/r0VIa+lUPNjHE9qSMo99HlgNZlIqIEZQV1k/VsRWRc+bKt2KKE/6uqyBI\r\n0qsZNMK+C598fdjfN3PU7MSq8nxTsZGgTIsnK11vxZCymEizEP1EB3C18txL\r\neJAEjX0Ni+hKX71o+F3LbP/jjb77HmKHMpNNjGjPZrMbbpAyv5su1LU4CzoV\r\ng9usTBoFdqe6mKUXJgFOHO3BjSqpahZ+ffSD8lkmkgw3DzUljJTVoSbcpnXq\r\nFNlO8w0pxQHIeh8GfeswwN7hBjmF/DDq+2PwhIS0IRb5yM+Iag5+tz8uIiay\r\nqf7Heh1YrKL7HdRvdIHFEqQAlekTXTwVEyfqe84JDaA5E1xhUWc4uJV9KC78\r\n23rS+3KdRBodYpWn9+Za/SyHDkIVwgriYrMtOm3QWhGsus/obPd37ucp3eq6\r\n9kyYqq0uLmjNthMCVbdpDpwtg2OvwVqYVaTujKjlw1gt6odT/2/izfWvzA2K\r\nOQAFXfU2DnwD79mijO/RhnxKxdXOgRFsFCGO6zlAy9Qg1EXknb00KP7MCjc4\r\nVEHpayuQQCCxRPTvx0ClfdoqngTP8UWJaSE=\r\n=rYIP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOLQw1e5jTuskne8lLUDLhKHrvKpoTVtEChGfzKGs5yAIhAI84vcV+FtsBp57Y9dy8DaHIWJlfhDicCVAnYfWlIZOk"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-a85e9f32ee7ee63f09cb05dc40f220d652dbba3d.0_1648065219473_0.5596737478167577"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-5159b18d27767316fbaf1307000c8a7f9f9530a3.0":{"name":"@unifyux/web-components","version":"0.0.21-5159b18d27767316fbaf1307000c8a7f9f9530a3.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-5159b18d27767316fbaf1307000c8a7f9f9530a3.0+5159b18","@unifyux/icons":"^2.0.20-5159b18d27767316fbaf1307000c8a7f9f9530a3.0+5159b18","@unifyux/theme":"^2.0.20-5159b18d27767316fbaf1307000c8a7f9f9530a3.0+5159b18","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"5159b18d27767316fbaf1307000c8a7f9f9530a3","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-5159b18d27767316fbaf1307000c8a7f9f9530a3.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-8R8K9qA1QjmGYWGR7Hcjn9dZ6tkglfSmBe4f/FBwHLk0cTyRNDrsVoa0tErk8kLemkYCoLX+pl28TEwWgqn0TQ==","shasum":"a3ae0e17de40896531136abb14e01a55616e1bdb","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-5159b18d27767316fbaf1307000c8a7f9f9530a3.0.tgz","fileCount":341,"unpackedSize":8676693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiO31sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNfw/+KkrKh0eiLO/x9mup9CqrKIQO+9T5CejZDPVQ7KuIEpV+mkeS\r\nHPnDNH8JOmYD7rkrfix9c+KK+/OdhnV/ZcFEoWClq8l1q5j5RsQ7hxAYzAE/\r\ncNDY4v7Kp0WJWvnvu/A21xl6Bv+3NRgk1FEyRi8rsa+nyviPPl7YdpyfDlln\r\nzA+rgEQvYcGL8U8MpMJIUBRjMBeSsav04881uZVyGDz6RJye9S9Elx4LAaIi\r\nGDcd4Ytandy/trtUvxrhqeUzQqb0LphBTE7LgH1hReTisVy+TVprU4FGJm/n\r\ntfqiKCQGZuk5hNzv3FlfMIgGobN9HBgA6EZudXcpohLmbzImTFlMd6goaZx/\r\nLrTzCTHRy6I38WY8IVyqb15EAV8NwF+vxvWdP1TgvmzMBHfOMTd3lf7itIlp\r\nYyzU2+CqVX+ZBuwpM+W4xOduB2fIZMy6jeQa9/wMBphPI7cIpjeZ0HosaNLr\r\ntASyRatI36Odhh0cpToeE4bgtqBRViZQxfrbDsPZLhFprBkqpfwFzlM7Ncpm\r\nkWWguxmWm7ejLE5mbfrsI6SYQGYEqnmxref/X3s+0K/kPe/YeX5jDUWwsVX9\r\nBDyGOTKhjHhdtnXV5ERSZGDY3WXEq+7OgTZkomdLDOBGL2AG2VO9q3tTAS59\r\napJqZmgitjaiDyhEoNkjWTSdi/t5jVYIgRg=\r\n=QzXs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC/5xIFz94RI5oQxGR4vdIOB3LSxxHn+erRHfp9XwmZsAiEAgECoKAVQ1eSA3MnJHb6NwpFtywedn7RmEcEWEssSi+0="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-5159b18d27767316fbaf1307000c8a7f9f9530a3.0_1648065900409_0.24963195007477568"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-31014b090c023bf3ac6d082a2f36e5f345153547.0":{"name":"@unifyux/web-components","version":"0.0.21-31014b090c023bf3ac6d082a2f36e5f345153547.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-31014b090c023bf3ac6d082a2f36e5f345153547.0+31014b0","@unifyux/icons":"^2.0.20-31014b090c023bf3ac6d082a2f36e5f345153547.0+31014b0","@unifyux/theme":"^2.0.20-31014b090c023bf3ac6d082a2f36e5f345153547.0+31014b0","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"31014b090c023bf3ac6d082a2f36e5f345153547","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-31014b090c023bf3ac6d082a2f36e5f345153547.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-HbAz2QoqJ5vj53vxQ4D+0ytkYD90aWrKS9HtRjsPiLo+lBrYVcjqT1pszfUZOW7J5Ax12X3jFqednJBHgcJlRw==","shasum":"e292ffe0ff49241cd5e9d21a7ebe1fa204f7cb51","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-31014b090c023bf3ac6d082a2f36e5f345153547.0.tgz","fileCount":318,"unpackedSize":8539452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiO4q8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpjqw//cyhA825CppjI/qjR1ox+5b+FhqtlLKmmUp5FxYMKZMgfrYL1\r\nBqSErGKeAb/lxnBDL7APXZv06pL/oP0AWoyd9xFXeIlVsjQjSUHULrPF7pwi\r\nv2lbHfc3n0CJLeNn9Fvi+7sPcDCYi6IFW54U4sJe/OA6bJGrn8pdrHGc9ruM\r\nI2i7fxvaBPoWhEBbc+wGKeJXrWNrLX68HI/CP94ivxZub+Gb6Kubr402DYc6\r\nPkZJkqx1JhMTyzkdBAy/vNHmrybhsc6mrRErO8UuV95LsP8YBYlSzZHYJSox\r\nMR/jIhzeFKl4qbmp2XfSeGiEOqnck5waw883kqel209JwsdUUYXdardyJxbY\r\nJrU4DufxQTtHpN5efXVjhUmwQuNUNsnQ9tHGv9sNBN9ILm9djgmJndj+CqVi\r\n+x78pwPmaaZB9OIYIl5m/GQ39BHvTrkbQnUM/q0eEkD6H199CLvWNic3MJ1O\r\n1R0k0g5AsrJ3SXQwYJkW1oxbJ+sliU9iOqgM/JUDtws3DxSk3ej0guMQYxGT\r\nYfkMoGSxA/41iyeVsMwSTHQnBjgcu/EwZTQWOa6PvYZtSuEyUgFwG8XLoIYz\r\nPEhjKRxJ2cdWt9r8yOzESMO1kUUyYo4GUzgH7KISe0Rt51GkXxFz9cpyYlwP\r\nOJqaXcqSb0mBM7Ur9UH50wktICrABa6fDxE=\r\n=KNen\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyTWB9TuTKr4ylCQr3jHkJNav1xsPKXVamyg1Phi8wEQIhAPBlDnGFfcC9Eah+qNit+hIVNBWXvUfj0a/ReN9w+k8/"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-31014b090c023bf3ac6d082a2f36e5f345153547.0_1648069307757_0.11915821366464896"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-c52c97d3e40f3e88f425c7dcafab1aa418bc582d.0":{"name":"@unifyux/web-components","version":"0.0.21-c52c97d3e40f3e88f425c7dcafab1aa418bc582d.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-c52c97d3e40f3e88f425c7dcafab1aa418bc582d.0+c52c97d","@unifyux/icons":"^2.0.20-c52c97d3e40f3e88f425c7dcafab1aa418bc582d.0+c52c97d","@unifyux/theme":"^2.0.20-c52c97d3e40f3e88f425c7dcafab1aa418bc582d.0+c52c97d","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"c52c97d3e40f3e88f425c7dcafab1aa418bc582d","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-c52c97d3e40f3e88f425c7dcafab1aa418bc582d.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-QmD2jPf+DnVLMrwxlyFH+I262PHyBCDRGlQ/RSQPZ2ielIN+oODEMkoTTDKwEDgP6Ws7o4/U1A4L64J6l5DHTQ==","shasum":"4da1a485cfd574eb58d24cca6c24865b948a7ad7","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-c52c97d3e40f3e88f425c7dcafab1aa418bc582d.0.tgz","fileCount":341,"unpackedSize":8680532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiO4x+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYkg/+MNUXrEc7Xm4UUq3qF0ohTc399fk3h9anthuoiAyYmmiFujdj\r\nJ3/TPJX42jKkGZqtMRIHIlY/819Q7HBw1ZcYEv1BIZYpVQCfMuN5A/GmxI59\r\n4Ky7XFN1L5FpmPY/HFirVgb0Cgt1J2Y7tYCjd64uR500zpeUczbAbI2XC5np\r\nW1qab8Fy+tYRctkHfZde3jz7EUWjCOlKbPO7Bw/mh/8MZnl6vo7VZD5Fld7D\r\nT7EAqkVSnhLZTwcj5nZLmA//FFyhYWnavbGRVipnyvrtgYK+NeWEPv/q/WL+\r\nGnuu1lJ3qGxsfZhXgv2emmahLeJ6Ahgwewi6jmhoGzbCUDP+xajBxAPPhpbI\r\ndMFJtclW2OTCx9Tl+1npO1mEX4mcfuaVunW7M3DVV5ikMffl0JD9oI4ZVp9I\r\nQgAqhOXn2jrvkn9msfDdru73ODg6VawCzd7ZuntbOGXqMPxCDZ6LBmTNEaX0\r\nghj5csV2pTIiXq6C8qhLzXJVlYqtFAYoi4u7pF2EvMCMnWmRoxNKbczahThu\r\nnj77rTrAEcXl20Qe0Knt1kNP5pllczo7YJddhb5pEmot9OsV4QIWnYUN1iXa\r\nArik6aTIWCsep16NskDgR7XSpAkiii5JDu+B6RmTXqNVxSQOqb2UOfNinM+K\r\nzjjhBTZhi9ngDYiHNmCx0UKq9pEqMe9BdXc=\r\n=/E8y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYULMRVyr6H+s6LJurS4TO9gqCFEa5oa/QF+QcpHIz+AiBBmFHQwvwimGM/pLMBhEb+iZO+ue5KC11160N86lw1Xw=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-c52c97d3e40f3e88f425c7dcafab1aa418bc582d.0_1648069757900_0.8275386343176883"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-6b6becde8933df22cecbbbbfafcb58095cd970ac.0":{"name":"@unifyux/web-components","version":"0.0.21-6b6becde8933df22cecbbbbfafcb58095cd970ac.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-6b6becde8933df22cecbbbbfafcb58095cd970ac.0+6b6becd","@unifyux/icons":"^2.0.20-6b6becde8933df22cecbbbbfafcb58095cd970ac.0+6b6becd","@unifyux/theme":"^2.0.20-6b6becde8933df22cecbbbbfafcb58095cd970ac.0+6b6becd","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"6b6becde8933df22cecbbbbfafcb58095cd970ac","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-6b6becde8933df22cecbbbbfafcb58095cd970ac.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-5zGeiZcgmR3S5FB0Fl+tmWb8/cfu6aDDoiMelwhHPc8JJxFFZy5+qU3elceYOeL6vgt9I7oIeTaeMOnsV3bGmw==","shasum":"1a94034d56e5e92a96c232351d47461f935c4011","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-6b6becde8933df22cecbbbbfafcb58095cd970ac.0.tgz","fileCount":341,"unpackedSize":8680532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiO6viACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNjg/7BiXBrySSzK1b/9aw8+SnCcP+h3rpkT4Z6cJQR19WvZkrkmyN\r\nMtekltBTMKZLccnsebGsbPHIG84wMgMYMW0qK5lG6t7+9gNDL4aXCaAqDyiy\r\nEBDP0aFGrtZt8x3foxjgBsbwRAltHypYLGS0iQ+F2tolXJfxhZ9ff3tsS6NH\r\nO0kZc8M3u7bBfW1fgDzUEjcwiWjBAMlLnvYDPyjrPvN9x26ukGFT/UV2VNpz\r\nJe+/J/TNYjuieUCBzYtdU1wrTN7Wu1msw25VO6cDjpZj8zinghxACt4sfr3I\r\nJvE3T6dVVDL6anz5vtLuaau7KoOrGZV5wOHxt4sZUVF4nJqxKlKfev+8Suf2\r\nB2qd1GWz+Ge+ukB3dUGoSDOJnNlOa+nqEZyKMcqhXi6P/1wdj7PotNQ5NWWh\r\ncQm+Tt0Hz4QBuf6ZMoo7pHBaJRNT9I405Fgf0aVwTSoLjEOwLBXz3nwcB/jD\r\nE897wIEwKeoGaVrb4zeaglExdUxiW5etDX4u5TTGql2Dcid9Z8+URcOAXw1/\r\n0xlYNpQjMNfKzLPK3N7LxJlS1V9KoIFKwqhCHw5Z8GX10q1DtO2oi+05dHfU\r\nWoIRTvydtqILPE/dAdBF97A+b2XpNz7dCave/TiLBeTMYN0ShQ+aSL54YMRO\r\nto2C+MCnu0f+I72wxNqRuuNp8ZNLoAcUKMw=\r\n=KMYm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6opji85X3agjSwEJx5w7Chzp1l2Cj1eM0uBWPQiT4xAIgLbSYJxWGfPT2PyH1PxIe+uYYJa2XmbHF3VW1iOAtS+Y="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-6b6becde8933df22cecbbbbfafcb58095cd970ac.0_1648077794460_0.8893571878034776"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-bdc839f746ce5da21d2c231f25bcbb0fbbd12fc9.0":{"name":"@unifyux/web-components","version":"0.0.21-bdc839f746ce5da21d2c231f25bcbb0fbbd12fc9.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-bdc839f746ce5da21d2c231f25bcbb0fbbd12fc9.0+bdc839f","@unifyux/icons":"^2.0.20-bdc839f746ce5da21d2c231f25bcbb0fbbd12fc9.0+bdc839f","@unifyux/theme":"^2.0.20-bdc839f746ce5da21d2c231f25bcbb0fbbd12fc9.0+bdc839f","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"bdc839f746ce5da21d2c231f25bcbb0fbbd12fc9","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-bdc839f746ce5da21d2c231f25bcbb0fbbd12fc9.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-FnDhtOiXKfRXx2ig4f9XSEKP64xj1uCaP7+Y6+XIVShh1dNMGBE4zRa/K8mKgYTweuXsui+djMyyZgXaBVapNQ==","shasum":"0df0ddc928f0fb8b92720fec71a6575ee268e30a","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-bdc839f746ce5da21d2c231f25bcbb0fbbd12fc9.0.tgz","fileCount":341,"unpackedSize":8695157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPJa8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpG/A//TsmimJyyURPOJRN7vED62EQWNjoCVbGdPbRKiNYwvND75ZKk\r\ndPYIMEjQRUBBYepGWi+BAlBXtSknxwqVSFZaD9gWxBfWRo8uqacOrxcfb308\r\nFMl7urtA38WCga5s8luKQ2Gwiw61CCxjXnKlFMmnLJB+7XqP8/1ZX04/IwZH\r\nY6ms6Z5+gP28IYeQ5ZwE6SdDHaAiQo2sJhVEbF3soP5NMtG9xwdbtcnD1NhH\r\n4MTibAaJtoNuzvLKHgMYM8IzdiAXRhgqRpLRBRWt7N0Pyl+7OBBswl/Ic/v6\r\nSsLjuuYCLaHU8yhfWejgOdNoicgLW16uQqzndIzoMKCcizeKvqQTqGaSTdH1\r\nwzVRuJE1BlLCPhBqgnxKF+OpbIN8lKtlCMBn2md4T9a5qaP0TvNz2sNT7Oev\r\n7FRO610MhhPo32hJ/GL3bSGoxhwi3VZ02cz2wIzG/WeA1TLQ38K8QECjpH00\r\ny2zsWC7GSnYOVSGwIh34pyTCRnZ74fTQ/Ex3bnVUjPflxM5Ie7pD2TN/TmRx\r\nhKZdFqQSBDAAB1lDI4puYUHVs+YPdckIPWLh6sS8Ai22jxVtfIHJoxlPyI1o\r\nkCNvhUunME9d/6Xc+TsFtFhjnapR/uV06xjQycLQKy/UgiGVTIVWBQEVMMp7\r\nQTbCX/9E/EJRzuVcBb4FITQ1pHFzGI4Veug=\r\n=4L8/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvyLOWRhOJa+0yImvNET+oj33KB5oSRWGoMJUK7AluagIgeMyyudlzfJGPScruMwDwAQFfvZa8RCdarejCvNZe3BU="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-bdc839f746ce5da21d2c231f25bcbb0fbbd12fc9.0_1648137915775_0.09347191546742262"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-2a64c786d9edeea1624c6e4fb5550ad21558c4b7.0":{"name":"@unifyux/web-components","version":"0.0.21-2a64c786d9edeea1624c6e4fb5550ad21558c4b7.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-2a64c786d9edeea1624c6e4fb5550ad21558c4b7.0+2a64c78","@unifyux/icons":"^2.0.20-2a64c786d9edeea1624c6e4fb5550ad21558c4b7.0+2a64c78","@unifyux/theme":"^2.0.20-2a64c786d9edeea1624c6e4fb5550ad21558c4b7.0+2a64c78","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"2a64c786d9edeea1624c6e4fb5550ad21558c4b7","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-2a64c786d9edeea1624c6e4fb5550ad21558c4b7.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-EGDeh8r5ZBS0jAaM2qo87/4GL+n5qgahpEpNDe+wfSOHOERMYP1km+2UCZGThwbPtUfHmAlmzM9AFNLnJUJqog==","shasum":"351409e3ccec0cee3affcc17e69a7a903dfb1ff0","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-2a64c786d9edeea1624c6e4fb5550ad21558c4b7.0.tgz","fileCount":341,"unpackedSize":8695157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPJs7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsRw/7BM8lz8MEaAwO03fAeIv5OSJ/BaG0AAHD90i4PkR+fPC/gDlb\r\nN1OYigeeKlYVXizMWjKvaUKFB7q/xMckWpA2lDI0tAvQo/4JNoioSEFgRD1q\r\n8bOHdh9TbinK7p4Sw3DKREGlYGa0TWmqyDSm9kCzi5N6sqX7/eW+c2x4fTr5\r\nVMosduQtRBc80xelip4sBS/688H/tPKIIuT5N0qB564LT8zHiYRvfF8Fyuh2\r\nd0Dy3GfAAGbZ2zJDNn2gEUUn32unt3tX7K6+xHTzvF22HcUn3tyGjButrgrM\r\nRIATkQpkG2SZRN8qFjcI8CKZzfQJLTdyVTwhvptQQSXj75I3aRh1xdhl4Rj6\r\nycV0qbhgdHS+ts0CVU7QZCoV3t62SV5DLMbkat1IZKRhSpYq6xWIDYNHOTP1\r\ndGBTuR9PIcHVPO87L39X7wsNaScDYu4qjjN0rop4a2zmibayJzyhMtrExkSt\r\nZis8hlh82hu/cDaGvQt2Pf/nH2qxDXdDOZ/pkQFuVmqL1O/TVHS7c3I/W3oq\r\nO2OOhMDp/GXUzWmwW5+bA+o9SRB7dRj0g85ZFdEJ3JKE6rXN6RKfGIN1H2AJ\r\nSHA8OHF6CIOs0XE7z1AnOimCdeaWdyOvRQOklIuacU/DZ+5u3kdaoRFTGesM\r\nF6uvqWmdm80a+nGVo7uhvrGzzD+VPIOQ/dc=\r\n=rG+e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3nr+0U9e21yY6t5kafskQZt5ByR89K80Z+fktMyTkygIgVpptWK/PNYiqwS5ryMGggZdx67agWGZnG1fkIr5OYZs="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-2a64c786d9edeea1624c6e4fb5550ad21558c4b7.0_1648139067299_0.2589019536502146"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-8e9dba39cb8c58786cbe0f6e6debceda4ecf2a1f.0":{"name":"@unifyux/web-components","version":"0.0.21-8e9dba39cb8c58786cbe0f6e6debceda4ecf2a1f.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-8e9dba39cb8c58786cbe0f6e6debceda4ecf2a1f.0+8e9dba3","@unifyux/icons":"^2.0.20-8e9dba39cb8c58786cbe0f6e6debceda4ecf2a1f.0+8e9dba3","@unifyux/theme":"^2.0.20-8e9dba39cb8c58786cbe0f6e6debceda4ecf2a1f.0+8e9dba3","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"8e9dba39cb8c58786cbe0f6e6debceda4ecf2a1f","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-8e9dba39cb8c58786cbe0f6e6debceda4ecf2a1f.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-tDlqaWz43UES0SYtt0kIXl6khJZHw7t8u7kT0bA14R8/TT3xbuDq1w4vx99qU/Dfd+OJvDhUD0FJYZgx2efCVQ==","shasum":"bfb6fe7a82c70d72f8ecabbe628b52d2d478199b","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-8e9dba39cb8c58786cbe0f6e6debceda4ecf2a1f.0.tgz","fileCount":341,"unpackedSize":8695157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPLA4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtfhAAkkxP+YwDiJMeWy1si8O3ZKUrYTXo46Z/qkQoOwG6TM6KLcOl\r\nAgvETTBSy8fVB2MbHLAydl+XAGFUNoY00KCF9TDTwRTV0nAg7iGUZfKvvHaR\r\n3obwDfpdmxX+U+PQcSwKlvldzVIn3f5DPO5LWtYiYAUwlgMRfCCW6DFNabSe\r\n3gLAQmY9lCfs9CiqvoODsQtxAEbK1CGOYadaDFC8OFR7fskUY1GZtcILTD1W\r\n/VlvL8r6EMfm+dfKABcszQ91Pe+vaYWpH0VHY5B3byk2QvQqVCLCicEAHvYx\r\nWRtTmPwDMG7EqLHLMH7vajp2D7lyKONZ1Kc4dgMotHMPzMtZaiYCAjuqfVYe\r\nsgQXQg353mBCC/LjogVLEg3IaKJ3CuTr676/c/7/tNPn8R/a4Mkh2zF6PM2O\r\nf0vUlcnsZB1GigIzOBK51d3qQx7bhmWCOFIo94nxvKQyrm8ptb388OfaAyIl\r\n8miTIYzvS/hF9R+g9gRhaqxJ3uiFSKLjckqvM++02DeZLK5FQ+vp7b7K1j4o\r\nTNpriwY6LUVa3IDtQOOuqyzVZLPNDQSyR/45iG8s2Zf2DmymhU9fiUMWSpPp\r\nZ1Z3SH/LGUJmapBvZyOQuKcQ3cvkJfT9muSIO33JG7nNsLDuZCyzDV4Y4t/c\r\n3jQAHwYK/U2FnEDw7sMHxQMCKLHkY3GI6L8=\r\n=0DCZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRZNBftUxvk4JOcSdiWcrNy7ysMrXFQfze07EnCKyG8gIhAOKCA/ckWxekuJgpSE+ZkYxnNSS3ARrzhzigFQS3yzdA"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-8e9dba39cb8c58786cbe0f6e6debceda4ecf2a1f.0_1648144440000_0.41130426395281705"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-a2042d1079b3c3871c8dabdbdd134140792e7e23.0":{"name":"@unifyux/web-components","version":"0.0.21-a2042d1079b3c3871c8dabdbdd134140792e7e23.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-a2042d1079b3c3871c8dabdbdd134140792e7e23.0+a2042d1","@unifyux/icons":"^2.0.20-a2042d1079b3c3871c8dabdbdd134140792e7e23.0+a2042d1","@unifyux/theme":"^2.0.20-a2042d1079b3c3871c8dabdbdd134140792e7e23.0+a2042d1","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"a2042d1079b3c3871c8dabdbdd134140792e7e23","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-a2042d1079b3c3871c8dabdbdd134140792e7e23.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-uNRhHHT5rED1uiqXWBH7yrkD2lTvq4vfye5IYAC75CVb56aF2DXB5mpBrvApDs0HTDjoIs/RCsx5bWlejsM4rg==","shasum":"170f150ded7a6a0a27d9da24dc5cecd4ce45bf16","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-a2042d1079b3c3871c8dabdbdd134140792e7e23.0.tgz","fileCount":341,"unpackedSize":8698657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQboSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcnRAAlfNewx/yPZB8a0F31gyB+MGYtgRHrImw6h6GT6skAmdWXD85\r\nsSnXHDq37vkN5BgjtYTWFeCFKE+dvBx5YNBjE3vMHqFqkaqfHDlmF2jzW8l/\r\nDVy8JvfSAiVPiyd2rMvp2FoAPlmmQTTlCQlw3kdnEOApu8Z3seYF9C5yI2nJ\r\nkGXrmS/EQ4WJLWgzha3DiOOAvFg9W54SVm5vsq167CjWZl39xjwnqqvGUbkB\r\naJgAC+GbHsTZehrbjtL/hwuLkYfcZY70klm7U2htzXRNmCsTAYxxklPPo/Lz\r\n8O8mUl2Z50SXFXpOdAxhLp3u0Yc09oglQQO3nIuDREClHXAwv7tDRWK+L8qS\r\nKV9MUiEeRfUnbukQzyWvJ/ALxDaagCIYsDyGnErQrW5aV9Pt81G++Y6PDtBL\r\ngMYEVcII5qSra39ulxDDQY0GfmmCyoPB59ZeSJrJFhdCWIm8E5nrvXV2O5WW\r\nfJ3qa10W+bGJUYaLuMjlSyR06x6pLE9D2tiG4s5EEORFBNVES78a7/5Bm+Ro\r\nmar+U4jS9yG3NniRKJ8wUfmABi9/u6uaul4RG6emj60gufca/5+SV7Et85PZ\r\nivmcwrNKvxmvgN/9d0I6finlsqy1ktuUa3PiLg0rlpdouaYV7VwhR5iqZ6Gk\r\nlBQ/tOxs2sbPEvBKxd3Lh4vgZ3tEAEaIaps=\r\n=M4eO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGJG7hxjz57c2+U8U2vFEEoNqX4QuJPuwHQH18JihkpxAiBSJULjlP5zesYh0Cx0xfXbDbAGtitiReDXU4rida3OEA=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-a2042d1079b3c3871c8dabdbdd134140792e7e23.0_1648474641753_0.5843411594861803"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-366b5555b4aefb6b69e4e3de2d5e415d78a4dfde.0":{"name":"@unifyux/web-components","version":"0.0.21-366b5555b4aefb6b69e4e3de2d5e415d78a4dfde.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-366b5555b4aefb6b69e4e3de2d5e415d78a4dfde.0+366b555","@unifyux/icons":"^2.0.20-366b5555b4aefb6b69e4e3de2d5e415d78a4dfde.0+366b555","@unifyux/theme":"^2.0.20-366b5555b4aefb6b69e4e3de2d5e415d78a4dfde.0+366b555","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"366b5555b4aefb6b69e4e3de2d5e415d78a4dfde","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-366b5555b4aefb6b69e4e3de2d5e415d78a4dfde.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-RyqgqBd5urx3fgYg2Ncmf0p5IkYS1BWX8WWXSD2s6GoJgF1Wbvp17971V/v/LxuJlKab0CfkPhEXtT4DIfd7sg==","shasum":"e5645858597ddcf76b3bcd4453dd5b605dc7c8cf","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-366b5555b4aefb6b69e4e3de2d5e415d78a4dfde.0.tgz","fileCount":341,"unpackedSize":8699358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQg4OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsDg/9HsXf1xM/GKPDfM8PaXz5yeeJXeszpqH8flYAiS+t9Mq9lsej\r\ncSdw6i9p2cWCmZa9orwQRYZqWviRWcnvnSzyPuJf6rbIEEk8vL7cuXeK4WbL\r\nVBKFiDzHhkiF9fwVyqd+SWfyl4JYHC3O6lMTbM+0W7GO7C4gAi3ARUD7OyfT\r\nfxhu5iaO1PgBkedqnNi2MaQHeninQ5E7zv1TZ2F2CavfjPB3iJUuhtI7Prl4\r\nLKVRDJuUIDCtLqxekGVcZTX/FKndXEanTToNhMr3L2+CGw2uwjyI+nfxk5US\r\nqndR55gCX5fF0J73Nxf1IFCDuW0OTyBuT8GeCkfKOWrqOYLzMQZtllObLC32\r\nuMA3PyJO7KZMymQjroLPCwy2YvsXGXER3Bwfh4MMmit8j3a66gNwYdcQ4d9s\r\nnKZ/e8pMg1/Ef9DXq9aOtLs+4PdIhy4YCVPvRcgoVdbYcmJVUF7xwUcGeu2a\r\nAOzmUDo7sxqo3pew+jvDA85ThutHWD6YjauX4zipcPMw+LWt6RYZ4F0Imk/S\r\nGPxQCkkzDSALV3gRkRLLnkS8ch8Ir7FCfWYNbjT7fdZvCTnjdnhdN4dYwBqB\r\nRlc/mrKQeEz2zspZq8BFfhdgeh90B05WUvWWW7GIJEwQ2AQuq9IBUCyw+59g\r\n4FTMHhQV3r+uaUK1spyJ5/Aw7i8kcuGdXkg=\r\n=oABn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICV9+lWlg+hMlw3vgDEWNIz5C/hIM9V4mFfhC01SFAqcAiEAgMV6Z2iy4lKddI6oWrxDEXxtds8Gu4x7BPARLzbZEAU="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-366b5555b4aefb6b69e4e3de2d5e415d78a4dfde.0_1648496142299_0.1675625286820508"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-9beb9d97708a132ce044da642824504fa8a06390.0":{"name":"@unifyux/web-components","version":"0.0.21-9beb9d97708a132ce044da642824504fa8a06390.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-9beb9d97708a132ce044da642824504fa8a06390.0+9beb9d9","@unifyux/icons":"^2.0.20-9beb9d97708a132ce044da642824504fa8a06390.0+9beb9d9","@unifyux/theme":"^2.0.20-9beb9d97708a132ce044da642824504fa8a06390.0+9beb9d9","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"9beb9d97708a132ce044da642824504fa8a06390","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-9beb9d97708a132ce044da642824504fa8a06390.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-ZkFq3E4bgAjC41zanG1i9hyYK4ShCnFYEIhvikgWNJake6zaYgeBBxMvfHK/Lj11EJsnC047XDiwNpFh2kUN/g==","shasum":"e5d0c1d4ba9627bf0c65b02c3a850567b3e3bbd5","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-9beb9d97708a132ce044da642824504fa8a06390.0.tgz","fileCount":341,"unpackedSize":8698277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQiPPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoH9BAAjLaz900MVCIVZ5ToKziJsul8O9IFaPixqSBGQDEn81hFwEBh\r\nUWrfp2s2bjMNI94TDYdOQWZJzD3iYlAsAY1VXgYmB8E887glGoGWpLZ9kttW\r\nTLIH3IfyxKwVYWLqMNzbNQ4hv6mOX5ab5TQupA2HM83uN4k97mIVzUGWN3Cc\r\nqCewAi0yWm1+wf+UPaWvUK+ghMmyvJwANs+Mb6Tkf4ywtVHGgjZhupddsqV9\r\ntxZnur9fhvphPMrv4aa0E2ZWQCOolF4MpRHePEF5Bren+myPOO+DXy5A1DD7\r\nhknJKd4m3040uD8apRBA8sOJqklq4qF9UAtIL2B1pC6zvQFJSNsePQiV1XTm\r\n+FEMMPfV8dd6TcKX2LaiEGoEdXaSe2NVXmgI0AaOIVc0+9p33DOgQoz+DhzJ\r\noWDI0Y+UCVsD0yMrdVSirgrw934YENjvFYubWDv/GrC3PoTHEvMe73V6yQlC\r\nM7AdUJH4CU34Ry4XtSmr49WoUBrTuZePs31dL52biyXCl56BIMjjBHfaR30Y\r\n/UAqy2Ep1yZsMZz8cnhDWiHB+1155E6/RfOnZJFKsQegX0KE3KJ61CXCKns9\r\nX71Jw4s2SCp1KbX+Tp7RdOEfL3tpH+xiDtjJsJ0YE/SKLwKyKAz3JaerIK8O\r\noQgarI7AODgH/2NIvXRuCvSCeBVrClP8X+8=\r\n=5k2v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoW6hoIDp7vThQ5OTfU5xM/9J8Q0wIbHPLe6+uxleK5gIhALQxh3ksbAuu1GIPXLmQBPNtbxuofKrvPokNNZTRONOK"}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-9beb9d97708a132ce044da642824504fa8a06390.0_1648501711100_0.5867011747430517"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-95f117cddd07c8d3669f66cc92da192628ba04da.0":{"name":"@unifyux/web-components","version":"0.0.21-95f117cddd07c8d3669f66cc92da192628ba04da.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-95f117cddd07c8d3669f66cc92da192628ba04da.0+95f117c","@unifyux/icons":"^2.0.20-95f117cddd07c8d3669f66cc92da192628ba04da.0+95f117c","@unifyux/theme":"^2.0.20-95f117cddd07c8d3669f66cc92da192628ba04da.0+95f117c","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"95f117cddd07c8d3669f66cc92da192628ba04da","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-95f117cddd07c8d3669f66cc92da192628ba04da.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-nkMl9SLcJeeR0Zb8+w1y0xpMnLvelcleCcx90Jj/OQ6ze7Khgk/kfJ2CTl11PdypJdG1ZOIljJpYI1sWX4fjjg==","shasum":"dc8db6a3c4ae68402abf354d4a8350da95f1f72a","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-95f117cddd07c8d3669f66cc92da192628ba04da.0.tgz","fileCount":341,"unpackedSize":8698277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQxiBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRwA/+KtPFvKdUpxf4vrGh8+p6aL/R6fzmzWn1hX3KwF6sIzBdaP+W\r\n/rctadkxdmzvdl399DyN0Sj1bwH87ABjMDJO7o000GB1tQlpV6+UsAWzHTwC\r\nqP35kLRCW1MaYuO42lI9O6T0zcy4x54A1witP+XU+Wm8RBxed4EiJCda9ioY\r\nnXks8TvlohBq6mF/og85p3Bb3DOHzVPADF3CVMV4zv/Lt3FohMAm4zfQGF3j\r\n98p7xLa5jBTAs9DQp2qUz7t64X7YBUAHdicDbJYE+DJqZC2RHTuJsGDMdFwK\r\n9UJYGz2muMEGyCX6VRX8/MUFz+kmKq3oBmuu5QeXSY5WeVJhaeKIrdUtCCYK\r\npuQUL/Xzs7TkjICuBx1vPjkcfQ4DOJ7XRaz20pMPrpWcJUxrPr2PWLfC6sB4\r\n2MWrfxCJdRD1kvRUxYEOGHMhwLjKmcickXcKB6GvokYY58z9gpnet9mwgELI\r\nBTfM90g9v0YeWIOTnHbf2NY7J+eLeKlmRqEcNwO8m702ZxPX/ARAdP+Ztrxu\r\nEzTqiPR9ghelQNnQH/7ZYLzpinYiQxTHk7JZjiNMi3B4UEaulqRaJMoQvijC\r\nL3g+Yx/xDb3j5S2c8E5RezF1+s8yMgO4Dn7TJq8PbIYGMEWzGpF6EjUgV0G9\r\nrMy0cgFfpKeRsQDJwEipGhXk2xmMbHgDssA=\r\n=/GMN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE1aWVOwfXres1wJuAyXeeyLVI2CKFAgXOIuEli7OS2LAiBGpaSkCnKQvHloycLrjO7eLxpjWvlX1SlNhOlqTk8wkw=="}]},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-95f117cddd07c8d3669f66cc92da192628ba04da.0_1648564353661_0.5294030242976022"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-6baf34d418f38cd1ab527e784fc17eefbad11344.0":{"name":"@unifyux/web-components","version":"0.0.21-6baf34d418f38cd1ab527e784fc17eefbad11344.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-6baf34d418f38cd1ab527e784fc17eefbad11344.0+6baf34d","@unifyux/icons":"^2.0.20-6baf34d418f38cd1ab527e784fc17eefbad11344.0+6baf34d","@unifyux/theme":"^2.0.20-6baf34d418f38cd1ab527e784fc17eefbad11344.0+6baf34d","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"6baf34d418f38cd1ab527e784fc17eefbad11344","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-6baf34d418f38cd1ab527e784fc17eefbad11344.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-G4ll8kY2d19335lHosfIL04IISWVSIIMWz1kmoxicQYKcFWKzl6kPG8lNR1v0BcuIZt0QwoZQJsTi4fnnzT7Lg==","shasum":"d0a9ea9f9c0e117d4c661afb9eb7e9ffb9cdfda7","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-6baf34d418f38cd1ab527e784fc17eefbad11344.0.tgz","fileCount":342,"unpackedSize":8819301,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUjr+N1YkNTiSB7xD2jrH4596cMEhbINlGWwJOd5w7CQIgXFMRtBs4NI6p/fQ7wzron4al14J+PFV7b6dKs9/kdpM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiR1NrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7Qw//VCGM2x5V9nwmGig51ZvFfN67hIgLGhlKoOHWxYBnRcSM/9ui\r\nSyX8wiWR4mW7w7lDcQSd+zj094i5YtYIvaIMiRlkdcXVItdKQXCYmqdRwDAO\r\nVTINf0afpbCHsUGv8X5uUmajvA4G4HgEvvkK0Kr5o9u6jeZrI5AWYle4reE6\r\nn4LGzVuyy7GJxul6SzknZ/HSx6jKohGgutnEbqVU1w4LPdi+SJ5gQTG97MQH\r\n215F889SN7WD/lguJBQNx4MBllak3S6KJevwlD9bdT63gi+s/UEryXqR+nXz\r\nw9iY71+XNyIubQtPFL8bCWMzr+vx04Y4xd30eTTOhDaOA+U7NQNJ5zwId+R5\r\nXohP4u8FfvYh6AT3xIUSjhwavYUIwNQpFQABJ7Tl0XiOZTun8h7XTDWszTLK\r\nNBvpw7FqMT5S90XkMEAtwbDG34U0c6eNYFqS3fSPcXHGc61mSfe+BQJTi+3H\r\nYZUgTvvxM4sEwXH60qeo6bpgyPJCcdWh2L5ZkVJAdhtYriGFq6z98uQdmV6f\r\nPJ1qRBFp6czWBqBeDZVjASicd1bHTt2JcE8hVBIV9Qf5jpTVxEoNBdSWnS49\r\nUDEWTPidKeXPmPTxRrg0aR7iM5+oyfDc0ZX41ATMDN2oAwmMTS5k1BAic0Zu\r\nfNOxBA6kqLaAHdx1NjQBbH+KeHxyMmFZbjk=\r\n=Jy8X\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-6baf34d418f38cd1ab527e784fc17eefbad11344.0_1648841579299_0.2554968355356806"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-72b4e3f4fa868a7d457edf86a8d64d6d7c3f1c7b.0":{"name":"@unifyux/web-components","version":"0.0.21-72b4e3f4fa868a7d457edf86a8d64d6d7c3f1c7b.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-72b4e3f4fa868a7d457edf86a8d64d6d7c3f1c7b.0+72b4e3f","@unifyux/icons":"^2.0.20-72b4e3f4fa868a7d457edf86a8d64d6d7c3f1c7b.0+72b4e3f","@unifyux/theme":"^2.0.20-72b4e3f4fa868a7d457edf86a8d64d6d7c3f1c7b.0+72b4e3f","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"72b4e3f4fa868a7d457edf86a8d64d6d7c3f1c7b","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-72b4e3f4fa868a7d457edf86a8d64d6d7c3f1c7b.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-mY+D3grTvaI+ngBN1ArNQ5I6uQF7CKLXwKFhLk78Fo93R/5SFdmyhCMV9pKxsya4fVuqxO+MO2wzzKw7KY/CaA==","shasum":"ce664a317ec2072007e7e5a7806d111af333f754","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-72b4e3f4fa868a7d457edf86a8d64d6d7c3f1c7b.0.tgz","fileCount":342,"unpackedSize":8819301,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEUbgLtxF2FCyFuBxvOG55lVF7trVOSk7a4o/0719FpIAiBiUn7fqEEXO0lm9JuowV6VEmFTQa/GchOJLOXuXmCJUA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiR1+ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXehAAotEdCPAuBurNnqfcYJ76YhrOJkT35gRsKaJcMiDFq3COscAW\r\nBQiEZGzQkTefywkamagpAx4bQU3xNyUGdXIs2mn4FsU+3hvaB5lr6chzrlr9\r\nT6GvnYCqkRChyE3RLo3ntU3OEXmzkh9L3kwI7m8gZRb9yYR3YHqkpdtLPvO8\r\nd0jleFTsu02SWfXPyQBkkxhQ9cPgoFjidB9W4IMYtmHi03QM6C0VA7irTPvP\r\n8A7soxU1EnDhJ/WKjvgRxhVxzGq3kHKQWo2D2+OQpJ08RIxVcHyLBYRiA30q\r\nIj0juxGRG9v17K5+qKNQ92/xASqzL/xBDbN3zlogV0u2hmq4/VO3S8HX8NIX\r\noGS+zVjS6oBULGkpVg+B8i2oeW84pPSEdfn6EAElzSH1Ga6twZmJ3Fqudtlj\r\nZZYPTgxwPAiscsB5dg9LTiz7MgEwJ8gQ1y/45ylzLrSHniwpZ/4xovU+QfVm\r\np3+PPnHkk9EJaxXW9q/aS6Fgb/eOBTQajWGUgQsWz15ljUI36Lx5LCk72t7b\r\nrC3InlTtqaFqqEihSzrXoj6YlMrtLmG3VIhVY7r7jTrcEgyNGQipaMfSbRJF\r\n+CXr10/6T8RKqeLudMDAKZ3iodStsivqFo9LFIdkta89DsjKQBzpMrL+npt9\r\ngVI6qJjgyiPRxEkn2O/FdrqWq4tysdE2vbA=\r\n=4MCU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-72b4e3f4fa868a7d457edf86a8d64d6d7c3f1c7b.0_1648844697219_0.8750698813711886"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.22-2823cda9a258130250f6c3707b5ea65cde78a37a.0":{"name":"@unifyux/web-components","version":"0.0.22-2823cda9a258130250f6c3707b5ea65cde78a37a.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.19-2823cda9a258130250f6c3707b5ea65cde78a37a.0+2823cda","@unifyux/icons":"^2.0.21-2823cda9a258130250f6c3707b5ea65cde78a37a.0+2823cda","@unifyux/theme":"^2.0.21-2823cda9a258130250f6c3707b5ea65cde78a37a.0+2823cda","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"2823cda9a258130250f6c3707b5ea65cde78a37a","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.22-2823cda9a258130250f6c3707b5ea65cde78a37a.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-j3Eiqvmwmcjd8Xd4SGiXywFuocBZdZ0K8Qxi8i5PFHBjejNhLziQm5JbU3+hPtAzyzLV+Yej+pqXycFeS2Ek9A==","shasum":"437f890dae78391a1daf039592e4299b2a234d6f","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.22-2823cda9a258130250f6c3707b5ea65cde78a37a.0.tgz","fileCount":342,"unpackedSize":8819301,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDHdIS6KYnVYagMoYJgScrV+8kffmvh28r5Iw3VMfnMtAiEA5PjYeOOApRdieaLZQEel0o0GWhTGsCi4NYIAcWV2vJc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiR2CfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkKw/+NHW54eGYfwBrr8bSvfDEj7us7SsCJA2mhtCJDLw9c7lq6jpy\r\n9G/OjTRfbZchofk5AWsgBa68UwPwf8BcAQYFNkL+2eUXQ6NkwetDg+86vUq8\r\nwXWmH0O/NGBmeLRQNlvotw7dNcKq97IVz3b9oz7Fq/lGxYaKhNMPplOB6Qek\r\nDV7/i7+zeT+FltKhbKekjqlMXcd6tLekyQO9axXQ19kHpdVXFdgZbTGkiRlu\r\n8uIKcq2RssFYqLuehwql8dR3PPMZYZ6OTghhL33rQ52lFT0SasZLarcg6SHL\r\nD+AtqjmOInXN+J6MRhyN77kcbOkM2GwW0z0YKcbJZEIea5n2QPqcCAEa8FD/\r\n0mO3F6Y25+wvNQen30aDGM7PECqs1PGQVfyc56KZqFaWvAkJB24ZwdjmRXky\r\nUGE6RSY8Ou57xutTa8yJbus0LzXJwF13IkkAPnldwIiVvPqzH50+Hx/3imy6\r\nJ1XOV5w6a9SJobTE/QhGtN88b38y5RQVkfUtpDcWA7er3SQ8TvIC4yKpj8vO\r\ng43dGTqEzyXUUn3hl5YqQCfhRTHwNlw11sioR7M3i7YlcHugOurIXlLi5HAJ\r\nrXgOcwck5V2rzgs4OsrjZNYNjKxnffMU8cBly2ExmURTwURQRhOYb0wlyeTZ\r\nvrU1ejBHcrbw47jLZe4jdHKEalb7yQl4ZfU=\r\n=xrOr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.22-2823cda9a258130250f6c3707b5ea65cde78a37a.0_1648844958968_0.7002251084548912"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21":{"name":"@unifyux/web-components","version":"0.0.21","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18","@unifyux/icons":"^2.0.20","@unifyux/theme":"^2.0.20","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"c58a04275f72a39eae498103b6bed2fc7acab4ce","_id":"@unifyux/web-components@0.0.21","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-smS4okrmLXXzB9Mkre06Eh8vNf/Zm/Mzh8VSP+bCDsaBCjRMCvRMMpR1cRHMYL5G46Vv3FqWK8OhQFTMwgI9YQ==","shasum":"24d052131c72bacc212d16e87a852af62f14b79a","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21.tgz","fileCount":342,"unpackedSize":8824076,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICi8nBBmC4D2hcfbDlOQ3qFuiW/zYhslzsWEYmkO+YjIAiB3EeczdjSrHULHnEYudACrKe5z5eQVMiQidlYCdckLgg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiR2L2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmox5Q/+PEYDr5X05N912IDiN1gZfShVvoBgOPhyPnhOpiu4ELdwOU0V\r\nl2uuJ2pCCOqRE7RmRYt8Fu+X+REY172h+ojEhIKoekhXGTZy5fYKM8nnbE/U\r\nG3ux6DbDRmeoTUygQsRfijTSXxKyqge7nYb4R/vXeHqzjnP5YMRIKaednLlw\r\n5mfXWuPeZ36Pmv1v5wGRLOwvquHnxkVkRYIR7dkbR5qs976sMpRXFuV4XOUu\r\nMNnoFmPM7D0KpMGOaxuS8wDgEAvSgdZ+Tdm6erDLI2yPRUTNe5V0RE8zTuzK\r\n1U25RK52clDMMTdp2tDkEnZ6cvb6YwBHLfoKt5h1LwiMkgTnfySw/lo0K3xh\r\n/sFnt1G6Gy1FtUO41MWPvtlEEqSM86rIm2YLdygklMcLjHBKRFeh0TiPRKph\r\n+l2VaQJU0phxy0WmVZSwyGj6qU52l74mC5TD2B7Mpy1TmqT2a6WE+iHSIxkD\r\ntOCkLQ5xnZ6X8lYKf9l1s62QlwKSM2RghTvzpoPN/50Wiv99lrYpkDs+vFZa\r\ndGejVGTpb4HNuPHwI27m7wi6BK+VrlDIL5BuVh4w6HHKx1cnM8ETvQ+adKlr\r\nX+Y2/Fdh8TBncPm7+SwXgrcTbl9RcQ4wGc+3fcaHADiccSBt0YVLL1rDOpB6\r\n1IpsFDvgjn5hZEzOMXvrt00zt9kdQ+D5tc0=\r\n=ZYXo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21_1648845558672_0.5836108110248845"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-4378ccfd035608e9a9490d673af09da8f903ffd2.0":{"name":"@unifyux/web-components","version":"0.0.21-4378ccfd035608e9a9490d673af09da8f903ffd2.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-4378ccfd035608e9a9490d673af09da8f903ffd2.0+4378ccf","@unifyux/icons":"^2.0.20-4378ccfd035608e9a9490d673af09da8f903ffd2.0+4378ccf","@unifyux/theme":"^2.0.20-4378ccfd035608e9a9490d673af09da8f903ffd2.0+4378ccf","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"4378ccfd035608e9a9490d673af09da8f903ffd2","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-4378ccfd035608e9a9490d673af09da8f903ffd2.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-tHdCYOoOV4K26axOvc0U7y1ON9PnA/khyLNPtQ6DVKgeKvmnocR/CEfUHx775xKke69fEZ1wUf1lFWA+rvw71A==","shasum":"2b9a2dff0de9fd12fbbeb57d76eb67e6fd41b0f4","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-4378ccfd035608e9a9490d673af09da8f903ffd2.0.tgz","fileCount":342,"unpackedSize":8819215,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLRxJIK6t4wPbQFJqNOa49vY1V6YIgUWMCdIgd/7EQHgIgdWdphLqRKPE7o7WmjPuHfFtnfFIuMWSthXphC7aP9Xk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiS5FzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVng//eWeiPHE7aCeAhcdmu8+wsfQ+3ND/JBN6aFruEJjr782h6ZEX\r\nvdjrSAxYNA7xnlocw62IihLA/tjNK+oC8Etz/A4/DFQiSq+AX+0y6PmsfzhR\r\no07jt57rFS6xVLALHFm1a6bFOQ/Ya6lonTPHBk5mS9Gn/mVCvvX/e+yawhpt\r\n8qyB75clFG7WVfbYEyii9mdwu17XAbmBhIXg60kWPDQBIV3w8sNXVSWLiieh\r\nI909mlOIMXOqXEpqBSZHFMftm+H7RsU7IoRlfC4TE6KZGr3u0n+D5/ov98yT\r\nlEGLBB4niq78g6tc7RDkOAMozYd4fYzmCuxIG50EjgJWFBbZZfRGLbg6FL4b\r\n1H/zH0RQ96/S3WMG7FFAALWJWPc7NAZ4KSJm42dHTHfd9HSNRrbla5S+jWrq\r\nul4/nx4+rOtoeTGD0NxNBBAyerfl+jERbyyoRtTH7v1nS+dBH/r5r60D0Hif\r\nzkdjAy8c/0aM5yNvcbw3VAXp4gahIgpCqksHULkraOzQs1eKXpnTEq+0z8KC\r\nJPKLgTmQhFKqSO4/RzxYbwkKqVJ0Xc8Y28uZ4l0nP0VBsirx0DpZ3fGxi9JT\r\nbVlQK4bxlOejISH9bTzc1cqlnHl9YQ/T1iXfzvfhU4GJ1Q0Us1rtOdt0qOuH\r\nMQOY36OnIvYXwj+8235E0s1NDJsPYpxSwBk=\r\n=6fUf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-4378ccfd035608e9a9490d673af09da8f903ffd2.0_1649119602925_0.577409463770449"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-b8e07b8511b3dfead26e54dc9784f140def3038b.0":{"name":"@unifyux/web-components","version":"0.0.21-b8e07b8511b3dfead26e54dc9784f140def3038b.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-b8e07b8511b3dfead26e54dc9784f140def3038b.0+b8e07b8","@unifyux/icons":"^2.0.20-b8e07b8511b3dfead26e54dc9784f140def3038b.0+b8e07b8","@unifyux/theme":"^2.0.20-b8e07b8511b3dfead26e54dc9784f140def3038b.0+b8e07b8","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"b8e07b8511b3dfead26e54dc9784f140def3038b","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-b8e07b8511b3dfead26e54dc9784f140def3038b.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-jkxLzEQGdAypA2Yx2WjwBQuKMvu5ynhc3knNXjpiDBCXbogOKoJhtl+N0CvRBmJgURJvYYJF0a5Q9XXFxGxCjQ==","shasum":"1431072f558b8a73e5c00d6e600faaafe814028c","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-b8e07b8511b3dfead26e54dc9784f140def3038b.0.tgz","fileCount":342,"unpackedSize":8819966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFjkcRaKlX3zO90TfYPQZSqX7m4crcAD2xRt1LONoBPwAiAOAV0gCKFeW0uIyUng1bJ5XqnsO6u+X/8SQpYMZ5zieA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiS5G4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGbA//RZRSuBFfS3h/zoydOFhuApp2CciZyLL/SoCZVlO89hXxecly\r\nitA9cV8dP+Ng5nRgyoEim+a/kjtIIXdi0R+FlWwy0izI5HYH3Znuro5wt7im\r\nIqBGT9wfrHgMc1zWViKL4Dz4Fz+25/BrsmaLznkQ4tS5ctyh88/rlZKOL71G\r\nMfhjbO92JzPd8k9253h+zuPVFB26lihU1DPdqhftfZI8cBtbXJExCVWX8pnH\r\nXK3ECF2lfvMx8aqCugSRcvEyoWUWUHjhGGLOTb+S17VtEoRJx41cLRh8okyB\r\nhVUBhOt542uo16BDoV1qm2k33fYi9CTQYbp/McP5yQKzbBudls5m8gairyc2\r\n2HN6TUr3+5XbxN5EWggEXwROQChujvI2iRQQ24QPA7ETM3vyJrPmm/yAnrn1\r\nMb2yS3n7lo8SDi/jJUaBq8vv2Imwmpfjb6Q0lu/IET+wgCsi/CTz1ugCk4VU\r\nzLQYGEwzNEP1CYxi7u61XCssmHcfYzXj9+ZctQhyWbx9Nr8NW1y8wqihLZsT\r\nsu06UAIhWIRXu9qDnDz6ziA9cXHeukJSLf6hIUJ49GFxp8KsxiPYqk/HMRJj\r\n3Wd+5nEtkU0+rSdq/3rDyVcyZM6R4XqJnQWlWhlSiub0ZStMRJzYhcvhfBj2\r\nftjzE4VPis6YazZj7BbOVAJ7QcthOfyf9nk=\r\n=Ms9a\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-b8e07b8511b3dfead26e54dc9784f140def3038b.0_1649119672140_0.13830660812419682"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.21-330dd22b576e0ae40bec069ae5c08bf3f430d449.0":{"name":"@unifyux/web-components","version":"0.0.21-330dd22b576e0ae40bec069ae5c08bf3f430d449.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.18-330dd22b576e0ae40bec069ae5c08bf3f430d449.0+330dd22","@unifyux/icons":"^2.0.20-330dd22b576e0ae40bec069ae5c08bf3f430d449.0+330dd22","@unifyux/theme":"^2.0.20-330dd22b576e0ae40bec069ae5c08bf3f430d449.0+330dd22","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"330dd22b576e0ae40bec069ae5c08bf3f430d449","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.21-330dd22b576e0ae40bec069ae5c08bf3f430d449.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-L9blezOSUtAGenSGKvm2UOy94YjPWK/lu/19hhlyqt4j+ItjFUXs3oLv1PW8GECuMMs5UXlHTTSNYZTzipAzWA==","shasum":"711614e4f19d9cd96444da47b46a255ff53e03d5","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.21-330dd22b576e0ae40bec069ae5c08bf3f430d449.0.tgz","fileCount":342,"unpackedSize":8819966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpqQpj8Lm7p1O7DjeJ7s7uivz+dxYURXU/OEV83ZufagIgbzOMjfomV4QQoajSiOm/HHPn9GftUaj0KVQj1zyESOw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiS5SGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX2w/+ITPwQxJd5MCtc+/JH8kUsfzu50Q62ONHKUc3S/b4+JaTayNm\r\njUJJBRYjL7vEn3jjWsQxbLgc19Tp6xoT+1cn8txe6YEg9bVCFEofYwS/v0LJ\r\nOp+2kNhWbu0CLlZ1/BnJ9dr/dm66UiCFrATaZv67HMr9l+g0X0MXTTeahTFz\r\nj83Qv8CY0Behpo0WjyrN3H0BEe6MVmIZNJtM53xucdrDyszi58cvyBHBcAkf\r\ny0qJ9v5r1Y4Nhg8fpTgGdb5IDQcWL2KtjlrxYDDdjE79U8C0nGOWd0WdKrIK\r\nn7BLJwpU2Mv0nM905BkBVpIj/66JP+0wON5jyGP0NXqlzszdMDtsDGcNPT2J\r\nMsr7Kp2aInt2h18dOAdxcMPAUAcYGIj+jwZbG/GAyhfIU0ro+IqtU9tpcBOj\r\nufP7nlO/7dTWyzF94sIwrzoDcxAXtC9BnnxYLE1YyOIs4SEhm4Vlfr9tYbag\r\nqCJcYbVQxdkrjqOLKLzxqTy6rdTvPYygQ56KJMdTkWUQy4bhr861tjxP1Qtd\r\n/Mqo6U1wOIckaAVSVk3Gh+LI+JjL9EiM67XstSPdUnegDiy7IsijNlVLfzLU\r\nIyr97duBuL3iZ1tKsWS72rW7LoFTqyA6r8dT5tG1sIokeNyT7i53jhbyXG/v\r\nsFpZO6BaMzSJkV5gmQBt1FzZHBnyT5Fsfi4=\r\n=Ug00\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.21-330dd22b576e0ae40bec069ae5c08bf3f430d449.0_1649120390676_0.3049670863188503"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.23-09ed455c142d00b7e8f3073bf39ad34a5a062707.0":{"name":"@unifyux/web-components","version":"0.0.23-09ed455c142d00b7e8f3073bf39ad34a5a062707.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.20-09ed455c142d00b7e8f3073bf39ad34a5a062707.0+09ed455","@unifyux/icons":"^2.0.22-09ed455c142d00b7e8f3073bf39ad34a5a062707.0+09ed455","@unifyux/theme":"^2.0.22-09ed455c142d00b7e8f3073bf39ad34a5a062707.0+09ed455","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"09ed455c142d00b7e8f3073bf39ad34a5a062707","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.23-09ed455c142d00b7e8f3073bf39ad34a5a062707.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-gpeJdpizzL6C7ry2G3HVLaFhraIIwgi2vO3yazbFEfSkwZ3r7SkTF5GDspBSzOGXeNIuWOkw7e2XDISsbnYH/w==","shasum":"71d1ef9d9414bec86b0d3c88c1251ab55273e68a","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.23-09ed455c142d00b7e8f3073bf39ad34a5a062707.0.tgz","fileCount":342,"unpackedSize":8819966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG7o613/f0E0j9ojBOJoM90NOZI+JhcqwGkrgqh8ID0fAiBEkO/Y3DxybafJb7PbzpFnwfpWWj5kL5IPi4EYdgK4xQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiS6H/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUsw/+Jam3ONlPTC1TuAfszczkkNFWtKnAiDjrnSksgSL5zBG+7m76\r\nt6acWIRik6/GOSiTCgh+WTYozwj9I7GBuCxsbyGix9X/VCzbD9mGQC9DTASd\r\ncGqOM9bll9dZkLP11r+T7g73ymG4ofxnqzbqqasdOOWXSh8duL3EtpCjMVLz\r\nGQdUqyKRE9ZjHt29leBBfCkE9E8rK+uKBuNtJ13EwXaUF0wXzm6QHJi51c0U\r\npun7z/W/YvgUDCqDCvAFi65TZv9U9ZTQiJItiAGPubcvPoAgkJoobcFqzcsn\r\n1nGb/KDFKgWSvGq9MMDwI5VUD/9m9lm3szEh+fILIGStHK/Z+dH0cIfI1m20\r\nspuHKWOi+3xIP0lZOR7dxtQz2aAnKkss8T3FYmP2OLdFh0xUWPbbRy2u20O7\r\n78bxbGe6vlaaDk2k0ms/9MPSS/kk/TRnMvm8GZTKgYjLnmCGQmlOslll2zlx\r\njVx/6cC7B0iKlgOovYk23UijTtQpzkD7pBMtkO9t/YADbtbCGN8ke/loeawM\r\nG+j7+a3Rnh14S+huaovGnrNoAELk7uAmEbON1zcxVXF8B9bWOpW8CwsA0vmv\r\nJmlRcLK5HCCuznCexoJzL4VrEx5LaHT+LL/ajqjflbcfHo8u1shZ4cZ2+iDq\r\nQUAINejDtrsLqps191ywGikIXh3oYKtY8IA=\r\n=K+Uc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.23-09ed455c142d00b7e8f3073bf39ad34a5a062707.0_1649123839678_0.6200797955537851"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.22-053cab2b91aa330525d09b43b856ada5dc3783d2.0":{"name":"@unifyux/web-components","version":"0.0.22-053cab2b91aa330525d09b43b856ada5dc3783d2.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.19-053cab2b91aa330525d09b43b856ada5dc3783d2.0+053cab2","@unifyux/icons":"^2.0.21-053cab2b91aa330525d09b43b856ada5dc3783d2.0+053cab2","@unifyux/theme":"^2.0.21-053cab2b91aa330525d09b43b856ada5dc3783d2.0+053cab2","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"053cab2b91aa330525d09b43b856ada5dc3783d2","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.22-053cab2b91aa330525d09b43b856ada5dc3783d2.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-MX3zcN4EIJ/VxrD9Brnbng+ytOgaiZptf88yzwmzsl8+ajE0Uz2wWdVcujbgb09kinsoiSMCpsM8UWn4THIAWw==","shasum":"6b303168be6bfba9f3ddd6f4d1262b1a00ef596e","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.22-053cab2b91aa330525d09b43b856ada5dc3783d2.0.tgz","fileCount":342,"unpackedSize":8819966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjMjea21RWNEuP1d/fBT1spXaWZi0EWKcd/31dRjPHbAiEAhbUGh9kvCg3+mAXjrmb5q5zMCey0RF03RPEGV8zKXVE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiS6IHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotOg/+I12puH68d9TdVHid217hyqxlLYRoWN76wZFAhYMefNUrKQTE\r\nzHsSMm144jsaqn5wCcMQ95YPgCUiTZpxDXy+dgXOasMm2uvnKMF9fYPawN+W\r\n4Fcss/2TNN+SB9Oc92eWPccu2KLs6+JI/fEZaBg3HxzKgC8HYvbL6NNM1I0c\r\nlAuw3p9DZ10dZXdsOi7D0vVwOvPH84uqTjecvnD6+/t+cBQMoBGXoUFn6EI+\r\nD8rIxwllKnCNd3PS+cX4EeTkfwSJRTtgnfM+kxkGH7ukQ+zNpppssk0Y93tn\r\nmnJsgkQIqoYpSBDyh0mS7olu2HjtlYI3QUlE4dhO3ejdz3ecUmv2lJcg01+0\r\nSuPlzdNRPL0AdQGF9VC4m0/zAZRFv2eZa5y01D4T+KGxTpsTycOelwaSkGCY\r\nHCmRjrUxJTppcHK3WPIm/MTgERc/rNVz9lXVyMopL+dE+0+1wcpib2TZfuDp\r\nfReasMGOF1MBKbRkXjdetBLvY3enVYRXAQqx9+OH1hmVOH0BJ6XppQkgCe/a\r\nSXP94D4PjfAQzdgKbLRob50RjFii3nU3XxRgecdOACIQ5OnrLcCSd+BzGMbh\r\nbIAcIYdZ4XI02GTkLtOul4nQowczZ7riP6Hwv5vaQZ/yXEfilgkxdNm7SQH8\r\nadbCUWCmKuYEmjFti6zG80mcwZqyQYiOaOQ=\r\n=daN4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.22-053cab2b91aa330525d09b43b856ada5dc3783d2.0_1649123846793_0.6308095196607708"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.22":{"name":"@unifyux/web-components","version":"0.0.22","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.19","@unifyux/icons":"^2.0.21","@unifyux/theme":"^2.0.21","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"cd0c4e934c65540ca05421144417aab0f48e6484","_id":"@unifyux/web-components@0.0.22","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-DRZjQPOD5cDYDONsRHjNfQ8sLaE/XnmTjCEnSL8oh7zls5fo87+wf5wYihORLwh1ml4QV/nBv9/Tc27uN4oJxA==","shasum":"7705a6d3a1c5523c894fc7674ac21313d1382444","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.22.tgz","fileCount":342,"unpackedSize":8824741,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/npsF5VSCxXekFTBO0CUIclD4ZsYq4Hg8zF6EOhYdwAIhAPh2DZE3anmL6X4isko1B87D0EO8fegDm7Od4FO8iiDY"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiS6VCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq81RAAkR4kFsYzmato33iY5eSaF108f/QqU6ZlqvhYwxGWkcUt6G/l\r\n9+kkmaCfrn52iu1N1icGTNQAoKaV/4nnFoFBuiJBjZmzf22cfS93etlF9xW5\r\nnprKi+qnfNkT03b36XQ+LwF0U716dcBI9M+9ysEH15P3n8VOQTUV6vMqhYyl\r\nCp7InNkSQb3gj4VV3iGozWDyLJXDabiMZ0qs/1I9ERqTb/h+s9/QOk5SpP+j\r\nis9hsmE6FOj5xQiqjh7oeThbGwPGyNlpoc6cJWMbzlIF7QVw0JDzpEpT+H4v\r\nXsacWDJP5Wjv/4uMfuXQByYOIXLVqvOqIgNHgVbuf5iPQHL8nvKaD6ooQy0m\r\nPLhpokKNSWLqQynkh+kyeL6DXNGsU//F1a7hcFQFOBUN6pKT8SRHGeeAP2m4\r\n4719vSRcVtG4yWvJIuxROw2wX5ShGlDAVot5oDoyK0r+Uo9VpQ86sLYBj4rA\r\nTh42nrnQzqkUHS5ManxinsIh14HvV9CTkv9XCDcdNEjxamhJcc5ZcTEDnHP/\r\n3h13VfIBiBecwRBZccx/1E0wElcXrw5CZ4Q8/jo/CtoUbwbs2euOfz9iLZNs\r\ndQzjfn1B2idHBwmZbM62tJvrumwhLVWtcvflO6o34FdHFHVSZNX7JImyKW1i\r\n+j9wpyiiu4YNE8xsADTgDF4pcXdERFhMLNI=\r\n=BZw8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.22_1649124673888_0.15608857940830978"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.23-6e813462c2fc4c33a679f906bf9c1220bbfe49c0.0":{"name":"@unifyux/web-components","version":"0.0.23-6e813462c2fc4c33a679f906bf9c1220bbfe49c0.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.20-6e813462c2fc4c33a679f906bf9c1220bbfe49c0.0+6e81346","@unifyux/icons":"^2.0.22-6e813462c2fc4c33a679f906bf9c1220bbfe49c0.0+6e81346","@unifyux/theme":"^2.0.22-6e813462c2fc4c33a679f906bf9c1220bbfe49c0.0+6e81346","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"6e813462c2fc4c33a679f906bf9c1220bbfe49c0","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.23-6e813462c2fc4c33a679f906bf9c1220bbfe49c0.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-1Wy23cNnFMQQk3RPTnYG/CxbXgpOjGowbCd5JvhFqLtoC/Y6V9tGbjdcoT46HcL9R2CE32zQBchiBU5/A8Prpg==","shasum":"961c0e8ff3f8e79a9b6b2c7742ee5f56124eccb5","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.23-6e813462c2fc4c33a679f906bf9c1220bbfe49c0.0.tgz","fileCount":342,"unpackedSize":8819966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEtDT5c80dTwzI6FFFLsceqv+sxe0ljV2lxbkzCHipOzAiEA593sKRXpPCNqcB7iTp4S6UjPWvgK9HHCowP/XLBWQNY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiS6fuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqabg//XAFpb7RNy7THv+tlM/RyzHQA+G+SvfrZdRlAot+6bMjqbZt+\r\nUzClZNFJAWulB3Pw8xN1KSdNUThK13LhV84c9PW4a8p61p0cgkXYivG0rE+Y\r\nUV3cAkL1FTLPWivr3u5mLeURtPXKNbGRifQRmJTT4rGj4QSdNMtJSK+3KD/p\r\nl8LjdQHkgLwLU5hSjgdwuCwOKfFrq5V67fX16S/6N9CDnjv1tYOjaRC/zoH8\r\ntoFTTN8BYi7F42bx/tj2WBhQdaNMHQDDlOs/hCZByrFu6QSWFl7GJsMwTLCX\r\nrd7gDYqbtHtkI5Gs1nBSCfL0SQBpD0IKRD20FLgxAk6XtprXp2piEqakU4Kg\r\nAPALOvmH7dxQmtSEmikKnjH2yj31UPGpd4crVeQtg11wbHTXIQzdzOT1DeYq\r\ncBDhgvWKzkd64OY2Xqxps5onwNaDEhwZTVVdYLI8I0I8VqOke161XRacTMju\r\niMyjOI6P+goNKjae3BTBncwsN8yXlIjco0d9N/s+8TZ+eMwpNs6VgAybTfFT\r\nMcmIqKxNP/SxKW5XA1fX/X1nkyEVxJdbP/8O3KJxoBHtnOQh5Uc/F2qBJpT+\r\nG6iVsn+qIvWjiN08g6CUxKqBlQZ7AOreCUAhXcQ0sa2l4tHo1QohFxBwj9Lf\r\nyFhlcEHqkXKb2zFtzkTZmoSTYIr7rs5a49Y=\r\n=D61B\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.23-6e813462c2fc4c33a679f906bf9c1220bbfe49c0.0_1649125358433_0.7808653944541435"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.23-611081515151bbcae4c7895057020511a2019a5d.0":{"name":"@unifyux/web-components","version":"0.0.23-611081515151bbcae4c7895057020511a2019a5d.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.20-611081515151bbcae4c7895057020511a2019a5d.0+6110815","@unifyux/icons":"^2.0.22-611081515151bbcae4c7895057020511a2019a5d.0+6110815","@unifyux/theme":"^2.0.22-611081515151bbcae4c7895057020511a2019a5d.0+6110815","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"611081515151bbcae4c7895057020511a2019a5d","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.23-611081515151bbcae4c7895057020511a2019a5d.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-GA8fXoKwxOjt5Z2pWOZz+zqWA1FY3MB/QJUrfNic15QmIgIDWFCKG4ZyDZQumZL6lbJOSIQM4mocwnO/00GVbQ==","shasum":"6e70d16eec957f2b0bea3af297b85fcddb996117","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.23-611081515151bbcae4c7895057020511a2019a5d.0.tgz","fileCount":342,"unpackedSize":8820982,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0f77Et2shCy2/Jlv2mCA6TcxaHiItAIMF8vWN8fO7MgIgUHwIdNuSiy4ZyqUKHCDS5O+M+1TyKMjdnvKwo0mINVo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTenkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqarBAAoQ5E7uMbOcYNO0mKqlnm0kWAHrJLaXwVvf60MdanCD3GKjo0\r\nz0oIUFWCioHVZhk3mC4kwfUbOZ71CHCaxi4GHqE2mcpOQB0R9HoDnlMJuyDO\r\nfMZvhadFs6hL1PQeqOIkRbh1f2Or8wneVbbVw0/uCW77YmHcvo7OCPYUwB2D\r\npX9kMnnwZdftgjUUQRdR73VDKD3t/14F8ZGnjmz8KAVjaoaCAQii5Tc6nBhg\r\nQNw0OCQMRo7doQu5tjpTU7nrejhNXW8bJYrIiZN+cXp7cq2vM2trkZQtTjdv\r\nDJQ7M2yFNo2ajBxT1TIpH5irz7htxJoUKzchAOjloCiXzpEZNr+rhBwOfQPl\r\nG2zEhVTGmPGT4AeyHyKHUbXshKZtiIxv24XcGruXHmb28cBSeXVcbo2Z7l+k\r\n5G3COiZeopnKNqVBiLQsDyz9IrN6xpresWI630aS7QGD43JxyFIG3Yk2wT55\r\n9cgZ1vATxIBdSC/87q6CRrGJlGx0cwHa0moSKXASLlnccI9ZSMfrOy+w0ues\r\nlnV2mer+UBbk+0mOKlOWaefemTl3Sn9K/MM66454kxCT+9SOKSPIoJ3XLGhq\r\nJbYHvXtH59KxWZ2Io529y9+1O3b+u5P/Byh/AzyGmLByUUT9xr+x/HsbniDy\r\njpGMMoTevbd9IjjJCUTvlRuSu5KuPCX2Uok=\r\n=UhTm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.23-611081515151bbcae4c7895057020511a2019a5d.0_1649273316016_0.5386018057377393"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.23-33b2050a2096ec7258b7384a41e131992355acdc.0":{"name":"@unifyux/web-components","version":"0.0.23-33b2050a2096ec7258b7384a41e131992355acdc.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.20-33b2050a2096ec7258b7384a41e131992355acdc.0+33b2050","@unifyux/icons":"^2.0.22-33b2050a2096ec7258b7384a41e131992355acdc.0+33b2050","@unifyux/theme":"^2.0.22-33b2050a2096ec7258b7384a41e131992355acdc.0+33b2050","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"33b2050a2096ec7258b7384a41e131992355acdc","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.23-33b2050a2096ec7258b7384a41e131992355acdc.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-/mBPDPsWChkfoyFMur8Uh9bmtkOLdsr1pSKlQHun59O4FcEJprA92loxHmQLSfnepLITEp0/U3UrlR0HRxby/g==","shasum":"d4ddf9057514f48d7350f42df245371b291f62c1","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.23-33b2050a2096ec7258b7384a41e131992355acdc.0.tgz","fileCount":342,"unpackedSize":8821107,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBKSYNyjYpxFnZbeJIlhY9TVmrtsxtSgMR0IP8a559ShAiBnKORA1tn/wbOTP0D6S1eMJr+Fr39r5ZqfGdoILCHRng=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiThkDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF5A/+P6VFT5VzclSRfoZHaAdWf1JO+3o0n2W776pUWh6td1hR2Ny2\r\nBZs0WTTYupyhizQmza/cQXYy1AGnhlVE7Dzp0/Ss9ugU4c5GOtQAlHRnz6pX\r\nSu1tC0xCRateVrKzzzjpJq4BgHo+TQDh6MQoCrW+5Hfyl5lhBHV3In55vkF/\r\n/e7ddSby2Ol8SAE9zjJm7eGBXY8SNrA13fT6qcw1teLb55ETyrrd8AM2V+KX\r\nmz45U77WuvcgODj7GWuItU45dwLyx5xY1yjtSWMQ4Wso/Ij/F0gXp8Sy0MBD\r\nipVzjteLjqj9GmmBzsY509Uhb7NXjpSMa/nmMPL8NPEQ1MJjU5rVFcIGNyOU\r\n8NhFCWlzX5PPNdpTBbYiZGXcFGks7Cpo4KHndA0SwW6JOHy2eSOY6zwiqC2X\r\n9BbU+YzpjdMzfrQA+lgz098zUxU2TIgHs+3ngmldG7IEDlm6U3Pp2bFmw7pJ\r\nPo3hENfn5sabjteBqcK63tQxRyXTBZCzzok3dhtd9yp0x5aG9NhTvv1V5fcs\r\nReX4KrkYZejE1C48B42qT9e//Quadg4QhKVivheH4FE15rBB+y83YXwr3Kj+\r\n1GQV0O5QnPG+nxI+3D0DEHJrPXyW/geWDYtM3UlwTHio4rNSe6MaFGG5qorW\r\nRFcCI6GMUGCrkx+7XTkzHQLiMGYGcSJeXbQ=\r\n=dXYV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.23-33b2050a2096ec7258b7384a41e131992355acdc.0_1649285379081_0.5034822710529834"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.23-714464281088acdf8be30ed4ad54ae42e24687d4.0":{"name":"@unifyux/web-components","version":"0.0.23-714464281088acdf8be30ed4ad54ae42e24687d4.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.20-714464281088acdf8be30ed4ad54ae42e24687d4.0+7144642","@unifyux/icons":"^2.0.22-714464281088acdf8be30ed4ad54ae42e24687d4.0+7144642","@unifyux/theme":"^2.0.22-714464281088acdf8be30ed4ad54ae42e24687d4.0+7144642","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"714464281088acdf8be30ed4ad54ae42e24687d4","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.23-714464281088acdf8be30ed4ad54ae42e24687d4.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-qZdBInxfbL6/XyOEybQv5qxBAmr9yPpeqH/7TX3wi38/Bc6pX7xfCYqiivCtThYIIRNZARlS8mFObtg58x/74g==","shasum":"b5157ba408ebe834aba77e47220ab412ce0c3472","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.23-714464281088acdf8be30ed4ad54ae42e24687d4.0.tgz","fileCount":342,"unpackedSize":8821107,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDStFBaGAXOPqFvZN/KDZ9WZPK6VPzvHG0nRQOj6AmZDwIhAJ89nqr+nxDPRSo0H5Uz5F59EqHrl4F4NOmJ0rNhf2/t"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiThzsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkKQ/+MUAR1VrwrQyroGRT8Rd/c0jFMmdzF5jYyHh6419Hwq7mShEE\r\nOR9C6AMHvgFt3sVTshcM02ltTVR15SwRzklLjqcV9pQUAmRW2bG1TOkqTuuD\r\nwkh6q4DFBgwCnlCwWWkMGv8Ux1QWH5wCWTlgO/ZyvFd03Z9Ttd71njb6PYae\r\nkygi4+SvXnpxWUHIzcOOHomz4ciTFmhxM8ZeziYwHqXyFAdk8NVx9MULQEu/\r\nAdRl3tM9wZcIzSjI9TTz2tDeUywvjQ9Ct6/eIN0iHqk6ZqSOLrTbLj0k9kja\r\nWhp0fcucDt1qYGR5E5UeoktT8sZXAfV8ePmVDqbl52XHoglaWGcTCr4g+PCD\r\nK9CxYB6cQvCGWyJX8ZoehughCyRAPIPXkDNboPDqvdbZ/Axj+KVe7dQna851\r\nrhWVZfQS+GK6zwr8zxrf5eZgF0N/qIy1sJsXA2HRywF5Hnza38aQBbjRLYWb\r\nqyS9krslV4BRmf4iehiYfgQWfWuGa44tdDfuWnhfDO0tkO7581dDqZvt/IeX\r\nit/yuKi2yWx83tkNPcn0Rjd67zV5H4vkKopGyX6xYW/SyXgqGulJgcN1s6Ti\r\nxybdub+ZBYY9y/fxXJuAUoXLClxskJLgT8kcQWU5FY/o+nmWruD4MT6Fb90W\r\nuQu0cbg2k6Rmgnme+n3D4nwvWdVLlrFAFws=\r\n=5hKU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.23-714464281088acdf8be30ed4ad54ae42e24687d4.0_1649286380356_0.39413288114694267"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.23-c653fe620d9fc2655255bfdb05801f00b899e8fe.0":{"name":"@unifyux/web-components","version":"0.0.23-c653fe620d9fc2655255bfdb05801f00b899e8fe.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.20-c653fe620d9fc2655255bfdb05801f00b899e8fe.0+c653fe6","@unifyux/icons":"^2.0.22-c653fe620d9fc2655255bfdb05801f00b899e8fe.0+c653fe6","@unifyux/theme":"^2.0.22-c653fe620d9fc2655255bfdb05801f00b899e8fe.0+c653fe6","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"c653fe620d9fc2655255bfdb05801f00b899e8fe","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.23-c653fe620d9fc2655255bfdb05801f00b899e8fe.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-eAH0V2yOmGm7rKA7svICokcvCDbL021UPMYe1V9chfggI70CfEdICeMZF4Ps057loas5jcAviBt+NYWX2zleIQ==","shasum":"1c3d3ba0581ecc6d92c6a0ba680b099a61ed9f46","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.23-c653fe620d9fc2655255bfdb05801f00b899e8fe.0.tgz","fileCount":342,"unpackedSize":8830532,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFrmokEcsjAOjal4zik+aFqpFUSMWx4gkJ6cKqdF20dwIgV4w6aRt1X/fV9Z4Vy/blxEbewIEzFQCr/Vnw+SSoPGg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTvAMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIKQ//bTzSwMv3vMzEP1xx9ZfpwbkR/IfnpmF5Xm6nE7pIP/d7PiOF\r\ny9qKs6l4rRMgbw3i+lvGeLHjXgTln3oEXY/FkMkF5m7lEvE6P1m6jxcJEzCh\r\nOtm/dpHFWmW2w9Yk783jjJdbPZNQzAG4zHjcnTdoD1t6AJn6W8Nnfc4C9HG7\r\n9Xq393Rh0td1Xe+wER+tVXApbVLZsYjIhSIitr6EhhfvjWQkc4ILAxzS15Hc\r\nxxG/bTqt/Gm03lIMPyx2QSjFPT5Y0cZFWYDCJRnlYnjXv4b4RauKg4hRe+Ze\r\nhcw2j/mAbbHYQmVty92MbTxrIYS+fTtrQepz0+jS4SsZWb5/MAfyUHjPDQuf\r\nEvXmo/xaPf0OHuM1X/dkIHTa4k0d0IzCZCKv/6fqzUZO1uoDqDs22yrCjtuR\r\nel81FpVt6aEs/+p/7bYtE/TR7dzWlsd3RAF2cCs0LwnpX0LH3TwqxgKP5YR4\r\n7SwhXz/aJwM51hqrvBUhIKPV+dUvFFzEHaM8SptQ5aOjxFbIEwr81K311ASa\r\nnMX1+8DWTjdIdjtnHPSCmLwIMyFCEmIji2w6if4JqWupixD8IwGHmA4JG90J\r\nkCHwOrqXc8NfEAMyjru021j4zeXrxEpSmT4ZMeAUWfsjqC+ISzsm/ylGzUjF\r\nA14exUkwyqfK4UoMm5P9A0KqX5PTglmboLE=\r\n=QrRy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.23-c653fe620d9fc2655255bfdb05801f00b899e8fe.0_1649340427977_0.9958858725651578"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.23-73f34e888ffe7a111d648c13c6e7d315342692d9.0":{"name":"@unifyux/web-components","version":"0.0.23-73f34e888ffe7a111d648c13c6e7d315342692d9.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.20-73f34e888ffe7a111d648c13c6e7d315342692d9.0+73f34e8","@unifyux/icons":"^2.0.22-73f34e888ffe7a111d648c13c6e7d315342692d9.0+73f34e8","@unifyux/theme":"^2.0.22-73f34e888ffe7a111d648c13c6e7d315342692d9.0+73f34e8","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"73f34e888ffe7a111d648c13c6e7d315342692d9","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.23-73f34e888ffe7a111d648c13c6e7d315342692d9.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-RyuveFakUORMdEnnqfxuCbflH0+hrdILhuuxEkEwD2Rg+7CfJKFBWCZ+z+CwiPQKHqlEwbePcnHL3BAVoegMYw==","shasum":"c284e986e7ca4d2401f91a08e8f669fed8e68b96","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.23-73f34e888ffe7a111d648c13c6e7d315342692d9.0.tgz","fileCount":342,"unpackedSize":8830532,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOQPztIqZYtdHZsLgAGWqhu5NxUNSzPOy1jbh7lhkNVgIgNhZYxteOztnIwc317FAt14t8AFqBwIgKb56dJqetk+I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTvKLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyqRAAnvcy8CJgmq+fJU7U5wdlfOVl/bJwx7nz1vjRSSEUrgl2ncMm\r\nuLGJixnX0vNiAtRt8E1ldiJB2WQCJyz5Zn/UMEtfkKiGyqlYujSVOvPbtRkJ\r\nt530kn8ZowV/6mn0OQRd1IFc37QjOIRm8+lpQBlWjUqgn5sSUtinTFWGmlrJ\r\n/HcmCQNu4NobN9ZUH203DC83jPsckq/CJFeoKuLoTP8FcvACt6BVRNb6MLl7\r\nZ/7gapg6/Cq7f9ewsIRFetde4bbX+JS7r+FfnQd0Lw5YUbVqWiYBMtRUOxgQ\r\nVCg01bpxHuE6eRkyCcYeEAkgkE5Dei4Q9pXH9eQ0SHBI68gXmQGIUGrgkXDV\r\njByYcu93Oh8t9oF+hk3sKYeykGGXeXvTRWskh5N9lwLVoOoP2QQcCfW9zdJa\r\nzRHAPo4KqLrwmbBooeylHEaQ6J/LTb5H8gDZ9b5WfN1kJXGJCfTuyCuqejil\r\nB3fZmgXHstAKcwjO+ACAOkDW26OkQVz/kUW86ZqP/U82bVyRSP/SUy0Qp0bj\r\n6qRkz9W4iC1YWyH5CXZ/8miWr+MVn6E72i6xsl6gcqXv1HJQsf/EWNdlHJjD\r\nprAd+zANqSIQB8ZpWQdIJBlYBjXEoEHZptq+ERWUhUV0l6GI4v48dJdBVWrb\r\niYsT/aa7/jsIZeiJSsr4KHraH6NRdciEs1Y=\r\n=echV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.23-73f34e888ffe7a111d648c13c6e7d315342692d9.0_1649341066833_0.8070133476216925"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.23-09fefd6a316b9a99ad1121c80adab2639af15809.0":{"name":"@unifyux/web-components","version":"0.0.23-09fefd6a316b9a99ad1121c80adab2639af15809.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.20-09fefd6a316b9a99ad1121c80adab2639af15809.0+09fefd6","@unifyux/icons":"^2.0.22-09fefd6a316b9a99ad1121c80adab2639af15809.0+09fefd6","@unifyux/theme":"^2.0.22-09fefd6a316b9a99ad1121c80adab2639af15809.0+09fefd6","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"09fefd6a316b9a99ad1121c80adab2639af15809","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.23-09fefd6a316b9a99ad1121c80adab2639af15809.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-gMvVkRpjK3k5mqkql1XL/rK5Jss3k3VZqzN833hDD/h+mF7R9EF49IR3ExpRj58NRaujQ/bIvMGc0ZBI+ZChYw==","shasum":"df44829ccc5024aafe1af4b35c525827c2bdc94a","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.23-09fefd6a316b9a99ad1121c80adab2639af15809.0.tgz","fileCount":342,"unpackedSize":8830584,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN0gVKJSlQ2/zvkFHaLntapX9uOrDtIUPFUb7FCCGtsAIhALrg47thi6WPUkbc5ULV/hwYnB16/xSNcqZrReJf43o8"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTvpkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOmw//WY/2n89pUpGQXtDDaX22+FV7tVfvtWkpyKp9g+WAceKeuDww\r\nphOjMtf2/8hO68LpAzceqMKhGJ/QcJEqbetKQVfASciypxMaBDrtY+YVf1EZ\r\nDin5vHaaESl8sySD7Smw1VF+kSbRc8UTX35paYgjQXfeBz4tBH9wP8GV7aKK\r\njGPDRpRm+bpHrP+FbioQyik/BxjwukaqY+Zt1Y0pbRK/biYPn2ijRgIo/97l\r\nQBf6nxEGOEHXCFcWorko2+P6Jn2qctyA8PiPS9+vRsv+LoGjxL010rzskXVg\r\n7FtkDCeLUZO6WsI0siDKt9GIZFVF1pY2fM8GcbYLUo0afxiQVx/rVV/Kc6kA\r\n1p0O2vmWB7iuHNyOoTWIQC4nVWJLNaYPdKFVu2kX5EH13eLEQ+IGpJOBvUN+\r\nj+NO2cAG1TM1htozY6tGRZlmkquAV+3nzsZ6Jd1n6ZiRL/TTkg2U+hypHprN\r\niDJ2fpU/vJJrjLONKlZpzVQiLDt4e3OhoghRHo9tvIPumfXM4/j32PMSaOaE\r\nEjFirJU/cDD0vsAfc39Y0eLGva6WBfErEfqWcDbgTGavnB7DvclpR5d1S1MQ\r\n2DZJpO7u8/nxKPBxp+d+fOOb9fAWpT9hk32hSkSeASWPRQpUZFsiZP5fduQz\r\nhZh+/4oQFiZ9C1yrg2zb6KT1/5xAZiiUWkI=\r\n=8JFc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.23-09fefd6a316b9a99ad1121c80adab2639af15809.0_1649343076111_0.4502713960768101"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.23-1ed434625459a788fb185797067e1c1783e45a24.0":{"name":"@unifyux/web-components","version":"0.0.23-1ed434625459a788fb185797067e1c1783e45a24.0","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.20-1ed434625459a788fb185797067e1c1783e45a24.0+1ed4346","@unifyux/icons":"^2.0.22-1ed434625459a788fb185797067e1c1783e45a24.0+1ed4346","@unifyux/theme":"^2.0.22-1ed434625459a788fb185797067e1c1783e45a24.0+1ed4346","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"1ed434625459a788fb185797067e1c1783e45a24","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md","_id":"@unifyux/web-components@0.0.23-1ed434625459a788fb185797067e1c1783e45a24.0","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-lDxL39puXo6dZZTLlGFE5Q7sYtYnAHtas7bv1u/hsXWwVlVWh4WbMG+i1xIFow0IU0eaKfbd99+5pUAmwc/uGw==","shasum":"b1e95bedb46264c717bdba4fe3a88f0f4a2285c1","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.23-1ed434625459a788fb185797067e1c1783e45a24.0.tgz","fileCount":342,"unpackedSize":8830584,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAJ1W0zARMvhKRcU/LJ/xVkk6L0KWMQF430CmogWZk4xAiAj80kyHgXzyiMJEQfgyM0rvA4M2STgpxsBYnx4BvjdVQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTv0lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRSBAAn1MlgxmHeIF1zrEiz2Dz8FmN+AdHTcdYfuFT9Hf7ZuJevwwQ\r\nRBoLSDFY+NVliTlZEolvL4EzdiyQbwt/ZwF63UT0kYl7F2H85PMaQfTwHY7j\r\nlvH5a1/j/lTkc5t7BuHRqott0/RUyb32CLFXjO6BS/lgCjZ3s2GMecS6iLK3\r\nsRuj/0QHMIsZ3DE5vDLtpUm8JnuwOWu1sVWwomErBRBgEL0TbGodPQobXmRX\r\nDVt0EpIYX3OWDaVyQDAfCIeLWm4V/1G2OXfR+aUNSYkYrOIefXTFgxMJSCBH\r\ndWMjJ+RsvXLLY0MbxPj6b3sigVlOR1zhNf8vcSlqlAqudqADoHeNdEIQ/Dwt\r\nEy1i6iduH/tSCH4vjiQQa7kuAEZtoW/pOFeP78VJtYjdcN5bHfP2P0keb7KO\r\nZNc9fLKaZ+nCFiBkgWi8q7oc+Zhj5h5TgSVlEk68/yqUtoxpT/cpeDJUqptE\r\n2L0QKQcRvjrSjCrcXP4dO1q+ZpXW7EqgKAFl79ptWnFZPkLBkKX9Y1Tb+73K\r\nuPWLhWUlvFl2pDLX9jg7lYTXwjbam3cDIrOu7wX7N8oArNNcr2pEJdbqJOg1\r\ngwAI+ITp3YNUtIRm1YR4mIUzzYxN6COxkP/iu9nXwbL8GY4+RMGabJnKS5kX\r\nwicfouxj6i3VWKUwsm0YuRQ849s0cdZzJAg=\r\n=S+n3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.23-1ed434625459a788fb185797067e1c1783e45a24.0_1649343781525_0.3374611674916477"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.23":{"name":"@unifyux/web-components","version":"0.0.23","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.20","@unifyux/icons":"^2.0.22","@unifyux/theme":"^2.0.22","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"895f3aacf55afcc8129e028bc38fbd8fa8950967","_id":"@unifyux/web-components@0.0.23","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-tTXB3k8jEXMAlGtvUr3YV/r/F81u/ONwizvjXy73lB8MgpI+k44n8BZ5wrKqXd00FjDB+86T4rWQqxQUJ7ozbg==","shasum":"895ba8058b9a8cf5eb8c36961def1bfbb8ff7144","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.23.tgz","fileCount":342,"unpackedSize":8835307,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbAIc61GBvjyM2f3FLuaOSiKozvbm+1Y0KI7KbhaenOAIgJXjbzTCtGVMQivymDj5S/koaNIMq1oBHqCftjtHx0nc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTwIKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+wg/8C/TLJr/BLH/hJN8ZcqnubdD9F4gdU/JrjMXx5tCe6q26fwdR\r\nekOFvKCXJI2vV7Bri2Qjm/WEMULqZ+bj58ERTycZiXhnK4rjpgakzCMbB0pM\r\nDHCwefimyu2ihShoc96uyAUouAP+YxQzc9pvFmlcniXdK2noW00BRehGd4mE\r\n59U0zOOriYn5YuWRIBHCnFxm7TySMK0nqufOjudDeDrRqtG1+zcsGTxsT51R\r\nkevKJk+IyMrMPCUMRHV8IX9q6p2lBJlzRAziwZBjekOrMNC9wdsyWAbxXVGP\r\n/ZKntKkVkY3O3yHJme2Rx17eRQj2X5KbZi94i7ielgN/AIkNHTySB9fDspsj\r\n/q3m4aj+x9fvavccnzPHsARdXqxrUGBmWdjAtpdK3BRe5sahOoIkL4Kh7G0E\r\n2axJK3dvxqOTcqjFLywahjdKRA3cGbmGXO0dBDroBZ69/bdCXDa7zfeZm0Gr\r\nURPgl7e7uWv+L+X55vZzRNNhivWEfE1LyJLSlZ/4BPtf/BdTm3TjUVjGG3Uw\r\n2Snakl074kHM/LfI37sa/TAs0uSbPWBbeA2ERbtB052uDue0sGuxXKQ9KMdX\r\nKVG0rg1zsMnZUkzXs2pEtDDZQGdl24J/DnvH40BrRk5h8BB+SOlHeWSfblsJ\r\n/pzOtnBPlRJZIVx7AQxyg8lgSh1CNhbxut0=\r\n=6WrP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.23_1649345034454_0.24030078529733845"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.24":{"name":"@unifyux/web-components","version":"0.0.24","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.21","@unifyux/icons":"^2.0.23","@unifyux/theme":"^2.0.23","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"c1aec58dbbb327cc62927016eee2e1fe95193269","_id":"@unifyux/web-components@0.0.24","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-Ud80uu9SzmqJ+lNnFGDa99daPol7pxeivgTHyepCVjoCseNzKlAqSAIrahhI6r3SCYNsuyxMjhdrE7fI1DyHTQ==","shasum":"30becb24e3bf9341327b1e303ead9d76137936a6","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.24.tgz","fileCount":342,"unpackedSize":8842107,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtMfk+XJsBOK4vZ2ZQ5jeHPMlOgFwnIa3d5Gha6sRLOwIhAMT65X37/YSLLBHLPpWMv6+G8vGMAivdeLWngYtxpLR+"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGrDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+mg//b4Ehlk9sfe1ASwZclQ84Yq17E5ACY0RObDnHGBe+19cBNfgA\r\no6mWqdqhiQ9qfrDcnGCijLmQDG4jf1SLqoiAwtCC5i+6a/zbF3USB2+UGNiX\r\nbGaoDDgHj6VZg2G0JGzw6M8HnsDc5wyywwFzQOVm5W8HpnT15eKByo5D+JTv\r\n2rzQQamJde3/9oQekR6XtGfV9L/q66n4QQK4Z7+/+xJC9QEdGO6+clj9htuV\r\nSHU7NIFof3uCBh5TutN9/FWPVD3cPNXQldNNuHPv+K0FW1if/R4i5KcAz/W7\r\nizoGDbYFuiw5IasgTbBfrN7VfWLltacz1c6FRc7daVv1+XeB/l0DPb2YeYC+\r\n4OPwt0oq/owlBGTdpZf2POqAunrpF8B4MI2eHdwsSN/6XhFO7mnXlDYXqf9z\r\noXw8CL2xqvEJKcEu/YWFUShG0Kdv5dB8UiQr2l+6F8cSqRMjwEu9Pljyodj4\r\nZb5344Nilz1UXJcBCshtmJZ96shJtoS92PTQjM0CKOVmxSCLuwgU/aMeREWc\r\nYWgVbb2NF/wN/gSdlcqFUIEIlJKDLRdWX0yklVlrQuOQ+hdXWiFAKIUoesxU\r\n6uFJWvodf7fjih8PaWJ4OwbPkZ8xz1KGEWgiEhgnDeVm8W1w/YNoUXXF9tVz\r\nkXAnXiiFcibBeJhrTsaRYkyXefWhYgt1dLs=\r\n=GquL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.24_1650485955392_0.266991126348193"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.25":{"name":"@unifyux/web-components","version":"0.0.25","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.22","@unifyux/icons":"^2.0.24","@unifyux/theme":"^2.0.24","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"d9e744c9bca1307273c7bcad80a4e828bf52fe3d","_id":"@unifyux/web-components@0.0.25","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-A0wSdyl9zcRinBH3Fv1jZfOcKnJaevkYVMYxhJJB1tIcbxgImIwgJ0iXAZfnQhmm6H6t+NI6iU4GN7F0JSfXjg==","shasum":"d59f2994a63eca33321d2e0fcfec265cb8347f6d","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.25.tgz","fileCount":346,"unpackedSize":8868790,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQzttGQQEFFx682awDMSOJZkJA5efwKCl8yAL0llf3jQIgZOBpHrwDKIhcFehwMWM5Bv/+RKFv7GJrMJnBlW9wN2M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaYivACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIfg/6AwLRDqIDI6+ztC8Yf7923iLxSpn1z03HQFI3v1mY7uUeDNyq\r\n1yvG2cF0inOxex/k9OT6p0r3hF4FLoKI1xIUpk9K3+uWnOfb+afgR4f1cSsY\r\n23gY4iSDKkOmlLxAUkNO1rmEiculGIAdMDX0/Iq4bhWcYBCxObrjUDMsRDdL\r\ny/wdSpcGJjFbUOk+WOKhb2C5xsyhDC9o3Nye8Ub87lFMTNLpbDGY6Kj5izqZ\r\nZRQXZRyU37ZOJxnU6g4E+6HQGV1uhLu+EqyHtFDyY7y0BI1rsMYzjrIP8eCp\r\ngILy61FpyjUp04pAPJQiccOYcq/jmfhPQO19wXRfymxB6TMJtR4uIdA6Ue8x\r\n+xEA94jSJM29UD8+bKumE2UQz/qUX68kZ86Z4NFcvGnJrq5OEfHICvZcXSn4\r\np3ZmguyTAJMKv8J3ITo7AiSbhNi8wxMQ/hBD50dFInd0UOLo/tXfovp1SCka\r\neuo85fkoSQnbmCF87RzwVKjHNCEATmNdWCzG+yweeO2VatHXpc6khAllYb0g\r\n3WEZbE0d//9Wp6FxgXprU6/TLvj7eme2YQc1QNqH+DdT3DhtPg1oUxJ9Pdci\r\nB+sbEqzeWPuJ7hjBdiOoIzhPcIiAzwxljO/+D2+RXx9XS1bhBjPMv3i36aR3\r\nEVUkysi0r6WhPNhEryhKQzNyWro99E7Kkrw=\r\n=vEwg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.25_1651083438841_0.6063989840571997"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.26":{"name":"@unifyux/web-components","version":"0.0.26","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.23","@unifyux/icons":"^2.0.25","@unifyux/theme":"^2.0.25","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"d708ad4efff74e5b81b2fdc8a4480e6a73a46465","_id":"@unifyux/web-components@0.0.26","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-WzqJhYniqGz4UuCMLT/j5prvI3Rd0I842f6PyE0qsmz4YC9UAV2tQX+sOGJNWARbF83Fk/kIRV6rN3rEwW7n2Q==","shasum":"479609c6269843e0ff599ff5dad4f9921288fcf3","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.26.tgz","fileCount":347,"unpackedSize":8874554,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOGpjN1fuLlknR/5iLTDWilBcQQy4VwtcBBO25OCepEAIgZEi2OQoQ7ygWbcu2KSVVLKMnf1BBff8H6EqiXFTu6gU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibDutACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvkRAAgya5VEmRNfBN7rQzHcdwwGcJ2hI5/OQmcD8FUygiGuxGvBfG\r\n0atxPqnFta3xG0tTlytwZw6t2dxC+IrJjLP3B6yTHMvevkHpgzvT0Ia9C9WS\r\njcT9hkH+js6ErFdYI6UCXrE7W0L/Yui9+KgMeAmO8HTd29uO2uHEb35x/oCu\r\nbcSjfVw6nSQhuejQ0eFsStXDhs0egb8GeA50340NWoNnIWnjWCR0YNO4oD0R\r\nbOkXh+Wo1Qe4fxUl/ZF4E7A+t/V2PDl3czOrGGltNPUd6nq2c4suH8Kw7U7E\r\npJGHY6a588rpOQI0zzp5hdU+2OkuLsFTPvPDo/ElD7OqSN4s9VioZ42KpAr9\r\nWxSWm1BL5/p/o7CjK1vIp7epvu2+7govfWwSzk1Z53UnSsJaCSmVQnnIcj7w\r\nbefyunLpTp0RFvUF7RpQ6FlqPOgRMjjqOgsgYdtmmACQVBjcuFf+emaBkHH2\r\nLlkxzQPmnVPLQNymHcFEpaJtTRpDLeQIT7+EHtyUm2KV+PYs0Cl5JY+Kim1Y\r\nMG5f8hUPZRzIT4VfiRuxf+jALmgyc4QEn7x4lyssFtz9matwTZl5VArjNkKG\r\nzqJO5yaiEUA4pUtzWaqbn8R1+9R3YoV/JM/o3H88jpfwB9Keuq0PIPBASKFz\r\n2oXW4L3BsIVaKSrYmIqL6jZKpyucjhJuJxM=\r\n=h6Mk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.26_1651260333045_0.3869260734593336"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.27":{"name":"@unifyux/web-components","version":"0.0.27","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.0","modernizr":"^3.9.1","playwright":"^1.18.1","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.24","@unifyux/icons":"^2.0.26","@unifyux/theme":"^2.0.26","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"5464b3b9c31502b853e743be9a47619548a32558","_id":"@unifyux/web-components@0.0.27","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-SSiz3pdwkD5AfhkjJUlsU2+h4B2To/IjFEMktaJDiHlsksWUVF/Woxwf3s4f5CMx5l0MyNbXBDzr2fLZAgFvdg==","shasum":"431024a91b2a8797ece99bb01c9cb74bccd1b34f","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.27.tgz","fileCount":347,"unpackedSize":8879336,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFGd4DsZPY0OpUdrBd0qGWjYNxqaG3PTmU/b4l68v4SYAiAsgi4XrlApSrkmPzz5spEyIl+B4RD4fVxVhXfBKiD2MQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieqhZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoENxAAidbgxdzEmE6WolGAZkjx9rmgVqKQcssHKFL//EurfEjtrddr\r\nh0n8t0BCHX9nSXsyXq82KAtbBOUE6A1L5o2OZWr5Hu5ZeU2b7DLGXBt0NzOy\r\nyGztkbUQzR8a4k5MnH+IFMQHza48KPEKQItSstxkNTAj/9dki2aMI63x21+c\r\nbignCBTX3ixJytFOyphr2fKFPnb9siRQ4/IEC64wQnT7t9RWH/fKQbESO5un\r\nwDtF2VsmHaAR6rEWzL7hsElaY3cOF1zTWxaPLt/mOcHp4fdFAO/neobI/MbE\r\ndIskHINxeS9Nm1Ag/+cAS2L3ZnjZVCDYMFhRj5MgRuHTi2Z4Ne7vs5OMGMRE\r\nxPV33K3W33kysYPAAUzivs4wUBDCi1alAaIeBGKMeUJkuncdcaoqN37NJTdT\r\ngaZVLUcM3TKQIMdinIEBHCiz3+l7jFlkoydYSHnFJkoraLhIAZMXHYR79NNM\r\nKQt5dZn8+SntcRqdzbUmT47ye36MjpwzqtQzA6P6DPRXqI/a5VDEhQKbQp1i\r\nbGIR3PZgv8K1XdmpAlg1kw45mnKa5tup25Ju616RG620teS5HvNblKEtqf/t\r\nvymc1gZvdzZIWoBDmD1j8NZdGLb6Q/KUzmF2MGiurp9jbCkPddlqu6qoSaUX\r\nts93UdQJPdqYfa57JQTu7abl7TeRaHtfOE4=\r\n=9KVx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.27_1652205657154_0.6845076886074506"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.28":{"name":"@unifyux/web-components","version":"0.0.28","description":"PerkinElmer Web Components","main":"dist/index.cjs.js","module":"dist/index.js","es2015":"dist/esm/index.mjs","es2017":"dist/esm/index.mjs","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/web-components/web-components.js","customElements":"custom-elements.json","publishConfig":{"access":"public"},"scripts":{"generate":"stencil generate","manifest":"custom-elements-manifest analyze --stencil","prebuild":"yarn build-themes","build":"stencil build","postbuild":"cp ./react-component-lib/createComponent.tsx ../react-components/src/react-component-lib","start":"stencil build --dev --watch --serve","serve":"stencil build --dev --watch --serve --no-open","es5":"stencil build --es5 --watch --serve","test":"jest --ci --runInBand","test2":"stencil test --spec","test:watch":"jest --no-coverage --watch --bail","test:update":"jest -u","test:e2e":"DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:debug":"PWDEBUG=console DEBUG=pw:api jest --detectOpenHandles -c jest.e2e.config.js","test:e2e:update":"stencil test -u --e2e","build:modernizr":"modernizr -c modernizr-config.json -d src/lib/","prestorybook":"stencil build","storybook":"start-storybook","prebuild-storybook":"stencil build","build-storybook":"build-storybook --quiet","watch":"watch 'yarn build' ./src","prebuild-themes":"cp ../theme/unify.css ./src/themes/default","build-themes":"./bin/getVars.js ./src/themes/clinical/design-tokens.json > ./src/themes/clinical/design-tokens.css"},"devDependencies":{"@babel/core":"^7.10.5","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-decorators":"^7.8.3","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.8.3","@custom-elements-manifest/analyzer":"^0.4.17","@rollup/plugin-node-resolve":"^7.1.1","@stencil/angular-output-target":"0.4.0","@stencil/core":"2.12.0","@stencil/postcss":"2.0.0","@stencil/react-output-target":"^0.2.0","@storybook/addon-a11y":"^6.3.7","@storybook/addon-actions":"^6.3.7","@storybook/addon-centered":"^5.3.21","@storybook/addon-essentials":"^6.3.7","@storybook/addon-knobs":"^6.2.9","@storybook/addon-notes":"^5.3.21","@storybook/html":"^6.3.7","@storybook/theming":"^6.3.7","@types/autoprefixer":"^9.7.0","@types/jest":"26.0.3","@types/modernizr":"^3.5.3","@types/node":"^13.7.6","@types/puppeteer":"1.19.0","autobind-decorator":"^2.4.0","autoprefixer":"^9.7.4","babel-jest":"^26.1.0","babel-loader":"^8.0.6","copy-webpack-plugin":"^6.0.2","expect-playwright":"^0.8.0","jest":"^26.6.3","jest-junit":"^10.0.0","jest-playwright-preset":"^1.7.2","modernizr":"^3.9.1","playwright":"^1.22.2","postcss-import":"^12.0.1","puppeteer":"^3.0.0","rollup-plugin-inline-svg":"^1.1.1","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svg-import":"^1.4.0","stencil-inline-svg":"^1.0.1","storybook-addon-themes":"^6.1.0","storybook-design-token":"^1.2.0","ts-jest":"^26.0.0","typescript":"^4.0.0","watch":"^1.0.2","write-file-webpack-plugin":"^4.5.1"},"license":"MIT","browserslist":["defaults"],"dependencies":{"@cloudfour/transition-hidden-element":"^2.0.2","@popperjs/core":"^2.5.4","@unifyux/brand":"^2.0.25","@unifyux/icons":"^2.0.27","@unifyux/theme":"^2.0.27","classnames":"^2.2.6","d3-scale":"^4.0.0","d3-selection":"^3.0.0","d3-shape":"^3.0.1","d3-time-format":"^3.0.0","dialog-polyfill":"^0.5.3","dragula":"^3.7.3","focus-visible":"^5.1.0","stencil-fragment":"^1.0.1","string.prototype.padstart":"^3.1.0"},"jest-junit":{"suiteNameTemplate":"{filepath}","classNameTemplate":"{classname}","titleTemplate":"{title}"},"gitHead":"13c52fa8b0c71b890808320f8b4265b037453ccb","_id":"@unifyux/web-components@0.0.28","_nodeVersion":"16.13.1","_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-ZFmtmTbgAkxjZTjm09GhoxATroVrSYqDCkHk30MW576cXwMznwHna8RiIFtLPBD10BKrj40qhtMJGZKdu1IK9g==","shasum":"da6583a1e078deab00f55c2732a78fb41a75e68d","tarball":"https://registry.npmjs.org/@unifyux/web-components/-/web-components-0.0.28.tgz","fileCount":347,"unpackedSize":8886682,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMImuMx2ef96JDYhZncidmsuSB7+loTTU6hl7Tn3f4ZwIgBDmucxI2I+g/uC6qcJuwrIkCy99dWyhQusPXji6x6ic="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioPVZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPtQ/+ICpo1cd1/zgqph7Qm2zwoU4RvCuqC0t9IdVjNwCTfiSTOYa7\r\nQw9+SDCJtNikwHwS9Dc2dPcQQTZutxMscx5VlZxl7xtcszLprlUrezryrkWJ\r\nySceDvGfS0RgYDmJlzp7WK2Gtfkj0ZLCYf8r6MfeUYhaNoYZNKZQrU1nwKcy\r\nfHvZZ5/RQOM8/TRjTt4GcyQmPAKmcf41pUSyQuQZkpv66Oh0/Pd54GY7tviu\r\n00o9MqGwA04gc3TW+82IvzOOICXJzOslzRBjDW4p57OLNFbQBG6FqYFPXcji\r\nCvPZzdepGRLKJXcrmBzBuurf7FyBd/VEF8+cvo1vSc5nuZ5R98Io8xARqX5b\r\njC7dG8AtQ9dx1+2wh8dTFwTVhdq21ZkuMFDihf9npkk6N07hy5B+uOT9rgGe\r\nfRsMnT7y425H3VqslaULqb8FdqzbywhPa283ryE9deV3/JumW7m/K4SpMe8N\r\nBzt/Gye5/HuPcPWFn+/1FPNEGfry8MB3VtKCLB4tqSbMjpBt4HIfOmej30zi\r\nWpbnU5j/SSlPzNEUFvzVLWTzyL2xIQVWGcz03i8d+pbobgCzCwiUKDwXgO41\r\n25pikLffyEF/a3EvD0gd8/ax5ehy2z8R5Zxxj53ds+D8qTdiiIu4xAiU1HJ2\r\nzlpZtGcycMQ4U94fON0slXp9ozmsBTciwAE=\r\n=j8gt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"},"directories":{},"maintainers":[{"name":"mikewilsonpki","email":"michael.wilson@perkinelmer.com"},{"name":"idea34","email":"idea34@gmail.com"},{"name":"dewilhelm","email":"david.wilhelm@perkinelmer.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.0.28_1654715737041_0.770047028679038"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2020-04-16T15:51:37.853Z","0.0.3-alpha.490":"2020-04-16T15:51:46.252Z","modified":"2023-11-29T18:46:31.566Z","0.0.3-alpha.465":"2020-04-16T18:01:14.453Z","0.0.3-alpha.478":"2020-04-16T20:48:20.564Z","0.0.3-alpha.480":"2020-04-16T22:01:53.425Z","0.0.3-alpha.481":"2020-04-16T22:12:23.033Z","0.0.3-alpha.483":"2020-04-17T21:12:44.227Z","0.0.3-alpha.488":"2020-04-20T19:01:58.106Z","0.0.3-alpha.474":"2020-04-20T19:10:56.334Z","0.0.3-d898ea2a6d3966a7724b1e2b11f406701628037a.494":"2020-05-01T14:16:33.506Z","0.0.3-5f5c34fc190281e686300c37d76fd4909a415cf2.479":"2020-05-01T18:16:14.960Z","0.0.3-bc7270126ecd06f24513418ae5c7454d57be891b.482":"2020-05-05T13:17:46.863Z","0.0.3-5669f70340ca5baf165267f55e01dbf12c4933e0.481":"2020-05-06T22:26:51.391Z","0.0.3-1d21ac15efd91b2130283faccd5500013c58f2ac.485":"2020-05-07T15:48:11.026Z","0.0.3-e51862b15cb56bcb733b1374719759bed5534785.486":"2020-05-07T16:08:13.562Z","0.0.3-02413ef471054de5dfdcff73c68928ef5d078c6a.492":"2020-05-08T16:23:40.742Z","0.0.3-a15def823975c01335e1f7bf20411d41c7b3f873.496":"2020-05-08T20:31:21.898Z","0.0.3-ab47c1988d78cecda38b08ad71a6dbf9bfff5949.487":"2020-05-08T20:42:42.881Z","0.0.3-157a6581535050f2d8653a5c6c55b14f0e9e7490.491":"2020-05-12T16:25:08.180Z","0.0.3-b03994724d6e6033f32c340f4c607b463b015f39.492":"2020-05-14T12:32:18.425Z","0.0.3-07cac97cd3f6cedd29e4f2f8fadbf5793e8389e2.493":"2020-05-14T12:46:21.505Z","0.0.3-94fe342982c70b19df6841228a9dd0c81d54b7ef.488":"2020-05-14T14:46:54.593Z","0.0.3":"2020-05-14T15:29:11.891Z","0.0.4-874762bf093d6137fe56e56792c4f262fafc3af2.489":"2020-05-14T16:11:21.165Z","0.0.3-70caeb9965add27591c9ada8b3dec8cee594a8f9.543":"2020-06-02T15:27:06.473Z","0.0.4-4aa2d74fd11f1d7b522dbff23dc28dd02cbdaaf7.490":"2020-06-02T18:17:44.619Z","0.0.4-ac29f7c7e4323046ba45a0706bcea4a274c0b10f.505":"2020-06-10T21:02:08.470Z","0.0.4-bd9e8100be328e3d5c6a144b55ced9238cee7701.513":"2020-06-12T14:31:01.808Z","0.0.4-04a00eb74cfdee55be2b17ea2c1be7f9b8ceaf35.517":"2020-06-12T20:43:41.606Z","0.0.4-ecedf3657c79fece88dd42fc83a6788a4df565fc.519":"2020-06-13T00:34:55.352Z","0.0.4-d04786065833c5188c6758b86dc72c001ae9bb86.520":"2020-06-13T02:01:24.727Z","0.0.4-76cf6645d81796b4529c323d715c5fc719de2c87.0":"2020-06-15T15:52:45.596Z","0.0.4-efbecfa9bfb474035c7588dfb4e17f19bbe56286.0":"2020-06-15T16:12:50.358Z","0.0.4-24f97786e23fbc74f29bdcca6d6652eb2b24c2ff.0":"2020-06-17T15:38:00.389Z","0.0.4-5bba792479244f55fc999fc2204081c3558c11ce.0":"2020-06-19T15:32:25.526Z","0.0.4-5595f9d6a7f76a2de97f7690c6e6024672df8bfb.0":"2020-06-19T18:49:59.786Z","0.0.4-af907db13dfdf344f24746cdd8bf02d146881152.0":"2020-06-22T13:49:39.027Z","0.0.5-db712e3b717c912e13dd096359d3535016301bcd.0":"2020-06-22T14:24:56.699Z","0.0.5-380612d78ca3bd4cce2e675fefb9dbdf1b614a84.0":"2020-06-22T15:28:58.366Z","0.0.4":"2020-06-22T15:52:55.467Z","0.0.5-ffb4fcaa56b7ca4d9846d41ec34d16352c62f923.0":"2020-06-22T16:07:26.292Z","0.0.4-00e7da3c62b129e7c80d70e65e76fdd8a6a3eae5.0":"2020-06-24T01:55:18.995Z","0.0.5-92520f1a57ca29a75790b6e679abdfb7975e947f.0":"2020-06-24T02:07:14.644Z","0.0.5-e6a5a88d0722881c4f8269a471a6c80c5e5c7787.0":"2020-07-02T19:56:12.882Z","0.0.5-a6b15a87f099545866f9675a972e04a66558f1c6.0":"2020-07-06T15:57:45.761Z","0.0.5-539073b53e71e6c52ab324842627a80dbee5ff83.0":"2020-07-06T16:13:42.302Z","0.0.5-39dfe5ee2f3d32d5a4c6daaf026f2ea1c004d079.0":"2020-07-06T20:02:42.263Z","0.0.5-70b2d204e9f01f004837d796e3f320f10762ed1d.0":"2020-07-06T20:19:59.010Z","0.0.5-cef7f76778b44253a035a37a51d957640a148354.0":"2020-07-06T20:40:33.663Z","0.0.5-597ed4c23d673fdcff6ad5ba5a42764fd634731a.0":"2020-07-06T20:54:11.891Z","0.0.5-33b8ad030e5cf2b10ac8a99bd6259e9682e0d162.0":"2020-07-06T21:06:32.871Z","0.0.6-327324f62160baf50eded6752d62b961001525ce.0":"2020-07-07T14:09:23.707Z","0.0.5":"2020-07-07T14:31:02.925Z","0.0.6-6b313ddcfe1b389c8727717118f58d99b952bc43.0":"2020-07-07T14:43:51.296Z","0.0.6-b831a3cdab4ebe4ab4988f8f805fbf154c32aead.0":"2020-07-17T20:54:07.962Z","0.0.6-3aba2da4c55aac5e86b52f5b129996b21bd13b66.0":"2020-07-20T13:29:06.908Z","0.0.6-690f7c890b8467b375d7eba5f78e1e0e0af884ac.0":"2020-07-20T13:43:40.580Z","0.0.6-8588bd6c9251723e6d0a79e938b306f12109ff3f.0":"2020-07-20T13:46:46.534Z","0.0.6-d6f55a7a5547699a53187188a53448aaac04ca09.0":"2020-07-20T14:39:13.743Z","0.0.6-6e773c1eee581dc2bf7c057ae80c20628d31faff.0":"2020-07-24T20:31:15.387Z","0.0.6-6a969288e67d9103be7e34303a038ec0fe53034e.0":"2020-07-24T20:42:29.808Z","0.0.7-f215a33d48290d66b1dbbd11dc7a13b11be50a14.0":"2020-07-24T20:53:19.118Z","0.0.6":"2020-07-24T21:05:44.303Z","0.0.7-7d660efb2fd6d0be79f3b89a51708c8b11b4812e.0":"2020-07-24T21:10:42.920Z","0.0.7-faa5136dc55d35ac62428c7de5c99afa813a8ee0.0":"2020-08-07T14:41:22.775Z","0.0.7-2cb223cf45f333b26add7225fc106dd928649905.0":"2020-08-07T14:46:01.280Z","0.0.7-21f5a423f3e03e162d997ca54280531230f5ccb9.0":"2020-08-07T14:57:52.251Z","0.0.7-280c173efa6b8c4a68fdf45acceeee4b3a73cf8e.0":"2020-08-07T15:10:11.697Z","0.0.7-4e5e1d01c13b430e3837b7c5db4c8e759f7aad35.0":"2020-08-07T15:24:55.213Z","0.0.8-032a367c3e5ce02e6f02d4787d4a9b1c003fa09f.0":"2020-08-07T16:05:56.685Z","0.0.7":"2020-08-07T16:18:56.240Z","0.0.8-ed61f690db58560a9c041cbfb1ca6f660114e79a.0":"2020-08-07T16:36:25.450Z","0.0.7-9c2d7b84602dcf2ac3c6b9c82efbe00179138155.0":"2020-08-11T19:43:57.832Z","0.0.7-9d13f89529c289d268d5bcee636e9f3e87140bab.0":"2020-08-12T18:15:41.430Z","0.0.8-81e21c088039079f3ad1f58140ee0e531beab04a.0":"2020-08-12T18:28:42.626Z","0.0.9-82cee0170516e8763eaefc41d119091a76a286cc.0":"2020-08-12T18:30:43.716Z","0.0.8":"2020-08-12T18:43:41.791Z","0.0.9-b08af7c12e8ad0c7951ffe555644d1951abb62fc.0":"2020-08-13T13:28:15.869Z","0.0.9-a07e7ef75fbc876dc0f30ca97bd5053edf0add21.0":"2020-08-13T13:29:47.795Z","0.0.9-bdf2d373046c2d9d7f3a0e6b67ed16b3a89f0d80.0":"2020-08-13T14:01:26.908Z","0.0.10-566d849e496250ce420de81591214dfaa86832ec.0":"2020-08-13T14:04:02.666Z","0.0.9":"2020-08-13T14:28:28.671Z","0.0.10-7369bdd89bdbedd8d5e0db3c4666ff241b5e3c81.0":"2020-08-17T14:15:19.133Z","0.0.10-67d9a240bc26252e5d3c7e42e996c95ac7378609.0":"2020-08-17T20:56:21.334Z","0.0.10-9af7030ebaa4454d4882c4ae8463a8bcf7205018.0":"2020-08-26T13:43:34.804Z","0.0.11-70a4edf0886e93362255b5f8ef06acdd4365d1c8.0":"2020-08-26T13:48:59.754Z","0.0.10":"2020-08-26T14:02:41.259Z","0.0.11-8df7d5ddc96c4726634e967f8c70c5b1a81b62c3.0":"2020-08-26T14:36:32.315Z","0.0.11-c83a0c1277ceb6ddf56ae1da9621c5a0c6d1c2dd.0":"2020-09-09T19:17:34.802Z","0.0.11-e1ab9142002c747c41e976d4abb556e7406d60b1.0":"2020-09-14T15:07:08.913Z","0.0.11-dcb55221ad448c30b0242810748ea7372410abc3.0":"2020-09-22T20:26:48.449Z","0.0.11-4b2085f47ba759f60a8b2404282e7c89f433ba6a.0":"2020-09-22T20:30:05.853Z","0.0.11-ef5f51c548c7077815715825cfff9a30a8d5b7cc.0":"2020-09-23T13:53:30.913Z","0.0.11-43814241adab71ace78b62203bc05c300ddd587a.0":"2020-10-03T01:44:20.293Z","0.0.11-4e1e7c1aa9602a25b01cea8594611d5b86d90ca4.0":"2020-10-05T13:49:29.233Z","0.0.12-85c20d5920a33e51038d4a48d8676e292e727493.0":"2020-10-05T13:58:48.602Z","0.0.11-2e30b1f5b804a266ad11c59bd2fdaf5086182db7.0":"2020-10-06T15:51:59.354Z","0.0.11-018bf6796e30d13349944e9bece956c9ef8a2e29.0":"2020-10-06T15:56:03.527Z","0.0.12-1a60fd138e52053d5c669df0ce29140fe117a06c.0":"2020-10-06T17:43:29.899Z","0.0.12-531ae77628d27aaba63b0c7c29c56bbf7f1ffd85.0":"2020-10-06T17:43:51.299Z","0.0.12-d57b1f57cfcdc32af00583887e65a9db36af39b6.0":"2020-10-06T17:54:25.548Z","0.0.11":"2020-10-06T18:07:46.197Z","0.0.12-a7c2e4f5bcba296d1cc1fa4abf3edf6056e7998e.0":"2020-12-03T22:08:29.482Z","0.0.12-1a21e287ec35d4f493886393f12242223d25cf3f.0":"2020-12-03T23:04:10.483Z","0.0.12-31257c73ff90a542225257fdb41c56dfa7556b1a.0":"2020-12-04T14:54:13.268Z","0.0.12-24c26accc62b2cc71f2ddc86251e34694e2f0fce.0":"2020-12-04T20:20:06.755Z","0.0.13-205dc5e534a85a8a8caf02b6774997ba12e7f6fb.0":"2020-12-04T20:20:28.916Z","0.0.12":"2020-12-04T20:43:53.888Z","0.0.13-5ff1bf807ee5feb34b436523f4d83bb95cf515fb.0":"2020-12-04T22:08:54.198Z","0.0.12-441e506f4dc45291234d227cee518aef347863ed.0":"2021-01-14T20:15:56.397Z","0.0.13-77755403b1039bcec886d58e9004ccabf6b611fe.0":"2021-01-14T20:35:34.249Z","0.0.14-1590f26c988179a1c294ab11e56ff0e30a28f3c2.0":"2021-01-14T20:36:07.634Z","0.0.13":"2021-01-14T21:01:09.739Z","0.0.14-2e5133f57cc52853a0256cd1ddf10376c2b71265.0":"2021-01-14T21:45:14.268Z","0.0.14-02c4343681a8e9cc9e98d94171d826a9fb55edef.0":"2021-04-30T21:57:15.300Z","0.0.14-daed1f2fab20e757166b1c62d28d6cc144eaa970.0":"2021-05-10T14:58:09.766Z","0.0.15-e4999b903a1c409d16777c498b413849b8c64499.0":"2021-05-10T15:13:43.856Z","0.0.14":"2021-05-10T15:34:31.422Z","0.0.15-2bb82a29965af1e8f9160ad62bf41c9e7ce1bbda.0":"2021-05-10T15:49:13.794Z","0.0.15-f68faba36fe2c64908165607a04d2c227ac7e4da.0":"2021-05-21T14:37:01.167Z","0.0.15-75825932d96af182fc25751705a044487d945f9d.0":"2021-06-28T03:32:59.897Z","0.0.15-96beca7fcd10c0448271c34589a09d1c36aa5877.0":"2021-06-28T04:23:21.708Z","0.0.15-e314fb11ac8eb719a5b1a3e0b15e047fbf639bc5.0":"2021-07-02T01:49:45.158Z","0.0.15-248d167530c7225f42a17e74a4b1c7461776729b.0":"2021-07-02T01:50:00.341Z","0.0.15-6bec26e4dd2487188d4a39790535571634f80999.0":"2021-07-06T08:02:29.705Z","0.0.15-49e5a561dee16d3e24a2f2672d308ae6d28e4c0c.0":"2021-07-06T20:07:41.149Z","0.0.15-56722f391b3c6b31a03bdd5f32ebb46e81b0d048.0":"2021-08-23T15:48:13.033Z","0.0.15-99d863066f7996c6315d8ef7a2e3faeb3d336766.0":"2021-08-23T17:18:45.863Z","0.0.16-6ac471ad5f7abf7bd4933d3090db2827ecf5fdf8.0":"2021-08-23T17:25:50.589Z","0.0.15":"2021-08-23T17:48:49.900Z","0.0.16-ec7e9c806a1d8b24c9340832624910c8a1317177.0":"2021-08-23T18:01:47.434Z","0.0.16-4b4081c3ff82a2946297a1ad3c1ce669cc2aba15.0":"2021-12-14T23:43:17.197Z","0.0.16-7db6a0522d96beaed9eaa7c9960191a05567c325.0":"2021-12-14T23:58:36.106Z","0.0.17-62d938aacf286ffd4ca82e4b9357936e40779a47.0":"2021-12-15T00:04:36.161Z","0.0.16":"2021-12-15T00:16:57.759Z","0.0.17-91032ae56aeb6129218cbc8428f45471b0a43b2b.0":"2021-12-15T00:28:00.661Z","0.0.17-aff898b442e25ab342aa7233b65f08255617b5ff.0":"2022-01-12T15:46:34.809Z","0.0.17-847ae4cc05a0dba56bccbb0a7aa782c89d99d720.0":"2022-01-12T16:00:20.507Z","0.0.18-612b49ef84175fa44e55df3fc934e2635390d131.0":"2022-01-12T16:16:12.735Z","0.0.17":"2022-01-12T16:28:33.821Z","0.0.18-442a5139eb70a419cc962d4838bb2bb71cca6d24.0":"2022-01-12T16:39:35.092Z","0.0.18-cd348d104810134066b87e79c0e973bf646c2e7c.0":"2022-01-26T20:31:07.637Z","0.0.18-fffb4e3a81a292638e7a597921b7a6c2ebb56174.0":"2022-01-26T21:25:17.952Z","0.0.19-3b90c05572909b0711ad7532035fbb817127c930.0":"2022-01-26T21:26:51.586Z","0.0.18":"2022-01-26T21:42:10.228Z","0.0.19-9e40319f57a8baf831e30bb9b0edb0fec4719b95.0":"2022-01-26T21:53:18.789Z","0.0.18-f68b548bc564ca74f95387801d571a319b95b724.0":"2022-02-08T20:31:25.162Z","0.0.19-ff6f6b78be09b0eccdf7fa43f8019cd1ad49f9c0.0":"2022-02-08T21:51:39.229Z","0.0.20-2aa3b1aef411d55bcec5e1c8c495d3fc0ea438d1.0":"2022-02-08T22:36:28.971Z","0.0.19":"2022-02-08T22:59:52.411Z","0.0.20-def0c56af4a71e435f6920456e09a945598413ea.0":"2022-02-08T23:18:08.524Z","0.0.20-f88b670a1a161cf223512f6ef4eeb78d04740cd4.0":"2022-03-08T15:02:56.262Z","0.0.20-c1eb514596e1389d4051e51be66e8f666500d184.0":"2022-03-08T16:02:37.604Z","0.0.20-d00c773ed84f4111f9178e4a6ed1aca33202398c.0":"2022-03-09T16:00:17.575Z","0.0.20-07dff60022f59ee27a72a253c77a7f1fd7d5cad4.0":"2022-03-09T16:58:27.586Z","0.0.21-47d0aa90c7bd811e203236ae9c28987edb39b260.0":"2022-03-10T18:46:16.612Z","0.0.20":"2022-03-10T18:58:58.092Z","0.0.21-c95439da693e6cf405eeb7452514af4992370f8b.0":"2022-03-10T19:10:15.293Z","0.0.21-d4cef5110ef8c91e31b4804da7df59a41a948799.0":"2022-03-23T15:28:00.585Z","0.0.21-a39e448ca4fd961d27f6fe615e2779f1f38ea683.0":"2022-03-23T16:45:48.003Z","0.0.21-24da9cdd2b9911595def43661aa7316ee339d53f.0":"2022-03-23T16:57:36.066Z","0.0.21-a85e9f32ee7ee63f09cb05dc40f220d652dbba3d.0":"2022-03-23T19:53:39.771Z","0.0.21-5159b18d27767316fbaf1307000c8a7f9f9530a3.0":"2022-03-23T20:05:00.777Z","0.0.21-31014b090c023bf3ac6d082a2f36e5f345153547.0":"2022-03-23T21:01:48.071Z","0.0.21-c52c97d3e40f3e88f425c7dcafab1aa418bc582d.0":"2022-03-23T21:09:18.295Z","0.0.21-6b6becde8933df22cecbbbbfafcb58095cd970ac.0":"2022-03-23T23:23:14.833Z","0.0.21-bdc839f746ce5da21d2c231f25bcbb0fbbd12fc9.0":"2022-03-24T16:05:16.062Z","0.0.21-2a64c786d9edeea1624c6e4fb5550ad21558c4b7.0":"2022-03-24T16:24:27.665Z","0.0.21-8e9dba39cb8c58786cbe0f6e6debceda4ecf2a1f.0":"2022-03-24T17:54:00.305Z","0.0.21-a2042d1079b3c3871c8dabdbdd134140792e7e23.0":"2022-03-28T13:37:22.049Z","0.0.21-366b5555b4aefb6b69e4e3de2d5e415d78a4dfde.0":"2022-03-28T19:35:42.618Z","0.0.21-9beb9d97708a132ce044da642824504fa8a06390.0":"2022-03-28T21:08:31.549Z","0.0.21-95f117cddd07c8d3669f66cc92da192628ba04da.0":"2022-03-29T14:32:33.875Z","0.0.21-6baf34d418f38cd1ab527e784fc17eefbad11344.0":"2022-04-01T19:32:59.627Z","0.0.21-72b4e3f4fa868a7d457edf86a8d64d6d7c3f1c7b.0":"2022-04-01T20:24:57.542Z","0.0.22-2823cda9a258130250f6c3707b5ea65cde78a37a.0":"2022-04-01T20:29:19.234Z","0.0.21":"2022-04-01T20:39:18.923Z","0.0.21-4378ccfd035608e9a9490d673af09da8f903ffd2.0":"2022-04-05T00:46:43.222Z","0.0.21-b8e07b8511b3dfead26e54dc9784f140def3038b.0":"2022-04-05T00:47:52.453Z","0.0.21-330dd22b576e0ae40bec069ae5c08bf3f430d449.0":"2022-04-05T00:59:50.905Z","0.0.23-09ed455c142d00b7e8f3073bf39ad34a5a062707.0":"2022-04-05T01:57:19.959Z","0.0.22-053cab2b91aa330525d09b43b856ada5dc3783d2.0":"2022-04-05T01:57:27.154Z","0.0.22":"2022-04-05T02:11:14.393Z","0.0.23-6e813462c2fc4c33a679f906bf9c1220bbfe49c0.0":"2022-04-05T02:22:38.694Z","0.0.23-611081515151bbcae4c7895057020511a2019a5d.0":"2022-04-06T19:28:36.334Z","0.0.23-33b2050a2096ec7258b7384a41e131992355acdc.0":"2022-04-06T22:49:39.312Z","0.0.23-714464281088acdf8be30ed4ad54ae42e24687d4.0":"2022-04-06T23:06:20.654Z","0.0.23-c653fe620d9fc2655255bfdb05801f00b899e8fe.0":"2022-04-07T14:07:08.355Z","0.0.23-73f34e888ffe7a111d648c13c6e7d315342692d9.0":"2022-04-07T14:17:47.376Z","0.0.23-09fefd6a316b9a99ad1121c80adab2639af15809.0":"2022-04-07T14:51:16.365Z","0.0.23-1ed434625459a788fb185797067e1c1783e45a24.0":"2022-04-07T15:03:01.699Z","0.0.23":"2022-04-07T15:23:54.857Z","0.0.24":"2022-04-20T20:19:15.700Z","0.0.25":"2022-04-27T18:17:19.193Z","0.0.26":"2022-04-29T19:25:33.435Z","0.0.27":"2022-05-10T18:00:57.446Z","0.0.28":"2022-06-08T19:15:37.285Z"},"maintainers":[{"email":"michael.wilson@revvity.com","name":"revvityux"},{"email":"idea34@gmail.com","name":"idea34"},{"email":"david.wilhelm@perkinelmer.com","name":"dewilhelm"}],"description":"PerkinElmer Web Components","license":"MIT","readme":"# PerkinElmer Web Component Library\n\n## Storybook (live demo & documentation)\n\n[Web Components Storybook](https://optimistic-volhard-1b6e87.netlify.app/?path=/story/button--default)\n\n[React Components Storybook](https://xenodochial-mcclintock-f2c576.netlify.app/?path=/story/*)\n\n## Goals\n\nPrimarily the goal is to support the implementation of the PerkinElmer design system, by providing a set of reusable components that:\n\n* Have the desired look and feel\n* Have minimal external dependencies\n* Can be used as drop-in replacements for HTML elements\n* Follow accessibility best-practices\n* Are compatible with multiple application frameworks, eg. Angular, React\n* Are well tested and robust\n* Are supported by the required browsers\n* Are well documented\n* Are easy to install and use\n* Are internationalized: contain translations of internal strings, for supported languages (TBD)\n* Should be internalionalized: format values and display names according to locale\n* Should work in RTL locales\n* Provide a way to insert custom strings to override default strings used\n\n## Technology\n\n### Web Components (v1)\n\nTo be widely compatible and almost as easy as using built-in HTML elements, the components are Web Components,\nie. they are made with the following new web standards:\n\n* [Web Components](https://developers.google.com/web/fundamentals/web-components)\n* [Custom Elements] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)\n* [Shadow DOM] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)\n* [HTML Template Element] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n* [Custom Events] (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)\n\nNote: the Web Components specification was initially proposed by Google, but it was not standardised as originally proposed.\nFor example HTML Imports have not been made part of the official spec. The official specification is referred to as v1, the\ninitial version as v0. Be careful when browsing the web, that any resources are referring to the new official spec.\n\n### Stencil (Web Component toolkit)\n\n[Stencil](https://stenciljs.com/) allows writing, testing, documenting, and publishing web components easily. It provides\na component API over the native one, making it simpler to create components, without handling many low level\ndetails of the specification. Components are written in Typescript, using JSX to generate markup, similarly to \nReact. It is well documented, and has also been adopted by some major companies to produce their design systems.\n\nStencil provides a dev-server which live-reloads changes, which can by run with this command:\n\n    yarn start\n\n## Browser Support\n\n* Chrome, Safari, Firefox, Edge\n* IE 11 (with polyfills)\n\n## Static Documentation\n\nThis is provided by README markdown files in the github repository, which Github renders as HTML.\nStencil generates [API documentation](https://stenciljs.com/docs/docs-json) for the components in these files as well.\n\n## Interactive Documentation (Storybook)\n\nTo run Storybook locally,\n\n    yarn run storybook\n    \nwill start a local server and open a browser window with the Storybook UI. This will allow interacting with \nthe components in various states, and also viewing the generated documentation in the Notes panel.\n\n## Theming\n\nThe components are themed by the use of CSS custom-properties. By changing the values of these,\nthe appearance of the components can be customized. We will use this to create the desired look and\nfeel, as that evolves from the Design System team's research.\n\n### Custom Themes\n\nThe themes are defined in the `web-components/src/themes` directory, as\nsubdirectories. Each theme directory contains theme.css file which exports a\nlist of CSS properties which the components consume in their own CSS files. \n\nCurrently, the only theme is the 'clinical' theme, and the 'default' one is\nsimply a copy of that, in order to keep the names of properties in sync. \nCreating a new theme involves copying the 'default' theme directory and renaming\nit. Then the properties in the `theme.css` can be changed to customize\nthe theme.\n\nWarning: once you create a new theme, it must be maintained in order to keep the\nproperties up to date with any changes in the 'default' theme. Some kind of\nscript to validate the themes should be written at some point :).\n\n#### Figma integration\n\n## Building\n\n    yarn run build\n    \nWill transpile source code and generate distributable modules in `dist/` directory.\nThis also regenerates documentation in docs directory.\n\n## Unit Tests\n\nAre written using [Jest](https://jestjs.io/). To run unit tests:\n\n    yarn run test\n    \nTo run units tests, and rerun after code changes:\n\n    yarn run test:watch\n\n## Usage / Importing into your Project\n\n### Basic HTML Integration\n\nAdd the JavaScript and CSS resources to your <head> in `index.html` or equivalent file:\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/themes/clinical/theme.css\" type=\"text/css\" media=\"screen\" />\n\n    <script type=\"module\" src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/@unifyux/web-components@0.0.17/dist/web-components/web-components.js\"></script>\n\nThere are 2 .js files: the first is used by modern browsers, the second by IE,\nand other legacy browsers.\n\nTo use a different version, change the version identifier after the @ character\nin the above URLs. To see which versions are available, visit the [public NPM\npage for this package](https://www.npmjs.com/package/@unifyux/web-components).\nClick on the Versions tab to see the available versions.\n\nOnce you've loaded the web components in your app, you can simply use them as\nHTML elements... eg. \n\n    <pki-link href=\"http://google.com\">Google</pki-link>\n    \nWill create a regular link, but styled according to the design system.\n\nTo see which components are available, have a look at Storybook (see above),\nwhich also has documentation for each component in the Notes tab, which will\ntell you what properties the component accepts. Note that the storybook does not\nhave hot-reloading enabled, so you'll need to do a `yarn build` to rebuild the\ncomponents and reload the storybook manually to see changes. Use `yarn\nstorybook` to run the storybook locally.\n\n## React Components\n\nAre automatically generated in the sibling package `react-components`. You\ncan import and use these like any other 3rd party React component. Eg.\n\n    import { Nav, NavItem } from '@unifyux/react-components';\n    \nTo set the theme in a React app, import the theme css in your main component:\n\n    import '@unifyux/web-components/dist/web-components/web-components.css';\n\n\n## Angular 9+ Components\n\nAre similarly generated in the `angular-components` package. If you're using\nAngularJS, you will have to use the vanilla HTML integration route.\n\n## Development Workflow\n\nFor interactive development, use the `yarn start`  command to start the Stencil\nserver, running the index.html page in the `src/` directory. It will update\nautomatically when you edit the source files. If that does not work properly,\nyou may need to restart the server. This seems to happen when a new CSS\nvariable is added, for example.\n\nEvery time you push to a feature branch, or develop, a new 'canary' version will\nautomatically be published to NPM (this applies to all packages in the Unify monorepo).\nTo release a proper version, you'll need to use the top level 'release' script\nto bump the version number, and that will be published to NPM when it is merged to master.\nThis is useful for testing integration in another application.\n\n## Local CDN Server\n\nSince it is still annoying to have to publish to NPM to debug changes in your app, \nthere is a simpler way, which is to host the entire monorepo on a local\nwebserver. For convenience, you can use the `yarn dev-server` script in the top\nlevel of the repository. Then, instead of linking to NPM as described above, you\njust link to the assets you need in the dist/ directory of the package. Eg.\n\n    <link rel=\"stylesheet\" href=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.css\" />\n    <script type=\"module\" src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.esm.js\"></script>\n    <script nomodule src=\"http://localhost:8082/packages/web-components/dist/web-components/web-components.js\"></script>\n    \nWill load the web-components from your local package. You will need to do a\n`yarn build` to reflect your latest changes since the server started.\n    \n## Using Local React / Angular components\n\nThis is possible by using `yarn link` in the `web-components`,\n `react-components`, or `angular-components` package directories. \n\nThen in your app repo, use `yarn link @unifyux/web-components` to use the local version.\n\n## Resources\n\n* [Stencil Tricks] (https://medium.com/stencil-tricks)\n* [Testing Stencil] (https://medium.com/@tally_b/testing-stenciljs-components-3a48cd209dce)\n* [Cross Browser Testing] (https://medium.com/vincent-ogloblinsky/cross-browser-testing-your-stencil-web-component-like-a-boss-93c1b154bfd9)\n* [Open WC browser testing guide] (https://open-wc.org/testing/#setup)\n* [Karma testing web components] (https://open-wc.org/testing/testing-karma.html#getting-started)\n* [Input validation with Stencil] (https://medium.com/@sebastien.lubineau/input-validation-with-stenciljs-f464644545c8)\n","readmeFilename":"readme.md"}