{"_id":"@kyndryl-design-system/web-components","_rev":"50-3b5a4a504cb9d58d453e3354e853b6d1","name":"@kyndryl-design-system/web-components","dist-tags":{"latest":"1.0.0-beta.19","beta":"1.0.0-beta.55"},"versions":{"1.0.0-beta.19":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.19","_id":"@kyndryl-design-system/web-components@1.0.0-beta.19","maintainers":[{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"8e7d77a97808efac1a80f427184ac0a7e5176740","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.19.tgz","fileCount":35,"integrity":"sha512-Lc1cbO5WNKssqJdAD7PWlvgeDPR1k2DcJI6X/9StEkymV47gbjwQHwf6x/qv2qedNDdlDxU+qiCQAu9ccViSmQ==","signatures":[{"sig":"MEQCID3P56HeEzG/szWK+ZNF2XansO1LcO35rVPeVsvnX/Y4AiAePDC4goWrxHzjAnGzwdqIoaQ9SEy+GK9cOYtyrhBaqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393751,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkc4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUAQ/7B7c3VVYgBBduC+/rGU/nRA/o/MZskBfjOkg1CmrWC2jY5X2v\r\nXVgXtdQpJSjLAa1loVxnYiwfXE9k+IEUtViQ45h+ERoJvB7RsAntz3bgaQp9\r\nB6rQO3rQs3K2Jhp3YkUHIvwL/YgKpPugdtNhTyeKWYFI3zOKWOUqsYh7YXeR\r\nlOSfDUBl+pO7wBHRDfXB9P18s+PXvtmzSvFbqZ8eRKazXmGz1NgXoueZNFqG\r\n6aHO9I7Xwn9TgE5xjKQ5MvcnAY9gl/NN3AcD4emD7knYOD/cf6MUV8yvE3wO\r\naf73RyjSdl2zhQ6GkiRli+otdyzrVj+QHf4QEKtHzoPQ+P4FC6d82o2dnK1Q\r\nRCE2zwN0X47nHpSCChGK4sFIE7TBbi+O2HiShvrp9bKuWmcQDwp4ZpeOGI/W\r\nTKUhJirAMVvmi32LlwHPL9/0mJ6jFuza5SMW89gMcVBM6Mr2+w5rJlK+A8JB\r\nCTaJ7cQe+j84ZwzVcX+/EPIo8JPY/pQSiULi6ivSfsPN5SDGBdbPpaisY9gD\r\nLUtHpeW7rxXLpyhhUyZjZscRCwE1SSzYHPzNi5fUjHXDVVnhiio4279+vee3\r\nk7xqLThkSaPpk2VDDgAK8Iy3N/Zt5YY2NHk9PyB5yIzpTSH6S2eTPDZbp1NK\r\nVORoHmaTpCozurp08mVxIgm2pk/dyfqpaI8=\r\n=1zpx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","type":"module","types":"./index.d.ts","gitHead":"dcb6f50dffb32c3ddaf2914cefbbc78d4c07c328","scripts":{"lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages --source-branch main","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.5.0","description":"[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.15.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.0.0-beta.30","css-loader":"^6.7.3","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.0.0-beta.30","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.0.0-beta.30","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.0.0-beta.30","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.10","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.0.0-beta.30","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.0.0-beta.30","@typescript-eslint/parser":"^5.48.1","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.0.0-beta.30","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.0.0-beta.30","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.0.0-beta.30","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.19_1678395192521_0.843744205404575","host":"s3://npm-registry-packages"}},"1.0.0-beta.20":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.20","_id":"@kyndryl-design-system/web-components@1.0.0-beta.20","maintainers":[{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"a29fe8fe5caa7e4abc1dfa58f27c43147afae204","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.20.tgz","fileCount":81,"integrity":"sha512-wkdTNNs90hYPCSHFl8rewqn+4xqH2tZkObNl3AC8k6Kq5F2foRHVzwCPwkW5D9gys4DMZbdKALpgEBWr0Oeb4Q==","signatures":[{"sig":"MEUCIGC3beqR7qxfKf3vxZ3LasqpsCaFm6VYt55cmWso2PApAiEA0m0bSl6N635osLBRGQxMO9Wrn3QNFsUOCB83l9CW/ow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":301960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD8FPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq3hAAlltY2GAT7iP0Ak2QZ+NveLAeQ96ykYjyZH1ouz1uKOlZDYur\r\nxVbXeQBQwytgISGr0eZ8VEfWn06vGz8/TN/4Bag9ws6Opez9L7aSiXbgYiMe\r\nPXxRh3QxwhSTMWGBVcRTOb+5Qex3P51odjyVFp7qIPRbd67Vy0qBSJSa4axJ\r\nrUP7OifwM4OLqRIiTOa81dIj4+gPr09EI3rtcSRYsDqVBn7lbk7yUaToK0vl\r\n0r3Jwl/mN/27cdaD/88lqcYzBUHkJCk5im2qYbGz1idJAdxUTS+NK52M77zV\r\n24rkGMw9MesS2ePtWUTX2zv7LD/7Twa5ifYAdHbT6dSHtaN4ahhWnb/c3Ns4\r\nXC5Kz0Spc2y4xm978u9wDLLl1Ww0z7F0OkuzuRp4iI/dA9W4N7QVgHoP9GjZ\r\nd081zKBV2vfcvS5/BOlnXYRW3WvkB/TkmZGkwFRoUzkwuJZFAX+b477/J+kA\r\n3x+K8d9KONUb7PmiFJLPm3qROutKSS2UGvnSH7X0vmdAx/MugKJ8vHg/Xit0\r\nJ4n3aKe+1joOL06e5Nr+lh4s5os6X53OlzfFgjuxWLMc2ZPRb43lUx7Fa3JL\r\nntzY/n5wf2KkMi+s3cT5r74ENxGYCZ238aU4zwDXRQCFgZjcW3uBEFYExhn4\r\nNrIpci8mtn+kZnHw08XUuX6rnLZFBSo+MIA=\r\n=xUu+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n<!-- ## Configure your environments to enable installation of packages from the GitHub Enterprise npm package registry.\n\nThis is necessary as long as we serve our packages from a private registry. Eventually we will probably move public and will be able to skip this.\n\n1. Create a [Personal Access Token](https://github.kyndryl.net/settings/tokens) with `read:packages` permission.\n   1. Save the generated token somewhere safe for the next steps.\n   2. Do NOT commit this secret to your project repository.\n2. Create a `.npmrc` file in your project root with the following content:\n\n   ```\n   //npm.github.kyndryl.net/:_authToken=${GH_TOKEN_PACKAGES}\n   @kyndryl-design-system:registry=https://npm.github.kyndryl.net\n   ```\n\n3. Local Dev: Set up the Personal Access Token in your local environment.\n   1. Add this step to your project's README.\n   1. Create an environment variable, named `GH_TOKEN_PACKAGES`, for whichever os/shell you are using locally.\n      1. Git Bash example: Add a `.bashrc` file to your user home directory with the content: `export GH_TOKEN_PACKAGES=<your-token-here>`\n      1. You will have to restart your shell/terminal after.\n4. Automated Builds: Set up the Personal Access Token in your CI environment. This example is for GitHub Actions.\n\n   1. Create a new repository secret at: `https://github.kyndryl.net/<your-project-path>/settings/secrets/actions/new`\n   1. Name the token `GH_TOKEN_PACKAGES`.\n   1. Paste in the token you generated previously to the Secret field.\n   1. Update your actions workflow file (.yml) to use the new secret/env var:\n\n      ```yml\n      env:\n      GH_TOKEN_PACKAGES: '${{ secrets.GH_TOKEN_PACKAGES }}'\n      ``` -->\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n```\n\n## Import the root.css to your app's global styles\n\nThe method used (JS Import, CSS import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```\n@kyndryl-design-system/web-components/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of [tokens/variables included in root.css](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/1761e8524349e06f97c8cc4c7606a985f8c4bc7c/src/root.css#L29) such as `--header-height` to pad the body for the fixed position header, `--spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n**Example:**\n\n```js\nimport { Button } from '@kyndryl-design-system/web-components';\n```\n\n```html\n<kyn-button>Button</kyn-button>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"7f9b42dd419194882c18ad4aac22fd0a37bd891e","scripts":{"lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages --source-branch main","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.5.0","description":"[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.15.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.0.0-beta.30","css-loader":"^6.7.3","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.0.0-beta.30","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.0.0-beta.30","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.0.0-beta.30","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.10","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.0.0-beta.30","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.0.0-beta.30","@typescript-eslint/parser":"^5.48.1","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.0.0-beta.30","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.0.0-beta.30","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.0.0-beta.30","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.20_1678754127613_0.22941094823952146","host":"s3://npm-registry-packages"}},"1.0.0-beta.21":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.21","_id":"@kyndryl-design-system/web-components@1.0.0-beta.21","maintainers":[{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"dab7b05de8ffd89b2f0d0332c0d574b9202696fa","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.21.tgz","fileCount":81,"integrity":"sha512-dV4EpApsOcHNou346Nt8hyLzQJOaHiBAgrtHftyBy/bsWm9OoVlO9TDUEMEciKSIlBMX+/yB/el0o3e06LQQlQ==","signatures":[{"sig":"MEUCIGaTIrckKUJ0Q5gOhOCivW5SVzr091BIcXjqF3cdj233AiEAo2usoRdZ6pWoyTzzcrJx0bjDjbZn3m75H43gwZ+63jM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":295198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD8hsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpD0g/+PonrrEcxCYvxC9T4Hhqjcsyh8JBGmTS1cBMLMqb7ftjfJfsn\r\nu83nLXJcbK1ZuD/Ta2bXDkzzG7PmFlxyR/djAmwADmlMX1+83IUT54CfCjPg\r\n1lXwknR6FAnmSHrDdZAwwxijE3s8TK6fTJb9lf2kNhcmg6O7y61RRpLx/rhn\r\nhwKxJIS3Wa7O2+W1UIdyEWLB2E3ebnsHqgrN2ehOZ8IhqvbN3XcR0y8uNb4r\r\ntCHw1kHESGjF7mLXOjUc0SSIVvRNLFnl/X87jbNbqkc3fIi6hv0iVovYIel+\r\nFWfJDm8FKOJqh/60Dd2UD/ZxRMHXBivBcbYY7pjqLSAQr1nXgFFSLcl3MZ35\r\nUchvT3v3EWFbDWTxwwep+aF2ISQLbS4wsDYt8oJprCLfbhze9mxlgLE97mYM\r\nT91+XxrN+HFFleJgbFBfrCJAIiNv63G4BuwsmmWuudYqV2CPz8K+BYXYt7d7\r\nRsFJp83bA+SHyCEcMXc1c4kizGi3sr8a47HjVsgJwVCtjMN5KDDWQZcXTECC\r\n+hlGBPI1XsJ26JtCLv1wvrq33vgH7jq1mC9P+4qp7H5v+w/MXthmJ3ZzTWMT\r\nPpPkiK9KlR+xgfrBPePBM0SyEv8pM/MqaxcSUCJeCwPuVL88gLeaCb0TuYz1\r\n2wrDTDjVD+znSQ+U1BYrNTxesvyWbOQtooA=\r\n=1pjP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n<!-- ## Configure your environments to enable installation of packages from the GitHub Enterprise npm package registry.\n\nThis is necessary as long as we serve our packages from a private registry. Eventually we will probably move public and will be able to skip this.\n\n1. Create a [Personal Access Token](https://github.kyndryl.net/settings/tokens) with `read:packages` permission.\n   1. Save the generated token somewhere safe for the next steps.\n   2. Do NOT commit this secret to your project repository.\n2. Create a `.npmrc` file in your project root with the following content:\n\n   ```\n   //npm.github.kyndryl.net/:_authToken=${GH_TOKEN_PACKAGES}\n   @kyndryl-design-system:registry=https://npm.github.kyndryl.net\n   ```\n\n3. Local Dev: Set up the Personal Access Token in your local environment.\n   1. Add this step to your project's README.\n   1. Create an environment variable, named `GH_TOKEN_PACKAGES`, for whichever os/shell you are using locally.\n      1. Git Bash example: Add a `.bashrc` file to your user home directory with the content: `export GH_TOKEN_PACKAGES=<your-token-here>`\n      1. You will have to restart your shell/terminal after.\n4. Automated Builds: Set up the Personal Access Token in your CI environment. This example is for GitHub Actions.\n\n   1. Create a new repository secret at: `https://github.kyndryl.net/<your-project-path>/settings/secrets/actions/new`\n   1. Name the token `GH_TOKEN_PACKAGES`.\n   1. Paste in the token you generated previously to the Secret field.\n   1. Update your actions workflow file (.yml) to use the new secret/env var:\n\n      ```yml\n      env:\n      GH_TOKEN_PACKAGES: '${{ secrets.GH_TOKEN_PACKAGES }}'\n      ``` -->\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n```\n\n## Import the root.css to your app's global styles\n\nThe method used (JS Import, CSS import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```\n@kyndryl-design-system/web-components/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of [tokens/variables included in root.css](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/1761e8524349e06f97c8cc4c7606a985f8c4bc7c/src/root.css#L29) such as `--header-height` to pad the body for the fixed position header, `--spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n**Example:**\n\n```js\nimport { Button } from '@kyndryl-design-system/web-components';\n```\n\n```html\n<kyn-button>Button</kyn-button>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"1a1273b205b97d907f77ac4053afe82be31e8962","scripts":{"lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages --source-branch main","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.5.0","description":"[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.15.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.0.0-beta.30","css-loader":"^6.7.3","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.0.0-beta.30","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.0.0-beta.30","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.0.0-beta.30","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.10","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.0.0-beta.30","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.0.0-beta.30","@typescript-eslint/parser":"^5.48.1","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.0.0-beta.30","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.0.0-beta.30","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.0.0-beta.30","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.21_1678755948173_0.9715044385527383","host":"s3://npm-registry-packages"}},"1.0.0-beta.22":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.22","_id":"@kyndryl-design-system/web-components@1.0.0-beta.22","maintainers":[{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"43602b5c767072971a728d70a13611ae9712fb67","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.22.tgz","fileCount":35,"integrity":"sha512-ROuTSoIvfk2rixNPG0eVC4WwMzq119bGMWXPCO9WyKpZHI/QgTp8ncAb97HCg0xP9l21UfFbB++Pke2PvVhovQ==","signatures":[{"sig":"MEUCIFo2rYfsaIpgQddNselT6maCq7rrAubZhRQmvPCXpc/+AiEA8PXDrpunmxmvl3r2PUlSnXfz4nEMUbHo8iI41at7SLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":393760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD9GNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxZA//T1+CY0mcTWKshFfBfC+6ro5HNXeq/4d9uqGD9Zhaen/udmZr\r\nDu62XLH4f3D1yiPi0O/ibLzMGU4UkVcYTawTinXeF6/hBUkerqbvo0FG3M5V\r\ngKTU3PAFHgYwUX+rJZdrAXPhnwr/v/XC+r/mm+1BOLmoojBJaMMBf/j5fORo\r\nA05kL+dHQm2zSCW5h3CWhRFwbWoQGXLYACSqs8Zi021gT3Eiko1LcFmWP4eG\r\nheCoZG8ql4minPMAnTJwHBpYQhpQIQ6r42jzpUhzH7h5NC/omEnTr//YItmM\r\nPoQD/Fo3OK5mqw6NKxLbYY7sWz1WTweFTqEGXuCaUVb+f2Ob4c8HtqZsrs17\r\nu9XQvcAw9kMvyay2lpJUoSr4SmXgMO0z5+CwXF6fzP6yGEY8Tz5ME/ReCHP9\r\nYVQBLt3IBvULKEq77hbnVQYj1LWzm3N7xfGK8CyNtRbYeVgbSyNv2sJUyPrF\r\nuwE/I+B2FzbIbaanyHvfU+iIpOuDirS2Rdp4aMasYnx9iacwvSCfyonqugIY\r\ngDtJFoiBGrD1J5Tj/TaHX9CV+CdCSMbMTUBF56MPQKWhQj89saELurlyKQ29\r\nv0cSGgULdeVNtjM+/s+lXjN8DqFA97Ph8IH6uafBtZSf0rp6e5Y1xNYqKozS\r\nZtCIjv1nCz/xKzoSKih+2BaBU6LqfThpYYw=\r\n=gc10\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n<!-- ## Configure your environments to enable installation of packages from the GitHub Enterprise npm package registry.\n\nThis is necessary as long as we serve our packages from a private registry. Eventually we will probably move public and will be able to skip this.\n\n1. Create a [Personal Access Token](https://github.kyndryl.net/settings/tokens) with `read:packages` permission.\n   1. Save the generated token somewhere safe for the next steps.\n   2. Do NOT commit this secret to your project repository.\n2. Create a `.npmrc` file in your project root with the following content:\n\n   ```\n   //npm.github.kyndryl.net/:_authToken=${GH_TOKEN_PACKAGES}\n   @kyndryl-design-system:registry=https://npm.github.kyndryl.net\n   ```\n\n3. Local Dev: Set up the Personal Access Token in your local environment.\n   1. Add this step to your project's README.\n   1. Create an environment variable, named `GH_TOKEN_PACKAGES`, for whichever os/shell you are using locally.\n      1. Git Bash example: Add a `.bashrc` file to your user home directory with the content: `export GH_TOKEN_PACKAGES=<your-token-here>`\n      1. You will have to restart your shell/terminal after.\n4. Automated Builds: Set up the Personal Access Token in your CI environment. This example is for GitHub Actions.\n\n   1. Create a new repository secret at: `https://github.kyndryl.net/<your-project-path>/settings/secrets/actions/new`\n   1. Name the token `GH_TOKEN_PACKAGES`.\n   1. Paste in the token you generated previously to the Secret field.\n   1. Update your actions workflow file (.yml) to use the new secret/env var:\n\n      ```yml\n      env:\n      GH_TOKEN_PACKAGES: '${{ secrets.GH_TOKEN_PACKAGES }}'\n      ``` -->\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n```\n\n## Import the root.css to your app's global styles\n\nThe method used (JS Import, CSS import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```\n@kyndryl-design-system/web-components/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of [tokens/variables included in root.css](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/1761e8524349e06f97c8cc4c7606a985f8c4bc7c/src/root.css#L29) such as `--header-height` to pad the body for the fixed position header, `--spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n**Example:**\n\n```js\nimport { Button } from '@kyndryl-design-system/web-components';\n```\n\n```html\n<kyn-button>Button</kyn-button>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"3c2654d735d2c1ed439430c3da84e58fdfe472da","scripts":{"lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages --source-branch main","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.5.0","description":"[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.15.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.0.0-beta.30","css-loader":"^6.7.3","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.0.0-beta.30","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.0.0-beta.30","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.0.0-beta.30","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.10","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.0.0-beta.30","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.0.0-beta.30","@typescript-eslint/parser":"^5.48.1","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.0.0-beta.30","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.0.0-beta.30","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.0.0-beta.30","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.22_1678758285401_0.6397504756699146","host":"s3://npm-registry-packages"}},"1.0.0-beta.23":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.23","_id":"@kyndryl-design-system/web-components@1.0.0-beta.23","maintainers":[{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"40c7f91b2626ce4f3c72b2b2656d164d43f747a7","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.23.tgz","fileCount":35,"integrity":"sha512-hx9ZHXbKhI5aqW2fccPZS6ro8WY3cCrI7sDQBDXFxMyvMYvXCJLMbyRmMEcYm1A6wYwkKsqEb83TSep7aW6MGA==","signatures":[{"sig":"MEQCIBp1GjKmNhN9Nka0dg6JsqCdeRkSQQ9NzLFJMLdPL7AyAiBwi4/yf/ToLAV9A4BjPh0MyrWc0/IEJkwcf+WNx/Q+3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":392124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD9XrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4hw/+IMTkG9L2JmiRJ5sp8vR8deAmZHfq6a6udM6/tFl4r19y4+MF\r\niWH0JQX1RnCa3pbXVa01+vDSXH2q8BUiOBqb8AhzxNkMvdkF/PWlCx4YHxB+\r\nWnlQCg2MrRWo2YVFqCx1Mz8SeOl9YAjr6ddZtnThvLcT8eixJLjI0vMqlBP2\r\nuGU0KONxN5pzKF80nQ3fJP2v/S4H0F3Zw1zmLs3uiHXu7ZL9dDaFvehw108X\r\nnL1KKHM4YMZU8lyN0RuWOB2v2TIuZsfJw/2HDcIheM3gjPmvFn2j7lsUtAas\r\nQTErdA53jxJeIpYrTz2DDcD4RV69PDLjBVPdvDynOudRYGGL38sF1clHKSpn\r\nv8XMdh7xEHlsiaisGholJf80X+lpyqqX5H/OvIt9JG9qzdis/qrik2zQa5ZI\r\nB4+5DaPvoD8AElIJvi2YlpxEjDCUvH/lGasSImXR5I6T423W8uwXcIyxBwZV\r\nHLof90cVVqUl9zByVkd9zdvM4ja8W+IPuKmX5iZ9WO0q9SvO5U9w5dEKcGBE\r\neEwBtWQTePa80RBQ6grD+pxq1QZOEtDaV6ldHTBTpZP1++/BNgc/ihRD+9qZ\r\nPAF9KYnRDUeLsoieJIs2dmdsxzpHg8SzYrGfR998+1UkKPpfbrY8Y5MuJ8xf\r\n8FstYjhccF2qkPsxNPJnvp1anh1MlDqFxXw=\r\n=9Dtl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n<!-- ## Configure your environments to enable installation of packages from the GitHub Enterprise npm package registry.\n\nThis is necessary as long as we serve our packages from a private registry. Eventually we will probably move public and will be able to skip this.\n\n1. Create a [Personal Access Token](https://github.kyndryl.net/settings/tokens) with `read:packages` permission.\n   1. Save the generated token somewhere safe for the next steps.\n   2. Do NOT commit this secret to your project repository.\n2. Create a `.npmrc` file in your project root with the following content:\n\n   ```\n   //npm.github.kyndryl.net/:_authToken=${GH_TOKEN_PACKAGES}\n   @kyndryl-design-system:registry=https://npm.github.kyndryl.net\n   ```\n\n3. Local Dev: Set up the Personal Access Token in your local environment.\n   1. Add this step to your project's README.\n   1. Create an environment variable, named `GH_TOKEN_PACKAGES`, for whichever os/shell you are using locally.\n      1. Git Bash example: Add a `.bashrc` file to your user home directory with the content: `export GH_TOKEN_PACKAGES=<your-token-here>`\n      1. You will have to restart your shell/terminal after.\n4. Automated Builds: Set up the Personal Access Token in your CI environment. This example is for GitHub Actions.\n\n   1. Create a new repository secret at: `https://github.kyndryl.net/<your-project-path>/settings/secrets/actions/new`\n   1. Name the token `GH_TOKEN_PACKAGES`.\n   1. Paste in the token you generated previously to the Secret field.\n   1. Update your actions workflow file (.yml) to use the new secret/env var:\n\n      ```yml\n      env:\n      GH_TOKEN_PACKAGES: '${{ secrets.GH_TOKEN_PACKAGES }}'\n      ``` -->\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n```\n\n## Import the root.css to your app's global styles\n\nThe method used (JS Import, CSS import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```\n@kyndryl-design-system/web-components/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of [tokens/variables included in root.css](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/1761e8524349e06f97c8cc4c7606a985f8c4bc7c/src/root.css#L29) such as `--header-height` to pad the body for the fixed position header, `--spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n**Example:**\n\n```js\nimport { Button } from '@kyndryl-design-system/web-components';\n```\n\n```html\n<kyn-button>Button</kyn-button>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"3544d807cf21819cc3208dbfbf590b8b781b3b59","scripts":{"lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages --source-branch main","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.5.0","description":"[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.15.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.0.0-beta.30","css-loader":"^6.7.3","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.0.0-beta.30","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.0.0-beta.30","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.0.0-beta.30","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.10","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.0.0-beta.30","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.0.0-beta.30","@typescript-eslint/parser":"^5.48.1","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.0.0-beta.30","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.0.0-beta.30","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.0.0-beta.30","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.23_1678759402839_0.4039997732346281","host":"s3://npm-registry-packages"}},"1.0.0-beta.24":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.24","_id":"@kyndryl-design-system/web-components@1.0.0-beta.24","maintainers":[{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"a137e5a7ecd2fd10b2e1316c7181d17d640c573f","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.24.tgz","fileCount":137,"integrity":"sha512-mw9f6WhJM7M8RFMvMvi1HcCaUEMlQMQU0d1bSUBuFQ9iMfYxVyOaTELv+YjG7ZfjkL05zXIV9oS3N5Ze+ijkwQ==","signatures":[{"sig":"MEUCIQCpBtiEllAxXXvitUttLLHXWDh4bACIGJHOer1rnZ3c/wIgTuGYc2nwLJZSd2MwqSHnP2FhZ9Ehgjpt1ilMlNEJOU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEkoQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrE9Q//S1HaqZaKfmX0lgTu/CDhCtqriubJEf68GRdgbQP/DrfHR1/2\r\n8O+inJ0OHEDHOkDUgWnzVx8OWtjJVKZ2Teeyqgds+ffa7jd7FnFrnDpzkeI6\r\nab75EEDAFsj9WwaQcgEpsT4jxkWzXylHq6lvvoQsLJXkwPtgNEkhJtYHqErg\r\nGWd0SJNUXor843vWaPF+vdhrPc3xOyMKjkGSN2/Y70YYucVGmfyziTpisEUt\r\nGAwn6GYJNWqWSDXRzH8jKl/GceAgp8ZQHI9LVEbRtcjog83m4clRSWGXg73g\r\nnRWbXI/oEkMhoAxYaOBcGlD3aPw6GbEXMbcSreaLa0FS/zA2QTWfARWplDNG\r\nAMJbcwPEPEvZQ8zRrF4/0vMPNbHSMkS3z6/Pb91mus19md6sGbR1kRlsHEia\r\nfD44uIPf9S2x+Xce4wGPbgMi0Cx2zYkGIWvh8F+NIeJ+e9VlJ6zFfqIjyroE\r\n7F4FENj+EJ6vz2gij++yorHDiwxIeFGZy8e7WFmhsjwl7NOH2Eckc7mxyvkT\r\nMtr2IYmoh6AfQD/j5qi4p23Q5mIEkkG/EXqSKOkuu9BPLD5QV7m4cm2XxDL0\r\n745uCEtEl7EnzYsrCpWUrySezUB9/83ul/JQDaqSDOdjHhoObzVZlOosuBdC\r\nEBGHlV2g64CM8LDir56icD7r1o3mA7Jslmw=\r\n=gl4l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n<!-- ## Configure your environments to enable installation of packages from the GitHub Enterprise npm package registry.\n\nThis is necessary as long as we serve our packages from a private registry. Eventually we will probably move public and will be able to skip this.\n\n1. Create a [Personal Access Token](https://github.kyndryl.net/settings/tokens) with `read:packages` permission.\n   1. Save the generated token somewhere safe for the next steps.\n   2. Do NOT commit this secret to your project repository.\n2. Create a `.npmrc` file in your project root with the following content:\n\n   ```\n   //npm.github.kyndryl.net/:_authToken=${GH_TOKEN_PACKAGES}\n   @kyndryl-design-system:registry=https://npm.github.kyndryl.net\n   ```\n\n3. Local Dev: Set up the Personal Access Token in your local environment.\n   1. Add this step to your project's README.\n   1. Create an environment variable, named `GH_TOKEN_PACKAGES`, for whichever os/shell you are using locally.\n      1. Git Bash example: Add a `.bashrc` file to your user home directory with the content: `export GH_TOKEN_PACKAGES=<your-token-here>`\n      1. You will have to restart your shell/terminal after.\n4. Automated Builds: Set up the Personal Access Token in your CI environment. This example is for GitHub Actions.\n\n   1. Create a new repository secret at: `https://github.kyndryl.net/<your-project-path>/settings/secrets/actions/new`\n   1. Name the token `GH_TOKEN_PACKAGES`.\n   1. Paste in the token you generated previously to the Secret field.\n   1. Update your actions workflow file (.yml) to use the new secret/env var:\n\n      ```yml\n      env:\n      GH_TOKEN_PACKAGES: '${{ secrets.GH_TOKEN_PACKAGES }}'\n      ``` -->\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n```\n\n## Import the root.css to your app's global styles\n\nThe method used (JS Import, CSS import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```\n@kyndryl-design-system/web-components/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of [tokens/variables included in root.css](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/1761e8524349e06f97c8cc4c7606a985f8c4bc7c/src/root.css#L29) such as `--header-height` to pad the body for the fixed position header, `--spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"9cc41e38afba6f38e12c6bb331bd790d31c9e562","scripts":{"lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages --source-branch main","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.5.0","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"sideEffects":false,"_nodeVersion":"18.15.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.0.0-beta.30","css-loader":"^6.7.3","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.0.0-beta.30","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.0.0-beta.30","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.0.0-beta.30","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.10","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.0.0-beta.30","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.0.0-beta.30","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.0.0-beta.30","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.0.0-beta.30","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.0.0-beta.30","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.24_1678920207753_0.10143942450748411","host":"s3://npm-registry-packages"}},"1.0.0-beta.25":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.25","_id":"@kyndryl-design-system/web-components@1.0.0-beta.25","maintainers":[{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"b8a29d368e9bcfc048ba3b4be7d78a99696ea06f","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.25.tgz","fileCount":137,"integrity":"sha512-KtlAAJKCKV3lPeZSUAUtMi4nAnZwdVsiAh8xaU3o6dP+zPIZWoS87agNPgljgFJWn8aH4A1znJlsHOCTyIM/cA==","signatures":[{"sig":"MEUCIDD4laHITk+ngHUDddIHsJaJQSvN5502pAP/n7UoWYNqAiEA0nvM+VxlqMSRLBWPtBnIuSwNODXbVGCFPv2yxwSs5uM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkElCoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUAg/9FTYR+hAS5BsMR4f2CoxCI79jKSms/NH0egXSMF3EDPt6x25l\r\nsBCjy0ujcmyvvlSibNgpIR9YEIfB7bz30VeiXm9pX9LzuSINaI7bXmPta1i0\r\nXlwHFK9bOPXchTrI8JyGI0IjwJtokrGRsHaFpa+PNomou1CSrQ5D+SrYFOEx\r\nfUdAHZpSrcwj+dxNyX0R0hbPVvy3kEGjDkiJL+TExx0UMC/auemw+GRJuEu0\r\n5J2dNjvu/d6h4Sres+ed+4AxN4C8eGWTvKfZNbTQSCPmBIr44q+wNKcT+sJY\r\n8jhigvGtUQqsKoVnAL16uvW39BFBK4cNP9EwcqPNF5qzzBim3m2C21LqveWC\r\nDEwBC83L7zhbJndPRAGcCuh3ULxBXZqcVeVGsKavRzqGcnGBM5heLQKHG+rS\r\n/CVCl+FqsLgKdo3Fyf+0W+Ra+HkTDujBMigoYkL3vOSqtcn0deXTs+pXPZfR\r\nSK995KLd21Spow/J1Xe0uLakvxW5iBF51D+nG+FroIeKKduwIbp4tnSD36Db\r\nvTBPT/WjSRPWmxyTkYdaSZLaPb8qR06Wj1MUzL8mE6TcrGbD8+VC4ZWygRSW\r\nsM4T1Y4DWPBW93qyHRBv7Qy09GKYN7rpZmpzlcUrh7R4S3nnCftchDrvaihA\r\nAtB01VzMxSPBKoAjbfstZKd+FTIeKlyuPO4=\r\n=Coly\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n<!-- ## Configure your environments to enable installation of packages from the GitHub Enterprise npm package registry.\n\nThis is necessary as long as we serve our packages from a private registry. Eventually we will probably move public and will be able to skip this.\n\n1. Create a [Personal Access Token](https://github.kyndryl.net/settings/tokens) with `read:packages` permission.\n   1. Save the generated token somewhere safe for the next steps.\n   2. Do NOT commit this secret to your project repository.\n2. Create a `.npmrc` file in your project root with the following content:\n\n   ```\n   //npm.github.kyndryl.net/:_authToken=${GH_TOKEN_PACKAGES}\n   @kyndryl-design-system:registry=https://npm.github.kyndryl.net\n   ```\n\n3. Local Dev: Set up the Personal Access Token in your local environment.\n   1. Add this step to your project's README.\n   1. Create an environment variable, named `GH_TOKEN_PACKAGES`, for whichever os/shell you are using locally.\n      1. Git Bash example: Add a `.bashrc` file to your user home directory with the content: `export GH_TOKEN_PACKAGES=<your-token-here>`\n      1. You will have to restart your shell/terminal after.\n4. Automated Builds: Set up the Personal Access Token in your CI environment. This example is for GitHub Actions.\n\n   1. Create a new repository secret at: `https://github.kyndryl.net/<your-project-path>/settings/secrets/actions/new`\n   1. Name the token `GH_TOKEN_PACKAGES`.\n   1. Paste in the token you generated previously to the Secret field.\n   1. Update your actions workflow file (.yml) to use the new secret/env var:\n\n      ```yml\n      env:\n      GH_TOKEN_PACKAGES: '${{ secrets.GH_TOKEN_PACKAGES }}'\n      ``` -->\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n```\n\n## Import the root.css to your app's global styles\n\nThe method used (JS Import, CSS import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```\n@kyndryl-design-system/web-components/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of [tokens/variables included in root.css](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/1761e8524349e06f97c8cc4c7606a985f8c4bc7c/src/root.css#L29) such as `--header-height` to pad the body for the fixed position header, `--spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"fd15b24a7337863d5a88815b675a773a14e20200","scripts":{"lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages --source-branch main","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.5.0","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.15.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.0.0-beta.30","css-loader":"^6.7.3","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.0.0-beta.30","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.0.0-beta.30","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.0.0-beta.30","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.10","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.0.0-beta.30","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.0.0-beta.30","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.0.0-beta.30","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.0.0-beta.30","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.0.0-beta.30","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.25_1678921896402_0.9955483040536057","host":"s3://npm-registry-packages"}},"1.0.0-beta.26":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.26","_id":"@kyndryl-design-system/web-components@1.0.0-beta.26","maintainers":[{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"4140f00d164e35244ec8d85bd1772d7a875114e1","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.26.tgz","fileCount":137,"integrity":"sha512-SBrs62SpUwIex4RvnndJmga/IYABqKs1XQSG7g1RndC8wQShAM6SGnsSAtf/Nz3l9yN/CoRgDjEqnBzrMwtAbw==","signatures":[{"sig":"MEUCIQCcKWYabj3y72FeN3DJaQFRxrQHxkO6BepXLBCPQMGrJgIgCWU7gKgEFrdyqY6F8YU0NGB9qfMjeqg6/1u6ouvmnbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEy50ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt7Q/9F4JZe7mXvnupqG410ykFiMuu9nO21LNBnJxqkRrHbQkMgrog\r\naCUCJJU+nikBTNz017ajnLlwhpb3kkCzSISxUzlXJlyhIKwVffVdPZ8MUr2A\r\nIwFmXoOb+dYHov1A0346WPyZ+/6EnD1TE9gx8HvV9RKjdiW3YB7/x8tdwJev\r\nTJcbq1EzJCic0OtTrHtLHapdorq59E5gIAdMXrlwDENCNcjCd/cqfc1DbKi2\r\n3sdNvaTbJvwPMWTdiJDVWK0tJOMskhqaBNeCyqUYiMMQRG51hnUGtItk+1mr\r\nUkWeEV8EFkS8KinKZ4op7uHxpld6FRUKn59oBiDMShhQTEtR4tA7FtkD/Q3C\r\neeuw4ebUEk1pZFhFsuABqRddEg9b3r+d1dYaQYnjws3V5mjoYqJKyZVXuyAI\r\nfY7idsLKgqUZV9wIrPq1u2AqJp9Ze2r24Xm2YgvGr0395MAEoKVSMS6RX2tz\r\n+nLPE4sLADVecyY4Qc3K6iVGT4IbnCPW/cB0l3qkzDCXno5qvQGw3lLLZon9\r\nn+Otss7WgY/ppJBIyIUoeLGYefvdP6rNZ/hg+xP3vdIPIScHF9hQyiyKxrrp\r\nVTGl2qJ3rc718lVSx8FyxqQE8awZZYbkj65tRWsMzianhwYOd7MJEzVx8Eh0\r\n0J1SzOw5DHcAnTW70M0twaQgpVuptMgbfCE=\r\n=uX79\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n<!-- ## Configure your environments to enable installation of packages from the GitHub Enterprise npm package registry.\n\nThis is necessary as long as we serve our packages from a private registry. Eventually we will probably move public and will be able to skip this.\n\n1. Create a [Personal Access Token](https://github.kyndryl.net/settings/tokens) with `read:packages` permission.\n   1. Save the generated token somewhere safe for the next steps.\n   2. Do NOT commit this secret to your project repository.\n2. Create a `.npmrc` file in your project root with the following content:\n\n   ```\n   //npm.github.kyndryl.net/:_authToken=${GH_TOKEN_PACKAGES}\n   @kyndryl-design-system:registry=https://npm.github.kyndryl.net\n   ```\n\n3. Local Dev: Set up the Personal Access Token in your local environment.\n   1. Add this step to your project's README.\n   1. Create an environment variable, named `GH_TOKEN_PACKAGES`, for whichever os/shell you are using locally.\n      1. Git Bash example: Add a `.bashrc` file to your user home directory with the content: `export GH_TOKEN_PACKAGES=<your-token-here>`\n      1. You will have to restart your shell/terminal after.\n4. Automated Builds: Set up the Personal Access Token in your CI environment. This example is for GitHub Actions.\n\n   1. Create a new repository secret at: `https://github.kyndryl.net/<your-project-path>/settings/secrets/actions/new`\n   1. Name the token `GH_TOKEN_PACKAGES`.\n   1. Paste in the token you generated previously to the Secret field.\n   1. Update your actions workflow file (.yml) to use the new secret/env var:\n\n      ```yml\n      env:\n      GH_TOKEN_PACKAGES: '${{ secrets.GH_TOKEN_PACKAGES }}'\n      ``` -->\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n```\n\n## Import the root.css to your app's global styles\n\nThe method used (JS Import, CSS import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```\n@kyndryl-design-system/web-components/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of [tokens/variables included in root.css](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/1761e8524349e06f97c8cc4c7606a985f8c4bc7c/src/root.css#L29) such as `--header-height` to pad the body for the fixed position header, `--spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"a85aa233aa69ce2350f57000b7acfbc2f422d35f","scripts":{"lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages --source-branch main","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.5.0","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.15.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.0.0-beta.30","css-loader":"^6.7.3","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.0.0-beta.30","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.0.0-beta.30","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.0.0-beta.30","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.10","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.0.0-beta.30","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.0.0-beta.30","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.0.0-beta.30","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.0.0-beta.30","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.0.0-beta.30","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.26_1678978675869_0.8775723339195416","host":"s3://npm-registry-packages"}},"1.0.0-beta.27":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.27","_id":"@kyndryl-design-system/web-components@1.0.0-beta.27","maintainers":[{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"cd955b87561405d222d59d2cf7c3b2d7960e9223","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.27.tgz","fileCount":137,"integrity":"sha512-Ii445l1iKvdUolqnV481ISdZlLzWtLobsaOX6n7oTU3eCyTh0CV3FCpk0jzit82m1oIusTwYdvCwP699Kp2GAA==","signatures":[{"sig":"MEYCIQDjML3mMgFwvWjqC8a2mVjgeRzSf1d6QQ/19kvku4IMewIhALXXJ8ZsiVc7JKj5q+IjecKVrDHz9pQYDfKbIn9DFoAW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkG0ZRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIIQ/+KRfVpnTyvkTgi5lPgN4gFXI1kLQCo70iYY/uoy93UF1i18ut\r\n6L3WIuaCuRINvZSnsaiROf/zfl+1+cyyFih4NofgIryAdTO1FqRnobzpXKVm\r\n4RgS5EsRRgrkAZNNQfPwSvfv2FJROrq5AZHlv0nibumpdIcL1t6PF287dJNa\r\nuhrO2DbBhY2vDPzmq+ZSU3Bwq3Nufnai3WKDREKZWkA546mI++ZZMEQJ6HL9\r\nTHKQt2YfbswimYOLTNcZRD9Hoe3lQs4HuWfXxvOOSESV8ZJ0fTDZ6nR9KVt+\r\nESPYe1PM6if0/NFPR0mTtbDcYDK0TqeoppY11LYTA1sZ7ab83KItPcu5ap7H\r\nmWrhPy2iVdDIpMOvUtwykg+SMqYiFOFjZBhAHBbJMYzWOiYiHlNULy37zoX9\r\nwDzl22/Zn8vh5MdiNMLJA9B7pppFSbCk7GnJXw7x5E2r8R8gEVz9+25iuoQi\r\nM+ocLq82PrPKRU7EMbHl+E/f5IeQpaEj5WCQLp/ob7Yy3evdh/mI5qpNg+PP\r\nitclJPqsGVnX51wyv/7Y0LpFLUG+Np7nBrPLbdQgGjWALqnBeWPp9z1tFElv\r\n8HpeCZsnZwN4V6InQrjw/4nKVuLxdiGG5QJgqtrG6lSKEULbGiCaK+EjzdKt\r\nHnQ6a4L2j2ccnkMBxtebOixpLPp8fAULjvY=\r\n=1yQL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n<!-- ## Configure your environments to enable installation of packages from the GitHub Enterprise npm package registry.\n\nThis is necessary as long as we serve our packages from a private registry. Eventually we will probably move public and will be able to skip this.\n\n1. Create a [Personal Access Token](https://github.kyndryl.net/settings/tokens) with `read:packages` permission.\n   1. Save the generated token somewhere safe for the next steps.\n   2. Do NOT commit this secret to your project repository.\n2. Create a `.npmrc` file in your project root with the following content:\n\n   ```\n   //npm.github.kyndryl.net/:_authToken=${GH_TOKEN_PACKAGES}\n   @kyndryl-design-system:registry=https://npm.github.kyndryl.net\n   ```\n\n3. Local Dev: Set up the Personal Access Token in your local environment.\n   1. Add this step to your project's README.\n   1. Create an environment variable, named `GH_TOKEN_PACKAGES`, for whichever os/shell you are using locally.\n      1. Git Bash example: Add a `.bashrc` file to your user home directory with the content: `export GH_TOKEN_PACKAGES=<your-token-here>`\n      1. You will have to restart your shell/terminal after.\n4. Automated Builds: Set up the Personal Access Token in your CI environment. This example is for GitHub Actions.\n\n   1. Create a new repository secret at: `https://github.kyndryl.net/<your-project-path>/settings/secrets/actions/new`\n   1. Name the token `GH_TOKEN_PACKAGES`.\n   1. Paste in the token you generated previously to the Secret field.\n   1. Update your actions workflow file (.yml) to use the new secret/env var:\n\n      ```yml\n      env:\n      GH_TOKEN_PACKAGES: '${{ secrets.GH_TOKEN_PACKAGES }}'\n      ``` -->\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n```\n\n## Import the root.css to your app's global styles\n\nThe method used (JS Import, CSS import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```\n@kyndryl-design-system/web-components/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of [tokens/variables included in root.css](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/1761e8524349e06f97c8cc4c7606a985f8c4bc7c/src/root.css#L29) such as `--header-height` to pad the body for the fixed position header, `--spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"afedcda3e01fa087d422f12c4b575836317dec5e","scripts":{"lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages --source-branch main","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.5.0","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.15.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.0.0-beta.30","css-loader":"^6.7.3","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.0.0-beta.30","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.0.0-beta.30","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.0.0-beta.30","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.10","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.0.0-beta.30","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.0.0-beta.30","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.0.0-beta.30","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.0.0-beta.30","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.0.0-beta.30","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.27_1679509073497_0.0005842632703687567","host":"s3://npm-registry-packages"}},"1.0.0-beta.28":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.28","_id":"@kyndryl-design-system/web-components@1.0.0-beta.28","maintainers":[{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"fdf5f9212437348ef55538bd4100998efcf8d0c5","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.28.tgz","fileCount":159,"integrity":"sha512-dNxlSuHu2xt0XoqgiMPxmf0Te02d6kv12kxmARIrRFR1KNogQbFYrmoIvFkiwkfWVvnCSHLzAfI65EeWJdmX4w==","signatures":[{"sig":"MEQCIB3cAhzPh13N6UKnwrVyo0WNFaM6uwD8oNk/J+E2m+TOAiAjvtBwraJovox3OcvRBia5VDoV93WPM4C2DDbLizUd4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":436877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLEh3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr08Q//a7g4mELLhsQOyyRPW/13Fz7Er8EuV/rP/QibTcr6J9gjuwL/\r\nO/99vJHyKLue/L1PmtL0ZMRd1FWo/uu9t/Xbsn9QJ/AJuE0VeEcRlAGx18Ac\r\n9/V7xvR2X6TYQnSxAeMM+PeV2K4U5cyz4yb8AgAaHQKAOq+/lH2h7RJ/rTjj\r\nny7t3OEbaJtEciSpY9jNe2kgky/V+64dS1H97GI/na1LVAttjdRdLyBYqX5N\r\nVuBU6iAku0I870jfR27qQYITDWTKwh7iqtP+xV2/am4pJubpcKgJeX8sjWKj\r\ni7Rc6UXXHptpy2Pu7iqmWPgYqpfrW1PGB4RtATunrh+vtZogAyUggm80H0bx\r\nupWBXMfF0QBV6XhbsFGD30yoCcus6xNDU7H7ym1RRpE8Ur7iCys7MMUIq9/G\r\nPNuGuS5jHJKe4JD4y6yzESwK6Wu3VKXei3BCT52Nr91L4KdhwnUKNFg5Jv+T\r\nWnZAUgSKBb60G6rZfAVKs42OzjW22c5FOR0XQtNZb2tDPBnQuEXWRdaNxbn+\r\noHock/fY8jWPk6j2HtKPldOVMmOrUKEiOxv2llE2pn0n1s/KRXmx1ndzMrkb\r\noKhfnwGs8DkNpZnu5yqGu2jKqSirQeWcOIsK28yEFqAz/12ti08jDqHVsji0\r\ny3uYSauuWHsIAdGRcFpLYr3iruZJUe85MSs=\r\n=3mF9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n<!-- ## Configure your environments to enable installation of packages from the GitHub Enterprise npm package registry.\n\nThis is necessary as long as we serve our packages from a private registry. Eventually we will probably move public and will be able to skip this.\n\n1. Create a [Personal Access Token](https://github.kyndryl.net/settings/tokens) with `read:packages` permission.\n   1. Save the generated token somewhere safe for the next steps.\n   2. Do NOT commit this secret to your project repository.\n2. Create a `.npmrc` file in your project root with the following content:\n\n   ```\n   //npm.github.kyndryl.net/:_authToken=${GH_TOKEN_PACKAGES}\n   @kyndryl-design-system:registry=https://npm.github.kyndryl.net\n   ```\n\n3. Local Dev: Set up the Personal Access Token in your local environment.\n   1. Add this step to your project's README.\n   1. Create an environment variable, named `GH_TOKEN_PACKAGES`, for whichever os/shell you are using locally.\n      1. Git Bash example: Add a `.bashrc` file to your user home directory with the content: `export GH_TOKEN_PACKAGES=<your-token-here>`\n      1. You will have to restart your shell/terminal after.\n4. Automated Builds: Set up the Personal Access Token in your CI environment. This example is for GitHub Actions.\n\n   1. Create a new repository secret at: `https://github.kyndryl.net/<your-project-path>/settings/secrets/actions/new`\n   1. Name the token `GH_TOKEN_PACKAGES`.\n   1. Paste in the token you generated previously to the Secret field.\n   1. Update your actions workflow file (.yml) to use the new secret/env var:\n\n      ```yml\n      env:\n      GH_TOKEN_PACKAGES: '${{ secrets.GH_TOKEN_PACKAGES }}'\n      ``` -->\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n```\n\n## Import the root.css to your app's global styles\n\nThe method used (JS Import, CSS import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```\n@kyndryl-design-system/web-components/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of [tokens/variables included in root.css](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/1761e8524349e06f97c8cc4c7606a985f8c4bc7c/src/root.css#L29) such as `--header-height` to pad the body for the fixed position header, `--spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"6d108db0e00061300d607fe722a1f37095c1293c","scripts":{"lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages --source-branch main","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.5.0","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.15.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.0.0-beta.30","css-loader":"^6.7.3","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.0.0-beta.30","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.0.0-beta.30","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.0.0-beta.30","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.10","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.0.0-beta.30","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.0.0-beta.30","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.0.0-beta.30","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.0.0-beta.30","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.0.0-beta.30","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.28_1680623735256_0.26108109494251464","host":"s3://npm-registry-packages"}},"1.0.0-beta.29":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.29","_id":"@kyndryl-design-system/web-components@1.0.0-beta.29","maintainers":[{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"8e59ddcd0ffe0acd065d9e7e333da8a5c0f4bdf3","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.29.tgz","fileCount":169,"integrity":"sha512-m2udTm3mjSTFjE6HteS72CIYoZ2dk4OuwzSKLPRhw6/9zZiP0HZdp9eFUf/rN+5Y1m2rt/cAs7h5A8lo4JssIA==","signatures":[{"sig":"MEUCIA2uL2rvCW3elBlGgePAcf+TJ1prckadTRSIiTVMiDLvAiEA1mx3W8iImAxkhkI5fZG7V4Xn6KOOJB/WjwdFrMogBPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNXyEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp82g//XTas39j/S/sPgbFO6FKHdxqrylAeLxqx8TEwTnWZb18HwGtf\r\npoANnz2ECuhMQQLVJYBrXUl5pmmnVh1BiXrfa/j7J+29MnPjTREytTd6Lp0j\r\nwhMLxaZEdIruSqVxpIHvqjnJzuW1C57yiAIwJzJskaFY+i67qaaGNS2ylYBz\r\nzDyoWkMKRSrOFxRoGirVR1LCCoE/JycP+R68dtm8HkegeWmdFmLUlRVVvJjY\r\nbRXU+ob8e7ek3l/p2PELXZz3uN2FUFpmg8LXgW81YodH8F5Ziiw+FPG1A2Pf\r\n0j9hGvauFv+xh0MYakmkAkC1jto/carWE9xaz+H7++WRCA7X2pteZYmGCUNr\r\nXUwnZHhVe5bR07p8ec+RrMd7H7an84zRKiiPhpudJ1I//1CP8+VK70I2YIi/\r\nWNYbWWMI1AON0qaUJ+FX2EDJnw3yZlB2D2ZnU0eyh767zCBJyqu39AZgd0BX\r\nPnv7Lu9e7BK0b51DgToPNUnwpxh6PzSO+ESw8b040T0UWNVTor8gpp+oLp5J\r\nsmSNbwcAnLNKiLWRAXnTI+UB8HrLkM5NvIoXhOESHhq7pPdnfCs/s/o4pgPG\r\n2aMos/4lbXYZv85kqVjwkrAazx9wuSldqcU5FZ+XugyZBtktLx046SPODVZ8\r\nXexmwIV8xjEYk1geOwMdRFNxjbT4OS7/wMM=\r\n=zX0C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n<!-- ## Configure your environments to enable installation of packages from the GitHub Enterprise npm package registry.\n\nThis is necessary as long as we serve our packages from a private registry. Eventually we will probably move public and will be able to skip this.\n\n1. Create a [Personal Access Token](https://github.kyndryl.net/settings/tokens) with `read:packages` permission.\n   1. Save the generated token somewhere safe for the next steps.\n   2. Do NOT commit this secret to your project repository.\n2. Create a `.npmrc` file in your project root with the following content:\n\n   ```\n   //npm.github.kyndryl.net/:_authToken=${GH_TOKEN_PACKAGES}\n   @kyndryl-design-system:registry=https://npm.github.kyndryl.net\n   ```\n\n3. Local Dev: Set up the Personal Access Token in your local environment.\n   1. Add this step to your project's README.\n   1. Create an environment variable, named `GH_TOKEN_PACKAGES`, for whichever os/shell you are using locally.\n      1. Git Bash example: Add a `.bashrc` file to your user home directory with the content: `export GH_TOKEN_PACKAGES=<your-token-here>`\n      1. You will have to restart your shell/terminal after.\n4. Automated Builds: Set up the Personal Access Token in your CI environment. This example is for GitHub Actions.\n\n   1. Create a new repository secret at: `https://github.kyndryl.net/<your-project-path>/settings/secrets/actions/new`\n   1. Name the token `GH_TOKEN_PACKAGES`.\n   1. Paste in the token you generated previously to the Secret field.\n   1. Update your actions workflow file (.yml) to use the new secret/env var:\n\n      ```yml\n      env:\n      GH_TOKEN_PACKAGES: '${{ secrets.GH_TOKEN_PACKAGES }}'\n      ``` -->\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n```\n\n## Import the root.css to your app's global styles\n\nThe method used (JS Import, CSS import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```\n@kyndryl-design-system/web-components/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of [tokens/variables included in root.css](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/1761e8524349e06f97c8cc4c7606a985f8c4bc7c/src/root.css#L29) such as `--header-height` to pad the body for the fixed position header, `--spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"ff0119d70abf4dfee969410375ba61ed19b59f97","scripts":{"lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages --source-branch main","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.5.0","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.15.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.0.0-beta.30","css-loader":"^6.7.3","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.0.0-beta.30","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.0.0-beta.30","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.0.0-beta.30","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.10","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.0.0-beta.30","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.0.0-beta.30","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.0.0-beta.30","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.0.0-beta.30","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.0.0-beta.30","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.29_1681226884272_0.9991423598615696","host":"s3://npm-registry-packages"}},"1.0.0-beta.30":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.30","_id":"@kyndryl-design-system/web-components@1.0.0-beta.30","maintainers":[{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"634a31b5ae02cf0ac5964f11dcd72a2e179cad64","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.30.tgz","fileCount":184,"integrity":"sha512-DeP1nzTrXHPHLIsZbM0dLJ0n+Pk9HUyfq4xEbZVcWe1fRcQ3ZUcA/JgMYketmKrNlLlruItZFJzAYvtOHFLt4A==","signatures":[{"sig":"MEQCIBG1dgLoFYEGkjYyenE13YuI0fhoglVT+7aS4J1Lcs7DAiAJ2Ef1VA0qh56n1RXm3uCJiO34dMfIEPElCMnOiO/zhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":443565},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n```\n\n## Import the root styles to your app's global styles\n\nThe method used (JS Import, SCSS @use, CSS @import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```js\n@kyndryl-design-system/web-components/scss/root.scss\n// or\n@kyndryl-design-system/web-components/css/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kyn-header-height` to pad the body for the fixed position header, `--kyn-spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"3a4000680c1a4b4da6e0854cfb253bfbdb7f3ab6","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c && npm run sass-build","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","sass-dev":"sass --watch --update --style=expanded src/common/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/common/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/common/scss/root.scss:dist/css/root.css","storybook":"storybook dev -p 6006","sass-build":"npm run sass-prod && npm run sass-root","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages --source-branch main","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.30_1689869774559_0.7053707678291476","host":"s3://npm-registry-packages"}},"1.0.0-beta.31":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.31","_id":"@kyndryl-design-system/web-components@1.0.0-beta.31","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"c355d3211a11823d580fcd99f85fbabc4495342a","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.31.tgz","fileCount":197,"integrity":"sha512-DaTtfwmb6LnUcGVSGfoTX7GiR5Z0j9WwjXjwgfoa8ke3mWCKzYQg0C9gMPmvnukfx6YUiLMqiLG0UHo4vYUXCw==","signatures":[{"sig":"MEQCID0SA2yJZBl+y/w9SAFZmy8ycoO3XDKqORYx+feLkPeIAiA7PpZkRt92R8UZqiCsj1PewzVDqI8CKEl6qkL9NkLAEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1934365},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root styles to your app's global styles\n\nThe method used (JS Import, SCSS @use, CSS @import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```js\n@kyndryl-design-system/web-components/scss/root.scss\n// or\n@kyndryl-design-system/web-components/css/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kyn-header-height` to pad the body for the fixed position header, `--kyn-spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"6270dc4199f31d1fff28574c2741835a264a9c9a","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c && npm run sass-build","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","sass-dev":"sass --watch --update --style=expanded src/common/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/common/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/common/scss/root.scss:dist/css/root.css","storybook":"storybook dev -p 6006","sass-build":"npm run sass-prod && npm run sass-root","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.31_1690398027368_0.16789427521382683","host":"s3://npm-registry-packages"}},"1.0.0-beta.32":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.32","_id":"@kyndryl-design-system/web-components@1.0.0-beta.32","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"be9f5bd3674f8527bf7f191dc7e591c6c00ef4a0","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.32.tgz","fileCount":200,"integrity":"sha512-9WrpLsYnBH2dzSb6msN339vRCVAREBo9bQrYhfbJkz0u+nMtYWhTHNqEMM6EaiB3QYh0Dbnij1n2kqY3b1qfpg==","signatures":[{"sig":"MEQCIGB/UOmsKjPLtzQGFj2usMtnu7bzlTDCVhOwAPLilaZpAiBu3wxhBhJb1Knqjwoq/5YOsZH/QPRwh6XyNbBLEkCX0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1943046},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n**This repository has moved to https://github.com/kyndryl-design-system/web-components**\n\n[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root styles to your app's global styles\n\nThe method used (JS Import, SCSS @use, CSS @import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```js\n@kyndryl-design-system/web-components/scss/root.scss\n// or\n@kyndryl-design-system/web-components/css/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kyn-header-height` to pad the body for the fixed position header, `--kyn-spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"c2d55d59ae1ce33ecd0bd38cb5ec812ff0c7e94c","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c && npm run sass-build","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","sass-dev":"sass --watch --update --style=expanded src/common/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/common/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/common/scss/root.scss:dist/css/root.css","storybook":"storybook dev -p 6006","sass-build":"npm run sass-prod && npm run sass-root","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.32_1690398844607_0.7964402118221621","host":"s3://npm-registry-packages"}},"1.0.0-beta.1":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.1","_id":"@kyndryl-design-system/web-components@1.0.0-beta.1","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"6c61e7182b73694e30af8df60f4ccbf5fed01fd3","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.1.tgz","fileCount":200,"integrity":"sha512-F7lPt+hRwMLoyPF6EomIKrKYQhm09ChuU/WyFHL05irPMiEaNP8+fjfeRxJqGPgWKzQ12/aNOM80VEMLjqoNeg==","signatures":[{"sig":"MEQCIFJbf+oqi/tMoZwzgSXr9ye4CcODoYKhcyBi05VcfpWmAiAqkwErJ26I7SLpuDkJAWIJSduPz7MprKh5yOzxVjlKrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942955},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root styles to your app's global styles\n\nThe method used (JS Import, SCSS @use, CSS @import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```js\n@kyndryl-design-system/web-components/scss/root.scss\n// or\n@kyndryl-design-system/web-components/css/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kyn-header-height` to pad the body for the fixed position header, `--kyn-spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"f85c13534bf405b2f3acd1a28a30c17326354713","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c && npm run sass-build","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","sass-dev":"sass --watch --update --style=expanded src/common/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/common/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/common/scss/root.scss:dist/css/root.css","storybook":"storybook dev -p 6006","sass-build":"npm run sass-prod && npm run sass-root","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.0","dependencies":{"lit":"^2.5.0","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.1_1690399788813_0.27181057421720634","host":"s3://npm-registry-packages"}},"1.0.0-beta.34":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.34","_id":"@kyndryl-design-system/web-components@1.0.0-beta.34","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"a28789d9a0c1daf48e6913a172618736585d59c6","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.34.tgz","fileCount":204,"integrity":"sha512-OKZhEWUDBuORIUFBHeo4iSD5159T85NGTM44F5G/Oo85CUmDj3c1EavWAY7xtyYVUSplbY2BpMONBThZW9COWQ==","signatures":[{"sig":"MEQCICcHzIRHBPpnbiAfYaUK8nuW7DR8esynNNmI32K73w5rAiAqSR3Xiw9XVcYE9ikkUqyRxFYfTsCeUm5EQW9NDlwLvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1997599},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root styles to your app's global styles\n\nThe method used (JS Import, SCSS @use, CSS @import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```js\n@kyndryl-design-system/foundation/scss/root.scss\n// or\n@kyndryl-design-system/foundation/css/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kyn-header-height` to pad the body for the fixed position header, `--kyn-spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"c568f9f8e1ecccce3cca1a2635d1ac83cd7916f4","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c && npm run sass-build","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","sass-dev":"sass --watch --update --style=expanded src/common/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/common/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/common/scss/root.scss:dist/css/root.css","storybook":"storybook dev -p 6006","sass-build":"npm run sass-prod && npm run sass-root","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.0","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","resolve-url-loader":"^5.0.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.34_1690466084100_0.4466445645276065","host":"s3://npm-registry-packages"}},"1.0.0-beta.35":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.35","_id":"@kyndryl-design-system/web-components@1.0.0-beta.35","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"a2fa620bf43e9dd4fc51f6bb70614f3873e6cc15","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.35.tgz","fileCount":184,"integrity":"sha512-+wlKmJKnq6tLf9FAygja4vpLBUo6rqdr2VmeowcWpXfvOOG95PJxu6Y7lXT4IM+OSw6SW0h4AkGh4KkVwYORSw==","signatures":[{"sig":"MEYCIQC5Rtx343tMeAHZ/2VCeWOu7IFmY9e0Y+t6+q+mHLaE3AIhAMrRbntgQixKz3lNNEIfoHguAJqam8cUuj9pRxvz1PVe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1951511},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root styles to your app's global styles\n\nThe method used (JS Import, SCSS @use, CSS @import, or &lt;style&gt; tag) will vary based on your framework/bundler, but the stylesheet can be found in `node_modules` at:\n\n```js\n@kyndryl-design-system/foundation/scss/root.scss\n// or\n@kyndryl-design-system/foundation/css/root.css\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kyn-header-height` to pad the body for the fixed position header, `--kyn-spacing-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://pages.github.kyndryl.net/kyndryl-design-system/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"14b583da9bdc11f14f9b757aba84314057de88ae","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.0","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","resolve-url-loader":"^5.0.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","storybook-addon-designs":"^7.0.0-beta.2","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.35_1690467325616_0.5602162383601679","host":"s3://npm-registry-packages"}},"1.0.0-beta.36":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.36","_id":"@kyndryl-design-system/web-components@1.0.0-beta.36","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"59bf1eec908b13b91e0d472620355f40304c7344","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.36.tgz","fileCount":184,"integrity":"sha512-OyLJrqL4BgQMyvpEMr15SHyaGFlkPcJSb3OQIx5AywaXCfQkFpQnMWzL9Yhvf6delCQ3YKh9GxUsB+RnnL77BQ==","signatures":[{"sig":"MEUCIQDHUQs/niME5Ka2qVrGql0nbj/aDhaTfRRv0rwMJtjK1gIgMSi7rvNvPZt80ZtiznqePrtCr4KZEKy5q4Pk2pUjxW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1956867},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Web Components\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"cb68b3a143ac1bed0ea301d9e6240e8d4423d0da","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.0","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","resolve-url-loader":"^5.0.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.36_1690999114909_0.32041277876493535","host":"s3://npm-registry-packages"}},"1.0.0-beta.37":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.37","_id":"@kyndryl-design-system/web-components@1.0.0-beta.37","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"a6adefcdff799a25d2894036af3ffd8a02d2ad5b","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.37.tgz","fileCount":218,"integrity":"sha512-Obd6rs3OEZ/2w6GMM319cWF2/UCKkrI0ZRhPB7cxVDFXaf7ao12Rnbvv353FHiq7/zzOjcuexrbg38tEABsbeg==","signatures":[{"sig":"MEUCICdopJj6BlXwovB+sbDi2RkUCRhNTPUy5CA4actvGiS/AiEA0vlkGkDedTTAxiSNn47trI0YuPGJ9xQnwf1FuTRt+8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2010749},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Shidoka Web Components\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"d90fa211054297187844412bcf31887d69df14aa","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.0","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.10"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.37_1692113759784_0.26352247230441295","host":"s3://npm-registry-packages"}},"1.0.0-beta.38":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.38","_id":"@kyndryl-design-system/web-components@1.0.0-beta.38","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"edc67c662f0fdcaedadc5b5c9f80b3a20a481d02","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.38.tgz","fileCount":246,"integrity":"sha512-urk94f9BifRTWcf+nN/MayR902KWea23xbiGhh8TCOn+3ma+66ANdpuYBBVBflMVlfnRM2Y23UlTZ2gee8tYGg==","signatures":[{"sig":"MEQCIBcLj1xFHOWUu2QTvlcrJ2cVrDDeWI0JpUfzepwe3WPEAiB7ksEBIGDlwEyz7m7hxkavixm0IdoyEBKIwHkW+ioahw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2062582},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Shidoka Web Components\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"17cccdec94579cb2c362fafb3751ce409bbe64e9","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.0","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.12"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.38_1692200977057_0.66810622252586","host":"s3://npm-registry-packages"}},"1.0.0-beta.39":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.39","_id":"@kyndryl-design-system/web-components@1.0.0-beta.39","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"f5833e251199f60a57edb9e30456593278beaf6d","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.39.tgz","fileCount":246,"integrity":"sha512-GW38nLmhyYAtToDTZVQ7iUXtB3fm9qrxMpcJygTXrCtTjDVYQ/Zt993ZMb1R25sI+wH82UognhZ/hBz4e7S49A==","signatures":[{"sig":"MEUCIHtmm8zZ3JLB6GHPERMrHvdlj9kFkdt1IqziJc/AxXugAiEA/YnrVFaUKqbksEl10zrHpthbapgMtwICKGbjjEdMvKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2062582},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Shidoka Web Components\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"c4a336d82d8d654e120da4d7f523c61e0f58b38c","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.0","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.14"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.39_1692214487036_0.6305848792818243","host":"s3://npm-registry-packages"}},"1.0.0-beta.40":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.40","_id":"@kyndryl-design-system/web-components@1.0.0-beta.40","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"d72035bc000b11be33c856b2914aa414e7c62bcf","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.40.tgz","fileCount":256,"integrity":"sha512-Z89KCzfHKEvMRrWMY+kne8h2zLrgKn0a79wAIMOa7WWVK2Jy5ROEmMUkpw+PfyVhDnY1SjFqWRlF6X0dFPEICA==","signatures":[{"sig":"MEYCIQCQNrhRpeLJbvu78loTeaGZvQb2kRjqmS3dKYqkiVSdegIhAO61R4v2E/7c0n2gFRuhZcdYu2Pf3BKepoJ8hApv+/wp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2075631},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Shidoka Web Components\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"1c6457ab8bf6282111c1b2ec6571665e964397ed","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.0","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.15"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.40_1692221732431_0.9050707992452962","host":"s3://npm-registry-packages"}},"1.0.0-beta.41":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.41","_id":"@kyndryl-design-system/web-components@1.0.0-beta.41","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"b8e9774d128e2479d076530a0a87cb475e0ed71b","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.41.tgz","fileCount":256,"integrity":"sha512-0Nqo4QRazKGk8lLeO9zHuUpuKMpUMmFMsT6m5OZ78CY7W0y4/4VljWHXD05hzJ/KnFz8+P4La+IyqJHvq88Wvg==","signatures":[{"sig":"MEUCIDTHqm95UEQ2bztDIhVZX3taUJjfk/HePhGZtLzwqzexAiEAqdRhCEFv7F1MphhmLl8inFaSZbbEPbqtGTLJwczcbPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2075866},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Shidoka Web Components\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"991a6f3feaa8f970d94ed0c2651beff8adb9331a","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.15"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.41_1692283064227_0.9552174445969714","host":"s3://npm-registry-packages"}},"1.0.0-beta.42":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.42","_id":"@kyndryl-design-system/web-components@1.0.0-beta.42","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"31d5a3b662f547d353d0ccd7ae975fae824a7c73","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.42.tgz","fileCount":256,"integrity":"sha512-2ednGYJS7QYwiPt2RTwNDhkY0JYXyU/W5DRYlo4WK70t/VQCJf+98TtBUaOIp1O+gWitCJev4ja+Xk5uTnLgHg==","signatures":[{"sig":"MEYCIQCKHDoqBVTBkjx1WizwTnT9JSmSukF7S89wSbu+bfQe6gIhAMSCWkShMbCwV4QGw2zg9f//XbGpvkbVtsVF4B/uvvps","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2074728},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Shidoka Web Components\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"06fee996ec8bbf10097712a65583f65543ed4cff","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.0","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.16"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.42_1692302832682_0.5481814320328586","host":"s3://npm-registry-packages"}},"1.0.0-beta.43":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.43","_id":"@kyndryl-design-system/web-components@1.0.0-beta.43","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"3f622f3527b44f729e9d67c8a034d43971b37141","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.43.tgz","fileCount":256,"integrity":"sha512-r1lFpIEW/81h+/Cj8X+nwJQX+44elzOywatrtigNtuK8rd6oKI6TNPlCubM8/jhosmbiALMzNMb4gy2eNVoPVQ==","signatures":[{"sig":"MEUCIBs60a9nCdX1mnGMxGuIyHxCJgaP7JdPS9x0t3uj/VioAiEA8cyF3jmxTyj4Vj1j+QrwcSrw4XR/uO83ZaRnF1vL8rE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2075653},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Shidoka Web Components\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"fbb03cdcb42d39cddc4fc111a4718425aedb1d49","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.0","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.16"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.43_1692305968635_0.04455810655507686","host":"s3://npm-registry-packages"}},"1.0.0-beta.44":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.44","_id":"@kyndryl-design-system/web-components@1.0.0-beta.44","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"3d0b9584bb157daf17c8fc7c1d457d1ecde89904","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.44.tgz","fileCount":256,"integrity":"sha512-bPlurVoqQNGG0ixDlWagBPHEvSZW5TbksmdORLDEc9GezkJendcgfMF+LMOJpMmyv/WtAwshefsrAmuenSbIOQ==","signatures":[{"sig":"MEUCIQCA28zckxOzdW7JGKmrapFWQf6USNfYsNaEfkS7wFAItAIgD9vRoLEnojjKhUvt//wZ7rc3vdtRWQzeR/NItj0jiRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2075653},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Shidoka Web Components\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"c880650691d4c05f5e82af827f04b597c061d4e3","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.0","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.18"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.44_1692367467050_0.5646775469164886","host":"s3://npm-registry-packages"}},"1.0.0-beta.45":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.45","_id":"@kyndryl-design-system/web-components@1.0.0-beta.45","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"0b468eabfd0485067d138023c5b2d3572e9e9709","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.45.tgz","fileCount":256,"integrity":"sha512-HF1dGYPrYXtpB59W4dR3puasW7wN7iLirWHjHgSHDxYTsqMnJqhxeQsfm5OQHJIMZ9h0E96s+UeSf2B7Fpw20Q==","signatures":[{"sig":"MEUCIBZzcxFFlf+GHeG8i7ENjTFGKHoJYaaMwZqsjTwa8qYBAiEAknbU/Ug+0vcLjAr7HoGu1iliXF9CgdJbSHA+c4Qd57w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2075695},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Shidoka Web Components\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"3835fc07a8a100db5165fbb14f25d10cf7a604f0","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.19"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","storybook-addon-themes":"^6.1.0","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.45_1692373591538_0.08192939971148894","host":"s3://npm-registry-packages"}},"1.0.0-beta.46":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.46","_id":"@kyndryl-design-system/web-components@1.0.0-beta.46","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"e94ceec367d28e6e1119ee5a12839303b3b2e76a","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.46.tgz","fileCount":278,"integrity":"sha512-iYrxureBCuu+vI1Zr3Mzz+2QJcoWalwkGqHewuek8+7mvtDfz/kuHzOCjP9qhEH+0ld2XO8W70t7s1yuT3YwbQ==","signatures":[{"sig":"MEQCIHofaZ5JnqZX42gVmQXiEeCff41QzgWwu5rwyWHshZijAiAS1Y1I8g1ulPu1XRmnHwOAqz2jnxXPfksZimohBcDDRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2151184},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Shidoka Web Components\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"c19d23145f6ba7e30a44362bdd14ba76dbb3b22f","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Web Components for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.19"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","storybook-addon-themes":"^6.1.0","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.46_1692971383377_0.3532116231105824","host":"s3://npm-registry-packages"}},"1.0.0-beta.47":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.47","_id":"@kyndryl-design-system/web-components@1.0.0-beta.47","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"90e0d1810d763f4ecc7ac1150cd5cb48f3ac15bd","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.47.tgz","fileCount":278,"integrity":"sha512-uR7GpuJhVVQLfrORwLG+CS64wwR8EuMTAwjEOudY5ewJlFJc6Mmyj1SAN6gRkdfM261OIGDGEm/p8V+TtJaqkQ==","signatures":[{"sig":"MEUCIFGSP03/ByTIRqH9wWXzhLyv6pGpM1T0qzIqEfK+4d+hAiEAn/yFZbCkf8uYMwz0BlyWg4XgrbXJziMPmZcZHkxolxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2151176},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Shidoka Web Components for Applications\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"2a89ecdb04ea6adec425ab5ea156ca4011e48ce2","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Shidoka Web Components for Applications","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.22"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","storybook-addon-themes":"^6.1.0","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.47_1692973934298_0.06851270406277843","host":"s3://npm-registry-packages"}},"1.0.0-beta.48":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.48","_id":"@kyndryl-design-system/web-components@1.0.0-beta.48","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"a9578a1c86a6b6b835299243c99e7edc90c20a94","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.48.tgz","fileCount":278,"integrity":"sha512-x+ppzi4+S6nn6QMVMl+c+N8FgrA3ERv5HWzvqyltMUseaK7XS947HDmiAm2QqjJLC0IhN77pSYcgT7LXx7YpoQ==","signatures":[{"sig":"MEUCIQDedUVwKL1QHUQRZ56dcvTjJRLcjrRkuWDJdHf5C/zhbgIgH4cpqVwaHZZSPUool0lHgf/gzXNlP/DKsBGhjLKVbJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2150997},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Shidoka Web Components for Applications\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"f2adc406739fb0f001e2d774967270bede03fe74","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Shidoka Web Components for Applications","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.22"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","storybook-addon-themes":"^6.1.0","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.48_1693398768798_0.24989819960428683","host":"s3://npm-registry-packages"}},"1.0.0-beta.49":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.49","_id":"@kyndryl-design-system/web-components@1.0.0-beta.49","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"3b4994dbeb0c9c189c6fbfe098f942ea4d302ccd","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.49.tgz","fileCount":288,"integrity":"sha512-MGwpEIrz+NlIPRd1ZRFP/V1enB9YuFvp6pq4d86uqvn/JD+yeBeJ19mruzFsNX8NNwk1ELJ8Dq0Yn+70G6H3BQ==","signatures":[{"sig":"MEUCIDKMxgC+eKbB30a0pojKU1pTFEU+aEs03mJJz/kv0rJoAiEA4VOTUy2PV9VXyPRC/6yaXLMdUqYgyCSetf0A0syDbhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2178633},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Shidoka Web Components for Applications\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"e136aa622ccb17957227cdb9396e0a43c4b6c2bc","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Shidoka Web Components for Applications","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.24"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","storybook-addon-themes":"^6.1.0","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.49_1693424240540_0.8617201243708235","host":"s3://npm-registry-packages"}},"1.0.0-beta.50":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.50","_id":"@kyndryl-design-system/web-components@1.0.0-beta.50","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"f593d0bfdc8a74c69ce262f31b852cc909ef53ae","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.50.tgz","fileCount":288,"integrity":"sha512-CWRnW7itFpK+nRDlyyq8c6sXc+am0U9Bn9a5wPcqlWXYWjXD9EpNACoYv3ccLXSIFv4Xm2ZVl69dBBenAblAWQ==","signatures":[{"sig":"MEUCIQCPcED2rCz8/EyxsSWn2dxlbAIeLeUX91ixxNHRkrO5xgIgMSNdNOM+LcvIZNQCVvXrUPWltyzxrNIS2Z9DL7Wf6KQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2178681},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Shidoka Web Components for Applications\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"2285c6c8ece4076e29472d90d944cc8e514a5fdd","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Shidoka Web Components for Applications","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.24"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","storybook-addon-themes":"^6.1.0","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.50_1694103370271_0.3624299811026057","host":"s3://npm-registry-packages"}},"1.0.0-beta.51":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.51","_id":"@kyndryl-design-system/web-components@1.0.0-beta.51","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"76f2391d4c56a8e8a78a17f75d0bacf3d4b357ca","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.51.tgz","fileCount":302,"integrity":"sha512-gXFyKe8l0m2fOZWRUD4DzlxdG90Jel1vrwvER7BHxJx7OKRyuXRv2G0ENDQEKlS34vpF79zXQ11fMtcR+BXIIA==","signatures":[{"sig":"MEYCIQCcW+zBxUvquvaNF7fX8PxwlTvIqyHr3dPE1IoZvuq4NAIhAJM0QRAnIrB3Kpo+dNZEG9ObU71ueeGtD3U9DFMfIAs3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2207857},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Shidoka Web Components for Applications\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"79169b9f37f58b43afd851a1ab02062e42e693bc","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Shidoka Web Components for Applications","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.24"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","storybook-addon-themes":"^6.1.0","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.51_1694112679876_0.0895597600135265","host":"s3://npm-registry-packages"}},"1.0.0-beta.52":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.52","_id":"@kyndryl-design-system/web-components@1.0.0-beta.52","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"f793dfc7202e2cfdd68ac366144e7cb0292f306c","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.52.tgz","fileCount":320,"integrity":"sha512-H9Xj4ZvFiCYpJuSEWfjZEd69iPOkeBKz0fpAafRG23+32TzRrNbeOZTYUg9nKBFDRns6sFU8XHXU8ZiFRvV6/A==","signatures":[{"sig":"MEQCIEvU01zpgo1OtLWcROdjscCZGiNxc8fKVFQenA7RqEhdAiBrIhR2ToxYR+kFEvCkqBZEcN1be8Z4RkNX7NskdYawyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2219357},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Shidoka Web Components for Applications\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"090c899db96597d1c3a294a0cc90e7f1756e6c26","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Shidoka Web Components for Applications","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.24"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","storybook-addon-themes":"^6.1.0","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.52_1694181367034_0.57180822629128","host":"s3://npm-registry-packages"}},"1.0.0-beta.53":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.53","_id":"@kyndryl-design-system/web-components@1.0.0-beta.53","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"685820661b9dcee81ba61272f343d0aafa7ea7ba","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.53.tgz","fileCount":320,"integrity":"sha512-A9yumuPxb1/uXVwqPOgAzuDSsj6VIMFhz/tjLJqFs7HYbelIU5S3WYRxIFOe8NPezpizeAAb4o49isGk5xrXBg==","signatures":[{"sig":"MEQCIBZK4dILd34UhK1I6u79RAgyioC2NRFSZSYYL5s7rVtQAiBVGwXJhp36m09rpxoDX66++9NHW70ute/+umO6Kd+Vew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2219469},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Shidoka Web Components for Applications\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"e9766137f7c4adbe479f1a63f3af9e110fee25df","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Shidoka Web Components for Applications","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.24"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","storybook-addon-themes":"^6.1.0","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.53_1694182004629_0.8439240471767626","host":"s3://npm-registry-packages"}},"1.0.0-beta.54":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.54","_id":"@kyndryl-design-system/web-components@1.0.0-beta.54","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"7794f2e806f548dbedcb5be0c8ca1b4e13b9d688","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.54.tgz","fileCount":320,"integrity":"sha512-EmCgeiXS0be06AypQ6sPqyt/CFk2UnyJeMjuGNpA9i/pprXkyoxsva0hF1VK5b469P+U9IwOZhisQQeaEBiqfw==","signatures":[{"sig":"MEUCIQD/DdvlA9toiBUY23S5cIMEg2r3D77zzyDOQuwIF1p9hQIgT2qd8o4JcXPKBOZWbGiCVqIejtCKxjUINryEfvv5JEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2221184},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Shidoka Web Components for Applications\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"1945d14e76919d83405d8cb83473fae3d0c19ca0","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Shidoka Web Components for Applications","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.24"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","storybook-addon-themes":"^6.1.0","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.54_1694188084626_0.20088245179845576","host":"s3://npm-registry-packages"}},"1.0.0-beta.55":{"name":"@kyndryl-design-system/web-components","version":"1.0.0-beta.55","_id":"@kyndryl-design-system/web-components@1.0.0-beta.55","maintainers":[{"name":"maulik-thaker1","email":"maulik.thaker1@kyndryl.com"},{"name":"jonathan-w-dudzik","email":"jonathan.dudzik@kyndryl.com"},{"name":"frodesigns","email":"brianthefro@gmail.com"},{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"}],"dist":{"shasum":"d67c1beec89c01b266e8d635ae0f6004c8b8dedd","tarball":"https://registry.npmjs.org/@kyndryl-design-system/web-components/-/web-components-1.0.0-beta.55.tgz","fileCount":330,"integrity":"sha512-GsweejFs1pjm+/W3E8EIz5PfdZZL2s/YXB1VUyARYgL4eJjyHJNWY6NWQ7eEVBnVgXi55VuoUaXZE28SDjXIZg==","signatures":[{"sig":"MEYCIQDhI1GvmVDSbtbvYjOlFRmax6Or5zEVClFxHTDwciDS0wIhAO2vWuWcvQ5OzKiG34G1d4m2PY4w6+gO3b+6m1IWIM5A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2252351},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Shidoka Web Components for Applications\n\n[![kyndryl-web-components](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/web-components/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/web-components/blob/beta/CONTRIBUTING.md) here.\n\n# Using this library in another project\n\n## Install the package\n\n<!-- Note: This will not work until you have configured the enterprise package registry following the instructions above. -->\n\n```bash\n# stable/main\nnpm install @kyndryl-design-system/web-components -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/web-components@beta -S\n# when using beta, lock the version, as breaking changes can happen at any time\n```\n\n## Import the root stylesheet to your app's global styles\n\nThe method used (SCSS @use, CSS @import, JS import, or &lt;style&gt; tag) will vary based on your framework/bundler. Some examples:\n\n### SCSS\n\n```css\n@use '~@kyndryl-design-system/foundation/scss/root.scss';\n```\n\n### CSS\n\n```css\n@import '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### JS\n\n```js\nimport '@kyndryl-design-system/foundation/css/root.css';\n```\n\n### Use CSS tokens/variables\n\nYou can make use of tokens/variables included in root.css such as `--kd-header-height` to pad the body for the fixed position header, `--kd-page-gutter` for the padding on your main container, or any of the color tokens. These are very bare-bones currently, and will need to be fleshed out later.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/web-components/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports the Header component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header';\n```\n\n```html\n<kyn-header>\n  <kyn-header-nav>\n    <kyn-header-link>Link</kyn-header-link>\n  </kyn-header-nav>\n</kyn-header>\n```\n\n### Example: Single Component\n\nThis example imports the HeaderLink component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/web-components/components/global/header/headerLink';\n```\n\n```html\n<kyn-header-link>Link</kyn-header-link>\n```\n\n### React usage\n\nReact does not yet support automatic interop with Web Components. This means that React treats all props passed to Web Components as string attributes. It sounds like they are [planning to release it with React 19](https://github.com/facebook/react/issues/11347#issuecomment-988970952), and is now available behind an `@experimental` flag. Until you've upgraded to a version of React that has support, you will need to use a library like [reactify-wc](https://www.npmjs.com/package/reactify-wc) to use these components in React.\n\nSome options for React wrapper libraries:\n\n1. [reactify-wc](https://www.npmjs.com/package/reactify-wc)\n2. [wc-react](https://www.npmjs.com/package/wc-react)\n3. [@lit-labs/react](https://www.npmjs.com/package/@lit-labs/react)\n\n### Server-Side Rendering (SSR)\n\nWhen using with an SSR framework like Next.js, you may encounter errors with code that only runs client-side, like `window` references for example. Here is an article that provides some methods to work around this: [Using Non-SSR Friendly Components with Next.js](https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c). Basically, for components that make use of something like `window`, they need their rendering deferred to only happen on the client-side.\n","gitHead":"16fbfc4d980f33d71cdebda87c326efba292166c","scripts":{"dev":"npm run storybook","lint":"npm run lint:lit-analyzer && npm run lint:eslint","test":"wtr","build":"rollup -c","format":"prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write","analyze":"cem analyze --litelement --globs \"src/**/*.ts\"","prepare":"npx husky install","storybook":"storybook dev -p 6006","lint:eslint":"eslint . --ext .js,.ts","test:coverage":"wtr --coverage","build-storybook":"storybook build","deploy-storybook":"storybook-to-ghpages","lint:lit-analyzer":"lit-analyzer"},"_npmUser":{"name":"brian-patrick","email":"brian.patrick3@kyndryl.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"9.6.7","description":"Shidoka Web Components for Applications","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","dependencies":{"lit":"^2.7.6","@carbon/icons":"^11.14.0","@carbon/icon-helpers":"^10.37.0","query-selector-shadow-dom":"^1.0.1","@kyndryl-design-system/foundation":"^1.0.0-beta.24"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","readmeFilename":"README.md","devDependencies":{"sass":"^1.57.1","husky":"^8.0.3","react":"^18.2.0","eslint":"^8.31.0","rollup":"^3.10.0","postcss":"^8.4.21","prettier":"^2.8.2","react-dom":"^18.2.0","storybook":"^7.1.0","css-loader":"^6.7.3","remark-gfm":"^3.0.1","typescript":"^4.9.4","@babel/core":"^7.20.12","@types/sass":"^1.43.1","lint-staged":"^13.1.2","sass-loader":"^13.2.0","babel-loader":"^8.3.0","lit-analyzer":"^1.2.1","extract-loader":"^5.1.0","@commitlint/cli":"^17.4.4","lit-scss-loader":"^2.0.1","@open-wc/testing":"^3.1.7","@web/test-runner":"^0.15.0","@babel/preset-env":"^7.20.2","@storybook/addons":"7.1.0","rollup-plugin-dts":"^5.1.1","svg-inline-loader":"^0.8.2","@storybook/theming":"7.1.0","resolve-url-loader":"^5.0.0","rollup-plugin-copy":"^3.4.0","clean-webpack-plugin":"^4.0.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-docs":"7.1.0","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"7.1.0","rollup-plugin-scss-lit":"^1.1.3","storybook-addon-themes":"^6.1.0","@web/dev-server-esbuild":"^0.3.3","eslint-plugin-storybook":"^0.6.12","@babel/preset-typescript":"^7.18.6","@storybook/addon-actions":"7.1.0","@storybook/addon-designs":"^7.0.1","@storybook/addon-styling":"^1.3.4","rollup-plugin-inline-svg":"^3.0.3","@rollup/plugin-typescript":"^11.0.0","@storybook/web-components":"7.1.0","@typescript-eslint/parser":"^5.48.1","rollup-plugin-multi-input":"^1.3.3","rollup-plugin-postcss-lit":"^2.0.0","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"7.1.0","@types/carbon__icon-helpers":"^10.7.2","@web/test-runner-playwright":"^0.9.0","storybook-preset-inline-svg":"^1.0.1","@storybook/addon-storysource":"7.1.0","@storybook/storybook-deployer":"^2.8.16","@commitlint/config-conventional":"^17.4.4","@types/query-selector-shadow-dom":"^1.0.1","@typescript-eslint/eslint-plugin":"^5.48.1","rollup-plugin-peer-deps-external":"^2.2.4","@babel/plugin-proposal-decorators":"^7.20.7","rollup-plugin-rename-node-modules":"^1.3.1","@custom-elements-manifest/analyzer":"^0.6.8","@storybook/web-components-webpack5":"7.1.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"_npmOperationalInternal":{"tmp":"tmp/web-components_1.0.0-beta.55_1694447041288_0.8204175119621295","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-03-09T20:53:12.425Z","modified":"2026-09-24T20:29:34.461Z","1.0.0-beta.19":"2023-03-09T20:53:12.731Z","1.0.0-beta.20":"2023-03-14T00:35:27.887Z","1.0.0-beta.21":"2023-03-14T01:05:48.441Z","1.0.0-beta.22":"2023-03-14T01:44:45.605Z","1.0.0-beta.23":"2023-03-14T02:03:23.108Z","1.0.0-beta.24":"2023-03-15T22:43:28.028Z","1.0.0-beta.25":"2023-03-15T23:11:36.654Z","1.0.0-beta.26":"2023-03-16T14:57:56.112Z","1.0.0-beta.27":"2023-03-22T18:17:53.723Z","1.0.0-beta.28":"2023-04-04T15:55:35.518Z","1.0.0-beta.29":"2023-04-11T15:28:04.516Z","1.0.0-beta.30":"2023-07-20T16:16:14.703Z","1.0.0-beta.31":"2023-07-26T19:00:27.778Z","1.0.0-beta.32":"2023-07-26T19:14:04.925Z","1.0.0-beta.1":"2023-07-26T19:29:49.182Z","1.0.0-beta.34":"2023-07-27T13:54:44.474Z","1.0.0-beta.35":"2023-07-27T14:15:25.866Z","1.0.0-beta.36":"2023-08-02T17:58:35.076Z","1.0.0-beta.37":"2023-08-15T15:35:59.986Z","1.0.0-beta.38":"2023-08-16T15:49:37.330Z","1.0.0-beta.39":"2023-08-16T19:34:47.311Z","1.0.0-beta.40":"2023-08-16T21:35:32.657Z","1.0.0-beta.41":"2023-08-17T14:37:44.539Z","1.0.0-beta.42":"2023-08-17T20:07:13.053Z","1.0.0-beta.43":"2023-08-17T20:59:29.099Z","1.0.0-beta.44":"2023-08-18T14:04:27.302Z","1.0.0-beta.45":"2023-08-18T15:46:31.838Z","1.0.0-beta.46":"2023-08-25T13:49:43.655Z","1.0.0-beta.47":"2023-08-25T14:32:14.623Z","1.0.0-beta.48":"2023-08-30T12:32:49.207Z","1.0.0-beta.49":"2023-08-30T19:37:20.788Z","1.0.0-beta.50":"2023-09-07T16:16:10.668Z","1.0.0-beta.51":"2023-09-07T18:51:20.168Z","1.0.0-beta.52":"2023-09-08T13:56:07.325Z","1.0.0-beta.53":"2023-09-08T14:06:44.924Z","1.0.0-beta.54":"2023-09-08T15:48:04.899Z","1.0.0-beta.55":"2023-09-11T15:44:01.592Z"},"description":"[![kyndryl-web-components](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml/badge.svg)](https://github.kyndryl.net/kyndryl-design-system/web-components/actions/workflows/actions.yml)","maintainers":[{"email":"kumari.vijeta@kyndryl.com","name":"kumarivijeta"},{"email":"will.barbee@kyndryl.com","name":"w.barbee"},{"email":"FID_shidoka-bot@kyndryl.com","name":"shidoka-bot"}],"readme":"","readmeFilename":""}