@carbon/ibm-products-web-components 0.13.0-rc.0 → 0.14.0-rc.0

package/README.md

@@ -0,0 +1,10 @@
+# @carbon/ibm-products-web-components
+
+## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
+
+This package uses IBM Telemetry to collect de-identified and anonymized metrics
+data. By installing this package as a dependency you are agreeing to telemetry
+collection. To opt out, see
+[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
+For more information on the data being collected, please see the
+[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).

package/es/components/side-panel/_story-assets/index.d.ts

@@ -0,0 +1,5 @@
+export declare const getContent: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getSubTitle: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getActionToolbarItems: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getActionItems: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getSlug: (index: any) => import("lit-html").TemplateResult<1> | null;

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

@@ -0,0 +1,213 @@
+/**
+ * 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 { html } from 'lit';
+import styles from '../story-styles.scss.js';
+import { BUTTON_KIND } from '@carbon/web-components/es/components/button/defs.js';
+
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+const storyPrefix = 'side-panel-stories__';
+const getContent = (index) => {
+    switch (index) {
+        case 1:
+            return html `
+        <style>
+          ${styles}
+        </style>
+        <h5>Section</h5>
+        <cds-text-input
+          label="Input A"
+          id="side-panel-story-text-input-a"
+          class="${storyPrefix}text-input"
+        ></cds-text-input>
+        <cds-text-input
+          label="Input B"
+          id="side-panel-story-text-input-b"
+          class="${storyPrefix}text-input"
+        ></cds-text-input>
+      `;
+        case 2:
+            return html `
+        <style>
+          ${styles}
+        </style>
+        <h5>Section</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>
+      `;
+        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-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"
+        >
+        </cds-button>
+        <cds-button
+          slot="action-toolbar"
+          aria-label="Delete"
+          has-icon-only="true"
+          kind=${BUTTON_KIND.GHOST}
+          size="sm"
+          tooltip-text="Delete"
+        >
+        </cds-button>
+      `;
+        default:
+            return null;
+    }
+};
+// TODO: There are problems switching this
+const getActionItems = (index) => {
+    switch (index) {
+        case 1:
+            return html `<cds-button key="p" slot="actions" kind=${BUTTON_KIND.PRIMARY}
+        >Primary</cds-button
+      >`;
+        case 2:
+            return html `
+        <cds-button slot="actions" kind=${BUTTON_KIND.GHOST}>Ghost</cds-button>
+        <cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
+          >Primary</cds-button
+        >
+      `;
+        case 3:
+            return html ` <cds-button slot="actions" kind=${BUTTON_KIND.DANGER}
+          >Danger</cds-button
+        >
+        <cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
+          >Primary</cds-button
+        >`;
+        case 4:
+            return html ` <cds-button slot="actions" kind=${BUTTON_KIND.GHOST}
+          >Ghost</cds-button
+        >
+        <cds-button slot="actions" kind=${BUTTON_KIND.SECONDARY}
+          >Secondary</cds-button
+        >
+        <cds-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
+          >Primary</cds-button
+        >`;
+        case 5:
+            return html `<cds-button
+          key="danger"
+          slot="actions"
+          kind=${BUTTON_KIND.DANGER}
+          >Danger</cds-button
+        >
+        <cds-button key="secondary" slot="actions" kind=${BUTTON_KIND.SECONDARY}
+          >Secondary</cds-button
+        >
+        <cds-button key="primary" slot="actions" kind=${BUTTON_KIND.PRIMARY}
+          >Primary</cds-button
+        >`;
+        case 6:
+            return html `<cds-button
+          key="danger"
+          slot="actions"
+          kind=${BUTTON_KIND.DANGER}
+          >Danger</cds-button
+        >
+        <cds-button key="tertiary" slot="actions" kind=${BUTTON_KIND.TERTIARY}
+          >Tertiary</cds-button
+        >
+        <cds-button key="secondary" slot="actions" kind=${BUTTON_KIND.SECONDARY}
+          >Secondary</cds-button
+        >
+        <cds-button key="primary" slot="actions" kind=${BUTTON_KIND.PRIMARY}
+          >Primary</cds-button
+        >`;
+        default:
+            return null;
+    }
+};
+const getSlug = (index) => {
+    switch (index) {
+        case 1:
+            return html `<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>
+          <!-- //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-slug>`;
+        default:
+            return null;
+    }
+};
+
+export { getActionItems, getActionToolbarItems, getContent, getSlug, getSubTitle };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/side-panel/_story-assets/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAAA;;;;;AAKG;AAKH,MAAM,WAAW,GAAG,sBAAsB;AAE7B,MAAA,UAAU,GAAG,CAAC,KAAK,KAAI;IAClC,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA;;YAEL,MAAM;;;;;;mBAMC,WAAW,CAAA;;;;;mBAKX,WAAW,CAAA;;OAEvB;AACH,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA;;YAEL,MAAM;;;sBAGI,WAAW,CAAA;;;;;;;;;;sBAUX,WAAW,CAAA;;;;;;;;;;sBAUX,WAAW,CAAA;;;;;;;;;;;;;;OAc1B;AAEH,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEa,MAAA,WAAW,GAAG,CAAC,KAAK,KAAI;IACnC,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;YACJ,OAAO,IAAI,CAAA,CAAA,sDAAA,CAAwD;AACrE,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;;aAGJ;AACT,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEa,MAAA,qBAAqB,GAAG,CAAC,KAAK,KAAI;IAC7C,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA;;;;;;AAMA,eAAA,EAAA,WAAW,CAAC,KAAK;;;;;;;;;AASjB,eAAA,EAAA,WAAW,CAAC,KAAK;;;;;OAK3B;AACH,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEA;AACa,MAAA,cAAc,GAAG,CAAC,KAAK,KAAI;IACtC,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAA2C,wCAAA,EAAA,WAAW,CAAC,OAAO;;QAEvE;AACJ,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA;AACyB,wCAAA,EAAA,WAAW,CAAC,KAAK,CAAA;AACjB,wCAAA,EAAA,WAAW,CAAC,OAAO;;;OAGtD;AACH,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAoC,iCAAA,EAAA,WAAW,CAAC,MAAM;;;AAG7B,wCAAA,EAAA,WAAW,CAAC,OAAO;;UAEnD;AACN,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAoC,iCAAA,EAAA,WAAW,CAAC,KAAK;;;AAG5B,wCAAA,EAAA,WAAW,CAAC,SAAS;;;AAGrB,wCAAA,EAAA,WAAW,CAAC,OAAO;;UAEnD;AACN,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;;AAGA,eAAA,EAAA,WAAW,CAAC,MAAM;;;AAGuB,wDAAA,EAAA,WAAW,CAAC,SAAS;;;AAGvB,sDAAA,EAAA,WAAW,CAAC,OAAO;;UAEjE;AACN,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;;AAGA,eAAA,EAAA,WAAW,CAAC,MAAM;;;AAGsB,uDAAA,EAAA,WAAW,CAAC,QAAQ;;;AAGnB,wDAAA,EAAA,WAAW,CAAC,SAAS;;;AAGvB,sDAAA,EAAA,WAAW,CAAC,OAAO;;UAEjE;AACN,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEa,MAAA,OAAO,GAAG,CAAC,KAAK,KAAI;IAC/B,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;;;;;;kBAeC;AACd,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;;;;"}

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

@@ -1,7 +1,3 @@
-/**
- * Copyright IBM Corp. 2024, 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.
- */
-export {};
+import './index';
+import '@carbon/web-components/es/components/text-input/index.js';
+import '@carbon/web-components/es/components/slug/index.js';

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

@@ -5,9 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { vi, describe, it, expect } from 'vitest';
-import { fixture, html } from '@open-wc/testing';
+import { describe, it, expect, afterEach } from 'vitest';
+import { fixture, oneEvent, html } from '@open-wc/testing';
 import { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs.js';
+import { prefix } from '../../globals/settings.js';
+import './side-panel.js';
+import { getContent, getSlug, getActionToolbarItems, getSubTitle, getActionItems } from './_story-assets/index.js';
+import '@carbon/web-components/es/components/text-input/index.js';
+import '@carbon/web-components/es/components/slug/index.js';
 
 /**
  * Copyright IBM Corp. 2024, 2024
@@ -15,7 +20,6 @@ import { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs.js';
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-vi.mock('@carbon/icons/lib/close/20', () => vi.fn().mockReturnValue({}));
 const defaultProps = {
     animateTitle: true,
     includeOverlay: true,
@@ -28,8 +32,10 @@ const defaultProps = {
     selectorPageContent: '',
     size: SIDE_PANEL_SIZE.MEDIUM,
     title: 'Side panel title',
+    condensedActions: false,
 };
-const template = (props = defaultProps) => html `
+const blockClass = `${prefix}--side-panel`;
+const template = (props = defaultProps, children = getContent(1)) => html `
   <c4p-side-panel
     ?animate-title=${props.animateTitle}
     ?include-overlay=${props.includeOverlay && !props.slideIn}
@@ -43,14 +49,204 @@ const template = (props = defaultProps) => html `
     ?slide-in=${props.slideIn}
     .title=${props.title}
   >
-    content
+    ${children}
   </c4p-side-panel>
 `;
 describe('c4p-side-panel', () => {
     it('should render a side panel', async () => {
-        await fixture(template());
-        const elem = document.body.querySelector('c4p-side-panel');
-        expect(elem).toBeDefined();
+        const sidePanel = (await fixture(template()));
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeTruthy();
+        expect(sidePanel).toBeDefined();
+    });
+    it('should render a side panel on the left', async () => {
+        var _a, _b, _c;
+        const sidePanel = (await fixture(template(Object.assign(Object.assign({}, defaultProps), { placement: SIDE_PANEL_PLACEMENT.LEFT }))));
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.placement).toBe('left');
+        const dialogShadowEl = (_b = (_a = sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}`)) === null || _b === void 0 ? void 0 : _b[0];
+        if (dialogShadowEl) {
+            const transform = (_c = window.getComputedStyle(dialogShadowEl)) === null || _c === void 0 ? void 0 : _c.transform;
+            expect(transform).toBe('matrix(1, 0, 0, 1, -414, 0)');
+        }
+    });
+    it('should render a side panel on the right', async () => {
+        var _a, _b, _c;
+        const sidePanel = (await fixture(template()));
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.placement).toBe('right');
+        const dialogShadowEl = (_b = (_a = sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}`)) === null || _b === void 0 ? void 0 : _b[0];
+        if (dialogShadowEl) {
+            const transform = (_c = window.getComputedStyle(dialogShadowEl)) === null || _c === void 0 ? void 0 : _c.transform;
+            expect(transform).toBe('matrix(1, 0, 0, 1, 414, 0)');
+        }
+    });
+    it('should render a side panel with overlay and close when clicked outside', async () => {
+        var _a, _b;
+        const sidePanel = (await fixture(template()));
+        // Expect the side panel has include-overlay attribute
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.includeOverlay).toBeTruthy();
+        // get the overlay element by class .c4p--side-panel__overlay
+        const overlayElement = (_b = (_a = sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}__overlay`)) === null || _b === void 0 ? void 0 : _b[0];
+        // expect the element is present
+        expect(overlayElement).toBeDefined();
+        // ensure its tab index is -1
+        expect(overlayElement === null || overlayElement === void 0 ? void 0 : overlayElement.getAttribute('tabindex')).toBe('-1');
+        // ensure open attribute present
+        expect(overlayElement === null || overlayElement === void 0 ? void 0 : overlayElement.hasAttribute('open')).toBeTruthy();
+        // ensure the preventCloseOnClickOutside property is disabled
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.preventCloseOnClickOutside).toBeFalsy();
+        // add event listener `cds-side-panel-beingclosed` event
+        const eventBeforeClose = oneEvent(sidePanel, 
+        // getting event name ie., `cds-side-panel-beingclosed`
+        sidePanel.constructor.eventBeforeClose);
+        // add event listener `cds-side-panel-closed` event
+        const eventClose = oneEvent(sidePanel, 
+        // getting event name ie., `cds-side-panel-closed`
+        sidePanel.constructor.eventClose);
+        // dispatch `cds-side-panel-beingclosed` and `cds-side-panel-closed` events on overlay element click
+        overlayElement === null || overlayElement === void 0 ? void 0 : overlayElement.dispatchEvent(new Event('click'));
+        // listen to `cds-side-panel-beingclosed` and `cds-side-panel-closed` event
+        // and take the details of events
+        const { detail: beforeCloseDetail } = await eventBeforeClose;
+        const { detail: closeDetail } = await eventClose;
+        // make sure both events are triggered by overlay element
+        expect(beforeCloseDetail === null || beforeCloseDetail === void 0 ? void 0 : beforeCloseDetail.triggeredBy).toBe(overlayElement);
+        expect(closeDetail === null || closeDetail === void 0 ? void 0 : closeDetail.triggeredBy).toBe(overlayElement);
+        // expect the side panel is closed
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeFalsy();
+        // expect overlay also closed
+        expect(overlayElement === null || overlayElement === void 0 ? void 0 : overlayElement.hasAttribute('open')).toBeFalsy();
+    });
+    it('should close side panel on escape keydown', async () => {
+        const sidePanel = (await fixture(template()));
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeTruthy();
+        // add event listener `cds-side-panel-beingclosed` event
+        const eventBeforeClose = oneEvent(sidePanel, 
+        // getting event name ie., `cds-side-panel-beingclosed`
+        sidePanel.constructor.eventBeforeClose);
+        // add event listener `cds-side-panel-closed` event
+        const eventClose = oneEvent(sidePanel, 
+        // getting event name ie., `cds-side-panel-closed`
+        sidePanel.constructor.eventClose);
+        // press the escape key
+        document === null || document === void 0 ? void 0 : document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+        // listen to `cds-side-panel-beingclosed` and `cds-side-panel-closed` event
+        // and take the details of events
+        const { detail: beforeCloseDetail } = await eventBeforeClose;
+        const { detail: closeDetail } = await eventClose;
+        // make sure both events are triggered from document
+        expect(beforeCloseDetail === null || beforeCloseDetail === void 0 ? void 0 : beforeCloseDetail.triggeredBy).toBe(document);
+        expect(closeDetail === null || closeDetail === void 0 ? void 0 : closeDetail.triggeredBy).toBe(document);
+        // expect the side panel is closed
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeFalsy();
+    });
+    it('should close side panel on the close button click', async () => {
+        var _a;
+        const sidePanel = (await fixture(template()));
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeTruthy();
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.closeIconDescription).toBe('Close');
+        // get the close button
+        const closeButton = (_a = sidePanel.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('cds-icon-button');
+        // ensure the close button is present
+        expect(closeButton).toBeDefined();
+        // add event listener `cds-side-panel-beingclosed` event
+        const eventBeforeClose = oneEvent(sidePanel, 
+        // getting event name ie., `cds-side-panel-beingclosed`
+        sidePanel.constructor.eventBeforeClose);
+        // add event listener `cds-side-panel-closed` event
+        const eventClose = oneEvent(sidePanel, 
+        // getting event name ie., `cds-side-panel-closed`
+        sidePanel.constructor.eventClose);
+        // click on the close button
+        closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(new Event('click'));
+        // listen to `cds-side-panel-beingclosed` and `cds-side-panel-closed` event
+        // and take the details of events
+        const { detail: beforeCloseDetail } = await eventBeforeClose;
+        const { detail: closeDetail } = await eventClose;
+        // make sure both events are triggered by overlay element
+        expect(beforeCloseDetail === null || beforeCloseDetail === void 0 ? void 0 : beforeCloseDetail.triggeredBy).toBe(closeButton);
+        expect(closeDetail === null || closeDetail === void 0 ? void 0 : closeDetail.triggeredBy).toBe(closeButton);
+        // expect the side panel is closed
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeFalsy();
+    });
+    it('should render a slug', async () => {
+        const sidePanel = (await fixture(template(defaultProps, getSlug(1))));
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeTruthy();
+        // ensure there is a slug present
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel._hasSlug).toBeTruthy();
+        // locate slug element
+        const slug = sidePanel.querySelector('cds-slug');
+        // expect the slug element is present
+        expect(slug).toBeDefined();
+        // expect the default slug size is xs
+        expect(slug.size).toBe('xs');
+    });
+    it('should render navigation button', async () => {
+        const sidePanel = (await fixture(template(defaultProps, getActionToolbarItems(1))));
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeTruthy();
+        // get the copy button
+        const copyButton = Array.prototype.find.call(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.querySelectorAll('cds-button'), (el) => el.innerHTML === 'Copy');
+        // expect copy button to be present
+        expect(copyButton).toBeDefined();
+    });
+    it('should render a slide-in side panel', async () => {
+        var _a, _b;
+        const sidePanel = (await fixture(template(Object.assign(Object.assign({}, defaultProps), { slideIn: true }))));
+        expect(sidePanel.slideIn).toBeTruthy();
+        expect(sidePanel.includeOverlay).toBeFalsy();
+        // try to get the overlay element by class .c4p--side-panel__overlay
+        const overlayElement = (_b = (_a = sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}__overlay`)) === null || _b === void 0 ? void 0 : _b[0];
+        // expect the element is not present
+        expect(overlayElement).not.toBeDefined();
+    });
+    it('should call the eventNavigateBack callback', async () => {
+        var _a;
+        const prevStep = () => {
+            var _a;
+            (_a = document
+                .querySelector(`${prefix}-side-panel`)) === null || _a === void 0 ? void 0 : _a.setAttribute('current-step', '1');
+        };
+        const sidePanel = (await fixture(html `<c4p-side-panel
+        ?animate-title=${defaultProps.animateTitle}
+        ?condensed-actions=${defaultProps.condensedActions}
+        current-step="1"
+        ?include-overlay=${defaultProps.includeOverlay && !defaultProps.slideIn}
+        selector-initial-focus=${defaultProps.selectorInitialFocus}
+        label-text="${defaultProps.label}"
+        ?open=${defaultProps.open}
+        placement=${defaultProps.placement}
+        ?prevent-close-on-click-outside=${defaultProps.preventCloseOnClickOutside}
+        selector-page-content=${defaultProps.selectorPageContent}
+        size=${defaultProps.size}
+        ?slide-in=${defaultProps.slideIn}
+        .title=${defaultProps.title}
+        @c4p-side-panel-navigate-back=${prevStep}
+      >${getContent(1)}</<c4p-side-panel`));
+        const backButton = (_a = sidePanel.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${prefix}--side-panel__navigation-back-button`);
+        // create event listener
+        const eventNavigateBack = oneEvent(sidePanel, sidePanel.constructor.eventNavigateBack);
+        // dispatch the event from click of back button
+        backButton === null || backButton === void 0 ? void 0 : backButton.dispatchEvent(new Event('click'));
+        // expect the detail object of eventNavigateBack method
+        const { detail } = await eventNavigateBack;
+        expect(detail).toBeDefined();
+    });
+    it('should render subtitle text', async () => {
+        const sidePanel = (await fixture(template(defaultProps, getSubTitle(1))));
+        const subTitleText = sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.querySelector(`.${prefix}--side-panel__subtitle-text`);
+        expect(subTitleText).toBeDefined();
+    });
+    it('should render at least one action item', async () => {
+        const sidePanel = (await fixture(template(defaultProps, getActionItems(1))));
+        const actionItems = sidePanel.querySelectorAll(`.${prefix}--action-set__action-button`);
+        expect(actionItems).toHaveLength(1);
+    });
+    it('should render only 3 action items even if too many items exists', async () => {
+        const sidePanel = (await fixture(template(defaultProps, getActionItems(6))));
+        const actionItems = sidePanel.querySelectorAll(`.${prefix}--action-set__action-button`);
+        expect(actionItems).toHaveLength(3);
+    });
+    afterEach(() => {
+        // Clears the DOM after each test
+        document.body.innerHTML = '';
     });
 });
 //# sourceMappingURL=side-panel.test.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"side-panel.test.js","sources":["../../../src/components/side-panel/side-panel.test.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAAA;;;;;AAKG;AAEH,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;AAKxE,MAAM,YAAY,GAAG;AACnB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,cAAc,EAAE,IAAI;AACpB,IAAA,OAAO,EAAE,KAAK;AACd,IAAA,oBAAoB,EAAE,EAAE;AACxB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,oBAAoB,CAAC,KAAK;AACrC,IAAA,0BAA0B,EAAE,KAAK;AACjC,IAAA,mBAAmB,EAAE,EAAE;IACvB,IAAI,EAAE,eAAe,CAAC,MAAM;AAC5B,IAAA,KAAK,EAAE,kBAAkB;CAC1B;AAED,MAAM,QAAQ,GAAG,CAAC,KAAK,GAAG,YAAY,KAAK,IAAI,CAAA;;AAE1B,mBAAA,EAAA,KAAK,CAAC,YAAY;AAChB,qBAAA,EAAA,KAAK,CAAC,cAAc,IAAI,CAAC,KAAK,CAAC,OAAO;AAChC,2BAAA,EAAA,KAAK,CAAC,oBAAoB;AACrC,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAA;AACjB,UAAA,EAAA,KAAK,CAAC,IAAI;AACN,cAAA,EAAA,KAAK,CAAC,SAAS;AACO,oCAAA,EAAA,KAAK,CAAC,0BAA0B;AAC1C,0BAAA,EAAA,KAAK,CAAC,mBAAmB;AAC1C,SAAA,EAAA,KAAK,CAAC,IAAI;AACL,cAAA,EAAA,KAAK,CAAC,OAAO;AAChB,WAAA,EAAA,KAAK,CAAC,KAAK;;;;CAIvB;AAED,QAAQ,CAAC,gBAAgB,EAAE,MAAK;AAC9B,IAAA,EAAE,CAAC,4BAA4B,EAAE,YAAW;AAC1C,QAAA,MAAM,OAAO,CAAC,QAAQ,EAAE,CAAC;QACzB,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAuB,CAAC;AACjE,QAAA,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE;AAC5B,KAAC,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"side-panel.test.js","sources":["../../../src/components/side-panel/side-panel.test.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+/**
+ * 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 { css } from 'lit';
+
+var styles = css([".side-panel-stories__body-content{display:flex;flex-direction:column;gap:1rem;padding:1rem}.side-panel-stories__text-inputs{display:flex;gap:1rem}.side-panel-stories__text-inputs>*{flex-basis:50%}.side-panel-stories__story-container{block-size:100vh;display:grid;grid-template-rows:3rem 1fr;inline-size:100vw;inset-block-start:0;inset-inline-start:0;position:fixed}.side-panel-stories__story-header{background:var(--cds-background-inverse,#393939)}.side-panel-stories__story-content{align-items:center;display:flex;justify-content:center;position:relative}"]);
+
+export { styles as default };
+//# sourceMappingURL=story-styles.scss.js.map

package/es/components/side-panel/story-styles.scss.js.map

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

package/es/package.json.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var version = "0.12.0";
+var version = "0.13.0";
 var packageJson = {
 	version: version};
 

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

@@ -0,0 +1,5 @@
+export declare const getContent: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getSubTitle: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getActionToolbarItems: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getActionItems: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getSlug: (index: any) => import("lit-html").TemplateResult<1> | null;

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

@@ -0,0 +1,213 @@
+/**
+ * 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 { html } from 'lit';
+import styles from '../story-styles.scss.js';
+import { BUTTON_KIND } from '@carbon/web-components/es/components/button/defs.js';
+
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+const storyPrefix = 'side-panel-stories__';
+const getContent = (index) => {
+    switch (index) {
+        case 1:
+            return html `
+        <style>
+          ${styles}
+        </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>
+          ${styles}
+        </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=${BUTTON_KIND.GHOST}
+          size="sm"
+          tooltip-text="Settings"
+        >
+        </cds-custom-button>
+        <cds-custom-button
+          slot="action-toolbar"
+          aria-label="Delete"
+          has-icon-only="true"
+          kind=${BUTTON_KIND.GHOST}
+          size="sm"
+          tooltip-text="Delete"
+        >
+        </cds-custom-button>
+      `;
+        default:
+            return null;
+    }
+};
+// TODO: There are problems switching this
+const getActionItems = (index) => {
+    switch (index) {
+        case 1:
+            return html `<cds-custom-button key="p" slot="actions" kind=${BUTTON_KIND.PRIMARY}
+        >Primary</cds-custom-button
+      >`;
+        case 2:
+            return html `
+        <cds-custom-button slot="actions" kind=${BUTTON_KIND.GHOST}>Ghost</cds-custom-button>
+        <cds-custom-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
+          >Primary</cds-custom-button
+        >
+      `;
+        case 3:
+            return html ` <cds-custom-button slot="actions" kind=${BUTTON_KIND.DANGER}
+          >Danger</cds-custom-button
+        >
+        <cds-custom-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
+          >Primary</cds-custom-button
+        >`;
+        case 4:
+            return html ` <cds-custom-button slot="actions" kind=${BUTTON_KIND.GHOST}
+          >Ghost</cds-custom-button
+        >
+        <cds-custom-button slot="actions" kind=${BUTTON_KIND.SECONDARY}
+          >Secondary</cds-custom-button
+        >
+        <cds-custom-button slot="actions" kind=${BUTTON_KIND.PRIMARY}
+          >Primary</cds-custom-button
+        >`;
+        case 5:
+            return html `<cds-custom-button
+          key="danger"
+          slot="actions"
+          kind=${BUTTON_KIND.DANGER}
+          >Danger</cds-custom-button
+        >
+        <cds-custom-button key="secondary" slot="actions" kind=${BUTTON_KIND.SECONDARY}
+          >Secondary</cds-custom-button
+        >
+        <cds-custom-button key="primary" slot="actions" kind=${BUTTON_KIND.PRIMARY}
+          >Primary</cds-custom-button
+        >`;
+        case 6:
+            return html `<cds-custom-button
+          key="danger"
+          slot="actions"
+          kind=${BUTTON_KIND.DANGER}
+          >Danger</cds-custom-button
+        >
+        <cds-custom-button key="tertiary" slot="actions" kind=${BUTTON_KIND.TERTIARY}
+          >Tertiary</cds-custom-button
+        >
+        <cds-custom-button key="secondary" slot="actions" kind=${BUTTON_KIND.SECONDARY}
+          >Secondary</cds-custom-button
+        >
+        <cds-custom-button key="primary" slot="actions" kind=${BUTTON_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;
+    }
+};
+
+export { getActionItems, getActionToolbarItems, getContent, 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","sources":["../../../../src/components/side-panel/_story-assets/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAAA;;;;;AAKG;AAKH,MAAM,WAAW,GAAG,sBAAsB;AAE7B,MAAA,UAAU,GAAG,CAAC,KAAK,KAAI;IAClC,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA;;YAEL,MAAM;;;;;;mBAMC,WAAW,CAAA;;;;;mBAKX,WAAW,CAAA;;OAEvB;AACH,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA;;YAEL,MAAM;;;sBAGI,WAAW,CAAA;;;;;;;;;;sBAUX,WAAW,CAAA;;;;;;;;;;sBAUX,WAAW,CAAA;;;;;;;;;;;;;;OAc1B;AAEH,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEa,MAAA,WAAW,GAAG,CAAC,KAAK,KAAI;IACnC,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;YACJ,OAAO,IAAI,CAAA,CAAA,sDAAA,CAAwD;AACrE,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;;aAGJ;AACT,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEa,MAAA,qBAAqB,GAAG,CAAC,KAAK,KAAI;IAC7C,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA;;;;;;AAMA,eAAA,EAAA,WAAW,CAAC,KAAK;;;;;;;;;AASjB,eAAA,EAAA,WAAW,CAAC,KAAK;;;;;OAK3B;AACH,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEA;AACa,MAAA,cAAc,GAAG,CAAC,KAAK,KAAI;IACtC,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAA2C,wCAAA,EAAA,WAAW,CAAC,OAAO;;QAEvE;AACJ,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA;AACyB,wCAAA,EAAA,WAAW,CAAC,KAAK,CAAA;AACjB,wCAAA,EAAA,WAAW,CAAC,OAAO;;;OAGtD;AACH,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAoC,iCAAA,EAAA,WAAW,CAAC,MAAM;;;AAG7B,wCAAA,EAAA,WAAW,CAAC,OAAO;;UAEnD;AACN,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAoC,iCAAA,EAAA,WAAW,CAAC,KAAK;;;AAG5B,wCAAA,EAAA,WAAW,CAAC,SAAS;;;AAGrB,wCAAA,EAAA,WAAW,CAAC,OAAO;;UAEnD;AACN,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;;AAGA,eAAA,EAAA,WAAW,CAAC,MAAM;;;AAGuB,wDAAA,EAAA,WAAW,CAAC,SAAS;;;AAGvB,sDAAA,EAAA,WAAW,CAAC,OAAO;;UAEjE;AACN,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;;AAGA,eAAA,EAAA,WAAW,CAAC,MAAM;;;AAGsB,uDAAA,EAAA,WAAW,CAAC,QAAQ;;;AAGnB,wDAAA,EAAA,WAAW,CAAC,SAAS;;;AAGvB,sDAAA,EAAA,WAAW,CAAC,OAAO;;UAEjE;AACN,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;AAEa,MAAA,OAAO,GAAG,CAAC,KAAK,KAAI;IAC/B,QAAQ,KAAK;AACX,QAAA,KAAK,CAAC;AACJ,YAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;;;;;;;;;kBAeC;AACd,QAAA;AACE,YAAA,OAAO,IAAI;;AAEjB;;;;"}

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

@@ -1,7 +1,3 @@
-/**
- * Copyright IBM Corp. 2024, 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.
- */
-export {};
+import './index';
+import '@carbon/web-components/es-custom/components/text-input/index.js';
+import '@carbon/web-components/es-custom/components/slug/index.js';

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

@@ -5,9 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { vi, describe, it, expect } from 'vitest';
-import { fixture, html } from '@open-wc/testing';
+import { describe, it, expect, afterEach } from 'vitest';
+import { fixture, oneEvent, html } from '@open-wc/testing';
 import { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs.js';
+import { prefix } from '../../globals/settings.js';
+import './side-panel.js';
+import { getContent, getSlug, getActionToolbarItems, getSubTitle, getActionItems } from './_story-assets/index.js';
+import '@carbon/web-components/es-custom/components/text-input/index.js';
+import '@carbon/web-components/es-custom/components/slug/index.js';
 
 /**
  * Copyright IBM Corp. 2024, 2024
@@ -15,7 +20,6 @@ import { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs.js';
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-vi.mock('@carbon/icons/lib/close/20', () => vi.fn().mockReturnValue({}));
 const defaultProps = {
     animateTitle: true,
     includeOverlay: true,
@@ -28,8 +32,10 @@ const defaultProps = {
     selectorPageContent: '',
     size: SIDE_PANEL_SIZE.MEDIUM,
     title: 'Side panel title',
+    condensedActions: false,
 };
-const template = (props = defaultProps) => html `
+const blockClass = `${prefix}--side-panel`;
+const template = (props = defaultProps, children = getContent(1)) => html `
   <c4p-side-panel
     ?animate-title=${props.animateTitle}
     ?include-overlay=${props.includeOverlay && !props.slideIn}
@@ -43,14 +49,204 @@ const template = (props = defaultProps) => html `
     ?slide-in=${props.slideIn}
     .title=${props.title}
   >
-    content
+    ${children}
   </c4p-side-panel>
 `;
 describe('c4p-side-panel', () => {
     it('should render a side panel', async () => {
-        await fixture(template());
-        const elem = document.body.querySelector('c4p-side-panel');
-        expect(elem).toBeDefined();
+        const sidePanel = (await fixture(template()));
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeTruthy();
+        expect(sidePanel).toBeDefined();
+    });
+    it('should render a side panel on the left', async () => {
+        var _a, _b, _c;
+        const sidePanel = (await fixture(template(Object.assign(Object.assign({}, defaultProps), { placement: SIDE_PANEL_PLACEMENT.LEFT }))));
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.placement).toBe('left');
+        const dialogShadowEl = (_b = (_a = sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}`)) === null || _b === void 0 ? void 0 : _b[0];
+        if (dialogShadowEl) {
+            const transform = (_c = window.getComputedStyle(dialogShadowEl)) === null || _c === void 0 ? void 0 : _c.transform;
+            expect(transform).toBe('matrix(1, 0, 0, 1, -414, 0)');
+        }
+    });
+    it('should render a side panel on the right', async () => {
+        var _a, _b, _c;
+        const sidePanel = (await fixture(template()));
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.placement).toBe('right');
+        const dialogShadowEl = (_b = (_a = sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}`)) === null || _b === void 0 ? void 0 : _b[0];
+        if (dialogShadowEl) {
+            const transform = (_c = window.getComputedStyle(dialogShadowEl)) === null || _c === void 0 ? void 0 : _c.transform;
+            expect(transform).toBe('matrix(1, 0, 0, 1, 414, 0)');
+        }
+    });
+    it('should render a side panel with overlay and close when clicked outside', async () => {
+        var _a, _b;
+        const sidePanel = (await fixture(template()));
+        // Expect the side panel has include-overlay attribute
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.includeOverlay).toBeTruthy();
+        // get the overlay element by class .c4p--side-panel__overlay
+        const overlayElement = (_b = (_a = sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}__overlay`)) === null || _b === void 0 ? void 0 : _b[0];
+        // expect the element is present
+        expect(overlayElement).toBeDefined();
+        // ensure its tab index is -1
+        expect(overlayElement === null || overlayElement === void 0 ? void 0 : overlayElement.getAttribute('tabindex')).toBe('-1');
+        // ensure open attribute present
+        expect(overlayElement === null || overlayElement === void 0 ? void 0 : overlayElement.hasAttribute('open')).toBeTruthy();
+        // ensure the preventCloseOnClickOutside property is disabled
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.preventCloseOnClickOutside).toBeFalsy();
+        // add event listener `cds-custom-side-panel-beingclosed` event
+        const eventBeforeClose = oneEvent(sidePanel, 
+        // getting event name ie., `cds-custom-side-panel-beingclosed`
+        sidePanel.constructor.eventBeforeClose);
+        // add event listener `cds-custom-side-panel-closed` event
+        const eventClose = oneEvent(sidePanel, 
+        // getting event name ie., `cds-custom-side-panel-closed`
+        sidePanel.constructor.eventClose);
+        // dispatch `cds-custom-side-panel-beingclosed` and `cds-custom-side-panel-closed` events on overlay element click
+        overlayElement === null || overlayElement === void 0 ? void 0 : overlayElement.dispatchEvent(new Event('click'));
+        // listen to `cds-custom-side-panel-beingclosed` and `cds-custom-side-panel-closed` event
+        // and take the details of events
+        const { detail: beforeCloseDetail } = await eventBeforeClose;
+        const { detail: closeDetail } = await eventClose;
+        // make sure both events are triggered by overlay element
+        expect(beforeCloseDetail === null || beforeCloseDetail === void 0 ? void 0 : beforeCloseDetail.triggeredBy).toBe(overlayElement);
+        expect(closeDetail === null || closeDetail === void 0 ? void 0 : closeDetail.triggeredBy).toBe(overlayElement);
+        // expect the side panel is closed
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeFalsy();
+        // expect overlay also closed
+        expect(overlayElement === null || overlayElement === void 0 ? void 0 : overlayElement.hasAttribute('open')).toBeFalsy();
+    });
+    it('should close side panel on escape keydown', async () => {
+        const sidePanel = (await fixture(template()));
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeTruthy();
+        // add event listener `cds-custom-side-panel-beingclosed` event
+        const eventBeforeClose = oneEvent(sidePanel, 
+        // getting event name ie., `cds-custom-side-panel-beingclosed`
+        sidePanel.constructor.eventBeforeClose);
+        // add event listener `cds-custom-side-panel-closed` event
+        const eventClose = oneEvent(sidePanel, 
+        // getting event name ie., `cds-custom-side-panel-closed`
+        sidePanel.constructor.eventClose);
+        // press the escape key
+        document === null || document === void 0 ? void 0 : document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+        // listen to `cds-custom-side-panel-beingclosed` and `cds-custom-side-panel-closed` event
+        // and take the details of events
+        const { detail: beforeCloseDetail } = await eventBeforeClose;
+        const { detail: closeDetail } = await eventClose;
+        // make sure both events are triggered from document
+        expect(beforeCloseDetail === null || beforeCloseDetail === void 0 ? void 0 : beforeCloseDetail.triggeredBy).toBe(document);
+        expect(closeDetail === null || closeDetail === void 0 ? void 0 : closeDetail.triggeredBy).toBe(document);
+        // expect the side panel is closed
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeFalsy();
+    });
+    it('should close side panel on the close button click', async () => {
+        var _a;
+        const sidePanel = (await fixture(template()));
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeTruthy();
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.closeIconDescription).toBe('Close');
+        // get the close button
+        const closeButton = (_a = sidePanel.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('cds-custom-icon-button');
+        // ensure the close button is present
+        expect(closeButton).toBeDefined();
+        // add event listener `cds-custom-side-panel-beingclosed` event
+        const eventBeforeClose = oneEvent(sidePanel, 
+        // getting event name ie., `cds-custom-side-panel-beingclosed`
+        sidePanel.constructor.eventBeforeClose);
+        // add event listener `cds-custom-side-panel-closed` event
+        const eventClose = oneEvent(sidePanel, 
+        // getting event name ie., `cds-custom-side-panel-closed`
+        sidePanel.constructor.eventClose);
+        // click on the close button
+        closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(new Event('click'));
+        // listen to `cds-custom-side-panel-beingclosed` and `cds-custom-side-panel-closed` event
+        // and take the details of events
+        const { detail: beforeCloseDetail } = await eventBeforeClose;
+        const { detail: closeDetail } = await eventClose;
+        // make sure both events are triggered by overlay element
+        expect(beforeCloseDetail === null || beforeCloseDetail === void 0 ? void 0 : beforeCloseDetail.triggeredBy).toBe(closeButton);
+        expect(closeDetail === null || closeDetail === void 0 ? void 0 : closeDetail.triggeredBy).toBe(closeButton);
+        // expect the side panel is closed
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeFalsy();
+    });
+    it('should render a slug', async () => {
+        const sidePanel = (await fixture(template(defaultProps, getSlug(1))));
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeTruthy();
+        // ensure there is a slug present
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel._hasSlug).toBeTruthy();
+        // locate slug element
+        const slug = sidePanel.querySelector('cds-custom-slug');
+        // expect the slug element is present
+        expect(slug).toBeDefined();
+        // expect the default slug size is xs
+        expect(slug.size).toBe('xs');
+    });
+    it('should render navigation button', async () => {
+        const sidePanel = (await fixture(template(defaultProps, getActionToolbarItems(1))));
+        expect(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.open).toBeTruthy();
+        // get the copy button
+        const copyButton = Array.prototype.find.call(sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.querySelectorAll('cds-custom-button'), (el) => el.innerHTML === 'Copy');
+        // expect copy button to be present
+        expect(copyButton).toBeDefined();
+    });
+    it('should render a slide-in side panel', async () => {
+        var _a, _b;
+        const sidePanel = (await fixture(template(Object.assign(Object.assign({}, defaultProps), { slideIn: true }))));
+        expect(sidePanel.slideIn).toBeTruthy();
+        expect(sidePanel.includeOverlay).toBeFalsy();
+        // try to get the overlay element by class .c4p--side-panel__overlay
+        const overlayElement = (_b = (_a = sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${blockClass}__overlay`)) === null || _b === void 0 ? void 0 : _b[0];
+        // expect the element is not present
+        expect(overlayElement).not.toBeDefined();
+    });
+    it('should call the eventNavigateBack callback', async () => {
+        var _a;
+        const prevStep = () => {
+            var _a;
+            (_a = document
+                .querySelector(`${prefix}-side-panel`)) === null || _a === void 0 ? void 0 : _a.setAttribute('current-step', '1');
+        };
+        const sidePanel = (await fixture(html `<c4p-side-panel
+        ?animate-title=${defaultProps.animateTitle}
+        ?condensed-actions=${defaultProps.condensedActions}
+        current-step="1"
+        ?include-overlay=${defaultProps.includeOverlay && !defaultProps.slideIn}
+        selector-initial-focus=${defaultProps.selectorInitialFocus}
+        label-text="${defaultProps.label}"
+        ?open=${defaultProps.open}
+        placement=${defaultProps.placement}
+        ?prevent-close-on-click-outside=${defaultProps.preventCloseOnClickOutside}
+        selector-page-content=${defaultProps.selectorPageContent}
+        size=${defaultProps.size}
+        ?slide-in=${defaultProps.slideIn}
+        .title=${defaultProps.title}
+        @c4p-side-panel-navigate-back=${prevStep}
+      >${getContent(1)}</<c4p-side-panel`));
+        const backButton = (_a = sidePanel.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${prefix}--side-panel__navigation-back-button`);
+        // create event listener
+        const eventNavigateBack = oneEvent(sidePanel, sidePanel.constructor.eventNavigateBack);
+        // dispatch the event from click of back button
+        backButton === null || backButton === void 0 ? void 0 : backButton.dispatchEvent(new Event('click'));
+        // expect the detail object of eventNavigateBack method
+        const { detail } = await eventNavigateBack;
+        expect(detail).toBeDefined();
+    });
+    it('should render subtitle text', async () => {
+        const sidePanel = (await fixture(template(defaultProps, getSubTitle(1))));
+        const subTitleText = sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.querySelector(`.${prefix}--side-panel__subtitle-text`);
+        expect(subTitleText).toBeDefined();
+    });
+    it('should render at least one action item', async () => {
+        const sidePanel = (await fixture(template(defaultProps, getActionItems(1))));
+        const actionItems = sidePanel.querySelectorAll(`.${prefix}--action-set__action-button`);
+        expect(actionItems).toHaveLength(1);
+    });
+    it('should render only 3 action items even if too many items exists', async () => {
+        const sidePanel = (await fixture(template(defaultProps, getActionItems(6))));
+        const actionItems = sidePanel.querySelectorAll(`.${prefix}--action-set__action-button`);
+        expect(actionItems).toHaveLength(3);
+    });
+    afterEach(() => {
+        // Clears the DOM after each test
+        document.body.innerHTML = '';
     });
 });
 //# sourceMappingURL=side-panel.test.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"side-panel.test.js","sources":["../../../src/components/side-panel/side-panel.test.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAAA;;;;;AAKG;AAEH,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;AAKxE,MAAM,YAAY,GAAG;AACnB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,cAAc,EAAE,IAAI;AACpB,IAAA,OAAO,EAAE,KAAK;AACd,IAAA,oBAAoB,EAAE,EAAE;AACxB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,oBAAoB,CAAC,KAAK;AACrC,IAAA,0BAA0B,EAAE,KAAK;AACjC,IAAA,mBAAmB,EAAE,EAAE;IACvB,IAAI,EAAE,eAAe,CAAC,MAAM;AAC5B,IAAA,KAAK,EAAE,kBAAkB;CAC1B;AAED,MAAM,QAAQ,GAAG,CAAC,KAAK,GAAG,YAAY,KAAK,IAAI,CAAA;;AAE1B,mBAAA,EAAA,KAAK,CAAC,YAAY;AAChB,qBAAA,EAAA,KAAK,CAAC,cAAc,IAAI,CAAC,KAAK,CAAC,OAAO;AAChC,2BAAA,EAAA,KAAK,CAAC,oBAAoB;AACrC,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAA;AACjB,UAAA,EAAA,KAAK,CAAC,IAAI;AACN,cAAA,EAAA,KAAK,CAAC,SAAS;AACO,oCAAA,EAAA,KAAK,CAAC,0BAA0B;AAC1C,0BAAA,EAAA,KAAK,CAAC,mBAAmB;AAC1C,SAAA,EAAA,KAAK,CAAC,IAAI;AACL,cAAA,EAAA,KAAK,CAAC,OAAO;AAChB,WAAA,EAAA,KAAK,CAAC,KAAK;;;;CAIvB;AAED,QAAQ,CAAC,gBAAgB,EAAE,MAAK;AAC9B,IAAA,EAAE,CAAC,4BAA4B,EAAE,YAAW;AAC1C,QAAA,MAAM,OAAO,CAAC,QAAQ,EAAE,CAAC;QACzB,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,gBAAuB,CAAC;AACjE,QAAA,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE;AAC5B,KAAC,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"side-panel.test.js","sources":["../../../src/components/side-panel/side-panel.test.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/es-custom/components/side-panel/story-styles.scss.js

@@ -0,0 +1,13 @@
+/**
+ * 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 { css } from 'lit';
+
+var styles = css([".side-panel-stories__body-content{display:flex;flex-direction:column;gap:1rem;padding:1rem}.side-panel-stories__text-inputs{display:flex;gap:1rem}.side-panel-stories__text-inputs>*{flex-basis:50%}.side-panel-stories__story-container{block-size:100vh;display:grid;grid-template-rows:3rem 1fr;inline-size:100vw;inset-block-start:0;inset-inline-start:0;position:fixed}.side-panel-stories__story-header{background:var(--cds-custom-background-inverse,#393939)}.side-panel-stories__story-content{align-items:center;display:flex;justify-content:center;position:relative}"]);
+
+export { styles as default };
+//# sourceMappingURL=story-styles.scss.js.map

package/es-custom/components/side-panel/story-styles.scss.js.map

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

package/es-custom/package.json.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var version = "0.12.0";
+var version = "0.13.0";
 var packageJson = {
 	version: version};
 

package/lib/components/side-panel/_story-assets/index.d.ts

@@ -0,0 +1,5 @@
+export declare const getContent: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getSubTitle: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getActionToolbarItems: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getActionItems: (index: any) => import("lit-html").TemplateResult<1> | null;
+export declare const getSlug: (index: any) => import("lit-html").TemplateResult<1> | null;

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

@@ -1,7 +1,3 @@
-/**
- * Copyright IBM Corp. 2024, 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.
- */
-export {};
+import './index';
+import '@carbon/web-components/es/components/text-input/index.js';
+import '@carbon/web-components/es/components/slug/index.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-web-components",
   "description": "Carbon for IBM Products Web Components",
-  "version": "0.13.0-rc.0",
+  "version": "0.14.0-rc.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -17,7 +17,8 @@
     "es/**/*",
     "es-custom/**/*",
     "lib/**/*",
-    "scss/**/*"
+    "scss/**/*",
+    "telemetry.yml"
   ],
   "publishConfig": {
     "access": "public",
@@ -30,7 +31,8 @@
     "./dist/*": "./dist/*",
     "./scss/*": "./scss/*",
     "./custom-elements.json": "./custom-elements.json",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./telemetry.yml": "./telemetry.yml"
   },
   "keywords": [
     "carbon",
@@ -44,6 +46,7 @@
     "build": "yarn clean && node tasks/build.js && yarn wca",
     "build:storybook": "storybook build --quiet",
     "clean": "rimraf es lib scss dist storybook-static",
+    "postinstall": "ibmtelemetry --config=telemetry.yml",
     "preview": "vite preview",
     "storybook": "storybook dev -p 3000",
     "test": "vitest run",
@@ -51,9 +54,10 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@carbon/ibm-products-styles": "^2.60.0-rc.0",
+    "@carbon/ibm-products-styles": "^2.61.0-rc.0",
     "@carbon/styles": "1.75.0",
     "@carbon/web-components": "2.25.0",
+    "@ibm/telemetry-js": "^1.9.1",
     "lit": "^3.1.0"
   },
   "devDependencies": {
@@ -66,7 +70,7 @@
     "@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-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.1",
     "@storybook/addon-essentials": "^8.6.2",
     "@storybook/addon-links": "^8.6.2",
@@ -85,7 +89,7 @@
     "eslint": "^9.14.0",
     "eslint-config-carbon": "^3.19.0",
     "globby": "^14.0.2",
-    "happy-dom": "^15.11.6",
+    "happy-dom": "^17.0.0",
     "playwright": "^1.51.1",
     "postcss": "^8.4.47",
     "remark-gfm": "^4.0.0",
@@ -98,8 +102,9 @@
     "tslib": "^2.8.1",
     "typescript": "^5.5.3",
     "vite": "^6.0.3",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.1",
     "web-component-analyzer": "2.0.0"
   },
-  "gitHead": "c4a8482c99e4e30e6bec3e1f2cb850a654f034f6"
+  "gitHead": "1ae84b1d3e24190c7235618e084dc950a1cc8842"
 }

package/telemetry.yml

@@ -0,0 +1,10 @@
+# yaml-language-server: $schema=https://unpkg.com/@ibm/telemetry-config-schema@v1/dist/config.schema.json
+version: 1
+projectId: 8a79d901-a9c0-4672-94a4-fa8eea139832
+endpoint: 'https://www-api.ibm.com/ibm-telemetry/v1/metrics'
+collect:
+  npm:
+    dependencies: null
+  js:
+    functions: {}
+    tokens: null