fix(stepper): remove rounded corners when nested in accordion (#1664)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Stepper have rounded corners when nested in accordion.

Issue Number: CDE-2532

## What is the new behavior?
Stepper always have straight corners.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: GitHub <noreply@github.com>

.storybook/helpers/nesting-components.ts

@@ -234,7 +234,7 @@ export const baseComponentTemplates = {
     <clr-step-content>
       <clr-input-container>
         <label>First Name</label>
-        <input clrInput formControlName="value" />
+        <input clrInput formControlName="value" required/>
       </clr-input-container>
 
       <button clrStepButton="next">next</button>

projects/angular/src/accordion/_accordion.clarity.scss

@@ -162,7 +162,7 @@
 
   // panel states
   .clr-accordion-panel-open {
-    .clr-accordion-header {
+    > .clr-accordion-header {
       box-shadow: accordion-variables.$clr-accordion-header-left-current-indicator;
     }
     .clr-accordion-panel-complete > .clr-accordion-header {
@@ -232,18 +232,18 @@
   // temporary overrides to match stackview until stepper, accordion and stackview are aligned
   // /~https://github.com/vmware/clarity/issues/3471
   .clr-accordion:not(.clr-stepper-forms) {
-    .clr-accordion-header {
+    .clr-accordion-header:not(.clr-stepper-header) {
       box-shadow: none;
     }
 
-    .clr-accordion-panel:first-child .clr-accordion-header {
+    .clr-accordion-panel:first-child .clr-accordion-header:not(.clr-stepper-header) {
       border-top-left-radius: accordion-variables.$clr-accordion-border-radius;
       border-top-right-radius: accordion-variables.$clr-accordion-border-radius;
     }
 
-    .clr-accordion-panel:last-child {
-      .clr-accordion-content,
-      .clr-accordion-header {
+    .clr-accordion-panel:last-child .clr-accordion-header:not(.clr-stepper-header) {
+      &,
+      & + .clr-accordion-content-region > .clr-accordion-content {
         border-bottom-left-radius: accordion-variables.$clr-accordion-border-radius;
         border-bottom-right-radius: accordion-variables.$clr-accordion-border-radius;
       }

projects/demo/src/app/stepper/stepper.demo.html

@@ -7,7 +7,7 @@
 
 <h1>Stepper</h1>
 
-<h2>Stepper with a nested accordion inside it</h2>
+<h2>Stepper with a nested Accordion inside it</h2>
 
 <form clrStepper clrForm [formGroup]="formGroup">
   <clr-stepper-panel formGroupName="group">
@@ -37,6 +37,41 @@ <h2>Stepper with a nested accordion inside it</h2>
   </clr-stepper-panel>
 </form>
 
+<h2>Accordion with a nested Stepper inside it</h2>
+
+<clr-accordion>
+  <clr-accordion-panel [clrAccordionPanelOpen]="true">
+    <clr-accordion-title>Accordion 1</clr-accordion-title>
+    <clr-accordion-description>
+      The full license information can be found in LICENSE in the root directory.
+    </clr-accordion-description>
+    <clr-accordion-content>
+      <form clrStepper clrForm [formGroup]="formGroup">
+        <clr-stepper-panel formGroupName="group">
+          <clr-step-title>Nested Accordion</clr-step-title>
+          <clr-step-description> Demonstrate Nested accordion issue </clr-step-description>
+          <clr-step-content *clrIfExpanded>
+            <clr-input-container>
+              <label>First Name</label>
+              <input clrInput formControlName="first" minlength="4" />
+              <clr-control-error *clrIfError="'minlength'">First Name Length</clr-control-error>
+            </clr-input-container>
+
+            <clr-input-container>
+              <label>Last Name</label>
+              <input clrInput formControlName="last" />
+              <clr-control-error *clrIfError="'required'">Last Name Required</clr-control-error>
+            </clr-input-container>
+
+            <button clrStepButton="previous">previous</button>
+            <button clrStepButton="next">next</button>
+          </clr-step-content>
+        </clr-stepper-panel>
+      </form>
+    </clr-accordion-content>
+  </clr-accordion-panel>
+</clr-accordion>
+
 <h2>Angular - Stepper Reactive Forms</h2>
 
 <button (click)="form.reset()" class="btn">Reset Stepper</button>