@aurelia-mdc-web/all 9.3.1-au2 → 9.3.3-au2

package/src/tab-bar/indicator/mdc-tab-indicator.ts

@@ -1,51 +1,51 @@
-import { MdcComponent, booleanAttr } from '../../base';
-import { MDCTabIndicatorFoundation, MDCTabIndicatorAdapter, MDCFadingTabIndicatorFoundation, MDCSlidingTabIndicatorFoundation } from '@material/tab-indicator';
-import { inject, customElement, bindable } from 'aurelia';
-import template from './mdc-tab-indicator.html?raw';
-
-@inject(Element)
-@customElement({ name: 'mdc-tab-indicator', template })
-export class MdcTabIndicator extends MdcComponent<MDCTabIndicatorFoundation> {
-  private content: HTMLElement; // assigned in html
-
-  @bindable({ set: booleanAttr })
-  fade: boolean;
-
-  @bindable({ set: booleanAttr })
-  active: boolean;
-
-  @bindable()
-  icon: string;
-
-  computeContentClientRect(): ClientRect {
-    return this.foundation!.computeContentClientRect();
-  }
-
-  getDefaultFoundation() {
-    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-    const adapter: MDCTabIndicatorAdapter = {
-      addClass: (className) => this.root.classList.add(className),
-      removeClass: (className) => this.root.classList.remove(className),
-      computeContentClientRect: () => this.content.getBoundingClientRect(),
-      setContentStyleProperty: (prop, value) => this.content.style.setProperty(prop, value),
-    };
-
-    if (this.root.classList.contains(
-      MDCTabIndicatorFoundation.cssClasses.FADE)) {
-      return new MDCFadingTabIndicatorFoundation(adapter);
-    }
-
-    // Default to the sliding indicator
-    return new MDCSlidingTabIndicatorFoundation(adapter);
-  }
-
-  activate(previousIndicatorClientRect?: ClientRect) {
-    this.foundation?.activate(previousIndicatorClientRect);
-  }
-
-  deactivate() {
-    this.foundation?.deactivate();
-  }
-
-}
+import { MdcComponent, booleanAttr } from '../../base';
+import { MDCTabIndicatorFoundation, MDCTabIndicatorAdapter, MDCFadingTabIndicatorFoundation, MDCSlidingTabIndicatorFoundation } from '@material/tab-indicator';
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-tab-indicator.html?raw';
+
+@inject(Element)
+@customElement({ name: 'mdc-tab-indicator', template })
+export class MdcTabIndicator extends MdcComponent<MDCTabIndicatorFoundation> {
+  private content: HTMLElement; // assigned in html
+
+  @bindable({ set: booleanAttr })
+  fade: boolean;
+
+  @bindable({ set: booleanAttr })
+  active: boolean;
+
+  @bindable()
+  icon: string;
+
+  computeContentClientRect(): ClientRect {
+    return this.foundation!.computeContentClientRect();
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+    const adapter: MDCTabIndicatorAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      computeContentClientRect: () => this.content.getBoundingClientRect(),
+      setContentStyleProperty: (prop, value) => this.content.style.setProperty(prop, value),
+    };
+
+    if (this.root.classList.contains(
+      MDCTabIndicatorFoundation.cssClasses.FADE)) {
+      return new MDCFadingTabIndicatorFoundation(adapter);
+    }
+
+    // Default to the sliding indicator
+    return new MDCSlidingTabIndicatorFoundation(adapter);
+  }
+
+  activate(previousIndicatorClientRect?: ClientRect) {
+    this.foundation?.activate(previousIndicatorClientRect);
+  }
+
+  deactivate() {
+    this.foundation?.deactivate();
+  }
+
+}

package/src/tab-bar/mdc-tab-bar.html

@@ -1,6 +1,6 @@
-<template class="mdc-tab-bar" role="tablist" keydown.trigger="handleKeyDown_($event)"
-  mdctab:interacted.trigger="handleTabInteraction_($event)">
-  <div as-element="mdc-tab-scroller" component.ref="tabScroller_" align.bind="align">
-    <au-slot></au-slot>
-  </div>
-</template>
+<template class="mdc-tab-bar" role="tablist" keydown.trigger="handleKeyDown_($event)"
+  mdctab:interacted.trigger="handleTabInteraction_($event)">
+  <div as-element="mdc-tab-scroller" component.ref="tabScroller_" align.bind="align">
+    <au-slot></au-slot>
+  </div>
+</template>

package/src/tab-bar/mdc-tab-bar.ts

@@ -1,119 +1,119 @@
-import { MdcComponent, booleanAttr } from '../base';
-import { MDCTabBarFoundation, MDCTabBarAdapter, MDCTabBarActivatedEventDetail, strings } from '@material/tab-bar';
-import { IMdcTabElement } from './tab/mdc-tab';
-import { MdcTabScroller } from './scroller/mdc-tab-scroller';
-import { MDCTabInteractionEvent, MDCTabFoundation } from '@material/tab';
-import { inject, customElement, bindable } from 'aurelia';
-import template from './mdc-tab-bar.html?raw';
-
-// aurelia is case insensitive
-MDCTabFoundation.strings.INTERACTED_EVENT = MDCTabFoundation.strings.INTERACTED_EVENT.toLowerCase();
-strings.TAB_ACTIVATED_EVENT = strings.TAB_ACTIVATED_EVENT.toLowerCase();
-
-@inject(Element)
-@customElement({ name: 'mdc-tab-bar', template })
-export class MdcTabBar extends MdcComponent<MDCTabBarFoundation> {
-  private tabScroller_?: MdcTabScroller; // assigned in html
-
-  @bindable({ set: booleanAttr })
-  focusOnActivate: boolean;
-  focusOnActivateChanged() {
-    this.tabScroller_?.tabs.forEach((tab) => tab.focusOnActivate = this.focusOnActivate);
-  }
-
-  @bindable({ set: booleanAttr })
-  useAutomaticActivation: boolean;
-  useAutomaticActivationChanged() {
-    this.foundation?.setUseAutomaticActivation(this.useAutomaticActivation);
-  }
-
-  @bindable()
-  align: MdcTabScroller['align'];
-
-  initialSyncWithDOM() {
-    this.focusOnActivateChanged();
-    this.useAutomaticActivationChanged();
-    for (let i = 0; i < this.tabScroller_!.tabs.length; i++) {
-      if (this.tabScroller_!.tabs[i].active) {
-        this.scrollIntoView(i);
-        break;
-      }
-    }
-  }
-
-  handleKeyDown_(evt: KeyboardEvent) {
-    this.foundation?.handleKeyDown(evt);
-    return true;
-  }
-
-  handleTabInteraction_(evt: MDCTabInteractionEvent) {
-    this.foundation?.handleTabInteraction(evt);
-  }
-
-  getDefaultFoundation() {
-    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-    const adapter: MDCTabBarAdapter = {
-      scrollTo: (scrollX) => this.tabScroller_!.scrollTo(scrollX),
-      incrementScroll: (scrollXIncrement) => this.tabScroller_!.incrementScroll(scrollXIncrement),
-      getScrollPosition: () => this.tabScroller_!.getScrollPosition(),
-      getScrollContentWidth: () => this.tabScroller_!.getScrollContentWidth(),
-      getOffsetWidth: () => this.root.offsetWidth,
-      isRTL: () => window.getComputedStyle(this.root).getPropertyValue('direction') === 'rtl',
-      setActiveTab: (index) => this.foundation?.activateTab(index),
-      activateTabAtIndex: (index, clientRect) => this.tabScroller_!.tabs[index].activate(clientRect),
-      deactivateTabAtIndex: (index) => this.tabScroller_!.tabs[index].deactivate(),
-      focusTabAtIndex: (index) => this.tabScroller_!.tabs[index].focus(),
-      getTabIndicatorClientRectAtIndex: (index) => this.tabScroller_!.tabs[index].computeIndicatorClientRect(),
-      getTabDimensionsAtIndex: (index) => this.tabScroller_!.tabs[index].computeDimensions(),
-      getPreviousActiveTabIndex: () => {
-        for (let i = 0; i < this.tabScroller_!.tabs.length; i++) {
-          if (this.tabScroller_!.tabs[i].isActive()) {
-            return i;
-          }
-        }
-        return -1;
-      },
-      getFocusedTabIndex: () => {
-        const tabElements = this.getTabElements_();
-        const activeElement = document.activeElement! as IMdcTabElement;
-        return tabElements.indexOf(activeElement);
-      },
-      getIndexOfTabById: (id) => {
-        for (let i = 0; i < this.tabScroller_!.tabs.length; i++) {
-          if (this.tabScroller_!.tabs[i].id === id) {
-            return i;
-          }
-        }
-        return -1;
-      },
-      getTabListLength: () => this.tabScroller_!.tabs.length,
-      notifyTabActivated: (index) => this.emit<MDCTabBarActivatedEventDetail>(strings.TAB_ACTIVATED_EVENT, { index }, true),
-    };
-    return new MDCTabBarFoundation(adapter);
-  }
-
-  /**
-   * Activates the tab at the given index
-   * @param index The index of the tab
-   */
-  activateTab(index: number) {
-    this.foundation?.activateTab(index);
-  }
-
-  /**
-   * Scrolls the tab at the given index into view
-   * @param index THe index of the tab
-   */
-  scrollIntoView(index: number) {
-    this.foundation?.scrollIntoView(index);
-  }
-
-  /**
-   * Returns all the tab elements in a nice clean array
-   */
-  private getTabElements_(): IMdcTabElement[] {
-    return [].slice.call(this.root.querySelectorAll(strings.TAB_SELECTOR)) as IMdcTabElement[];
-  }
-
-}
+import { MdcComponent, booleanAttr } from '../base';
+import { MDCTabBarFoundation, MDCTabBarAdapter, MDCTabBarActivatedEventDetail, strings } from '@material/tab-bar';
+import { IMdcTabElement } from './tab/mdc-tab';
+import { MdcTabScroller } from './scroller/mdc-tab-scroller';
+import { MDCTabInteractionEvent, MDCTabFoundation } from '@material/tab';
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-tab-bar.html?raw';
+
+// aurelia is case insensitive
+MDCTabFoundation.strings.INTERACTED_EVENT = MDCTabFoundation.strings.INTERACTED_EVENT.toLowerCase();
+strings.TAB_ACTIVATED_EVENT = strings.TAB_ACTIVATED_EVENT.toLowerCase();
+
+@inject(Element)
+@customElement({ name: 'mdc-tab-bar', template })
+export class MdcTabBar extends MdcComponent<MDCTabBarFoundation> {
+  private tabScroller_?: MdcTabScroller; // assigned in html
+
+  @bindable({ set: booleanAttr })
+  focusOnActivate: boolean;
+  focusOnActivateChanged() {
+    this.tabScroller_?.tabs.forEach((tab) => tab.focusOnActivate = this.focusOnActivate);
+  }
+
+  @bindable({ set: booleanAttr })
+  useAutomaticActivation: boolean;
+  useAutomaticActivationChanged() {
+    this.foundation?.setUseAutomaticActivation(this.useAutomaticActivation);
+  }
+
+  @bindable()
+  align: MdcTabScroller['align'];
+
+  initialSyncWithDOM() {
+    this.focusOnActivateChanged();
+    this.useAutomaticActivationChanged();
+    for (let i = 0; i < this.tabScroller_!.tabs.length; i++) {
+      if (this.tabScroller_!.tabs[i].active) {
+        this.scrollIntoView(i);
+        break;
+      }
+    }
+  }
+
+  handleKeyDown_(evt: KeyboardEvent) {
+    this.foundation?.handleKeyDown(evt);
+    return true;
+  }
+
+  handleTabInteraction_(evt: MDCTabInteractionEvent) {
+    this.foundation?.handleTabInteraction(evt);
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+    const adapter: MDCTabBarAdapter = {
+      scrollTo: (scrollX) => this.tabScroller_!.scrollTo(scrollX),
+      incrementScroll: (scrollXIncrement) => this.tabScroller_!.incrementScroll(scrollXIncrement),
+      getScrollPosition: () => this.tabScroller_!.getScrollPosition(),
+      getScrollContentWidth: () => this.tabScroller_!.getScrollContentWidth(),
+      getOffsetWidth: () => this.root.offsetWidth,
+      isRTL: () => window.getComputedStyle(this.root).getPropertyValue('direction') === 'rtl',
+      setActiveTab: (index) => this.foundation?.activateTab(index),
+      activateTabAtIndex: (index, clientRect) => this.tabScroller_!.tabs[index].activate(clientRect),
+      deactivateTabAtIndex: (index) => this.tabScroller_!.tabs[index].deactivate(),
+      focusTabAtIndex: (index) => this.tabScroller_!.tabs[index].focus(),
+      getTabIndicatorClientRectAtIndex: (index) => this.tabScroller_!.tabs[index].computeIndicatorClientRect(),
+      getTabDimensionsAtIndex: (index) => this.tabScroller_!.tabs[index].computeDimensions(),
+      getPreviousActiveTabIndex: () => {
+        for (let i = 0; i < this.tabScroller_!.tabs.length; i++) {
+          if (this.tabScroller_!.tabs[i].isActive()) {
+            return i;
+          }
+        }
+        return -1;
+      },
+      getFocusedTabIndex: () => {
+        const tabElements = this.getTabElements_();
+        const activeElement = document.activeElement! as IMdcTabElement;
+        return tabElements.indexOf(activeElement);
+      },
+      getIndexOfTabById: (id) => {
+        for (let i = 0; i < this.tabScroller_!.tabs.length; i++) {
+          if (this.tabScroller_!.tabs[i].id === id) {
+            return i;
+          }
+        }
+        return -1;
+      },
+      getTabListLength: () => this.tabScroller_!.tabs.length,
+      notifyTabActivated: (index) => this.emit<MDCTabBarActivatedEventDetail>(strings.TAB_ACTIVATED_EVENT, { index }, true),
+    };
+    return new MDCTabBarFoundation(adapter);
+  }
+
+  /**
+   * Activates the tab at the given index
+   * @param index The index of the tab
+   */
+  activateTab(index: number) {
+    this.foundation?.activateTab(index);
+  }
+
+  /**
+   * Scrolls the tab at the given index into view
+   * @param index THe index of the tab
+   */
+  scrollIntoView(index: number) {
+    this.foundation?.scrollIntoView(index);
+  }
+
+  /**
+   * Returns all the tab elements in a nice clean array
+   */
+  private getTabElements_(): IMdcTabElement[] {
+    return [].slice.call(this.root.querySelectorAll(strings.TAB_SELECTOR)) as IMdcTabElement[];
+  }
+
+}

package/src/tab-bar/scroller/mdc-tab-scroller.html

@@ -1,11 +1,11 @@
-<template class="mdc-tab-scroller
-  ${align ? 'mdc-tab-scroller--align-' + align : ''}
-  " wheel.trigger="handleInteraction_()" touchstart.trigger="handleInteraction_()"
-  pointerdown.trigger="handleInteraction_()" mousedown.trigger="handleInteraction_()"
-  keydown.trigger="handleInteraction_()" transitionend.trigger="handleTransitionEnd_($event)">
-  <div class="mdc-tab-scroller__scroll-area" element.ref="area_">
-    <div class="mdc-tab-scroller__scroll-content" element.ref="content_">
-      <au-slot></au-slot>
-    </div>
-  </div>
-</template>
+<template class="mdc-tab-scroller
+  ${align ? 'mdc-tab-scroller--align-' + align : ''}
+  " wheel.trigger="handleInteraction_()" touchstart.trigger="handleInteraction_()"
+  pointerdown.trigger="handleInteraction_()" mousedown.trigger="handleInteraction_()"
+  keydown.trigger="handleInteraction_()" transitionend.trigger="handleTransitionEnd_($event)">
+  <div class="mdc-tab-scroller__scroll-area" element.ref="area_">
+    <div class="mdc-tab-scroller__scroll-content" element.ref="content_">
+      <au-slot></au-slot>
+    </div>
+  </div>
+</template>

package/src/tab-bar/scroller/mdc-tab-scroller.ts

@@ -1,85 +1,85 @@
-import { MdcComponent } from '../../base';
-import { MDCTabScrollerFoundation, MDCTabScrollerAdapter, util } from '@material/tab-scroller';
-import { matches } from '@material/dom/ponyfill';
-import { MdcTab } from '../tab/mdc-tab';
-import { inject, customElement, bindable, CustomElement, slotted } from 'aurelia';
-import template from './mdc-tab-scroller.html?raw';
-
-@inject(Element)
-@customElement({ name: 'mdc-tab-scroller', template })
-export class MdcTabScroller extends MdcComponent<MDCTabScrollerFoundation> {
-  private content_: HTMLElement; // assigned in html
-  private area_: HTMLElement; // assigned in html
-
-  @bindable()
-  align: 'start' | 'end' | 'center';
-
-  @slotted({ query: 'mdc-tab' })
-  tabElements: HTMLElement[];
-
-  get tabs(): MdcTab[] {
-    return this.tabElements.map(x => CustomElement.for<MdcTab>(x).viewModel);
-  }
-
-  getDefaultFoundation() {
-    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
-    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
-    const adapter: MDCTabScrollerAdapter = {
-      eventTargetMatchesSelector: (evtTarget, selector) => matches(evtTarget as Element, selector),
-      addClass: (className) => this.root.classList.add(className),
-      removeClass: (className) => this.root.classList.remove(className),
-      addScrollAreaClass: (className) => this.area_.classList.add(className),
-      setScrollAreaStyleProperty: (prop, value) => this.area_.style.setProperty(prop, value),
-      setScrollContentStyleProperty: (prop, value) => this.content_.style.setProperty(prop, value),
-      getScrollContentStyleValue: (propName) => window.getComputedStyle(this.content_).getPropertyValue(propName),
-      setScrollAreaScrollLeft: (scrollX) => this.area_.scrollLeft = scrollX,
-      getScrollAreaScrollLeft: () => this.area_.scrollLeft,
-      getScrollContentOffsetWidth: () => this.content_.offsetWidth,
-      getScrollAreaOffsetWidth: () => this.area_.offsetWidth,
-      computeScrollAreaClientRect: () => this.area_.getBoundingClientRect(),
-      computeScrollContentClientRect: () => this.content_.getBoundingClientRect(),
-      computeHorizontalScrollbarHeight: () => util.computeHorizontalScrollbarHeight(document),
-    };
-    return new MDCTabScrollerFoundation(adapter);
-  }
-
-  handleInteraction_() {
-    this.foundation?.handleInteraction();
-    return true;
-  }
-
-  handleTransitionEnd_(evt: Event) {
-    this.foundation?.handleTransitionEnd(evt);
-    return true;
-  }
-
-  /**
-   * Returns the current visual scroll position
-   */
-  getScrollPosition(): number {
-    return this.foundation!.getScrollPosition();
-  }
-
-  /**
-   * Returns the width of the scroll content
-   */
-  getScrollContentWidth(): number {
-    return this.content_.offsetWidth;
-  }
-
-  /**
-   * Increments the scroll value by the given amount
-   * @param scrollXIncrement The pixel value by which to increment the scroll value
-   */
-  incrementScroll(scrollXIncrement: number) {
-    this.foundation?.incrementScroll(scrollXIncrement);
-  }
-
-  /**
-   * Scrolls to the given pixel position
-   * @param scrollX The pixel value to scroll to
-   */
-  scrollTo(scrollX: number) {
-    this.foundation?.scrollTo(scrollX);
-  }
-}
+import { MdcComponent } from '../../base';
+import { MDCTabScrollerFoundation, MDCTabScrollerAdapter, util } from '@material/tab-scroller';
+import { matches } from '@material/dom/ponyfill';
+import { MdcTab } from '../tab/mdc-tab';
+import { inject, customElement, bindable, CustomElement, slotted } from 'aurelia';
+import template from './mdc-tab-scroller.html?raw';
+
+@inject(Element)
+@customElement({ name: 'mdc-tab-scroller', template })
+export class MdcTabScroller extends MdcComponent<MDCTabScrollerFoundation> {
+  private content_: HTMLElement; // assigned in html
+  private area_: HTMLElement; // assigned in html
+
+  @bindable()
+  align: 'start' | 'end' | 'center';
+
+  @slotted({ query: 'mdc-tab' })
+  tabElements: HTMLElement[];
+
+  get tabs(): MdcTab[] {
+    return this.tabElements.map(x => CustomElement.for<MdcTab>(x).viewModel);
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+    const adapter: MDCTabScrollerAdapter = {
+      eventTargetMatchesSelector: (evtTarget, selector) => matches(evtTarget as Element, selector),
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      addScrollAreaClass: (className) => this.area_.classList.add(className),
+      setScrollAreaStyleProperty: (prop, value) => this.area_.style.setProperty(prop, value),
+      setScrollContentStyleProperty: (prop, value) => this.content_.style.setProperty(prop, value),
+      getScrollContentStyleValue: (propName) => window.getComputedStyle(this.content_).getPropertyValue(propName),
+      setScrollAreaScrollLeft: (scrollX) => this.area_.scrollLeft = scrollX,
+      getScrollAreaScrollLeft: () => this.area_.scrollLeft,
+      getScrollContentOffsetWidth: () => this.content_.offsetWidth,
+      getScrollAreaOffsetWidth: () => this.area_.offsetWidth,
+      computeScrollAreaClientRect: () => this.area_.getBoundingClientRect(),
+      computeScrollContentClientRect: () => this.content_.getBoundingClientRect(),
+      computeHorizontalScrollbarHeight: () => util.computeHorizontalScrollbarHeight(document),
+    };
+    return new MDCTabScrollerFoundation(adapter);
+  }
+
+  handleInteraction_() {
+    this.foundation?.handleInteraction();
+    return true;
+  }
+
+  handleTransitionEnd_(evt: Event) {
+    this.foundation?.handleTransitionEnd(evt);
+    return true;
+  }
+
+  /**
+   * Returns the current visual scroll position
+   */
+  getScrollPosition(): number {
+    return this.foundation!.getScrollPosition();
+  }
+
+  /**
+   * Returns the width of the scroll content
+   */
+  getScrollContentWidth(): number {
+    return this.content_.offsetWidth;
+  }
+
+  /**
+   * Increments the scroll value by the given amount
+   * @param scrollXIncrement The pixel value by which to increment the scroll value
+   */
+  incrementScroll(scrollXIncrement: number) {
+    this.foundation?.incrementScroll(scrollXIncrement);
+  }
+
+  /**
+   * Scrolls to the given pixel position
+   * @param scrollX The pixel value to scroll to
+   */
+  scrollTo(scrollX: number) {
+    this.foundation?.scrollTo(scrollX);
+  }
+}

package/src/tab-bar/tab/mdc-tab.html

@@ -1,20 +1,20 @@
-<template class="
-    mdc-tab
-    ${active ? 'mdc-tab--active' : ''}
-    ${minWidth ? 'mdc-tab--min-width' : ''}
-    ${stacked ? 'mdc-tab--stacked' : ''}
-  " role="tab" aria-selected="false" tabindex="-1" mdc-ripple="no-class.bind: true"
-  click.trigger="handleClick_()">
-  <span class="mdc-tab__content" element.ref="content_">
-    <span class="mdc-tab__icon material-icons" aria-hidden="true" if.bind="icon">${icon}</span>
-    <span class="mdc-tab__text-label" if.bind="label">${label}</span>
-    <au-slot></au-slot>
-    <mdc-tab-indicator if.bind="fixed" active.bind="active" fade.bind="fade" component.ref="tabIndicator_"
-      icon.bind="indicatorIcon">
-    </mdc-tab-indicator>
-  </span>
-  <mdc-tab-indicator if.bind="!fixed" active.bind="active" fade.bind="fade" component.ref="tabIndicator_"
-    icon.bind="indicatorIcon">
-  </mdc-tab-indicator>
-  <span class="mdc-tab__ripple" ref="rippleSurface"></span>
-</template>
+<template class="
+    mdc-tab
+    ${active ? 'mdc-tab--active' : ''}
+    ${minWidth ? 'mdc-tab--min-width' : ''}
+    ${stacked ? 'mdc-tab--stacked' : ''}
+  " role="tab" aria-selected="false" tabindex="-1" mdc-ripple="no-class.bind: true"
+  click.trigger="handleClick_()">
+  <span class="mdc-tab__content" element.ref="content_">
+    <span class="mdc-tab__icon material-icons" aria-hidden="true" if.bind="icon">${icon}</span>
+    <span class="mdc-tab__text-label" if.bind="label">${label}</span>
+    <au-slot></au-slot>
+    <mdc-tab-indicator if.bind="fixed" active.bind="active" fade.bind="fade" component.ref="tabIndicator_"
+      icon.bind="indicatorIcon">
+    </mdc-tab-indicator>
+  </span>
+  <mdc-tab-indicator if.bind="!fixed" active.bind="active" fade.bind="fade" component.ref="tabIndicator_"
+    icon.bind="indicatorIcon">
+  </mdc-tab-indicator>
+  <span class="mdc-tab__ripple" ref="rippleSurface"></span>
+</template>