@carbon/ibm-products-web-components 0.3.0-canary.26 → 0.3.0-canary.30

package/.storybook/main.ts

@@ -1,9 +1,20 @@
 import { mergeConfig } from 'vite';
 import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader';
 import viteSVGResultCarbonIconLoader from '../tools/vite-svg-result-carbon-icon-loader';
-
+const glob = require('fast-glob');
+const stories = glob.sync(
+  [
+    '../docs/**/*.mdx',
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  {
+    ignore: ['../src/**/docs/*.mdx'],
+    cwd: __dirname,
+  }
+);
 const config = {
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: stories,
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-toolbars',
@@ -23,9 +34,6 @@ const config = {
     name: '@storybook/web-components-vite',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
   async viteFinal(config) {
     return mergeConfig(config, {
       plugins: [

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.3.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-web-components@0.3.0-rc.1...@carbon/ibm-products-web-components@0.3.0) (2024-11-20)
+
+**Note:** Version bump only for package @carbon/ibm-products-web-components
+
+
+
+
+
 # 0.3.0-rc.1 (2024-11-15)
 
 

package/es/components/side-panel/side-panel.d.ts

@@ -338,13 +338,13 @@ declare const CDSSidePanel_base: {
 /**
  * SidePanel.
  *
- * @element cds-side-panel
+ * @element c4p-side-panel
  * @csspart dialog The dialog.
- * @fires cds-side-panel-beingclosed
+ * @fires c4p-side-panel-beingclosed
  *   The custom event fired before this side-panel is being closed upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of closing this side-panel.
- * @fires cds-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.
- * @fires cds-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)
+ * @fires c4p-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.
+ * @fires c4p-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)
  */
 declare class CDSSidePanel extends CDSSidePanel_base {
     /**

package/es/components/side-panel/side-panel.js

@@ -73,13 +73,13 @@ function tryFocusElements(elements, reverse) {
 /**
  * SidePanel.
  *
- * @element cds-side-panel
+ * @element c4p-side-panel
  * @csspart dialog The dialog.
- * @fires cds-side-panel-beingclosed
+ * @fires c4p-side-panel-beingclosed
  *   The custom event fired before this side-panel is being closed upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of closing this side-panel.
- * @fires cds-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.
- * @fires cds-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)
+ * @fires c4p-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.
+ * @fires c4p-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)
  */
 let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
     constructor() {
@@ -660,7 +660,7 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
                 await this.constructor._delay();
                 if (focusNode) {
                     // For cases where a `carbon-web-components` component (e.g. `<cds-button>`) being `primaryFocusNode`,
-                    // where its first update/render cycle that makes it focusable happens after `<cds-side-panel>`'s first update/render cycle
+                    // where its first update/render cycle that makes it focusable happens after `<c4p-side-panel>`'s first update/render cycle
                     focusNode.focus();
                 }
                 else if (!tryFocusElements(this.querySelectorAll(this.constructor.selectorTabbable))) {

package/es/globals/internal/storybook-cdn.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import packageJson from '../../packages/ibm-products-web-components/package.json.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+/* eslint-disable max-len */
+
+/**
+ *
+ */
+/**
+ * Renders the component(s) script tag content and returns back the string
+ *
+ * @param {Array} components array of component names
+ * @param {string} tag tag folder
+ */
+function _renderScript(components, tag) {
+  let scripts = '';
+  components.forEach((component) => {
+    scripts += `<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/${tag}/${component}.min.js"></script>\n`;
+  });
+  return scripts;
+}
+
+/**
+ * This is the markdown block for JS via CDN
+ *
+ * @param {Array} components array of components to render
+ * @param components.components components to render
+ */
+const cdnJs = ({ components }) => {
+  return `
+### JS (via CDN)
+
+ > NOTE: Only one version of artifacts should be used. Mixing versions will cause rendering issues.
+
+ \`\`\`html
+ // SPECIFIC VERSION (available starting v2.0.0)
+ ${_renderScript(components, `version/v${packageJson.version}`)}
+ \`\`\`
+
+ #### Right-to-left (RTL) versions
+
+ \`\`\`html
+ // SPECIFIC VERSION (available starting v2.0.0)
+ ${_renderScript(components, `version/v${packageJson.version}`)}
+ \`\`\`
+   `;
+};
+
+/**
+ * This is the markdown block for CSS via CDN
+ */
+const cdnCss = () => {
+  return `
+### Carbon CDN style helpers (optional)
+
+There are optional CDN artifacts available that can assist with global Carbon
+styles in lieu of including into your specific application bundle.
+
+[Click here to learn more](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/docs/carbon-cdn-style-helpers.md)\n\n
+  `;
+};
+
+export { cdnCss, cdnJs };
+//# sourceMappingURL=storybook-cdn.js.map

package/es/globals/internal/storybook-cdn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storybook-cdn.js","sources":["../../../src/globals/internal/storybook-cdn.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2021, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport packageJson from '../../../package.json';\n\n/* eslint-disable max-len */\n\n/**\n *\n */\n/**\n * Renders the component(s) script tag content and returns back the string\n *\n * @param {Array} components array of component names\n * @param {string} tag tag folder\n */\nfunction _renderScript(components, tag) {\n  let scripts = '';\n  components.forEach((component) => {\n    scripts += `<script type=\"module\" src=\"https://1.www.s81c.com/common/carbon/web-components/${tag}/${component}.min.js\"></script>\\n`;\n  });\n  return scripts;\n}\n\n/**\n * This is the markdown block for JS via CDN\n *\n * @param {Array} components array of components to render\n * @param components.components components to render\n */\nexport const cdnJs = ({ components }) => {\n  return `\n### JS (via CDN)\n\n > NOTE: Only one version of artifacts should be used. Mixing versions will cause rendering issues.\n\n \\`\\`\\`html\n // SPECIFIC VERSION (available starting v2.0.0)\n ${_renderScript(components, `version/v${packageJson.version}`)}\n \\`\\`\\`\n\n #### Right-to-left (RTL) versions\n\n \\`\\`\\`html\n // SPECIFIC VERSION (available starting v2.0.0)\n ${_renderScript(components, `version/v${packageJson.version}`)}\n \\`\\`\\`\n   `;\n};\n\n/**\n * This is the markdown block for CSS via CDN\n */\nexport const cdnCss = () => {\n  return `\n### Carbon CDN style helpers (optional)\n\nThere are optional CDN artifacts available that can assist with global Carbon\nstyles in lieu of including into your specific application bundle.\n\n[Click here to learn more](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/docs/carbon-cdn-style-helpers.md)\\n\\n\n  `;\n};\n"],"names":[],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAIA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS,aAAa,CAAC,UAAU,EAAE,GAAG,EAAE;AACxC,EAAE,IAAI,OAAO,GAAG,EAAE;AAClB,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,KAAK;AACpC,IAAI,OAAO,IAAI,CAAC,+EAA+E,EAAE,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,oBAAoB,CAAC;AACvI,GAAG,CAAC;AACJ,EAAE,OAAO,OAAO;AAChB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACY,MAAC,KAAK,GAAG,CAAC,EAAE,UAAU,EAAE,KAAK;AACzC,EAAE,OAAO;AACT;;AAEA;;AAEA;AACA;AACA,CAAC,EAAE,aAAa,CAAC,UAAU,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;AAC/D;;AAEA;;AAEA;AACA;AACA,CAAC,EAAE,aAAa,CAAC,UAAU,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;AAC/D;AACA,GAAG,CAAC;AACJ;;AAEA;AACA;AACA;AACY,MAAC,MAAM,GAAG,MAAM;AAC5B,EAAE,OAAO;AACT;;AAEA;AACA;;AAEA;AACA,EAAE,CAAC;AACH;;;;"}

package/es/packages/ibm-products-web-components/package.json.js

@@ -0,0 +1,121 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var name = "@carbon/ibm-products-web-components";
+var description = "Carbon for IBM Products Web Components";
+var version = "0.3.0";
+var license = "Apache-2.0";
+var main = "es/index.js";
+var module = "es/index.js";
+var type = "module";
+var bugs = "https://github.com/carbon-design-system/ibm-products/issues";
+var repository = {
+	type: "git",
+	url: "https://github.com/carbon-design-system/ibm-products.git",
+	directory: "packages/ibm-products-web-components"
+};
+var publishConfig = {
+	access: "public",
+	provenance: true
+};
+var exports = {
+	"./es/components/*": {
+		node: "./lib/components/*",
+		"default": "./es/components/*"
+	},
+	"./es/globals/*": {
+		node: "./lib/globals/*",
+		"default": "./es/globals/*"
+	},
+	"./es/*": "./es/*",
+	"./lib/*": "./lib/*",
+	"./custom-elements.json": "./custom-elements.json",
+	"./package.json": "./package.json"
+};
+var keywords = [
+	"carbon",
+	"carbon design system",
+	"carbon community",
+	"carbon for ibm products",
+	"carbon for ibm products web components",
+	"web components"
+];
+var scripts = {
+	build: "node tasks/build.js && yarn wca",
+	"build:storybook": "storybook build",
+	clean: "rimraf es lib scss dist storybook-static",
+	preview: "vite preview",
+	storybook: "storybook dev -p 3000",
+	test: "vitest run",
+	"test:ui": "vitest --ui",
+	wca: "web-component-analyzer analyze src --outFile custom-elements.json"
+};
+var dependencies = {
+	"@carbon/ibm-products-styles": "^2.50.0",
+	"@carbon/styles": "1.68.0",
+	"@carbon/web-components": "2.16.0",
+	lit: "^3.1.0"
+};
+var devDependencies = {
+	"@carbon/icons": "^11.52.0",
+	"@carbon/motion": "^11.24.0",
+	"@mordech/vite-lit-loader": "^0.35.0",
+	"@rollup/plugin-alias": "^5.1.1",
+	"@rollup/plugin-commonjs": "^28.0.1",
+	"@rollup/plugin-json": "^6.1.0",
+	"@rollup/plugin-node-resolve": "^15.3.0",
+	"@rollup/plugin-typescript": "^12.1.1",
+	"@storybook/addon-essentials": "^8.3.6",
+	"@storybook/addon-links": "^8.3.6",
+	"@storybook/addon-storysource": "^8.3.6",
+	"@storybook/addon-toolbars": "^8.3.6",
+	"@storybook/blocks": "^8.3.6",
+	"@storybook/theming": "^8.3.6",
+	"@storybook/web-components": "^8.3.6",
+	"@storybook/web-components-vite": "^8.3.6",
+	"@types/jest": "^29.5.13",
+	"@vitest/browser": "latest",
+	"@vitest/ui": "latest",
+	autoprefixer: "^10.4.20",
+	cssnano: "^7.0.6",
+	eslint: "^9.11.1",
+	"eslint-config-carbon": "3.17.1",
+	globby: "^14.0.2",
+	"happy-dom": "^15.11.6",
+	postcss: "^8.4.47",
+	"remark-gfm": "^4.0.0",
+	rimraf: "^5.0.5",
+	rollup: "^4.27.3",
+	"rollup-plugin-copy": "^3.5.0",
+	sass: "^1.80.6",
+	storybook: "^8.2.8",
+	"storybook-addon-accessibility-checker": "^3.1.61-rc.3",
+	typescript: "^5.5.3",
+	vite: "^5.4.1",
+	vitest: "^2.1.2",
+	"web-component-analyzer": "2.0.0"
+};
+var packageJson = {
+	name: name,
+	description: description,
+	version: version,
+	license: license,
+	main: main,
+	module: module,
+	type: type,
+	bugs: bugs,
+	repository: repository,
+	publishConfig: publishConfig,
+	exports: exports,
+	keywords: keywords,
+	scripts: scripts,
+	dependencies: dependencies,
+	devDependencies: devDependencies
+};
+
+export { bugs, packageJson as default, dependencies, description, devDependencies, exports, keywords, license, main, module, name, publishConfig, repository, scripts, type, version };
+//# sourceMappingURL=package.json.js.map

package/es/packages/ibm-products-web-components/package.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"package.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/side-panel/side-panel.d.ts

@@ -338,13 +338,13 @@ declare const CDSSidePanel_base: {
 /**
  * SidePanel.
  *
- * @element cds-side-panel
+ * @element c4p-side-panel
  * @csspart dialog The dialog.
- * @fires cds-side-panel-beingclosed
+ * @fires c4p-side-panel-beingclosed
  *   The custom event fired before this side-panel is being closed upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of closing this side-panel.
- * @fires cds-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.
- * @fires cds-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)
+ * @fires c4p-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.
+ * @fires c4p-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)
  */
 declare class CDSSidePanel extends CDSSidePanel_base {
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-web-components",
   "description": "Carbon for IBM Products Web Components",
-  "version": "0.3.0-canary.26+2461f8120",
+  "version": "0.3.0-canary.30+cdd0b8eb3",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -49,7 +49,7 @@
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
   },
   "dependencies": {
-    "@carbon/ibm-products-styles": "^2.50.0-rc.1",
+    "@carbon/ibm-products-styles": "^2.50.0",
     "@carbon/styles": "1.68.0",
     "@carbon/web-components": "2.16.0",
     "lit": "^3.1.0"
@@ -60,6 +60,7 @@
     "@mordech/vite-lit-loader": "^0.35.0",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-typescript": "^12.1.1",
     "@storybook/addon-essentials": "^8.3.6",
@@ -92,5 +93,5 @@
     "vitest": "^2.1.2",
     "web-component-analyzer": "2.0.0"
   },
-  "gitHead": "2461f8120431c125ceb826ccb5d139a82d49f39c"
+  "gitHead": "cdd0b8eb39c0c4fd149bc77856385f6cd8c54fcc"
 }

package/src/components/side-panel/side-panel.mdx

@@ -6,12 +6,6 @@ import * as SidePanelStories from './side-panel.stories';
 
 # SidePanel
 
-> 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/side-panel)
-> example implementation.
-
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/side-panel)
-
 Side panels keep users in-context of a page while performing tasks like
 navigating, editing, viewing details, or configuring something new.
 
@@ -22,16 +16,13 @@ Here's a quick example to get you started.
 ### JS (via import)
 
 ```javascript
-import '@carbon/web-components/es/components/side-panel/index.js';
+import '@carbon/ibm-products-web-components/es/components/side-panel/index.js';
 // The following are used for slotted fields
 import '@carbon/web-components/es/components/text-input/index.js';
 import '@carbon/web-components/es/components/textarea/index.js';
 import '@carbon/web-components/es/components/button/index.js';
 ```
 
-<Markdown>{`${cdnJs({ components: ['side-panel'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
 ### HTML
 
 ```html

package/src/components/side-panel/side-panel.stories.ts

@@ -432,7 +432,7 @@ const defaultTemplate = {
         size=${args.size}
         ?slide-in=${args.slideIn}
         .title=${args.title}
-        @cds-side-panel-navigate-back=${prevStep}
+        @c4p-side-panel-navigate-back=${prevStep}
       >
         <!-- default slotted content -->
         ${args.content}

package/src/components/side-panel/side-panel.ts

@@ -85,13 +85,13 @@ function tryFocusElements(elements: NodeListOf<HTMLElement>, reverse: boolean) {
 /**
  * SidePanel.
  *
- * @element cds-side-panel
+ * @element c4p-side-panel
  * @csspart dialog The dialog.
- * @fires cds-side-panel-beingclosed
+ * @fires c4p-side-panel-beingclosed
  *   The custom event fired before this side-panel is being closed upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of closing this side-panel.
- * @fires cds-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.
- * @fires cds-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)
+ * @fires c4p-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.
+ * @fires c4p-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)
  */
 @customElement(`${prefix}-side-panel`)
 class CDSSidePanel extends HostListenerMixin(LitElement) {
@@ -913,7 +913,7 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
         await (this.constructor as typeof CDSSidePanel)._delay();
         if (focusNode) {
           // For cases where a `carbon-web-components` component (e.g. `<cds-button>`) being `primaryFocusNode`,
-          // where its first update/render cycle that makes it focusable happens after `<cds-side-panel>`'s first update/render cycle
+          // where its first update/render cycle that makes it focusable happens after `<c4p-side-panel>`'s first update/render cycle
           (focusNode as HTMLElement).focus();
         } else if (
           !tryFocusElements(

package/src/components/tearsheet/tearsheet.mdx

@@ -6,12 +6,6 @@ import * as TearsheetStories from './tearsheet.stories';
 
 # Tearsheet
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tearsheet)
-> example implementation.
-
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tearsheet)
-
 Tearsheets keep users in-context of a page while performing tasks like
 navigating, editing, viewing details, or configuring something new.
 
@@ -22,15 +16,13 @@ Here's a quick example to get you started.
 ### JS (via import)
 
 ```javascript
-import '@carbon/web-components/es/components/tearsheet/index.js';
+import '@carbon/ibm-products-web-components/es/components/tearsheet/index.js';
 // The following are used for slotted fields
 import '@carbon/web-components/es/components/text-input/index.js';
 import '@carbon/web-components/es/components/textarea/index.js';
 import '@carbon/web-components/es/components/button/index.js';
 ```
 
-<Markdown>{`${cdnJs({ components: ['tearsheet'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 

package/src/globals/internal/storybook-cdn.ts

@@ -0,0 +1,69 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import packageJson from '../../../package.json';
+
+/* eslint-disable max-len */
+
+/**
+ *
+ */
+/**
+ * Renders the component(s) script tag content and returns back the string
+ *
+ * @param {Array} components array of component names
+ * @param {string} tag tag folder
+ */
+function _renderScript(components, tag) {
+  let scripts = '';
+  components.forEach((component) => {
+    scripts += `<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/${tag}/${component}.min.js"></script>\n`;
+  });
+  return scripts;
+}
+
+/**
+ * This is the markdown block for JS via CDN
+ *
+ * @param {Array} components array of components to render
+ * @param components.components components to render
+ */
+export const cdnJs = ({ components }) => {
+  return `
+### JS (via CDN)
+
+ > NOTE: Only one version of artifacts should be used. Mixing versions will cause rendering issues.
+
+ \`\`\`html
+ // SPECIFIC VERSION (available starting v2.0.0)
+ ${_renderScript(components, `version/v${packageJson.version}`)}
+ \`\`\`
+
+ #### Right-to-left (RTL) versions
+
+ \`\`\`html
+ // SPECIFIC VERSION (available starting v2.0.0)
+ ${_renderScript(components, `version/v${packageJson.version}`)}
+ \`\`\`
+   `;
+};
+
+/**
+ * This is the markdown block for CSS via CDN
+ */
+export const cdnCss = () => {
+  return `
+### Carbon CDN style helpers (optional)
+
+There are optional CDN artifacts available that can assist with global Carbon
+styles in lieu of including into your specific application bundle.
+
+[Click here to learn more](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/docs/carbon-cdn-style-helpers.md)\n\n
+  `;
+};

package/tasks/build.js

@@ -22,6 +22,7 @@ import nodeResolve from '@rollup/plugin-node-resolve';
 import path from 'path';
 import postcss from 'postcss';
 import typescript from '@rollup/plugin-typescript';
+import json from '@rollup/plugin-json';
 
 import * as packageJson from '../package.json' assert { type: 'json' };
 
@@ -125,6 +126,7 @@ function getRollupConfig(input, rootDir, outDir, iconInput) {
         targets: [{ src: 'src/components/**/*.scss', dest: 'scss' }],
         flatten: false,
       }),
+      [json()],
       nodeResolve({
         browser: true,
         mainFields: ['jsnext', 'module', 'main'],