@carbon/ibm-products-web-components 0.35.0 → 0.36.0

package/es-custom/components/tearsheet-preview/_story-assets/stacking-tearsheet.js

@@ -1,320 +0,0 @@
-/**
- * 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 { __decorate } from 'tslib';
-import { LitElement, html } from 'lit';
-import { property, state, customElement } from 'lit/decorators.js';
-import { stackManager } from '../stack-signal.js';
-import '../tearsheet.js';
-import '../tearsheet-body.js';
-import '../tearsheet-footer.js';
-import '../tearsheet-header.js';
-import '../tearsheet-influencer.js';
-import '../tearsheet-header-content.js';
-import '../tearsheet-navigation-bar.js';
-import '../tearsheet-scroller.js';
-import '../tearsheet-summary-content.js';
-import '@carbon/web-components/es-custom/components/button/index.js';
-import '@carbon/web-components/es-custom/components/text-input/index.js';
-import styles from './_storybook-styles.scss.js';
-import { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';
-import BottomPanelOpen32 from '@carbon/icons/es/bottom-panel--open/32';
-
-/**
- * @license
- *
- * 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.
- */
-let StackingTearsheetDemo = class StackingTearsheetDemo extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.tearsheetType = 'wide';
-        this._open1 = false;
-        this._open2 = false;
-        this._open3 = false;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Set stack step size
-        stackManager.setStackStepSize('lg');
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        // Clean up stack
-        stackManager.reset();
-    }
-    _toggleTearsheet1() {
-        this._open1 = !this._open1;
-    }
-    _toggleTearsheet2() {
-        this._open2 = !this._open2;
-    }
-    _toggleTearsheet3() {
-        this._open3 = !this._open3;
-    }
-    render() {
-        const summaryContent = html `
-      <div class="rightDetailsBody">
-        <div>
-          <label>item 1</label>
-          <p>item description</p>
-        </div>
-        <div>
-          <label>item 2</label>
-          <p>item description</p>
-        </div>
-        <div>
-          <label>item 3</label>
-          <p>item description</p>
-        </div>
-        <div>
-          <label>item 4</label>
-          <p>item description</p>
-        </div>
-        <div>
-          <label>item 5</label>
-          <p>item description</p>
-        </div>
-      </div>
-    `;
-        const dummyContent = html `
-      <section class="main-content">
-        <h4>Main content heading</h4>
-        <div class="tearsheet-preview-stories-text-inputs">
-          <cds-custom-text-input
-            label="Enter an important value here"
-            id="tss-ft1"
-          ></cds-custom-text-input>
-          <cds-custom-text-input
-            label="Here is an entry field:"
-            id="tss-ft2"
-          ></cds-custom-text-input>
-        </div>
-      </section>
-    `;
-        const getTearsheetVariant = (index) => {
-            if (this.tearsheetType === 'mixed') {
-                return index % 2 === 0 ? 'narrow' : 'wide';
-            }
-            if (this.tearsheetType === 'wide') {
-                return 'wide';
-            }
-            if (this.tearsheetType === 'narrow') {
-                return 'narrow';
-            }
-            return 'wide';
-        };
-        return html `
-      <div class="stackButtons">
-        <cds-custom-button @click="${this._toggleTearsheet1}">
-          Toggle Tearsheet 1
-        </cds-custom-button>
-        <cds-custom-button @click="${this._toggleTearsheet2}">
-          Toggle Tearsheet 2
-        </cds-custom-button>
-        <cds-custom-button @click="${this._toggleTearsheet3}">
-          Toggle Tearsheet 3
-        </cds-custom-button>
-      </div>
-      <div class="smallScreenButton">
-        <cds-custom-button
-          kind="ghost"
-          @click="${this._toggleTearsheet1}"
-          aria-label="Toggle Tearsheet 1"
-          tooltip-text="Toggle Tearsheet 1"
-          tooltip-position="right"
-        >
-          ${iconLoader(BottomPanelOpen32, {
-            slot: 'icon',
-        })}
-        </cds-custom-button>
-        <cds-custom-button
-          kind="ghost"
-          @click="${this._toggleTearsheet2}"
-          aria-label="Toggle Tearsheet 2"
-          tooltip-text="Toggle Tearsheet 2"
-          tooltip-position="right"
-        >
-          ${iconLoader(BottomPanelOpen32, {
-            slot: 'icon',
-        })}
-        </cds-custom-button>
-        <cds-custom-button
-          kind="ghost"
-          @click="${this._toggleTearsheet3}"
-          aria-label="Toggle Tearsheet 3"
-          tooltip-text="Toggle Tearsheet 3"
-          tooltip-position="right"
-        >
-          ${iconLoader(BottomPanelOpen32, {
-            slot: 'icon',
-        })}
-        </cds-custom-button>
-      </div>
-
-      <!-- Tearsheet 1 -->
-      <c4p-preview-tearsheet
-        ?open="${this._open1}"
-        variant="${getTearsheetVariant(1)}"
-        @c4p-preview-tearsheet-closed="${() => (this._open1 = false)}"
-      >
-        <c4p-tearsheet-header>
-          <c4p-tearsheet-header-content title="Tearsheet 1">
-            <label slot="label">Customer data</label>
-            <span slot="description">
-              This is a description for the tearsheet, providing an opportunity
-              to describe the flow over a couple of lines in the header of the
-              tearsheet.
-            </span>
-            <div slot="header-actions">
-              <cds-custom-button
-                size="sm"
-                kind="tertiary"
-                @click="${this._toggleTearsheet2}"
-              >
-                Open Tearsheet 2
-              </cds-custom-button>
-            </div>
-          </c4p-tearsheet-header-content>
-        </c4p-tearsheet-header>
-
-        <c4p-tearsheet-body>
-          <div slot="main-content">${dummyContent}</div>
-          <c4p-tearsheet-summary-content slot="summary-content">
-            <h4 class="rightPanelHeading">Summary Details</h4>
-            ${summaryContent}
-          </c4p-tearsheet-summary-content>
-        </c4p-tearsheet-body>
-
-        <c4p-tearsheet-footer>
-          <div class="default__action-buttons">
-            <cds-custom-button
-              kind="ghost"
-              size="xl"
-              @click="${this._toggleTearsheet1}"
-            >
-              Cancel
-            </cds-custom-button>
-            <cds-custom-button kind="secondary" size="xl"> Back </cds-custom-button>
-            <cds-custom-button size="xl"> Submit </cds-custom-button>
-          </div>
-        </c4p-tearsheet-footer>
-      </c4p-preview-tearsheet>
-
-      <!-- Tearsheet 2 -->
-      <c4p-preview-tearsheet
-        ?open="${this._open2}"
-        variant="${getTearsheetVariant(2)}"
-        @c4p-preview-tearsheet-closed="${() => (this._open2 = false)}"
-      >
-        <c4p-tearsheet-header>
-          <c4p-tearsheet-header-content title="Tearsheet 2">
-            <label slot="label">Customer data</label>
-            <span slot="description">
-              This is a description for the tearsheet, providing an opportunity
-              to describe the flow over a couple of lines in the header of the
-              tearsheet.
-            </span>
-            <div slot="header-actions">
-              <cds-custom-button
-                size="sm"
-                kind="tertiary"
-                @click="${this._toggleTearsheet3}"
-              >
-                Open Tearsheet 3
-              </cds-custom-button>
-            </div>
-          </c4p-tearsheet-header-content>
-        </c4p-tearsheet-header>
-
-        <c4p-tearsheet-body>
-          <div slot="main-content">${dummyContent}</div>
-          <c4p-tearsheet-summary-content slot="summary-content">
-            <h4 class="rightPanelHeading">Summary Details</h4>
-            ${summaryContent}
-          </c4p-tearsheet-summary-content>
-        </c4p-tearsheet-body>
-
-        <c4p-tearsheet-footer>
-          <div class="default__action-buttons">
-            <cds-custom-button
-              kind="ghost"
-              size="xl"
-              @click="${this._toggleTearsheet2}"
-            >
-              Cancel
-            </cds-custom-button>
-            <cds-custom-button kind="secondary" size="xl"> Back </cds-custom-button>
-            <cds-custom-button size="xl"> Submit </cds-custom-button>
-          </div>
-        </c4p-tearsheet-footer>
-      </c4p-preview-tearsheet>
-
-      <!-- Tearsheet 3 -->
-      <c4p-preview-tearsheet
-        ?open="${this._open3}"
-        variant="${getTearsheetVariant(3)}"
-        @c4p-preview-tearsheet-closed="${() => (this._open3 = false)}"
-      >
-        <c4p-tearsheet-header>
-          <c4p-tearsheet-header-content title="Tearsheet 3">
-            <label slot="label">Customer data</label>
-            <span slot="description">
-              This is a description for the tearsheet, providing an opportunity
-              to describe the flow over a couple of lines in the header of the
-              tearsheet.
-            </span>
-          </c4p-tearsheet-header-content>
-        </c4p-tearsheet-header>
-
-        <c4p-tearsheet-body>
-          <div slot="main-content">${dummyContent}</div>
-          <c4p-tearsheet-summary-content slot="summary-content">
-            <h4 class="rightPanelHeading">Summary Details</h4>
-            ${summaryContent}
-          </c4p-tearsheet-summary-content>
-        </c4p-tearsheet-body>
-
-        <c4p-tearsheet-footer>
-          <div class="default__action-buttons">
-            <cds-custom-button
-              kind="ghost"
-              size="xl"
-              @click="${this._toggleTearsheet3}"
-            >
-              Cancel
-            </cds-custom-button>
-            <cds-custom-button kind="secondary" size="xl"> Back </cds-custom-button>
-            <cds-custom-button size="xl"> Submit </cds-custom-button>
-          </div>
-        </c4p-tearsheet-footer>
-      </c4p-preview-tearsheet>
-    `;
-    }
-};
-StackingTearsheetDemo.styles = styles;
-__decorate([
-    property({ type: String, attribute: 'tearsheet-type' })
-], StackingTearsheetDemo.prototype, "tearsheetType", void 0);
-__decorate([
-    state()
-], StackingTearsheetDemo.prototype, "_open1", void 0);
-__decorate([
-    state()
-], StackingTearsheetDemo.prototype, "_open2", void 0);
-__decorate([
-    state()
-], StackingTearsheetDemo.prototype, "_open3", void 0);
-StackingTearsheetDemo = __decorate([
-    customElement('stacking-tearsheet-demo')
-], StackingTearsheetDemo);
-
-export { StackingTearsheetDemo };
-//# sourceMappingURL=stacking-tearsheet.js.map

package/es-custom/components/tearsheet-preview/_story-assets/stacking-tearsheet.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stacking-tearsheet.js","sources":["../../../../src/components/tearsheet-preview/_story-assets/stacking-tearsheet.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAaI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU,CAAA;AAA9C,IAAA,WAAA,GAAA;;QAEL,IAAA,CAAA,aAAa,GAAG,MAAM;QAGd,IAAA,CAAA,MAAM,GAAG,KAAK;QAGd,IAAA,CAAA,MAAM,GAAG,KAAK;QAGd,IAAA,CAAA,MAAM,GAAG,KAAK;IA4QxB;IA1QE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;;AAEzB,QAAA,YAAY,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACrC;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;;QAE5B,YAAY,CAAC,KAAK,EAAE;IACtB;IAEQ,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;IAC5B;IAEQ,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;IAC5B;IAEQ,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;IAC5B;IAEA,MAAM,GAAA;QACJ,MAAM,cAAc,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;KAuB1B;QAED,MAAM,YAAY,GAAG,IAAI,CAAA;;;;;;;;;;;;;;KAcxB;AACD,QAAA,MAAM,mBAAmB,GAAG,CAAC,KAAK,KAAI;AACpC,YAAA,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE;AAClC,gBAAA,OAAO,KAAK,GAAG,CAAC,KAAK,CAAC,GAAG,QAAQ,GAAG,MAAM;YAC5C;AACA,YAAA,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,EAAE;AACjC,gBAAA,OAAO,MAAM;YACf;AACA,YAAA,IAAI,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;AACnC,gBAAA,OAAO,QAAQ;YACjB;AACA,YAAA,OAAO,MAAM;AACf,QAAA,CAAC;AACD,QAAA,OAAO,IAAI,CAAA;;AAEe,4BAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;AAGtB,4BAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;AAGtB,4BAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;;AAOhC,kBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;YAK9B,UAAU,CAAC,iBAAiB,EAAE;AAC9B,YAAA,IAAI,EAAE,MAAM;SACb,CAAC;;;;AAIQ,kBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;YAK9B,UAAU,CAAC,iBAAiB,EAAE;AAC9B,YAAA,IAAI,EAAE,MAAM;SACb,CAAC;;;;AAIQ,kBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;YAK9B,UAAU,CAAC,iBAAiB,EAAE;AAC9B,YAAA,IAAI,EAAE,MAAM;SACb,CAAC;;;;;;AAMK,eAAA,EAAA,IAAI,CAAC,MAAM,CAAA;mBACT,mBAAmB,CAAC,CAAC,CAAC,CAAA;yCACA,OAAO,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAA;;;;;;;;;;;;;;AAc1C,wBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;;;;qCASX,YAAY,CAAA;;;cAGnC,cAAc;;;;;;;;;AASJ,sBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;;;;;;;AAY7B,eAAA,EAAA,IAAI,CAAC,MAAM,CAAA;mBACT,mBAAmB,CAAC,CAAC,CAAC,CAAA;yCACA,OAAO,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAA;;;;;;;;;;;;;;AAc1C,wBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;;;;qCASX,YAAY,CAAA;;;cAGnC,cAAc;;;;;;;;;AASJ,sBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;;;;;;;AAY7B,eAAA,EAAA,IAAI,CAAC,MAAM,CAAA;mBACT,mBAAmB,CAAC,CAAC,CAAC,CAAA;yCACA,OAAO,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAA;;;;;;;;;;;;;;qCAc/B,YAAY,CAAA;;;cAGnC,cAAc;;;;;;;;;AASJ,sBAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;;;;KASzC;IACH;;AAEO,qBAAA,CAAA,MAAM,GAAG,MAAH;AApRb,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE;AAChC,CAAA,EAAA,qBAAA,CAAA,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;AAGf,UAAA,CAAA;AADP,IAAA,KAAK;AACiB,CAAA,EAAA,qBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAGf,UAAA,CAAA;AADP,IAAA,KAAK;AACiB,CAAA,EAAA,qBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAGf,UAAA,CAAA;AADP,IAAA,KAAK;AACiB,CAAA,EAAA,qBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAXZ,qBAAqB,GAAA,UAAA,CAAA;IADjC,aAAa,CAAC,yBAAyB;AAC3B,CAAA,EAAA,qBAAqB,CAuRjC;;;;"}

package/es-custom/components/tearsheet-preview/_story-assets/step-tearsheet-preview.d.ts

@@ -1,39 +0,0 @@
-/**
- * @license
- *
- * 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 { LitElement } from 'lit';
-import '@carbon/web-components/es-custom/components/progress-indicator/index.js';
-import '@carbon/web-components/es-custom/components/text-input/index.js';
-import '@carbon/web-components/es-custom/components/button/index.js';
-import '../../../patterns/step-flow/index.js';
-import '../index.js';
-declare const StepTearsheetNext_base: typeof LitElement;
-export declare class StepTearsheetNext extends StepTearsheetNext_base {
-    horizontal: boolean;
-    private _open;
-    private _stepInfo;
-    connectedCallback(): void;
-    private _onButtonClick;
-    private _handleCancelButton;
-    private _handleBackButton;
-    private _handleNextButton;
-    private _handleEmailInput;
-    private _handleCityInput;
-    private _handleStateInput;
-    private _toggleInfluencerPanel;
-    private _getStepContent;
-    private _getProgressStepState;
-    render(): import("lit-html").TemplateResult<1>;
-    static styles: any;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'step-tearsheet-preview': StepTearsheetNext;
-    }
-}
-export {};

package/es-custom/components/tearsheet-preview/_story-assets/step-tearsheet-preview.js

@@ -1,264 +0,0 @@
-/**
- * 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 { __decorate } from 'tslib';
-import { LitElement, nothing, html } from 'lit';
-import { property, state, customElement } from 'lit/decorators.js';
-import { SignalWatcher } from '@lit-labs/signals';
-import { prefix } from '../../../globals/settings.js';
-import { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';
-import RightPanelClose32 from '@carbon/icons/es/right-panel--close/32';
-import '@carbon/web-components/es-custom/components/progress-indicator/index.js';
-import '@carbon/web-components/es-custom/components/text-input/index.js';
-import '@carbon/web-components/es-custom/components/button/index.js';
-import { StepInstance } from '../../../patterns/step-flow/step-flow-signal.js';
-import '../../../patterns/step-flow/step-group.js';
-import '../tearsheet.js';
-import '../tearsheet-body.js';
-import '../tearsheet-footer.js';
-import '../tearsheet-header.js';
-import '../tearsheet-influencer.js';
-import '../tearsheet-header-content.js';
-import '../tearsheet-navigation-bar.js';
-import '../tearsheet-scroller.js';
-import '../tearsheet-summary-content.js';
-import styles from './_storybook-styles.scss.js';
-
-/**
- * @license
- *
- * 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.
- */
-let StepTearsheetNext = class StepTearsheetNext extends SignalWatcher(LitElement) {
-    constructor() {
-        super(...arguments);
-        this.horizontal = false;
-        this._open = false;
-        this._stepInfo = new StepInstance();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._stepInfo.updateTotalStepCount = 3;
-    }
-    _onButtonClick() {
-        this._open = true;
-    }
-    _handleCancelButton() {
-        this._open = false;
-        this._stepInfo.reset();
-    }
-    _handleBackButton() {
-        const { currentStep } = this._stepInfo.data;
-        if (currentStep === 0) {
-            return;
-        }
-        return this._stepInfo.handlePrevious();
-    }
-    _handleNextButton() {
-        const { currentStep, totalSteps } = this._stepInfo.data;
-        if (currentStep + 1 === totalSteps) {
-            console.log('Form submitted:', this._stepInfo.data.formState);
-            this._handleCancelButton();
-            return;
-        }
-        return this._stepInfo.handleNext();
-    }
-    _handleEmailInput(e) {
-        const savedFormState = structuredClone(this._stepInfo.data.formState);
-        savedFormState.email = e.target.value;
-        this._stepInfo.updateFormState = savedFormState;
-    }
-    _handleCityInput(e) {
-        const savedFormState = structuredClone(this._stepInfo.data.formState);
-        savedFormState.city = e.target.value;
-        this._stepInfo.updateFormState = savedFormState;
-    }
-    _handleStateInput(e) {
-        const savedFormState = structuredClone(this._stepInfo.data.formState);
-        savedFormState.state = e.target.value;
-        this._stepInfo.updateFormState = savedFormState;
-    }
-    _toggleInfluencerPanel() {
-        var _a;
-        const influencer = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`${prefix}-tearsheet-influencer`);
-        if (influencer) {
-            influencer.toggleAttribute('influencer-panel-open');
-        }
-    }
-    _getStepContent() {
-        const { formState, currentStep } = this._stepInfo.data;
-        const typedFormState = formState;
-        switch (currentStep) {
-            case 0:
-                return html `
-          <div>
-            <cds-custom-text-input
-              label="Email"
-              id="step-email-input"
-              value=${typedFormState.email || ''}
-              @input="${this._handleEmailInput}"
-            ></cds-custom-text-input>
-          </div>
-        `;
-            case 1:
-                return html `
-          <div style="display: flex; gap: 1rem;">
-            <cds-custom-text-input
-              label="City"
-              id="step-city-input"
-              value=${typedFormState.city || ''}
-              @input="${this._handleCityInput}"
-            ></cds-custom-text-input>
-            <cds-custom-text-input
-              label="State"
-              id="step-state-input"
-              value=${typedFormState.state || ''}
-              @input="${this._handleStateInput}"
-            ></cds-custom-text-input>
-          </div>
-        `;
-            case 2:
-                return html `
-          <div>
-            <h4>Review your information</h4>
-            <pre>${JSON.stringify(formState, null, 2)}</pre>
-          </div>
-        `;
-            default:
-                return nothing;
-        }
-    }
-    _getProgressStepState(stepIndex) {
-        const { currentStep } = this._stepInfo.data;
-        if (stepIndex < currentStep) {
-            return 'complete';
-        }
-        if (stepIndex === currentStep) {
-            return 'current';
-        }
-        return 'incomplete';
-    }
-    render() {
-        const { currentStep, totalSteps } = this._stepInfo.data;
-        return html `
-      <cds-custom-button type="button" size="md" @click="${this._onButtonClick}">
-        Start create flow
-      </cds-custom-button>
-
-      <c4p-preview-tearsheet
-        ?open=${this._open}
-        variant="wide"
-        prevent-close-on-click-outside
-      >
-        <c4p-tearsheet-header ?hideCloseButton="${false}">
-          <c4p-tearsheet-header-content title="Create tearsheet title">
-            <label slot="label">Optional label for context</label>
-            <span slot="description">
-              This is a description for the tearsheet, providing an opportunity
-              to describe the flow over a couple of lines in the header of the
-              tearsheet.
-            </span>
-          </c4p-tearsheet-header-content>
-          ${this.horizontal
-            ? html `<cds-custom-progress-indicator>
-                <cds-custom-progress-step
-                  label="First step"
-                  state=${this._getProgressStepState(0)}
-                ></cds-custom-progress-step>
-                <cds-custom-progress-step
-                  label="Second step"
-                  state=${this._getProgressStepState(1)}
-                ></cds-custom-progress-step>
-                <cds-custom-progress-step
-                  label="Third step"
-                  state=${this._getProgressStepState(2)}
-                ></cds-custom-progress-step>
-              </cds-custom-progress-indicator>`
-            : nothing}
-        </c4p-tearsheet-header>
-
-        <!-- Influencer with Progress Indicator -->
-        ${!this.horizontal
-            ? html ` <c4p-tearsheet-influencer>
-              <cds-custom-progress-indicator vertical>
-                <cds-custom-progress-step
-                  label="First step"
-                  state=${this._getProgressStepState(0)}
-                ></cds-custom-progress-step>
-                <cds-custom-progress-step
-                  label="Second step"
-                  state=${this._getProgressStepState(1)}
-                ></cds-custom-progress-step>
-                <cds-custom-progress-step
-                  label="Third step"
-                  state=${this._getProgressStepState(2)}
-                ></cds-custom-progress-step>
-              </cds-custom-progress-indicator>
-            </c4p-tearsheet-influencer>`
-            : nothing}
-
-        <c4p-tearsheet-body>
-          <div slot="main-content">
-            <!-- Button to open influencer panel on small screens -->
-            <div class="influencerPanelTrigger">
-              <cds-custom-button
-                kind="ghost"
-                tooltip-text="Open Influencer"
-                tooltip-position="right"
-                @click="${this._toggleInfluencerPanel}"
-              >
-                ${iconLoader(RightPanelClose32, { slot: 'icon' })}
-              </cds-custom-button>
-            </div>
-
-            <!-- Step Content -->
-            ${this._getStepContent()}
-          </div>
-        </c4p-tearsheet-body>
-
-        <c4p-tearsheet-footer>
-          <div class="default__action-buttons">
-            <cds-custom-button
-              kind="ghost"
-              size="xl"
-              @click="${this._handleCancelButton}"
-            >
-              Cancel
-            </cds-custom-button>
-            <cds-custom-button
-              kind="secondary"
-              size="xl"
-              ?disabled="${currentStep === 0}"
-              @click="${this._handleBackButton}"
-            >
-              Back
-            </cds-custom-button>
-            <cds-custom-button size="xl" @click="${this._handleNextButton}">
-              ${currentStep < totalSteps - 1 ? 'Next' : 'Submit'}
-            </cds-custom-button>
-          </div>
-        </c4p-tearsheet-footer>
-      </c4p-preview-tearsheet>
-    `;
-    }
-};
-StepTearsheetNext.styles = styles; // Define your component's styles here
-__decorate([
-    property({ type: Boolean })
-], StepTearsheetNext.prototype, "horizontal", void 0);
-__decorate([
-    state()
-], StepTearsheetNext.prototype, "_open", void 0);
-StepTearsheetNext = __decorate([
-    customElement('step-tearsheet-preview')
-], StepTearsheetNext);
-
-export { StepTearsheetNext };
-//# sourceMappingURL=step-tearsheet-preview.js.map

package/es-custom/components/tearsheet-preview/_story-assets/step-tearsheet-preview.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"step-tearsheet-preview.js","sources":["../../../../src/components/tearsheet-preview/_story-assets/step-tearsheet-preview.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/es-custom/components/tearsheet-preview/index.d.ts

@@ -1,17 +0,0 @@
-/**
- * @license
- *
- * 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 './tearsheet';
-import './tearsheet-body';
-import './tearsheet-footer';
-import './tearsheet-header';
-import './tearsheet-influencer';
-import './tearsheet-header-content';
-import './tearsheet-navigation-bar';
-import './tearsheet-scroller';
-import './tearsheet-summary-content';

package/es-custom/components/tearsheet-preview/index.js.map

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