From 01692abd3c7f179a48cbebbcb54efab7d1fa6857 Mon Sep 17 00:00:00 2001
From: Hardik Pithva <hardikpthv@gmail.com>
Date: Fri, 19 Jun 2020 18:29:47 +0200
Subject: [PATCH] feat(collapsible): add collapsible component

---
 README.md                                     |   1 +
 packages/collapsible/CHANGELOG.md             |   4 +
 packages/collapsible/README.md                | 221 ++++++++++
 .../collapsible/demo/CustomCollapsible.js     | 111 +++++
 .../demo/applyDemoCollapsibleStyles.js        |  37 ++
 .../collapsible/demo/custom-collapsible.js    |   3 +
 packages/collapsible/index.js                 |   1 +
 packages/collapsible/lion-collapsible.js      |   3 +
 packages/collapsible/package.json             |  46 +++
 packages/collapsible/src/LionCollapsible.js   | 166 ++++++++
 .../collapsible/test/lion-collapsible.test.js | 123 ++++++
 yarn.lock                                     | 378 ++++++++----------
 12 files changed, 888 insertions(+), 206 deletions(-)
 create mode 100644 packages/collapsible/CHANGELOG.md
 create mode 100644 packages/collapsible/README.md
 create mode 100644 packages/collapsible/demo/CustomCollapsible.js
 create mode 100644 packages/collapsible/demo/applyDemoCollapsibleStyles.js
 create mode 100644 packages/collapsible/demo/custom-collapsible.js
 create mode 100644 packages/collapsible/index.js
 create mode 100644 packages/collapsible/lion-collapsible.js
 create mode 100644 packages/collapsible/package.json
 create mode 100644 packages/collapsible/src/LionCollapsible.js
 create mode 100644 packages/collapsible/test/lion-collapsible.test.js

diff --git a/README.md b/README.md
index 49da9a573..d598acbfe 100644
--- a/README.md
+++ b/README.md
@@ -74,6 +74,7 @@ The accessibility column indicates whether the functionality is accessible in it
 | [core](https://lion-web-components.netlify.app/?path=/docs/others-system-core--page)                          | [![core](https://img.shields.io/npm/v/@lion/core.svg)](https://www.npmjs.com/package/@lion/core)                                        | Core System (exports LitElement, lit-html)                                                     | n/a                        |
 | [ajax](https://lion-web-components.netlify.app/?path=/docs/others-ajax--performing-get-requests)              | [![ajax](https://img.shields.io/npm/v/@lion/ajax.svg)](https://www.npmjs.com/package/@lion/ajax)                                        | Fetching data via ajax request                                                                 | n/a                        |
 | [calendar](https://lion-web-components.netlify.app/?path=/docs/others-calendar--main)                         | [![calendar](https://img.shields.io/npm/v/@lion/calendar.svg)](https://www.npmjs.com/package/@lion/calendar)                            | Standalone calendar                                                                            | [#195][i195], [#194][i194] |
+| [collapsible](https://lion-web-components.netlify.app/?path=/docs/others-collapsible--main)                   | [![collapsible](https://img.shields.io/npm/v/@lion/collapsible.svg)](https://www.npmjs.com/package/@lion/collapsible)                   | Combination of a button and a chunk of extra content                                           |                            |
 | **-- [Helpers](https://lion-web-components.netlify.app/?path=/docs/helpers-intro--page) --**                  | [![helpers](https://img.shields.io/npm/v/@lion/helpers.svg)](https://www.npmjs.com/package/@lion/helpers)                               | Helpers to make your and your life easier                                                      |                            |
 | [sb-action-logger](https://lion-web-components.netlify.app/?path=/docs/helpers-storybook-action-logger--main) |                                                                                                                                         | Storybook action logger                                                                        |
 
diff --git a/packages/collapsible/CHANGELOG.md b/packages/collapsible/CHANGELOG.md
new file mode 100644
index 000000000..e4d87c4d4
--- /dev/null
+++ b/packages/collapsible/CHANGELOG.md
@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
diff --git a/packages/collapsible/README.md b/packages/collapsible/README.md
new file mode 100644
index 000000000..89d306321
--- /dev/null
+++ b/packages/collapsible/README.md
@@ -0,0 +1,221 @@
+# Collapsible
+
+`lion-collapsible` is a combination of a button (the invoker), a chunk of 'extra content', and an animation that is used to disclose the extra content. There are two slots available respectively; `invoker` to specify collapsible invoker and `content` for the extra content of the collapsible.
+
+```js script
+import { html } from 'lit-html';
+
+import './lion-collapsible.js';
+import './demo/custom-collapsible.js';
+import './demo/applyDemoCollapsibleStyles.js';
+
+export default {
+  title: 'Others/Collapsible',
+};
+```
+
+```js preview-story
+export const main = () => html`
+  <lion-collapsible>
+    <button slot="invoker">More about cars</button>
+    <div slot="content">
+      Most definitions of cars say that they run primarily on roads, seat one to eight people, have
+      four tires, and mainly transport people rather than goods.
+    </div>
+  </lion-collapsible>
+`;
+```
+
+## Features
+
+- Use `opened` or `toggle()` to render default open
+- `invoker` slot can be custom template e.g. `lion-button` or native `button` with custom styling
+- Observe the state with the help of `@opened-changed` event
+- `show()` and `hide()` are helper methods to hide or show the content from outside
+
+## How to use
+
+### Installation
+
+```bash
+npm i --save @lion/collapsible
+```
+
+```js
+import { LionCollapsible } from '@lion/collapsible';
+// or
+import '@lion/collapsible/lion-collapsible.js';
+```
+
+### Usage
+
+```html
+<lion-collapsible>
+  <button slot="invoker">Invoker Text</button>
+  <div slot="content">
+    Extra content
+  </div>
+</lion-collapsible>
+```
+
+### Examples
+
+#### Default open
+
+Add the `opened` attribute to keep the component default open.
+
+```js preview-story
+export const defaultOpen = () => html`
+  <lion-collapsible opened>
+    <button slot="invoker">More about cars</button>
+    <div slot="content">
+      Most definitions of cars say that they run primarily on roads, seat one to eight people, have
+      four tires, and mainly transport people rather than goods.
+    </div>
+  </lion-collapsible>
+`;
+```
+
+#### Methods
+
+There are the following methods available to control the extra content for the collapsible.
+
+- `toggle()`: toggle the extra content
+- `show()`: show the extra content
+- `hide()`: hide the extra content
+
+```js preview-story
+export const methods = () => html`
+  <lion-collapsible id="car-collapsible">
+    <button slot="invoker">More about cars</button>
+    <div slot="content">
+      Most definitions of cars say that they run primarily on roads, seat one to eight people, have
+      four tires, and mainly transport people rather than goods.
+    </div>
+  </lion-collapsible>
+  <section style="margin-top:16px">
+    <button @click=${() => document.querySelector('#car-collapsible').toggle()}>
+      Toggle content
+    </button>
+    <button @click=${() => document.querySelector('#car-collapsible').show()}>
+      Show content
+    </button>
+    <button @click=${() => document.querySelector('#car-collapsible').hide()}>
+      Hide content
+    </button>
+  </section>
+`;
+```
+
+#### Events
+
+`lion-collapsible` fires an event on `invoker` click to notify the component's current state. It is useful for analytics purposes or to perform some actions while expanding and collapsing the component.
+
+- `@opened-changed`: triggers when collapsible either gets opened or closed
+
+```js preview-story
+export const events = () => html`
+  <div class="demo-custom-collapsible-state-container">
+    <strong id="collapsible-state"></strong>
+  </div>
+  <lion-collapsible
+    @opened-changed=${e => {
+      const collapsibleState = document.getElementById('collapsible-state');
+      collapsibleState.innerText = `Opened: ${e.target.opened}`;
+    }}
+  >
+    <button slot="invoker">More about cars</button>
+    <div slot="content">
+      Most definitions of cars say that they run primarily on roads, seat one to eight people, have
+      four tires, and mainly transport people rather than goods.
+    </div>
+  </lion-collapsible>
+`;
+```
+
+#### Custom Invoker Template
+
+A custom template can be specified to the `invoker` slot. It can be any button or custom component which mimics the button behavior for better accessibility support. In the below example, `lion-button` and native `button` with styling is used as a collapsible invoker.
+
+```js preview-story
+export const customInvokerTemplate = () => html`
+  <lion-collapsible>
+    <button class="demo-custom-collapsible-invoker" slot="invoker">
+      MORE ABOUT CARS
+    </button>
+    <div slot="content">
+      Most definitions of cars say that they run primarily on roads, seat one to eight people, have
+      four tires, and mainly transport people rather than goods.
+    </div>
+  </lion-collapsible>
+  <lion-collapsible style="margin-top:16px;">
+    <lion-button slot="invoker">More about cars</lion-button>
+    <div slot="content">
+      Most definitions of cars say that they run primarily on roads, seat one to eight people, have
+      four tires, and mainly transport people rather than goods.
+    </div>
+  </lion-collapsible>
+`;
+```
+
+#### Extended collapsible with animation
+
+`LionCollapsible` can easily be extended to add more features in the component, for example, animation.
+
+```js preview-story
+export const customAnimation = () => html`
+  <div class="demo-custom-collapsible-container">
+    <div class="demo-custom-collapsible-body">
+      A motorcycle, often called a motorbike, bike, or cycle, is a two- or three-wheeled motor
+      vehicle.
+    </div>
+    <custom-collapsible>
+      <button class="demo-custom-collapsible-invoker" slot="invoker">
+        MORE ABOUT MOTORCYCLES
+      </button>
+      <div slot="content">
+        Motorcycle design varies greatly to suit a range of different purposes: long distance
+        travel, commuting, cruising, sport including racing, and off-road riding. Motorcycling is
+        riding a motorcycle and related social activity such as joining a motorcycle club and
+        attending motorcycle rallies.
+      </div>
+    </custom-collapsible>
+  </div>
+  <div class="demo-custom-collapsible-container">
+    <div class="demo-custom-collapsible-body">
+      A car (or automobile) is a wheeled motor vehicle used for transportation.
+    </div>
+    <custom-collapsible opened>
+      <button class="demo-custom-collapsible-invoker" slot="invoker">
+        MORE ABOUT CARS
+      </button>
+      <div slot="content">
+        Most definitions of cars say that they run primarily on roads, seat one to eight people,
+        have four tires, and mainly transport people rather than goods.
+      </div>
+    </custom-collapsible>
+  </div>
+`;
+```
+
+Use `_showAnimation` and `_hideAnimation` methods to customize open and close behavior. Check the full example for the `custom-collapsible` [here](https://github.com/ing-bank/lion/blob/master/packages/collapsible/demo/CustomCollapsible.js).
+
+```js
+_showAnimation({ contentNode }) {
+    const expectedHeight = await this.__calculateHeight(contentNode);
+    contentNode.style.setProperty('opacity', '1');
+    contentNode.style.setProperty('padding', '12px 0');
+    contentNode.style.setProperty('max-height', '0px');
+    await new Promise(resolve => requestAnimationFrame(() => resolve()));
+    contentNode.style.setProperty('max-height', expectedHeight);
+    await this._waitForTransition({ contentNode });
+}
+
+_hideAnimation({ contentNode }) {
+    if (this._contentHeight === '0px') {
+      return;
+    }
+    ['opacity', 'padding', 'max-height'].map(prop => contentNode.style.setProperty(prop, 0));
+    await this._waitForTransition({ contentNode });
+}
+```
diff --git a/packages/collapsible/demo/CustomCollapsible.js b/packages/collapsible/demo/CustomCollapsible.js
new file mode 100644
index 000000000..ca57ea5d1
--- /dev/null
+++ b/packages/collapsible/demo/CustomCollapsible.js
@@ -0,0 +1,111 @@
+import { LionCollapsible } from '../index.js';
+
+const EVENT = {
+  TRANSITION_END: 'transitionend',
+  TRANSITION_START: 'transitionstart',
+};
+/**
+ * `CustomCollapsible` is a class for custom collapsible element (`<custom-collapsible>` web component).
+ *
+ * @customElement custom-collapsible
+ * @extends LionCollapsible
+ */
+export class CustomCollapsible extends LionCollapsible {
+  static get properties() {
+    return {
+      transitioning: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.transitioning = false;
+  }
+
+  connectedCallback() {
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+    this._contentNode.style.setProperty(
+      'transition',
+      'max-height 0.35s, padding 0.35s, opacity 0.35s',
+    );
+    if (this.opened) {
+      this._contentNode.style.setProperty('padding', '12px 0');
+    }
+  }
+
+  /**
+   * Wait until transition is finished.
+   * @override
+   */
+  toggle() {
+    if (!this.transitioning) {
+      super.toggle();
+    }
+  }
+
+  /**
+   * Trigger show animation and wait for transition to be finished.
+   * @param {Object} options - element node and its options
+   * @override
+   */
+  async _showAnimation({ contentNode }) {
+    const expectedHeight = await this.__calculateHeight(contentNode);
+    contentNode.style.setProperty('opacity', '1');
+    contentNode.style.setProperty('padding', '12px 0');
+    contentNode.style.setProperty('max-height', '0px');
+    await new Promise(resolve => requestAnimationFrame(() => resolve()));
+    contentNode.style.setProperty('max-height', expectedHeight);
+    await this._waitForTransition({ contentNode });
+  }
+
+  /**
+   * Trigger hide animation and wait for transition to be finished.
+   * @param {Object} options - element node and its options
+   * @override
+   */
+  async _hideAnimation({ contentNode }) {
+    if (this._contentHeight === '0px') {
+      return;
+    }
+    ['opacity', 'padding', 'max-height'].map(prop => contentNode.style.setProperty(prop, 0));
+    await this._waitForTransition({ contentNode });
+  }
+
+  /**
+   *  Wait until the transition event is finished.
+   * @param {Object} options - element node and its options
+   * @returns {Promise} transition event
+   */
+  _waitForTransition({ contentNode }) {
+    return new Promise(resolve => {
+      const transitionStarted = () => {
+        contentNode.removeEventListener(EVENT.TRANSITION_START, transitionStarted);
+        this.transitioning = true;
+      };
+      contentNode.addEventListener(EVENT.TRANSITION_START, transitionStarted);
+
+      const transitionEnded = () => {
+        contentNode.removeEventListener(EVENT.TRANSITION_END, transitionEnded);
+        this.transitioning = false;
+        resolve();
+      };
+      contentNode.addEventListener(EVENT.TRANSITION_END, transitionEnded);
+    });
+  }
+
+  /**
+   * Calculate total content height after collapsible opens
+   * @param {Object} contentNode content node
+   * @private
+   */
+  async __calculateHeight(contentNode) {
+    contentNode.style.setProperty('max-height', '');
+    await new Promise(resolve => requestAnimationFrame(() => resolve()));
+    return this._contentHeight; // Expected height i.e. actual size once collapsed after animation
+  }
+}
diff --git a/packages/collapsible/demo/applyDemoCollapsibleStyles.js b/packages/collapsible/demo/applyDemoCollapsibleStyles.js
new file mode 100644
index 000000000..d34334d2c
--- /dev/null
+++ b/packages/collapsible/demo/applyDemoCollapsibleStyles.js
@@ -0,0 +1,37 @@
+import { css } from '@lion/core';
+
+const applyDemoCollapsibleStyles = () => {
+  const demoCollapsibleStyles = css`
+    .demo-custom-collapsible-container {
+      padding: 16px;
+      margin: 16px;
+      border-radius: 4px;
+      width: 400px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    }
+
+    .demo-custom-collapsible-body {
+      padding: 12px 0px;
+    }
+
+    .demo-custom-collapsible-invoker {
+      border-width: 0;
+      border-radius: 2px;
+      padding: 12px 24px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      font-weight: bold;
+      color: #3f51b5;
+    }
+
+    .demo-custom-collapsible-state-container {
+      padding: 12px 0;
+    }
+  `;
+
+  const styleTag = document.createElement('style');
+  styleTag.setAttribute('data-demo-collapsible', '');
+  styleTag.textContent = demoCollapsibleStyles.cssText;
+  document.head.appendChild(styleTag);
+};
+
+applyDemoCollapsibleStyles();
diff --git a/packages/collapsible/demo/custom-collapsible.js b/packages/collapsible/demo/custom-collapsible.js
new file mode 100644
index 000000000..f4615090e
--- /dev/null
+++ b/packages/collapsible/demo/custom-collapsible.js
@@ -0,0 +1,3 @@
+import { CustomCollapsible } from './CustomCollapsible.js';
+
+customElements.define('custom-collapsible', CustomCollapsible);
diff --git a/packages/collapsible/index.js b/packages/collapsible/index.js
new file mode 100644
index 000000000..bdfefc47b
--- /dev/null
+++ b/packages/collapsible/index.js
@@ -0,0 +1 @@
+export { LionCollapsible } from './src/LionCollapsible.js';
diff --git a/packages/collapsible/lion-collapsible.js b/packages/collapsible/lion-collapsible.js
new file mode 100644
index 000000000..7b9321920
--- /dev/null
+++ b/packages/collapsible/lion-collapsible.js
@@ -0,0 +1,3 @@
+import { LionCollapsible } from './src/LionCollapsible.js';
+
+customElements.define('lion-collapsible', LionCollapsible);
diff --git a/packages/collapsible/package.json b/packages/collapsible/package.json
new file mode 100644
index 000000000..2cb0b16ab
--- /dev/null
+++ b/packages/collapsible/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "@lion/collapsible",
+  "version": "0.0.0",
+  "description": "This component is a combination of a button (the invoker), a chunk of extra content.",
+  "license": "MIT",
+  "author": "ing-bank",
+  "homepage": "https://github.com/ing-bank/lion/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ing-bank/lion.git",
+    "directory": "packages/collapsible"
+  },
+  "main": "index.js",
+  "module": "index.js",
+  "files": [
+    "*.d.ts",
+    "*.js",
+    "docs",
+    "src",
+    "test",
+    "test-helpers",
+    "translations",
+    "types"
+  ],
+  "scripts": {
+    "prepublishOnly": "../../scripts/npm-prepublish.js",
+    "start": "cd ../../ && yarn dev-server --open packages/collapsible/README.md",
+    "test": "cd ../../ && yarn test:browser --grep \"packages/collapsible/test/**/*.test.js\"",
+    "test:watch": "cd ../../ && yarn test:browser:watch --grep \"packages/collapsible/test/**/*.test.js\""
+  },
+  "sideEffects": [
+    "lion-collapsible.js"
+  ],
+  "dependencies": {
+    "@lion/core": "0.8.0"
+  },
+  "keywords": [
+    "collapsible",
+    "expandable",
+    "lion",
+    "web-components"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/collapsible/src/LionCollapsible.js b/packages/collapsible/src/LionCollapsible.js
new file mode 100644
index 000000000..748e34a2b
--- /dev/null
+++ b/packages/collapsible/src/LionCollapsible.js
@@ -0,0 +1,166 @@
+import { LitElement, html, css } from '@lion/core';
+/**
+ * Generate random UUID
+ */
+const uuid = () => Math.random().toString(36).substr(2, 10);
+/**
+ * `LionCollapsible` is a class for custom collapsible element (`<lion-collapsible>` web component).
+ *
+ * @customElement lion-collapsible
+ * @extends LitElement
+ */
+export class LionCollapsible extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host ::slotted([slot='content']) {
+        overflow: hidden;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      opened: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  render() {
+    return html`
+      <slot name="invoker"></slot>
+      <slot name="content"></slot>
+    `;
+  }
+
+  constructor() {
+    super();
+    this.opened = false;
+  }
+
+  connectedCallback() {
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+    const uid = uuid();
+    this._invokerNode.addEventListener('click', this.toggle.bind(this));
+    this.__setDefaultState();
+    this._invokerNode.setAttribute('aria-expanded', this.opened);
+    this._invokerNode.setAttribute('id', `collapsible-invoker-${uid}`);
+    this._invokerNode.setAttribute('aria-controls', `collapsible-content-${uid}`);
+    this._contentNode.setAttribute('aria-labelledby', `collapsible-invoker-${uid}`);
+    this._contentNode.setAttribute('id', `collapsible-content-${uid}`);
+  }
+
+  /**
+   * Update aria labels on state change.
+   * @param {Object} changedProps - changed props
+   */
+  updated(changedProps) {
+    if (changedProps.has('opened')) {
+      this.__openedChanged();
+    }
+  }
+
+  disconnectedCallback() {
+    if (super.disconnectedCallback) {
+      super.disconnectedCallback();
+    }
+    this._invokerNode.removeEventListener('click', this.toggle);
+  }
+
+  /**
+   * Show extra content.
+   * @public
+   */
+  show() {
+    if (!this.opened) {
+      this.opened = true;
+    }
+  }
+
+  /**
+   * Hide extra content.
+   * @public
+   */
+  hide() {
+    if (this.opened) {
+      this.opened = false;
+    }
+  }
+
+  /**
+   * Toggle the current(opened/closed) state.
+   * @public
+   */
+  toggle() {
+    this.opened = !this.opened;
+    this.requestUpdate();
+  }
+
+  /**
+   * Show animation implementation in sub-classer.
+   * @protected
+   */
+  // eslint-disable-next-line class-methods-use-this, no-empty-function
+  async _showAnimation() {}
+
+  /**
+   * Hide animation implementation in sub-classer.
+   * @protected
+   */
+  // eslint-disable-next-line class-methods-use-this, no-empty-function
+  async _hideAnimation() {}
+
+  get _invokerNode() {
+    return Array.from(this.children).find(child => child.slot === 'invoker');
+  }
+
+  get _contentNode() {
+    return Array.from(this.children).find(child => child.slot === 'content');
+  }
+
+  get _contentHeight() {
+    const size = this._contentNode.getBoundingClientRect().height;
+    return `${size}px`;
+  }
+
+  /**
+   * Update content slot size and fire `opened-changed` event
+   * @private
+   */
+  __openedChanged() {
+    this.__updateContentSize();
+    this._invokerNode.setAttribute('aria-expanded', this.opened);
+    this.dispatchEvent(new CustomEvent('opened-changed'));
+  }
+
+  /**
+   * Toggle extra content visibility on state change.
+   * @private
+   */
+  async __updateContentSize() {
+    if (this.opened) {
+      this._contentNode.style.setProperty('display', '');
+      await this._showAnimation({ contentNode: this._contentNode });
+    } else {
+      await this._hideAnimation({ contentNode: this._contentNode });
+      this._contentNode.style.setProperty('display', 'none');
+    }
+  }
+
+  /**
+   * Set default state for content based on `opened` attr
+   * @private
+   */
+  __setDefaultState() {
+    if (!this.opened) {
+      this._contentNode.style.setProperty('display', 'none');
+    }
+  }
+}
diff --git a/packages/collapsible/test/lion-collapsible.test.js b/packages/collapsible/test/lion-collapsible.test.js
new file mode 100644
index 000000000..d9b04725d
--- /dev/null
+++ b/packages/collapsible/test/lion-collapsible.test.js
@@ -0,0 +1,123 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import '../lion-collapsible.js';
+
+const collapsibleTemplate = html`
+  <button slot="invoker">More about cars</button>
+  <div slot="content">
+    Most definitions of cars say that they run primarily on roads, seat one to eight people, have
+    four tires, and mainly transport people rather than goods.
+  </div>
+`;
+let isCollapsibleOpen = false;
+const collapsibleToggle = state => {
+  isCollapsibleOpen = state;
+};
+const defaultCollapsible = html` <lion-collapsible>${collapsibleTemplate}</lion-collapsible> `;
+const collapsibleWithEvents = html`
+  <lion-collapsible @opened-changed=${e => collapsibleToggle(e.target.opened)}>
+    ${collapsibleTemplate}
+  </lion-collapsible>
+`;
+
+describe('<lion-collapsible>', () => {
+  describe('Collapsible', () => {
+    it('sets opened to false by default', async () => {
+      const collapsible = await fixture(defaultCollapsible);
+      expect(collapsible.opened).to.equal(false);
+    });
+
+    it('has [opened] on current expanded invoker which serves as styling hook', async () => {
+      const collapsible = await fixture(defaultCollapsible);
+      collapsible.opened = true;
+      await collapsible.requestUpdate();
+      expect(collapsible).to.have.attribute('opened');
+    });
+
+    it('should return content node height before and after collapsing', async () => {
+      const collapsible = await fixture(defaultCollapsible);
+      expect(collapsible._contentHeight).to.equal('0px');
+      collapsible.show();
+      await collapsible.requestUpdate();
+      expect(collapsible._contentHeight).to.equal('36px');
+    });
+  });
+
+  describe('User interaction', () => {
+    it('opens a invoker on click', async () => {
+      const collapsible = await fixture(defaultCollapsible);
+      const invoker = collapsible.querySelector('[slot=invoker]');
+      invoker.dispatchEvent(new Event('click'));
+      expect(collapsible.opened).to.equal(true);
+    });
+
+    it('should toggle the content using `toggle()`', async () => {
+      const collapsible = await fixture(defaultCollapsible);
+      collapsible.toggle();
+      expect(collapsible.opened).to.equal(true);
+    });
+
+    it('should expand and collapse the content using `show()` and `hide()`', async () => {
+      const collapsible = await fixture(defaultCollapsible);
+      collapsible.show();
+      expect(collapsible.opened).to.equal(true);
+      collapsible.hide();
+      expect(collapsible.opened).to.equal(false);
+    });
+
+    it('should listen to the open and close state change', async () => {
+      const collapsible = await fixture(collapsibleWithEvents);
+      collapsible.show();
+      await collapsible.requestUpdate();
+      expect(isCollapsibleOpen).to.equal(true);
+      collapsible.hide();
+      await collapsible.requestUpdate();
+      expect(isCollapsibleOpen).to.equal(false);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('[collapsed] is a11y AXE accessible', async () => {
+      const collapsible = await fixture(defaultCollapsible);
+      expect(collapsible).to.be.accessible();
+    });
+
+    it('[expanded] is a11y AXE accessible', async () => {
+      const collapsible = await fixture(defaultCollapsible);
+      collapsible.show();
+      expect(collapsible).to.be.accessible();
+    });
+
+    describe('Invoker', () => {
+      it('links id of content items to invoker via [aria-controls]', async () => {
+        const collapsibleElement = await fixture(defaultCollapsible);
+        const invoker = collapsibleElement.querySelector('[slot=invoker]');
+        const content = collapsibleElement.querySelector('[slot=content]');
+        expect(invoker.getAttribute('aria-controls')).to.equal(content.id);
+      });
+
+      it('adds aria-expanded="false" to invoker when its content is not expanded', async () => {
+        const collapsibleElement = await fixture(defaultCollapsible);
+        const invoker = collapsibleElement.querySelector('[slot=invoker]');
+        expect(invoker).to.have.attribute('aria-expanded', 'false');
+      });
+
+      it('adds aria-expanded="true" to invoker when its content is expanded', async () => {
+        const collapsibleElement = await fixture(defaultCollapsible);
+        const invoker = collapsibleElement.querySelector('[slot=invoker]');
+        collapsibleElement.opened = true;
+        await collapsibleElement.requestUpdate();
+        expect(invoker).to.have.attribute('aria-expanded', 'true');
+      });
+    });
+
+    describe('Contents', () => {
+      it('adds aria-labelledby referring to invoker id', async () => {
+        const collapsibleElement = await fixture(defaultCollapsible);
+        const invoker = collapsibleElement.querySelector('[slot=invoker]');
+        const content = collapsibleElement.querySelector('[slot=content]');
+        expect(content).to.have.attribute('aria-labelledby', invoker.id);
+      });
+    });
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 95a164d59..3f83a5c0d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2072,34 +2072,34 @@
     lit-element "^2.2.1"
 
 "@mdx-js/mdx@^1.5.1":
-  version "1.6.13"
-  resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.13.tgz#6b2ba52e1b19131d0f99cad730a3dcd7b6cb1d02"
-  integrity sha512-xVZnzSQ/QsP6LnYnV5CC9sc92dzm0VsnFEbpDhB3ahbrCc0j/p4O5+q+OIic9H3AAYLIzoKah3Mj+wTnDpAeWg==
+  version "1.6.14"
+  resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.14.tgz#e49e2003e22bd92fe90fad7e18b478e69960acda"
+  integrity sha512-VLGd52mFL091mkFTNZkGPMJxLvb382DqYDZfiZcqYBnbZPpFIbW3GnjXiHjLxT2v9zEKWD11+wcZLKNaWt8WPQ==
   dependencies:
     "@babel/core" "7.10.5"
     "@babel/plugin-syntax-jsx" "7.10.4"
     "@babel/plugin-syntax-object-rest-spread" "7.8.3"
-    "@mdx-js/util" "1.6.13"
-    babel-plugin-apply-mdx-type-prop "1.6.13"
-    babel-plugin-extract-import-names "1.6.13"
+    "@mdx-js/util" "1.6.14"
+    babel-plugin-apply-mdx-type-prop "1.6.14"
+    babel-plugin-extract-import-names "1.6.14"
     camelcase-css "2.0.1"
     detab "2.0.3"
     hast-util-raw "6.0.0"
     lodash.uniq "4.5.0"
     mdast-util-to-hast "9.1.0"
     remark-footnotes "1.0.0"
-    remark-mdx "1.6.13"
-    remark-parse "8.0.2"
+    remark-mdx "1.6.14"
+    remark-parse "8.0.3"
     remark-squeeze-paragraphs "4.0.0"
     style-to-object "0.3.0"
     unified "9.0.0"
     unist-builder "2.0.3"
     unist-util-visit "2.0.3"
 
-"@mdx-js/util@1.6.13":
-  version "1.6.13"
-  resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.13.tgz#36e4ed697de5797c368bea0b8f503215b6967b5a"
-  integrity sha512-IZP3UDGDaaaw0AchbXDofC//f+08w8FzW8EfTL/ZJNy6nKROe5xFwxnfRo5nL06l0CRCwNDmoReAerLuFMl1jA==
+"@mdx-js/util@1.6.14":
+  version "1.6.14"
+  resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.14.tgz#e3c14aef1c721b79ca7afa4d54ed7b5817a973c7"
+  integrity sha512-JyhjH3ffP4KQuqnUSBSSF28mToGGSc2jFI0XIXSEqiN+FaPlgzOSd3U350gXi8FYQxXzEygHCOtzOIfTjFf+4w==
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
@@ -2143,12 +2143,12 @@
     "@octokit/types" "^5.0.0"
 
 "@octokit/endpoint@^6.0.1":
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-6.0.4.tgz#da3eafdee1fabd6e5b6ca311efcba26f0dd99848"
-  integrity sha512-ZJHIsvsClEE+6LaZXskDvWIqD3Ao7+2gc66pRG5Ov4MQtMvCU9wGu1TItw9aGNmRuU9x3Fei1yb+uqGaQnm0nw==
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-6.0.5.tgz#43a6adee813c5ffd2f719e20cfd14a1fee7c193a"
+  integrity sha512-70K5u6zd45ItOny6aHQAsea8HHQjlQq85yqOMe+Aj8dkhN2qSJ9T+Q3YjUjEYfPRBcuUWNgMn62DQnP/4LAIiQ==
   dependencies:
     "@octokit/types" "^5.0.0"
-    is-plain-object "^3.0.0"
+    is-plain-object "^4.0.0"
     universal-user-agent "^6.0.0"
 
 "@octokit/plugin-enterprise-rest@^6.0.1":
@@ -2195,15 +2195,15 @@
     once "^1.4.0"
 
 "@octokit/request@^5.2.0":
-  version "5.4.6"
-  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.4.6.tgz#e8cc8d4cfc654d30428ea92aaa62168fd5ead7eb"
-  integrity sha512-9r8Sn4CvqFI9LDLHl9P17EZHwj3ehwQnTpTE+LEneb0VBBqSiI/VS4rWIBfBhDrDs/aIGEGZRSB0QWAck8u+2g==
+  version "5.4.7"
+  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.4.7.tgz#fd703ee092e0463ceba49ff7a3e61cb4cf8a0fde"
+  integrity sha512-FN22xUDP0i0uF38YMbOfx6TotpcENP5W8yJM1e/LieGXn6IoRxDMnBf7tx5RKSW4xuUZ/1P04NFZy5iY3Rax1A==
   dependencies:
     "@octokit/endpoint" "^6.0.1"
     "@octokit/request-error" "^2.0.0"
     "@octokit/types" "^5.0.0"
     deprecation "^2.0.0"
-    is-plain-object "^3.0.0"
+    is-plain-object "^4.0.0"
     node-fetch "^2.3.0"
     once "^1.4.0"
     universal-user-agent "^6.0.0"
@@ -2238,16 +2238,16 @@
     "@types/node" ">= 8"
 
 "@octokit/types@^5.0.0", "@octokit/types@^5.0.1":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-5.1.0.tgz#4377a3f39edad3e60753fb5c3c310756f1ded57f"
-  integrity sha512-OFxUBgrEllAbdEmWp/wNmKIu5EuumKHG4sgy56vjZ8lXPgMhF05c76hmulfOdFHHYRpPj49ygOZJ8wgVsPecuA==
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-5.2.0.tgz#d075dc23bf293f540739250b6879e2c1be2fc20c"
+  integrity sha512-XjOk9y4m8xTLIKPe1NFxNWBdzA2/z3PFFA/bwf4EoH6oS8hM0Y46mEa4Cb+KCyj/tFDznJFahzQ0Aj3o1FYq4A==
   dependencies:
     "@types/node" ">= 8"
 
 "@open-wc/building-rollup@^1.2.1":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@open-wc/building-rollup/-/building-rollup-1.4.2.tgz#a1459f42be6ff1876681c864ff58e1f3e2fda8c0"
-  integrity sha512-9ZDCrC6RqFQBBLoEyqQI8NBD48LDE5KXL4qAnqjrEXOhsWMmHcgEgIRTN4Jl6wYyvbXOJ1bT8PckR5576gIMHw==
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@open-wc/building-rollup/-/building-rollup-1.5.0.tgz#fe8907fc22ed085e4a068ca067199feab8aeaa3c"
+  integrity sha512-I/v6Q+2TqM8ncwuw3innQqC0Y0T1CdmPX2OJaBTozOvLJz77MCF4U8nhUa2w7wTUKPsI5tg3mjeNOn5feakhig==
   dependencies:
     "@babel/core" "^7.9.0"
     "@babel/helpers" "^7.9.2"
@@ -2321,9 +2321,9 @@
   integrity sha512-1HpblP5edeENi0SKms7B+PKYdxHMBIQpaf0nAgTVsZeYgM9OJ3r9nrK/0MOUBZODAOZ1quvO3wlpuljq2hZPWA==
 
 "@open-wc/demoing-storybook@^2.0.2":
-  version "2.3.12"
-  resolved "https://registry.yarnpkg.com/@open-wc/demoing-storybook/-/demoing-storybook-2.3.12.tgz#a281fc32394ae573d3fedc8e19605c61568de44b"
-  integrity sha512-WRmVDNsmBz1XEGkUJ2k2tYO0JZZ9SkiWYDzApls1/pfm4rV8lZGYHemt/JZe9gHu2QNavXxk7rGRgYHvke8ZeA==
+  version "2.3.13"
+  resolved "https://registry.yarnpkg.com/@open-wc/demoing-storybook/-/demoing-storybook-2.3.13.tgz#d258c3d09c4fb4fd3f587d72cf40428792c72066"
+  integrity sha512-zQ8HJs4DmyStRA3rOlTYyvxvJnDCi41+xRGLVwEyRZ+/bN+rChUwUz+A+2i9qcuxmc8Fkw0cvPJtak0IwDAmkg==
   dependencies:
     "@babel/core" "^7.9.0"
     "@babel/generator" "^7.9.6"
@@ -2341,7 +2341,7 @@
     command-line-args "^5.0.2"
     command-line-usage "^6.1.0"
     deepmerge "^4.2.2"
-    es-dev-server "^1.56.1"
+    es-dev-server "^1.57.0"
     es-module-lexer "^0.3.13"
     fs-extra "^8.1.0"
     glob "^7.1.3"
@@ -2722,9 +2722,9 @@
     "@types/chai" "*"
 
 "@types/chai@*", "@types/chai@^4.1.7", "@types/chai@^4.2.11":
-  version "4.2.11"
-  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.11.tgz#d3614d6c5f500142358e6ed24e1bf16657536c50"
-  integrity sha512-t7uW6eFafjO+qJ3BIV2gGUyZs27egcNRkUdalkud+Qa3+kg//f129iuOFivHDXQ+vnU3fDXuwgv0cqMCbcE8sw==
+  version "4.2.12"
+  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.12.tgz#6160ae454cd89dae05adc3bb97997f488b608201"
+  integrity sha512-aN5IAC8QNtSUdQzxu7lGBgYAOuU1tmRU4c9dIq5OKGf/SBVjXo+ffM2wEjudAWbgpOhy60nLoAGH1xm8fpCKFQ==
 
 "@types/clean-css@*":
   version "4.2.2"
@@ -2793,9 +2793,9 @@
     "@types/node" "*"
 
 "@types/express-serve-static-core@*":
-  version "4.17.8"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.8.tgz#b8f7b714138536742da222839892e203df569d1c"
-  integrity sha512-1SJZ+R3Q/7mLkOD9ewCBDYD2k0WyZQtWYqF/2VvoNN2/uhI49J9CDN4OAm+wGMA0DbArA4ef27xl4+JwMtGggw==
+  version "4.17.9"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.9.tgz#2d7b34dcfd25ec663c25c85d76608f8b249667f1"
+  integrity sha512-DG0BYg6yO+ePW+XoDENYz8zhNGC3jDDEpComMYn7WJc4mY1Us8Rw9ax2YhJXxpyk2SF47PQAoQ0YyVT1a0bEkA==
   dependencies:
     "@types/node" "*"
     "@types/qs" "*"
@@ -2926,9 +2926,9 @@
     "@types/unist" "*"
 
 "@types/mime@*":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.2.tgz#857a118d8634c84bba7ae14088e4508490cd5da5"
-  integrity sha512-4kPlzbljFcsttWEq6aBW0OZe6BDajAmyvr2xknBG92tejQnvdGtT9+kXSZ580DqpxY9qG2xeQVF9Dq0ymUTo5Q==
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.3.tgz#c893b73721db73699943bfc3653b1deb7faa4a3a"
+  integrity sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==
 
 "@types/minimatch@*", "@types/minimatch@^3.0.3":
   version "3.0.3"
@@ -2951,9 +2951,9 @@
   integrity sha512-ZvO2tAcjmMi8V/5Z3JsyofMe3hasRcaw88cto5etSVMwVQfeivGAlEYmaQgceUSVYFofVjT+ioHsATjdWcFt1w==
 
 "@types/node@*", "@types/node@>= 8":
-  version "14.0.24"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.24.tgz#b0f86f58564fa02a28b68f8b55d4cdec42e3b9d6"
-  integrity sha512-btt/oNOiDWcSuI721MdL8VQGnjsKjlTMdrKyTcLCKeQp/n4AAMFJ961wMbp+09y8WuGPClDEv07RIItdXKIXAA==
+  version "14.0.26"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.26.tgz#22a3b8a46510da8944b67bfc27df02c34a35331c"
+  integrity sha512-W+fpe5s91FBGE0pEa0lnqGLL4USgpLgs4nokw16SrBBco/gQxuua7KnArSEOd5iaMqbbSHV10vUDkJYJJqpXKA==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
@@ -2990,9 +2990,9 @@
     "@types/node" "*"
 
 "@types/qs@*":
-  version "6.9.3"
-  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.3.tgz#b755a0934564a200d3efdf88546ec93c369abd03"
-  integrity sha512-7s9EQWupR1fTc2pSMtXRQ9w9gLOcrJn+h7HOXw4evxyvVqMi4f+q7d2tnFe3ng3SNHjtK+0EzGMGFUQX4/AQRA==
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.4.tgz#a59e851c1ba16c0513ea123830dd639a0a15cb6a"
+  integrity sha512-+wYo+L6ZF6BMoEjtf8zB2esQsqdV6WsjRK/GP9WOgLPrq87PbNWgIxS76dS5uvl/QXtHGakZmwTznIfcPXcKlQ==
 
 "@types/range-parser@*":
   version "1.2.3"
@@ -3097,32 +3097,17 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@web/config-loader@^0.0.2":
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/@web/config-loader/-/config-loader-0.0.2.tgz#83dd0682fc61ac070bfd985c78ddfe2670ecca01"
-  integrity sha512-KAajJHkVy+KXS2zfQCDMCR1OYzAk7hSQw5Y7I3tpR8n9EZmRN5sJYNJaKLF78M657AMN/I5nh4bsZMWI9yttag==
-
-"@web/dev-server-core@^0.1.1":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@web/dev-server-core/-/dev-server-core-0.1.4.tgz#e6b0994aeb95832e6982639c7b50622d86201f45"
-  integrity sha512-edVe/fJVT4CMt2Hcox3p0IeoEux1W4yl5MrqYsvMUDzEjKX9hAhFvuPEuXn7QrI1H7y3fwgmTmIitlQgo2Ws1w==
+"@web/config-loader@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@web/config-loader/-/config-loader-0.0.3.tgz#812875b98d3f38d1e21d293bb4fbf7358243e328"
+  integrity sha512-pM3Y2ohK2xvVMsZs5tgyIe5kos7L3FrTYBlNotBgjMu+QXNqLnOmz0omYLDj91j75fksmVc6JsTOgFAUyVvGrw==
   dependencies:
-    chokidar "^3.4.0"
-    clone "^2.1.2"
-    es-module-lexer "^0.3.24"
-    is-stream "^2.0.0"
-    isbinaryfile "^4.0.6"
-    koa "^2.13.0"
-    koa-etag "^3.0.0"
-    koa-static "^5.0.0"
-    lru-cache "^5.1.1"
-    mime-types "^2.1.27"
-    parse5 "^6.0.0"
+    semver "^7.3.2"
 
-"@web/dev-server-core@^0.1.5":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@web/dev-server-core/-/dev-server-core-0.1.5.tgz#a46fdb671551283c569fdf493836e8d605240e1b"
-  integrity sha512-yQ/8jX+ymF22yDNnkDihugFg5KJlzV/ilZk8ASuZEy3cOHX6rMIgikHupvq1ij7HtZpR8YmsyrDJMhL4UKinJQ==
+"@web/dev-server-core@^0.1.1", "@web/dev-server-core@^0.1.5":
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/@web/dev-server-core/-/dev-server-core-0.1.8.tgz#4a2e070d02e3589c6f063d1c060fa766a24bda30"
+  integrity sha512-ZpWJteovCBuIjQ3A2sve+QKDs+Y/w001m87h47nL+Ez9+SSc0QQJAleJIbsAVIeX2d9LYSWBlTq/KBveyifR5Q==
   dependencies:
     chokidar "^3.4.0"
     clone "^2.1.2"
@@ -3158,10 +3143,10 @@
     polyfills-loader "^1.6.1"
     valid-url "^1.0.9"
 
-"@web/dev-server-rollup@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@web/dev-server-rollup/-/dev-server-rollup-0.1.3.tgz#8c3e9f1fcd9400fcda5a3cfc422ca0728e42fb59"
-  integrity sha512-9AEHNqVEEg7bYv5CrSGcNqP624zkM5ryu2fY91FYu6RQ1irCVH8FN2nykG9xf1KX6wDzmCZ7K7pAsqxeKeM9jg==
+"@web/dev-server-rollup@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@web/dev-server-rollup/-/dev-server-rollup-0.1.5.tgz#cce84bbd4c668fb238f9b96e997edf46fe967710"
+  integrity sha512-2DmnIkg8AvEGkW9yr5Ao0v6CwrRxaRP5CA3HfXY41Qk9rKx9pNvEVZpsdTNN4wmSZuWc2Qx+ldXpJHtWvJ87bA==
   dependencies:
     "@web/dev-server-core" "^0.1.5"
     chalk "^4.1.0"
@@ -3184,24 +3169,24 @@
     selenium-webdriver "^4.0.0-alpha.7"
     uuid "^8.1.0"
 
-"@web/test-runner-chrome@^0.5.10":
-  version "0.5.10"
-  resolved "https://registry.yarnpkg.com/@web/test-runner-chrome/-/test-runner-chrome-0.5.10.tgz#2e20e9767b43639d62e38ad1fa3c99cf39ab933d"
-  integrity sha512-OcCcpZlYQU7OWyZHi7lRi5H8/zPpf369FBJD1VAQTQluXP0Lr3UQ/SbpJY3vl7r9xeAHvjz7lL54pjBIg2SDdg==
+"@web/test-runner-chrome@^0.5.11":
+  version "0.5.11"
+  resolved "https://registry.yarnpkg.com/@web/test-runner-chrome/-/test-runner-chrome-0.5.11.tgz#f274b6aa9b322a01b8ce7baeea7e4973cec0363d"
+  integrity sha512-tpoqsWIDoCPwG22+HqvMPBGXSc83+q5oZjDiPYy0PaJ7MLznzewnoVL+lUt892PLRPU5euuNuvbqcSxjBrtFJg==
   dependencies:
     "@types/puppeteer-core" "^2.0.0"
     "@web/test-runner-coverage-v8" "^0.0.3"
     chrome-launcher "^0.13.3"
     puppeteer-core "^5.0.0"
 
-"@web/test-runner-cli@^0.4.18":
-  version "0.4.18"
-  resolved "https://registry.yarnpkg.com/@web/test-runner-cli/-/test-runner-cli-0.4.18.tgz#2598d280e9df6e2a144c5b409fc75cf523bcb853"
-  integrity sha512-8oAdqfWLRXavhTpVIbqzuYIodJPs35c+K1snEV1C0X1e2B1ls822W4aPRB62+bAvpAeGDNPSR+8ThqJmAxFX9w==
+"@web/test-runner-cli@^0.4.20":
+  version "0.4.20"
+  resolved "https://registry.yarnpkg.com/@web/test-runner-cli/-/test-runner-cli-0.4.20.tgz#4d7d58782b327ef52a0e3a643280bb4c44d85aaa"
+  integrity sha512-B+dAhr/gs44ar1AhWGM0bcODdIbOKihKYdIZjh8DZ3/yqiN6MT1w5jYAzOqIkOYszruHk/PLulrZleZIxMGf3A==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@types/babel__code-frame" "^7.0.1"
-    "@web/config-loader" "^0.0.2"
+    "@web/config-loader" "^0.0.3"
     "@web/test-runner-core" "^0.6.15"
     camelcase "^6.0.0"
     chalk "^4.1.0"
@@ -3218,7 +3203,7 @@
     portfinder "^1.0.26"
     source-map "^0.7.3"
 
-"@web/test-runner-core@^0.6.15":
+"@web/test-runner-core@^0.6.15", "@web/test-runner-core@^0.6.9":
   version "0.6.15"
   resolved "https://registry.yarnpkg.com/@web/test-runner-core/-/test-runner-core-0.6.15.tgz#44b710cf9be7537eff42c96b5c3ee66d3915e45c"
   integrity sha512-UTn3KIdGhkcZ4VlrH7dv28WhsH2tKQT5i/hBItZoxFR9sYM/TVIgpLcN+zhY9cBAAnky9SxqO/8O7Pf/PSwfXQ==
@@ -3227,15 +3212,6 @@
     picomatch "^2.2.2"
     uuid "^8.1.0"
 
-"@web/test-runner-core@^0.6.9":
-  version "0.6.12"
-  resolved "https://registry.yarnpkg.com/@web/test-runner-core/-/test-runner-core-0.6.12.tgz#5b7c59100e8632634fd42b87250e4c705c164586"
-  integrity sha512-vWYgR5Ko9Ijy46Lg2koGcJOmj2DMMTkrIZA3HkBuV11gS5xhzjdvy22mOlrnMVYMhzx8WQr9ePHjWPzEwjK78Q==
-  dependencies:
-    istanbul-lib-coverage "^3.0.0"
-    picomatch "^2.2.2"
-    uuid "^8.1.0"
-
 "@web/test-runner-coverage-v8@^0.0.3":
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/@web/test-runner-coverage-v8/-/test-runner-coverage-v8-0.0.3.tgz#094d45f9af8ed8259d017aa6c8305a601f778808"
@@ -3255,9 +3231,9 @@
     mocha "^7.2.0"
 
 "@web/test-runner-selenium@^0.1.1":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@web/test-runner-selenium/-/test-runner-selenium-0.1.2.tgz#e445d53d715a757b7ab88723c9b801ca6f049e82"
-  integrity sha512-XFF0tOaj/7RfrwgVtq7v8+YO0xSrz9WyUCwKqz9OFLi4/1q2RxZQW9kH7oRCHKq9I+Jf+ny2Ys/YjH2BxJbHew==
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@web/test-runner-selenium/-/test-runner-selenium-0.1.3.tgz#2620c986600c41ce00dfd4785d8dd5dce81b199e"
+  integrity sha512-g+NluJ9+Bm0a4BSCiiNBcj2gz0fI3GcxBtZWkofaZFojk3uNQ/SlyDgTE0BmMHh0a6zaeI6lwNbyyFSEOTpuDQ==
   dependencies:
     selenium-webdriver "^4.0.0-alpha.7"
 
@@ -3276,14 +3252,14 @@
     picomatch "^2.2.2"
 
 "@web/test-runner@^0.6.40":
-  version "0.6.40"
-  resolved "https://registry.yarnpkg.com/@web/test-runner/-/test-runner-0.6.40.tgz#127baa97b669fd3d1fd70ced144dc5515243c8e7"
-  integrity sha512-+gfFi6yYCUFfuJpA6pwsgIFzHzPfOpcDOCvc8/Ek3VDUqSzfjZ61UqNg54e3gTYX7Cy5ORWLRUZQJWEvt8jZmw==
+  version "0.6.45"
+  resolved "https://registry.yarnpkg.com/@web/test-runner/-/test-runner-0.6.45.tgz#268cf7d9c53881c417f7b06a20dd630c210185f8"
+  integrity sha512-47UMN+gIYp05hKI1ZNomgK22RvF/H2cfqocbXYjqHcaN2EgciVbwZLzKweK7fuecBneH2DeiHxQ0AhDLHk3RYQ==
   dependencies:
     "@rollup/plugin-node-resolve" "^8.1.0"
-    "@web/dev-server-rollup" "^0.1.3"
-    "@web/test-runner-chrome" "^0.5.10"
-    "@web/test-runner-cli" "^0.4.18"
+    "@web/dev-server-rollup" "^0.1.5"
+    "@web/test-runner-chrome" "^0.5.11"
+    "@web/test-runner-cli" "^0.4.20"
     "@web/test-runner-core" "^0.6.15"
     "@web/test-runner-mocha" "^0.2.8"
     "@web/test-runner-server" "^0.5.11"
@@ -3789,13 +3765,13 @@ babel-extract-comments@^1.0.0:
   dependencies:
     babylon "^6.18.0"
 
-babel-plugin-apply-mdx-type-prop@1.6.13:
-  version "1.6.13"
-  resolved "https://registry.yarnpkg.com/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.6.13.tgz#13c01e248addd293bb378fc0b2e49ba78d1d0296"
-  integrity sha512-G+vyur4OM+2iZih+vUeMzL/Aa0/4s/YZlDo6L0pfslgoX6eNGYT/NmjDZe99VxiaTaODX/bF/kt6oxZJYt8mJw==
+babel-plugin-apply-mdx-type-prop@1.6.14:
+  version "1.6.14"
+  resolved "https://registry.yarnpkg.com/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.6.14.tgz#a4ca2c23efa1f710eb2e0a760c55e4ac14b93150"
+  integrity sha512-qOnIfczK7yxDpBUeT21WIVmGPpSyzPv61FS9/Ql5J/PIEVw0c6aS2a53/tL5rQWKlJwNdb2RkhG+fpT5WGvYaQ==
   dependencies:
     "@babel/helper-plugin-utils" "7.10.4"
-    "@mdx-js/util" "1.6.13"
+    "@mdx-js/util" "1.6.14"
 
 babel-plugin-bundled-import-meta@^0.3.2:
   version "0.3.2"
@@ -3828,10 +3804,10 @@ babel-plugin-emotion@^10.0.27:
     find-root "^1.1.0"
     source-map "^0.5.7"
 
-babel-plugin-extract-import-names@1.6.13:
-  version "1.6.13"
-  resolved "https://registry.yarnpkg.com/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.6.13.tgz#a87a44423c338e10fb4f3b607381ceaf434a448b"
-  integrity sha512-EKqKcGLmbegJji7qB7VRYQ6pJp74MGCjfCu1H6VOYr+ODqVMIsnxixYSvkuYTvwYaO1dWjSho85T4ctGMWpr+A==
+babel-plugin-extract-import-names@1.6.14:
+  version "1.6.14"
+  resolved "https://registry.yarnpkg.com/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.6.14.tgz#5f061123411c2fe7401b436060d2323b4bd0436e"
+  integrity sha512-pCyalU0WzbFPEb3E/ALerXzL/OMGH9M1mbWPR4QuSRo6BAfLL/j0QcLRRYojYQpCCS7pys9JpN/HI2+GcsbEhg==
   dependencies:
     "@babel/helper-plugin-utils" "7.10.4"
 
@@ -4289,9 +4265,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001033, caniuse-lite@^1.0.30001093:
-  version "1.0.30001104"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001104.tgz#4e3d5b3b1dd3c3529f10cb7f519c62ba3e579f5d"
-  integrity sha512-pkpCg7dmI/a7WcqM2yfdOiT4Xx5tzyoHAXWsX5/HxZ3TemwDZs0QXdqbE0UPLPVy/7BeK7693YfzfRYfu1YVpg==
+  version "1.0.30001107"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001107.tgz#809360df7a5b3458f627aa46b0f6ed6d5239da9a"
+  integrity sha512-86rCH+G8onCmdN4VZzJet5uPELII59cUzDphko3thQFgAQG1RNa+sVLDoALIhRYmflo5iSIzWY3vu1XTWtNMQQ==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -5251,9 +5227,9 @@ d3-scale@2:
     d3-time-format "2"
 
 d3-selection@1, d3-selection@^1.1.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.1.tgz#98eedbbe085fbda5bafa2f9e3f3a2f4d7d622a98"
-  integrity sha512-BTIbRjv/m5rcVTfBs4AMBLKs4x8XaaLkwm28KWu9S2vKNqXkXt2AH2Qf0sdPZHjFxcWg/YL53zcqAz+3g4/7PA==
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.2.tgz#dcaa49522c0dbf32d6c1858afc26b6094555bc5c"
+  integrity sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==
 
 d3-shape@1:
   version "1.3.7"
@@ -5608,10 +5584,10 @@ detect-libc@^1.0.3:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
 
-devtools-protocol@0.0.767361:
-  version "0.0.767361"
-  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.767361.tgz#5977f2558b84f9df36f62501bdddb82f3ae7b66b"
-  integrity sha512-ziRTdhEVQ9jEwedaUaXZ7kl9w9TF/7A3SXQ0XuqrJB+hMS62POHZUWTbumDN2ehRTfvWqTPc2Jw4gUl/jggmHA==
+devtools-protocol@0.0.781568:
+  version "0.0.781568"
+  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.781568.tgz#4cdca90a952d2c77831096ff6cd32695d8715a04"
+  integrity sha512-9Uqnzy6m6zEStluH9iyJ3iHyaQziFnMnLeC8vK0eN6smiJmIx7+yB64d67C2lH/LZra+5cGscJAJsNXO+MdPMg==
 
 dezalgo@^1.0.0:
   version "1.0.3"
@@ -5786,9 +5762,9 @@ ejs@^2.6.1:
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
 electron-to-chromium@^1.3.488:
-  version "1.3.502"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.502.tgz#6a55e993ef60a01fbdc2152ef5e47ee00c885c98"
-  integrity sha512-TIeXOaHAvfP7FemGUtAJxStmOc1YFGWFNqdey/4Nk41L9b1nMmDVDGNMIWhZJvOfJxix6Cv5FGEnBK+yvw3UTg==
+  version "1.3.509"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.509.tgz#830fcb89cd66dc2984d18d794973b99e3f00584c"
+  integrity sha512-cN4lkjNRuTG8rtAqTOVgwpecEC2kbKA04PG6YijcKGHK/kD0xLjiqExcAOmLUwtXZRF8cBeam2I0VZcih919Ug==
 
 "emoji-regex@>=6.0.0 <=6.1.1":
   version "6.1.1"
@@ -5900,10 +5876,10 @@ es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.5:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-dev-server@^1.18.1, es-dev-server@^1.56.1:
-  version "1.56.1"
-  resolved "https://registry.yarnpkg.com/es-dev-server/-/es-dev-server-1.56.1.tgz#11e3829f3f57abaa1a4762a6592f60e23f6f4887"
-  integrity sha512-mcTwrKzyIQNLJUUnQptmVS/1Qdfr4ZcNOyHvWCidQUQQcYOlpnfXpUhcGvaYCNKNwii69uKui1WVixLO1c+OEw==
+es-dev-server@^1.18.1, es-dev-server@^1.57.0:
+  version "1.57.0"
+  resolved "https://registry.yarnpkg.com/es-dev-server/-/es-dev-server-1.57.0.tgz#79a30dcaec7a2cd0aa998baa572551794c21ef45"
+  integrity sha512-vCQuXNir9L7HAxIStt2JpWHCKmudpSilhdLngWDbmkLDT+fAgy9YFLYRbs/ppU0VlrhUpjftpVvmEjRsFpib7Q==
   dependencies:
     "@babel/core" "^7.9.0"
     "@babel/plugin-proposal-dynamic-import" "^7.8.3"
@@ -7817,9 +7793,9 @@ inquirer@^6.2.0:
     through "^2.3.6"
 
 inquirer@^7.0.0:
-  version "7.3.2"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.2.tgz#25245d2e32dc9f33dbe26eeaada231daa66e9c7c"
-  integrity sha512-DF4osh1FM6l0RJc5YWYhSDB6TawiBRlbV9Cox8MWlidU218Tb7fm3lQTULyUJDfJ0tjbzl0W4q651mrCCEM55w==
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
+  integrity sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==
   dependencies:
     ansi-escapes "^4.2.1"
     chalk "^4.1.0"
@@ -7827,7 +7803,7 @@ inquirer@^7.0.0:
     cli-width "^3.0.0"
     external-editor "^3.0.3"
     figures "^3.0.0"
-    lodash "^4.17.16"
+    lodash "^4.17.19"
     mute-stream "0.0.8"
     run-async "^2.4.0"
     rxjs "^6.6.0"
@@ -8115,10 +8091,10 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
-is-plain-object@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-3.0.1.tgz#662d92d24c0aa4302407b0d45d21f2251c85f85b"
-  integrity sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==
+is-plain-object@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-4.1.1.tgz#1a14d6452cbd50790edc7fdaa0aed5a40a35ebb5"
+  integrity sha512-5Aw8LLVsDlZsETVMhoMXzqsXwQqr/0vlnBYzIXJbYo2F4yYlhLHs+Ez7Bod7IIQKWkJbJfxrWD7pA1Dw1TKrwA==
 
 is-potential-custom-element-name@^1.0.0:
   version "1.0.0"
@@ -8747,17 +8723,17 @@ lint-staged@^10.0.0:
     stringify-object "^3.3.0"
 
 listr2@^2.1.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/listr2/-/listr2-2.2.1.tgz#3a0abf78a7a9d9fb4121a541b524cb52e8dcbbba"
-  integrity sha512-WhuhT7xpVi2otpY/OzJJ8DQhf6da8MjGiEhMdA9oQquwtsSfzZt+YKlasUBer717Uocd0oPmbPeiTD7MvGzctw==
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-2.3.5.tgz#ba88ac8317a9839d517052c4cd98f38ec34c1906"
+  integrity sha512-mka3F7Xw/9YhzmO3tJ8fc5uQgvZyA2LShn9qa02k63APLTTmIDHItKNov7VMS01bg7jcx4Stzfvo1e0nolh/bw==
   dependencies:
-    chalk "^4.0.0"
+    chalk "^4.1.0"
     cli-truncate "^2.1.0"
     figures "^3.2.0"
     indent-string "^4.0.0"
     log-update "^4.0.0"
     p-map "^4.0.0"
-    rxjs "^6.5.5"
+    rxjs "^6.6.0"
     through "^2.3.8"
 
 lit-element@^2.2.1, lit-element@^2.3.1:
@@ -8937,7 +8913,7 @@ lodash@4.17.11:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
 
-lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.16, lodash@^4.17.19, lodash@^4.2.0, lodash@^4.2.1:
+lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.2.0, lodash@^4.2.1:
   version "4.17.19"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
@@ -9048,9 +9024,9 @@ lru-cache@^5.1.1:
     yallist "^3.0.2"
 
 macos-release@^2.2.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.4.0.tgz#837b39fc01785c3584f103c5599e0f0c8068b49e"
-  integrity sha512-ko6deozZYiAkqa/0gmcsz+p4jSy3gY7/ZsCEokPaYd8k+6/aXGkiTgr61+Owup7Sf+xjqW8u2ElhoM9SEcEfuA==
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.4.1.tgz#64033d0ec6a5e6375155a74b1a1eba8e509820ac"
+  integrity sha512-H/QHeBIN1fIGJX517pvK8IEK53yQOW7YcEI55oYtgjDdoCQQz7eJS94qt5kNrscReEyuD/JcdFCm2XBEcGOITg==
 
 magic-string@^0.25.0, magic-string@^0.25.5, magic-string@^0.25.7:
   version "0.25.7"
@@ -9395,9 +9371,9 @@ merge2@^1.2.3, merge2@^1.3.0:
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
 mermaid@^8.2.6:
-  version "8.6.0"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-8.6.0.tgz#570d0e6a156227af6eaf375d989049fba032d53b"
-  integrity sha512-TN3q75sGcdXHHOV5ySh1MnrMoRxhuhzFD7XneHrBR07r+In7Nq4JoHY9nG/dxwwktZyP9f+0r1gNNjLaTHA6Qw==
+  version "8.6.4"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-8.6.4.tgz#100e32a3e7ef59c659ad41f986ab1738da470bd6"
+  integrity sha512-Qewo/SNV6w16i3VishQ2U+yz3KprHwXMr17b/T0980eAEk5kl4ksMgMID3h68EqsT9GLQe/P6j2G8qwJHD929A==
   dependencies:
     "@braintree/sanitize-url" "^3.1.0"
     crypto-random-string "^3.0.1"
@@ -9882,9 +9858,9 @@ node-preload@^0.2.1:
     process-on-spawn "^1.0.0"
 
 node-releases@^1.1.58:
-  version "1.1.59"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.59.tgz#4d648330641cec704bff10f8e4fe28e453ab8e8e"
-  integrity sha512-H3JrdUczbdiwxN5FuJPyCHnGHIFqQ0wWxo+9j1kAXAzqNMAHlo+4I/sYYxpyK0irQ73HgdiyzD32oqQDcU2Osw==
+  version "1.1.60"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.60.tgz#6948bdfce8286f0b5d0e5a88e8384e954dfe7084"
+  integrity sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==
 
 noop-logger@^0.1.1:
   version "0.1.1"
@@ -10489,9 +10465,9 @@ parse-json@^4.0.0:
     json-parse-better-errors "^1.0.1"
 
 parse-json@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.0.0.tgz#73e5114c986d143efa3712d4ea24db9a4266f60f"
-  integrity sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.0.1.tgz#7cfe35c1ccd641bce3981467e6c2ece61b3b3878"
+  integrity sha512-ztoZ4/DYeXQq4E21v169sC8qWINGpcosGv9XhTDvg9/hWvx/zrFkc9BiWxR58OJLHGk28j5BL0SDLeV2WmFZlQ==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     error-ex "^1.3.1"
@@ -10527,9 +10503,9 @@ parse5@^5.0.0, parse5@^5.1.1:
   integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
 
 parse5@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.0.tgz#d2ac3448289c84b49947d49a39f7bef6200fa6ba"
-  integrity sha512-lC0A+4DefTdRr+DLQlEwwZqndL9VzEjiuegI5bj3hp4bnzzwQldSqCpHv7+msRpSOHGJyJvkcCa4q15LMUJ8rg==
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
+  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
 parseurl@^1.3.2:
   version "1.3.3"
@@ -10999,12 +10975,12 @@ punycode@^2.1.0, punycode@^2.1.1:
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
 puppeteer-core@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-5.2.0.tgz#d5474cfb0814440dfe36b949f40fcaa8885b7ae4"
-  integrity sha512-+gG1mW4ve7e4f1H18KWyEdbSc5Sb9+zxGBlb6CCclCf5rDsuPhYubTfOWJZB4L759D4XDtf04GOp+lmTmd61Nw==
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-5.2.1.tgz#0d21b5bbb30c82db9b439d255a459f3538cc7235"
+  integrity sha512-gLjEOrzwgcnwRH+sm4hS1TBqe2/DN248nRb2hYB7+lZ9kCuLuACNvuzlXILlPAznU3Ob+mEvVEBDcLuFa0zq3g==
   dependencies:
     debug "^4.1.0"
-    devtools-protocol "0.0.767361"
+    devtools-protocol "0.0.781568"
     extract-zip "^2.0.0"
     https-proxy-agent "^4.0.0"
     mime "^2.0.3"
@@ -11409,9 +11385,9 @@ regenerator-runtime@^0.11.0:
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
 regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
-  version "0.13.5"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
-  integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
+  version "0.13.7"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
 
 regenerator-transform@^0.14.2:
   version "0.14.5"
@@ -11548,24 +11524,24 @@ remark-html@^11.0.1:
     mdast-util-to-hast "^8.2.0"
     xtend "^4.0.1"
 
-remark-mdx@1.6.13:
-  version "1.6.13"
-  resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.6.13.tgz#e85c98bb2256f4e6436aaeaa5703799f77ef9565"
-  integrity sha512-LlaW2PpGl13THFHajl0EEpAnMkrZO2vmn4PPGJzy7vKfKf2UMioKa7zszfV3cEwKu1aHqqnjH5ZwuZj1hexHJw==
+remark-mdx@1.6.14:
+  version "1.6.14"
+  resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.6.14.tgz#a38676804cec2d045afe54e3d366caf8cf46f339"
+  integrity sha512-90nKwpyhrTPD9tJoOFYhspcG3jinNp5Gwck14jcNuAzqS8e2cyOkIt11+KIsbC9M4KJQ/n3wTtb6xMh3dFgKuA==
   dependencies:
     "@babel/core" "7.10.5"
     "@babel/helper-plugin-utils" "7.10.4"
     "@babel/plugin-proposal-object-rest-spread" "7.10.4"
     "@babel/plugin-syntax-jsx" "7.10.4"
-    "@mdx-js/util" "1.6.13"
+    "@mdx-js/util" "1.6.14"
     is-alphabetical "1.0.4"
-    remark-parse "8.0.2"
+    remark-parse "8.0.3"
     unified "9.0.0"
 
-remark-parse@8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-8.0.2.tgz#5999bc0b9c2e3edc038800a64ff103d0890b318b"
-  integrity sha512-eMI6kMRjsAGpMXXBAywJwiwAse+KNpmt+BK55Oofy4KvBZEqUDj6mWbGLJZrujoPIPPxDXzn3T9baRlpsm2jnQ==
+remark-parse@8.0.3, remark-parse@^8.0.0:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-8.0.3.tgz#9c62aa3b35b79a486454c690472906075f40c7e1"
+  integrity sha512-E1K9+QLGgggHxCQtLt++uXltxEprmWzNfg+MxpfHsZlrddKzZ/hZyWHDbK3/Ap8HJQqYJRXP+jHczdL6q6i85Q==
   dependencies:
     ccount "^1.0.0"
     collapse-white-space "^1.0.2"
@@ -11605,28 +11581,6 @@ remark-parse@^7.0.0, remark-parse@^7.0.2:
     vfile-location "^2.0.0"
     xtend "^4.0.1"
 
-remark-parse@^8.0.0:
-  version "8.0.3"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-8.0.3.tgz#9c62aa3b35b79a486454c690472906075f40c7e1"
-  integrity sha512-E1K9+QLGgggHxCQtLt++uXltxEprmWzNfg+MxpfHsZlrddKzZ/hZyWHDbK3/Ap8HJQqYJRXP+jHczdL6q6i85Q==
-  dependencies:
-    ccount "^1.0.0"
-    collapse-white-space "^1.0.2"
-    is-alphabetical "^1.0.0"
-    is-decimal "^1.0.0"
-    is-whitespace-character "^1.0.0"
-    is-word-character "^1.0.0"
-    markdown-escapes "^1.0.0"
-    parse-entities "^2.0.0"
-    repeat-string "^1.5.4"
-    state-toggle "^1.0.0"
-    trim "0.0.1"
-    trim-trailing-lines "^1.0.0"
-    unherit "^1.0.4"
-    unist-util-remove-position "^2.0.0"
-    vfile-location "^3.0.0"
-    xtend "^4.0.1"
-
 remark-rehype@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/remark-rehype/-/remark-rehype-5.0.0.tgz#dcf85b481bfaadf262ddde9b4ecefbb7f2673e70"
@@ -11946,9 +11900,9 @@ rollup@^1.31.1:
     acorn "^7.1.0"
 
 rollup@^2.0.0, rollup@^2.20.0, rollup@^2.7.2:
-  version "2.22.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.22.1.tgz#8700522aa5feb12c6bd51810df8a276699d136b1"
-  integrity sha512-K9AUQUCJkVqC+A7uUDacfhmpEeAjc2uOmSpvGI5xaYsm8pXgy4ZWEM8wHPfKj11xvCwFZppkRDo8a0RESJXCnw==
+  version "2.23.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.23.0.tgz#b7ab1fee0c0e60132fd0553c4df1e9cdacfada9d"
+  integrity sha512-vLNmZFUGVwrnqNAJ/BvuLk1MtWzu4IuoqsH9UWK5AIdO3rt8/CSiJNvPvCIvfzrbNsqKbNzPAG1V2O4eTe2XZg==
   optionalDependencies:
     fsevents "~2.1.2"
 
@@ -11979,7 +11933,7 @@ rw@1:
   resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
   integrity sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=
 
-rxjs@^6.4.0, rxjs@^6.5.5, rxjs@^6.6.0:
+rxjs@^6.4.0, rxjs@^6.6.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.0.tgz#af2901eedf02e3a83ffa7f886240ff9018bbec84"
   integrity sha512-3HMA8z/Oz61DUHe+SdOiQyzIf4tOx5oQHmMir7IZEu6TMqCLHT4LRcmNaUS0NwOz8VLvmmBduMsoaUvMaIiqzg==
@@ -12252,9 +12206,9 @@ slide@^1.1.6:
   integrity sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=
 
 slugify@^1.3.1:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.4.4.tgz#2f032ffa52b1e1ca2a27737c1ce47baae3d0883a"
-  integrity sha512-N2+9NJ8JzfRMh6PQLrBeDEnVDQZSytE/W4BTC4fNNPmO90Uu58uNwSlIJSs+lmPgWsaAF79WLhVPe5tuy7spjw==
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.4.5.tgz#a7517acf5f4c02a4df41e735354b660a4ed1efcf"
+  integrity sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ==
 
 smart-buffer@^4.1.0:
   version "4.1.0"
@@ -12824,9 +12778,9 @@ symbol-observable@^1.0.4:
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
 systemjs@^6.3.1:
-  version "6.3.3"
-  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-6.3.3.tgz#c0f2bec5cc72d0b36a8b971b1fa32bfc828b50d4"
-  integrity sha512-djQ6mZ4/cWKnVnhAWvr/4+5r7QHnC7WiA8sS9VuYRdEv3wYZYTIIQv8zPT79PdDSUwfX3bgvu5mZ8eTyLm2YQA==
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-6.4.0.tgz#927957c0f6991f525695fec57a6a8a63e63081cf"
+  integrity sha512-s/nvcAXduGmThUXkNKBNh00dmOFwZIXv46qjj5gwLwN0RpHbPdmp65OE+A0QaNs4fO7tjn74Aw9S7ei88toFjA==
 
 table-layout@^1.0.0:
   version "1.0.1"
@@ -13353,7 +13307,7 @@ unicode-property-aliases-ecmascript@^1.0.4:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
   integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
 
-unified@9.0.0, unified@^9.0.0:
+unified@9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/unified/-/unified-9.0.0.tgz#12b099f97ee8b36792dbad13d278ee2f696eed1d"
   integrity sha512-ssFo33gljU3PdlWLjNp15Inqb77d6JnJSfyplGJPT/a+fNRNyCBeveBAYJdO5khKdF6WVHa/yYCC7Xl6BDwZUQ==
@@ -13376,6 +13330,18 @@ unified@^8.2.0, unified@^8.4.2:
     trough "^1.0.0"
     vfile "^4.0.0"
 
+unified@^9.0.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-9.1.0.tgz#7ba82e5db4740c47a04e688a9ca8335980547410"
+  integrity sha512-VXOv7Ic6twsKGJDeZQ2wwPqXs2hM0KNu5Hkg9WgAZbSD1pxhZ7p8swqg583nw1Je2fhwHy6U8aEjiI79x1gvag==
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-buffer "^2.0.0"
+    is-plain-obj "^2.0.0"
+    trough "^1.0.0"
+    vfile "^4.0.0"
+
 union-value@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"