Toggleable panel inside another toggleable panel has it's content visible when collapsed by default

[creed-maxeta]

Describe the bug

When one toggleable panel has another toggleable panel inside, expanding the outer panel sets the content of the inner panel to be visible even though it is collapsed.

This is almost exactly the same issue as #11736
This may also relate to #12164

As mentioned in #11736 this issue pertains to panels, accordions, and panelmenus as well.
It was introduced in commit f849e9d
It appears this was fixed for fieldsets and potentially accordions. However, it is still present here.

Environment

Locally I am running Windows, Primeng 15 and Angular 15.
The stackblitz is utilizing primeng 14 and angular 14 as the issue fork defaults.

Reproducer

https://stackblitz.com/edit/github-trkcts-rca4nw?file=src/app/app.component.html

Angular version

15.2.1

PrimeNG version

15.2.0

Build / Runtime

TypeScript

Language

TypeScript

Node version (for AoT issues node --version)

18.4.2

Browser(s)

No response

Steps to reproduce the behavior

1. Go to https://stackblitz.com/edit/github-trkcts-rca4nw?file=src/app/app.component.html
2. Expand first panel
3. Second panel is collapsed and it's content is visible

Expected behavior

The content of second panel should be hidden when it is collapsed.

The problem is when toggleable panels are nested one inside another.

This css is wrong:

.p-panel-toggleable.p-panel-expanded .p-toggleable-content:not(.ng-animating) {
overflow: visible;
}

[creed-maxeta]

#12721 PR submitted