Merge branch 'main' of github.com:carbon-design-system/carbon-for-ibm…

…-dotcom into renovate/carbon-themes-11.x
carbon-design-system · Jun 3, 2024 · 0581ed9 · 0581ed9
2 parents 57a6a51 + 3856967
commit 0581ed9
Show file tree

Hide file tree

Showing 73 changed files with 1,497 additions and 1,047 deletions.
diff --git a/.github/workflows/dco.yml b/.github/workflows/dco.yml
@@ -20,7 +20,7 @@ jobs:
           path-to-signatures: 'dco-signatures.json'
           path-to-document: 'https://github.com/carbon-design-system/carbon-dco/blob/main/dco.md'
           branch: 'main'
-          allowlist: ibmdotcom-bot,dependabot[bot],kodiakhq[bot],renovate[bot]
+          allowlist: ibmdotcom-bot,dependabot[bot],kodiakhq[bot],renovate[bot],ibm-mend-app[bot]
           remote-organization-name: carbon-design-system
           remote-repository-name: carbon-dco
           create-file-commit-message: 'chore: create file to store dco signatures'

diff --git a/.whitesource b/.whitesource
@@ -0,0 +1,3 @@
+{
+  "settingsInheritedFrom": "ibm-mend-config/mend-config@main"
+}
diff --git a/.yarn/cache/@babel-code-frame-npm-7.24.6-214509ff08-e9b70af2a9.zip b/.yarn/cache/@babel-code-frame-npm-7.24.6-214509ff08-e9b70af2a9.zip
diff --git a/...data-npm-7.24.4-9f90706503-e51faec0ac.zip → ...data-npm-7.24.6-5ab069e1c6-c355141e46.zip b/...data-npm-7.24.4-9f90706503-e51faec0ac.zip → ...data-npm-7.24.6-5ab069e1c6-c355141e46.zip
diff --git a/.yarn/cache/@babel-helper-annotate-as-pure-npm-7.24.6-6c9a7c5046-1fc1790a67.zip b/.yarn/cache/@babel-helper-annotate-as-pure-npm-7.24.6-6c9a7c5046-1fc1790a67.zip
diff --git a/.yarn/cache/@babel-helper-compilation-targets-npm-7.23.6-aa6f07f088-05595cd730.zip b/.yarn/cache/@babel-helper-compilation-targets-npm-7.23.6-aa6f07f088-05595cd730.zip
diff --git a/.yarn/cache/@babel-helper-compilation-targets-npm-7.24.6-21a082c281-28f34f2c9e.zip b/.yarn/cache/@babel-helper-compilation-targets-npm-7.24.6-21a082c281-28f34f2c9e.zip
diff --git a/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.24.6-28f41f5ade-f4c2bfccb9.zip b/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.24.6-28f41f5ade-f4c2bfccb9.zip
diff --git a/.yarn/cache/@babel-helper-create-regexp-features-plugin-npm-7.24.6-3b27514578-74e717c71d.zip b/.yarn/cache/@babel-helper-create-regexp-features-plugin-npm-7.24.6-3b27514578-74e717c71d.zip
diff --git a/.yarn/cache/@babel-helper-environment-visitor-npm-7.22.20-260909e014-d80ee98ff6.zip b/.yarn/cache/@babel-helper-environment-visitor-npm-7.22.20-260909e014-d80ee98ff6.zip
diff --git a/.yarn/cache/@babel-helper-environment-visitor-npm-7.24.6-c8c9ac9733-9c2b3f1ee7.zip b/.yarn/cache/@babel-helper-environment-visitor-npm-7.24.6-c8c9ac9733-9c2b3f1ee7.zip
diff --git a/.yarn/cache/@babel-helper-function-name-npm-7.24.6-31619ed629-66c0669c16.zip b/.yarn/cache/@babel-helper-function-name-npm-7.24.6-31619ed629-66c0669c16.zip
diff --git a/.yarn/cache/@babel-helper-hoist-variables-npm-7.22.5-6db3192347-394ca191b4.zip b/.yarn/cache/@babel-helper-hoist-variables-npm-7.22.5-6db3192347-394ca191b4.zip
diff --git a/.yarn/cache/@babel-helper-hoist-variables-npm-7.24.6-728285ae51-4819b57439.zip b/.yarn/cache/@babel-helper-hoist-variables-npm-7.24.6-728285ae51-4819b57439.zip
diff --git a/...n/cache/@babel-helper-member-expression-to-functions-npm-7.24.6-63961cfa17-49198b0ceb.zip b/...n/cache/@babel-helper-member-expression-to-functions-npm-7.24.6-63961cfa17-49198b0ceb.zip
diff --git a/.yarn/cache/@babel-helper-module-imports-npm-7.24.6-be1121ea22-38c4432191.zip b/.yarn/cache/@babel-helper-module-imports-npm-7.24.6-be1121ea22-38c4432191.zip
diff --git a/.yarn/cache/@babel-helper-module-transforms-npm-7.24.6-8226cd35ca-e162d0c1d8.zip b/.yarn/cache/@babel-helper-module-transforms-npm-7.24.6-8226cd35ca-e162d0c1d8.zip
diff --git a/.yarn/cache/@babel-helper-optimise-call-expression-npm-7.24.6-4e899dbddc-0f5e062bff.zip b/.yarn/cache/@babel-helper-optimise-call-expression-npm-7.24.6-4e899dbddc-0f5e062bff.zip
diff --git a/.yarn/cache/@babel-helper-plugin-utils-npm-7.24.6-2ff922bbf5-0ac0a7a199.zip b/.yarn/cache/@babel-helper-plugin-utils-npm-7.24.6-2ff922bbf5-0ac0a7a199.zip
diff --git a/.yarn/cache/@babel-helper-replace-supers-npm-7.24.6-4e35f7e426-3456b9fee0.zip b/.yarn/cache/@babel-helper-replace-supers-npm-7.24.6-4e35f7e426-3456b9fee0.zip
diff --git a/.yarn/cache/@babel-helper-simple-access-npm-7.24.6-834fac9374-4649d08f3e.zip b/.yarn/cache/@babel-helper-simple-access-npm-7.24.6-834fac9374-4649d08f3e.zip
diff --git a/...e/@babel-helper-skip-transparent-expression-wrappers-npm-7.22.5-a398428942-1012ef2295.zip b/...e/@babel-helper-skip-transparent-expression-wrappers-npm-7.22.5-a398428942-1012ef2295.zip
diff --git a/...e/@babel-helper-skip-transparent-expression-wrappers-npm-7.24.6-2a28dccfe2-697a161c8d.zip b/...e/@babel-helper-skip-transparent-expression-wrappers-npm-7.24.6-2a28dccfe2-697a161c8d.zip
diff --git a/.yarn/cache/@babel-helper-split-export-declaration-npm-7.24.6-299e17324f-48ded9611f.zip b/.yarn/cache/@babel-helper-split-export-declaration-npm-7.24.6-299e17324f-48ded9611f.zip
diff --git a/.yarn/cache/@babel-helper-string-parser-npm-7.24.6-ab02401caf-a24631e138.zip b/.yarn/cache/@babel-helper-string-parser-npm-7.24.6-ab02401caf-a24631e138.zip
diff --git a/.yarn/cache/@babel-helper-validator-identifier-npm-7.24.6-cf629561b7-7e725ef068.zip b/.yarn/cache/@babel-helper-validator-identifier-npm-7.24.6-cf629561b7-7e725ef068.zip
diff --git a/.yarn/cache/@babel-helper-validator-option-npm-7.23.5-d83bbfe738-537cde2330.zip b/.yarn/cache/@babel-helper-validator-option-npm-7.23.5-d83bbfe738-537cde2330.zip
diff --git a/.yarn/cache/@babel-helper-validator-option-npm-7.24.6-f2eea7cb8e-5defb2da74.zip b/.yarn/cache/@babel-helper-validator-option-npm-7.24.6-f2eea7cb8e-5defb2da74.zip
diff --git a/.yarn/cache/@babel-highlight-npm-7.24.6-ceb9bdeb2e-e11cd39ceb.zip b/.yarn/cache/@babel-highlight-npm-7.24.6-ceb9bdeb2e-e11cd39ceb.zip
diff --git a/.yarn/cache/@babel-parser-npm-7.24.6-3dfa1e0b98-48af4251d0.zip b/.yarn/cache/@babel-parser-npm-7.24.6-3dfa1e0b98-48af4251d0.zip
diff --git a/.yarn/cache/@babel-plugin-syntax-jsx-npm-7.24.6-f98dc29919-68e90ec17c.zip b/.yarn/cache/@babel-plugin-syntax-jsx-npm-7.24.6-f98dc29919-68e90ec17c.zip
diff --git a/.yarn/cache/@babel-plugin-transform-optional-chaining-npm-7.24.6-19a5150e34-fb5deb31b2.zip b/.yarn/cache/@babel-plugin-transform-optional-chaining-npm-7.24.6-19a5150e34-fb5deb31b2.zip
diff --git a/.yarn/cache/@babel-plugin-transform-parameters-npm-7.24.6-a4a5e09f1c-c885f6c92f.zip b/.yarn/cache/@babel-plugin-transform-parameters-npm-7.24.6-a4a5e09f1c-c885f6c92f.zip
diff --git a/.yarn/cache/@babel-plugin-transform-react-jsx-npm-7.24.6-035cb465df-268184de2f.zip b/.yarn/cache/@babel-plugin-transform-react-jsx-npm-7.24.6-035cb465df-268184de2f.zip
diff --git a/.yarn/cache/@babel-template-npm-7.24.6-fa5066ccd1-e4641733df.zip b/.yarn/cache/@babel-template-npm-7.24.6-fa5066ccd1-e4641733df.zip
diff --git a/.yarn/cache/@babel-types-npm-7.24.6-5a7d5202c4-34552539cd.zip b/.yarn/cache/@babel-types-npm-7.24.6-5a7d5202c4-34552539cd.zip
diff --git a/.yarn/cache/@carbon-icons-react-npm-11.42.0-5825c87a70-b38471b6ea.zip b/.yarn/cache/@carbon-icons-react-npm-11.42.0-5825c87a70-b38471b6ea.zip
diff --git a/.yarn/cache/@carbon-styles-npm-1.58.0-1117376d25-b4dd73035f.zip b/.yarn/cache/@carbon-styles-npm-1.58.0-1117376d25-b4dd73035f.zip
diff --git a/.yarn/cache/@carbon-themes-npm-11.35.0-e987ddcfdd-1610f3fe87.zip b/.yarn/cache/@carbon-themes-npm-11.35.0-e987ddcfdd-1610f3fe87.zip
diff --git a/.yarn/cache/@ibm-telemetry-js-npm-1.5.2-48c1c4f6ea-1dcc971e78.zip b/.yarn/cache/@ibm-telemetry-js-npm-1.5.2-48c1c4f6ea-1dcc971e78.zip
diff --git a/.yarn/cache/braces-npm-3.0.3-582c14023c-fad11a0d46.zip b/.yarn/cache/braces-npm-3.0.3-582c14023c-fad11a0d46.zip
diff --git a/.yarn/cache/fill-range-npm-7.1.1-bf491486db-a7095cb39e.zip b/.yarn/cache/fill-range-npm-7.1.1-bf491486db-a7095cb39e.zip
diff --git a/.yarn/cache/micromatch-npm-4.0.7-28fb7387ee-a11ed1cb67.zip b/.yarn/cache/micromatch-npm-4.0.7-28fb7387ee-a11ed1cb67.zip
diff --git a/.yarn/cache/path-scurry-npm-1.11.1-aaf8c339af-5e8845c159.zip b/.yarn/cache/path-scurry-npm-1.11.1-aaf8c339af-5e8845c159.zip
diff --git a/.yarn/cache/sass-npm-1.76.0-87b1e1bf50-f30e057617.zip b/.yarn/cache/sass-npm-1.76.0-87b1e1bf50-f30e057617.zip
diff --git a/.yarn/cache/set-function-name-npm-2.0.1-a9f970eea0-4975d17d90.zip b/.yarn/cache/set-function-name-npm-2.0.1-a9f970eea0-4975d17d90.zip
diff --git a/.yarn/cache/string.prototype.matchall-npm-4.0.10-197e4b9dad-0f7a1a7f91.zip b/.yarn/cache/string.prototype.matchall-npm-4.0.10-197e4b9dad-0f7a1a7f91.zip
diff --git a/packages/carbon-web-components/CHANGELOG.md b/packages/carbon-web-components/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.10.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-05-28)
+
+
+### Bug Fixes
+
+* **side-panel:** import missing icon-button and codesandbox example ([#11821](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11821)) ([3c51597](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3c51597f48ffd6a18201f56fe740322b9e15127c))
+* **tearsheet:** tearsheet styles and codesandbox example ([#11792](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11792)) ([f0ddd6e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f0ddd6e22c5298e8c612ae113301dc4e2b5292f2))
+
+
+
+
+
 # [2.9.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-05-16)
 
 **Note:** Version bump only for package @carbon/web-components

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/cdn.html
@@ -1,78 +1,127 @@
 <!--
 @license
 
-Copyright IBM Corp. 2020
+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.
 -->
 
 <html>
-
 <head>
   <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" />
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    cds-text-input:not(:defined) {
-      display: none;
-    }
-
-    cds-textarea:not(:defined) {
-      display: none;
-    }
-
-    cds-button:not(:defined) {
-      display: none;
-    }
-
     cds-side-panel:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/text-input.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/textarea.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/button.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/side-panel.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/side-panel.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/button.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/text-input.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/textarea.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/slug.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/tabs.min.js"></script>
 </head>
-
 <body class="cds-theme-zone-white">
-  <cds-side-panel include-overlay open label-text="An optional label" size="md" title="A title, can be omitted">
-    <!-- Content -->
-    <h5>Side panel content</h5>
-    <div class="${storyPrefix}text-inputs">
-      <cds-text-input label="Input A" id="side-panel-story-text-input-a"></cds-text-input>
-      <cds-text-input label="Input B" id="side-panel-story-text-input-b"></cds-text-input>
-    </div>
-    <div class="${storyPrefix}text-inputs">
-      <cds-text-input label="Input C" id="side-panel-story-text-input-c"></cds-text-input>
-      <cds-text-input label="Input D" id="side-panel-story-text-input-d"></cds-text-input>
-    </div>
-    <div class="${storyPrefix}textarea-container">
-      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
-      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
-      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
-    </div>
+  <div class="container-header"></div>
+  <cds-button id="toggle-side-panel">Toggle side panel</cds-button>
+
+  <cds-side-panel current-step="0" animate-title include-overlay label-text="A longer label that might go on for a little bit" size="md" 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.">
+  <!-- default slotted content -->
+  <h5>Section</h5>
+  <div class="text-inputs">
+    <cds-text-input
+      label="Input A"
+      id="side-panel-story-text-input-a"></cds-text-input>
+    <cds-text-input
+      label="Input B"
+      id="side-panel-story-text-input-b"></cds-text-input>
+  </div>
+  <div class="text-inputs">
+    <cds-text-input
+      label="Input C"
+      id="side-panel-story-text-input-c"></cds-text-input>
+    <cds-text-input
+      label="Input D"
+      id="side-panel-story-text-input-d"></cds-text-input>
+  </div>
+  <div>
+    <cds-textarea
+      label="Notes"
+      value="This is a text area"></cds-textarea>
+    <cds-textarea
+      label="Notes"
+      value="This is a text area"></cds-textarea>
+    <cds-textarea
+      label="Notes"
+      value="This is a text area"></cds-textarea>
+  </div>
 
-    <!-- subtitle optional -->
-    <div slot="subtitle">Subtitle text which can provide more detail on the content being displayed.</div>
+  <!-- slotted subtitle slotted content -->
+  <div slot="subtitle">This is your subtitle slot.</div>
 
-    <!-- Action toolbar optional -->
-    <cds-button slot="action-toolbar">Copy</cds-button>
-    <cds-button slot="action-toolbar" aria-label="Settings" has-icon-only="true" kind=${BUTTON_KIND.GHOST} size="sm" tooltip-text="Settings">
-      ${Settings({ slot: 'icon' })}
-    </cds-button>
-    <cds-button slot="action-toolbar" aria-label="Delete" has-icon-only="true" kind=${BUTTON_KIND.GHOST} size="sm" tooltip-text="Delete">
-      ${Trashcan({ slot: 'icon' })}
-    </cds-button>
+  <!-- slotted action toolbar cds-buttons -->
+  <cds-button slot="action-toolbar">Copy</cds-button>
+  <cds-button
+    slot="action-toolbar"
+    aria-label="Settings"
+    has-icon-only="true"
+    kind="ghost"
+    size="sm"
+    tooltip-text="Settings">
+    <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" slot="icon"><path d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3	c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1	C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4	c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4	c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4	c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8	L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6	C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"></path><path d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8	c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"></path></svg>
+  </cds-button>
+  <cds-button
+    slot="action-toolbar"
+    aria-label="Delete"
+    has-icon-only="true"
+    kind="ghost"
+    size="sm"
+    tooltip-text="Delete">
+    <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 32 32" slot="icon"><path d="M12 12H14V24H12zM18 12H20V24H18z"></path><path d="M4 6V8H6V28a2 2 0 002 2H24a2 2 0 002-2V8h2V6zM8 28V8H24V28zM12 2H20V4H12z"></path></svg>
+  </cds-button>
 
-    <!-- Side panel actions optional -->
-    <cds-button slot="actions" kind=${BUTTON_KIND.GHOST}>Ghost</cds-button>
-    <cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}></cds-button>
-  </cds-side-panel>
+  <!-- slotted action items cds-buttons -->
+  <cds-button key="ghost" slot="actions" kind="ghost">
+    Ghost
+  </cds-button>
+  <cds-button key="secondary" slot="actions" kind="secondary">
+    Secondary
+  </cds-button>
+  <cds-button key="primary" slot="actions" kind="primary">
+    Primary
+  </cds-button>
+
+  <!-- slotted slug -->
+  <cds-slug size="xs" alignment="bottom-right">
+    <div slot="body-text">
+      <p class="secondary">AI Explained</p>
+      <h1>84%</h1>
+      <p class="secondary bold">Confidence score</p>
+      <p class="secondary">
+        Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+        do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+      </p>
+      <hr />
+      <p class="secondary">Model type</p>
+      <p class="bold">Foundation model</p>
+    </div>
+  </cds-slug>
+</cds-side-panel>
 </body>
+<script>
+  const toggleButton = () => {
+  const tearsheet = document.querySelector(`cds-side-panel`);
+  tearsheet?.toggleAttribute('open');
+};
 
-</html>
+document.getElementById("toggle-side-panel").addEventListener("click", toggleButton);
+</script>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/index.html
@@ -1,63 +1,122 @@
 <!--
 @license
 
-Copyright IBM Corp. 2020
+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.
 -->
 
 <html>
-
 <head>
   <title>carbon-web-components example</title>
   <meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
 
   <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    cds-side-panel:not(:defined) {
+    cds-button:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
-
 <body>
-  <cds-side-panel include-overlay open label-text="An optional label" size="md" title="A title, can be omitted">
-    <!-- Content -->
-    <h5>Side panel content</h5>
-    <div class="${storyPrefix}text-inputs">
-      <cds-text-input label="Input A" id="side-panel-story-text-input-a"></cds-text-input>
-      <cds-text-input label="Input B" id="side-panel-story-text-input-b"></cds-text-input>
-    </div>
-    <div class="${storyPrefix}text-inputs">
-      <cds-text-input label="Input C" id="side-panel-story-text-input-c"></cds-text-input>
-      <cds-text-input label="Input D" id="side-panel-story-text-input-d"></cds-text-input>
-    </div>
-    <div class="${storyPrefix}textarea-container">
-      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
-      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
-      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
-    </div>
+  <div class="container-header"></div>
+  <cds-button id="toggle-side-panel">Toggle side panel</cds-button>
+
+  <cds-side-panel current-step="0" animate-title include-overlay label-text="A longer label that might go on for a little bit" size="md" 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.">
+  <!-- default slotted content -->
+  <h5>Section</h5>
+  <div class="text-inputs">
+    <cds-text-input
+      label="Input A"
+      id="side-panel-story-text-input-a"></cds-text-input>
+    <cds-text-input
+      label="Input B"
+      id="side-panel-story-text-input-b"></cds-text-input>
+  </div>
+  <div class="text-inputs">
+    <cds-text-input
+      label="Input C"
+      id="side-panel-story-text-input-c"></cds-text-input>
+    <cds-text-input
+      label="Input D"
+      id="side-panel-story-text-input-d"></cds-text-input>
+  </div>
+  <div>
+    <cds-textarea
+      label="Notes"
+      value="This is a text area"></cds-textarea>
+    <cds-textarea
+      label="Notes"
+      value="This is a text area"></cds-textarea>
+    <cds-textarea
+      label="Notes"
+      value="This is a text area"></cds-textarea>
+  </div>
 
-    <!-- subtitle optional -->
-    <div slot="subtitle">Subtitle text which can provide more detail on the content being displayed.</div>
-
-    <!-- Action toolbar optional -->
-    <cds-button slot="action-toolbar">Copy</cds-button>
-    <cds-button slot="action-toolbar" aria-label="Settings" has-icon-only="true" kind=${BUTTON_KIND.GHOST} size="sm" tooltip-text="Settings">
-      ${Settings({ slot: 'icon' })}
-    </cds-button>
-    <cds-button slot="action-toolbar" aria-label="Delete" has-icon-only="true" kind=${BUTTON_KIND.GHOST} size="sm" tooltip-text="Delete">
-      ${Trashcan({ slot: 'icon' })}
-    </cds-button>
-
-    <!-- Side panel actions optional -->
-    <cds-button slot="actions" kind=${BUTTON_KIND.GHOST}>Ghost</cds-button>
-    <cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}></cds-button>
-  </cds-side-panel>
+  <!-- slotted subtitle slotted content -->
+  <div slot="subtitle">This is your subtitle slot.</div>
+
+  <!-- slotted action toolbar cds-buttons -->
+  <cds-button slot="action-toolbar">Copy</cds-button>
+  <cds-button
+    slot="action-toolbar"
+    aria-label="Settings"
+    has-icon-only="true"
+    kind="ghost"
+    size="sm"
+    tooltip-text="Settings">
+    <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" slot="icon"><path d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3	c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1	C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4	c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4	c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4	c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8	L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6	C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"></path><path d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8	c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"></path></svg>
+  </cds-button>
+  <cds-button
+    slot="action-toolbar"
+    aria-label="Delete"
+    has-icon-only="true"
+    kind="ghost"
+    size="sm"
+    tooltip-text="Delete">
+    <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 32 32" slot="icon"><path d="M12 12H14V24H12zM18 12H20V24H18z"></path><path d="M4 6V8H6V28a2 2 0 002 2H24a2 2 0 002-2V8h2V6zM8 28V8H24V28zM12 2H20V4H12z"></path></svg>
+  </cds-button>
+
+  <!-- slotted action items cds-buttons -->
+  <cds-button key="ghost" slot="actions" kind="ghost">
+    Ghost
+  </cds-button>
+  <cds-button key="secondary" slot="actions" kind="secondary">
+    Secondary
+  </cds-button>
+  <cds-button key="primary" slot="actions" kind="primary">
+    Primary
+  </cds-button>
+
+  <!-- slotted slug -->
+  <cds-slug size="xs" alignment="bottom-right">
+    <div slot="body-text">
+      <p class="secondary">AI Explained</p>
+      <h1>84%</h1>
+      <p class="secondary bold">Confidence score</p>
+      <p class="secondary">
+        Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+        do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+      </p>
+      <hr />
+      <p class="secondary">Model type</p>
+      <p class="bold">Foundation model</p>
+    </div>
+  </cds-slug>
+</cds-side-panel>
 </body>
 
-</html>
+<script>
+    const toggleButton = () => {
+    const tearsheet = document.querySelector(`cds-side-panel`);
+    tearsheet?.toggleAttribute('open');
+  };
+
+  document.getElementById("toggle-side-panel").addEventListener("click", toggleButton);
+</script>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/side-panel/package.json
@@ -12,11 +12,13 @@
   },
   "dependencies": {
     "@carbon/styles": "^1.34.0",
-    "@carbon/web-components": "latest",
+    "@carbon/web-components": "file:./package.tgz",
     "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.5",
     "parcel-bundler": "1.12.3",
     "rimraf": "^3.0.2"
   }