@carbon/ibm-products-web-components 0.25.0-rc.0 → 0.26.0-rc.0

package/es/components/step-flow/_story-assets/step-tearsheet.js

@@ -0,0 +1,251 @@
+/**
+ * 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 { state, customElement } from 'lit/decorators.js';
+import { SignalWatcher } from '@lit-labs/signals';
+import styles from '../story-styles.scss.js';
+import { StepInstance } from '../step-flow-signal.js';
+import '@carbon/web-components/es/components/progress-indicator/index.js';
+import '@carbon/web-components/es/components/stack/index.js';
+import '@carbon/web-components/es/components/code-snippet/index.js';
+import '../step-group.js';
+import '../../tearsheet/tearsheet.js';
+import { registerFocusableContainers, trapFocus } from '../../../utilities/manageFocusTrap/manageFocusTrap.js';
+
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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 StepTearsheet = class StepTearsheet extends SignalWatcher(LitElement) {
+    constructor() {
+        super(...arguments);
+        this._open = false;
+        this._email = '';
+        this._city = '';
+        this._state = '';
+        this._trapFocusAPI = null;
+        this._stepInfo = new StepInstance();
+    }
+    _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) {
+            this._open = false;
+            this._stepInfo.reset();
+            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;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._stepInfo.updateTotalStepCount = 3;
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this._trapFocusAPI) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    firstUpdated(_changedProperties) {
+        var _a;
+        registerFocusableContainers((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`c4p-tearsheet`));
+    }
+    updated(changedProps) {
+        if (changedProps.has('_open')) {
+            const isOpen = this._open;
+            if (isOpen) {
+                // `focusableContainers` holds the containers where we can query DOM elements.
+                // Our strategy here is to let child/slotted components register their containers,
+                // which are then passed to `trapFocus`. This allows the utility to query elements
+                // directly without being blocked by shadow DOM boundaries.
+                this._trapFocusAPI = trapFocus();
+            }
+        }
+    }
+    render() {
+        const { formState, totalSteps, currentStep } = this._stepInfo.data;
+        return html ` <cds-button
+        type="button"
+        size="md"
+        @click="${this._onButtonClick}"
+      >
+        Start create flow
+      </cds-button>
+      <c4p-tearsheet
+        class=${'step-tearsheet-with-util'}
+        selector-initial-focus=${'#tearsheet-story-text-input-a'}
+        ?open=${this._open}
+        width=${'wide'}
+        influencer-placement=${'left'}
+        prevent-close-on-click-outside
+      >
+        <!-- default slotted content -->
+        <step-group>
+          ${currentStep + 1 === 1
+            ? html `<div>
+                <cds-stack gap="6" orientation="horizontal">
+                  <cds-text-input
+                    label="Email"
+                    id="tearsheet-story-text-input-a"
+                    value=${this._email}
+                    @input="${this._handleEmailInput}"
+                  ></cds-text-input>
+                </cds-stack>
+              </div>`
+            : nothing}
+          ${currentStep + 1 === 2
+            ? html `<div>
+                <cds-stack gap="6" orientation="horizontal">
+                  <cds-text-input
+                    label="City"
+                    id="tearsheet-story-text-input-city"
+                    value=${this._city}
+                    @input="${this._handleCityInput}"
+                  ></cds-text-input>
+                  <cds-text-input
+                    label="State"
+                    id="tearsheet-story-text-input-state"
+                    value=${this._state}
+                    @input="${this._handleStateInput}"
+                  ></cds-text-input>
+                </cds-stack>
+              </div>`
+            : nothing}
+          ${currentStep + 1 === 3
+            ? html `<div>
+                <!-- //cspell: disable -->
+                <cds-code-snippet
+                  type="multi"
+                  copy-text=""
+                  maxcollapsednumberofrows="15"
+                  maxexpandednumberofrows=""
+                  mincollapsednumberofrows="3"
+                  minexpandednumberofrows=""
+                  show-less-text="Show less"
+                  show-more-text="Show more"
+                  feedback=""
+                  feedback-timeout="0"
+                  tooltip-content="Copy to clipboard"
+                >
+                  ${JSON.stringify(formState, null, 2)}
+                </cds-code-snippet>
+                <!-- //cspell: enable -->
+              </div>`
+            : nothing}
+        </step-group>
+
+        <!-- slotted header label -->
+        <span slot="label">Optional label for context</span>
+
+        <!-- slotted header title -->
+        <span slot="title">Create tearsheet title</span>
+
+        <!-- slotted header description -->
+        <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>
+
+        <!-- slotted action items cds-buttons -->
+        <cds-button
+          slot="actions"
+          kind=${'ghost'}
+          @click=${this._handleCancelButton}
+        >
+          Cancel
+        </cds-button>
+        <cds-button
+          slot="actions"
+          kind=${'secondary'}
+          @click=${this._handleBackButton}
+        >
+          Back
+        </cds-button>
+        <cds-button slot="actions" @click=${this._handleNextButton}>
+          ${currentStep + 1 < totalSteps ? 'Next' : 'Submit'}
+        </cds-button>
+        <!-- slotted influencer -->
+        <div slot="influencer">
+          <cds-progress-indicator
+            vertical
+            class=${`custom-step-util__dummy-content-block`}
+          >
+            <cds-progress-step
+              label="First step"
+              state=${currentStep + 1 === 1 ? 'current' : 'complete'}
+            ></cds-progress-step>
+            <cds-progress-step
+              label="Second step"
+              state=${currentStep + 1 === 2
+            ? 'current'
+            : currentStep + 1 < 2
+                ? 'incomplete'
+                : 'complete'}
+            ></cds-progress-step>
+            <cds-progress-step
+              label="Third step"
+              state=${currentStep + 1 === 3
+            ? 'current'
+            : currentStep + 1 < 3
+                ? 'incomplete'
+                : 'complete'}
+            ></cds-progress-step>
+          </cds-progress-indicator>
+        </div>
+      </c4p-tearsheet>`;
+    }
+};
+StepTearsheet.styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+__decorate([
+    state()
+], StepTearsheet.prototype, "_open", void 0);
+__decorate([
+    state()
+], StepTearsheet.prototype, "_email", void 0);
+__decorate([
+    state()
+], StepTearsheet.prototype, "_city", void 0);
+__decorate([
+    state()
+], StepTearsheet.prototype, "_state", void 0);
+StepTearsheet = __decorate([
+    customElement('step-tearsheet')
+], StepTearsheet);
+
+export { StepTearsheet };
+//# sourceMappingURL=step-tearsheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-tearsheet.js","sources":["../../../../src/components/step-flow/_story-assets/step-tearsheet.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;AAKG;AAwBU,IAAA,aAAa,GAAnB,MAAM,aAAc,SAAQ,aAAa,CAAC,UAAU,CAAC,CAAA;AAArD,IAAA,WAAA,GAAA;;QAEG,IAAK,CAAA,KAAA,GAAY,KAAK;QAGtB,IAAM,CAAA,MAAA,GAAW,EAAE;QAGnB,IAAK,CAAA,KAAA,GAAW,EAAE;QAGlB,IAAM,CAAA,MAAA,GAAW,EAAE;QAEnB,IAAa,CAAA,aAAA,GAAmC,IAAI;AAqDpD,QAAA,IAAA,CAAA,SAAS,GAAG,IAAI,YAAY,EAAE;;IAnD9B,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI;;IAGX,mBAAmB,GAAA;AACzB,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;;IAGhB,iBAAiB,GAAA;QACvB,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI;AAC3C,QAAA,IAAI,WAAW,KAAK,CAAC,EAAE;YACrB;;AAEF,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE;;IAGhC,iBAAiB,GAAA;QACvB,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI;AACvD,QAAA,IAAI,WAAW,GAAG,CAAC,KAAK,UAAU,EAAE;AAClC,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;YACtB;;AAEF,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE;;AAG5B,IAAA,iBAAiB,CAAC,CAAC,EAAA;AACzB,QAAA,MAAM,cAAc,GAAG,eAAe,CACpC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CACb;QAClB,cAAc,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;AACrC,QAAA,IAAI,CAAC,SAAS,CAAC,eAAe,GAAG,cAAc;;AAGzC,IAAA,gBAAgB,CAAC,CAAC,EAAA;AACxB,QAAA,MAAM,cAAc,GAAG,eAAe,CACpC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CACb;QAClB,cAAc,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;AACpC,QAAA,IAAI,CAAC,SAAS,CAAC,eAAe,GAAG,cAAc;;AAGzC,IAAA,iBAAiB,CAAC,CAAC,EAAA;AACzB,QAAA,MAAM,cAAc,GAAG,eAAe,CACpC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CACb;QAClB,cAAc,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;AACrC,QAAA,IAAI,CAAC,SAAS,CAAC,eAAe,GAAG,cAAc;;IAKjD,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,oBAAoB,GAAG,CAAC;;IAGzC,oBAAoB,GAAA;;AAClB,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,OAAO,EAAE;;AAGrB,IAAA,YAAY,CAAC,kBAAkC,EAAA;;QACvD,2BAA2B,CACzB,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,CAAA,aAAA,CAAe,CAAC,CAChD;;AAGH,IAAA,OAAO,CAAC,YAAoD,EAAA;AAC1D,QAAA,IAAI,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AAC7B,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK;YACzB,IAAI,MAAM,EAAE;;;;;AAMV,gBAAA,IAAI,CAAC,aAAa,GAAG,SAAS,EAAE;;;;IAKtC,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI;AAElE,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGG,gBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;;;;;gBAKrB,0BAA0B;iCACT,+BAA+B;AAChD,cAAA,EAAA,IAAI,CAAC,KAAK;gBACV,MAAM;+BACS,MAAM;;;;;YAKzB,WAAW,GAAG,CAAC,KAAK;cAClB,IAAI,CAAA,CAAA;;;;;AAKU,0BAAA,EAAA,IAAI,CAAC,MAAM;AACT,4BAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;AAG/B,oBAAA;AACT,cAAE,OAAO;YACT,WAAW,GAAG,CAAC,KAAK;cAClB,IAAI,CAAA,CAAA;;;;;AAKU,0BAAA,EAAA,IAAI,CAAC,KAAK;AACR,4BAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;;;;;AAKvB,0BAAA,EAAA,IAAI,CAAC,MAAM;AACT,4BAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;AAG/B,oBAAA;AACT,cAAE,OAAO;YACT,WAAW,GAAG,CAAC,KAAK;cAClB,IAAI,CAAA,CAAA;;;;;;;;;;;;;;;oBAeE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;;;AAGjC,oBAAA;AACT,cAAE,OAAO;;;;;;;;;;;;;;;;;;;iBAmBJ,OAAO;AACL,iBAAA,EAAA,IAAI,CAAC,mBAAmB;;;;;;iBAM1B,WAAW;AACT,iBAAA,EAAA,IAAI,CAAC,iBAAiB;;;;AAIG,0CAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;YACtD,WAAW,GAAG,CAAC,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ;;;;;;oBAMxC,CAAuC,qCAAA,CAAA;;;;sBAIrC,WAAW,GAAG,CAAC,KAAK,CAAC,GAAG,SAAS,GAAG,UAAU;;;;sBAI9C,WAAW,GAAG,CAAC,KAAK;AAC1B,cAAE;AACF,cAAE,WAAW,GAAG,CAAC,GAAG;AAClB,kBAAE;AACF,kBAAE,UAAU;;;;sBAIR,WAAW,GAAG,CAAC,KAAK;AAC1B,cAAE;AACF,cAAE,WAAW,GAAG,CAAC,GAAG;AAClB,kBAAE;AACF,kBAAE,UAAU;;;;uBAIP;;;AAEd,aAAA,CAAA,MAAM,GAAG,MAAM,CAAC;AArOf,UAAA,CAAA;AADP,IAAA,KAAK;AACyB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAGvB,UAAA,CAAA;AADP,IAAA,KAAK;AACsB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAGpB,UAAA,CAAA;AADP,IAAA,KAAK;AACqB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAGnB,UAAA,CAAA;AADP,IAAA,KAAK;AACsB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAXjB,aAAa,GAAA,UAAA,CAAA;IADzB,aAAa,CAAC,gBAAgB;AAClB,CAAA,EAAA,aAAa,CAwOzB;;;;"}

package/es/components/step-flow/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * 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 './step-flow-signal';
+import './step-group';

package/es/components/step-flow/index.js

@@ -0,0 +1,10 @@
+/**
+ * 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 './step-flow-signal.js';
+import './step-group.js';
+//# sourceMappingURL=index.js.map

package/es/components/step-flow/index.js.map

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

package/es/components/step-flow/step-flow-signal.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+interface formStateType {
+    [key: string]: any;
+}
+export declare class StepInstance {
+    #private;
+    get data(): {
+        totalSteps: number;
+        formState: {};
+        currentStep: number;
+    };
+    set handleGoToStep(value: number);
+    set updateTotalStepCount(value: number);
+    set updateFormState(newFormValue: formStateType);
+    handleNext(): void;
+    handlePrevious(): void;
+    reset(): void;
+}
+export {};

package/es/components/step-flow/step-flow-signal.js

@@ -0,0 +1,54 @@
+/**
+ * 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 { __classPrivateFieldGet } from 'tslib';
+import { signal } from '@lit-labs/signals';
+
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var _StepInstance_data;
+class StepInstance {
+    constructor() {
+        _StepInstance_data.set(this, signal({
+            totalSteps: 0,
+            formState: {},
+            currentStep: 0,
+        }));
+    }
+    get data() {
+        return __classPrivateFieldGet(this, _StepInstance_data, "f").get();
+    }
+    set handleGoToStep(value) {
+        __classPrivateFieldGet(this, _StepInstance_data, "f").set(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _StepInstance_data, "f").get()), { currentStep: value }));
+    }
+    set updateTotalStepCount(value) {
+        __classPrivateFieldGet(this, _StepInstance_data, "f").set(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _StepInstance_data, "f").get()), { totalSteps: value }));
+    }
+    set updateFormState(newFormValue) {
+        __classPrivateFieldGet(this, _StepInstance_data, "f").set(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _StepInstance_data, "f").get()), { formState: newFormValue }));
+    }
+    handleNext() {
+        const currentStep = __classPrivateFieldGet(this, _StepInstance_data, "f").get().currentStep + 1;
+        const totalSteps = __classPrivateFieldGet(this, _StepInstance_data, "f").get().totalSteps;
+        __classPrivateFieldGet(this, _StepInstance_data, "f").set(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _StepInstance_data, "f").get()), { currentStep: currentStep < totalSteps ? currentStep : totalSteps }));
+    }
+    handlePrevious() {
+        const currentStep = __classPrivateFieldGet(this, _StepInstance_data, "f").get().currentStep;
+        __classPrivateFieldGet(this, _StepInstance_data, "f").set(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _StepInstance_data, "f").get()), { currentStep: currentStep > 0 ? currentStep - 1 : 0 }));
+    }
+    reset() {
+        __classPrivateFieldGet(this, _StepInstance_data, "f").set(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _StepInstance_data, "f").get()), { formState: {}, currentStep: 0 }));
+    }
+}
+_StepInstance_data = new WeakMap();
+
+export { StepInstance };
+//# sourceMappingURL=step-flow-signal.js.map

package/es/components/step-flow/step-flow-signal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-flow-signal.js","sources":["../../../src/components/step-flow/step-flow-signal.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAAA;;;;;AAKG;;MAWU,YAAY,CAAA;AAAzB,IAAA,WAAA,GAAA;AACE,QAAA,kBAAA,CAAA,GAAA,CAAA,IAAA,EAAQ,MAAM,CAAC;AACb,YAAA,UAAU,EAAE,CAAC;AACb,YAAA,SAAS,EAAE,EAAE;AACb,YAAA,WAAW,EAAE,CAAC;AACf,SAAA,CAAC,CAAC;;AAEH,IAAA,IAAI,IAAI,GAAA;AACN,QAAA,OAAO,uBAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,EAAE;;IAGzB,IAAI,cAAc,CAAC,KAAa,EAAA;AAC9B,QAAA,sBAAA,CAAA,IAAI,EAAM,kBAAA,EAAA,GAAA,CAAA,CAAC,GAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,uBAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,EAAE,CACnB,EAAA,EAAA,WAAW,EAAE,KAAK,IAClB;;IAGJ,IAAI,oBAAoB,CAAC,KAAa,EAAA;AACpC,QAAA,sBAAA,CAAA,IAAI,EAAM,kBAAA,EAAA,GAAA,CAAA,CAAC,GAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,uBAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,EAAE,CACnB,EAAA,EAAA,UAAU,EAAE,KAAK,IACjB;;IAGJ,IAAI,eAAe,CAAC,YAA2B,EAAA;AAC7C,QAAA,sBAAA,CAAA,IAAI,EAAM,kBAAA,EAAA,GAAA,CAAA,CAAC,GAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,uBAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,EAAE,CACnB,EAAA,EAAA,SAAS,EAAE,YAAY,IACvB;;IAGJ,UAAU,GAAA;AACR,QAAA,MAAM,WAAW,GAAG,sBAAA,CAAA,IAAI,EAAM,kBAAA,EAAA,GAAA,CAAA,CAAC,GAAG,EAAE,CAAC,WAAW,GAAG,CAAC;QACpD,MAAM,UAAU,GAAG,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,EAAE,CAAC,UAAU;QAC9C,sBAAA,CAAA,IAAI,EAAM,kBAAA,EAAA,GAAA,CAAA,CAAC,GAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,sBAAA,CAAA,IAAI,EAAM,kBAAA,EAAA,GAAA,CAAA,CAAC,GAAG,EAAE,CACnB,EAAA,EAAA,WAAW,EAAE,WAAW,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,EAAA,CAAA,CAChE;;IAGJ,cAAc,GAAA;QACZ,MAAM,WAAW,GAAG,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,EAAE,CAAC,WAAW;AAChD,QAAA,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,CACT,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,EAAE,CAAA,EAAA,EACnB,WAAW,EAAE,WAAW,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,CAAC,EAAA,CAAA,CAClD;;IAGJ,KAAK,GAAA;QACH,sBAAA,CAAA,IAAI,0BAAM,CAAC,GAAG,iCACT,sBAAA,CAAA,IAAI,0BAAM,CAAC,GAAG,EAAE,CACnB,EAAA,EAAA,SAAS,EAAE,EAAE,EACb,WAAW,EAAE,CAAC,IACd;;AAEL;;;;;"}

package/es/components/step-flow/step-flow-signal.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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 {};

package/es/components/step-flow/step-flow-signal.test.js

@@ -0,0 +1,88 @@
+/**
+ * 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 { describe, it, expect } from 'vitest';
+import { StepInstance } from './step-flow-signal.js';
+
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+describe('step flow', () => {
+    it('should initial and return default signal state', () => {
+        const { totalSteps, formState, currentStep } = new StepInstance().data;
+        expect(totalSteps).toEqual(0);
+        expect(currentStep).toEqual(0);
+        expect(formState).toEqual({});
+    });
+    it('should update total steps', () => {
+        const myStepInstance = new StepInstance();
+        myStepInstance.updateTotalStepCount = 100;
+        expect(myStepInstance.data.totalSteps).toEqual(100);
+    });
+    it('should increment the current step', async () => {
+        const myStepInstance = new StepInstance();
+        myStepInstance.updateTotalStepCount = 100;
+        myStepInstance.handleNext();
+        expect(myStepInstance.data.currentStep).toEqual(1);
+        myStepInstance.handleNext();
+        expect(myStepInstance.data.currentStep).toEqual(2);
+    });
+    it('should decrement the current step', () => {
+        const myStepInstance = new StepInstance();
+        myStepInstance.updateTotalStepCount = 100;
+        myStepInstance.handleNext();
+        myStepInstance.handleNext();
+        myStepInstance.handlePrevious();
+        expect(myStepInstance.data.currentStep).toEqual(1);
+    });
+    it('should update form state', () => {
+        const exampleEmail = 'example@example.com';
+        const myStepInstance = new StepInstance();
+        const savedFormState = structuredClone(myStepInstance.data.formState);
+        savedFormState.email = exampleEmail;
+        myStepInstance.updateFormState = savedFormState;
+        expect(myStepInstance.data.formState.email).toEqual(exampleEmail);
+    });
+    it('should jump to a step', () => {
+        const myStepInstance = new StepInstance();
+        myStepInstance.updateTotalStepCount = 100;
+        myStepInstance.handleGoToStep = 25;
+        expect(myStepInstance.data.currentStep).toEqual(25);
+    });
+    it('should reset to default state', () => {
+        const myStepInstance = new StepInstance();
+        myStepInstance.updateTotalStepCount = 100;
+        myStepInstance.handleGoToStep = 25;
+        myStepInstance.reset();
+        expect(myStepInstance.data.currentStep).toEqual(0);
+        expect(myStepInstance.data.formState).toEqual({});
+    });
+    it('should remain on last step when handleNext is called from the last step', () => {
+        const myStepInstance = new StepInstance();
+        myStepInstance.updateTotalStepCount = 2;
+        myStepInstance.handleNext();
+        myStepInstance.handleNext();
+        myStepInstance.handleNext();
+        expect(myStepInstance.data.currentStep).toEqual(2);
+    });
+    it('should remain on first step when handlePrevious is called from the first step', () => {
+        const myStepInstance = new StepInstance();
+        myStepInstance.updateTotalStepCount = 10;
+        myStepInstance.handleNext();
+        myStepInstance.handleNext();
+        myStepInstance.handleNext();
+        myStepInstance.handlePrevious();
+        myStepInstance.handlePrevious();
+        myStepInstance.handlePrevious();
+        myStepInstance.handlePrevious();
+        expect(myStepInstance.data.currentStep).toEqual(0);
+    });
+});
+//# sourceMappingURL=step-flow-signal.test.js.map

package/es/components/step-flow/step-flow-signal.test.js.map

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

package/es/components/step-flow/step-group.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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';
+export declare class StepGroup extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'step-group': StepGroup;
+    }
+}

package/es/components/step-flow/step-group.js

@@ -0,0 +1,28 @@
+/**
+ * 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 { customElement } from 'lit/decorators.js';
+
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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 StepGroup = class StepGroup extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+StepGroup = __decorate([
+    customElement('step-group')
+], StepGroup);
+
+export { StepGroup };
+//# sourceMappingURL=step-group.js.map

package/es/components/step-flow/step-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-group.js","sources":["../../../src/components/step-flow/step-group.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAAA;;;;;AAKG;AAMI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU,CAAA;IACvC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,aAAA,CAAe;;;AAFjB,SAAS,GAAA,UAAA,CAAA;IADrB,aAAa,CAAC,YAAY;AACd,CAAA,EAAA,SAAS,CAIrB;;;;"}

package/es/components/step-flow/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([""]);
+
+export { styles as default };
+//# sourceMappingURL=story-styles.scss.js.map

package/es/components/step-flow/story-styles.scss.js.map

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

package/es/packages/ibm-products-web-components/package.json.js

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

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

@@ -481,18 +481,14 @@ let CDSSidePanel = class CDSSidePanel extends HostListenerMixin(LitElement) {
             return html ``;
         }
         const actionsMultiple = ['', 'single', 'double', 'triple'][this._actionsCount];
-        const titleTemplate = html `<div
+        const titleTemplate = html ` <div
       class=${`${blockClass}__title`}
       ?no-label=${!!labelText}
     >
-      <h2 class=${title ? `${blockClass}__title-text` : ''} title=${title}>
-        ${title}
-      </h2>
-
+      <h2 class=${title ? `${blockClass}__title-text` : ''}>${title}</h2>
       ${this._doAnimateTitle
             ? html `<h2
             class=${`${blockClass}__collapsed-title-text`}
-            title=${title}
             aria-hidden="true"
           >
             ${title}