@carbon/ibm-products-web-components 0.3.0-canary.6 → 0.3.0-canary.60

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/globals/settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings.js","sources":["../../src/globals/settings.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;;;;;;AAMG;AAEG,MAAA,MAAM,GAAG,MAAM;AACf,MAAA,YAAY,GAAG,MAAM;AAE3B;;;AAGG;AACH,MAAM,gBAAgB,GAAG,CAAA;IACrB,MAAM,CAAA;IACN,MAAM,CAAA;IACN,MAAM,CAAA;;;;;"}
+{"version":3,"file":"settings.js","sources":["../../src/globals/settings.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;;;;;;AAMG;AAEG,MAAA,MAAM,GAAG;AACT,MAAA,YAAY,GAAG;AAErB;;;AAGG;AACH,MAAM,gBAAgB,GAAG;IACrB,MAAM,CAAA;IACN,MAAM,CAAA;IACN,MAAM,CAAA;;;;;"}

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.4.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.51.0",
+	"@carbon/styles": "1.70.0",
+	"@carbon/web-components": "2.18.0",
+	lit: "^3.1.0"
+};
+var devDependencies = {
+	"@carbon/icons": "^11.53.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.4.5",
+	"@storybook/addon-links": "^8.4.5",
+	"@storybook/addon-storysource": "^8.4.5",
+	"@storybook/addon-toolbars": "^8.4.5",
+	"@storybook/blocks": "^8.4.5",
+	"@storybook/theming": "^8.4.5",
+	"@storybook/web-components": "^8.4.5",
+	"@storybook/web-components-vite": "^8.4.5",
+	"@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.4.5",
+	"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/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","sources":["../../../src/components/side-panel/defs.ts"],"sourcesContent":[null],"names":["SIDE_PANEL_SIZE","SIDE_PANEL_PLACEMENT"],"mappings":";;;;;;;;;AAAA;;;;;;;AAOG;AAEH;;AAEG;AACSA,iCAyBX;AAzBD,CAAA,UAAY,eAAe,EAAA;AACzB;;AAEG;AACH,IAAA,eAAA,CAAA,aAAA,CAAA,GAAA,IAAkB,CAAA;AAElB;;AAEG;AACH,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,IAAY,CAAA;AAEZ;;AAEG;AACH,IAAA,eAAA,CAAA,QAAA,CAAA,GAAA,IAAa,CAAA;AAEb;;AAEG;AACH,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,IAAY,CAAA;AAEZ;;AAEG;AACH,IAAA,eAAA,CAAA,mBAAA,CAAA,GAAA,KAAyB,CAAA;AAC3B,CAAC,EAzBWA,uBAAe,KAAfA,uBAAe,GAyB1B,EAAA,CAAA,CAAA,CAAA;AAEWC,sCAMX;AAND,CAAA,UAAY,oBAAoB,EAAA;;AAE9B,IAAA,oBAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;;AAGf,IAAA,oBAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACf,CAAC,EANWA,4BAAoB,KAApBA,4BAAoB,GAM/B,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"defs.js","sources":["../../../src/components/side-panel/defs.ts"],"sourcesContent":[null],"names":["SIDE_PANEL_SIZE","SIDE_PANEL_PLACEMENT"],"mappings":";;;;;;;;;AAAA;;;;;;;AAOG;AAEH;;AAEG;AACSA;AAAZ,CAAA,UAAY,eAAe,EAAA;AACzB;;AAEG;AACH,IAAA,eAAA,CAAA,aAAA,CAAA,GAAA,IAAkB;AAElB;;AAEG;AACH,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AAEZ;;AAEG;AACH,IAAA,eAAA,CAAA,QAAA,CAAA,GAAA,IAAa;AAEb;;AAEG;AACH,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AAEZ;;AAEG;AACH,IAAA,eAAA,CAAA,mBAAA,CAAA,GAAA,KAAyB;AAC3B,CAAC,EAzBWA,uBAAe,KAAfA,uBAAe,GAyB1B,EAAA,CAAA,CAAA;AAEWC;AAAZ,CAAA,UAAY,oBAAoB,EAAA;;AAE9B,IAAA,oBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;;AAGf,IAAA,oBAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EANWA,4BAAoB,KAApBA,4BAAoB,GAM/B,EAAA,CAAA,CAAA;;"}

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/lib/components/tearsheet/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","sources":["../../../src/components/tearsheet/defs.ts"],"sourcesContent":[null],"names":["TEARSHEET_INFLUENCER_PLACEMENT","TEARSHEET_INFLUENCER_WIDTH","TEARSHEET_WIDTH"],"mappings":";;;;;;;;;AAAA;;;;;;;AAOG;AAESA,gDAMX;AAND,CAAA,UAAY,8BAA8B,EAAA;;AAExC,IAAA,8BAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;;AAGf,IAAA,8BAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACf,CAAC,EANWA,sCAA8B,KAA9BA,sCAA8B,GAMzC,EAAA,CAAA,CAAA,CAAA;AAEWC,4CAKX;AALD,CAAA,UAAY,0BAA0B,EAAA;;AAEpC,IAAA,0BAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;;AAEjB,IAAA,0BAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACf,CAAC,EALWA,kCAA0B,KAA1BA,kCAA0B,GAKrC,EAAA,CAAA,CAAA,CAAA;AAEWC,iCAKX;AALD,CAAA,UAAY,eAAe,EAAA;;AAEzB,IAAA,eAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;;AAEjB,IAAA,eAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACf,CAAC,EALWA,uBAAe,KAAfA,uBAAe,GAK1B,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"defs.js","sources":["../../../src/components/tearsheet/defs.ts"],"sourcesContent":[null],"names":["TEARSHEET_INFLUENCER_PLACEMENT","TEARSHEET_INFLUENCER_WIDTH","TEARSHEET_WIDTH"],"mappings":";;;;;;;;;AAAA;;;;;;;AAOG;AAESA;AAAZ,CAAA,UAAY,8BAA8B,EAAA;;AAExC,IAAA,8BAAA,CAAA,OAAA,CAAA,GAAA,OAAe;;AAGf,IAAA,8BAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EANWA,sCAA8B,KAA9BA,sCAA8B,GAMzC,EAAA,CAAA,CAAA;AAEWC;AAAZ,CAAA,UAAY,0BAA0B,EAAA;;AAEpC,IAAA,0BAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;;AAEjB,IAAA,0BAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EALWA,kCAA0B,KAA1BA,kCAA0B,GAKrC,EAAA,CAAA,CAAA;AAEWC;AAAZ,CAAA,UAAY,eAAe,EAAA;;AAEzB,IAAA,eAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;;AAEjB,IAAA,eAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACf,CAAC,EALWA,uBAAe,KAAfA,uBAAe,GAK1B,EAAA,CAAA,CAAA;;"}

package/lib/globals/settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings.js","sources":["../../src/globals/settings.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAAA;;;;;;AAMG;AAEG,MAAA,MAAM,GAAG,MAAM;AACf,MAAA,YAAY,GAAG,MAAM;AAE3B;;;AAGG;AACH,MAAM,gBAAgB,GAAG,CAAA;IACrB,MAAM,CAAA;IACN,MAAM,CAAA;IACN,MAAM,CAAA;;;;;;;"}
+{"version":3,"file":"settings.js","sources":["../../src/globals/settings.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAAA;;;;;;AAMG;AAEG,MAAA,MAAM,GAAG;AACT,MAAA,YAAY,GAAG;AAErB;;;AAGG;AACH,MAAM,gBAAgB,GAAG;IACrB,MAAM,CAAA;IACN,MAAM,CAAA;IACN,MAAM,CAAA;;;;;;;"}

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.6+69b296895",
+  "version": "0.3.0-canary.60+bea9003e1",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -49,27 +49,28 @@
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
   },
   "dependencies": {
-    "@carbon/ibm-products-styles": "^2.50.0-canary.6+69b296895",
-    "@carbon/styles": "1.68.0",
-    "@carbon/web-components": "2.16.0",
+    "@carbon/ibm-products-styles": "^2.50.0-canary.60+bea9003e1",
+    "@carbon/styles": "1.70.0",
+    "@carbon/web-components": "2.18.0",
     "lit": "^3.1.0"
   },
   "devDependencies": {
-    "@carbon/icons": "^11.52.0",
+    "@carbon/icons": "^11.53.0",
     "@carbon/motion": "^11.24.0",
     "@mordech/vite-lit-loader": "^0.35.0",
     "@rollup/plugin-alias": "^5.1.1",
-    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-typescript": "^12.1.0",
-    "@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",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/addon-storysource": "^8.4.5",
+    "@storybook/addon-toolbars": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/theming": "^8.4.5",
+    "@storybook/web-components": "^8.4.5",
+    "@storybook/web-components-vite": "^8.4.5",
     "@types/jest": "^29.5.13",
     "@vitest/browser": "latest",
     "@vitest/ui": "latest",
@@ -78,19 +79,19 @@
     "eslint": "^9.11.1",
     "eslint-config-carbon": "3.17.1",
     "globby": "^14.0.2",
-    "happy-dom": "^15.7.4",
+    "happy-dom": "^15.11.6",
     "postcss": "^8.4.47",
     "remark-gfm": "^4.0.0",
     "rimraf": "^5.0.5",
-    "rollup": "^3.29.5",
+    "rollup": "^4.27.3",
     "rollup-plugin-copy": "^3.5.0",
     "sass": "^1.80.6",
-    "storybook": "^8.2.8",
+    "storybook": "^8.4.5",
     "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"
   },
-  "gitHead": "69b296895cc35695cf6c4c7eb35dd12a9edf2395"
+  "gitHead": "bea9003e1c1dcf2f1c19ecaccd6a4096bc313d8d"
 }

package/scss/components/side-panel/side-panel.scss

@@ -6,6 +6,7 @@
 */
 
 $css--plex: true !default;
+@use 'sass:map';
 
 /* Other Carbon settings. */
 @use '@carbon/styles/scss/reset';
@@ -15,7 +16,6 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
-@use 'sass:map';
 
 $prefix: 'c4p';
 $carbon-prefix: 'cds';

package/scss/components/side-panel/story-styles.scss

@@ -5,19 +5,20 @@
 * LICENSE file in the root directory of this source tree.
 */
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
 
 $story-prefix: 'side-panel-stories__';
 
 .#{$story-prefix}body-content {
   display: flex;
   flex-direction: column;
-  padding: 1rem;
-  gap: 1rem;
+  padding: $spacing-05;
+  gap: $spacing-05;
 }
 
 .#{$story-prefix}text-inputs {
   display: flex;
-  gap: 1rem;
+  gap: $spacing-05;
 
   > * {
     flex-basis: 50%;

package/scss/components/tearsheet/story-styles.scss

@@ -9,8 +9,6 @@
 
 $story-prefix: 'tearsheet-stories';
 
-@use '@carbon/styles/scss/spacing' as *;
-
 #page-content-selector {
   position: absolute;
   z-index: 9999;

package/scss/components/tearsheet/tearsheet.scss

@@ -102,6 +102,13 @@ $motion-duration: $duration-moderate-02;
   .#{$block-class}__influencer[wide] {
     @extend .#{$block-class}__influencer--wide;
   }
+  ::slotted(#{$carbon-prefix}-slug) {
+    display: flex;
+    inset-inline-end: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    margin-block: 6px;
+    margin-inline-end: $spacing-05;
+  }
 }
 
 :host(#{$prefix}-tearsheet[open]) {
@@ -112,7 +119,7 @@ $motion-duration: $duration-moderate-02;
   align-items: flex-end;
   background: initial;
   opacity: 1;
-
+  /* stylelint-disable-next-line */
   transition: visibility 0s linear;
   visibility: inherit;
 
@@ -253,6 +260,7 @@ $motion-duration: $duration-moderate-02;
   }
 
   .#{$block-class}__header[has-close-icon][has-slug] {
+    /* stylelint-disable-next-line carbon/layout-use */
     padding-inline-end: calc(#{$spacing-11 + $spacing-09});
   }
 

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.scss

@@ -6,6 +6,7 @@
 */
 
 $css--plex: true !default;
+@use 'sass:map';
 
 /* Other Carbon settings. */
 @use '@carbon/styles/scss/reset';
@@ -15,7 +16,6 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
-@use 'sass:map';
 
 $prefix: 'c4p';
 $carbon-prefix: 'cds';

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

@@ -303,15 +303,15 @@ const getSlug = (index) => {
 
 const defaultTemplate = {
   args: {
-    actionItems: getActionItems(1),
-    actionToolbarItems: getActionToolbarItems(0),
+    actionItems: 1,
+    actionToolbarItems: 0,
     animateTitle: true,
     class: 'a-user-class',
     closeIconDescription: 'Close panel',
     condensedActions: false,
-    content: getContent(2),
+    content: 2,
     includeOverlay: true,
-    label: getLabel(2),
+    label: 2,
     open: false,
     placement: SIDE_PANEL_PLACEMENT.RIGHT,
     preventCloseOnClickOutside: false,
@@ -319,8 +319,8 @@ const defaultTemplate = {
     selectorInitialFocus: '#side-panel-story-text-input-a',
     size: SIDE_PANEL_SIZE.MEDIUM,
     slideIn: false,
-    slug: getSlug(0),
-    subtitle: getSubTitle(1),
+    slug: 0,
+    subtitle: 1,
     title:
       'This title is testing a very long title to see how this behaves with a longer title. It needs to be long enough to trigger overflow when collapsed.',
   },
@@ -424,7 +424,7 @@ const defaultTemplate = {
         current-step="0"
         ?include-overlay=${args.includeOverlay && !args.slideIn}
         selector-initial-focus=${args.selectorInitialFocus}
-        label-text="${args.label}"
+        label-text="${getLabel(args.label)}"
         ?open=${args.open}
         placement=${args.placement}
         ?prevent-close-on-click-outside=${args.preventCloseOnClickOutside}
@@ -432,23 +432,23 @@ 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}
+        ${getContent(args.content)}
         <cds-button @click="${nextStep}">Step two</cds-button>
 
         <!-- slotted subtitle slotted content -->
-        ${args.subtitle}
+        ${getSubTitle(args.subtitle)}
 
         <!-- slotted action toolbar cds-buttons -->
-        ${args.actionToolbarItems}
+        ${getActionToolbarItems(args.actionToolbarItems)}
 
         <!-- slotted action items cds-buttons -->
-        ${args.actionItems}
+        ${getActionItems(args.actionItems)}
 
         <!-- slotted slug -->
-        ${args.slug}
+        ${getSlug(args.slug)}
       </c4p-side-panel>
     `;
   },
@@ -470,7 +470,7 @@ export const WithActionToolbar = {
   ...defaultTemplate,
   args: {
     ...defaultTemplate.args,
-    actionToolbarItems: getActionToolbarItems(1),
+    actionToolbarItems: 1,
   },
 };
 
@@ -479,7 +479,7 @@ export const SpecifyElementToHaveFocus = {
   args: {
     ...defaultTemplate.args,
     focusSelector: '#side-panel-story-text-input-a',
-    label: getLabel(0),
+    label: 0,
   },
   argTypes: {
     ...defaultTemplate.argTypes,
@@ -495,7 +495,7 @@ export const WithStaticTitle = {
   args: {
     ...defaultTemplate.args,
     animateTitle: false,
-    label: getLabel(0),
+    label: 0,
   },
 };
 
@@ -503,9 +503,9 @@ export const WithStaticTitleAndActionToolbar = {
   ...defaultTemplate,
   args: {
     ...defaultTemplate.args,
-    actionToolbarItems: getActionToolbarItems(1),
+    actionToolbarItems: 1,
     animateTitle: false,
-    label: getLabel(0),
+    label: 0,
   },
 };
 
@@ -513,7 +513,7 @@ export const WithoutTitle = {
   ...defaultTemplate,
   args: {
     ...defaultTemplate.args,
-    label: getLabel(0),
+    label: 0,
     title: '',
   },
 };

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/side-panel/story-styles.scss

@@ -5,19 +5,20 @@
 * LICENSE file in the root directory of this source tree.
 */
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
 
 $story-prefix: 'side-panel-stories__';
 
 .#{$story-prefix}body-content {
   display: flex;
   flex-direction: column;
-  padding: 1rem;
-  gap: 1rem;
+  padding: $spacing-05;
+  gap: $spacing-05;
 }
 
 .#{$story-prefix}text-inputs {
   display: flex;
-  gap: 1rem;
+  gap: $spacing-05;
 
   > * {
     flex-basis: 50%;

package/src/components/tearsheet/story-styles.scss

@@ -9,8 +9,6 @@
 
 $story-prefix: 'tearsheet-stories';
 
-@use '@carbon/styles/scss/spacing' as *;
-
 #page-content-selector {
   position: absolute;
   z-index: 9999;