@covalent/components 0.0.0-COVALENT

package/stories/demos/material-web.content.html

@@ -0,0 +1,2125 @@
+<!-- Required styles for Material Web -->
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/material-components-web@13.0.0/dist/material-components-web.min.css"
+/>
+<style>
+  body {
+    display: flex;
+    margin: 0;
+  }
+
+  .remix-fab {
+    position: fixed;
+    right: 24px;
+    bottom: 24px;
+    z-index: 200;
+  }
+
+  .drawer-content--theme-summary {
+    display: none;
+  }
+
+  .theme-name {
+    margin-bottom: 0;
+  }
+  .theme-name:focus {
+    outline: 1px solid rgba(0, 0, 0, 0.12);
+  }
+  .theme-name:empty:before {
+    content: attr(placeholder);
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .mdc-list-divider.theme-summary-divider {
+    border-bottom-width: 2px;
+    margin: 20px 0;
+  }
+
+  .theme-summary-line {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 8px 0;
+  }
+  .theme-summary-line figure {
+    margin: 0;
+  }
+  .theme-summary-line .theme-summary-code {
+    background: none;
+  }
+  .theme-summary-line .theme-summary-color {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+  }
+  .theme-summary-line .theme-summary-shape {
+    width: 48px;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+  }
+  .theme-summary-line.theme-summary-line--typography {
+    margin: 0;
+  }
+  .theme-summary-line .theme-summary-typography {
+    width: 120px;
+  }
+
+  .mdc-list-divider.typography-baseline-divider {
+    margin-top: 0;
+    margin-bottom: 12px;
+  }
+
+  .mdc-drawer-app-content {
+    width: 100%;
+  }
+
+  .theme-builder-desc-banner {
+    display: none;
+    width: 100%;
+    text-align: center;
+    padding: 10px;
+  }
+
+  @media (max-width: 1310px) {
+    .theme-builder-app-bar,
+    .theme-builder-desc-banner {
+      display: block;
+    }
+
+    .theme-builder-drawer {
+      display: none;
+    }
+  }
+  .main-content {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+  }
+  .main-content:not(.mdc-top-app-bar--fixed-adjust) {
+    padding: 2vh 0;
+  }
+  .main-content .column {
+    width: 420px;
+  }
+
+  .component-section-row {
+    display: flex;
+  }
+  .component-section-row .component-section:first-child {
+    width: 200px;
+  }
+
+  .component-section {
+    margin: 16px 20px 40px 20px;
+  }
+  .component-section.dialog-component-section {
+    margin-bottom: 60px;
+  }
+
+  @media only screen and (max-width: 600px) {
+    .component-section {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .mdc-image-list {
+      width: auto;
+    }
+
+    .mdc-drawer {
+      width: 60%;
+      min-width: calc(100% - 56px);
+    }
+
+    .column {
+      width: auto;
+      max-width: 420px;
+      padding-right: 8px;
+      padding-left: 8px;
+    }
+  }
+  @media only screen and (max-width: 485px) {
+    .column {
+      overflow: hidden;
+    }
+
+    .remix-fab {
+      position: fixed;
+      bottom: 16px;
+      right: auto;
+      margin: 0;
+      z-index: 200;
+    }
+
+    .mdc-dialog .mdc-dialog__surface {
+      max-width: calc(100% - 100px);
+    }
+  }
+  .section-header {
+    display: flex;
+    height: 36px;
+    font-family: Inter, sans-serif;
+  }
+  .section-header a {
+    display: flex;
+    align-items: center;
+  }
+  .section-header a:hover,
+  .section-header a:focus {
+    text-decoration: none;
+  }
+  .section-header .material-icons {
+    font-size: 1rem;
+    padding: 8px;
+  }
+  .section-header .material-icons.leading-icon {
+    padding-left: 0;
+  }
+
+  .component-wrapper {
+    margin: 16px 0;
+  }
+
+  .print .column {
+    width: 30vw;
+  }
+  .print .component-wrapper {
+    margin-bottom: 60px;
+  }
+  .print .component-wrapper.text-field-component-wrapper,
+  .print .component-wrapper.chips-component-wrapper {
+    margin-bottom: 96px;
+  }
+  .print .theme-name {
+    margin-bottom: 8px;
+  }
+  .print .glitch-url {
+    font-size: 1rem;
+  }
+  .print .drawer-content--instructions .mdc-typography--overline {
+    font-size: 0.9rem;
+  }
+  .print .drawer-content--instructions .mdc-typography--body2 {
+    font-size: 1.2rem;
+    line-height: 1.75rem;
+  }
+  .print .drawer-content--options {
+    display: none;
+  }
+  .print .button-component-wrapper,
+  .print .fab-component-wrapper {
+    margin: 24px 0 44px;
+  }
+  .print .top-bar-component-wrapper {
+    margin: 24px 0 52px;
+  }
+  .print .switch-component-wrapper {
+    margin-left: -8px;
+    margin-top: 24px;
+  }
+  .print .component-wrapper.checkbox-component-wrapper {
+    margin-left: -18px;
+  }
+  .print .component-wrapper.chips-component-wrapper-1 {
+    margin: 12px 0 92px -8px;
+  }
+  .print .select-component {
+    margin: 0 20px 40px 20px;
+  }
+  .print .column-2 {
+    transform: translate(-16px);
+  }
+  .print .card-component-wrapper {
+    margin: 16px 0 38px;
+  }
+  .print .component-wrapper.text-field-component-wrapper-1 {
+    margin: 22px 0 90px;
+  }
+  .print .dialog-component-wrapper {
+    margin: 8px 0 52px;
+  }
+  .print .linear-progress-section {
+    margin-top: -8px;
+  }
+  .print .tabs-section {
+    margin-top: -16px;
+  }
+  .print .radio-row {
+    margin-top: -24px;
+    margin-bottom: -16px;
+  }
+  .print .snackbar-section {
+    margin-top: -16px;
+  }
+  .print .image-section {
+    margin-top: -4px;
+  }
+  .print .switch-section {
+    margin-top: 0;
+  }
+  .print .short-app-bar-section,
+  .print .menu-section {
+    margin-top: 0px;
+  }
+  .print .switch-checkbox-row {
+    margin-bottom: 16px;
+  }
+  .print .list-section {
+    margin-top: 8px;
+  }
+  .print .dialog-component-section {
+    margin-bottom: 52px;
+    margin-top: -16px;
+  }
+  .print .chips-section {
+    margin: 16px 20px -32px 20px;
+  }
+  .print .image-list-section {
+    transform: translateY(-8px);
+  }
+
+  .typography-callout {
+    font-size: 12px;
+    padding: 16px;
+  }
+
+  .font-link {
+    font-size: 12px;
+    margin-top: 8px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-bottom: -16px;
+  }
+
+  .font-link i {
+    font-size: 16px;
+    margin-left: 8px;
+  }
+
+  .theme-shape .varValue {
+    display: block;
+  }
+
+  .varValue {
+    font-weight: 600;
+  }
+
+  .mdc-checkbox,
+  .mdc-radio {
+    margin-right: 4px;
+  }
+
+  .component-wrapper .mdc-top-app-bar {
+    position: relative;
+    z-index: 1;
+  }
+  .component-wrapper .mdc-top-app-bar:not(.mdc-top-app-bar--short) {
+    width: 100%;
+  }
+
+  .mdc-card {
+    width: 100%;
+  }
+  .mdc-card .demo-card__primary {
+    padding: 1rem;
+  }
+  .mdc-card .demo-card__title,
+  .mdc-card .demo-card__subtitle {
+    margin: 0;
+  }
+  .mdc-card .demo-card__secondary {
+    padding: 0 1rem 8px;
+    opacity: 0.87;
+  }
+
+  .mdc-linear-progress {
+    width: 100%;
+  }
+
+  .mdc-menu-surface--anchor > .mdc-menu {
+    position: relative;
+    z-index: 1;
+  }
+
+  .mdc-select {
+    width: 160px;
+  }
+
+  .drawer-component-wrapper {
+    background: rgba(0, 0, 0, 0.3);
+  }
+  .drawer-component-wrapper .mdc-drawer .mdc-drawer__content {
+    padding: 0;
+  }
+
+  .mdc-text-field {
+    width: 100%;
+  }
+
+  .mdc-snackbar {
+    position: relative;
+    margin: 0;
+    justify-content: start;
+    z-index: 1;
+  }
+
+  .mdc-dialog {
+    position: relative;
+    justify-content: start;
+    z-index: 1;
+  }
+  .mdc-dialog .mdc-dialog__surface {
+    max-width: 100%;
+  }
+
+  .mdc-image-list {
+    max-width: 400px;
+    max-height: 600px;
+    margin: 0;
+  }
+
+  .component-wrapper.button-component-wrapper,
+  .component-wrapper.fab-component-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
+
+<!-- Required styles for Material Web -->
+<div class="mdc-typography">
+  <div class="mdc-drawer-app-content">
+    <main class="main-content">
+      <div class="theme-builder-desc-banner mdc-typography--caption">
+        An HTML rendering of MDC styled Components themed with Covalent
+      </div>
+
+      <!-- <button onclick=" window.open('https://glitch.com/edit/#!/remix/material-theme-builder','_blank')" class="mdc-fab mdc-fab--extended remix-fab" >
+                <span class="material-icons mdc-fab__icon">photo_filter</span>
+                <span class="mdc-fab__label">Create a new Theme</span>
+        </button> -->
+      <div class="column">
+        <!-- Button -->
+        <section class="component-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/buttons.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              Button
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div class="component-wrapper button-component-wrapper">
+            <button class="mdc-button mdc-button--raised">
+              <span class="mdc-button__ripple"></span>
+              Button
+            </button>
+            <button class="mdc-button">
+              <span class="mdc-button__ripple"></span>
+              Button
+            </button>
+            <button class="mdc-button mdc-button--outlined">
+              <span class="mdc-button__ripple"></span>
+              Button
+            </button>
+          </div>
+        </section>
+
+        <!-- Top app bar -->
+        <section class="component-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/app-bars-top.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              Top App Bar
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div class="component-wrapper top-bar-component-wrapper">
+            <header class="mdc-top-app-bar mdc-top-app-bar--fixed">
+              <div class="mdc-top-app-bar__row">
+                <section
+                  class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
+                >
+                  <a class="material-icons mdc-top-app-bar__navigation-icon"
+                    >menu</a
+                  >
+                  <span class="mdc-top-app-bar__title">Headline 6</span>
+                </section>
+                <section
+                  class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
+                  role="toolbar"
+                >
+                  <a
+                    class="material-icons mdc-icon-button mdc-top-app-bar__action-item"
+                    aria-label="Share"
+                    alt="Share"
+                    >share</a
+                  >
+                  <a
+                    class="material-icons mdc-icon-button mdc-top-app-bar__action-item"
+                    aria-label="Bookmark this page"
+                    alt="Bookmark this page"
+                    >bookmark</a
+                  >
+                  <a
+                    class="material-icons mdc-icon-button mdc-top-app-bar__action-item"
+                    aria-label="Search this page"
+                    alt="Search this page"
+                    >search</a
+                  >
+                </section>
+              </div>
+            </header>
+          </div>
+        </section>
+
+        <!-- Drawer -->
+        <section class="component-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/navigation-drawer.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              Drawer
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div class="component-wrapper drawer-component-wrapper">
+            <aside class="mdc-drawer">
+              <div class="mdc-drawer__header">
+                <h3 class="mdc-drawer__title">Headline 6</h3>
+                <h6 class="mdc-drawer__subtitle">Body 2</h6>
+              </div>
+              <div class="mdc-list-divider"></div>
+              <div class="mdc-drawer__content">
+                <nav class="mdc-list" role="listbox">
+                  <a
+                    class="mdc-list-item mdc-list-item--activated"
+                    aria-selected="true"
+                  >
+                    <i
+                      class="material-icons mdc-deprecated-list-item__graphic"
+                      aria-hidden="true"
+                      >inbox</i
+                    >
+                    <span class="mdc-list-item__ripple"></span>
+                    <span class="mdc-list-item__text">Body 2</span>
+                  </a>
+                  <a class="mdc-list-item">
+                    <i
+                      class="material-icons mdc-deprecated-list-item__graphic"
+                      aria-hidden="true"
+                      >star</i
+                    >
+                    <span class="mdc-list-item__ripple"></span>
+                    <span class="mdc-list-item__text">Body 2</span>
+                  </a>
+                  <a class="mdc-list-item">
+                    <i
+                      class="material-icons mdc-deprecated-list-item__graphic"
+                      aria-hidden="true"
+                      >bookmark</i
+                    >
+                    <span class="mdc-list-item__ripple"></span>
+                    <span class="mdc-list-item__text">Body 2</span>
+                  </a>
+                  <a class="mdc-list-item">
+                    <i
+                      class="material-icons mdc-deprecated-list-item__graphic"
+                      aria-hidden="true"
+                      >send</i
+                    >
+                    <span class="mdc-list-item__ripple"></span>
+                    <span class="mdc-list-item__text">Body 2</span>
+                  </a>
+                  <a class="mdc-list-item">
+                    <i
+                      class="material-icons mdc-deprecated-list-item__graphic"
+                      aria-hidden="true"
+                      >drafts</i
+                    >
+                    <span class="mdc-list-item__ripple"></span>
+                    <span class="mdc-list-item__text">Body 2</span>
+                  </a>
+                </nav>
+              </div>
+            </aside>
+          </div>
+        </section>
+
+        <div class="component-section-row">
+          <!-- Short top app bar -->
+          <section class="component-section short-app-bar-section">
+            <div class="section-header">
+              <a
+                href="https://material.io/design/components/app-bars-top.html"
+                class="mdc-typography--button"
+                target="_blank"
+              >
+                Short App Bar
+                <i class="material-icons">open_in_new</i>
+              </a>
+            </div>
+            <div class="component-wrapper">
+              <header
+                class="mdc-top-app-bar mdc-top-app-bar--short mdc-top-app-bar--short-collapsed"
+              >
+                <div class="mdc-top-app-bar__row">
+                  <section
+                    class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
+                  >
+                    <a
+                      class="material-icons mdc-icon-button mdc-top-app-bar__navigation-icon"
+                      >menu</a
+                    >
+                  </section>
+                  <section
+                    class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
+                    role="toolbar"
+                  >
+                    <a
+                      class="material-icons mdc-icon-button mdc-top-app-bar__action-item"
+                      aria-label="Open shopping cart"
+                      alt="Open shopping cart"
+                      >shopping_cart</a
+                    >
+                  </section>
+                </div>
+              </header>
+            </div>
+          </section>
+
+          <!-- Menu -->
+          <section class="component-section menu-section">
+            <div class="section-header">
+              <a
+                href="https://material.io/design/components/menus.html"
+                class="mdc-typography--button"
+                target="_blank"
+              >
+                Menu
+                <i class="material-icons">open_in_new</i>
+              </a>
+            </div>
+            <div class="component-wrapper">
+              <div class="mdc-menu-surface--anchor">
+                <div class="mdc-menu mdc-menu-surface mdc-menu-surface--open">
+                  <ul
+                    class="mdc-list"
+                    role="menu"
+                    aria-hidden="true"
+                    aria-orientation="vertical"
+                    tabindex="-1"
+                  >
+                    <li class="mdc-list-item" role="menuitem">
+                      <span class="mdc-list-item__ripple"></span>
+                      <span class="mdc-list-item__text">A Menu Item</span>
+                    </li>
+                    <li class="mdc-list-item" role="menuitem">
+                      <span class="mdc-list-item__ripple"></span>
+                      <span class="mdc-list-item__text">Another Menu Item</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <!-- Linear progress -->
+        <section class="component-section linear-progress-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/progress-indicators.html#linear-progress-indicators"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              Linear Progress
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div class="component-wrapper linear-progress-component-wrapper">
+            <div
+              role="progressbar"
+              class="mdc-linear-progress mdc-linear-progress--indeterminate"
+            >
+              <div class="mdc-linear-progress__buffering-dots"></div>
+              <div class="mdc-linear-progress__buffer"></div>
+              <div
+                class="mdc-linear-progress__bar mdc-linear-progress__primary-bar"
+              >
+                <span class="mdc-linear-progress__bar-inner"></span>
+              </div>
+              <div
+                class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar"
+              >
+                <span class="mdc-linear-progress__bar-inner"></span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <div class="component-section-row switch-checkbox-row">
+          <!-- Switch -->
+          <section class="component-section switch-section">
+            <div class="section-header">
+              <a
+                href="https://material.io/design/components/selection-controls.html#switches"
+                class="mdc-typography--button"
+                target="_blank"
+              >
+                Switch
+                <i class="material-icons">open_in_new</i>
+              </a>
+            </div>
+            <div class="component-wrapper switch-component-wrapper">
+              <button
+                id="basic-switch"
+                class="mdc-switch mdc-switch--unselected"
+                type="button"
+                role="switch"
+                aria-checked="false"
+              >
+                <div class="mdc-switch__track"></div>
+                <div class="mdc-switch__handle-track">
+                  <div class="mdc-switch__handle">
+                    <div class="mdc-switch__shadow">
+                      <div class="mdc-elevation-overlay"></div>
+                    </div>
+                    <div class="mdc-switch__ripple"></div>
+                    <div class="mdc-switch__icons">
+                      <svg
+                        class="mdc-switch__icon mdc-switch__icon--on"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z"
+                        />
+                      </svg>
+                      <svg
+                        class="mdc-switch__icon mdc-switch__icon--off"
+                        viewBox="0 0 24 24"
+                      >
+                        <path d="M20 13H4v-2h16v2z" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </button>
+              <label for="basic-switch">off/on</label>
+            </div>
+          </section>
+
+          <!-- Checkbox -->
+          <section class="component-section">
+            <div class="section-header">
+              <a
+                href="https://material.io/design/components/selection-controls.html#checkboxes"
+                class="mdc-typography--button"
+                target="_blank"
+              >
+                Checkbox
+                <i class="material-icons">open_in_new</i>
+              </a>
+            </div>
+            <div class="component-wrapper checkbox-component-wrapper">
+              <div class="mdc-checkbox">
+                <input type="checkbox" class="mdc-checkbox__native-control" />
+                <div class="mdc-checkbox__background">
+                  <svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
+                    <path
+                      class="mdc-checkbox__checkmark-path"
+                      fill="none"
+                      d="M1.73,12.91 8.1,19.28 22.79,4.59"
+                    />
+                  </svg>
+                  <div class="mdc-checkbox__mixedmark"></div>
+                </div>
+              </div>
+              <div class="mdc-checkbox indeterminate-checkbox">
+                <input type="checkbox" class="mdc-checkbox__native-control" />
+                <div class="mdc-checkbox__background">
+                  <svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
+                    <path
+                      class="mdc-checkbox__checkmark-path"
+                      fill="none"
+                      d="M1.73,12.91 8.1,19.28 22.79,4.59"
+                    />
+                  </svg>
+                  <div class="mdc-checkbox__mixedmark"></div>
+                </div>
+              </div>
+              <div class="mdc-checkbox">
+                <input
+                  type="checkbox"
+                  class="mdc-checkbox__native-control"
+                  checked
+                />
+                <div class="mdc-checkbox__background">
+                  <svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
+                    <path
+                      class="mdc-checkbox__checkmark-path"
+                      fill="none"
+                      d="M1.73,12.91 8.1,19.28 22.79,4.59"
+                    />
+                  </svg>
+                  <div class="mdc-checkbox__mixedmark"></div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <div class="component-section-row radio-row">
+          <!-- Radio -->
+          <section class="component-section">
+            <div class="section-header">
+              <a
+                href="https://material.io/design/components/selection-controls.html#radio-buttons"
+                class="mdc-typography--button"
+                target="_blank"
+              >
+                Radio Button
+                <i class="material-icons">open_in_new</i>
+              </a>
+            </div>
+            <div class="component-wrapper radio-component-wrapper">
+              <div class="mdc-radio">
+                <input
+                  class="mdc-radio__native-control"
+                  type="radio"
+                  id="radio-1"
+                  name="radios"
+                  checked
+                />
+                <div class="mdc-radio__background">
+                  <div class="mdc-radio__outer-circle"></div>
+                  <div class="mdc-radio__inner-circle"></div>
+                </div>
+              </div>
+              <div class="mdc-radio">
+                <input
+                  class="mdc-radio__native-control"
+                  type="radio"
+                  id="radio-2"
+                  name="radios"
+                  checked
+                />
+                <div class="mdc-radio__background">
+                  <div class="mdc-radio__outer-circle"></div>
+                  <div class="mdc-radio__inner-circle"></div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- Icon button -->
+          <section class="component-section">
+            <div class="section-header">
+              <a
+                href="https://material.io/design/components/buttons.html#toggle-button"
+                class="mdc-typography--button"
+                target="_blank"
+              >
+                Icon Button
+                <i class="material-icons">open_in_new</i>
+              </a>
+            </div>
+            <div class="component-wrapper icon-button-component-wrapper">
+              <button
+                id="icon-toggle-button"
+                class="mdc-icon-button"
+                aria-label="Add to favorites"
+                aria-pressed="false"
+              >
+                <div class="mdc-icon-button__ripple"></div>
+                <i
+                  class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on"
+                  >music_off</i
+                >
+                <i class="material-icons mdc-icon-button__icon">music_note</i>
+              </button>
+            </div>
+          </section>
+        </div>
+
+        <!-- Chips -->
+        <section class="component-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/chips.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              Chips
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div
+            class="component-wrapper chips-component-wrapper chips-component-wrapper-1"
+          >
+            <span
+              class="mdc-evolution-chip-set"
+              role="listbox"
+              aria-orientation="horizontal"
+              aria-multiselectable="true"
+            >
+              <span class="mdc-evolution-chip-set__chips" role="presentation">
+                <span class="mdc-evolution-chip" role="row" id="c1">
+                  <span
+                    class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary"
+                    role="gridcell"
+                  >
+                    <button
+                      class="mdc-evolution-chip__action mdc-evolution-chip__action--primary"
+                      type="button"
+                      tabindex="-1"
+                    >
+                      <span
+                        class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"
+                      ></span>
+                      <span class="mdc-evolution-chip__text-label"
+                        >Regular chip</span
+                      >
+                    </button>
+                  </span>
+                </span>
+                <span
+                  class="mdc-evolution-chip mdc-evolution-chip--with-trailing-action"
+                  role="row"
+                  id="c2"
+                  data-mdc-deletable="true"
+                >
+                  <span
+                    class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary"
+                    role="gridcell"
+                  >
+                    <button
+                      class="mdc-evolution-chip__action mdc-evolution-chip__action--primary"
+                      type="button"
+                      tabindex="0"
+                    >
+                      <span
+                        class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"
+                      ></span>
+                      <span class="mdc-evolution-chip__text-label"
+                        >Trialing chip</span
+                      >
+                    </button>
+                  </span>
+                  <span
+                    class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
+                    role="gridcell"
+                  >
+                    <button
+                      class="mdc-evolution-chip__action mdc-evolution-chip__action--trailing"
+                      type="button"
+                      tabindex="-1"
+                      aria-label="Remove chip foo"
+                    >
+                      <span
+                        class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--trailing"
+                      ></span>
+                      <span
+                        class="mdc-evolution-chip__icon material-icons mdc-evolution-chip__icon--trailing"
+                        >close</span
+                      >
+                    </button>
+                  </span>
+                </span>
+
+                <span
+                  class="mdc-evolution-chip mdc-evolution-chip--with-primary-graphic mdc-evolution-chip--with-primary-icon"
+                  role="row"
+                  id="c0"
+                >
+                  <span
+                    class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary"
+                    role="gridcell"
+                  >
+                    <button
+                      class="mdc-evolution-chip__action mdc-evolution-chip__action--primary"
+                      type="button"
+                      tabindex="0"
+                    >
+                      <span
+                        class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"
+                      ></span>
+                      <span class="mdc-evolution-chip__graphic">
+                        <span
+                          class="mdc-evolution-chip__icon mdc-evolution-chip__icon--primary material-icons"
+                          >favorite</span
+                        >
+                      </span>
+                      <span class="mdc-evolution-chip__text-label"
+                        >Leading chip</span
+                      >
+                    </button>
+                  </span>
+                </span>
+
+                <span
+                  class="mdc-evolution-chip mdc-evolution-chip--with-primary-graphic mdc-evolution-chip--with-primary-icon mdc-evolution-chip--with-avatar"
+                  role="row"
+                  id="c0"
+                >
+                  <span
+                    class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary"
+                    role="gridcell"
+                  >
+                    <button
+                      class="mdc-evolution-chip__action mdc-evolution-chip__action--primary"
+                      type="button"
+                      tabindex="0"
+                    >
+                      <span
+                        class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"
+                      ></span>
+                      <span class="mdc-evolution-chip__graphic">
+                        <span
+                          class="mdc-evolution-chip__icon mdc-evolution-chip__icon--primary material-icons"
+                          style="background: rgba(0, 0, 0, 0.3)"
+                          >person</span
+                        >
+                      </span>
+                      <span class="mdc-evolution-chip__text-label"
+                        >Avatar chip</span
+                      >
+                    </button>
+                  </span>
+                </span>
+
+                <span
+                  class="mdc-evolution-chip mdc-evolution-chip--disabled"
+                  role="row"
+                  id="c1"
+                >
+                  <span
+                    class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary"
+                    role="gridcell"
+                  >
+                    <button
+                      class="mdc-evolution-chip__action mdc-evolution-chip__action--primary"
+                      type="button"
+                      tabindex="-1"
+                      disabled
+                    >
+                      <span
+                        class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"
+                      ></span>
+                      <span class="mdc-evolution-chip__text-label"
+                        >Disabled chip</span
+                      >
+                    </button>
+                  </span>
+                </span>
+
+                <span
+                  class="mdc-evolution-chip mdc-evolution-chip--filter mdc-evolution-chip--with-primary-graphic mdc-evolution-chip--selectable"
+                  role="presentation"
+                  id="c5"
+                >
+                  <span
+                    class="mdc-evolution-chip__action mdc-evolution-chip__action--primary"
+                    role="option"
+                    aria-selected="false"
+                    tabindex="0"
+                  >
+                    <span
+                      class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"
+                    ></span>
+                    <span class="mdc-evolution-chip__graphic">
+                      <span class="mdc-evolution-chip__checkmark">
+                        <svg
+                          class="mdc-evolution-chip__checkmark-svg"
+                          viewBox="-2 -3 30 30"
+                        >
+                          <path
+                            class="mdc-evolution-chip__checkmark-path"
+                            fill="none"
+                            stroke="black"
+                            d="M1.73,12.91 8.1,19.28 22.79,4.59"
+                          />
+                        </svg>
+                      </span>
+                    </span>
+                    <span class="mdc-evolution-chip__text-label"
+                      >Filter chip</span
+                    >
+                  </span>
+                </span>
+
+                <span
+                  class="mdc-evolution-chip mdc-evolution-chip--filter mdc-evolution-chip--with-primary-graphic mdc-evolution-chip--selectable"
+                  role="presentation"
+                  id="c6"
+                >
+                  <span
+                    class="mdc-evolution-chip__action mdc-evolution-chip__action--primary"
+                    role="option"
+                    aria-selected="false"
+                    tabindex="0"
+                    data-mdc-deletable="true"
+                  >
+                    <span
+                      class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"
+                    ></span>
+                    <span class="mdc-evolution-chip__graphic">
+                      <span class="mdc-evolution-chip__checkmark">
+                        <svg
+                          class="mdc-evolution-chip__checkmark-svg"
+                          viewBox="-2 -3 30 30"
+                        >
+                          <path
+                            class="mdc-evolution-chip__checkmark-path"
+                            fill="none"
+                            stroke="black"
+                            d="M1.73,12.91 8.1,19.28 22.79,4.59"
+                          />
+                        </svg>
+                      </span>
+                    </span>
+                    <span class="mdc-evolution-chip__text-label"
+                      >Filter chip</span
+                    >
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+          <div
+            class="component-wrapper chips-component-wrapper chips-component-wrapper-2"
+          >
+            <span
+              class="mdc-evolution-chip-set"
+              role="listbox"
+              aria-orientation="horizontal"
+              aria-multiselectable="false"
+            >
+              <span class="mdc-evolution-chip-set__chips" role="presentation">
+                <span
+                  class="mdc-evolution-chip mdc-evolution-chip--filter mdc-evolution-chip--with-primary-graphic mdc-evolution-chip--selectable mdc-evolution-chip--selected"
+                  role="presentation"
+                  id="c20"
+                >
+                  <span
+                    class="mdc-evolution-chip__action mdc-evolution-chip__action--primary"
+                    role="option"
+                    aria-selected="false"
+                    tabindex="0"
+                  >
+                    <span
+                      class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"
+                    ></span>
+                    <span class="mdc-evolution-chip__graphic">
+                      <span class="mdc-evolution-chip__checkmark">
+                        <svg
+                          class="mdc-evolution-chip__checkmark-svg"
+                          viewBox="-2 -3 30 30"
+                        >
+                          <path
+                            class="mdc-evolution-chip__checkmark-path"
+                            fill="none"
+                            stroke="black"
+                            d="M1.73,12.91 8.1,19.28 22.79,4.59"
+                          />
+                        </svg>
+                      </span>
+                    </span>
+                    <span class="mdc-evolution-chip__text-label"
+                      >Filter chip</span
+                    >
+                  </span>
+                </span>
+
+                <span
+                  class="mdc-evolution-chip mdc-evolution-chip--filter mdc-evolution-chip--with-primary-graphic mdc-evolution-chip--selectable"
+                  role="presentation"
+                  id="c21"
+                >
+                  <span
+                    class="mdc-evolution-chip__action mdc-evolution-chip__action--primary"
+                    role="option"
+                    aria-selected="false"
+                    tabindex="0"
+                    data-mdc-deletable="true"
+                  >
+                    <span
+                      class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"
+                    ></span>
+                    <span class="mdc-evolution-chip__graphic">
+                      <span class="mdc-evolution-chip__checkmark">
+                        <svg
+                          class="mdc-evolution-chip__checkmark-svg"
+                          viewBox="-2 -3 30 30"
+                        >
+                          <path
+                            class="mdc-evolution-chip__checkmark-path"
+                            fill="none"
+                            stroke="black"
+                            d="M1.73,12.91 8.1,19.28 22.79,4.59"
+                          />
+                        </svg>
+                      </span>
+                    </span>
+                    <span class="mdc-evolution-chip__text-label"
+                      >Filter chip</span
+                    >
+                  </span>
+                </span>
+              </span>
+            </span>
+          </div>
+        </section>
+
+        <div class="component-section-row">
+          <!-- Select -->
+          <section class="component-section select-component">
+            <div class="section-header">
+              <a
+                href="https://material.io/develop/web/components/input-controls/select-menus/"
+                class="mdc-typography--button"
+                target="_blank"
+              >
+                Select
+                <i class="material-icons">open_in_new</i>
+              </a>
+            </div>
+            <div class="component-wrapper">
+              <div class="mdc-select mdc-select--filled demo-width-class">
+                <div
+                  class="mdc-select__anchor"
+                  role="button"
+                  aria-haspopup="listbox"
+                  aria-expanded="false"
+                  aria-labelledby="demo-label demo-selected-text"
+                >
+                  <span class="mdc-select__ripple"></span>
+                  <span id="demo-label" class="mdc-floating-label"
+                    >Pick a Food Group</span
+                  >
+                  <span class="mdc-select__selected-text-container">
+                    <span
+                      id="demo-selected-text"
+                      class="mdc-select__selected-text"
+                    ></span>
+                  </span>
+                  <span class="mdc-select__dropdown-icon">
+                    <svg
+                      class="mdc-select__dropdown-icon-graphic"
+                      viewBox="7 10 10 5"
+                      focusable="false"
+                    >
+                      <polygon
+                        class="mdc-select__dropdown-icon-inactive"
+                        stroke="none"
+                        fill-rule="evenodd"
+                        points="7 10 12 15 17 10"
+                      ></polygon>
+                      <polygon
+                        class="mdc-select__dropdown-icon-active"
+                        stroke="none"
+                        fill-rule="evenodd"
+                        points="7 15 12 10 17 15"
+                      ></polygon>
+                    </svg>
+                  </span>
+                  <span class="mdc-line-ripple"></span>
+                </div>
+
+                <div
+                  class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth"
+                >
+                  <ul
+                    class="mdc-deprecated-list"
+                    role="listbox"
+                    aria-label="Food picker listbox"
+                  >
+                    <li
+                      class="mdc-deprecated-list-item mdc-deprecated-list-item--selected"
+                      aria-selected="true"
+                      data-value=""
+                      role="option"
+                    >
+                      <span class="mdc-deprecated-list-item__ripple"></span>
+                    </li>
+                    <li
+                      class="mdc-deprecated-list-item"
+                      aria-selected="false"
+                      data-value="grains"
+                      role="option"
+                    >
+                      <span class="mdc-deprecated-list-item__ripple"></span>
+                      <span class="mdc-deprecated-list-item__text">
+                        Bread, Cereal, Rice, and Pasta
+                      </span>
+                    </li>
+                    <li
+                      class="mdc-deprecated-list-item mdc-deprecated-list-item--disabled"
+                      aria-selected="false"
+                      data-value="vegetables"
+                      aria-disabled="true"
+                      role="option"
+                    >
+                      <span class="mdc-deprecated-list-item__ripple"></span>
+                      <span class="mdc-deprecated-list-item__text">
+                        Vegetables
+                      </span>
+                    </li>
+                    <li
+                      class="mdc-deprecated-list-item"
+                      aria-selected="false"
+                      data-value="fruit"
+                      role="option"
+                    >
+                      <span class="mdc-deprecated-list-item__ripple"></span>
+                      <span class="mdc-deprecated-list-item__text">
+                        Fruit
+                      </span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- Select -->
+          <section class="component-section select-component">
+            <div class="section-header"><!-- Hold space for layout --></div>
+            <div class="component-wrapper">
+              <div class="mdc-select mdc-select--outlined">
+                <div
+                  class="mdc-select__anchor"
+                  aria-labelledby="outlined-select-label"
+                >
+                  <span class="mdc-notched-outline">
+                    <span class="mdc-notched-outline__leading"></span>
+                    <span class="mdc-notched-outline__notch">
+                      <span
+                        id="outlined-select-label"
+                        class="mdc-floating-label"
+                        >Pick a Food Group</span
+                      >
+                    </span>
+                    <span class="mdc-notched-outline__trailing"></span>
+                  </span>
+                  <span class="mdc-select__selected-text-container">
+                    <span
+                      id="demo-selected-text"
+                      class="mdc-select__selected-text"
+                    ></span>
+                  </span>
+                  <span class="mdc-select__dropdown-icon">
+                    <svg
+                      class="mdc-select__dropdown-icon-graphic"
+                      viewBox="7 10 10 5"
+                      focusable="false"
+                    >
+                      <polygon
+                        class="mdc-select__dropdown-icon-inactive"
+                        stroke="none"
+                        fill-rule="evenodd"
+                        points="7 10 12 15 17 10"
+                      ></polygon>
+                      <polygon
+                        class="mdc-select__dropdown-icon-active"
+                        stroke="none"
+                        fill-rule="evenodd"
+                        points="7 15 12 10 17 15"
+                      ></polygon>
+                    </svg>
+                  </span>
+                  <div
+                    class="mdc-select__menu mdc-menu mdc-menu-surface"
+                    role="listbox"
+                  >
+                    <ul class="mdc-list">
+                      <li
+                        class="mdc-list-item"
+                        data-value=""
+                        role="option"
+                      ></li>
+                      <li
+                        class="mdc-list-item"
+                        data-value="outlined-item1"
+                        role="option"
+                      >
+                        Body 2
+                      </li>
+                      <li
+                        class="mdc-list-item"
+                        data-value="outlined-item2"
+                        aria-selected="true"
+                        role="option"
+                      >
+                        Body 2
+                      </li>
+                      <li
+                        class="mdc-list-item"
+                        data-value="outlined-item3"
+                        role="option"
+                      >
+                        Body 2
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <!-- Other elements from the select remain. -->
+                <div
+                  class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth"
+                >
+                  ...
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <!-- List -->
+        <section class="component-section list-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/lists.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              List
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div class="component-wrapper">
+            <ul class="mdc-list">
+              <li class="mdc-list-item" tabindex="0">
+                <span class="mdc-list-item__ripple"></span>
+                <span class="mdc-list-item__text">Single-line item</span>
+              </li>
+              <li class="mdc-list-item">
+                <span class="mdc-list-item__ripple"></span>
+                <span class="mdc-list-item__text">Single-line item</span>
+              </li>
+              <li class="mdc-list-item">
+                <span class="mdc-list-item__ripple"></span>
+                <span class="mdc-list-item__text">Single-line item</span>
+              </li>
+            </ul>
+
+            <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list">
+              <li class="mdc-list-item" tabindex="0">
+                <span class="mdc-list-item__ripple"></span>
+                <span
+                  class="mdc-deprecated-list-item__graphic material-icons"
+                  aria-hidden="true"
+                  >child_care</span
+                >
+                <span class="mdc-list-item__text">
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
+                  <span class="mdc-list-item__secondary-text"
+                    >Secondary text</span
+                  >
+                </span>
+              </li>
+              <li role="separator" class="mdc-list-divider"></li>
+              <li class="mdc-list-item">
+                <span class="mdc-list-item__ripple"></span>
+                <span
+                  class="mdc-deprecated-list-item__graphic material-icons"
+                  aria-hidden="true"
+                  >child_care</span
+                >
+                <span class="mdc-list-item__text">
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
+                  <span class="mdc-list-item__secondary-text"
+                    >Secondary text</span
+                  >
+                </span>
+              </li>
+              <li role="separator" class="mdc-list-divider"></li>
+              <li class="mdc-list-item">
+                <span class="mdc-list-item__ripple"></span>
+                <span
+                  class="mdc-deprecated-list-item__graphic material-icons"
+                  aria-hidden="true"
+                  >child_care</span
+                >
+                <span class="mdc-list-item__text">
+                  <span class="mdc-list-item__primary-text">Two-line item</span>
+                  <span class="mdc-list-item__secondary-text"
+                    >Secondary text</span
+                  >
+                </span>
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Deprecated List -->
+        <section class="component-section list-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/lists.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              List (Deprecated)
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div class="component-wrapper">
+            <ul class="mdc-deprecated-list">
+              <li class="mdc-deprecated-list-item" tabindex="0">
+                <span class="mdc-deprecated-list-item__ripple"></span>
+                <span class="mdc-deprecated-list-item__text"
+                  >Single-line item</span
+                >
+              </li>
+              <li class="mdc-deprecated-list-item">
+                <span class="mdc-deprecated-list-item__ripple"></span>
+                <span class="mdc-deprecated-list-item__text"
+                  >Single-line item</span
+                >
+              </li>
+              <li class="mdc-deprecated-list-item">
+                <span class="mdc-deprecated-list-item__ripple"></span>
+                <span class="mdc-deprecated-list-item__text"
+                  >Single-line item</span
+                >
+              </li>
+            </ul>
+
+            <ul
+              class="mdc-deprecated-list mdc-deprecated-list--two-line mdc-deprecated-list--avatar-list"
+            >
+              <li class="mdc-deprecated-list-item" tabindex="0">
+                <span class="mdc-deprecated-list-item__ripple"></span>
+                <span
+                  class="mdc-deprecated-list-item__graphic material-icons"
+                  aria-hidden="true"
+                  >child_care</span
+                >
+                <span class="mdc-deprecated-list-item__text">
+                  <span class="mdc-deprecated-list-item__primary-text"
+                    >Two-line item</span
+                  >
+                  <span class="mdc-deprecated-list-item__secondary-text"
+                    >Secondary text</span
+                  >
+                </span>
+              </li>
+              <li role="separator" class="mdc-deprecated-list-divider"></li>
+              <li class="mdc-deprecated-list-item">
+                <span class="mdc-deprecated-list-item__ripple"></span>
+                <span
+                  class="mdc-deprecated-list-item__graphic material-icons"
+                  aria-hidden="true"
+                  >child_care</span
+                >
+                <span class="mdc-deprecated-list-item__text">
+                  <span class="mdc-deprecated-list-item__primary-text"
+                    >Two-line item</span
+                  >
+                  <span class="mdc-deprecated-list-item__secondary-text"
+                    >Secondary text</span
+                  >
+                </span>
+              </li>
+              <li role="separator" class="mdc-deprecated-list-divider"></li>
+              <li class="mdc-deprecated-list-item">
+                <span class="mdc-deprecated-list-item__ripple"></span>
+                <span
+                  class="mdc-deprecated-list-item__graphic material-icons"
+                  aria-hidden="true"
+                  >child_care</span
+                >
+                <span class="mdc-deprecated-list-item__text">
+                  <span class="mdc-deprecated-list-item__primary-text"
+                    >Two-line item</span
+                  >
+                  <span class="mdc-deprecated-list-item__secondary-text"
+                    >Secondary text</span
+                  >
+                </span>
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- Data Table -->
+        <section class="component-section data-table-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/data-tables.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              Data Table
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div class="component-wrapper">
+            <div class="mdc-data-table">
+              <table
+                class="mdc-data-table__table"
+                aria-label="Dessert calories"
+              >
+                <thead>
+                  <tr class="mdc-data-table__header-row">
+                    <th
+                      class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      <div
+                        class="mdc-checkbox mdc-checkbox--selected mdc-data-table__header-row-checkbox"
+                      >
+                        <input
+                          type="checkbox"
+                          class="mdc-checkbox__native-control"
+                          aria-label="Toggle all rows"
+                        />
+                        <div class="mdc-checkbox__background">
+                          <svg
+                            class="mdc-checkbox__checkmark"
+                            viewbox="0 0 24 24"
+                          >
+                            <path
+                              class="mdc-checkbox__checkmark-path"
+                              fill="none"
+                              d="M1.73,12.91 8.1,19.28 22.79,4.59"
+                            />
+                          </svg>
+                          <div class="mdc-checkbox__mixedmark"></div>
+                        </div>
+                      </div>
+                    </th>
+                    <th
+                      class="mdc-data-table__header-cell"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      Dessert
+                    </th>
+                    <th
+                      class="mdc-data-table__header-cell"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      Carbs (g)
+                    </th>
+                    <th
+                      class="mdc-data-table__header-cell"
+                      role="columnheader"
+                      scope="col"
+                    >
+                      Protein (g)
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="mdc-data-table__content">
+                  <tr class="mdc-data-table__row" data-row-id="u0">
+                    <td
+                      class="mdc-data-table__cell mdc-data-table__cell--checkbox"
+                    >
+                      <div class="mdc-checkbox mdc-data-table__row-checkbox">
+                        <input
+                          type="checkbox"
+                          class="mdc-checkbox__native-control"
+                          aria-labelledby="r0"
+                        />
+                        <div class="mdc-checkbox__background">
+                          <svg
+                            class="mdc-checkbox__checkmark"
+                            viewbox="0 0 24 24"
+                          >
+                            <path
+                              class="mdc-checkbox__checkmark-path"
+                              fill="none"
+                              d="M1.73,12.91 8.1,19.28 22.79,4.59"
+                            />
+                          </svg>
+                          <div class="mdc-checkbox__mixedmark"></div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="mdc-data-table__cell" id="r0">Froyo</td>
+                    <td
+                      class="mdc-data-table__cell mdc-data-table__cell--numeric"
+                    >
+                      24
+                    </td>
+                    <td
+                      class="mdc-data-table__cell mdc-data-table__cell--numeric"
+                    >
+                      4.0
+                    </td>
+                  </tr>
+                  <tr
+                    class="mdc-data-table__row mdc-data-table__row--selected"
+                    aria-selected="true"
+                    data-row-id="u1"
+                  >
+                    <td
+                      class="mdc-data-table__cell mdc-data-table__cell--checkbox"
+                    >
+                      <div
+                        class="mdc-checkbox mdc-checkbox--selected mdc-data-table__row-checkbox"
+                      >
+                        <input
+                          type="checkbox"
+                          class="mdc-checkbox__native-control"
+                          checked
+                          aria-labelledby="r1"
+                        />
+                        <div class="mdc-checkbox__background">
+                          <svg
+                            class="mdc-checkbox__checkmark"
+                            viewbox="0 0 24 24"
+                          >
+                            <path
+                              class="mdc-checkbox__checkmark-path"
+                              fill="none"
+                              d="M1.73,12.91 8.1,19.28 22.79,4.59"
+                            />
+                          </svg>
+                          <div class="mdc-checkbox__mixedmark"></div>
+                        </div>
+                      </div>
+                    </td>
+                    <td class="mdc-data-table__cell" id="r1">Eclair</td>
+                    <td
+                      class="mdc-data-table__cell mdc-data-table__cell--numeric"
+                    >
+                      37
+                    </td>
+                    <td
+                      class="mdc-data-table__cell mdc-data-table__cell--numeric"
+                    >
+                      4.3
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </section>
+      </div>
+      <div class="column column-2">
+        <!-- FAB -->
+        <section class="component-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/buttons-floating-action-button.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              FAB
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div class="component-wrapper fab-component-wrapper">
+            <button class="mdc-fab mdc-fab--extended">
+              <span class="material-icons mdc-fab__icon">edit</span>
+              <span class="mdc-fab__ripple"></span>
+              <span class="mdc-fab__label">Button</span>
+            </button>
+            <button class="mdc-fab" aria-label="Favorite">
+              <span class="mdc-fab__ripple"></span>
+              <span class="mdc-fab__icon material-icons">favorite</span>
+            </button>
+            <button class="mdc-fab mdc-fab--mini" aria-label="Add">
+              <span class="mdc-fab__ripple"></span>
+              <span class="mdc-fab__icon material-icons">add</span>
+            </button>
+          </div>
+        </section>
+
+        <!-- Card -->
+        <section class="component-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/cards.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              Card
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div class="component-wrapper card-component-wrapper">
+            <div class="mdc-card demo-card">
+              <div class="mdc-card__primary-action" tabindex="0">
+                <div
+                  class="mdc-card__media mdc-card__media--16-9 demo-card__media"
+                  style="
+                    background-image: url('https://cdn.glitch.com/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-landscape-short.png?1553629848209');
+                  "
+                ></div>
+                <div class="demo-card__primary">
+                  <h3
+                    class="demo-card__subtitle mdc-typography mdc-typography--overline"
+                  >
+                    Overline
+                  </h3>
+                  <h2
+                    class="demo-card__title mdc-typography mdc-typography--headline6"
+                  >
+                    Headline 6
+                  </h2>
+                </div>
+                <div
+                  class="demo-card__secondary mdc-typography mdc-typography--body2"
+                >
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                </div>
+              </div>
+              <div class="mdc-card__actions">
+                <div class="mdc-card__action-buttons">
+                  <button
+                    class="mdc-button mdc-card__action mdc-card__action--button"
+                  >
+                    <span class="mdc-button__ripple"></span>Button
+                  </button>
+                  <button
+                    class="mdc-button mdc-card__action mdc-card__action--button"
+                  >
+                    <span class="mdc-button__ripple"></span>Button
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Text field -->
+        <section class="component-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/text-fields.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              Text field
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div
+            class="component-wrapper text-field-component-wrapper text-field-component-wrapper-1"
+          >
+            <label
+              class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trialing-icon"
+            >
+              <span class="mdc-notched-outline">
+                <span class="mdc-notched-outline__leading"></span>
+                <span class="mdc-notched-outline__notch">
+                  <span class="mdc-floating-label" id="my-label-id"
+                    >Your Name</span
+                  >
+                </span>
+                <span class="mdc-notched-outline__trailing"></span>
+              </span>
+              <input
+                type="text"
+                class="mdc-text-field__input"
+                aria-labelledby="my-label-id"
+              />
+              <i
+                class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing"
+                >visibility</i
+              >
+            </label>
+            <div class="mdc-text-field-helper-line">
+              <div
+                class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent"
+              >
+                Assistive text
+              </div>
+            </div>
+          </div>
+          <div
+            class="component-wrapper text-field-component-wrapper text-field-component-wrapper-2"
+          >
+            <label
+              class="mdc-text-field mdc-text-field--filled mdc-text-field--with-leading-icon"
+            >
+              <span class="mdc-text-field__ripple"></span>
+              <span class="mdc-floating-label" id="my-label-id">Hint text</span>
+              <i
+                class="material-icons mdc-text-field__icon mdc-text-field__icon--leading"
+                >visibility</i
+              >
+              <input
+                class="mdc-text-field__input"
+                type="text"
+                aria-labelledby="my-label-id"
+              />
+              <span class="mdc-line-ripple"></span>
+            </label>
+            <div class="mdc-text-field-helper-line">
+              <div
+                class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent"
+              >
+                Assistive text
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Tabs -->
+        <section class="component-section tabs-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/tabs.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              Tabs
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div class="component-wrapper">
+            <div class="mdc-tab-bar" role="tablist">
+              <div class="mdc-tab-scroller">
+                <div class="mdc-tab-scroller__scroll-area">
+                  <div class="mdc-tab-scroller__scroll-content">
+                    <button
+                      class="mdc-tab mdc-tab--active"
+                      role="tab"
+                      aria-selected="true"
+                      tabindex="0"
+                    >
+                      <span class="mdc-tab__content">
+                        <span class="mdc-tab__text-label">Button</span>
+                      </span>
+                      <span class="mdc-tab-indicator mdc-tab-indicator--active">
+                        <span
+                          class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"
+                        ></span>
+                      </span>
+                      <span class="mdc-tab__ripple"></span>
+                    </button>
+                    <button
+                      class="mdc-tab"
+                      role="tab"
+                      aria-selected="true"
+                      tabindex="0"
+                    >
+                      <span class="mdc-tab__content">
+                        <span class="mdc-tab__text-label">Button</span>
+                      </span>
+                      <span class="mdc-tab-indicator">
+                        <span
+                          class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"
+                        ></span>
+                      </span>
+                      <span class="mdc-tab__ripple"></span>
+                    </button>
+                    <button
+                      class="mdc-tab"
+                      role="tab"
+                      aria-selected="true"
+                      tabindex="0"
+                    >
+                      <span class="mdc-tab__content">
+                        <span class="mdc-tab__text-label">Button</span>
+                      </span>
+                      <span class="mdc-tab-indicator">
+                        <span
+                          class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"
+                        ></span>
+                      </span>
+                      <span class="mdc-tab__ripple"></span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Slider -->
+        <section class="component-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/sliders.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              Slider
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div class="component-wrapper">
+            <div class="mdc-slider">
+              <input
+                class="mdc-slider__input"
+                type="range"
+                min="0"
+                max="100"
+                value="50"
+                name="volume"
+                aria-label="Continuous slider demo"
+              />
+              <div class="mdc-slider__track">
+                <div class="mdc-slider__track--inactive"></div>
+                <div class="mdc-slider__track--active">
+                  <div class="mdc-slider__track--active_fill"></div>
+                </div>
+              </div>
+              <div class="mdc-slider__thumb">
+                <div class="mdc-slider__thumb-knob"></div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Snackbar -->
+        <section class="component-section snackbar-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/snackbars.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              Snackbar
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div class="component-wrapper">
+            <div class="mdc-snackbar mdc-snackbar--open">
+              <div class="mdc-snackbar__surface">
+                <div
+                  class="mdc-snackbar__label"
+                  role="status"
+                  aria-live="polite"
+                >
+                  Marked as favorite.
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Dialog -->
+        <section class="component-section dialog-component-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/dialogs.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              Dialog
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div class="component-wrapper dialog-component-wrapper">
+            <div
+              class="mdc-dialog mdc-dialog--open"
+              role="alertdialog"
+              aria-modal="true"
+              aria-labelledby="my-dialog-title"
+              aria-describedby="my-dialog-content"
+            >
+              <div class="mdc-dialog__container">
+                <div class="mdc-dialog__surface">
+                  <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
+                  <h2 class="mdc-dialog__title" id="my-dialog-title">
+                    Headline 6
+                  </h2>
+                  <div class="mdc-dialog__content" id="my-dialog-content">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua.
+                  </div>
+                  <footer class="mdc-dialog__actions">
+                    <button
+                      type="button"
+                      class="mdc-button mdc-dialog__button"
+                      data-mdc-dialog-action="no"
+                    >
+                      <span class="mdc-button__ripple"></span>
+                      <span class="mdc-button__label">Button</span>
+                    </button>
+                    <button
+                      type="button"
+                      class="mdc-button mdc-dialog__button"
+                      data-mdc-dialog-action="yes"
+                    >
+                      <span class="mdc-button__ripple"></span>
+                      <span class="mdc-button__label">Button</span>
+                    </button>
+                  </footer>
+                </div>
+              </div>
+              <!-- Note scrim element has been removed for this stickersheet -->
+              <!-- <div class="mdc-dialog__scrim"></div> -->
+            </div>
+          </div>
+        </section>
+
+        <!-- Image List -->
+        <section class="component-section image-list-section">
+          <div class="section-header">
+            <a
+              href="https://material.io/design/components/image-lists.html"
+              class="mdc-typography--button"
+              target="_blank"
+            >
+              Image List
+              <i class="material-icons">open_in_new</i>
+            </a>
+          </div>
+          <div class="component-wrapper">
+            <ul class="mdc-image-list mdc-image-list--masonry">
+              <li class="mdc-image-list__item">
+                <img
+                  class="mdc-image-list__image"
+                  src="https://cdn.glitch.com/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-portrait.png?1553629847850"
+                />
+              </li>
+              <li class="mdc-image-list__item">
+                <img
+                  class="mdc-image-list__image"
+                  src="https://cdn.glitch.com/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-landscape-short.png?1553629848209"
+                />
+              </li>
+              <li class="mdc-image-list__item">
+                <img
+                  class="mdc-image-list__image"
+                  src="https://cdn.glitch.com/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-landscape-med.png?1553629847913"
+                />
+              </li>
+              <li class="mdc-image-list__item">
+                <img
+                  class="mdc-image-list__image"
+                  src="https://cdn.glitch.com/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-landscape-short.png?1553629848209"
+                />
+              </li>
+              <li class="mdc-image-list__item">
+                <img
+                  class="mdc-image-list__image"
+                  src="https://cdn.glitch.com/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-portrait.png?1553629847850"
+                />
+              </li>
+              <li class="mdc-image-list__item">
+                <img
+                  class="mdc-image-list__image"
+                  src="https://cdn.glitch.com/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-landscape-short.png?1553629848209"
+                />
+              </li>
+            </ul>
+          </div>
+        </section>
+      </div>
+    </main>
+  </div>
+</div>