diff --git a/__snapshots__/expansion panel.md b/__snapshots__/expansion panel.md
index 6387bfa82..1a2ffac35 100644
--- a/__snapshots__/expansion panel.md
+++ b/__snapshots__/expansion panel.md
@@ -3,34 +3,32 @@
#### `should have internal contents`
```html
-
-
-
-
+
+
+ click me
+
+
+
+
+
+
+
+
+
+
+
+
```
diff --git a/components/accordion/package.json b/components/accordion/package.json
index e1c81526a..e934da34b 100644
--- a/components/accordion/package.json
+++ b/components/accordion/package.json
@@ -33,7 +33,8 @@
"tslib": "^2.3.0"
},
"devDependencies": {
+ "@vonage/vvd-design-tokens": "2.13.0",
"@vonage/vvd-umbrella": "2.13.0",
"typescript": "^4.3.2"
}
-}
+}
\ No newline at end of file
diff --git a/components/accordion/src/vwc-accordion.scss b/components/accordion/src/vwc-accordion.scss
index 4b64a6331..3c5b9427f 100644
--- a/components/accordion/src/vwc-accordion.scss
+++ b/components/accordion/src/vwc-accordion.scss
@@ -1,4 +1,10 @@
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
+
:host {
display: flex;
flex-direction: column;
}
+
+::slotted(vwc-expansion-panel:not(:only-of-type)) {
+ border-bottom: 1px solid var(#{scheme-variables.$vvd-color-neutral-30});
+}
diff --git a/components/expansion-panel/src/vwc-expansion-panel.scss b/components/expansion-panel/src/vwc-expansion-panel.scss
index 4f1f6e3fc..a1c436f55 100644
--- a/components/expansion-panel/src/vwc-expansion-panel.scss
+++ b/components/expansion-panel/src/vwc-expansion-panel.scss
@@ -26,10 +26,6 @@
}
}
-.expansion-panel {
- border-bottom: 1px solid var(#{scheme-variables.$vvd-color-neutral-30});
-}
-
.expansion-panel-header {
@include typography.typography-cat-shorthand('subtitle-2');
position: relative;
diff --git a/components/expansion-panel/src/vwc-expansion-panel.ts b/components/expansion-panel/src/vwc-expansion-panel.ts
index 856a92396..7bddc590e 100644
--- a/components/expansion-panel/src/vwc-expansion-panel.ts
+++ b/components/expansion-panel/src/vwc-expansion-panel.ts
@@ -71,7 +71,7 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
}
protected render(): TemplateResult {
- return html`
+ return html`
`;
+
`;
}
protected renderIconOrToggle(): TemplateResult | string {
diff --git a/components/expansion-panel/stories/expansion-panel.stories.js b/components/expansion-panel/stories/expansion-panel.stories.js
index d202982b2..37d923d2d 100644
--- a/components/expansion-panel/stories/expansion-panel.stories.js
+++ b/components/expansion-panel/stories/expansion-panel.stories.js
@@ -5,8 +5,8 @@ import { spread } from '@open-wc/lit-helpers';
import { argTypes } from './arg-types.js';
export default {
- title: 'Alpha/Components/Expansion Panel',
- component: 'vwc-expansion-panel',
+ title: 'Alpha/Components/Accordion/Accordion Item',
+ component: 'vwc-accordion-item',
argTypes
};