Drop polymer from authorize and onboarding entrypoint (#15760)

* Drop polymer from authorize and onboarding entrypoint

* Update ha-icon.ts

* dedupe

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -114,9 +114,6 @@ class HassioAddonAudio extends LitElement {
         ha-card {
           display: block;
         }
-        paper-item {
-          width: 450px;
-        }
         .card-actions {
           text-align: right;
         }

hassio/src/backups/hassio-backups.ts

@@ -248,9 +248,9 @@ export class HassioBackups extends LitElement {
                         class="warning"
                         @click=${this._deleteSelected}
                       ></ha-icon-button>
-                      <paper-tooltip animation-delay="0" for="delete-btn">
+                      <simple-tooltip animation-delay="0" for="delete-btn">
                         ${this.supervisor.localize("backup.delete_selected")}
-                      </paper-tooltip>
+                      </simple-tooltip>
                     `}
               </div>
             </div> `

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -4,7 +4,7 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -128,7 +128,7 @@ class HassioRepositoriesDialog extends LitElement {
                         @click=${this._removeRepository}
                       >
                       </ha-icon-button>
-                      <paper-tooltip
+                      <simple-tooltip
                         animation-delay="0"
                         position="bottom"
                         offset="1"
@@ -138,7 +138,7 @@ class HassioRepositoriesDialog extends LitElement {
                             ? "dialog.repositories.used"
                             : "dialog.repositories.remove"
                         )}
-                      </paper-tooltip>
+                      </simple-tooltip>
                     </div>
                   </paper-item>
                 `

package.json

@@ -48,6 +48,7 @@
     "@lit-labs/context": "0.2.0",
     "@lit-labs/motion": "1.0.3",
     "@lit-labs/virtualizer": "1.0.1",
+    "@lrnwebcomponents/simple-tooltip": "4.1.0",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
     "@material/mwc-button": "0.27.0",
@@ -77,17 +78,14 @@
     "@mdi/svg": "7.2.96",
     "@polymer/app-layout": "3.1.0",
     "@polymer/iron-flex-layout": "3.0.1",
-    "@polymer/iron-icon": "3.0.1",
     "@polymer/iron-input": "3.0.1",
     "@polymer/iron-resizable-behavior": "3.0.1",
     "@polymer/paper-input": "3.2.1",
     "@polymer/paper-item": "3.0.1",
     "@polymer/paper-listbox": "3.0.1",
     "@polymer/paper-slider": "3.0.1",
-    "@polymer/paper-styles": "3.0.1",
     "@polymer/paper-tabs": "3.1.0",
     "@polymer/paper-toast": "3.0.1",
-    "@polymer/paper-tooltip": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
     "@vaadin/combo-box": "23.3.9",

src/auth/ha-pick-auth-provider.ts

@@ -1,9 +1,9 @@
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
+import "@material/mwc-list";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "../components/ha-icon-next";
+import "../components/ha-list-item";
 import { AuthProvider } from "../data/auth";
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 
@@ -20,18 +20,21 @@ export class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
   protected render() {
     return html`
       <p>${this.localize("ui.panel.page-authorize.pick_auth_provider")}:</p>
-      ${this.authProviders.map(
-        (provider) => html`
-          <paper-item
-            role="button"
-            .auth_provider=${provider}
-            @click=${this._handlePick}
-          >
-            <paper-item-body>${provider.name}</paper-item-body>
-            <ha-icon-next></ha-icon-next>
-          </paper-item>
-        `
-      )}
+      <mwc-list>
+        ${this.authProviders.map(
+          (provider) => html`
+            <ha-list-item
+              hasMeta
+              role="button"
+              .auth_provider=${provider}
+              @click=${this._handlePick}
+            >
+              ${provider.name}
+              <ha-icon-next slot="meta"></ha-icon-next>
+            </ha-list-item>
+          `
+        )}</mwc-list
+      >
     `;
   }
 
@@ -40,11 +43,12 @@ export class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
   }
 
   static styles = css`
-    paper-item {
-      cursor: pointer;
-    }
     p {
       margin-top: 0;
     }
+    mwc-list {
+      margin: 0 -16px;
+      --mdc-list-side-padding: 16px;
+    }
   `;
 }

src/components/data-table/ha-data-table-icon.ts

@@ -48,8 +48,8 @@ class HaDataTableIcon extends LitElement {
         outline: none;
         font-size: 10px;
         line-height: 1;
-        background-color: var(--paper-tooltip-background, #616161);
-        color: var(--paper-tooltip-text-color, white);
+        background-color: var(--simple-tooltip-background, #616161);
+        color: var(--simple-tooltip-text-color, white);
         padding: 8px;
         border-radius: 2px;
       }

src/components/entity/state-info.ts

@@ -1,4 +1,4 @@
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -45,7 +45,7 @@ class StateInfo extends LitElement {
                 .datetime=${this.stateObj.last_changed}
                 capitalize
               ></ha-relative-time>
-              <paper-tooltip animation-delay="0" for="last_changed">
+              <simple-tooltip animation-delay="0" for="last_changed">
                 <div>
                   <div class="row">
                     <span class="column-name">
@@ -72,7 +72,7 @@ class StateInfo extends LitElement {
                     ></ha-relative-time>
                   </div>
                 </div>
-              </paper-tooltip>
+              </simple-tooltip>
             </div>`
           : html`<div class="extra-info"><slot></slot></div>`}
       </div>`;

src/components/ha-analytics.ts

@@ -1,4 +1,4 @@
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
@@ -76,11 +76,11 @@ export class HaAnalytics extends LitElement {
                 </ha-switch>
                 ${!baseEnabled
                   ? html`
-                      <paper-tooltip animation-delay="0" position="right">
+                      <simple-tooltip animation-delay="0" position="right">
                         ${this.hass.localize(
                           `ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
                         )}
-                      </paper-tooltip>
+                      </simple-tooltip>
                     `
                   : ""}
               </span>

src/components/ha-help-tooltip.ts

@@ -1,5 +1,5 @@
 import { mdiHelpCircle } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "./ha-svg-icon";
@@ -13,11 +13,11 @@ export class HaHelpTooltip extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
-      <paper-tooltip
+      <simple-tooltip
         offset="4"
         .position=${this.position}
         .fitToVisibleBounds=${true}
-        >${this.label}</paper-tooltip
+        >${this.label}</simple-tooltip
       >
     `;
   }

src/components/ha-icon-overflow-menu.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -75,9 +75,12 @@ export class HaIconOverflowMenu extends LitElement {
                 ? html`<div role="separator"></div>`
                 : html`<div>
                     ${item.tooltip
-                      ? html`<paper-tooltip animation-delay="0" position="left">
+                      ? html`<simple-tooltip
+                          animation-delay="0"
+                          position="left"
+                        >
                           ${item.tooltip}
-                        </paper-tooltip>`
+                        </simple-tooltip>`
                       : ""}
                     <ha-icon-button
                       @click=${item.action}

src/components/ha-icon.ts

@@ -1,4 +1,3 @@
-import "@polymer/iron-icon/iron-icon";
 import {
   css,
   CSSResultGroup,
@@ -66,7 +65,8 @@ export class HaIcon extends LitElement {
       return nothing;
     }
     if (this._legacy) {
-      return html`<iron-icon .icon=${this.icon}></iron-icon>`;
+      return html`<!-- @ts-ignore we don't provice the iron-icon element -->
+        <iron-icon .icon=${this.icon}></iron-icon>`;
     }
     return html`<ha-svg-icon
       .path=${this._path}

src/components/ha-network.ts

@@ -1,5 +1,5 @@
 import { mdiStar } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import {
   css,
   CSSResultGroup,

src/components/ha-settings-row.ts

@@ -1,4 +1,3 @@
-import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 
@@ -13,13 +12,14 @@ export class HaSettingsRow extends LitElement {
     return html`
       <div class="prefix-wrap">
         <slot name="prefix"></slot>
-        <paper-item-body
+        <div
+          class="body"
           ?two-line=${!this.threeLine}
           ?three-line=${this.threeLine}
         >
           <slot name="heading"></slot>
-          <div secondary><slot name="description"></slot></div>
-        </paper-item-body>
+          <div class="secondary"><slot name="description"></slot></div>
+        </div>
       </div>
       <div class="content"><slot></slot></div>
     `;
@@ -34,10 +34,38 @@ export class HaSettingsRow extends LitElement {
         align-self: auto;
         align-items: center;
       }
-      paper-item-body {
+      .body {
         padding: 8px 16px 8px 0;
+        overflow: hidden;
+        display: var(--layout-vertical_-_display);
+        flex-direction: var(--layout-vertical_-_flex-direction);
+        justify-content: var(--layout-center-justified_-_justify-content);
+        flex: var(--layout-flex_-_flex);
+        flex-basis: var(--layout-flex_-_flex-basis);
       }
-      paper-item-body[two-line] {
+      .body[three-line] {
+        min-height: var(--paper-item-body-three-line-min-height, 88px);
+      }
+      .body > * {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .body > .secondary {
+        font-family: var(--paper-font-body1_-_font-family);
+        -webkit-font-smoothing: var(
+          --paper-font-body1_-_-webkit-font-smoothing
+        );
+        font-size: var(--paper-font-body1_-_font-size);
+        font-weight: var(--paper-font-body1_-_font-weight);
+        line-height: var(--paper-font-body1_-_line-height);
+
+        color: var(
+          --paper-item-body-secondary-color,
+          var(--secondary-text-color)
+        );
+      }
+      .body[two-line] {
         min-height: calc(
           var(--paper-item-body-two-line-min-height, 72px) - 16px
         );

src/components/ha-target-picker.ts

@@ -9,7 +9,7 @@ import {
   mdiSofa,
   mdiUnfoldMoreVertical,
 } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
 import { HassEntity, HassServiceTarget } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, unsafeCSS, nothing } from "lit";
@@ -248,10 +248,10 @@ export class HaTargetPicker extends LitElement {
                 .type=${type}
                 @click=${this._handleExpand}
               ></ha-icon-button>
-              <paper-tooltip class="expand" animation-delay="0"
+              <simple-tooltip class="expand" animation-delay="0"
                 >${this.hass.localize(
                   `ui.components.target-picker.expand_${type}`
-                )}</paper-tooltip
+                )}</simple-tooltip
               >
             </span>`}
         <span role="gridcell">
@@ -266,10 +266,10 @@ export class HaTargetPicker extends LitElement {
             .type=${type}
             @click=${this._handleRemove}
           ></ha-icon-button>
-          <paper-tooltip animation-delay="0"
+          <simple-tooltip animation-delay="0"
             >${this.hass.localize(
               `ui.components.target-picker.remove_${type}`
-            )}</paper-tooltip
+            )}</simple-tooltip
           >
         </span>
       </div>
@@ -670,7 +670,7 @@ export class HaTargetPicker extends LitElement {
       .mdc-chip:hover {
         z-index: 5;
       }
-      paper-tooltip.expand {
+      simple-tooltip.expand {
         min-width: 200px;
       }
       :host([disabled]) .mdc-chip {

src/components/media-player/ha-media-player-browse.ts

@@ -5,7 +5,7 @@ import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import {
   css,
   CSSResultGroup,
@@ -600,8 +600,8 @@ export class HaMediaPlayerBrowse extends LitElement {
           </div>
           <div class="title">
             ${child.title}
-            <paper-tooltip fitToVisibleBounds position="top" offset="4"
-              >${child.title}</paper-tooltip
+            <simple-tooltip fitToVisibleBounds position="top" offset="4"
+              >${child.title}</simple-tooltip
             >
           </div>
         </ha-card>

src/dialogs/config-flow/step-flow-form.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import {
   css,
   CSSResultGroup,

src/dialogs/notifications/persistent-notification-item.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { formatDateTime } from "../../common/datetime/format_date_time";
@@ -33,9 +33,9 @@ export class HuiPersistentNotificationItem extends LitElement {
               .datetime=${this.notification.created_at}
               capitalize
             ></ha-relative-time>
-            <paper-tooltip animation-delay="0">
+            <simple-tooltip animation-delay="0">
               ${this._computeTooltip(this.hass, this.notification)}
-            </paper-tooltip>
+            </simple-tooltip>
           </span>
         </div>
 

src/layouts/hass-tabs-subpage-data-table.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button/mwc-button";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";

src/panels/config/areas/ha-config-area-page.ts

@@ -553,9 +553,9 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
       </a>
       ${!entityState.attributes.id
         ? html`
-            <paper-tooltip animation-delay="0">
+            <simple-tooltip animation-delay="0">
               ${this.hass.localize("ui.panel.config.devices.cant_edit")}
-            </paper-tooltip>
+            </simple-tooltip>
           `
         : ""}
     </div>`;
@@ -577,9 +577,9 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
       </a>
       ${!entityState.attributes.id
         ? html`
-            <paper-tooltip animation-delay="0">
+            <simple-tooltip animation-delay="0">
               ${this.hass.localize("ui.panel.config.devices.cant_edit")}
-            </paper-tooltip>
+            </simple-tooltip>
           `
         : ""}
     </div>`;

src/panels/config/automation/ha-automation-picker.ts

@@ -10,7 +10,7 @@ import {
   mdiStopCircleOutline,
   mdiTransitConnection,
 } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -159,11 +159,11 @@ class HaAutomationPicker extends LitElement {
             template: (disabled: boolean) =>
               disabled
                 ? html`
-                    <paper-tooltip animation-delay="0" position="left">
+                    <simple-tooltip animation-delay="0" position="left">
                       ${this.hass.localize(
                         "ui.panel.config.automation.picker.disabled"
                       )}
-                    </paper-tooltip>
+                    </simple-tooltip>
                     <ha-svg-icon
                       .path=${mdiCancel}
                       style="color: var(--secondary-text-color)"

src/panels/config/backup/ha-config-backup.ts

@@ -1,5 +1,5 @@
 import { mdiDelete, mdiDownload, mdiPlus } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import {
   css,
   CSSResultGroup,

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -5,7 +5,7 @@ import {
   mdiRobot,
   mdiShareVariant,
 } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import {
   CSSResultGroup,
   html,

src/panels/config/devices/ha-config-device-page.ts

@@ -8,7 +8,7 @@ import {
   mdiPencil,
   mdiPlusCircle,
 } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
@@ -403,11 +403,11 @@ export class HaConfigDevicePage extends LitElement {
                             </a>
                             ${!entityState.attributes.id
                               ? html`
-                                  <paper-tooltip animation-delay="0">
+                                  <simple-tooltip animation-delay="0">
                                     ${this.hass.localize(
                                       "ui.panel.config.devices.cant_edit"
                                     )}
-                                  </paper-tooltip>
+                                  </simple-tooltip>
                                 `
                               : ""}
                           </div> `
@@ -497,11 +497,11 @@ export class HaConfigDevicePage extends LitElement {
                                 </a>
                                 ${!entityState.attributes.id
                                   ? html`
-                                      <paper-tooltip animation-delay="0">
+                                      <simple-tooltip animation-delay="0">
                                         ${this.hass.localize(
                                           "ui.panel.config.devices.cant_edit"
                                         )}
-                                      </paper-tooltip>
+                                      </simple-tooltip>
                                     `
                                   : ""}
                               </div>

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -1,6 +1,6 @@
 import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { mdiCancel, mdiFilterVariant, mdiPlus } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -370,9 +370,9 @@ export class HaConfigDeviceDashboard extends LitElement {
                   style="display:inline-block; position: relative;"
                 >
                   <ha-svg-icon .path=${mdiCancel}></ha-svg-icon>
-                  <paper-tooltip animation-delay="0" position="left">
+                  <simple-tooltip animation-delay="0" position="left">
                     ${this.hass.localize("ui.panel.config.devices.disabled")}
-                  </paper-tooltip>
+                  </simple-tooltip>
                 </div>`
               : "—",
         };

src/panels/config/entities/ha-config-entities.ts

@@ -10,7 +10,7 @@ import {
   mdiRestoreAlert,
   mdiUndo,
 } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -276,7 +276,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                       ? mdiEyeOff
                       : mdiPencilOff}
                   ></ha-svg-icon>
-                  <paper-tooltip animation-delay="0" position="left">
+                  <simple-tooltip animation-delay="0" position="left">
                     ${entity.restored
                       ? this.hass.localize(
                           "ui.panel.config.entities.picker.status.restored"
@@ -296,7 +296,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                       : this.hass.localize(
                           "ui.panel.config.entities.picker.status.readonly"
                         )}
-                  </paper-tooltip>
+                  </simple-tooltip>
                 </div>
               `
             : "—",
@@ -576,33 +576,33 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                           .path=${mdiUndo}
                           .label=${this.hass.localize("ui.common.enable")}
                         ></ha-icon-button>
-                        <paper-tooltip animation-delay="0" for="enable-btn">
+                        <simple-tooltip animation-delay="0" for="enable-btn">
                           ${this.hass.localize(
                             "ui.panel.config.entities.picker.enable_selected.button"
                           )}
-                        </paper-tooltip>
+                        </simple-tooltip>
                         <ha-icon-button
                           id="disable-btn"
                           @click=${this._disableSelected}
                           .path=${mdiCancel}
                           .label=${this.hass.localize("ui.common.disable")}
                         ></ha-icon-button>
-                        <paper-tooltip animation-delay="0" for="disable-btn">
+                        <simple-tooltip animation-delay="0" for="disable-btn">
                           ${this.hass.localize(
                             "ui.panel.config.entities.picker.disable_selected.button"
                           )}
-                        </paper-tooltip>
+                        </simple-tooltip>
                         <ha-icon-button
                           id="hide-btn"
                           @click=${this._hideSelected}
                           .path=${mdiEyeOff}
                           .label=${this.hass.localize("ui.common.hide")}
                         ></ha-icon-button>
-                        <paper-tooltip animation-delay="0" for="hide-btn">
+                        <simple-tooltip animation-delay="0" for="hide-btn">
                           ${this.hass.localize(
                             "ui.panel.config.entities.picker.hide_selected.button"
                           )}
-                        </paper-tooltip>
+                        </simple-tooltip>
                         <ha-icon-button
                           class="warning"
                           id="remove-btn"
@@ -610,11 +610,11 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
                           .path=${mdiDelete}
                           .label=${this.hass.localize("ui.common.remove")}
                         ></ha-icon-button>
-                        <paper-tooltip animation-delay="0" for="remove-btn">
+                        <simple-tooltip animation-delay="0" for="remove-btn">
                           ${this.hass.localize(
                             "ui.panel.config.entities.picker.remove_selected.button"
                           )}
-                        </paper-tooltip>
+                        </simple-tooltip>
                       `}
                 </div>
               </div>

src/panels/config/helpers/dialog-helper-detail.ts

@@ -1,7 +1,6 @@
 import "@material/mwc-button/mwc-button";
 import { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item-base";
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import {
   css,
   CSSResultGroup,
@@ -199,12 +198,12 @@ export class DialogHelperDetail extends LitElement {
               </ha-list-item>
               ${!isLoaded
                 ? html`
-                    <paper-tooltip animation-delay="0"
+                    <simple-tooltip animation-delay="0"
                       >${this.hass.localize(
                         "ui.dialogs.helper_settings.platform_not_loaded",
                         "platform",
                         domain
-                      )}</paper-tooltip
+                      )}</simple-tooltip
                     >
                   `
                 : ""}

src/panels/config/helpers/ha-config-helpers.ts

@@ -1,5 +1,5 @@
 import { mdiPencilOff, mdiPlus } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -139,11 +139,11 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
                   style="display:inline-block; position: relative;"
                 >
                   <ha-svg-icon .path=${mdiPencilOff}></ha-svg-icon>
-                  <paper-tooltip animation-delay="0" position="left">
+                  <simple-tooltip animation-delay="0" position="left">
                     ${this.hass.localize(
                       "ui.panel.config.entities.picker.status.readonly"
                     )}
-                  </paper-tooltip>
+                  </simple-tooltip>
                 </div>
               `
             : ""}

src/panels/config/integrations/ha-integration-card.ts

@@ -22,7 +22,7 @@ import {
 } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -192,11 +192,11 @@ export class HaIntegrationCard extends LitElement {
                       class="info"
                       .path=${mdiProgressHelper}
                     ></ha-svg-icon
-                    ><paper-tooltip animation-delay="0" position="left">
+                    ><simple-tooltip animation-delay="0" position="left">
                       ${this.hass.localize(
                         `ui.panel.config.integrations.config_entry.state.setup_in_progress`
                       )}
-                    </paper-tooltip>
+                    </simple-tooltip>
                   </span>`
                 : ""}
               ${ERROR_STATES.includes(item.state)
@@ -207,11 +207,11 @@ export class HaIntegrationCard extends LitElement {
                         ? mdiReloadAlert
                         : mdiAlertCircle}
                     ></ha-svg-icon
-                    ><paper-tooltip animation-delay="0" position="left">
+                    ><simple-tooltip animation-delay="0" position="left">
                       ${this.hass.localize(
                         `ui.panel.config.integrations.config_entry.state.${item.state}`
                       )}
-                    </paper-tooltip>
+                    </simple-tooltip>
                   </span>`
                 : ""}
               <ha-icon-next></ha-icon-next>

src/panels/config/integrations/ha-integration-header.ts

@@ -1,5 +1,5 @@
 import { mdiBugPlay, mdiCloud, mdiPackageVariant, mdiSyncOff } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-svg-icon";
@@ -115,8 +115,8 @@ export class HaIntegrationHeader extends LitElement {
                   ([icon, description]) => html`
                     <span>
                       <ha-svg-icon .path=${icon}></ha-svg-icon>
-                      <paper-tooltip animation-delay="0"
-                        >${description}</paper-tooltip
+                      <simple-tooltip animation-delay="0"
+                        >${description}</simple-tooltip
                       >
                     </span>
                   `
@@ -203,7 +203,7 @@ export class HaIntegrationHeader extends LitElement {
       height: 20px;
       margin: 4px;
     }
-    paper-tooltip {
+    simple-tooltip {
       white-space: nowrap;
     }
   `;

src/panels/config/integrations/ha-integration-list-item.ts

@@ -72,20 +72,20 @@ export class HaIntegrationListItem extends ListItemBase {
       ${this.integration.cloud
         ? html`<span
             ><ha-svg-icon .path=${mdiCloudOutline}></ha-svg-icon
-            ><paper-tooltip animation-delay="0" position="left"
+            ><simple-tooltip animation-delay="0" position="left"
               >${this.hass.localize(
                 "ui.panel.config.integrations.config_entry.depends_on_cloud"
-              )}</paper-tooltip
+              )}</simple-tooltip
             ></span
           >`
         : ""}
       ${!this.integration.is_built_in
         ? html`<span
             ><ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon
-            ><paper-tooltip animation-delay="0" position="left"
+            ><simple-tooltip animation-delay="0" position="left"
               >${this.hass.localize(
                 "ui.panel.config.integrations.config_entry.provided_by_custom_integration"
-              )}</paper-tooltip
+              )}</simple-tooltip
             ></span
           >`
         : ""}
@@ -93,10 +93,10 @@ export class HaIntegrationListItem extends ListItemBase {
       !this.integration.integrations &&
       !this.integration.iot_standards
         ? html`<span
-            ><paper-tooltip animation-delay="0" position="left"
+            ><simple-tooltip animation-delay="0" position="left"
               >${this.hass.localize(
                 "ui.panel.config.integrations.config_entry.yaml_only"
-              )}</paper-tooltip
+              )}</simple-tooltip
             ><ha-svg-icon
               .path=${mdiOpenInNew}
               class="open-in-new"

src/panels/config/logs/dialog-system-log-detail.ts

@@ -1,5 +1,5 @@
 import { mdiClose, mdiContentCopy } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -5,7 +5,7 @@ import {
   mdiOpenInNew,
   mdiPlus,
 } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
@@ -91,11 +91,11 @@ export class HaConfigLovelaceDashboards extends LitElement {
                       style="padding-left: 10px; padding-inline-start: 10px; direction: var(--direction);"
                       .path=${mdiCheckCircleOutline}
                     ></ha-svg-icon>
-                    <paper-tooltip animation-delay="0">
+                    <simple-tooltip animation-delay="0">
                       ${this.hass.localize(
                         `ui.panel.config.lovelace.dashboards.default_dashboard`
                       )}
-                    </paper-tooltip>
+                    </simple-tooltip>
                   `
                 : ""}
             `;

src/panels/config/scene/ha-scene-dashboard.ts

@@ -7,7 +7,7 @@ import {
   mdiPlay,
   mdiPlus,
 } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -131,11 +131,11 @@ class HaSceneDashboard extends LitElement {
         template: (_info, scene: any) =>
           !scene.attributes.id
             ? html`
-                <paper-tooltip animation-delay="0" position="left">
+                <simple-tooltip animation-delay="0" position="left">
                   ${this.hass.localize(
                     "ui.panel.config.scene.picker.only_editable"
                   )}
-                </paper-tooltip>
+                </simple-tooltip>
                 <ha-svg-icon
                   .path=${mdiPencilOff}
                   style="color: var(--secondary-text-color)"

src/panels/config/users/dialog-user-detail.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 
@@ -169,11 +169,11 @@ class DialogUserDetail extends LitElement {
           </mwc-button>
           ${user.system_generated
             ? html`
-                <paper-tooltip animation-delay="0" position="right">
+                <simple-tooltip animation-delay="0" position="right">
                   ${this.hass.localize(
                     "ui.panel.config.users.editor.system_generated_users_not_removable"
                   )}
-                </paper-tooltip>
+                </simple-tooltip>
               `
             : ""}
           ${!user.system_generated && this.hass.user?.is_owner
@@ -196,11 +196,11 @@ class DialogUserDetail extends LitElement {
           </mwc-button>
           ${user.system_generated
             ? html`
-                <paper-tooltip animation-delay="0" position="left">
+                <simple-tooltip animation-delay="0" position="left">
                   ${this.hass.localize(
                     "ui.panel.config.users.editor.system_generated_users_not_editable"
                   )}
-                </paper-tooltip>
+                </simple-tooltip>
               `
             : ""}
         </div>

src/panels/config/zone/ha-config-zone.ts

@@ -2,7 +2,7 @@ import { mdiCog, mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
@@ -200,11 +200,11 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                       ></ha-icon-button>
                       ${stateObject.entity_id !== "zone.home"
                         ? html`
-                            <paper-tooltip animation-delay="0" position="left">
+                            <simple-tooltip animation-delay="0" position="left">
                               ${hass.localize(
                                 "ui.panel.config.zone.configured_in_yaml"
                               )}
-                            </paper-tooltip>
+                            </simple-tooltip>
                           `
                         : ""}
                     </div>

src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts

@@ -1,5 +1,5 @@
 import { mdiInformation } from "@mdi/js";
-import "@polymer/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -118,13 +118,13 @@ class HuiEnergyCarbonGaugeCard
         ${value !== undefined
           ? html`
               <ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
-              <paper-tooltip animation-delay="0" for="info" position="left">
+              <simple-tooltip animation-delay="0" for="info" position="left">
                 <span>
                   ${this.hass.localize(
                     "ui.panel.lovelace.cards.energy.carbon_consumed_gauge.card_indicates_energy_used"
                   )}
                 </span>
-              </paper-tooltip>
+              </simple-tooltip>
               <ha-gauge
                 min="0"
                 max="100"
@@ -194,11 +194,11 @@ class HuiEnergyCarbonGaugeCard
         top: 4px;
         color: var(--secondary-text-color);
       }
-      paper-tooltip > span {
+      simple-tooltip > span {
         font-size: 12px;
         line-height: 12px;
       }
-      paper-tooltip {
+      simple-tooltip {
         width: 80%;
         max-width: 250px;
         top: 8px !important;

src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts

@@ -1,5 +1,5 @@
 import { mdiInformation } from "@mdi/js";
-import "@polymer/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -102,7 +102,7 @@ class HuiEnergyGridGaugeCard
         ${value !== undefined
           ? html`
               <ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
-              <paper-tooltip animation-delay="0" for="info" position="left">
+              <simple-tooltip animation-delay="0" for="info" position="left">
                 <span>
                   ${this.hass.localize(
                     "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.energy_dependency"
@@ -112,7 +112,7 @@ class HuiEnergyGridGaugeCard
                     "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.color_explain"
                   )}
                 </span>
-              </paper-tooltip>
+              </simple-tooltip>
 
               <ha-gauge
                 min="-1"
@@ -179,11 +179,11 @@ class HuiEnergyGridGaugeCard
         top: 4px;
         color: var(--secondary-text-color);
       }
-      paper-tooltip > span {
+      simple-tooltip > span {
         font-size: 12px;
         line-height: 12px;
       }
-      paper-tooltip {
+      simple-tooltip {
         width: 80%;
         max-width: 250px;
         top: 8px !important;

src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts

@@ -1,5 +1,5 @@
 import { mdiInformation } from "@mdi/js";
-import "@polymer/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -93,7 +93,7 @@ class HuiEnergySolarGaugeCard
         ${value !== undefined
           ? html`
               <ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
-              <paper-tooltip animation-delay="0" for="info" position="left">
+              <simple-tooltip animation-delay="0" for="info" position="left">
                 <span>
                   ${this.hass.localize(
                     "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used"
@@ -103,7 +103,7 @@ class HuiEnergySolarGaugeCard
                     "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat"
                   )}
                 </span>
-              </paper-tooltip>
+              </simple-tooltip>
               <ha-gauge
                 min="0"
                 max="100"
@@ -175,11 +175,11 @@ class HuiEnergySolarGaugeCard
         top: 4px;
         color: var(--secondary-text-color);
       }
-      paper-tooltip > span {
+      simple-tooltip > span {
         font-size: 12px;
         line-height: 12px;
       }
-      paper-tooltip {
+      simple-tooltip {
         width: 80%;
         max-width: 250px;
         top: 8px !important;

src/panels/profile/ha-mfa-modules-card.ts

@@ -1,6 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -19,11 +17,9 @@ class HaMfaModulesCard extends LitElement {
     return html`
       <ha-card .header=${this.hass.localize("ui.panel.profile.mfa.header")}>
         ${this.mfaModules.map(
-          (module) => html`<paper-item>
-            <paper-item-body two-line="">
-              <div>${module.name}</div>
-              <div secondary>${module.id}</div>
-            </paper-item-body>
+          (module) => html`<ha-settings-row two-line>
+            <span slot="heading">${module.name}</span>
+            <span slot="description">${module.id}</span>
             ${module.enabled
               ? html`<mwc-button .module=${module} @click=${this._disable}
                   >${this.hass.localize(
@@ -35,7 +31,7 @@ class HaMfaModulesCard extends LitElement {
                     "ui.panel.profile.mfa.enable"
                   )}</mwc-button
                 >`}
-          </paper-item>`
+          </ha-settings-row>`
         )}
       </ha-card>
     `;
@@ -46,6 +42,9 @@ class HaMfaModulesCard extends LitElement {
       mwc-button {
         margin-right: -0.57em;
       }
+      ha-list-item {
+        --mdc-list-item-meta-size: auto;
+      }
     `;
   }
 

src/panels/profile/ha-refresh-tokens-card.ts

@@ -1,5 +1,5 @@
 import { mdiDelete } from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -86,11 +86,11 @@ class HaRefreshTokens extends LitElement {
                 </div>
                 <div>
                   ${token.is_current
-                    ? html`<paper-tooltip animation-delay="0" position="left">
+                    ? html`<simple-tooltip animation-delay="0" position="left">
                         ${this.hass.localize(
                           "ui.panel.profile.refresh_tokens.current_token_tooltip"
                         )}
-                      </paper-tooltip>`
+                      </simple-tooltip>`
                     : ""}
                   <ha-icon-button
                     .token=${token}
@@ -141,6 +141,8 @@ class HaRefreshTokens extends LitElement {
       css`
         ha-settings-row {
           padding: 0;
+          --settings-row-prefix-display: contents;
+          --settings-row-content-display: contents;
         }
         ha-icon-button {
           color: var(--primary-text-color);

src/resources/ha-style.ts

@@ -1,4 +1,3 @@
-import "@polymer/paper-styles/paper-styles";
 import "@polymer/polymer/lib/elements/custom-style";
 import { derivedStyles } from "./styles";
 
@@ -201,6 +200,214 @@ documentContainer.innerHTML = `<custom-style>
       --material-caption-font-size: 0.75rem;
       --material-button-font-size: 0.875rem;
 
+      /* Paper shadow */
+      --shadow-transition: {
+        transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+      };
+
+      --shadow-none: {
+        box-shadow: none;
+      };
+
+      /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
+
+      --shadow-elevation-2dp: {
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+                    0 1px 5px 0 rgba(0, 0, 0, 0.12),
+                    0 3px 1px -2px rgba(0, 0, 0, 0.2);
+      };
+
+      --shadow-elevation-3dp: {
+        box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
+                    0 1px 8px 0 rgba(0, 0, 0, 0.12),
+                    0 3px 3px -2px rgba(0, 0, 0, 0.4);
+      };
+
+      --shadow-elevation-4dp: {
+        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+                    0 1px 10px 0 rgba(0, 0, 0, 0.12),
+                    0 2px 4px -1px rgba(0, 0, 0, 0.4);
+      };
+
+      --shadow-elevation-6dp: {
+        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
+                    0 1px 18px 0 rgba(0, 0, 0, 0.12),
+                    0 3px 5px -1px rgba(0, 0, 0, 0.4);
+      };
+
+      --shadow-elevation-8dp: {
+        box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                    0 3px 14px 2px rgba(0, 0, 0, 0.12),
+                    0 5px 5px -3px rgba(0, 0, 0, 0.4);
+      };
+
+      --shadow-elevation-12dp: {
+        box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14),
+                    0 4px 22px 3px rgba(0, 0, 0, 0.12),
+                    0 6px 7px -4px rgba(0, 0, 0, 0.4);
+      };
+
+      --shadow-elevation-16dp: {
+        box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
+                    0  6px 30px 5px rgba(0, 0, 0, 0.12),
+                    0  8px 10px -5px rgba(0, 0, 0, 0.4);
+      };
+
+      --shadow-elevation-24dp: {
+        box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
+                    0 9px 46px 8px rgba(0, 0, 0, 0.12),
+                    0 11px 15px -7px rgba(0, 0, 0, 0.4);
+      };
+
+      /* Paper typography Styles */
+      --paper-font-common-base: {
+        font-family: 'Roboto', 'Noto', sans-serif;
+        -webkit-font-smoothing: antialiased;
+      };
+
+      --paper-font-common-code: {
+        font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
+        -webkit-font-smoothing: antialiased;
+      };
+
+      --paper-font-common-expensive-kerning: {
+        text-rendering: optimizeLegibility;
+      };
+
+      --paper-font-common-nowrap: {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      };
+
+      /* Material Font Styles */
+
+      --paper-font-display4: {
+        @apply --paper-font-common-base;
+        @apply --paper-font-common-nowrap;
+
+        font-size: 112px;
+        font-weight: 300;
+        letter-spacing: -.044em;
+        line-height: 120px;
+      };
+
+      --paper-font-display3: {
+        @apply --paper-font-common-base;
+        @apply --paper-font-common-nowrap;
+
+        font-size: 56px;
+        font-weight: 400;
+        letter-spacing: -.026em;
+        line-height: 60px;
+      };
+
+      --paper-font-display2: {
+        @apply --paper-font-common-base;
+
+        font-size: 45px;
+        font-weight: 400;
+        letter-spacing: -.018em;
+        line-height: 48px;
+      };
+
+      --paper-font-display1: {
+        @apply --paper-font-common-base;
+
+        font-size: 34px;
+        font-weight: 400;
+        letter-spacing: -.01em;
+        line-height: 40px;
+      };
+
+      --paper-font-headline: {
+        @apply --paper-font-common-base;
+
+        font-size: 24px;
+        font-weight: 400;
+        letter-spacing: -.012em;
+        line-height: 32px;
+      };
+
+      --paper-font-title: {
+        @apply --paper-font-common-base;
+        @apply --paper-font-common-nowrap;
+
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 28px;
+      };
+
+      --paper-font-subhead: {
+        @apply --paper-font-common-base;
+
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+      };
+
+      --paper-font-body2: {
+        @apply --paper-font-common-base;
+
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 24px;
+      };
+
+      --paper-font-body1: {
+        @apply --paper-font-common-base;
+
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+      };
+
+      --paper-font-caption: {
+        @apply --paper-font-common-base;
+        @apply --paper-font-common-nowrap;
+
+        font-size: 12px;
+        font-weight: 400;
+        letter-spacing: 0.011em;
+        line-height: 20px;
+      };
+
+      --paper-font-menu: {
+        @apply --paper-font-common-base;
+        @apply --paper-font-common-nowrap;
+
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 24px;
+      };
+
+      --paper-font-button: {
+        @apply --paper-font-common-base;
+        @apply --paper-font-common-nowrap;
+
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: 0.018em;
+        line-height: 24px;
+        text-transform: uppercase;
+      };
+
+      --paper-font-code2: {
+        @apply --paper-font-common-code;
+
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 20px;
+      };
+
+      --paper-font-code1: {
+        @apply --paper-font-common-code;
+
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+      };
+
       ${Object.entries(derivedStyles)
         .map(([key, value]) => `--${key}: ${value};`)
         .join("")}

yarn.lock

@@ -2001,6 +2001,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lrnwebcomponents/simple-tooltip@npm:4.1.0":
+  version: 4.1.0
+  resolution: "@lrnwebcomponents/simple-tooltip@npm:4.1.0"
+  dependencies:
+    lit: ^2.2.8
+  checksum: 30af8e317fae1c04912ade8613b26bb6323164ddb5d6a01413a2e1555a637d34f88e6a079af16e912ed5f9b3990b9b7d98147a63fc1bdc5dde336fab8c32cbdc
+  languageName: node
+  linkType: hard
+
 "@material/animation@npm:14.0.0-canary.53b3cad2f.0":
   version: 14.0.0-canary.53b3cad2f.0
   resolution: "@material/animation@npm:14.0.0-canary.53b3cad2f.0"
@@ -3397,7 +3406,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/iron-icon@npm:3.0.1, @polymer/iron-icon@npm:^3.0.0, @polymer/iron-icon@npm:^3.0.0-pre.26":
+"@polymer/iron-icon@npm:^3.0.0, @polymer/iron-icon@npm:^3.0.0-pre.26":
   version: 3.0.1
   resolution: "@polymer/iron-icon@npm:3.0.1"
   dependencies:
@@ -3619,7 +3628,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/paper-styles@npm:3.0.1, @polymer/paper-styles@npm:^3.0.0-pre.26":
+"@polymer/paper-styles@npm:^3.0.0-pre.26":
   version: 3.0.1
   resolution: "@polymer/paper-styles@npm:3.0.1"
   dependencies:
@@ -3660,16 +3669,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/paper-tooltip@npm:3.0.1":
-  version: 3.0.1
-  resolution: "@polymer/paper-tooltip@npm:3.0.1"
-  dependencies:
-    "@polymer/paper-styles": ^3.0.0-pre.26
-    "@polymer/polymer": ^3.0.0
-  checksum: 74a4328527a80a42fde9fb35def7b711251b2b40fa25a0c3609ea393bd2901f987cf5c7c1119a5e7ca35d52fdd8a02d9bb857e37b6c07399c6a10a324ba1088e
-  languageName: node
-  linkType: hard
-
 "@polymer/polymer@npm:3.5.1":
   version: 3.5.1
   resolution: "@polymer/polymer@npm:3.5.1"
@@ -9429,6 +9428,7 @@ __metadata:
     "@lit-labs/context": 0.2.0
     "@lit-labs/motion": 1.0.3
     "@lit-labs/virtualizer": 1.0.1
+    "@lrnwebcomponents/simple-tooltip": 4.1.0
     "@material/chips": =14.0.0-canary.53b3cad2f.0
     "@material/data-table": =14.0.0-canary.53b3cad2f.0
     "@material/mwc-button": 0.27.0
@@ -9461,17 +9461,14 @@ __metadata:
     "@open-wc/dev-server-hmr": 0.1.4
     "@polymer/app-layout": 3.1.0
     "@polymer/iron-flex-layout": 3.0.1
-    "@polymer/iron-icon": 3.0.1
     "@polymer/iron-input": 3.0.1
     "@polymer/iron-resizable-behavior": 3.0.1
     "@polymer/paper-input": 3.2.1
     "@polymer/paper-item": 3.0.1
     "@polymer/paper-listbox": 3.0.1
     "@polymer/paper-slider": 3.0.1
-    "@polymer/paper-styles": 3.0.1
     "@polymer/paper-tabs": 3.1.0
     "@polymer/paper-toast": 3.0.1
-    "@polymer/paper-tooltip": 3.0.1
     "@polymer/polymer": 3.5.1
     "@rollup/plugin-babel": 6.0.3
     "@rollup/plugin-commonjs": 24.0.1
@@ -11241,7 +11238,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lit@npm:2.7.0, lit@npm:^2.0.0, lit@npm:^2.0.0-rc.2, lit@npm:^2.2.1, lit@npm:^2.3.0, lit@npm:^2.5.0":
+"lit@npm:2.7.0, lit@npm:^2.0.0, lit@npm:^2.0.0-rc.2, lit@npm:^2.2.1, lit@npm:^2.2.8, lit@npm:^2.3.0, lit@npm:^2.5.0":
   version: 2.7.0
   resolution: "lit@npm:2.7.0"
   dependencies: