@carbon/web-components 2.61.0 → 2.62.0-rc.0

package/es-custom/components/side-panel/_story-assets/index.js

@@ -0,0 +1,246 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * 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 iconLoader from "../../../globals/internal/icon-loader.js";
+import "../../button/defs.js";
+import "../../breadcrumb/index.js";
+import "../../notification/index.js";
+import story_styles_default from "../story-styles.scss.js";
+import { html } from "lit";
+import TrashCan16 from "@carbon/icons/es/trash-can/16";
+import Settings16 from "@carbon/icons/es/settings/16";
+//#region src/components/side-panel/_story-assets/index.ts
+/**
+* Copyright IBM Corp. 2024, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const storyPrefix = "side-panel-stories__";
+const getContent = (index) => {
+	switch (index) {
+		case 1: return html`
+        <style>
+          ${story_styles_default}
+        </style>
+        <h5>Section</h5>
+        <cds-custom-text-input
+          label="Input A"
+          id="side-panel-story-text-input-a"
+          class="${storyPrefix}text-input"></cds-custom-text-input>
+        <cds-custom-text-input
+          label="Input B"
+          id="side-panel-story-text-input-b"
+          class="${storyPrefix}text-input"></cds-custom-text-input>
+      `;
+		case 2: return html`
+        <style>
+          ${story_styles_default}
+        </style>
+        <h5>Section</h5>
+        <div class="${storyPrefix}text-inputs">
+          <cds-custom-text-input
+            label="Input A"
+            id="side-panel-story-text-input-a"></cds-custom-text-input>
+          <cds-custom-text-input
+            label="Input B"
+            id="side-panel-story-text-input-b"></cds-custom-text-input>
+        </div>
+        <div class="${storyPrefix}text-inputs">
+          <cds-custom-text-input
+            label="Input C"
+            id="side-panel-story-text-input-c"></cds-custom-text-input>
+          <cds-custom-text-input
+            label="Input D"
+            id="side-panel-story-text-input-d"></cds-custom-text-input>
+        </div>
+        <div class="${storyPrefix}textarea-container">
+          <cds-custom-textarea
+            label="Notes"
+            value="This is a text area"></cds-custom-textarea>
+          <cds-custom-textarea
+            label="Notes"
+            value="This is a text area"></cds-custom-textarea>
+          <cds-custom-textarea
+            label="Notes"
+            value="This is a text area"></cds-custom-textarea>
+        </div>
+      `;
+		default: return null;
+	}
+};
+const getSubTitle = (index) => {
+	switch (index) {
+		case 1: return html`<div slot="subtitle">This is your subtitle slot.</div>`;
+		case 2: return html`<div slot="subtitle">
+        I am your subtitle slot for <strong>adding detail</strong> that can be
+        one or two lines.
+      </div>`;
+		default: return null;
+	}
+};
+const getActionToolbarItems = (index) => {
+	switch (index) {
+		case 1: return html`
+        <cds-custom-button slot="action-toolbar">Copy</cds-custom-button>
+        <cds-custom-button
+          slot="action-toolbar"
+          aria-label="Settings"
+          has-icon-only="true"
+          kind=${"ghost"}
+          size="sm"
+          tooltip-text="Settings">
+          ${iconLoader(Settings16, { slot: "icon" })}
+        </cds-custom-button>
+        <cds-custom-button
+          slot="action-toolbar"
+          aria-label="Delete"
+          has-icon-only="true"
+          kind=${"ghost"}
+          size="sm"
+          tooltip-text="Delete">
+          ${iconLoader(TrashCan16, { slot: "icon" })}
+        </cds-custom-button>
+      `;
+		default: return null;
+	}
+};
+const getActionItems = (index) => {
+	switch (index) {
+		case 1: return html`<cds-custom-button slot="actions" kind=${"primary"}
+        >Primary</cds-custom-button
+      >`;
+		case 2: return html`<cds-custom-button slot="actions" kind=${"ghost"}
+        >Ghost</cds-custom-button
+      >`;
+		case 3: return html`<cds-custom-button slot="actions" kind=${"danger"}
+        >Danger</cds-custom-button
+      >`;
+		case 4: return html`
+        <cds-custom-button slot="actions" kind=${"secondary"}
+          >Secondary</cds-custom-button
+        >
+        <cds-custom-button slot="actions" kind=${"primary"}
+          >Primary</cds-custom-button
+        >
+      `;
+		case 5: return html`
+        <cds-custom-button slot="actions" kind=${"ghost"}>Ghost</cds-custom-button>
+        <cds-custom-button slot="actions" kind=${"primary"}
+          >Primary</cds-custom-button
+        >
+      `;
+		case 6: return html`<cds-custom-button slot="actions" kind=${"danger"}
+          >Danger</cds-custom-button
+        >
+        <cds-custom-button slot="actions" kind=${"primary"}
+          >Primary</cds-custom-button
+        >`;
+		case 7: return html`<cds-custom-button slot="actions" kind=${"ghost"}
+          >Ghost</cds-custom-button
+        >
+        <cds-custom-button slot="actions" kind=${"secondary"}
+          >Secondary</cds-custom-button
+        >
+        <cds-custom-button slot="actions" kind=${"primary"}
+          >Primary</cds-custom-button
+        >`;
+		case 8: return html`<cds-custom-button slot="actions" kind=${"danger"}
+          >Danger</cds-custom-button
+        >
+        <cds-custom-button slot="actions" kind=${"secondary"}
+          >Secondary</cds-custom-button
+        >
+        <cds-custom-button slot="actions" kind=${"primary"}
+          >Primary</cds-custom-button
+        >`;
+		case 9: return html`<cds-custom-button slot="actions" kind=${"secondary"}
+          >Secondary</cds-custom-button
+        >
+        <cds-custom-button slot="actions" kind=${"secondary"}
+          >Secondary</cds-custom-button
+        >
+        <cds-custom-button slot="actions" kind=${"primary"}
+          >Primary</cds-custom-button
+        >`;
+		default: return null;
+	}
+};
+const getSlug = (index) => {
+	switch (index) {
+		case 1: return html`<cds-custom-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>
+          <!-- //cspell: disable -->
+          <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>
+          <!-- //cspell: enable -->
+          <hr />
+          <p class="secondary">Model type</p>
+          <p class="bold">Foundation model</p>
+        </div>
+      </cds-custom-slug>`;
+		default: return null;
+	}
+};
+const getCustomHeaderComponents = (index) => {
+	switch (index) {
+		case 1: return html` <style>
+          ${story_styles_default}
+        </style>
+        <div slot="above-title" class="${storyPrefix}custom-header-content">
+          <cds-custom-breadcrumb aria-label="">
+            <cds-custom-breadcrumb-item>
+              <cds-custom-breadcrumb-link href="#">Breadcrumb 1</cds-custom-breadcrumb-link>
+            </cds-custom-breadcrumb-item>
+            <cds-custom-breadcrumb-item>
+              <cds-custom-breadcrumb-link href="#">Breadcrumb 2</cds-custom-breadcrumb-link>
+            </cds-custom-breadcrumb-item>
+          </cds-custom-breadcrumb>
+        </div>`;
+		case 2: return html` <style>
+          ${story_styles_default}
+        </style>
+        <div slot="below-title" class="${storyPrefix}custom-header-content">
+          <cds-custom-inline-notification
+            title="Notification title"
+            subtitle="Subtitle text goes here"
+            kind="error">
+          </cds-custom-inline-notification>
+        </div>`;
+		case 3: return html` <style>
+          ${story_styles_default}
+        </style>
+        <div slot="above-title" class="${storyPrefix}custom-header-content">
+          <cds-custom-breadcrumb aria-label="">
+            <cds-custom-breadcrumb-item>
+              <cds-custom-breadcrumb-link href="#">Breadcrumb 1</cds-custom-breadcrumb-link>
+            </cds-custom-breadcrumb-item>
+            <cds-custom-breadcrumb-item>
+              <cds-custom-breadcrumb-link href="#">Breadcrumb 2</cds-custom-breadcrumb-link>
+            </cds-custom-breadcrumb-item>
+          </cds-custom-breadcrumb>
+        </div>
+
+        <div slot="below-title" class="${storyPrefix}custom-header-content">
+          <cds-custom-inline-notification
+            title="Notification title"
+            subtitle="Subtitle text goes here"
+            kind="error">
+          </cds-custom-inline-notification>
+        </div>`;
+		default: return null;
+	}
+};
+//#endregion
+export { getActionItems, getActionToolbarItems, getContent, getCustomHeaderComponents, getSlug, getSubTitle };
+
+//# sourceMappingURL=index.js.map

package/es-custom/components/side-panel/_story-assets/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["styles"],"sources":["../../../../src/components/side-panel/_story-assets/index.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2024, 2026\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 */\nimport { html } from 'lit';\nimport styles from '../story-styles.scss?lit';\nimport { BUTTON_KIND } from '../../button/defs';\nimport TrashCan16 from '@carbon/icons/es/trash-can/16';\nimport Settings16 from '@carbon/icons/es/settings/16';\nimport { iconLoader } from '../../../globals/internal/icon-loader';\nimport '../../breadcrumb/index';\nimport '../../notification/index';\n\nconst storyPrefix = 'side-panel-stories__';\n\nexport const getContent = (index) => {\n  switch (index) {\n    case 1:\n      return html`\n        <style>\n          ${styles}\n        </style>\n        <h5>Section</h5>\n        <cds-custom-text-input\n          label=\"Input A\"\n          id=\"side-panel-story-text-input-a\"\n          class=\"${storyPrefix}text-input\"></cds-custom-text-input>\n        <cds-custom-text-input\n          label=\"Input B\"\n          id=\"side-panel-story-text-input-b\"\n          class=\"${storyPrefix}text-input\"></cds-custom-text-input>\n      `;\n    case 2:\n      return html`\n        <style>\n          ${styles}\n        </style>\n        <h5>Section</h5>\n        <div class=\"${storyPrefix}text-inputs\">\n          <cds-custom-text-input\n            label=\"Input A\"\n            id=\"side-panel-story-text-input-a\"></cds-custom-text-input>\n          <cds-custom-text-input\n            label=\"Input B\"\n            id=\"side-panel-story-text-input-b\"></cds-custom-text-input>\n        </div>\n        <div class=\"${storyPrefix}text-inputs\">\n          <cds-custom-text-input\n            label=\"Input C\"\n            id=\"side-panel-story-text-input-c\"></cds-custom-text-input>\n          <cds-custom-text-input\n            label=\"Input D\"\n            id=\"side-panel-story-text-input-d\"></cds-custom-text-input>\n        </div>\n        <div class=\"${storyPrefix}textarea-container\">\n          <cds-custom-textarea\n            label=\"Notes\"\n            value=\"This is a text area\"></cds-custom-textarea>\n          <cds-custom-textarea\n            label=\"Notes\"\n            value=\"This is a text area\"></cds-custom-textarea>\n          <cds-custom-textarea\n            label=\"Notes\"\n            value=\"This is a text area\"></cds-custom-textarea>\n        </div>\n      `;\n\n    default:\n      return null;\n  }\n};\n\nexport const getSubTitle = (index) => {\n  switch (index) {\n    case 1:\n      return html`<div slot=\"subtitle\">This is your subtitle slot.</div>`;\n    case 2:\n      return html`<div slot=\"subtitle\">\n        I am your subtitle slot for <strong>adding detail</strong> that can be\n        one or two lines.\n      </div>`;\n    default:\n      return null;\n  }\n};\n\nexport const getActionToolbarItems = (index) => {\n  switch (index) {\n    case 1:\n      return html`\n        <cds-custom-button slot=\"action-toolbar\">Copy</cds-custom-button>\n        <cds-custom-button\n          slot=\"action-toolbar\"\n          aria-label=\"Settings\"\n          has-icon-only=\"true\"\n          kind=${BUTTON_KIND.GHOST}\n          size=\"sm\"\n          tooltip-text=\"Settings\">\n          ${iconLoader(Settings16, { slot: 'icon' })}\n        </cds-custom-button>\n        <cds-custom-button\n          slot=\"action-toolbar\"\n          aria-label=\"Delete\"\n          has-icon-only=\"true\"\n          kind=${BUTTON_KIND.GHOST}\n          size=\"sm\"\n          tooltip-text=\"Delete\">\n          ${iconLoader(TrashCan16, { slot: 'icon' })}\n        </cds-custom-button>\n      `;\n    default:\n      return null;\n  }\n};\n\n// TODO: There are problems switching this\nexport const getActionItems = (index) => {\n  switch (index) {\n    case 1: // One button\n      return html`<cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.PRIMARY}\n        >Primary</cds-custom-button\n      >`;\n    case 2: // One button (ghost)\n      return html`<cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.GHOST}\n        >Ghost</cds-custom-button\n      >`;\n    case 3: // One button (danger)\n      return html`<cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.DANGER}\n        >Danger</cds-custom-button\n      >`;\n    case 4: // Two buttons\n      return html`\n        <cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.SECONDARY}\n          >Secondary</cds-custom-button\n        >\n        <cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.PRIMARY}\n          >Primary</cds-custom-button\n        >\n      `;\n    case 5: // Two buttons with ghost\n      return html`\n        <cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.GHOST}>Ghost</cds-custom-button>\n        <cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.PRIMARY}\n          >Primary</cds-custom-button\n        >\n      `;\n    case 6: // Two buttons with danger\n      return html`<cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.DANGER}\n          >Danger</cds-custom-button\n        >\n        <cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.PRIMARY}\n          >Primary</cds-custom-button\n        >`;\n    case 7: // Three buttons with ghost\n      return html`<cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.GHOST}\n          >Ghost</cds-custom-button\n        >\n        <cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.SECONDARY}\n          >Secondary</cds-custom-button\n        >\n        <cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.PRIMARY}\n          >Primary</cds-custom-button\n        >`;\n    case 8: // Three buttons with danger\n      return html`<cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.DANGER}\n          >Danger</cds-custom-button\n        >\n        <cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.SECONDARY}\n          >Secondary</cds-custom-button\n        >\n        <cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.PRIMARY}\n          >Primary</cds-custom-button\n        >`;\n    case 9: // Three buttons\n      return html`<cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.SECONDARY}\n          >Secondary</cds-custom-button\n        >\n        <cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.SECONDARY}\n          >Secondary</cds-custom-button\n        >\n        <cds-custom-button slot=\"actions\" kind=${BUTTON_KIND.PRIMARY}\n          >Primary</cds-custom-button\n        >`;\n    default:\n      return null;\n  }\n};\n\nexport const getSlug = (index) => {\n  switch (index) {\n    case 1:\n      return html`<cds-custom-slug size=\"xs\" alignment=\"bottom-right\">\n        <div slot=\"body-text\">\n          <p class=\"secondary\">AI Explained</p>\n          <h1>84%</h1>\n          <p class=\"secondary bold\">Confidence score</p>\n          <!-- //cspell: disable -->\n          <p class=\"secondary\">\n            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n          </p>\n          <!-- //cspell: enable -->\n          <hr />\n          <p class=\"secondary\">Model type</p>\n          <p class=\"bold\">Foundation model</p>\n        </div>\n      </cds-custom-slug>`;\n    default:\n      return null;\n  }\n};\n\nexport const getCustomHeaderComponents = (index) => {\n  switch (index) {\n    case 1:\n      return html` <style>\n          ${styles}\n        </style>\n        <div slot=\"above-title\" class=\"${storyPrefix}custom-header-content\">\n          <cds-custom-breadcrumb aria-label=\"\">\n            <cds-custom-breadcrumb-item>\n              <cds-custom-breadcrumb-link href=\"#\">Breadcrumb 1</cds-custom-breadcrumb-link>\n            </cds-custom-breadcrumb-item>\n            <cds-custom-breadcrumb-item>\n              <cds-custom-breadcrumb-link href=\"#\">Breadcrumb 2</cds-custom-breadcrumb-link>\n            </cds-custom-breadcrumb-item>\n          </cds-custom-breadcrumb>\n        </div>`;\n    case 2:\n      return html` <style>\n          ${styles}\n        </style>\n        <div slot=\"below-title\" class=\"${storyPrefix}custom-header-content\">\n          <cds-custom-inline-notification\n            title=\"Notification title\"\n            subtitle=\"Subtitle text goes here\"\n            kind=\"error\">\n          </cds-custom-inline-notification>\n        </div>`;\n    case 3:\n      return html` <style>\n          ${styles}\n        </style>\n        <div slot=\"above-title\" class=\"${storyPrefix}custom-header-content\">\n          <cds-custom-breadcrumb aria-label=\"\">\n            <cds-custom-breadcrumb-item>\n              <cds-custom-breadcrumb-link href=\"#\">Breadcrumb 1</cds-custom-breadcrumb-link>\n            </cds-custom-breadcrumb-item>\n            <cds-custom-breadcrumb-item>\n              <cds-custom-breadcrumb-link href=\"#\">Breadcrumb 2</cds-custom-breadcrumb-link>\n            </cds-custom-breadcrumb-item>\n          </cds-custom-breadcrumb>\n        </div>\n\n        <div slot=\"below-title\" class=\"${storyPrefix}custom-header-content\">\n          <cds-custom-inline-notification\n            title=\"Notification title\"\n            subtitle=\"Subtitle text goes here\"\n            kind=\"error\">\n          </cds-custom-inline-notification>\n        </div>`;\n    default:\n      return null;\n  }\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,cAAc;AAEpB,MAAa,cAAc,UAAU;CACnC,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,IAAI;;YAELA,qBAAO;;;;;;mBAMA,YAAY;;;;mBAIZ,YAAY;;EAE3B,KAAK,GACH,OAAO,IAAI;;YAELA,qBAAO;;;sBAGG,YAAY;;;;;;;;sBAQZ,YAAY;;;;;;;;sBAQZ,YAAY;;;;;;;;;;;;EAa9B,SACE,OAAO;CACX;AACF;AAEA,MAAa,eAAe,UAAU;CACpC,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,IAAI;EACb,KAAK,GACH,OAAO,IAAI;;;;EAIb,SACE,OAAO;CACX;AACF;AAEA,MAAa,yBAAyB,UAAU;CAC9C,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,IAAI;;;;;;yBAMkB;;;YAGvB,WAAW,YAAY,EAAE,MAAM,OAAO,CAAC,EAAE;;;;;;yBAMlB;;;YAGvB,WAAW,YAAY,EAAE,MAAM,OAAO,CAAC,EAAE;;;EAGjD,SACE,OAAO;CACX;AACF;AAGA,MAAa,kBAAkB,UAAU;CACvC,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,IAAI,mCAAA,UAAuD;;;EAGpE,KAAK,GACH,OAAO,IAAI,mCAAA,QAAqD;;;EAGlE,KAAK,GACH,OAAO,IAAI,mCAAA,SAAsD;;;EAGnE,KAAK,GACH,OAAO,IAAI;sDAC+C;;;oDAGF;;;;EAI1D,KAAK,GACH,OAAO,IAAI;kDAC2C;oDACE;;;;EAI1D,KAAK,GACH,OAAO,IAAI,mCAAA,SAAsD;;;oDAGT;;;EAG1D,KAAK,GACH,OAAO,IAAI,mCAAA,QAAqD;;;sDAGN;;;oDAGF;;;EAG1D,KAAK,GACH,OAAO,IAAI,mCAAA,SAAsD;;;sDAGP;;;oDAGF;;;EAG1D,KAAK,GACH,OAAO,IAAI,mCAAA,YAAyD;;;sDAGV;;;oDAGF;;;EAG1D,SACE,OAAO;CACX;AACF;AAEA,MAAa,WAAW,UAAU;CAChC,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,IAAI;;;;;;;;;;;;;;;;EAgBb,SACE,OAAO;CACX;AACF;AAEA,MAAa,6BAA6B,UAAU;CAClD,QAAQ,OAAR;EACE,KAAK,GACH,OAAO,IAAI;YACLA,qBAAO;;yCAEsB,YAAY;;;;;;;;;;EAUjD,KAAK,GACH,OAAO,IAAI;YACLA,qBAAO;;yCAEsB,YAAY;;;;;;;EAOjD,KAAK,GACH,OAAO,IAAI;YACLA,qBAAO;;yCAEsB,YAAY;;;;;;;;;;;yCAWZ,YAAY;;;;;;;EAOjD,SACE,OAAO;CACX;AACF"}

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

@@ -1,5 +1,7 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * @license
+ *
+ * Copyright IBM Corp. 2023, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -24,6 +26,10 @@ export declare enum SIDE_PANEL_SIZE {
      * Large size.
      */
     LARGE = "lg",
+    /**
+     * Extra Large size.
+     */
+    EXTRA_LARGE = "xl",
     /**
      * 2X-Large size.
      */

package/es-custom/components/side-panel/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/side-panel/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,oBAAY,eAAe;IACzB;;OAEG;IACH,WAAW,OAAO;IAElB;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,iBAAiB,QAAQ;CAC1B;AAED,oBAAY,oBAAoB;IAC9B,sBAAsB;IACtB,KAAK,UAAU;IAEf,YAAY;IACZ,IAAI,SAAS;CACd"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/side-panel/defs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,oBAAY,eAAe;IACzB;;OAEG;IACH,WAAW,OAAO;IAElB;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,WAAW,OAAO;IAElB;;OAEG;IACH,iBAAiB,QAAQ;CAC1B;AAED,oBAAY,oBAAoB;IAC9B,sBAAsB;IACtB,KAAK,UAAU;IAEf,YAAY;IACZ,IAAI,SAAS;CACd"}

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

@@ -7,7 +7,9 @@
 
 //#region src/components/side-panel/defs.ts
 /**
-* Copyright IBM Corp. 2023, 2024
+* @license
+*
+* Copyright IBM Corp. 2023, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
@@ -33,6 +35,10 @@ let SIDE_PANEL_SIZE = /* @__PURE__ */ function(SIDE_PANEL_SIZE) {
 	*/
 	SIDE_PANEL_SIZE["LARGE"] = "lg";
 	/**
+	* Extra Large size.
+	*/
+	SIDE_PANEL_SIZE["EXTRA_LARGE"] = "xl";
+	/**
 	* 2X-Large size.
 	*/
 	SIDE_PANEL_SIZE["EXTRA_EXTRA_LARGE"] = "2xl";

package/es-custom/components/side-panel/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/side-panel/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 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\n/**\n * Modal size.\n */\nexport enum SIDE_PANEL_SIZE {\n  /**\n   * Extra small size.\n   */\n  EXTRA_SMALL = 'xs',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  /**\n   * 2X-Large size.\n   */\n  EXTRA_EXTRA_LARGE = '2xl',\n}\n\nexport enum SIDE_PANEL_PLACEMENT {\n  /** right / default */\n  RIGHT = 'right',\n\n  /** left  */\n  LEFT = 'left',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,kBAAL,yBAAA,iBAAA;;;;CAIL,gBAAA,iBAAA;;;;CAKA,gBAAA,WAAA;;;;CAKA,gBAAA,YAAA;;;;CAKA,gBAAA,WAAA;;;;CAKA,gBAAA,uBAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,uBAAL,yBAAA,sBAAA;;CAEL,qBAAA,WAAA;;CAGA,qBAAA,UAAA;;AACF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/side-panel/defs.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2023, 2026\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\n/**\n * Modal size.\n */\nexport enum SIDE_PANEL_SIZE {\n  /**\n   * Extra small size.\n   */\n  EXTRA_SMALL = 'xs',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  /**\n   * Extra Large size.\n   */\n  EXTRA_LARGE = 'xl',\n\n  /**\n   * 2X-Large size.\n   */\n  EXTRA_EXTRA_LARGE = '2xl',\n}\n\nexport enum SIDE_PANEL_PLACEMENT {\n  /** right / default */\n  RIGHT = 'right',\n\n  /** left  */\n  LEFT = 'left',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAYA,IAAY,kBAAL,yBAAA,iBAAA;;;;CAIL,gBAAA,iBAAA;;;;CAKA,gBAAA,WAAA;;;;CAKA,gBAAA,YAAA;;;;CAKA,gBAAA,WAAA;;;;CAKA,gBAAA,iBAAA;;;;CAKA,gBAAA,uBAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,uBAAL,yBAAA,sBAAA;;CAEL,qBAAA,WAAA;;CAGA,qBAAA,UAAA;;AACF,EAAA,CAAA,CAAA"}

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

@@ -1,5 +1,7 @@
 /**
- * Copyright IBM Corp. 2023, 2024
+ * @license
+ *
+ * Copyright IBM Corp. 2023, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es-custom/components/side-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/side-panel/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/side-panel/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,cAAc,CAAC"}

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

@@ -6,3 +6,15 @@
  */
 
 import "./side-panel.js";
+//#region src/components/side-panel/index.ts
+/**
+* @license
+*
+* Copyright IBM Corp. 2023, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+//#endregion
+
+//# sourceMappingURL=index.js.map

package/es-custom/components/side-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/side-panel/index.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2023, 2026\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 './side-panel';\n"],"mappings":""}

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

@@ -1,4 +1,6 @@
 /**
+ * @license
+ *
  * Copyright IBM Corp. 2023, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
@@ -6,11 +8,12 @@
  */
 import { LitElement } from 'lit';
 import { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs';
+import Handle from '../../globals/internal/handle';
 import '../button/index';
 import '../icon-button/index';
 import '../layer/index';
-import Handle from '../../globals/internal/handle';
-import '../button/button-set-base';
+import '../action-set/index.js';
+import '../resizer/index.js';
 export { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT };
 declare const CDSSidePanel_base: {
     new (...args: any[]): {
@@ -29,10 +32,6 @@ declare const CDSSidePanel_base: {
 /**
  * SidePanel.
  *
- * @deprecated Use Carbon for IBM Products `side-panel` component.
- *   This component has been deprecated in `@carbon/web-components` and will instead be maintained
- *   in the Carbon for IBM Products library:
- *   https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components
  * @element cds-custom-side-panel
  * @csspart dialog The dialog.
  * @fires cds-custom-side-panel-beingclosed
@@ -50,14 +49,6 @@ declare class CDSSidePanel extends CDSSidePanel_base {
      * The element that had focus before this side-panel gets open.
      */
     private _launcher;
-    /**
-     * Node to track focus going outside of side-panel content.
-     */
-    private _startSentinelNode;
-    /**
-     * Node to track focus going outside of side-panel content.
-     */
-    private _endSentinelNode;
     /**
      * Node to track side panel.
      */
@@ -67,7 +58,10 @@ declare class CDSSidePanel extends CDSSidePanel_base {
     private _title;
     private _subtitle;
     private _innerContent;
-    private _actions;
+    /**
+     * Reference to the resizer handle element
+     */
+    private _resizerHandle?;
     _doAnimateTitle: boolean;
     _isOpen: boolean;
     _containerScrollTop: number;
@@ -75,15 +69,27 @@ declare class CDSSidePanel extends CDSSidePanel_base {
     _hasSlug: boolean;
     _hasActionToolbar: boolean;
     _actionsCount: number;
+    _actionsMultiple: 'single' | 'double' | 'triple' | '';
     _slugCloseSize: string;
+    _customHeaderElements: Element[];
+    _customHeaderHidden: boolean;
+    _sidePanelWidth?: number;
+    _accumulatedDelta: number;
     /**
-     * Handles `blur` event on this element.
+     * Get focusable elements.
      *
-     * @param event The event.
-     * @param event.target The event target.
-     * @param event.relatedTarget The event relatedTarget.
+     * Querying all tabbable items.
+     *
+     * @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.
      */
-    private _handleBlur;
+    private getFocusable;
+    /**
+     * Handle the keydown event.
+     * Trap the focus inside the side-panel by tracking keydown.key == `Tab`
+     *
+     * @param {KeyboardEvent} event The keyboard event object.
+     */
+    protected _handleHostKeydown: (event: KeyboardEvent) => void;
     private _handleKeydown;
     private _reducedMotion;
     /**
@@ -110,9 +116,8 @@ declare class CDSSidePanel extends CDSSidePanel_base {
     private _checkUpdateIconButtonSizes;
     private _handleSlugChange;
     private _handleSubtitleChange;
+    private _handleCustomHeaderSlotChange;
     private _handleActionToolbarChange;
-    private _checkUpdateActionSizes;
-    private _maxActions;
     private _handleActionsChange;
     private _checkSetDoAnimateTitle;
     /**
@@ -121,6 +126,26 @@ declare class CDSSidePanel extends CDSSidePanel_base {
     private _resizeObserver;
     private _getScrollAnimationDistance;
     private _scrollObserver;
+    /**
+     * Handles resize start event from the resizer handle
+     */
+    private _handleResizeStart;
+    /**
+     * Handles resize drag event from the resizer handle
+     */
+    private _handleResizeDrag;
+    /**
+     * Handles resize end event from the resizer handle
+     */
+    private _handleResizeEnd;
+    /**
+     * Handles double-click/double-tap on resizer to reset size
+     */
+    private _handleResizeReset;
+    /**
+     * Get the percentage of screen width the panel is covering
+     */
+    private _getPanelWidthPercent;
     private _handleCurrentStepUpdate;
     /**
      * Determines if the title will animate on scroll
@@ -130,6 +155,10 @@ declare class CDSSidePanel extends CDSSidePanel_base {
      * Sets the close button icon description
      */
     closeIconDescription: string;
+    /**
+     * Sets the close button tooltip alignment
+     */
+    closeIconTooltipAlignment: string;
     /**
      * Determines whether the side panel should render the condensed version (affects action buttons primarily)
      */
@@ -170,6 +199,10 @@ declare class CDSSidePanel extends CDSSidePanel_base {
      * Selector for page content, used to push content to side except
      */
     selectorPageContent: string;
+    /**
+     * Show/hide the "X" close button
+     */
+    hideCloseButton: boolean;
     /**
      * SidePanel size.
      */
@@ -178,6 +211,10 @@ declare class CDSSidePanel extends CDSSidePanel_base {
      * Determines if this panel slides in
      */
     slideIn: boolean;
+    /**
+     * Determines if the side panel is resizable
+     */
+    resizable: boolean;
     /**
      * Sets the title text
      */
@@ -210,6 +247,7 @@ declare class CDSSidePanel extends CDSSidePanel_base {
      * The name of the custom event fired on clicking the navigate back button
      */
     static get eventNavigateBack(): string;
+    static styles: any;
 }
 export default CDSSidePanel;
 //# sourceMappingURL=side-panel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"side-panel.d.ts","sourceRoot":"","sources":["../../../src/components/side-panel/side-panel.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"side-panel.d.ts","sourceRoot":"","sources":["../../../src/components/side-panel/side-panel.ts"],"names":[],"mappings":"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"}