{"_id":"@kyndryl-design-system/foundation","_rev":"36-18d63a5fed0c0bc628a3075e927f290d","name":"@kyndryl-design-system/foundation","dist-tags":{"latest":"1.0.0-beta.1","beta":"1.0.0-beta.24"},"versions":{"1.0.0-beta.1":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.1","_id":"@kyndryl-design-system/foundation@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":"9a6fe8b0922aec7e72cdbe99311a5b8f70af1c4b","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.1.tgz","fileCount":200,"integrity":"sha512-K0j51wUK9mRyIcXf6HhMDHMouZxHpNfhrBfm5ys1fGZO24GBQwSuOtP43DtkxS6+EHLItnq6vcmpdph7PgZPCg==","signatures":[{"sig":"MEUCIQDJQzA2+0yOGlZgAWL4PJoiJ36Mkmx96/augPB3+wWenQIgDmk/irKD1LTY+bxOX4nOoj9onqN9lVqfME1LnD3CZrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1942911},"main":"index.js","type":"module","types":"./index.d.ts","gitHead":"0b62b1af94673cbaf6fb0a1acdfc9a340413c5f4","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":"Foundation 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","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/foundation_1.0.0-beta.1_1690400674351_0.7001229292991114","host":"s3://npm-registry-packages"}},"1.0.0-beta.2":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.2","_id":"@kyndryl-design-system/foundation@1.0.0-beta.2","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":"f7e3e89f72f8eea46c829ac004a3f8ae3c7dec60","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.2.tgz","fileCount":88,"integrity":"sha512-wkf+WOZrEihomdB2Mhw6ZjRousBUjNjC7m3z7xzIpaogSgxy0/bigDCCQEsDdfFLTmD22hPhPh4xzUaVDM6/kA==","signatures":[{"sig":"MEYCIQDxqEa6ETADjvYMTwEk4vf1ueB0I/D09MiaFPLOTSNUFwIhAOhSumASAt70BtZmLCZY4bM8g6l4IvPaKeuBKVkm45fb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1793629},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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/foundation/) 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/foundation/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/foundation/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":"cbab32e1abc6b0c0191dba00ac29b7888cc893ee","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":"Foundation 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/foundation_1.0.0-beta.2_1690403004649_0.7666827185264777","host":"s3://npm-registry-packages"}},"1.0.0-beta.3":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.3","_id":"@kyndryl-design-system/foundation@1.0.0-beta.3","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":"82eea279fe618b5de53a9d792e7de1963fadf05f","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.3.tgz","fileCount":88,"integrity":"sha512-SPL2IZLk3arjvZYJ3qcBYb4COZo7gM4uXL4BrBNEJGVHOgAFQiSDuQvBioZTrtv1EP3OSvWgZN249v9kI2T6dw==","signatures":[{"sig":"MEUCIHXUvvx6xEjkjG7KLk3wTRYSRWWfbJJ7yhUBGMOR/ewQAiEAnLYUgy+FkfLI3feDgkB5vP5AOrwDxbAdJ7h+xKoOy0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1793584},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.kyndryl.net/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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/foundation/) 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/foundation/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/foundation/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":"37dfb098bed3938edc90980e7b84d6486353d2be","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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","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/foundation_1.0.0-beta.3_1690406793224_0.29575343692296685","host":"s3://npm-registry-packages"}},"1.0.0-beta.4":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.4","_id":"@kyndryl-design-system/foundation@1.0.0-beta.4","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":"c2d31344622141a6a130fd23fadfb90714a00ba9","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.4.tgz","fileCount":92,"integrity":"sha512-P2VjJ9mj++GLkOcrCCk1mp4UCt1CfEn9EzutnlZHLp5VI3movnfbOHUTdTrukjPN50x/X5Mq2WsjKTd6CuWcBg==","signatures":[{"sig":"MEUCIQCrG+9m/0tFMRbTaIeOG+/gydJYTieAqUL2I0cC9EubNQIgIbzvhpNvFOpm5IDiVwkGifE3JuOBA1ZKtSUA8h0k5Wo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1857008},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) 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/foundation/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/foundation/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":"b49e481ddbdd21fc68a4180bbcfcf50dd36049b0","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.4_1690910651386_0.3987148326460219","host":"s3://npm-registry-packages"}},"1.0.0-beta.5":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.5","_id":"@kyndryl-design-system/foundation@1.0.0-beta.5","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":"5f62ee14f4dabfabb8231a74edfd2869e010a587","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.5.tgz","fileCount":91,"integrity":"sha512-kyMPW5aTMlpk19L8llnNKNg+RUM8lJEP3c/8BQjZzRHOkUS7Nv8owx7ascrPi1e11jy14xs1SWMQ/QAfOtT1SQ==","signatures":[{"sig":"MEUCIQCq4kWQ3A0DzrYufJlZAfe8yD5Mf8hQo3iiwvso2vjiZgIgCyLIOIo+zhdPhQPDapG/ikSJKaOTHvFWpYSR+DUPn4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1855058},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) 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/foundation/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/foundation/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":"e468cd71cdf8668255fa111ab9dfe887e1ef26c9","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.5_1690920996396_0.3558916045620182","host":"s3://npm-registry-packages"}},"1.0.0-beta.6":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.6","_id":"@kyndryl-design-system/foundation@1.0.0-beta.6","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":"5b9ce3ac83339eb11647dbb46d4fe54b761bb01e","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.6.tgz","fileCount":91,"integrity":"sha512-OSDYgeFyk2ebaljQMPeuKufFTJjGPCcOJoebCYmCNyjMSilP0kwvifhGgrfRuC6SpmFvR9mWAB0+x8mrMn8nAw==","signatures":[{"sig":"MEYCIQC5IAUdLIxgtAlqdjV1Ahy28Kqc1YvbFOnkShQkwp5tuQIhANpFmXlin3Jr3V4+q1gCRXNoM9K68YyKtWpEMYEkkA30","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1842068},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) 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/foundation/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/foundation/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":"ad94ee61187e410baafc501aaa2e17ebe96372de","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.6_1690991771959_0.8191315988835766","host":"s3://npm-registry-packages"}},"1.0.0-beta.7":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.7","_id":"@kyndryl-design-system/foundation@1.0.0-beta.7","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":"623bf683baf55dcb73f5e1629c942b5e6e4fac1c","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.7.tgz","fileCount":91,"integrity":"sha512-fJtJZwAt5LtZxa7U7yFvJv3ER4omKVGY3v8xQU+HtK+gAJwd018AYjXPKAOLtf2tNVrvq8wSiTxUy5+ai+2kzA==","signatures":[{"sig":"MEQCIHkGpuLtZENvgBckPdI4nIe+Ep/N1oV/QZRyhi/ZLW6eAiAzh7bGopZIZjo4x0bDaMs6G6tj9olirfVUhZFWl6eUvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1844416},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) 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/foundation/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/foundation/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":"093f599bbc2709870d24434846bbc13574e96a12","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.7_1690992301513_0.37524455596077955","host":"s3://npm-registry-packages"}},"1.0.0-beta.8":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.8","_id":"@kyndryl-design-system/foundation@1.0.0-beta.8","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":"d8f8d0b83aff046d1c61558620a222a46b335f82","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.8.tgz","fileCount":91,"integrity":"sha512-l58H4DMpcYNi3g/tLwg+6Nz4su3JQmnb/IeYanN69L3/XQqWX0u3W3Z91oZzMgZbJolSExHBXo6xy3L3ZVNu+A==","signatures":[{"sig":"MEUCIQDVQgdqeAFW48fzp4DSJyE3xGoewOANPwbqte7EjYR31QIgYBaBeVYqQ5ipuQgB+NieQ2g+tUbKCYNx3xP9LW5wGlw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1858325},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) 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/foundation/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/foundation/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":"5b37532abf792a787aef3a08fad50627ea2b7487","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.8_1690994362452_0.8700875142374906","host":"s3://npm-registry-packages"}},"1.0.0-beta.9":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.9","_id":"@kyndryl-design-system/foundation@1.0.0-beta.9","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":"23a1ef0280d09a273fdd807edf2f105431bb9413","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.9.tgz","fileCount":91,"integrity":"sha512-ADHoN6pSt4QQq0MWgH/oQMvpeybcLnjrcHwfOpI5E8o0WgiyPC2aucRJE1gWjnRmovBB2JXspCFqEYPzo/YUVg==","signatures":[{"sig":"MEUCIDQLPbFNQAq2D/IMXd1r2mk0X4NnNV6gxniWqpBV+ZM2AiEApz/myhLa8GJde0Su/2txMoGvnxmEWE7nPt4YGNKi7/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1858255},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kyn-example>\n  <kyn-example-sub></kyn-example-sub>\n</kyn-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kyn-example-sub>Link</kyn-example-sub>\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":"04ab9c02a82f16affbbc0718f34330441bc1064d","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.9_1691765863596_0.6096231013049551","host":"s3://npm-registry-packages"}},"1.0.0-beta.10":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.10","_id":"@kyndryl-design-system/foundation@1.0.0-beta.10","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":"e96711233c0a0cbb83075772c541277368cbde7f","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.10.tgz","fileCount":91,"integrity":"sha512-9msdOeFbNePgWCdgTcBMde8nesFJbyNPulR55U3WWdZloFQAa4a5sBLw6CMZZSZLbbnsaXR+E82T/2RYcBs0pw==","signatures":[{"sig":"MEUCIBT5RrgkkYC7feEDdor/KXnN5eyM1R/L0yIbGeR5kzP9AiEAnA9KFSgM4o/yo0Npe8yorrB5xttL6ylajzUZV7/L1a4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1862054},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kyn-example>\n  <kyn-example-sub></kyn-example-sub>\n</kyn-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kyn-example-sub>Link</kyn-example-sub>\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":"5967184c6f8da4c1e58747d825d940af0164403b","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.10_1692025317051_0.7875349063292891","host":"s3://npm-registry-packages"}},"1.0.0-beta.11":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.11","_id":"@kyndryl-design-system/foundation@1.0.0-beta.11","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":"198e5cd6ef8c0941b38a0578615226ae5ec42253","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.11.tgz","fileCount":94,"integrity":"sha512-QhKiShvUl3ykocETxCWcLKXsDppHERcB4iACoXO5cJHzTJhEStL2/5ERQXsdOThEMbBmOAqBAX+5UaDqXDL4wg==","signatures":[{"sig":"MEUCIEBOP4tKwqIiwLxvo9abI9tD3HZluH6V9ivki4niGK60AiEAyHwFkexuD2xiPsd2DlOXSTo44wBZgDQOpck8X/DbbbY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1866622},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kyn-example>\n  <kyn-example-sub></kyn-example-sub>\n</kyn-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kyn-example-sub>Link</kyn-example-sub>\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":"f3140bae18bbe56bd8d40eeda8578e29b35d559d","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.11_1692113963178_0.03450619754947182","host":"s3://npm-registry-packages"}},"1.0.0-beta.12":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.12","_id":"@kyndryl-design-system/foundation@1.0.0-beta.12","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":"e7eea93a04a387bd6120e1b8a3f8ea4e686ae2d0","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.12.tgz","fileCount":94,"integrity":"sha512-8TsMqmW6OiaaWDFc9Kv5qhYIYglxSOT6j7Xi8jAmzPKei4P6UNF4DTtUZ4wE7L7HijmjsXKlDsf5v6GM1URr0w==","signatures":[{"sig":"MEUCIGY6M5saUol9y/VXu5UlMPh95ZyEjdqPkPtwf+qOgsT2AiEAzmcFbYhqUq6EcJZLOzrSkFsVkh38xN1CRe3gMGzvkKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1866961},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kyn-example>\n  <kyn-example-sub></kyn-example-sub>\n</kyn-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kyn-example-sub>Link</kyn-example-sub>\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":"f16f8c5b2122ec31e24469ee20b4d80f2035ed0d","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.12_1692198230008_0.9796857259262464","host":"s3://npm-registry-packages"}},"1.0.0-beta.13":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.13","_id":"@kyndryl-design-system/foundation@1.0.0-beta.13","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":"9e5cf0fa4bfc8d5c7b77a5b813014934bc0d72d5","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.13.tgz","fileCount":102,"integrity":"sha512-e0z2BzM1ksbsKh8y7sXZq+44BYjgVBLfe4PtyYv5WJuAdGUacYBYFi38uVCK1ZjbWn74lg332z+FCLdpZJcGRQ==","signatures":[{"sig":"MEQCIF24u7ltXMJAFogWS30t69r+23aayiQw3n2+MMx/QPV7AiBenLmYByUAAIum5D7q8dJjHGjAN63r2IPU0ZCr9oNf9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1884484},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kyn-example>\n  <kyn-example-sub></kyn-example-sub>\n</kyn-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kyn-example-sub>Link</kyn-example-sub>\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":"fbd2919ff0ff51d7d93a4b8c2f10e52c31752035","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.13_1692210949377_0.2544105992924006","host":"s3://npm-registry-packages"}},"1.0.0-beta.14":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.14","_id":"@kyndryl-design-system/foundation@1.0.0-beta.14","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":"20bfb0a6ca2188651e92b80eea32106080765a7f","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.14.tgz","fileCount":104,"integrity":"sha512-a1JOiTTaCpPn6ULUdUA8LBRyqEK4VV4clDH9Icw2I5gZiuwpjacluRry3mhBXjaLZW/CZRcyuhKSAw549fdqdw==","signatures":[{"sig":"MEUCIDWy/JoEtGNV0Rx/pBcHbM1fONgBwewKDEW7oZjR0JckAiEA61Sx0SpxvGl5hq4R+4FXSyqzKFagl7vIh7hRkGQq7iQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1886510},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kyn-example>\n  <kyn-example-sub></kyn-example-sub>\n</kyn-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kyn-example-sub>Link</kyn-example-sub>\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":"02d270c72ac79cf66142ae7d8b9d03d98281739d","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.14_1692212873817_0.16373730197109393","host":"s3://npm-registry-packages"}},"1.0.0-beta.15":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.15","_id":"@kyndryl-design-system/foundation@1.0.0-beta.15","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":"699179fe368a7820a32779bdafaea47df5f49420","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.15.tgz","fileCount":104,"integrity":"sha512-6e4vsSY4dbc0X0lgFMZs29BY7ylMBV0C7zXfcrQ5UAWIimhJo4UstO/nP9n/9LnSQeJ5f+Iuok1XRbp+rwGjRg==","signatures":[{"sig":"MEUCIHqTDtoVoDMpVWXzCrypNmgxNpFWSpjbcZMeROqJTmAUAiEA2YdOYAGiHxa0OR3kw6nclmL3T1lnh6ZCsnOBfi4a/fI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1887588},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kyn-example>\n  <kyn-example-sub></kyn-example-sub>\n</kyn-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kyn-example-sub>Link</kyn-example-sub>\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":"11799ddf5f8ba1d296feebcf26d6e47c9c2ba53f","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.15_1692215838413_0.22009003591225063","host":"s3://npm-registry-packages"}},"1.0.0-beta.16":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.16","_id":"@kyndryl-design-system/foundation@1.0.0-beta.16","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":"1b1f922b5d891ce45f08e2d986f50d04aa300927","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.16.tgz","fileCount":118,"integrity":"sha512-IMsAUsru/HX0BaXNQXaRbY8yty0DP3guEL49nKTLXKbC9G/8xreOOEeAyaDtt6gpyGhUNjyU1OYRioB6j7CoLw==","signatures":[{"sig":"MEQCIAVy7DGYEB42TLWDleR9jUULfxwuAUpe0S5N8CIAdOV0AiAj+1lqxGcpvMEJXz6ulmD09q6fQJOkL3kMtUZrCBT5Ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1901950},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kyn-example>\n  <kyn-example-sub></kyn-example-sub>\n</kyn-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kyn-example-sub>Link</kyn-example-sub>\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":"16045f596dcfb52a8c0f62586af1399ed4b5e489","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","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","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/foundation_1.0.0-beta.16_1692285509806_0.6641889255056967","host":"s3://npm-registry-packages"}},"1.0.0-beta.17":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.17","_id":"@kyndryl-design-system/foundation@1.0.0-beta.17","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":"cd4b1c9ca1e9fa71d525710d24d5cd2941fd23ab","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.17.tgz","fileCount":118,"integrity":"sha512-Sz6/bkADFbMVg+X10RisfYuLmTFOgf9oAgxFwnYGYb+jQxRGqjdZU8f7kQuZJdcIEU6pM/LF0LJIOXPWSgzOcQ==","signatures":[{"sig":"MEQCIE+iFHCOwB+RPM8b9UNWQ4OFprbfJ5XGJLQbFCXBd23+AiBjg12VrZ6GIV1JDt0U2fXzhNtXqkA0BOWveYiY4AHPng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1902097},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kyn-example>\n  <kyn-example-sub></kyn-example-sub>\n</kyn-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kyn-example-sub>Link</kyn-example-sub>\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":"5f4927421836b685df52770fc711f47d1f251b7e","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","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","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/foundation_1.0.0-beta.17_1692306769722_0.29882045977666927","host":"s3://npm-registry-packages"}},"1.0.0-beta.18":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.18","_id":"@kyndryl-design-system/foundation@1.0.0-beta.18","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":"e378a29a5a77b22c7efee0d170c909bb3faa1cd4","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.18.tgz","fileCount":118,"integrity":"sha512-Acsc/UN8YmjvTAkGl9va5mZVfuPk0dpxjeY6JSmP6GQ+434EoQCgLFhfSwc/2Fo1IIlhToo407WlrmfM3n9IOA==","signatures":[{"sig":"MEYCIQDc/p4/ZoXuL3kq1YOHX7KboeYgTlvBHF/HGQKfTOot9wIhAPmtg8A8dzWKDGguVS35JRUO23iRGroEntfAXiZnC3LH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1902306},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kyn-example>\n  <kyn-example-sub></kyn-example-sub>\n</kyn-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kyn-example-sub>Link</kyn-example-sub>\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":"2464ae960132b02b49e975d6d2a48a496c15495a","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.18_1692366853395_0.42955178608899147","host":"s3://npm-registry-packages"}},"1.0.0-beta.19":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.19","_id":"@kyndryl-design-system/foundation@1.0.0-beta.19","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":"4bb86101102a0b745345cdb37237a81ebca7e6e9","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.19.tgz","fileCount":118,"integrity":"sha512-2iRTU1bv89AFBJLv9yr0OzsIkCy/RHz1Dv4W5tlEBG8g3RXYovjzYjWIGW0llVmLSldGFuFlMtNidvVKVoKolQ==","signatures":[{"sig":"MEQCICFh3YkZU1xTt4TxW6N0YT2BqCD/7ILLfc3bgJhwlMzWAiAg1FfCgBtXUpZg15ryKpkwnUhWNJiHbNYi9IDc5WNBXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1890938},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kyn-example>\n  <kyn-example-sub></kyn-example-sub>\n</kyn-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kyn-example-sub>Link</kyn-example-sub>\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":"cf56148da2c01d4a76f345f120c20c56b3c6e7f2","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation for Kyndryl Design System","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","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","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/foundation_1.0.0-beta.19_1692373078589_0.6044323381726913","host":"s3://npm-registry-packages"}},"1.0.0-beta.20":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.20","_id":"@kyndryl-design-system/foundation@1.0.0-beta.20","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":"e5eccd459112e820cd4c62f1abe3f4865cd30bf3","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.20.tgz","fileCount":118,"integrity":"sha512-YPHqytLMKrC6PglBQgIIgo8EgTn5OcEtLxBpw7U/XN3IInBxoKPpfFw+TZnh6JgsVrWiPnTavcqRAmjFXyaWIw==","signatures":[{"sig":"MEUCIQDs7P9XLY87Pad1CrQU4dTCW6P6LcopSKBz/Vi68rNtqgIgU723iy3xxqn7Vos/dzH38eTXLdoDUDIfZf+ddaI212s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1922043},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kyn-example>\n  <kyn-example-sub></kyn-example-sub>\n</kyn-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kyn-example-sub>Link</kyn-example-sub>\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":"87b32d8ef71c8ce43cedb0b8e3e8fbee3d5eaf48","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.20_1692390181069_0.8736051270362086","host":"s3://npm-registry-packages"}},"1.0.0-beta.21":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.21","_id":"@kyndryl-design-system/foundation@1.0.0-beta.21","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":"ce6652e639e8aa5e73a74a3e8d4a11c4b1b8f968","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.21.tgz","fileCount":118,"integrity":"sha512-w75joUGr2fstFvuOjRAZdTfVsNTqqPJjjY/P2mHQrKVnb4rTNqwkcCotRBpTDYqq1+jxY509uKJAZBzg8rUW+g==","signatures":[{"sig":"MEQCIHp44gilG4VPj7i7LGr28Tgn2EY3yOTeupgfBfFs864pAiA+mxwDTIIQphPs9yaLso1mF+72z657R4Pu7RnT2kXXjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1921950},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Kyndryl Design System - Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kyn-example>\n  <kyn-example-sub></kyn-example-sub>\n</kyn-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kyn-example-sub>Link</kyn-example-sub>\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":"a934c3e291c9caef3543f00a209ea818ec56f209","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Foundation 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","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/foundation_1.0.0-beta.21_1692391370528_0.011716237502761295","host":"s3://npm-registry-packages"}},"1.0.0-beta.22":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.22","_id":"@kyndryl-design-system/foundation@1.0.0-beta.22","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":"7744c1687971ee0c282913234b1dadac5e378342","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.22.tgz","fileCount":115,"integrity":"sha512-JFjz/AoqOnnnCecHpbDMG/KWK9BRNIBBoVlaG6pGfa3zcRJ/CQmEbT9rZQaGJbi41GmWhWC7ohCaDbxZemYdCQ==","signatures":[{"sig":"MEUCIFsEXhQlQvkbygxqv/2bDNqBl3ESx5ngg/F5IApHZ8feAiEAuiIcd41GxXo+mh5iydrk7C3kbGu7jG2EvIWi3+NDLh0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1890239},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Shidoka Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kd-example>\n  <kd-example-sub></kd-example-sub>\n</kd-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kd-example-sub></kd-example-sub>\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":"7876fdfba19fe41bb7340fe46affbc92a6bdb32b","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Shidoka Foundation","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","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","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/foundation_1.0.0-beta.22_1692973284112_0.9974339624568713","host":"s3://npm-registry-packages"}},"1.0.0-beta.23":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.23","_id":"@kyndryl-design-system/foundation@1.0.0-beta.23","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":"51d0c74b77831eb4f8de4d06b173e1400850e541","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.23.tgz","fileCount":115,"integrity":"sha512-ROSKKkpqEnDjC1HpkccthNx5ZechSX4Lovn310YunxHjBpqIDeVoMeMdi6m77AhuLGuzUj1qK9jY6euMRlamAw==","signatures":[{"sig":"MEYCIQD/FgFkiHyCqG8sJTmwMBq4QZMiqL02IqeeafnMV1fIFQIhAK5t7xGlEbgLgxKl5buJcuceh41glcrS84ijda4alRu/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1890131},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Shidoka Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kd-example>\n  <kd-example-sub></kd-example-sub>\n</kd-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kd-example-sub></kd-example-sub>\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":"afdee2b379314ca6bdb8d21dcf1e3ea81832fb9f","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Shidoka Foundation","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","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","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/foundation_1.0.0-beta.23_1693246444838_0.9185752540349201","host":"s3://npm-registry-packages"}},"1.0.0-beta.24":{"name":"@kyndryl-design-system/foundation","version":"1.0.0-beta.24","_id":"@kyndryl-design-system/foundation@1.0.0-beta.24","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":"3b50df4718d6f838a111341f10d4d689061bcbdc","tarball":"https://registry.npmjs.org/@kyndryl-design-system/foundation/-/foundation-1.0.0-beta.24.tgz","fileCount":118,"integrity":"sha512-A/ZJvHincmqg0jxWZtgas9fS00h+Q5HfohmJ2U+LfBUpUHDTb2svqvfKMTRWSbDFrlw6s27CwwYfaoPUFWQjvw==","signatures":[{"sig":"MEYCIQDtbNdFToTZ0Hjp6PkCT7Fp1FCf/Ppr2BltGWJBjN1+YAIhANnEVVTiSnwfgzr6KTPrcmUKgWFjakJ2w3sfSrTPPlmy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1906902},"main":"index.js","type":"module","types":"./index.d.ts","readme":"# Shidoka Foundation\n\n[![kyndryl-foundation](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml/badge.svg)](https://github.com/kyndryl-design-system/foundation/actions/workflows/actions.yml)\n\n# Contributing to this project\n\nRead the [Contributing Guide](https://github.com/kyndryl-design-system/foundation/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/foundation -S\n\n# beta (use until first stable release)\nnpm install @kyndryl-design-system/foundation@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.\n\n## Start using components\n\nSee [Storybook](https://kyndryl-design-system.github.io/foundation/) for the full components documentation.\n\n### Example: Component with Sub-components\n\nThis example imports a component AND all of it's subcomponents by targeting the index file.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example';\n```\n\n```html\n<kd-example>\n  <kd-example-sub></kd-example-sub>\n</kd-example>\n```\n\n### Example: Single Component\n\nThis example imports one specific component by targeting the component file directly.\n\n```js\nimport '@kyndryl-design-system/foundation/components/example/example-sub';\n```\n\n```html\n<kd-example-sub></kd-example-sub>\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":"2057a048bb5a1190e4723a7740b0a040e9a94424","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/scss/utility:dist/css","sass-prod":"sass --no-source-map --style=compressed src/scss/utility:dist/css","sass-root":"sass --no-source-map --style=compressed src/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":"Shidoka Foundation","directories":{},"lint-staged":{"*.--write":"prettier --write","*.{js,ts}":"eslint --cache --fix"},"_nodeVersion":"18.17.1","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","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/foundation_1.0.0-beta.24_1693414801693_0.9920866185263224","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-07-26T19:44:34.264Z","modified":"2026-09-24T20:29:28.055Z","1.0.0-beta.1":"2023-07-26T19:44:34.664Z","1.0.0-beta.2":"2023-07-26T20:23:25.052Z","1.0.0-beta.3":"2023-07-26T21:26:33.422Z","1.0.0-beta.4":"2023-08-01T17:24:11.682Z","1.0.0-beta.5":"2023-08-01T20:16:36.618Z","1.0.0-beta.6":"2023-08-02T15:56:12.223Z","1.0.0-beta.7":"2023-08-02T16:05:01.995Z","1.0.0-beta.8":"2023-08-02T16:39:22.701Z","1.0.0-beta.9":"2023-08-11T14:57:43.788Z","1.0.0-beta.10":"2023-08-14T15:01:57.388Z","1.0.0-beta.11":"2023-08-15T15:39:23.379Z","1.0.0-beta.12":"2023-08-16T15:03:50.282Z","1.0.0-beta.13":"2023-08-16T18:35:49.644Z","1.0.0-beta.14":"2023-08-16T19:07:54.061Z","1.0.0-beta.15":"2023-08-16T19:57:18.703Z","1.0.0-beta.16":"2023-08-17T15:18:30.286Z","1.0.0-beta.17":"2023-08-17T21:12:50.016Z","1.0.0-beta.18":"2023-08-18T13:54:13.731Z","1.0.0-beta.19":"2023-08-18T15:37:58.952Z","1.0.0-beta.20":"2023-08-18T20:23:01.337Z","1.0.0-beta.21":"2023-08-18T20:42:50.826Z","1.0.0-beta.22":"2023-08-25T14:21:24.391Z","1.0.0-beta.23":"2023-08-28T18:14:05.146Z","1.0.0-beta.24":"2023-08-30T17:00:02.176Z"},"description":"Foundation for Kyndryl Design System","maintainers":[{"email":"brianthefro@gmail.com","name":"frodesigns"},{"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":""}