@carbon/ibm-products-web-components 0.3.0 → 0.4.0-rc.0

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.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.69.0",
+	"@carbon/web-components": "2.17.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/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",
+  "version": "0.4.0-rc.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -49,9 +49,9 @@
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
   },
   "dependencies": {
-    "@carbon/ibm-products-styles": "^2.50.0",
-    "@carbon/styles": "1.68.0",
-    "@carbon/web-components": "2.16.0",
+    "@carbon/ibm-products-styles": "^2.51.0-rc.0",
+    "@carbon/styles": "1.69.0",
+    "@carbon/web-components": "2.17.0",
     "lit": "^3.1.0"
   },
   "devDependencies": {
@@ -59,9 +59,10 @@
     "@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",
+    "@rollup/plugin-typescript": "^12.1.1",
     "@storybook/addon-essentials": "^8.3.6",
     "@storybook/addon-links": "^8.3.6",
     "@storybook/addon-storysource": "^8.3.6",
@@ -78,13 +79,13 @@
     "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.77.2",
+    "sass": "^1.80.6",
     "storybook": "^8.2.8",
     "storybook-addon-accessibility-checker": "^3.1.61-rc.3",
     "typescript": "^5.5.3",
@@ -92,5 +93,5 @@
     "vitest": "^2.1.2",
     "web-component-analyzer": "2.0.0"
   },
-  "gitHead": "046fd4ba4d5299b15f0ac8ef69811277a8f28553"
+  "gitHead": "1a5820cb6143a7d2ad3ff00914f4d0f4e7f53df9"
 }

package/scss/components/tearsheet/tearsheet.scss

@@ -102,6 +102,12 @@ $motion-duration: $duration-moderate-02;
   .#{$block-class}__influencer[wide] {
     @extend .#{$block-class}__influencer--wide;
   }
+  ::slotted(#{$carbon-prefix}-slug) {
+    display: flex;
+    inset-inline-end: 0;
+    margin-block: 6px;
+    margin-inline-end: 1rem;
+  }
 }
 
 :host(#{$prefix}-tearsheet[open]) {

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/components/tearsheet/tearsheet.scss

@@ -102,6 +102,12 @@ $motion-duration: $duration-moderate-02;
   .#{$block-class}__influencer[wide] {
     @extend .#{$block-class}__influencer--wide;
   }
+  ::slotted(#{$carbon-prefix}-slug) {
+    display: flex;
+    inset-inline-end: 0;
+    margin-block: 6px;
+    margin-inline-end: 1rem;
+  }
 }
 
 :host(#{$prefix}-tearsheet[open]) {

package/src/components/tearsheet/tearsheet.stories.ts

@@ -16,6 +16,7 @@ import {
 import './index';
 import '@carbon/web-components/es/components/tabs/index.js';
 import '@carbon/web-components/es/components/slug/index.js';
+import '@carbon/web-components/es/components/dropdown/index.js';
 import '@carbon/web-components/es/components/progress-indicator/index.js';
 import '@carbon/web-components/es/components/progress-bar/index.js';
 import '@carbon/web-components/es/components/button/index.js';
@@ -25,10 +26,15 @@ import { prefix } from '../../globals/settings';
 
 import styles from './story-styles.scss?lit';
 import { BUTTON_KIND } from '@carbon/web-components/es/components/button/defs.js';
+
 const toggleButton = () => {
   document.querySelector(`${prefix}-tearsheet`)?.toggleAttribute('open');
 };
 
+const cancelButton = () => {
+  document.querySelector(`${prefix}-tearsheet`)?.removeAttribute('open');
+};
+
 const widths = {
   // 'default (narrow)': null,
   [`Narrow (${TEARSHEET_WIDTH.NARROW})`]: TEARSHEET_WIDTH.NARROW,
@@ -205,7 +211,7 @@ const headerActions = {
 const getActionToolbarItems = (index) => {
   switch (index) {
     case 1:
-      return html`<cds-dropdown slot="header-actions">
+      return html`<cds-dropdown slot="header-actions" value="option 1">
         ${['option 1', 'option 2', 'option 3', 'option 4'].map(
           (option) => html` <cds-dropdown-item value="${option}"
             >${option}</cds-dropdown-item
@@ -250,7 +256,12 @@ const actionItems = {
 
 const toActions = (kinds: BUTTON_KIND[]) => {
   return kinds?.map((kind) => {
-    return html`<cds-button key=${kind} slot="actions" kind=${kind}>
+    return html`<cds-button
+      key=${kind}
+      slot="actions"
+      kind=${kind}
+      @click=${kind === 'ghost' && cancelButton}
+    >
       ${kind.charAt(0).toUpperCase() + kind.slice(1)}
     </cds-button>`;
   });
@@ -359,21 +370,21 @@ const getSlug = (index) => {
 
 export const Default = {
   args: {
-    actionItems: getActionItems(4),
-    headerActions: getActionToolbarItems(0),
-    content: getContent(2),
-    label: getLabel(1),
+    actionItems: 4,
+    headerActions: 0,
+    content: 2,
+    label: 1,
     open: false,
     influencerWidth: TEARSHEET_INFLUENCER_WIDTH.NARROW,
     influencerPlacement: TEARSHEET_INFLUENCER_PLACEMENT.LEFT,
-    influencer: getInfluencer(0),
+    influencer: 0,
     preventCloseOnClickOutside: false,
     selectorInitialFocus: '',
     width: TEARSHEET_WIDTH.WIDE,
-    slug: getSlug(0),
+    slug: 0,
     description: 'Description used to describe the flow if need be.',
     title: 'Title used to designate the overarching flow of the tearsheet.',
-    headerNavigation: getNavigation(0),
+    headerNavigation: 0,
   },
   argTypes: {
     actionItems: {
@@ -465,10 +476,10 @@ export const Default = {
         width=${args.width}
       >
         <!-- default slotted content -->
-        ${args.content}
+        ${getContent(args.content)}
 
         <!-- slotted header label -->
-        ${args.label}
+        ${getLabel(args.label)}
 
         <!-- slotted header title -->
         ${args.title ? html`<span slot="title">${args.title}</span>` : ''}
@@ -479,19 +490,19 @@ export const Default = {
           : ''}
 
         <!-- slotted action in header cds-buttons -->
-        ${args.headerActions}
+        ${getActionToolbarItems(args.headerActions)}
 
         <!-- slotted action items cds-buttons -->
-        ${args.actionItems}
+        ${getActionItems(args.actionItems)}
 
         <!-- slotted slug -->
-        ${args.slug}
+        ${getSlug(args.slug)}
 
         <!-- slotted header-navigation -->
-        ${args.headerNavigation}
+        ${getNavigation(args.headerNavigation)}
 
         <!-- slotted influencer -->
-        ${args.influencer}
+        ${getInfluencer(args.influencer)}
       </c4p-tearsheet>
     `;
   },
@@ -501,7 +512,7 @@ export const WithNavigation = {
   ...Default,
   args: {
     ...Default.args,
-    headerNavigation: getNavigation(1),
+    headerNavigation: 1,
   },
 };
 
@@ -509,7 +520,7 @@ export const WithInfluencer = {
   ...Default,
   args: {
     ...Default.args,
-    influencer: getInfluencer(2),
+    influencer: 2,
   },
 };
 
@@ -517,8 +528,8 @@ export const WithAllHeaderItemsAndInfluencer = {
   ...Default,
   args: {
     ...Default.args,
-    headerActions: getActionToolbarItems(2),
-    influencer: getInfluencer(2),
+    headerActions: 2,
+    influencer: 2,
   },
 };
 
@@ -581,10 +592,10 @@ export const StackingTemplate = {
         <cds-button @click="${() => toggleButton('two')}"
           >Toggle tearsheet two</cds-button
         >
-        ${args.content}
+        ${getContent(args.content)}
 
         <!-- slotted header label -->
-        ${args.label}
+        ${getLabel(args.label)}
 
         <!-- slotted header title -->
         ${args.title ? html`<span slot="title">One ${args.title}</span>` : ''}
@@ -595,19 +606,19 @@ export const StackingTemplate = {
           : ''}
 
         <!-- slotted action in header cds-buttons -->
-        ${args.headerActions}
+        ${getActionToolbarItems(args.headerActions)}
 
         <!-- slotted action items cds-buttons -->
-        ${args.actionItems}
+        ${getActionItems(args.actionItems)}
 
         <!-- slotted slug -->
-        ${args.slug}
+        ${getSlug(args.slug)}
 
         <!-- slotted header-navigation -->
-        ${args.headerNavigation}
+        ${getNavigation(args.headerNavigation)}
 
         <!-- slotted influencer -->
-        ${args.influencer}
+        ${getInfluencer(args.influencer)}
       </c4p-tearsheet>
       <c4p-tearsheet
         data-index="two"
@@ -624,10 +635,10 @@ export const StackingTemplate = {
         <cds-button @click="${() => toggleButton('three')}"
           >Toggle tearsheet three</cds-button
         >
-        ${args.content}
+        ${getContent(args.content)}
 
         <!-- slotted header label -->
-        ${args.label}
+        ${getLabel(args.label)}
 
         <!-- slotted header title -->
         ${args.title ? html`<span slot="title">Two ${args.title}</span>` : ''}
@@ -638,19 +649,19 @@ export const StackingTemplate = {
           : ''}
 
         <!-- slotted action in header cds-buttons -->
-        ${args.headerActions}
+        ${getActionToolbarItems(args.headerActions)}
 
         <!-- slotted action items cds-buttons -->
-        ${args.actionItems}
+        ${getActionItems(args.actionItems)}
 
         <!-- slotted slug -->
-        ${args.slug}
+        ${getSlug(args.slug)}
 
         <!-- slotted header-navigation -->
-        ${args.headerNavigation}
+        ${getNavigation(args.headerNavigation)}
 
         <!-- slotted influencer -->
-        ${args.influencer}
+        ${getInfluencer(args.influencer)}
       </c4p-tearsheet>
       <c4p-tearsheet
         data-index="three"
@@ -664,10 +675,10 @@ export const StackingTemplate = {
         width=${args.width}
       >
         <!-- default slotted content -->
-        ${args.content}
+        ${getContent(args.content)}
 
         <!-- slotted header label -->
-        ${args.label}
+        ${getLabel(args.label)}
 
         <!-- slotted header title -->
         ${args.title ? html`<span slot="title">Three ${args.title}</span>` : ''}
@@ -678,19 +689,19 @@ export const StackingTemplate = {
           : ''}
 
         <!-- slotted action in header cds-buttons -->
-        ${args.headerActions}
+        ${getActionToolbarItems(args.headerActions)}
 
         <!-- slotted action items cds-buttons -->
-        ${args.actionItems}
+        ${getActionItems(args.actionItems)}
 
         <!-- slotted slug -->
-        ${args.slug}
+        ${getSlug(args.slug)}
 
         <!-- slotted header-navigation -->
-        ${args.headerNavigation}
+        ${getNavigation(args.headerNavigation)}
 
         <!-- slotted influencer -->
-        ${args.influencer}
+        ${getInfluencer(args.influencer)}
       </c4p-tearsheet>
     `;
   },

package/src/components/tearsheet/tearsheet.ts

@@ -314,7 +314,7 @@ class CDSTearsheet extends HostListenerMixin(LitElement) {
 
     this._hasSlug = childItems.length > 0;
     if (this._hasSlug) {
-      childItems[0].setAttribute('size', 'lg');
+      childItems[0].setAttribute('size', 'sm');
       this.setAttribute('slug', '');
     } else {
       this.removeAttribute('slug');