diff --git a/dev/vscode-collapsible/actions-stop-propagation.html b/dev/vscode-collapsible/actions-stop-propagation.html
index 7d7525d6..f07d7858 100644
--- a/dev/vscode-collapsible/actions-stop-propagation.html
+++ b/dev/vscode-collapsible/actions-stop-propagation.html
@@ -46,7 +46,7 @@
Component demo
aria-role="button"
id="btn-refresh"
title="Refresh"
- slot="actions"
+ slot="decorations"
>
Lorem ipsum
Lorem ipsum
diff --git a/src/vscode-collapsible/vscode-collapsible.test.ts b/src/vscode-collapsible/vscode-collapsible.test.ts
index f99e4f47..e4ec21e0 100644
--- a/src/vscode-collapsible/vscode-collapsible.test.ts
+++ b/src/vscode-collapsible/vscode-collapsible.test.ts
@@ -120,4 +120,21 @@ describe('vscode-collapsible', () => {
expect(el.open).to.be.true;
});
+
+ it('prevents collapse on decoration icon click', async () => {
+ const el = await fixture(html`
+
+
+ `);
+
+ const actionIcon = $('#action-icon');
+ await clickOnElement(actionIcon);
+
+ expect(el.open).to.be.true;
+ });
});
diff --git a/src/vscode-collapsible/vscode-collapsible.ts b/src/vscode-collapsible/vscode-collapsible.ts
index 64095ee5..c0d99b67 100644
--- a/src/vscode-collapsible/vscode-collapsible.ts
+++ b/src/vscode-collapsible/vscode-collapsible.ts
@@ -84,7 +84,7 @@ export class VscodeCollapsible extends VscElement {
}
}
- private _onActionClick(event: PointerEvent) {
+ private _onHeaderSlotClick(event: PointerEvent) {
event.stopPropagation();
}
@@ -127,9 +127,11 @@ export class VscodeCollapsible extends VscElement {
${heading}${descriptionMarkup}