Bump material

package.json

@@ -24,19 +24,19 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@fullcalendar/core": "5.0.0-beta.2",
-    "@fullcalendar/daygrid": "5.0.0-beta.2",
-    "@material/chips": "^6.0.0-canary.35a32aaea.0",
-    "@material/mwc-button": "0.14.1",
-    "@material/mwc-checkbox": "0.14.1",
-    "@material/mwc-dialog": "0.14.1",
-    "@material/mwc-fab": "0.14.1",
-    "@material/mwc-formfield": "0.14.1",
-    "@material/mwc-icon-button": "0.14.1",
-    "@material/mwc-list": "0.14.1",
-    "@material/mwc-menu": "0.14.1",
-    "@material/mwc-ripple": "0.14.1",
-    "@material/mwc-switch": "0.14.1",
+    "@fullcalendar/core": "^5.0.0-beta.2",
+    "@fullcalendar/daygrid": "^5.0.0-beta.2",
+    "@material/chips": "7.0.0-canary.d92d8c93e.0",
+    "@material/mwc-button": "^0.15.0",
+    "@material/mwc-checkbox": "^0.15.0",
+    "@material/mwc-dialog": "^0.15.0",
+    "@material/mwc-fab": "^0.15.0",
+    "@material/mwc-formfield": "^0.15.0",
+    "@material/mwc-icon-button": "^0.15.0",
+    "@material/mwc-list": "^0.15.0",
+    "@material/mwc-menu": "^0.15.0",
+    "@material/mwc-ripple": "^0.15.0",
+    "@material/mwc-switch": "^0.15.0",
     "@mdi/js": "4.9.95",
     "@mdi/svg": "4.9.95",
     "@polymer/app-layout": "^3.0.2",
@@ -198,19 +198,19 @@
     "@polymer/polymer": "3.1.0",
     "lit-html": "1.2.1",
     "lit-element": "2.3.1",
-    "@material/animation": "6.0.0",
-    "@material/base": "6.0.0",
-    "@material/checkbox": "6.0.0",
-    "@material/density": "6.0.0",
-    "@material/dom": "6.0.0",
-    "@material/elevation": "6.0.0",
-    "@material/feature-targeting": "6.0.0",
-    "@material/ripple": "6.0.0",
-    "@material/rtl": "6.0.0",
-    "@material/shape": "6.0.0",
-    "@material/theme": "6.0.0",
-    "@material/touch-target": "6.0.0",
-    "@material/typography": "6.0.0"
+    "@material/animation": "7.0.0-canary.d92d8c93e.0",
+    "@material/base": "7.0.0-canary.d92d8c93e.0",
+    "@material/checkbox": "7.0.0-canary.d92d8c93e.0",
+    "@material/density": "7.0.0-canary.d92d8c93e.0",
+    "@material/dom": "7.0.0-canary.d92d8c93e.0",
+    "@material/elevation": "7.0.0-canary.d92d8c93e.0",
+    "@material/feature-targeting": "7.0.0-canary.d92d8c93e.0",
+    "@material/ripple": "7.0.0-canary.d92d8c93e.0",
+    "@material/rtl": "7.0.0-canary.d92d8c93e.0",
+    "@material/shape": "7.0.0-canary.d92d8c93e.0",
+    "@material/theme": "7.0.0-canary.d92d8c93e.0",
+    "@material/touch-target": "7.0.0-canary.d92d8c93e.0",
+    "@material/typography": "7.0.0-canary.d92d8c93e.0"
   },
   "main": "src/home-assistant.js",
   "husky": {

src/components/ha-icon-button-arrow-prev.ts

@@ -4,6 +4,8 @@ import "@material/mwc-icon-button/mwc-icon-button";
 import "./ha-svg-icon";
 
 export class HaIconButtonArrowPrev extends LitElement {
+  @property({ type: Boolean }) public disabled = false;
+
   @property() private _icon = mdiArrowLeft;
 
   public connectedCallback() {
@@ -19,7 +21,7 @@ export class HaIconButtonArrowPrev extends LitElement {
   }
 
   protected render(): TemplateResult {
-    return html`<mwc-icon-button>
+    return html`<mwc-icon-button .disabled=${this.disabled}>
       <ha-svg-icon .path=${this._icon}></ha-svg-icon>
     </mwc-icon-button> `;
   }

src/components/ha-tab.ts

@@ -0,0 +1,148 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  LitElement,
+  property,
+  TemplateResult,
+  html,
+  queryAsync,
+  internalProperty,
+  eventOptions,
+} from "lit-element";
+import "@material/mwc-ripple/mwc-ripple";
+import type { Ripple } from "@material/mwc-ripple";
+import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers";
+import "./ha-icon";
+import "./ha-svg-icon";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { fireEvent } from "../common/dom/fire_event";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    activated: undefined;
+  }
+}
+
+@customElement("ha-tab")
+export class HaTab extends LitElement {
+  @property({ type: Boolean, reflect: true }) public active = false;
+
+  @property({ type: Boolean, reflect: true }) public narrow = false;
+
+  @property() public name?: string;
+
+  @queryAsync("mwc-ripple") private _ripple!: Promise<Ripple | null>;
+
+  @internalProperty() private _shouldRenderRipple = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <div
+        tabindex="0"
+        role="tab"
+        aria-selected=${this.active}
+        aria-label=${ifDefined(this.name)}
+        @focus=${this.handleRippleFocus}
+        @blur=${this.handleRippleBlur}
+        @mousedown=${this.handleRippleActivate}
+        @mouseup=${this.handleRippleDeactivate}
+        @mouseenter=${this.handleRippleMouseEnter}
+        @mouseleave=${this.handleRippleMouseLeave}
+        @touchstart=${this.handleRippleActivate}
+        @touchend=${this.handleRippleDeactivate}
+        @touchcancel=${this.handleRippleDeactivate}
+        @keydown=${this._handleKeyDown}
+        @click=${this._handleClick}
+      >
+        ${this.narrow ? html`<slot name="icon"></slot>` : ""}
+        ${!this.narrow || this.active
+          ? html` <span class="name">${this.name}</span> `
+          : ""}
+        ${this._shouldRenderRipple ? html`<mwc-ripple></mwc-ripple>` : ""}
+      </div>
+    `;
+  }
+
+  private _rippleHandlers: RippleHandlers = new RippleHandlers(() => {
+    this._shouldRenderRipple = true;
+    return this._ripple;
+  });
+
+  private _handleKeyDown(ev: KeyboardEvent): void {
+    if (ev.keyCode === 13) {
+      fireEvent(this, "activated");
+    }
+  }
+
+  private _handleClick(): void {
+    fireEvent(this, "activated");
+  }
+
+  @eventOptions({ passive: true })
+  private handleRippleActivate(evt?: Event) {
+    this._rippleHandlers.startPress(evt);
+  }
+
+  private handleRippleDeactivate() {
+    this._rippleHandlers.endPress();
+  }
+
+  private handleRippleMouseEnter() {
+    this._rippleHandlers.startHover();
+  }
+
+  private handleRippleMouseLeave() {
+    this._rippleHandlers.endHover();
+  }
+
+  private handleRippleFocus() {
+    this._rippleHandlers.startFocus();
+  }
+
+  private handleRippleBlur() {
+    this._rippleHandlers.endFocus();
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      div {
+        padding: 0 32px;
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+        height: 64px;
+        cursor: pointer;
+        position: relative;
+        outline: none;
+        box-sizing: border-box;
+      }
+
+      .name {
+        white-space: nowrap;
+      }
+
+      :host([active]) {
+        color: var(--primary-color);
+      }
+
+      :host(:not([narrow])[active]) div {
+        border-bottom: 2px solid var(--primary-color);
+      }
+
+      :host([narrow]) {
+        padding: 0 16px;
+        width: 20%;
+        min-width: 0;
+      }
+    `;
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tab": HaTab;
+  }
+}

src/layouts/hass-tabs-subpage.ts

@@ -18,6 +18,7 @@ import "../components/ha-icon-button-arrow-prev";
 import { HomeAssistant, Route } from "../types";
 import "../components/ha-svg-icon";
 import "../components/ha-icon";
+import "../components/ha-tab";
 
 export interface PageNavigation {
   path: string;
@@ -71,29 +72,23 @@ class HassTabsSubpage extends LitElement {
       return shownTabs.map(
         (page) =>
           html`
-            <div
-              class="tab ${classMap({
-                active: page === activeTab,
-              })}"
-              @click=${this._tabTapped}
+            <ha-tab
+              .hass=${this.hass}
+              @activated=${this._tabTapped}
               .path=${page.path}
+              .active=${page === activeTab}
+              .narrow=${this.narrow}
+              .name=${page.translationKey
+                ? this.hass.localize(page.translationKey)
+                : page.name}
             >
-              ${this.narrow
-                ? page.iconPath
-                  ? html`<ha-svg-icon .path=${page.iconPath}></ha-svg-icon>`
-                  : html`<ha-icon .icon=${page.icon}></ha-icon>`
-                : ""}
-              ${!this.narrow || page === activeTab
-                ? html`
-                    <span class="name"
-                      >${page.translationKey
-                        ? this.hass.localize(page.translationKey)
-                        : page.name}</span
-                    >
-                  `
-                : ""}
-              <mwc-ripple></mwc-ripple>
-            </div>
+              ${page.iconPath
+                ? html`<ha-svg-icon
+                    slot="icon"
+                    .path=${page.iconPath}
+                  ></ha-svg-icon>`
+                : html`<ha-icon slot="icon" .icon=${page.icon}></ha-icon>`}
+            </ha-tab>
           `
       );
     }
@@ -154,7 +149,7 @@ class HassTabsSubpage extends LitElement {
     `;
   }
 
-  private _tabTapped(ev: MouseEvent): void {
+  private _tabTapped(ev: Event): void {
     navigate(this, (ev.currentTarget as any).path, true);
   }
 
@@ -219,35 +214,6 @@ class HassTabsSubpage extends LitElement {
         justify-content: center;
       }
 
-      .tab {
-        padding: 0 32px;
-        display: flex;
-        flex-direction: column;
-        text-align: center;
-        align-items: center;
-        justify-content: center;
-        height: 64px;
-        cursor: pointer;
-      }
-
-      .name {
-        white-space: nowrap;
-      }
-
-      .tab.active {
-        color: var(--primary-color);
-      }
-
-      #tabbar:not(.bottom-bar) .tab.active {
-        border-bottom: 2px solid var(--primary-color);
-      }
-
-      .bottom-bar .tab {
-        padding: 0 16px;
-        width: 20%;
-        min-width: 0;
-      }
-
       :host(:not([narrow])) #toolbar-icon {
         min-width: 40px;
       }