From 7ef1ff367b24b4031b75d1efc3df6bf3103b98de Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Wed, 5 May 2021 16:56:59 +1200
Subject: [PATCH 01/17] add connotation support

---
 components/list/src/vwc-list-item.scss        | 32 +++++++++++++++++++
 components/list/src/vwc-list-item.ts          | 11 ++++++-
 .../list/stories/arg-types-list-item.js       | 10 +++++-
 components/list/stories/list-item.stories.js  |  3 ++
 yarn.lock                                     | 29 +++--------------
 5 files changed, 58 insertions(+), 27 deletions(-)

diff --git a/components/list/src/vwc-list-item.scss b/components/list/src/vwc-list-item.scss
index a79857f801..308c08b117 100644
--- a/components/list/src/vwc-list-item.scss
+++ b/components/list/src/vwc-list-item.scss
@@ -1,6 +1,9 @@
 @use '@vonage/vvd-typography/scss/typography' as typography;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 @use '@vonage/vvd-style-coupling/scss/vvd-formfield' as vvd-formfield;
+@use '@vonage/vvd-foundation/scss/mixins/color-connotation' as color-connotation with (
+	$connotations-set: primary cta
+);
 @use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with (
 	$variable-name: --vvd-list-item-shape
 );
@@ -9,6 +12,10 @@ $vvd-list-item-block-size: --vvd-list-item-block-size;
 $vvd-list-item-side-padding: --vvd-list-item-side-padding;
 $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 
+// @include color-connotation.connotations-shades;
+@include color-connotation.connotations-main;
+@include color-connotation.connotations-main-default(primary);
+
 :host {
 	--mdc-list-side-padding: var(#{$vvd-list-item-side-padding});
 	--mdc-list-item-graphic-margin: var(#{$vvd-list-item-graphic-margin});
@@ -24,6 +31,8 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 	@include typography.typography-cat-shorthand('body-2');
 	@include vvd-formfield.coupling;
 
+	position: relative;
+
 	height: var(#{$vvd-list-item-block-size});
 
 	border-radius: var(--vvd-list-item-shape);
@@ -32,6 +41,29 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 	#{$vvd-list-item-graphic-margin}: 16px;
 }
 
+:host([activated]) {
+	--mdc-theme-text-icon-on-background: var(
+		#{color-connotation.$vvd-color-on-connotation}
+	);
+	--mdc-theme-text-hint-on-background: var(
+		#{color-connotation.$vvd-color-on-connotation}
+	);
+	--mdc-ripple-color: var(#{color-connotation.$vvd-color-connotation});
+	--mdc-ripple-activated-opacity: 1;
+
+	color: var(#{color-connotation.$vvd-color-on-connotation});
+
+	mwc-ripple,
+	.fake-activated-ripple {
+		z-index: -1;
+	}
+
+	mwc-ripple {
+		--mdc-ripple-focus-opacity: 1;
+		--mdc-ripple-hover-opacity: 1;
+	}
+}
+
 :host([graphic='icon']:not([twoline])) {
 	height: var(#{$vvd-list-item-block-size}); // override mwc fixed height
 }
diff --git a/components/list/src/vwc-list-item.ts b/components/list/src/vwc-list-item.ts
index 68b21dca03..d3562bf9df 100644
--- a/components/list/src/vwc-list-item.ts
+++ b/components/list/src/vwc-list-item.ts
@@ -3,7 +3,7 @@ import { ListItem as MWCListItem } from '@material/mwc-list/mwc-list-item';
 import { style as vwcListItemStyle } from './vwc-list-item.css.js';
 import { style as mwcListItemStyle } from '@material/mwc-list/mwc-list-item-css.js';
 import { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css';
-import { Shape } from '@vonage/vvd-foundation/constants';
+import { Connotation, Shape } from '@vonage/vvd-foundation/constants';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -15,6 +15,12 @@ declare global {
 // @ts-ignore
 MWCListItem.styles = [styleCoupling, mwcListItemStyle, vwcListItemStyle];
 
+type ListItemConnotation = Extract<
+Connotation,
+| Connotation.Primary
+| Connotation.CTA
+>;
+
 type ListItemShape = Extract<Shape, Shape.Rounded>;
 
 /**
@@ -22,6 +28,9 @@ type ListItemShape = Extract<Shape, Shape.Rounded>;
  */
 @customElement('vwc-list-item')
 export class VWCListItem extends MWCListItem {
+	@property({ type: String, reflect: true })
+	connotation?: ListItemConnotation;
+
 	@property({ type: String, reflect: true })
 	shape?: ListItemShape;
 
diff --git a/components/list/stories/arg-types-list-item.js b/components/list/stories/arg-types-list-item.js
index ff8eead030..78a06b6361 100644
--- a/components/list/stories/arg-types-list-item.js
+++ b/components/list/stories/arg-types-list-item.js
@@ -1,6 +1,14 @@
-import { Shape } from '@vonage/vvd-foundation/constants';
+import { Connotation, Shape } from '@vonage/vvd-foundation/constants';
 	
 export const argTypes = {
+	connotation: {
+		control: {
+			type: 'select',
+			options: Object.values(Connotation).filter(c => [
+				Connotation.Primary, Connotation.CTA
+			].includes(c)),
+		}
+	},
 	shape: {
 		control: {
 			type: 'select',
diff --git a/components/list/stories/list-item.stories.js b/components/list/stories/list-item.stories.js
index 322c504ef0..eb712d35bf 100644
--- a/components/list/stories/list-item.stories.js
+++ b/components/list/stories/list-item.stories.js
@@ -38,6 +38,9 @@ const Template = args => html`
 		</vwc-list-item>
 	</vwc-list>`;
 
+export const Activated = Template.bind({});
+Activated.args = { activated: '', connotation: 'primary', shape: 'rounded' };
+
 export const Shape = Template.bind({});
 Shape.args = { shape: 'rounded' };
 
diff --git a/yarn.lock b/yarn.lock
index 50bac9d9aa..4ef94af413 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8033,10 +8033,12 @@ depcheck@YonatanKra/depcheck#vivid-version:
     minimatch "^3.0.4"
     multimatch "^4.0.0"
     please-upgrade-node "^3.2.0"
+    query-ast "^1.0.3"
     readdirp "^3.4.0"
     require-package-name "^2.0.1"
     resolve "^1.17.0"
     sass "^1.26.10"
+    scss-parser "^1.0.4"
     vue-template-compiler "^2.6.11"
     yargs "^15.4.0"
 
@@ -10815,14 +10817,7 @@ intl-list-format@^1.0.3:
   resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/intl-list-format/-/intl-list-format-1.0.3.tgz#f9b3c3d69b4647d63218f49aae5d3816c6e55b5b"
   integrity sha1-+bPD1ptGR9YyGPSarl04FsblW1s=
 
-invariant@2.2.2:
-  version "2.2.2"
-  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
-  integrity sha1-nh9WrArNtr8wMwbzOL47IErmA2A=
-  dependencies:
-    loose-envify "^1.0.0"
-
-invariant@2.2.4, invariant@^2.2.3, invariant@^2.2.4:
+invariant@^2.2.3, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha1-YQ88ksk1nOHbYW5TgAjSP/NRWOY=
@@ -12245,7 +12240,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
   resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.0.1, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.2.1:
+lodash@^4.0.1, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.2.1:
   version "4.17.21"
   resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=
@@ -14646,14 +14641,6 @@ qs@~6.5.2:
   resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=
 
-query-ast@^1.0.3:
-  version "1.0.3"
-  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/query-ast/-/query-ast-1.0.3.tgz#4a18374950fa80cbf9b03d7b945bbac8bb4250bf"
-  integrity sha1-Shg3SVD6gMv5sD17lFu6yLtCUL8=
-  dependencies:
-    invariant "2.2.2"
-    lodash "^4.17.15"
-
 query-string@^6.13.8:
   version "6.14.1"
   resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
@@ -15778,14 +15765,6 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-scss-parser@^1.0.4:
-  version "1.0.4"
-  resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/scss-parser/-/scss-parser-1.0.4.tgz#61cdeb28701ffcb497954b9b05729c6d38eb8b9f"
-  integrity sha1-Yc3rKHAf/LSXlUubBXKcbTjri58=
-  dependencies:
-    invariant "2.2.4"
-    lodash "^4.17.4"
-
 select@^1.1.2:
   version "1.1.2"
   resolved "https://vonagecc.jfrog.io/vonagecc/api/npm/npm/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"

From 1a5613cc79546b9bab0ec630ba1312f777a587bc Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Tue, 11 May 2021 13:16:18 +1200
Subject: [PATCH 02/17] add basic list item story

---
 components/list/stories/list-item.stories.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/list/stories/list-item.stories.js b/components/list/stories/list-item.stories.js
index eb712d35bf..6543e1c5fd 100644
--- a/components/list/stories/list-item.stories.js
+++ b/components/list/stories/list-item.stories.js
@@ -38,8 +38,10 @@ const Template = args => html`
 		</vwc-list-item>
 	</vwc-list>`;
 
+export const Basic = Template.bind({});
+
 export const Activated = Template.bind({});
-Activated.args = { activated: '', connotation: 'primary', shape: 'rounded' };
+Activated.args = { activated: '', connotation: 'cta', shape: 'rounded' };
 
 export const Shape = Template.bind({});
 Shape.args = { shape: 'rounded' };

From 2560a8a89bb858ca5e61494f2910747a784cd11b Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Tue, 11 May 2021 13:19:16 +1200
Subject: [PATCH 03/17] remove comment

---
 components/list/src/vwc-list-item.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/list/src/vwc-list-item.scss b/components/list/src/vwc-list-item.scss
index 308c08b117..7f6ca18a37 100644
--- a/components/list/src/vwc-list-item.scss
+++ b/components/list/src/vwc-list-item.scss
@@ -12,7 +12,6 @@ $vvd-list-item-block-size: --vvd-list-item-block-size;
 $vvd-list-item-side-padding: --vvd-list-item-side-padding;
 $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 
-// @include color-connotation.connotations-shades;
 @include color-connotation.connotations-main;
 @include color-connotation.connotations-main-default(primary);
 

From 9d8277bbac7c930380268679c78e71f3aea8e508 Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Fri, 14 May 2021 13:33:53 +1200
Subject: [PATCH 04/17] prevent background hiding activated ripple

---
 components/list/src/vwc-list-item.scss       | 3 +++
 components/list/stories/list-item.stories.js | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/list/src/vwc-list-item.scss b/components/list/src/vwc-list-item.scss
index 7f6ca18a37..5c605d93e8 100644
--- a/components/list/src/vwc-list-item.scss
+++ b/components/list/src/vwc-list-item.scss
@@ -50,6 +50,9 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 	--mdc-ripple-color: var(#{color-connotation.$vvd-color-connotation});
 	--mdc-ripple-activated-opacity: 1;
 
+	@include typography.typography-cat-shorthand('body-2-bold');
+	z-index: 0;
+
 	color: var(#{color-connotation.$vvd-color-on-connotation});
 
 	mwc-ripple,
diff --git a/components/list/stories/list-item.stories.js b/components/list/stories/list-item.stories.js
index 6543e1c5fd..928cd52031 100644
--- a/components/list/stories/list-item.stories.js
+++ b/components/list/stories/list-item.stories.js
@@ -41,7 +41,7 @@ const Template = args => html`
 export const Basic = Template.bind({});
 
 export const Activated = Template.bind({});
-Activated.args = { activated: '', connotation: 'cta', shape: 'rounded' };
+Activated.args = { activated: '', connotation: 'cta', shape: 'rounded', graphic: 'icon' };
 
 export const Shape = Template.bind({});
 Shape.args = { shape: 'rounded' };

From 05946fb20694722a97fabca0b6d8297ceae9745b Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Mon, 17 May 2021 14:10:33 +1200
Subject: [PATCH 05/17] fix ripple indication

---
 components/list/src/vwc-list-item.scss | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/list/src/vwc-list-item.scss b/components/list/src/vwc-list-item.scss
index 5c605d93e8..96dd34e960 100644
--- a/components/list/src/vwc-list-item.scss
+++ b/components/list/src/vwc-list-item.scss
@@ -47,12 +47,10 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 	--mdc-theme-text-hint-on-background: var(
 		#{color-connotation.$vvd-color-on-connotation}
 	);
-	--mdc-ripple-color: var(#{color-connotation.$vvd-color-connotation});
-	--mdc-ripple-activated-opacity: 1;
+	--mdc-ripple-color: var(#{color-connotation.$vvd-color-on-connotation});
 
 	@include typography.typography-cat-shorthand('body-2-bold');
 	z-index: 0;
-
 	color: var(#{color-connotation.$vvd-color-on-connotation});
 
 	mwc-ripple,
@@ -60,9 +58,14 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 		z-index: -1;
 	}
 
+	.fake-activated-ripple {
+		--mdc-ripple-activated-opacity: 1;
+		--mdc-ripple-color: var(#{color-connotation.$vvd-color-connotation});
+	}
+
 	mwc-ripple {
-		--mdc-ripple-focus-opacity: 1;
-		--mdc-ripple-hover-opacity: 1;
+		--mdc-ripple-activated-opacity: 0;
+		background-color: var(#{color-connotation.$vvd-color-connotation});
 	}
 }
 

From dd1339ec232bd9186423e13054784a0530c0136b Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Fri, 21 May 2021 16:40:15 +1200
Subject: [PATCH 06/17] proxy shape from list to list-item

---
 components/list/src/vwc-list-item.scss        | 11 ------
 components/list/src/vwc-list-item.ts          |  8 +---
 components/list/src/vwc-list.scss             | 20 ++++++++++
 components/list/src/vwc-list.ts               |  8 +++-
 .../list/stories/arg-types-list-item.js       |  8 +---
 components/list/stories/arg-types-list.js     |  8 ++++
 components/list/stories/list-basic.stories.js | 39 +++++++++----------
 components/list/stories/list-item.stories.js  |  5 +--
 8 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/components/list/src/vwc-list-item.scss b/components/list/src/vwc-list-item.scss
index 96dd34e960..21b5906986 100644
--- a/components/list/src/vwc-list-item.scss
+++ b/components/list/src/vwc-list-item.scss
@@ -4,9 +4,6 @@
 @use '@vonage/vvd-foundation/scss/mixins/color-connotation' as color-connotation with (
 	$connotations-set: primary cta
 );
-@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with (
-	$variable-name: --vvd-list-item-shape
-);
 
 $vvd-list-item-block-size: --vvd-list-item-block-size;
 $vvd-list-item-side-padding: --vvd-list-item-side-padding;
@@ -34,7 +31,6 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 
 	height: var(#{$vvd-list-item-block-size});
 
-	border-radius: var(--vvd-list-item-shape);
 	#{$vvd-list-item-block-size}: 40px;
 	#{$vvd-list-item-side-padding}: 24px;
 	#{$vvd-list-item-graphic-margin}: 16px;
@@ -136,10 +132,3 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 .mdc-deprecated-list-item__meta {
 	display: flex;
 }
-
-@include shape-mixins.shape(
-	$shapes: (
-		rounded: 6px,
-	),
-	$default: ''
-);
diff --git a/components/list/src/vwc-list-item.ts b/components/list/src/vwc-list-item.ts
index d75c7de3db..46cdfe3344 100644
--- a/components/list/src/vwc-list-item.ts
+++ b/components/list/src/vwc-list-item.ts
@@ -3,7 +3,7 @@ import { ListItem as MWCListItem } from '@material/mwc-list/mwc-list-item';
 import { style as vwcListItemStyle } from './vwc-list-item.css.js';
 import { style as mwcListItemStyle } from '@material/mwc-list/mwc-list-item-css.js';
 import { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css';
-import { Connotation, Shape } from '@vonage/vvd-foundation/constants';
+import { Connotation } from '@vonage/vvd-foundation/constants';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -20,9 +20,6 @@ Connotation,
 | Connotation.Primary
 | Connotation.CTA
 >;
-
-type ListItemShape = Extract<Shape, Shape.Rounded>;
-
 /**
  * This component is an extension of [<mwc-list-item>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
  */
@@ -30,7 +27,4 @@ type ListItemShape = Extract<Shape, Shape.Rounded>;
 export class VWCListItem extends MWCListItem {
 	@property({ type: String, reflect: true })
 	connotation?: ListItemConnotation;
-
-	@property({ type: String, reflect: true })
-	shape?: ListItemShape;
 }
diff --git a/components/list/src/vwc-list.scss b/components/list/src/vwc-list.scss
index 47157bc7a8..75df65ce3e 100644
--- a/components/list/src/vwc-list.scss
+++ b/components/list/src/vwc-list.scss
@@ -1,6 +1,13 @@
 @use '@vonage/vvd-typography/scss/typography' as typography;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
 
+$vvd-list-shape: --vvd-list-shape;
+$scopes: list-item check-list-item radio-list-item;
+
+@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with (
+	$variable-name: #{$vvd-list-shape}
+);
+
 :host {
 	--mdc-menu-item-height: 40px;
 	--mdc-list-item-meta-size: 16px;
@@ -16,3 +23,16 @@
 		@include typography.typography-cat-shorthand('body-2');
 	}
 }
+
+@each $scope in $scopes {
+	::slotted(vwc-#{$scope}) {
+		border-radius: var(#{$vvd-list-shape});
+	}
+}
+
+@include shape-mixins.shape(
+	$shapes: (
+		rounded: 6px,
+	),
+	$default: ''
+);
diff --git a/components/list/src/vwc-list.ts b/components/list/src/vwc-list.ts
index f3524bba9a..ac11855e4b 100644
--- a/components/list/src/vwc-list.ts
+++ b/components/list/src/vwc-list.ts
@@ -1,10 +1,11 @@
 import '@vonage/vvd-core';
 import { debounced } from '@vonage/vvd-foundation/general-utils';
-import { customElement } from 'lit-element';
+import { customElement, property } from 'lit-element';
 import { List as MWCList } from '@material/mwc-list/mwc-list';
 import { style as vwcListStyle } from './vwc-list.css.js';
 import { style as mwcListStyle } from '@material/mwc-list/mwc-list-css.js';
 import { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css';
+import { Shape } from '@vonage/vvd-foundation/constants';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -16,6 +17,8 @@ declare global {
 // @ts-ignore
 MWCList.styles = [styleCoupling, mwcListStyle, vwcListStyle];
 
+type ListItemShape = Extract<Shape, Shape.Rounded>;
+
 /**
  * This component is an extension of [<mwc-list>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
  */
@@ -25,4 +28,7 @@ export class VWCList extends MWCList {
 	layout() {
 		super.layout();
 	}
+
+	@property({ type: String, reflect: true })
+	shape?: ListItemShape;
 }
diff --git a/components/list/stories/arg-types-list-item.js b/components/list/stories/arg-types-list-item.js
index 78a06b6361..e810050765 100644
--- a/components/list/stories/arg-types-list-item.js
+++ b/components/list/stories/arg-types-list-item.js
@@ -1,4 +1,4 @@
-import { Connotation, Shape } from '@vonage/vvd-foundation/constants';
+import { Connotation } from '@vonage/vvd-foundation/constants';
 	
 export const argTypes = {
 	connotation: {
@@ -9,12 +9,6 @@ export const argTypes = {
 			].includes(c)),
 		}
 	},
-	shape: {
-		control: {
-			type: 'select',
-			options: [...Object.values(Shape).filter(s => [Shape.Rounded].includes(s)), undefined]
-		}
-	},
 	twoline: {
 		control: {
 			type: 'inline-radio',
diff --git a/components/list/stories/arg-types-list.js b/components/list/stories/arg-types-list.js
index e6cf735ea8..e32820d9f3 100644
--- a/components/list/stories/arg-types-list.js
+++ b/components/list/stories/arg-types-list.js
@@ -1,4 +1,12 @@
+import { Shape } from '@vonage/vvd-foundation/constants';
+
 export const argTypes = {
+	shape: {
+		control: {
+			type: 'select',
+			options: [...Object.values(Shape).filter(s => [Shape.Rounded].includes(s)), undefined]
+		}
+	},
 	activatable: {
 		control: {
 			type: 'inline-radio',
diff --git a/components/list/stories/list-basic.stories.js b/components/list/stories/list-basic.stories.js
index 83cb09e541..f2f732ac27 100644
--- a/components/list/stories/list-basic.stories.js
+++ b/components/list/stories/list-basic.stories.js
@@ -13,6 +13,13 @@ export default {
 };
 
 const renderList = args => html`
+	<style>
+		.box,
+		vwc-list {
+			width: 240px;
+		}
+	</style>
+
 	<vwc-list ...=${spread(args)}>
 		<vwc-list-item>Item 0</vwc-list-item>
 		<vwc-list-item>Item 1</vwc-list-item>
@@ -21,30 +28,17 @@ const renderList = args => html`
 	</vwc-list>`;
 
 export const Basic = args => html`
-	<style>
-		.box {
-			width: 240px;
-		}
-	</style>
-
-<h4>Main</h4>
-<div class="box">
-	${renderList(args)}
-</div>
-<h4>Alternate</h4>
-<div class="box vvd-scheme-alternate">
-	${renderList(args)}
-</div>
-
+	<h4>Main</h4>
+	<div class="box">
+		${renderList(args)}
+	</div>
+	<h4>Alternate</h4>
+	<div class="box vvd-scheme-alternate">
+		${renderList(args)}
+	</div>
 `;
 
 export const metaIcon = args => html`
-	<style>
-		vwc-list {
-			width: 240px;
-		}
-	</style>
-
 	<vwc-list ...=${spread(args)}>
 		<vwc-list-item hasMeta>
 			<span>Item A</span>
@@ -64,3 +58,6 @@ export const metaIcon = args => html`
 		</vwc-list-item>
 	</vwc-list>
 `;
+
+export const Shape = renderList.bind({});
+Shape.args = { shape: 'rounded' };
diff --git a/components/list/stories/list-item.stories.js b/components/list/stories/list-item.stories.js
index 928cd52031..5ac0eb33fb 100644
--- a/components/list/stories/list-item.stories.js
+++ b/components/list/stories/list-item.stories.js
@@ -41,10 +41,7 @@ const Template = args => html`
 export const Basic = Template.bind({});
 
 export const Activated = Template.bind({});
-Activated.args = { activated: '', connotation: 'cta', shape: 'rounded', graphic: 'icon' };
-
-export const Shape = Template.bind({});
-Shape.args = { shape: 'rounded' };
+Activated.args = { activated: '', connotation: 'cta', graphic: 'icon' };
 
 export const TwoLine = Template.bind({});
 TwoLine.args = { twoline: '', hasMeta: '' };

From 69068786b17283185307d052aa9e439ed500e763 Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Fri, 21 May 2021 17:14:27 +1200
Subject: [PATCH 07/17] update list shape tests

---
 components/list/test/list-item.test.js | 23 ----------------------
 components/list/test/list.test.js      | 27 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/components/list/test/list-item.test.js b/components/list/test/list-item.test.js
index f9e2777381..3d5eda0640 100644
--- a/components/list/test/list-item.test.js
+++ b/components/list/test/list-item.test.js
@@ -1,12 +1,10 @@
 import '@vonage/vwc-list';
 import '@vonage/vwc-list/vwc-list-item';
 import {
-	assertComputedStyle,
 	textToDomToParent,
 	waitNextTask,
 	isolatedElementsCreation,
 } from '../../../test/test-helpers.js';
-import { borderRadiusStyles, shapeStyles } from '../../../test/style-utils';
 import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
 import {
 	assertListItemDimensions,
@@ -79,25 +77,4 @@ describe('list item', () => {
 			expect(distanceBetweenLines).to.equal(4);
 		});
 	});
-
-	describe('shape', () => {
-		let actualElement;
-		beforeEach(async () => {
-			const addedElements = addElement(
-				textToDomToParent(`<${VWC_LIST_ITEM}>Item 0</${VWC_LIST_ITEM}>`)
-			);
-			actualElement = addedElements[0];
-			await waitNextTask();
-		});
-
-		it('should have no shape by default', async () => {
-			assertComputedStyle(actualElement, borderRadiusStyles('0px'));
-		});
-
-		it('should have rounded shape when shape set to rounded', async () => {
-			actualElement.shape = 'rounded';
-			await waitNextTask();
-			assertComputedStyle(actualElement, shapeStyles('rounded'));
-		});
-	});
 });
diff --git a/components/list/test/list.test.js b/components/list/test/list.test.js
index fa09d7bf36..807b304ab1 100644
--- a/components/list/test/list.test.js
+++ b/components/list/test/list.test.js
@@ -6,6 +6,7 @@ import {
 	textToDomToParent,
 	waitNextTask,
 } from '../../../test/test-helpers';
+import { borderRadiusStyles, shapeStyles } from '../../../test/style-utils';
 import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
 
 chai.use(chaiDomDiff);
@@ -57,4 +58,30 @@ describe('list', () => {
 			}
 		}
 	});
+
+	describe('shape', () => {
+		let list,
+			listItem;
+		beforeEach(async () => {
+			[list] = addElement(
+				textToDomToParent(`
+					<vwc-list>
+						<vwc-list-item>Item 1</vwc-list-item>
+					</vwc-list>
+				`)
+			);
+			await waitNextTask();
+			listItem = list.querySelector('vwc-list-item');
+		});
+
+		it('should not proxy shape to list-item by default', async () => {
+			assertComputedStyle(listItem, borderRadiusStyles('0px'));
+		});
+
+		it('should proxy rounded shape to list-item when shape set to rounded', async () => {
+			list.shape = 'rounded';
+			await waitNextTask();
+			assertComputedStyle(listItem, shapeStyles('rounded'));
+		});
+	});
 });

From 156a6518ff204fa37a1b0f966e28612937e2114f Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Mon, 24 May 2021 16:06:34 +1200
Subject: [PATCH 08/17] proxy list connotation to list-item

---
 components/list/src/vwc-list-item.scss        | 20 ++-----------
 components/list/src/vwc-list-item.ts          | 13 ++-------
 components/list/src/vwc-list.scss             | 16 +++++++++++
 components/list/src/vwc-list.ts               | 11 +++++++-
 .../list/stories/arg-types-list-item.js       | 10 -------
 components/list/stories/arg-types-list.js     | 10 ++++++-
 components/list/stories/list-basic.stories.js | 28 ++++++++++++++++++-
 components/list/stories/list-item.stories.js  |  2 +-
 8 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/components/list/src/vwc-list-item.scss b/components/list/src/vwc-list-item.scss
index 21b5906986..b601fbb65d 100644
--- a/components/list/src/vwc-list-item.scss
+++ b/components/list/src/vwc-list-item.scss
@@ -1,17 +1,11 @@
 @use '@vonage/vvd-typography/scss/typography' as typography;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 @use '@vonage/vvd-style-coupling/scss/vvd-formfield' as vvd-formfield;
-@use '@vonage/vvd-foundation/scss/mixins/color-connotation' as color-connotation with (
-	$connotations-set: primary cta
-);
 
 $vvd-list-item-block-size: --vvd-list-item-block-size;
 $vvd-list-item-side-padding: --vvd-list-item-side-padding;
 $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 
-@include color-connotation.connotations-main;
-@include color-connotation.connotations-main-default(primary);
-
 :host {
 	--mdc-list-side-padding: var(#{$vvd-list-item-side-padding});
 	--mdc-list-item-graphic-margin: var(#{$vvd-list-item-graphic-margin});
@@ -37,17 +31,9 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 }
 
 :host([activated]) {
-	--mdc-theme-text-icon-on-background: var(
-		#{color-connotation.$vvd-color-on-connotation}
-	);
-	--mdc-theme-text-hint-on-background: var(
-		#{color-connotation.$vvd-color-on-connotation}
-	);
-	--mdc-ripple-color: var(#{color-connotation.$vvd-color-on-connotation});
-
 	@include typography.typography-cat-shorthand('body-2-bold');
 	z-index: 0;
-	color: var(#{color-connotation.$vvd-color-on-connotation});
+	color: var(--vvd-list-item-activated-color);
 
 	mwc-ripple,
 	.fake-activated-ripple {
@@ -56,12 +42,12 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 
 	.fake-activated-ripple {
 		--mdc-ripple-activated-opacity: 1;
-		--mdc-ripple-color: var(#{color-connotation.$vvd-color-connotation});
+		--mdc-ripple-color: var(--vvd-list-item-activated-ripple-color);
 	}
 
 	mwc-ripple {
 		--mdc-ripple-activated-opacity: 0;
-		background-color: var(#{color-connotation.$vvd-color-connotation});
+		background-color: var(--vvd-list-item-activated-ripple-background);
 	}
 }
 
diff --git a/components/list/src/vwc-list-item.ts b/components/list/src/vwc-list-item.ts
index 46cdfe3344..72f84e4e83 100644
--- a/components/list/src/vwc-list-item.ts
+++ b/components/list/src/vwc-list-item.ts
@@ -1,9 +1,8 @@
-import { customElement, property } from 'lit-element';
+import { customElement } from 'lit-element';
 import { ListItem as MWCListItem } from '@material/mwc-list/mwc-list-item';
 import { style as vwcListItemStyle } from './vwc-list-item.css.js';
 import { style as mwcListItemStyle } from '@material/mwc-list/mwc-list-item-css.js';
 import { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css';
-import { Connotation } from '@vonage/vvd-foundation/constants';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -15,16 +14,8 @@ declare global {
 // @ts-ignore
 MWCListItem.styles = [styleCoupling, mwcListItemStyle, vwcListItemStyle];
 
-type ListItemConnotation = Extract<
-Connotation,
-| Connotation.Primary
-| Connotation.CTA
->;
 /**
  * This component is an extension of [<mwc-list-item>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
  */
 @customElement('vwc-list-item')
-export class VWCListItem extends MWCListItem {
-	@property({ type: String, reflect: true })
-	connotation?: ListItemConnotation;
-}
+export class VWCListItem extends MWCListItem {}
diff --git a/components/list/src/vwc-list.scss b/components/list/src/vwc-list.scss
index 75df65ce3e..0034e161fe 100644
--- a/components/list/src/vwc-list.scss
+++ b/components/list/src/vwc-list.scss
@@ -1,5 +1,8 @@
 @use '@vonage/vvd-typography/scss/typography' as typography;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
+@use '@vonage/vvd-foundation/scss/mixins/color-connotation' as color-connotation with (
+	$connotations-set: primary cta
+);
 
 $vvd-list-shape: --vvd-list-shape;
 $scopes: list-item check-list-item radio-list-item;
@@ -8,6 +11,9 @@ $scopes: list-item check-list-item radio-list-item;
 	$variable-name: #{$vvd-list-shape}
 );
 
+@include color-connotation.connotations-main;
+@include color-connotation.connotations-main-default(primary);
+
 :host {
 	--mdc-menu-item-height: 40px;
 	--mdc-list-item-meta-size: 16px;
@@ -30,6 +36,16 @@ $scopes: list-item check-list-item radio-list-item;
 	}
 }
 
+::slotted(#{vwc-list-item}[activated]) {
+	--mdc-theme-text-icon-on-background: var(#{color-connotation.$vvd-color-on-connotation});
+	--mdc-theme-text-hint-on-background: var(#{color-connotation.$vvd-color-on-connotation});
+	--mdc-ripple-color: var(#{color-connotation.$vvd-color-on-connotation});
+
+	--vvd-list-item-activated-color: var(#{color-connotation.$vvd-color-on-connotation});
+	--vvd-list-item-activated-ripple-background: var(#{color-connotation.$vvd-color-connotation});
+	--vvd-list-item-activated-ripple-color: var(#{color-connotation.$vvd-color-connotation});
+}
+
 @include shape-mixins.shape(
 	$shapes: (
 		rounded: 6px,
diff --git a/components/list/src/vwc-list.ts b/components/list/src/vwc-list.ts
index ac11855e4b..f0ae5412fa 100644
--- a/components/list/src/vwc-list.ts
+++ b/components/list/src/vwc-list.ts
@@ -5,7 +5,7 @@ import { List as MWCList } from '@material/mwc-list/mwc-list';
 import { style as vwcListStyle } from './vwc-list.css.js';
 import { style as mwcListStyle } from '@material/mwc-list/mwc-list-css.js';
 import { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css';
-import { Shape } from '@vonage/vvd-foundation/constants';
+import { Connotation, Shape } from '@vonage/vvd-foundation/constants';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -17,6 +17,12 @@ declare global {
 // @ts-ignore
 MWCList.styles = [styleCoupling, mwcListStyle, vwcListStyle];
 
+type ListItemConnotation = Extract<
+Connotation,
+| Connotation.Primary
+| Connotation.CTA
+>;
+
 type ListItemShape = Extract<Shape, Shape.Rounded>;
 
 /**
@@ -29,6 +35,9 @@ export class VWCList extends MWCList {
 		super.layout();
 	}
 
+	@property({ type: String, reflect: true })
+	connotation?: ListItemConnotation;
+
 	@property({ type: String, reflect: true })
 	shape?: ListItemShape;
 }
diff --git a/components/list/stories/arg-types-list-item.js b/components/list/stories/arg-types-list-item.js
index e810050765..9b1961a479 100644
--- a/components/list/stories/arg-types-list-item.js
+++ b/components/list/stories/arg-types-list-item.js
@@ -1,14 +1,4 @@
-import { Connotation } from '@vonage/vvd-foundation/constants';
-	
 export const argTypes = {
-	connotation: {
-		control: {
-			type: 'select',
-			options: Object.values(Connotation).filter(c => [
-				Connotation.Primary, Connotation.CTA
-			].includes(c)),
-		}
-	},
 	twoline: {
 		control: {
 			type: 'inline-radio',
diff --git a/components/list/stories/arg-types-list.js b/components/list/stories/arg-types-list.js
index e32820d9f3..6de050cf4b 100644
--- a/components/list/stories/arg-types-list.js
+++ b/components/list/stories/arg-types-list.js
@@ -1,6 +1,14 @@
-import { Shape } from '@vonage/vvd-foundation/constants';
+import { Connotation, Shape } from '@vonage/vvd-foundation/constants';
 
 export const argTypes = {
+	connotation: {
+		control: {
+			type: 'select',
+			options: Object.values(Connotation).filter(c => [
+				Connotation.Primary, Connotation.CTA
+			].includes(c)),
+		}
+	},
 	shape: {
 		control: {
 			type: 'select',
diff --git a/components/list/stories/list-basic.stories.js b/components/list/stories/list-basic.stories.js
index f2f732ac27..bfe9586829 100644
--- a/components/list/stories/list-basic.stories.js
+++ b/components/list/stories/list-basic.stories.js
@@ -14,7 +14,6 @@ export default {
 
 const renderList = args => html`
 	<style>
-		.box,
 		vwc-list {
 			width: 240px;
 		}
@@ -28,6 +27,12 @@ const renderList = args => html`
 	</vwc-list>`;
 
 export const Basic = args => html`
+	<style>
+		.box {
+			width: 240px;
+		}
+	</style>
+
 	<h4>Main</h4>
 	<div class="box">
 		${renderList(args)}
@@ -39,6 +44,12 @@ export const Basic = args => html`
 `;
 
 export const metaIcon = args => html`
+	<style>
+		vwc-list {
+			width: 240px;
+		}
+	</style>
+
 	<vwc-list ...=${spread(args)}>
 		<vwc-list-item hasMeta>
 			<span>Item A</span>
@@ -61,3 +72,18 @@ export const metaIcon = args => html`
 
 export const Shape = renderList.bind({});
 Shape.args = { shape: 'rounded' };
+
+export const Connotation = args => html`
+	<style>
+		vwc-list {
+			width: 240px;
+		}
+	</style>
+
+	<vwc-list ...=${spread(args)}>
+		<vwc-list-item>Item 0</vwc-list-item>
+		<vwc-list-item activated>Item 1 (Activated)</vwc-list-item>
+		<vwc-list-item>Item 2</vwc-list-item>
+	</vwc-list>
+`;
+Connotation.args = { connotation: 'cta', shape: 'rounded' };
diff --git a/components/list/stories/list-item.stories.js b/components/list/stories/list-item.stories.js
index 5ac0eb33fb..21e3893511 100644
--- a/components/list/stories/list-item.stories.js
+++ b/components/list/stories/list-item.stories.js
@@ -41,7 +41,7 @@ const Template = args => html`
 export const Basic = Template.bind({});
 
 export const Activated = Template.bind({});
-Activated.args = { activated: '', connotation: 'cta', graphic: 'icon' };
+Activated.args = { activated: '', graphic: 'icon' };
 
 export const TwoLine = Template.bind({});
 TwoLine.args = { twoline: '', hasMeta: '' };

From 9299292a674c104c6eea74b438fd509a310b6fee Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Mon, 24 May 2021 17:02:48 +1200
Subject: [PATCH 09/17] add list connotation test

---
 components/list/test/list.test.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/components/list/test/list.test.js b/components/list/test/list.test.js
index 807b304ab1..7f98690207 100644
--- a/components/list/test/list.test.js
+++ b/components/list/test/list.test.js
@@ -59,6 +59,33 @@ describe('list', () => {
 		}
 	});
 
+	describe('connotation', () => {
+		let list,
+			ripple;
+		beforeEach(async () => {
+			[list] = addElement(
+				textToDomToParent(`
+					<vwc-list>
+						<vwc-list-item activated>Item 1</vwc-list-item>
+					</vwc-list>
+				`)
+			);
+			await waitNextTask();
+			const listItem = list.querySelector('vwc-list-item');
+			ripple = listItem.shadowRoot.querySelector('.fake-activated-ripple');
+		});
+
+		it('should proxy primary connotation to activated list-item by default', async () => {
+			assertComputedStyle(ripple, { backgroundColor: 'rgb(0,0,0)' }, ':before');
+		});
+
+		it('should proxy cta connotation to activated list-item when connotation set to cta', async () => {
+			list.connotation = 'cta';
+			await waitNextTask();
+			assertComputedStyle(ripple, { backgroundColor: 'rgb(153,65,255)' }, ':before');
+		});
+	});
+
 	describe('shape', () => {
 		let list,
 			listItem;

From 9fbea1b2c551548fdb42152aaafdbcd85d3cfa1f Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Tue, 25 May 2021 13:12:09 +1200
Subject: [PATCH 10/17] reset branch

---
 __snapshots__/accordion.md                    | 12 +++
 components/accordion/CHANGELOG.md             |  9 +++
 components/accordion/package.json             | 39 ++++++++++
 .../accordion/src/vwc-accordion-base.ts       | 47 +++++++++++
 components/accordion/src/vwc-accordion.scss   |  4 +
 components/accordion/src/vwc-accordion.ts     | 27 +++++++
 .../accordion/stories/accordion.stories.js    | 25 ++++++
 components/accordion/stories/arg-types.js     |  9 +++
 .../accordion/test/accordion.a11y.test.js     | 24 ++++++
 components/accordion/test/accordion.test.js   | 77 +++++++++++++++++++
 components/accordion/tsconfig.json            | 15 ++++
 components/list/src/vwc-list-text-parts.scss  | 40 ++++++++++
 components/list/test/list-items-utils.test.js | 26 +++++++
 13 files changed, 354 insertions(+)
 create mode 100644 __snapshots__/accordion.md
 create mode 100644 components/accordion/CHANGELOG.md
 create mode 100644 components/accordion/package.json
 create mode 100644 components/accordion/src/vwc-accordion-base.ts
 create mode 100644 components/accordion/src/vwc-accordion.scss
 create mode 100644 components/accordion/src/vwc-accordion.ts
 create mode 100644 components/accordion/stories/accordion.stories.js
 create mode 100644 components/accordion/stories/arg-types.js
 create mode 100644 components/accordion/test/accordion.a11y.test.js
 create mode 100644 components/accordion/test/accordion.test.js
 create mode 100644 components/accordion/tsconfig.json
 create mode 100644 components/list/src/vwc-list-text-parts.scss
 create mode 100644 components/list/test/list-items-utils.test.js

diff --git a/__snapshots__/accordion.md b/__snapshots__/accordion.md
new file mode 100644
index 0000000000..68420f363f
--- /dev/null
+++ b/__snapshots__/accordion.md
@@ -0,0 +1,12 @@
+# `accordion`
+
+#### `should have internal contents`
+
+```html
+<div class="accordion">
+  <slot>
+  </slot>
+</div>
+
+```
+
diff --git a/components/accordion/CHANGELOG.md b/components/accordion/CHANGELOG.md
new file mode 100644
index 0000000000..5e630a6c47
--- /dev/null
+++ b/components/accordion/CHANGELOG.md
@@ -0,0 +1,9 @@
+# [2.9.0](https://github.com/vonage/vivid/compare/v2.8.0...v2.9.0) (2021-05-24)
+
+
+### Features
+
+* **vwc-accordion:** viv-388 accordion ([#683](https://github.com/vonage/vivid/issues/683)) ([8b597ab](https://github.com/vonage/vivid/commit/8b597ab2f800b4d9c954e829b62e52d667012cee))
+
+
+
diff --git a/components/accordion/package.json b/components/accordion/package.json
new file mode 100644
index 0000000000..4d8826840e
--- /dev/null
+++ b/components/accordion/package.json
@@ -0,0 +1,39 @@
+{
+	"name": "@vonage/vwc-accordion",
+	"version": "2.9.0",
+	"description": "accordion component",
+	"homepage": "https://github.com/Vonage/vivid/tree/master/components/accordion#readme",
+	"license": "ISC",
+	"main": "vwc-accordion.js",
+	"module": "vwc-accordion.js",
+	"files": [
+		"src",
+		"*.js",
+		"*.ts",
+		"*.map"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/vonage/vivid.git",
+		"directory": "components/accordion"
+	},
+	"scripts": {
+		"test": "echo \"Error: run tests from root\" && exit 1",
+		"build:typescript": "tsc -b",
+		"build:styles": "umbrella-style-modules",
+		"build": "yarn run build:styles && yarn run build:typescript"
+	},
+	"bugs": {
+		"url": "https://github.com/Vonage/vivid/issues"
+	},
+	"dependencies": {
+		"@vonage/vvd-core": "2.9.0",
+		"@vonage/vwc-expansion-panel": "2.9.0",
+		"lit-element": "^2.4.0",
+		"tslib": "^2.0.3"
+	},
+	"devDependencies": {
+		"@vonage/vvd-umbrella": "2.9.0",
+		"typescript": "^4.1.3"
+	}
+}
diff --git a/components/accordion/src/vwc-accordion-base.ts b/components/accordion/src/vwc-accordion-base.ts
new file mode 100644
index 0000000000..b106bb8037
--- /dev/null
+++ b/components/accordion/src/vwc-accordion-base.ts
@@ -0,0 +1,47 @@
+import { LitElement, property } from 'lit-element';
+import { VWCExpansionPanelBase } from '@vonage/vwc-expansion-panel/vwc-expansion-panel-base';
+
+export abstract class VWCAccordionBase extends LitElement {
+	@property({ type: Boolean, reflect: true })
+	multi = false;
+
+	private expansionPanels: HTMLCollectionOf<VWCExpansionPanelBase> | undefined = undefined;
+
+	constructor() {
+		super();
+		this.addEventListener('opened', this.handleOpened);
+	}
+
+	connectedCallback(): void {
+		super.connectedCallback();
+		this.expansionPanels = this.children as HTMLCollectionOf<VWCExpansionPanelBase>;
+	}
+
+	handleOpened(e: Event): any {
+		if (!this.multi && this.expansionPanels) {
+			for (const expansionPanel of this.expansionPanels) {
+				if (expansionPanel !== e.target) expansionPanel.close();
+			}
+		}
+	}
+
+	getOpened(): Array<VWCExpansionPanelBase> {
+		const opened = [];
+
+		if (this.expansionPanels) {
+			for (const expansionPanel of this.expansionPanels) {
+				if (expansionPanel.open === true) opened.push(expansionPanel);
+			}
+		}
+
+		return opened;
+	}
+
+	closeAll(): void {
+		if (this.expansionPanels) {
+			for (const expansionPanel of this.expansionPanels) {
+				expansionPanel.close();
+			}
+		}
+	}
+}
diff --git a/components/accordion/src/vwc-accordion.scss b/components/accordion/src/vwc-accordion.scss
new file mode 100644
index 0000000000..4b64a63319
--- /dev/null
+++ b/components/accordion/src/vwc-accordion.scss
@@ -0,0 +1,4 @@
+:host {
+	display: flex;
+	flex-direction: column;
+}
diff --git a/components/accordion/src/vwc-accordion.ts b/components/accordion/src/vwc-accordion.ts
new file mode 100644
index 0000000000..223c08c628
--- /dev/null
+++ b/components/accordion/src/vwc-accordion.ts
@@ -0,0 +1,27 @@
+import '@vonage/vvd-core';
+import {
+	customElement,
+	html,
+	TemplateResult
+} from 'lit-element';
+import { VWCAccordionBase } from './vwc-accordion-base.js';
+import { style } from './vwc-accordion.css.js';
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'vwc-accordion': VWCAccordion;
+	}
+}
+
+@customElement('vwc-accordion')
+export class VWCAccordion extends VWCAccordionBase {
+	static styles = style;
+
+	protected render(): TemplateResult {
+		return html`
+			<div class="accordion">
+				<slot></slot>
+			</div>
+		`;
+	}
+}
diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js
new file mode 100644
index 0000000000..ed9fdb3bbe
--- /dev/null
+++ b/components/accordion/stories/accordion.stories.js
@@ -0,0 +1,25 @@
+import '@vonage/vwc-accordion/vwc-accordion.js';
+import '@vonage/vwc-expansion-panel/vwc-expansion-panel.js';
+import { html } from 'lit-element';
+import { spread } from '@open-wc/lit-helpers';
+import { argTypes } from './arg-types.js';
+
+export default {
+  title: 'Alpha/Components/Accordion',
+  component: 'vwc-accordion',
+  argTypes
+};
+
+const Template = args => html`
+  <vwc-accordion ...=${spread(args)}>
+    <vwc-expansion-panel header="Item 1">Content</vwc-expansion-panel>
+    <vwc-expansion-panel header="Item 2">Content</vwc-expansion-panel>
+    <vwc-expansion-panel header="Item 3">Content</vwc-expansion-panel>
+    <vwc-expansion-panel header="Item 4">Content</vwc-expansion-panel>
+  </vwc-accordion>
+`;
+
+export const Basic = Template.bind({});
+
+export const Multi = Template.bind({});
+Multi.args = { multi: '' };
diff --git a/components/accordion/stories/arg-types.js b/components/accordion/stories/arg-types.js
new file mode 100644
index 0000000000..baf0e3675a
--- /dev/null
+++ b/components/accordion/stories/arg-types.js
@@ -0,0 +1,9 @@
+export const argTypes = {
+	multi: {
+		control: {
+			type: 'inline-radio',
+			options: { 'true': '', 'false': undefined }
+		}
+	},
+	styles: { table: { disable: true } }
+}
diff --git a/components/accordion/test/accordion.a11y.test.js b/components/accordion/test/accordion.a11y.test.js
new file mode 100644
index 0000000000..72ce5cca9d
--- /dev/null
+++ b/components/accordion/test/accordion.a11y.test.js
@@ -0,0 +1,24 @@
+import '../vwc-accordion.js';
+import {
+	isolatedElementsCreation,
+	waitNextTask,
+	textToDomToParent
+} from '../../../test/test-helpers.js';
+import { chaiA11yAxe } from 'chai-a11y-axe';
+
+chai.use(chaiA11yAxe);
+
+const COMPONENT_NAME = 'vwc-accordion';
+
+describe('accordion a11y', () => {
+	const addElement = isolatedElementsCreation();
+
+	it('should have 0 accessibility violations', async () => {
+		const [actualElement] = addElement(
+			textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
+		);
+		await waitNextTask();
+
+		await expect(actualElement).shadowDom.to.be.accessible();
+	});
+});
diff --git a/components/accordion/test/accordion.test.js b/components/accordion/test/accordion.test.js
new file mode 100644
index 0000000000..fd28f360fe
--- /dev/null
+++ b/components/accordion/test/accordion.test.js
@@ -0,0 +1,77 @@
+import '@vonage/vwc-accordion/vwc-accordion';
+import '@vonage/vwc-expansion-panel/vwc-expansion-panel';
+import {
+	textToDomToParent,
+	waitNextTask,
+	isolatedElementsCreation,
+} from '../../../test/test-helpers.js';
+import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
+
+chai.use(chaiDomDiff);
+
+const COMPONENT_NAME = 'vwc-accordion';
+
+describe('accordion', () => {
+	let addElement = isolatedElementsCreation();
+
+	it('should be defined as a custom element', () => {
+		assert.exists(
+			customElements.get(COMPONENT_NAME, 'vwc-accordion element is not defined')
+		);
+	});
+
+	it('should have internal contents', async () => {
+		const [actualElement] = addElement(
+			textToDomToParent(`
+				<${COMPONENT_NAME}></${COMPONENT_NAME}>
+			`)
+		);
+		await waitNextTask();
+		expect(actualElement.shadowRoot.innerHTML).to.equalSnapshot();
+	});
+
+	describe(`accordion visibility`, function () {
+		it('should only allow one expansion panel open at a time', async () => {
+			const [actualElement] = addElement(
+				textToDomToParent(`
+					<${COMPONENT_NAME}>
+						<vwc-expansion-panel header="panel 1" open></vwc-expansion-panel>
+						<vwc-expansion-panel header="panel 2" open></vwc-expansion-panel>
+					</${COMPONENT_NAME}>
+				`)
+			);
+			await waitNextTask();
+			const openExpansionPanels = actualElement.getOpened();
+			expect(openExpansionPanels.length).to.equal(1);
+		});
+
+		it('should have all expansion panels open when set to multi', async () => {
+			const [actualElement] = addElement(
+				textToDomToParent(`
+					<${COMPONENT_NAME} multi>
+						<vwc-expansion-panel open header="panel 1"></vwc-expansion-panel>
+						<vwc-expansion-panel open header="panel 2"></vwc-expansion-panel>
+					</${COMPONENT_NAME}>
+				`)
+			);
+			await waitNextTask();
+			const openExpansionPanels = actualElement.getOpened();
+			expect(openExpansionPanels.length).to.equal(2);
+		});
+
+		it('should have all expansion panels closed', async () => {
+			const [actualElement] = addElement(
+				textToDomToParent(`
+					<${COMPONENT_NAME}>
+						<vwc-expansion-panel header="panel 1" open></vwc-expansion-panel>
+						<vwc-expansion-panel header="panel 2"></vwc-expansion-panel>
+					</${COMPONENT_NAME}>
+				`)
+			);
+			await waitNextTask();
+			actualElement.closeAll();
+			const openExpansionPanels = actualElement.getOpened();
+			expect(openExpansionPanels.length).to.equal(0);
+		});
+	});
+});
diff --git a/components/accordion/tsconfig.json b/components/accordion/tsconfig.json
new file mode 100644
index 0000000000..b81b6b34f0
--- /dev/null
+++ b/components/accordion/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "@vonage/vvd-umbrella/configs/tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "src",
+    "outDir": ".",
+    "tsBuildInfoFile": ".tsbuildinfo"
+  },
+  "include": [
+    "src/*.ts"
+  ],
+  "exclude": [
+    "src/test/*.ts"
+  ]
+}
\ No newline at end of file
diff --git a/components/list/src/vwc-list-text-parts.scss b/components/list/src/vwc-list-text-parts.scss
new file mode 100644
index 0000000000..26c66f8fe2
--- /dev/null
+++ b/components/list/src/vwc-list-text-parts.scss
@@ -0,0 +1,40 @@
+@use '@vonage/vvd-style-coupling/scss/vvd-formfield' as vvd-formfield;
+@use '@vonage/vvd-typography/scss/typography' as typography;
+
+:host {
+	@include vvd-formfield.coupling;
+}
+
+:host,
+:host([twoline]) {
+	.mdc-deprecated-list-item__text {
+		align-self: center;
+		margin-inline-end: 4px;
+	}
+}
+
+:host([twoline]) {
+	.mdc-deprecated-list-item__primary-text {
+		@include typography.typography-cat-shorthand('body-2-bold');
+		margin-bottom: 4px;
+
+		&::before,
+		&::after {
+			display: none;
+		}
+	}
+
+	.mdc-deprecated-list-item__secondary-text {
+		@include typography.typography-cat-shorthand('caption');
+
+		&::before {
+			display: none;
+		}
+	}
+}
+
+:host([disabled]) {
+	.mdc-deprecated-list-item__text {
+		color: var(#{vvd-formfield.$formfield-disabled-ink});
+	}
+}
diff --git a/components/list/test/list-items-utils.test.js b/components/list/test/list-items-utils.test.js
new file mode 100644
index 0000000000..f665eb66df
--- /dev/null
+++ b/components/list/test/list-items-utils.test.js
@@ -0,0 +1,26 @@
+import {
+	assertComputedStyle,
+	textToDomToParent,
+} from '../../../test/test-helpers.js';
+
+export function assertListItemDimensions(items, expectedTotal, expectedHeight) {
+	expect(items).exist;
+	expect(items.length).equal(expectedTotal);
+	for (const item of items) {
+		assertComputedStyle(item, {
+			marginTop: '0px',
+			marginLeft: '0px',
+			marginRight: '0px',
+			marginBottom: '0px',
+			height: `${expectedHeight}px`
+		});
+	}
+}
+
+export function buildListOfNItems(n, itemElement) {
+	const itemsHTML = new Array(n)
+		.fill(undefined)
+		.map((_, index) => `<${itemElement}>Item ${index + 1}</${itemElement}>`)
+		.join('');
+	return textToDomToParent(`<vwc-list>${itemsHTML}</vwc-list>`);
+}

From b88f016907401736526d3b069508c732ffb8af6c Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Tue, 25 May 2021 13:44:05 +1200
Subject: [PATCH 11/17] add list-item connotation test

---
 components/list/test/list-item.test.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/components/list/test/list-item.test.js b/components/list/test/list-item.test.js
index dbc25fd9cc..ee197e1691 100644
--- a/components/list/test/list-item.test.js
+++ b/components/list/test/list-item.test.js
@@ -84,6 +84,28 @@ describe('list item', () => {
 		});
 	});
 
+	describe('connotation', () => {
+		let listItem,
+			ripple;
+		beforeEach(async () => {
+			[listItem] = addElement(
+				textToDomToParent(`<vwc-list-item activated>Item 1</vwc-list-item>`)
+			);
+			await waitNextTask();
+			ripple = listItem.shadowRoot.querySelector('.fake-activated-ripple');
+		});
+
+		it('should proxy primary connotation to activated list-item by default', async () => {
+			assertComputedStyle(ripple, { backgroundColor: 'rgb(0,0,0)' }, ':before');
+		});
+
+		it('should proxy cta connotation to activated list-item when connotation set to cta', async () => {
+			listItem.connotation = 'cta';
+			await waitNextTask();
+			assertComputedStyle(ripple, { backgroundColor: 'rgb(153,65,255)' }, ':before');
+		});
+	});
+
 	describe('shape', () => {
 		let actualElement;
 		beforeEach(async () => {

From 6ac6baa9ecce67e16a018bdcd00864df96b23eea Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Tue, 25 May 2021 21:37:13 +1200
Subject: [PATCH 12/17] correctly reset changes

---
 components/list/src/vwc-list-item.scss        | 33 ++++++++++--
 components/list/src/vwc-list-item.ts          | 19 ++++++-
 components/list/src/vwc-list.scss             | 36 -------------
 components/list/src/vwc-list.ts               | 17 +-----
 .../list/stories/arg-types-list-item.js       | 16 ++++++
 components/list/stories/arg-types-list.js     | 16 ------
 components/list/stories/list-basic.stories.js | 18 -------
 components/list/stories/list-item.stories.js  |  5 +-
 components/list/test/list.test.js             | 53 -------------------
 9 files changed, 66 insertions(+), 147 deletions(-)

diff --git a/components/list/src/vwc-list-item.scss b/components/list/src/vwc-list-item.scss
index f793483813..39887814fd 100644
--- a/components/list/src/vwc-list-item.scss
+++ b/components/list/src/vwc-list-item.scss
@@ -1,12 +1,20 @@
-@forward './vwc-list-text-parts.scss';
 @use '@vonage/vvd-typography/scss/typography' as typography;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 @use '@vonage/vvd-style-coupling/scss/vvd-formfield' as vvd-formfield;
+@use '@vonage/vvd-foundation/scss/mixins/color-connotation' as color-connotation with (
+	$connotations-set: primary cta
+);
+@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with (
+	$variable-name: --vvd-list-item-shape
+);
 
 $vvd-list-item-block-size: --vvd-list-item-block-size;
 $vvd-list-item-side-padding: --vvd-list-item-side-padding;
 $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 
+@include color-connotation.connotations-main;
+@include color-connotation.connotations-main-default(primary);
+
 :host {
 	--mdc-list-side-padding: var(#{$vvd-list-item-side-padding});
 	--mdc-list-item-graphic-margin: var(#{$vvd-list-item-graphic-margin});
@@ -23,8 +31,8 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 	@include vvd-formfield.coupling;
 
 	position: relative;
-
 	height: var(#{$vvd-list-item-block-size});
+	border-radius: var(--vvd-list-item-shape);
 
 	#{$vvd-list-item-block-size}: 40px;
 	#{$vvd-list-item-side-padding}: 24px;
@@ -32,9 +40,17 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 }
 
 :host([activated]) {
+	--mdc-theme-text-icon-on-background: var(
+		#{color-connotation.$vvd-color-on-connotation}
+	);
+	--mdc-theme-text-hint-on-background: var(
+		#{color-connotation.$vvd-color-on-connotation}
+	);
+	--mdc-ripple-color: var(#{color-connotation.$vvd-color-on-connotation});
+
 	@include typography.typography-cat-shorthand('body-2-bold');
 	z-index: 0;
-	color: var(--vvd-list-item-activated-color);
+	color: var(#{color-connotation.$vvd-color-on-connotation});
 
 	mwc-ripple,
 	.fake-activated-ripple {
@@ -43,12 +59,12 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 
 	.fake-activated-ripple {
 		--mdc-ripple-activated-opacity: 1;
-		--mdc-ripple-color: var(--vvd-list-item-activated-ripple-color);
+		--mdc-ripple-color: var(#{color-connotation.$vvd-color-connotation});
 	}
 
 	mwc-ripple {
 		--mdc-ripple-activated-opacity: 0;
-		background-color: var(--vvd-list-item-activated-ripple-background);
+		background-color: var(#{color-connotation.$vvd-color-connotation});
 	}
 }
 
@@ -91,3 +107,10 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 .mdc-deprecated-list-item__meta {
 	display: flex;
 }
+
+@include shape-mixins.shape(
+	$shapes: (
+		rounded: 6px,
+	),
+	$default: ''
+);
diff --git a/components/list/src/vwc-list-item.ts b/components/list/src/vwc-list-item.ts
index 72f84e4e83..d75c7de3db 100644
--- a/components/list/src/vwc-list-item.ts
+++ b/components/list/src/vwc-list-item.ts
@@ -1,8 +1,9 @@
-import { customElement } from 'lit-element';
+import { customElement, property } from 'lit-element';
 import { ListItem as MWCListItem } from '@material/mwc-list/mwc-list-item';
 import { style as vwcListItemStyle } from './vwc-list-item.css.js';
 import { style as mwcListItemStyle } from '@material/mwc-list/mwc-list-item-css.js';
 import { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css';
+import { Connotation, Shape } from '@vonage/vvd-foundation/constants';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -14,8 +15,22 @@ declare global {
 // @ts-ignore
 MWCListItem.styles = [styleCoupling, mwcListItemStyle, vwcListItemStyle];
 
+type ListItemConnotation = Extract<
+Connotation,
+| Connotation.Primary
+| Connotation.CTA
+>;
+
+type ListItemShape = Extract<Shape, Shape.Rounded>;
+
 /**
  * This component is an extension of [<mwc-list-item>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
  */
 @customElement('vwc-list-item')
-export class VWCListItem extends MWCListItem {}
+export class VWCListItem extends MWCListItem {
+	@property({ type: String, reflect: true })
+	connotation?: ListItemConnotation;
+
+	@property({ type: String, reflect: true })
+	shape?: ListItemShape;
+}
diff --git a/components/list/src/vwc-list.scss b/components/list/src/vwc-list.scss
index 0034e161fe..47157bc7a8 100644
--- a/components/list/src/vwc-list.scss
+++ b/components/list/src/vwc-list.scss
@@ -1,18 +1,5 @@
 @use '@vonage/vvd-typography/scss/typography' as typography;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
-@use '@vonage/vvd-foundation/scss/mixins/color-connotation' as color-connotation with (
-	$connotations-set: primary cta
-);
-
-$vvd-list-shape: --vvd-list-shape;
-$scopes: list-item check-list-item radio-list-item;
-
-@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with (
-	$variable-name: #{$vvd-list-shape}
-);
-
-@include color-connotation.connotations-main;
-@include color-connotation.connotations-main-default(primary);
 
 :host {
 	--mdc-menu-item-height: 40px;
@@ -29,26 +16,3 @@ $scopes: list-item check-list-item radio-list-item;
 		@include typography.typography-cat-shorthand('body-2');
 	}
 }
-
-@each $scope in $scopes {
-	::slotted(vwc-#{$scope}) {
-		border-radius: var(#{$vvd-list-shape});
-	}
-}
-
-::slotted(#{vwc-list-item}[activated]) {
-	--mdc-theme-text-icon-on-background: var(#{color-connotation.$vvd-color-on-connotation});
-	--mdc-theme-text-hint-on-background: var(#{color-connotation.$vvd-color-on-connotation});
-	--mdc-ripple-color: var(#{color-connotation.$vvd-color-on-connotation});
-
-	--vvd-list-item-activated-color: var(#{color-connotation.$vvd-color-on-connotation});
-	--vvd-list-item-activated-ripple-background: var(#{color-connotation.$vvd-color-connotation});
-	--vvd-list-item-activated-ripple-color: var(#{color-connotation.$vvd-color-connotation});
-}
-
-@include shape-mixins.shape(
-	$shapes: (
-		rounded: 6px,
-	),
-	$default: ''
-);
diff --git a/components/list/src/vwc-list.ts b/components/list/src/vwc-list.ts
index f0ae5412fa..f3524bba9a 100644
--- a/components/list/src/vwc-list.ts
+++ b/components/list/src/vwc-list.ts
@@ -1,11 +1,10 @@
 import '@vonage/vvd-core';
 import { debounced } from '@vonage/vvd-foundation/general-utils';
-import { customElement, property } from 'lit-element';
+import { customElement } from 'lit-element';
 import { List as MWCList } from '@material/mwc-list/mwc-list';
 import { style as vwcListStyle } from './vwc-list.css.js';
 import { style as mwcListStyle } from '@material/mwc-list/mwc-list-css.js';
 import { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css';
-import { Connotation, Shape } from '@vonage/vvd-foundation/constants';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -17,14 +16,6 @@ declare global {
 // @ts-ignore
 MWCList.styles = [styleCoupling, mwcListStyle, vwcListStyle];
 
-type ListItemConnotation = Extract<
-Connotation,
-| Connotation.Primary
-| Connotation.CTA
->;
-
-type ListItemShape = Extract<Shape, Shape.Rounded>;
-
 /**
  * This component is an extension of [<mwc-list>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
  */
@@ -34,10 +25,4 @@ export class VWCList extends MWCList {
 	layout() {
 		super.layout();
 	}
-
-	@property({ type: String, reflect: true })
-	connotation?: ListItemConnotation;
-
-	@property({ type: String, reflect: true })
-	shape?: ListItemShape;
 }
diff --git a/components/list/stories/arg-types-list-item.js b/components/list/stories/arg-types-list-item.js
index 9b1961a479..bb7bcbc805 100644
--- a/components/list/stories/arg-types-list-item.js
+++ b/components/list/stories/arg-types-list-item.js
@@ -1,4 +1,20 @@
+import { Connotation, Shape } from '@vonage/vvd-foundation/constants';
+
 export const argTypes = {
+	connotation: {
+		control: {
+			type: 'select',
+			options: Object.values(Connotation).filter(c => [
+				Connotation.Primary, Connotation.CTA
+			].includes(c)),
+		}
+	},
+	shape: {
+		control: {
+			type: 'select',
+			options: [...Object.values(Shape).filter(s => [Shape.Rounded].includes(s)), undefined]
+		}
+	},
 	twoline: {
 		control: {
 			type: 'inline-radio',
diff --git a/components/list/stories/arg-types-list.js b/components/list/stories/arg-types-list.js
index 6de050cf4b..e6cf735ea8 100644
--- a/components/list/stories/arg-types-list.js
+++ b/components/list/stories/arg-types-list.js
@@ -1,20 +1,4 @@
-import { Connotation, Shape } from '@vonage/vvd-foundation/constants';
-
 export const argTypes = {
-	connotation: {
-		control: {
-			type: 'select',
-			options: Object.values(Connotation).filter(c => [
-				Connotation.Primary, Connotation.CTA
-			].includes(c)),
-		}
-	},
-	shape: {
-		control: {
-			type: 'select',
-			options: [...Object.values(Shape).filter(s => [Shape.Rounded].includes(s)), undefined]
-		}
-	},
 	activatable: {
 		control: {
 			type: 'inline-radio',
diff --git a/components/list/stories/list-basic.stories.js b/components/list/stories/list-basic.stories.js
index bfe9586829..ba1e769c06 100644
--- a/components/list/stories/list-basic.stories.js
+++ b/components/list/stories/list-basic.stories.js
@@ -69,21 +69,3 @@ export const metaIcon = args => html`
 		</vwc-list-item>
 	</vwc-list>
 `;
-
-export const Shape = renderList.bind({});
-Shape.args = { shape: 'rounded' };
-
-export const Connotation = args => html`
-	<style>
-		vwc-list {
-			width: 240px;
-		}
-	</style>
-
-	<vwc-list ...=${spread(args)}>
-		<vwc-list-item>Item 0</vwc-list-item>
-		<vwc-list-item activated>Item 1 (Activated)</vwc-list-item>
-		<vwc-list-item>Item 2</vwc-list-item>
-	</vwc-list>
-`;
-Connotation.args = { connotation: 'cta', shape: 'rounded' };
diff --git a/components/list/stories/list-item.stories.js b/components/list/stories/list-item.stories.js
index d08d394087..a7c53e78ed 100644
--- a/components/list/stories/list-item.stories.js
+++ b/components/list/stories/list-item.stories.js
@@ -41,7 +41,10 @@ const Template = args => html`
 export const Basic = Template.bind({});
 
 export const Activated = Template.bind({});
-Activated.args = { activated: '', graphic: 'icon' };
+Activated.args = { activated: '', shape: 'rounded', graphic: 'icon' };
+
+export const Connotation = Template.bind({});
+Connotation.args = { connotation: 'cta', activated: '', shape: 'rounded', graphic: 'icon' };
 
 export const TwoLine = Template.bind({});
 TwoLine.args = { twoline: '', hasMeta: '' };
diff --git a/components/list/test/list.test.js b/components/list/test/list.test.js
index 285a316f92..e2aa71e771 100644
--- a/components/list/test/list.test.js
+++ b/components/list/test/list.test.js
@@ -75,57 +75,4 @@ describe('list', () => {
 			}
 		}
 	});
-
-	describe('connotation', () => {
-		let list,
-			ripple;
-		beforeEach(async () => {
-			[list] = addElement(
-				textToDomToParent(`
-					<vwc-list>
-						<vwc-list-item activated>Item 1</vwc-list-item>
-					</vwc-list>
-				`)
-			);
-			await waitNextTask();
-			const listItem = list.querySelector('vwc-list-item');
-			ripple = listItem.shadowRoot.querySelector('.fake-activated-ripple');
-		});
-
-		it('should proxy primary connotation to activated list-item by default', async () => {
-			assertComputedStyle(ripple, { backgroundColor: 'rgb(0,0,0)' }, ':before');
-		});
-
-		it('should proxy cta connotation to activated list-item when connotation set to cta', async () => {
-			list.connotation = 'cta';
-			await waitNextTask();
-			assertComputedStyle(ripple, { backgroundColor: 'rgb(153,65,255)' }, ':before');
-		});
-	});
-
-	describe('shape', () => {
-		let list,
-			listItem;
-		beforeEach(async () => {
-			[list] = addElement(
-				textToDomToParent(`
-					<vwc-list>
-						<vwc-list-item>Item 1</vwc-list-item>
-					</vwc-list>
-				`)
-			);
-			await waitNextTask();
-			listItem = list.querySelector('vwc-list-item');
-		});
-
-		it('should not proxy shape to list-item by default', async () => {
-			assertComputedStyle(listItem, borderRadiusStyles('0px'));
-		});
-
-		it('should proxy rounded shape to list-item when shape set to rounded', async () => {
-			list.shape = 'rounded';
-			await waitNextTask();
-			assertComputedStyle(listItem, shapeStyles('rounded'));
-		});
-	});
 });

From 483105053fb12faa5351ec21df00e93f35869ba2 Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Tue, 25 May 2021 21:39:50 +1200
Subject: [PATCH 13/17] fix list test imports

---
 components/list/stories/list-basic.stories.js | 6 ------
 components/list/test/list-item.test.js        | 1 +
 components/list/test/list.test.js             | 1 -
 3 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/components/list/stories/list-basic.stories.js b/components/list/stories/list-basic.stories.js
index ba1e769c06..e55f227ad3 100644
--- a/components/list/stories/list-basic.stories.js
+++ b/components/list/stories/list-basic.stories.js
@@ -13,12 +13,6 @@ export default {
 };
 
 const renderList = args => html`
-	<style>
-		vwc-list {
-			width: 240px;
-		}
-	</style>
-
 	<vwc-list ...=${spread(args)}>
 		<vwc-list-item>Item 0</vwc-list-item>
 		<vwc-list-item>Item 1</vwc-list-item>
diff --git a/components/list/test/list-item.test.js b/components/list/test/list-item.test.js
index b450c319ac..378f758325 100644
--- a/components/list/test/list-item.test.js
+++ b/components/list/test/list-item.test.js
@@ -5,6 +5,7 @@ import {
 	waitNextTask,
 	isolatedElementsCreation,
 } from '../../../test/test-helpers.js';
+import { borderRadiusStyles, shapeStyles } from '../../../test/style-utils';
 import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
 import {
 	assertListItemDimensions,
diff --git a/components/list/test/list.test.js b/components/list/test/list.test.js
index e2aa71e771..09da4e5bd9 100644
--- a/components/list/test/list.test.js
+++ b/components/list/test/list.test.js
@@ -6,7 +6,6 @@ import {
 	textToDomToParent,
 	waitNextTask,
 } from '../../../test/test-helpers';
-import { borderRadiusStyles, shapeStyles } from '../../../test/style-utils';
 import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
 
 chai.use(chaiDomDiff);

From 2d192e760e3d64c3b1229f5e7fe3a9ec36001b96 Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Tue, 25 May 2021 21:44:06 +1200
Subject: [PATCH 14/17] add list-item story

---
 components/list/stories/list-item.stories.js | 3 +++
 components/list/test/list-item.test.js       | 1 +
 2 files changed, 4 insertions(+)

diff --git a/components/list/stories/list-item.stories.js b/components/list/stories/list-item.stories.js
index a7c53e78ed..489f541980 100644
--- a/components/list/stories/list-item.stories.js
+++ b/components/list/stories/list-item.stories.js
@@ -40,6 +40,9 @@ const Template = args => html`
 
 export const Basic = Template.bind({});
 
+export const Shape = Template.bind({});
+Shape.args = { shape: 'rounded' };
+
 export const Activated = Template.bind({});
 Activated.args = { activated: '', shape: 'rounded', graphic: 'icon' };
 
diff --git a/components/list/test/list-item.test.js b/components/list/test/list-item.test.js
index 378f758325..ee197e1691 100644
--- a/components/list/test/list-item.test.js
+++ b/components/list/test/list-item.test.js
@@ -1,6 +1,7 @@
 import '@vonage/vwc-list';
 import '@vonage/vwc-list/vwc-list-item';
 import {
+	assertComputedStyle,
 	textToDomToParent,
 	waitNextTask,
 	isolatedElementsCreation,

From 74e80651b9784562a28c477d7e06711e59f6ae58 Mon Sep 17 00:00:00 2001
From: joelgraham93 <j.r.g@hotmail.com>
Date: Tue, 25 May 2021 21:52:01 +1200
Subject: [PATCH 15/17] add text-parts import

---
 components/list/src/vwc-list-item.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/list/src/vwc-list-item.scss b/components/list/src/vwc-list-item.scss
index 39887814fd..ca8704ed2e 100644
--- a/components/list/src/vwc-list-item.scss
+++ b/components/list/src/vwc-list-item.scss
@@ -1,3 +1,4 @@
+@forward './vwc-list-text-parts.scss';
 @use '@vonage/vvd-typography/scss/typography' as typography;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 @use '@vonage/vvd-style-coupling/scss/vvd-formfield' as vvd-formfield;

From 6e17a730256ccd12f809e3e37a3142f81f614da3 Mon Sep 17 00:00:00 2001
From: yinonov <yinon@hotmail.com>
Date: Tue, 25 May 2021 13:50:49 +0300
Subject: [PATCH 16/17] activated story update

---
 .../list/stories/arg-types-list-item.js       | 16 +++++++++
 components/list/stories/list-item.stories.js  | 34 ++++++++++++++++---
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/components/list/stories/arg-types-list-item.js b/components/list/stories/arg-types-list-item.js
index 9b1961a479..b7ffc5e0e5 100644
--- a/components/list/stories/arg-types-list-item.js
+++ b/components/list/stories/arg-types-list-item.js
@@ -1,4 +1,20 @@
+import { Connotation, Shape } from '@vonage/vvd-foundation/constants';
+
 export const argTypes = {
+	connotation: {
+		control: {
+			type: 'select',
+			options: [...Object.values(Connotation).filter(c => [
+				Connotation.Primary, Connotation.CTA
+			].includes(c)), undefined],
+		}
+	},
+	shape: {
+		control: {
+			type: 'select',
+			options: [...Object.values(Shape).filter(s => [Shape.Rounded].includes(s)), undefined]
+		}
+	},
 	twoline: {
 		control: {
 			type: 'inline-radio',
diff --git a/components/list/stories/list-item.stories.js b/components/list/stories/list-item.stories.js
index d08d394087..7f3274611e 100644
--- a/components/list/stories/list-item.stories.js
+++ b/components/list/stories/list-item.stories.js
@@ -8,7 +8,7 @@ export default {
 	title: 'Components/List (list item)',
 	component: 'vwc-list-item',
 	argTypes
-}
+};
 
 const Template = args => html`
 	<style>
@@ -38,10 +38,8 @@ const Template = args => html`
 		</vwc-list-item>
 	</vwc-list>`;
 
-export const Basic = Template.bind({});
 
-export const Activated = Template.bind({});
-Activated.args = { activated: '', graphic: 'icon' };
+export const Basic = Template.bind({});
 
 export const TwoLine = Template.bind({});
 TwoLine.args = { twoline: '', hasMeta: '' };
@@ -53,4 +51,30 @@ export const MetaIcon = Template.bind({});
 MetaIcon.args = { hasMeta: '' };
 
 export const Icon = Template.bind({});
-Icon.args = { graphic: 'icon' };
\ No newline at end of file
+Icon.args = { graphic: 'icon' };
+
+const ActivatedTemplate = args => html`
+	<style>
+	vwc-list {
+		width: 240px;
+	}
+	</style>
+
+	<vwc-list>
+		<vwc-list-item graphic="icon">
+			Item A
+			<vwc-icon slot="graphic" type="chat" size="small"></vwc-icon>
+		</vwc-list-item>
+		<vwc-list-item ...=${spread(args)}>
+			Item B
+			<vwc-icon slot="graphic" type="chat" size="small"></vwc-icon>
+		</vwc-list-item>
+		<vwc-list-item graphic="icon">
+			Item C
+			<vwc-icon slot="graphic" type="chat" size="small"></vwc-icon>
+		</vwc-list-item>
+	</vwc-list>`;
+
+
+export const Activated = ActivatedTemplate.bind({});
+Activated.args = { activated: '' };

From 2f64a2ef95c0ab758fc1d63d13ba5f9a490de7e2 Mon Sep 17 00:00:00 2001
From: yinonov <yinon@hotmail.com>
Date: Tue, 25 May 2021 13:53:58 +0300
Subject: [PATCH 17/17] lint story args

---
 components/list/stories/arg-types-list-item.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/list/stories/arg-types-list-item.js b/components/list/stories/arg-types-list-item.js
index c987c5f333..91388aed82 100644
--- a/components/list/stories/arg-types-list-item.js
+++ b/components/list/stories/arg-types-list-item.js
@@ -58,4 +58,4 @@ export const argTypes = {
 		}
 	},
 	ripple: { table: { disable: true } }
-}
+};