@material/web 1.0.1 → 1.0.2-nightly.6a1fb38.0

package/tabs/internal/_tab.scss

@@ -18,10 +18,20 @@
 @mixin styles() {
   :host {
     display: inline-flex;
+    align-items: center;
+    justify-content: center;
     outline: none;
+    padding: 0 16px;
+    position: relative;
     -webkit-tap-highlight-color: transparent;
     vertical-align: middle;
     user-select: none;
+    font-family: var(--_label-text-font);
+    font-size: var(--_label-text-size);
+    line-height: var(--_label-text-line-height);
+    font-weight: var(--_label-text-weight);
+    color: var(--_label-text-color);
+    z-index: 0; // Ensure this is a stacking context so the indicator displays
 
     @include ripple.theme(
       (
@@ -45,24 +55,6 @@
     margin-bottom: calc(var(--_active-indicator-height) + 1px);
   }
 
-  .button {
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: middle;
-    width: 100%;
-    position: relative;
-    padding: 0 16px;
-    margin: 0;
-    z-index: 0; // Ensure this is a stacking context so the indicator displays
-    font-family: var(--_label-text-font);
-    font-size: var(--_label-text-size);
-    line-height: var(--_label-text-line-height);
-    font-weight: var(--_label-text-weight);
-    color: var(--_label-text-color);
-  }
-
   .button::before {
     background: var(--_container-color);
     content: '';
@@ -72,7 +64,8 @@
   }
 
   .button::before,
-  md-ripple {
+  md-ripple,
+  md-elevation {
     border-start-start-radius: var(--_container-shape-start-start);
     border-start-end-radius: var(--_container-shape-start-end);
     border-end-end-radius: var(--_container-shape-end-end);
@@ -104,7 +97,7 @@
   }
 
   // unselected states
-  .button ::slotted([slot='icon']) {
+  ::slotted([slot='icon']) {
     display: inline-flex;
     position: relative;
     writing-mode: horizontal-tb;
@@ -115,29 +108,28 @@
     height: var(--_icon-size);
   }
 
-  .button:hover {
+  :host(:hover) {
     color: var(--_hover-label-text-color);
     cursor: pointer;
   }
 
-  .button:hover ::slotted([slot='icon']) {
+  :host(:hover) ::slotted([slot='icon']) {
     color: var(--_hover-icon-color);
   }
 
-  .button:focus {
+  :host(:focus) {
     color: var(--_focus-label-text-color);
   }
 
-  .button:focus ::slotted([slot='icon']) {
+  :host(:focus) ::slotted([slot='icon']) {
     color: var(--_focus-icon-color);
   }
 
-  .button:active {
+  :host(:active) {
     color: var(--_pressed-label-text-color);
-    outline: none;
   }
 
-  .button:active ::slotted([slot='icon']) {
+  :host(:active) ::slotted([slot='icon']) {
     color: var(--_pressed-icon-color);
   }
 
@@ -145,7 +137,7 @@
   :host([active]) .indicator {
     opacity: 1;
   }
-  :host([active]) .button {
+  :host([active]) {
     color: var(--_active-label-text-color);
     @include elevation.theme(
       (
@@ -163,32 +155,32 @@
     );
   }
 
-  :host([active]) .button ::slotted([slot='icon']) {
+  :host([active]) ::slotted([slot='icon']) {
     color: var(--_active-icon-color);
   }
 
   // selected states
-  :host([active]) .button:hover {
+  :host([active]:hover) {
     color: var(--_active-hover-label-text-color);
   }
 
-  :host([active]) .button:hover ::slotted([slot='icon']) {
+  :host([active]:hover) ::slotted([slot='icon']) {
     color: var(--_active-hover-icon-color);
   }
 
-  :host([active]) .button:focus {
+  :host([active]:focus) {
     color: var(--_active-focus-label-text-color);
   }
 
-  :host([active]) .button:focus ::slotted([slot='icon']) {
+  :host([active]:focus) ::slotted([slot='icon']) {
     color: var(--_active-focus-icon-color);
   }
 
-  :host([active]) .button:active {
+  :host([active]:active) {
     color: var(--_active-pressed-label-text-color);
   }
 
-  :host([active]) .button:active ::slotted([slot='icon']) {
+  :host([active]:active) ::slotted([slot='icon']) {
     color: var(--_active-pressed-icon-color);
   }
 

package/tabs/internal/primary-tab.d.ts

@@ -14,7 +14,5 @@ export declare class PrimaryTab extends Tab {
     inlineIcon: boolean;
     protected getContentClasses(): {
         stacked: boolean;
-        'has-icon': boolean;
-        'has-label': boolean;
     };
 }

package/tabs/internal/tab-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:middle;user-select:none;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape: 8px}:host([active]) md-focus-ring{margin-bottom:calc(var(--_active-indicator-height) + 1px)}.button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:100%;position:relative;padding:0 16px;margin:0;z-index:0;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);color:var(--_label-text-color)}.button::before{background:var(--_container-color);content:"";inset:0;position:absolute;z-index:-1}.button::before,md-ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start)}.content{position:relative;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;height:var(--_container-height);gap:8px}.indicator{position:absolute;box-sizing:border-box;z-index:-1;transform-origin:bottom left;background:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape);height:var(--_active-indicator-height);inset:auto 0 0 0;opacity:0}.button ::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size)}.button:hover{color:var(--_hover-label-text-color);cursor:pointer}.button:hover ::slotted([slot=icon]){color:var(--_hover-icon-color)}.button:focus{color:var(--_focus-label-text-color)}.button:focus ::slotted([slot=icon]){color:var(--_focus-icon-color)}.button:active{color:var(--_pressed-label-text-color);outline:none}.button:active ::slotted([slot=icon]){color:var(--_pressed-icon-color)}:host([active]) .indicator{opacity:1}:host([active]) .button{color:var(--_active-label-text-color);--md-elevation-level: var(--_container-elevation);--md-ripple-hover-color: var(--_active-hover-state-layer-color);--md-ripple-hover-opacity: var(--_active-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_active-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_active-pressed-state-layer-opacity)}:host([active]) .button ::slotted([slot=icon]){color:var(--_active-icon-color)}:host([active]) .button:hover{color:var(--_active-hover-label-text-color)}:host([active]) .button:hover ::slotted([slot=icon]){color:var(--_active-hover-icon-color)}:host([active]) .button:focus{color:var(--_active-focus-label-text-color)}:host([active]) .button:focus ::slotted([slot=icon]){color:var(--_active-focus-icon-color)}:host([active]) .button:active{color:var(--_active-pressed-label-text-color)}:host([active]) .button:active ::slotted([slot=icon]){color:var(--_active-pressed-icon-color)}:host,::slotted(*){white-space:nowrap}@media(forced-colors: active){.indicator{background:CanvasText}}/*# sourceMappingURL=tab-styles.css.map */
+export const styles = css `:host{display:inline-flex;align-items:center;justify-content:center;outline:none;padding:0 16px;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:middle;user-select:none;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);color:var(--_label-text-color);z-index:0;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape: 8px}:host([active]) md-focus-ring{margin-bottom:calc(var(--_active-indicator-height) + 1px)}.button::before{background:var(--_container-color);content:"";inset:0;position:absolute;z-index:-1}.button::before,md-ripple,md-elevation{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start)}.content{position:relative;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;height:var(--_container-height);gap:8px}.indicator{position:absolute;box-sizing:border-box;z-index:-1;transform-origin:bottom left;background:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape);height:var(--_active-indicator-height);inset:auto 0 0 0;opacity:0}::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size)}:host(:hover){color:var(--_hover-label-text-color);cursor:pointer}:host(:hover) ::slotted([slot=icon]){color:var(--_hover-icon-color)}:host(:focus){color:var(--_focus-label-text-color)}:host(:focus) ::slotted([slot=icon]){color:var(--_focus-icon-color)}:host(:active){color:var(--_pressed-label-text-color)}:host(:active) ::slotted([slot=icon]){color:var(--_pressed-icon-color)}:host([active]) .indicator{opacity:1}:host([active]){color:var(--_active-label-text-color);--md-elevation-level: var(--_container-elevation);--md-ripple-hover-color: var(--_active-hover-state-layer-color);--md-ripple-hover-opacity: var(--_active-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_active-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_active-pressed-state-layer-opacity)}:host([active]) ::slotted([slot=icon]){color:var(--_active-icon-color)}:host([active]:hover){color:var(--_active-hover-label-text-color)}:host([active]:hover) ::slotted([slot=icon]){color:var(--_active-hover-icon-color)}:host([active]:focus){color:var(--_active-focus-label-text-color)}:host([active]:focus) ::slotted([slot=icon]){color:var(--_active-focus-icon-color)}:host([active]:active){color:var(--_active-pressed-label-text-color)}:host([active]:active) ::slotted([slot=icon]){color:var(--_active-pressed-icon-color)}:host,::slotted(*){white-space:nowrap}@media(forced-colors: active){.indicator{background:CanvasText}}/*# sourceMappingURL=tab-styles.css.map */
 `;
 //# sourceMappingURL=tab-styles.css.js.map

package/tabs/internal/tab-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-styles.css.js","sourceRoot":"","sources":["tab-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:middle;user-select:none;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape: 8px}:host([active]) md-focus-ring{margin-bottom:calc(var(--_active-indicator-height) + 1px)}.button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:100%;position:relative;padding:0 16px;margin:0;z-index:0;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);color:var(--_label-text-color)}.button::before{background:var(--_container-color);content:\"\";inset:0;position:absolute;z-index:-1}.button::before,md-ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start)}.content{position:relative;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;height:var(--_container-height);gap:8px}.indicator{position:absolute;box-sizing:border-box;z-index:-1;transform-origin:bottom left;background:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape);height:var(--_active-indicator-height);inset:auto 0 0 0;opacity:0}.button ::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size)}.button:hover{color:var(--_hover-label-text-color);cursor:pointer}.button:hover ::slotted([slot=icon]){color:var(--_hover-icon-color)}.button:focus{color:var(--_focus-label-text-color)}.button:focus ::slotted([slot=icon]){color:var(--_focus-icon-color)}.button:active{color:var(--_pressed-label-text-color);outline:none}.button:active ::slotted([slot=icon]){color:var(--_pressed-icon-color)}:host([active]) .indicator{opacity:1}:host([active]) .button{color:var(--_active-label-text-color);--md-elevation-level: var(--_container-elevation);--md-ripple-hover-color: var(--_active-hover-state-layer-color);--md-ripple-hover-opacity: var(--_active-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_active-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_active-pressed-state-layer-opacity)}:host([active]) .button ::slotted([slot=icon]){color:var(--_active-icon-color)}:host([active]) .button:hover{color:var(--_active-hover-label-text-color)}:host([active]) .button:hover ::slotted([slot=icon]){color:var(--_active-hover-icon-color)}:host([active]) .button:focus{color:var(--_active-focus-label-text-color)}:host([active]) .button:focus ::slotted([slot=icon]){color:var(--_active-focus-icon-color)}:host([active]) .button:active{color:var(--_active-pressed-label-text-color)}:host([active]) .button:active ::slotted([slot=icon]){color:var(--_active-pressed-icon-color)}:host,::slotted(*){white-space:nowrap}@media(forced-colors: active){.indicator{background:CanvasText}}/*# sourceMappingURL=tab-styles.css.map */\n`;\n "]}
+{"version":3,"file":"tab-styles.css.js","sourceRoot":"","sources":["tab-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex;align-items:center;justify-content:center;outline:none;padding:0 16px;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:middle;user-select:none;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);color:var(--_label-text-color);z-index:0;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}md-focus-ring{--md-focus-ring-shape: 8px}:host([active]) md-focus-ring{margin-bottom:calc(var(--_active-indicator-height) + 1px)}.button::before{background:var(--_container-color);content:\"\";inset:0;position:absolute;z-index:-1}.button::before,md-ripple,md-elevation{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start)}.content{position:relative;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;height:var(--_container-height);gap:8px}.indicator{position:absolute;box-sizing:border-box;z-index:-1;transform-origin:bottom left;background:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape);height:var(--_active-indicator-height);inset:auto 0 0 0;opacity:0}::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size)}:host(:hover){color:var(--_hover-label-text-color);cursor:pointer}:host(:hover) ::slotted([slot=icon]){color:var(--_hover-icon-color)}:host(:focus){color:var(--_focus-label-text-color)}:host(:focus) ::slotted([slot=icon]){color:var(--_focus-icon-color)}:host(:active){color:var(--_pressed-label-text-color)}:host(:active) ::slotted([slot=icon]){color:var(--_pressed-icon-color)}:host([active]) .indicator{opacity:1}:host([active]){color:var(--_active-label-text-color);--md-elevation-level: var(--_container-elevation);--md-ripple-hover-color: var(--_active-hover-state-layer-color);--md-ripple-hover-opacity: var(--_active-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_active-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_active-pressed-state-layer-opacity)}:host([active]) ::slotted([slot=icon]){color:var(--_active-icon-color)}:host([active]:hover){color:var(--_active-hover-label-text-color)}:host([active]:hover) ::slotted([slot=icon]){color:var(--_active-hover-icon-color)}:host([active]:focus){color:var(--_active-focus-label-text-color)}:host([active]:focus) ::slotted([slot=icon]){color:var(--_active-focus-icon-color)}:host([active]:active){color:var(--_active-pressed-label-text-color)}:host([active]:active) ::slotted([slot=icon]){color:var(--_active-pressed-icon-color)}:host,::slotted(*){white-space:nowrap}@media(forced-colors: active){.indicator{background:CanvasText}}/*# sourceMappingURL=tab-styles.css.map */\n`;\n "]}

package/tabs/internal/tab.d.ts

@@ -7,6 +7,7 @@ import '../../elevation/elevation.js';
 import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 import { LitElement } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
 /**
  * Symbol for tabs to use to animate their indicators based off another tab's
  * indicator.
@@ -17,10 +18,11 @@ declare const INDICATOR: unique symbol;
  * previously selected tab.
  */
 export declare const ANIMATE_INDICATOR: unique symbol;
+declare const tabBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../labs/behaviors/focusable.js").Focusable>;
 /**
  * Tab component.
  */
-export declare class Tab extends LitElement {
+export declare class Tab extends tabBaseClass {
     /**
      * The attribute `md-tab` indicates that the element is a tab for the parent
      * element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`
@@ -52,10 +54,7 @@ export declare class Tab extends LitElement {
     private readonly internals;
     constructor();
     protected render(): import("lit-html").TemplateResult<1>;
-    protected getContentClasses(): {
-        'has-icon': boolean;
-        'has-label': boolean;
-    };
+    protected getContentClasses(): ClassInfo;
     protected updated(): void;
     private handleKeydown;
     private handleContentClick;

package/tabs/internal/tab.js

@@ -9,10 +9,11 @@ import '../../elevation/elevation.js';
 import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 import { html, isServer, LitElement, nothing } from 'lit';
-import { property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js';
+import { property, query, queryAssignedElements, queryAssignedNodes, state, } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { polyfillElementInternalsAria, setupHostAria } from '../../internal/aria/aria.js';
+import { polyfillARIAMixin, polyfillElementInternalsAria, } from '../../internal/aria/aria.js';
 import { EASING } from '../../internal/motion/animation.js';
+import { mixinFocusable } from '../../labs/behaviors/focusable.js';
 /**
  * Symbol for tabs to use to animate their indicators based off another tab's
  * indicator.
@@ -23,10 +24,12 @@ const INDICATOR = Symbol('indicator');
  * previously selected tab.
  */
 export const ANIMATE_INDICATOR = Symbol('animateIndicator');
+// Separate variable needed for closure.
+const tabBaseClass = mixinFocusable(LitElement);
 /**
  * Tab component.
  */
-export class Tab extends LitElement {
+export class Tab extends tabBaseClass {
     /**
      * TODO(b/293476210): remove after migrating
      * @deprecated use `active`
@@ -58,7 +61,9 @@ export class Tab extends LitElement {
          */
         this.iconOnly = false;
         this.fullWidthIndicator = false;
-        this.internals = polyfillElementInternalsAria(this, this /* needed for closure */.attachInternals());
+        this.internals = polyfillElementInternalsAria(this, 
+        // Cast needed for closure
+        this.attachInternals());
         if (!isServer) {
             this.internals.role = 'tab';
             this.addEventListener('keydown', this.handleKeydown.bind(this));
@@ -66,20 +71,22 @@ export class Tab extends LitElement {
     }
     render() {
         const indicator = html `<div class="indicator"></div>`;
-        return html `
-      <div class="button" role="presentation" @click=${this.handleContentClick}>
-        <md-focus-ring part="focus-ring" inward
-            .control=${this}></md-focus-ring>
-        <md-elevation></md-elevation>
-        <md-ripple .control=${this}></md-ripple>
-        <div class="content ${classMap(this.getContentClasses())}"
-            role="presentation">
-          <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
-          <slot @slotchange=${this.handleSlotChange}></slot>
-          ${this.fullWidthIndicator ? nothing : indicator}
-        </div>
-        ${this.fullWidthIndicator ? indicator : nothing}
-      </div>`;
+        return html `<div
+      class="button"
+      role="presentation"
+      @click=${this.handleContentClick}>
+      <md-focus-ring part="focus-ring" inward .control=${this}></md-focus-ring>
+      <md-elevation></md-elevation>
+      <md-ripple .control=${this}></md-ripple>
+      <div
+        class="content ${classMap(this.getContentClasses())}"
+        role="presentation">
+        <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        ${this.fullWidthIndicator ? nothing : indicator}
+      </div>
+      ${this.fullWidthIndicator ? indicator : nothing}
+    </div>`;
     }
     getContentClasses() {
         return {
@@ -112,12 +119,15 @@ export class Tab extends LitElement {
         if (!this[INDICATOR]) {
             return;
         }
-        this[INDICATOR].getAnimations().forEach(a => {
+        this[INDICATOR].getAnimations().forEach((a) => {
             a.cancel();
         });
         const frames = this.getKeyframes(previousTab);
         if (frames !== null) {
-            this[INDICATOR].animate(frames, { duration: 250, easing: EASING.EMPHASIZED });
+            this[INDICATOR].animate(frames, {
+                duration: 250,
+                easing: EASING.EMPHASIZED,
+            });
         }
     }
     getKeyframes(previousTab) {
@@ -133,7 +143,9 @@ export class Tab extends LitElement {
         const toPos = toRect.left;
         const toExtent = toRect.width;
         const scale = fromExtent / toExtent;
-        if (!reduceMotion && fromPos !== undefined && toPos !== undefined &&
+        if (!reduceMotion &&
+            fromPos !== undefined &&
+            toPos !== undefined &&
             !isNaN(scale)) {
             from['transform'] = `translateX(${(fromPos - toPos).toFixed(4)}px) scaleX(${scale.toFixed(4)})`;
         }
@@ -162,7 +174,7 @@ export class Tab extends LitElement {
     }
 }
 (() => {
-    setupHostAria(Tab);
+    polyfillARIAMixin(Tab);
 })();
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'md-tab' })

package/tabs/internal/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["tab.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, queryAssignedElements, queryAssignedNodes, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {polyfillElementInternalsAria, setupHostAria} from '../../internal/aria/aria.js';\nimport {EASING} from '../../internal/motion/animation.js';\n\n/**\n * Symbol for tabs to use to animate their indicators based off another tab's\n * indicator.\n */\nconst INDICATOR = Symbol('indicator');\n\n/**\n * Symbol used by the tab bar to request a tab to animate its indicator from a\n * previously selected tab.\n */\nexport const ANIMATE_INDICATOR = Symbol('animateIndicator');\n\n/**\n * Tab component.\n */\nexport class Tab extends LitElement {\n  static {\n    setupHostAria(Tab);\n  }\n\n  /**\n   * The attribute `md-tab` indicates that the element is a tab for the parent\n   * element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`\n   * component that you have an `md-tab` attribute set.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'md-tab'})\n  readonly isTab = true;\n\n  /**\n   * Whether or not the tab is selected.\n   **/\n  @property({type: Boolean, reflect: true}) active = false;\n\n  /**\n   * TODO(b/293476210): remove after migrating\n   * @deprecated use `active`\n   */\n  @property({type: Boolean})\n  get selected() {\n    return this.active;\n  }\n  set selected(active: boolean) {\n    this.active = active;\n  }\n\n  /**\n   * In SSR, set this to true when an icon is present.\n   */\n  @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false;\n\n  /**\n   * In SSR, set this to true when there is no label and only an icon.\n   */\n  @property({type: Boolean, attribute: 'icon-only'}) iconOnly = false;\n\n  @query('.indicator') readonly[INDICATOR]!: HTMLElement|null;\n  @state() protected fullWidthIndicator = false;\n  @queryAssignedNodes({flatten: true})\n  private readonly assignedDefaultNodes!: Node[];\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n  private readonly internals = polyfillElementInternalsAria(\n      this, (this as HTMLElement /* needed for closure */).attachInternals());\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.internals.role = 'tab';\n      this.addEventListener('keydown', this.handleKeydown.bind(this));\n    }\n  }\n\n  protected override render() {\n    const indicator = html`<div class=\"indicator\"></div>`;\n    return html`\n      <div class=\"button\" role=\"presentation\" @click=${this.handleContentClick}>\n        <md-focus-ring part=\"focus-ring\" inward\n            .control=${this}></md-focus-ring>\n        <md-elevation></md-elevation>\n        <md-ripple .control=${this}></md-ripple>\n        <div class=\"content ${classMap(this.getContentClasses())}\"\n            role=\"presentation\">\n          <slot name=\"icon\" @slotchange=${this.handleIconSlotChange}></slot>\n          <slot @slotchange=${this.handleSlotChange}></slot>\n          ${this.fullWidthIndicator ? nothing : indicator}\n        </div>\n        ${this.fullWidthIndicator ? indicator : nothing}\n      </div>`;\n  }\n\n  protected getContentClasses() {\n    return {\n      'has-icon': this.hasIcon,\n      'has-label': !this.iconOnly,\n    };\n  }\n\n  protected override updated() {\n    this.internals.ariaSelected = String(this.active);\n  }\n\n  private async handleKeydown(event: KeyboardEvent) {\n    // Allow event to bubble.\n    await 0;\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      // Prevent default behavior such as scrolling when pressing spacebar.\n      event.preventDefault();\n      this.click();\n    }\n  }\n\n  private handleContentClick(event: Event) {\n    // Ensure the \"click\" target is always the tab, and not content, by stopping\n    // propagation of content clicks and re-clicking the host.\n    event.stopPropagation();\n    this.click();\n  }\n\n  [ANIMATE_INDICATOR](previousTab: Tab) {\n    if (!this[INDICATOR]) {\n      return;\n    }\n\n    this[INDICATOR].getAnimations().forEach(a => {\n      a.cancel();\n    });\n    const frames = this.getKeyframes(previousTab);\n    if (frames !== null) {\n      this[INDICATOR].animate(\n          frames, {duration: 250, easing: EASING.EMPHASIZED});\n    }\n  }\n\n  private getKeyframes(previousTab: Tab) {\n    const reduceMotion = shouldReduceMotion();\n    if (!this.active) {\n      return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;\n    }\n\n    const from: Keyframe = {};\n    const fromRect =\n        previousTab[INDICATOR]?.getBoundingClientRect() ?? ({} as DOMRect);\n    const fromPos = fromRect.left;\n    const fromExtent = fromRect.width;\n    const toRect = this[INDICATOR]!.getBoundingClientRect();\n    const toPos = toRect.left;\n    const toExtent = toRect.width;\n    const scale = fromExtent / toExtent;\n    if (!reduceMotion && fromPos !== undefined && toPos !== undefined &&\n        !isNaN(scale)) {\n      from['transform'] = `translateX(${\n          (fromPos - toPos).toFixed(4)}px) scaleX(${scale.toFixed(4)})`;\n    } else {\n      from['opacity'] = 0;\n    }\n    // note, including `transform: none` avoids quirky Safari behavior\n    // that can hide the animation.\n    return [from, {'transform': 'none'}];\n  }\n\n  private handleSlotChange() {\n    this.iconOnly = false;\n    // Check if there's any label text or elements. If not, then there is only\n    // an icon.\n    for (const node of this.assignedDefaultNodes) {\n      const hasTextContent = node.nodeType === Node.TEXT_NODE &&\n          !!(node as Text).wholeText.match(/\\S/);\n      if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {\n        return;\n      }\n    }\n\n    this.iconOnly = true;\n  }\n\n  private handleIconSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n\nfunction shouldReduceMotion() {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n"]}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["tab.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  queryAssignedNodes,\n  state,\n} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {\n  polyfillARIAMixin,\n  polyfillElementInternalsAria,\n} from '../../internal/aria/aria.js';\nimport {EASING} from '../../internal/motion/animation.js';\nimport {mixinFocusable} from '../../labs/behaviors/focusable.js';\n\n/**\n * Symbol for tabs to use to animate their indicators based off another tab's\n * indicator.\n */\nconst INDICATOR = Symbol('indicator');\n\n/**\n * Symbol used by the tab bar to request a tab to animate its indicator from a\n * previously selected tab.\n */\nexport const ANIMATE_INDICATOR = Symbol('animateIndicator');\n\n// Separate variable needed for closure.\nconst tabBaseClass = mixinFocusable(LitElement);\n\n/**\n * Tab component.\n */\nexport class Tab extends tabBaseClass {\n  static {\n    polyfillARIAMixin(Tab);\n  }\n\n  /**\n   * The attribute `md-tab` indicates that the element is a tab for the parent\n   * element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`\n   * component that you have an `md-tab` attribute set.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'md-tab'})\n  readonly isTab = true;\n\n  /**\n   * Whether or not the tab is selected.\n   **/\n  @property({type: Boolean, reflect: true}) active = false;\n\n  /**\n   * TODO(b/293476210): remove after migrating\n   * @deprecated use `active`\n   */\n  @property({type: Boolean})\n  get selected() {\n    return this.active;\n  }\n  set selected(active: boolean) {\n    this.active = active;\n  }\n\n  /**\n   * In SSR, set this to true when an icon is present.\n   */\n  @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false;\n\n  /**\n   * In SSR, set this to true when there is no label and only an icon.\n   */\n  @property({type: Boolean, attribute: 'icon-only'}) iconOnly = false;\n\n  @query('.indicator') readonly [INDICATOR]!: HTMLElement | null;\n  @state() protected fullWidthIndicator = false;\n  @queryAssignedNodes({flatten: true})\n  private readonly assignedDefaultNodes!: Node[];\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n  private readonly internals = polyfillElementInternalsAria(\n    this,\n    // Cast needed for closure\n    (this as HTMLElement).attachInternals(),\n  );\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.internals.role = 'tab';\n      this.addEventListener('keydown', this.handleKeydown.bind(this));\n    }\n  }\n\n  protected override render() {\n    const indicator = html`<div class=\"indicator\"></div>`;\n    return html`<div\n      class=\"button\"\n      role=\"presentation\"\n      @click=${this.handleContentClick}>\n      <md-focus-ring part=\"focus-ring\" inward .control=${this}></md-focus-ring>\n      <md-elevation></md-elevation>\n      <md-ripple .control=${this}></md-ripple>\n      <div\n        class=\"content ${classMap(this.getContentClasses())}\"\n        role=\"presentation\">\n        <slot name=\"icon\" @slotchange=${this.handleIconSlotChange}></slot>\n        <slot @slotchange=${this.handleSlotChange}></slot>\n        ${this.fullWidthIndicator ? nothing : indicator}\n      </div>\n      ${this.fullWidthIndicator ? indicator : nothing}\n    </div>`;\n  }\n\n  protected getContentClasses(): ClassInfo {\n    return {\n      'has-icon': this.hasIcon,\n      'has-label': !this.iconOnly,\n    };\n  }\n\n  protected override updated() {\n    this.internals.ariaSelected = String(this.active);\n  }\n\n  private async handleKeydown(event: KeyboardEvent) {\n    // Allow event to bubble.\n    await 0;\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      // Prevent default behavior such as scrolling when pressing spacebar.\n      event.preventDefault();\n      this.click();\n    }\n  }\n\n  private handleContentClick(event: Event) {\n    // Ensure the \"click\" target is always the tab, and not content, by stopping\n    // propagation of content clicks and re-clicking the host.\n    event.stopPropagation();\n    this.click();\n  }\n\n  [ANIMATE_INDICATOR](previousTab: Tab) {\n    if (!this[INDICATOR]) {\n      return;\n    }\n\n    this[INDICATOR].getAnimations().forEach((a) => {\n      a.cancel();\n    });\n    const frames = this.getKeyframes(previousTab);\n    if (frames !== null) {\n      this[INDICATOR].animate(frames, {\n        duration: 250,\n        easing: EASING.EMPHASIZED,\n      });\n    }\n  }\n\n  private getKeyframes(previousTab: Tab) {\n    const reduceMotion = shouldReduceMotion();\n    if (!this.active) {\n      return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;\n    }\n\n    const from: Keyframe = {};\n    const fromRect =\n      previousTab[INDICATOR]?.getBoundingClientRect() ?? ({} as DOMRect);\n    const fromPos = fromRect.left;\n    const fromExtent = fromRect.width;\n    const toRect = this[INDICATOR]!.getBoundingClientRect();\n    const toPos = toRect.left;\n    const toExtent = toRect.width;\n    const scale = fromExtent / toExtent;\n    if (\n      !reduceMotion &&\n      fromPos !== undefined &&\n      toPos !== undefined &&\n      !isNaN(scale)\n    ) {\n      from['transform'] = `translateX(${(fromPos - toPos).toFixed(\n        4,\n      )}px) scaleX(${scale.toFixed(4)})`;\n    } else {\n      from['opacity'] = 0;\n    }\n    // note, including `transform: none` avoids quirky Safari behavior\n    // that can hide the animation.\n    return [from, {'transform': 'none'}];\n  }\n\n  private handleSlotChange() {\n    this.iconOnly = false;\n    // Check if there's any label text or elements. If not, then there is only\n    // an icon.\n    for (const node of this.assignedDefaultNodes) {\n      const hasTextContent =\n        node.nodeType === Node.TEXT_NODE &&\n        !!(node as Text).wholeText.match(/\\S/);\n      if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {\n        return;\n      }\n    }\n\n    this.iconOnly = true;\n  }\n\n  private handleIconSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n\nfunction shouldReduceMotion() {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n"]}

package/tabs/internal/tabs.d.ts

@@ -7,12 +7,12 @@ import '../../divider/divider.js';
 import { LitElement } from 'lit';
 import { Tab } from './tab.js';
 /**
- * @fires change Fired when the selected tab changes. The target's selected or
+ * @fires change {Event} Fired when the selected tab changes. The target's selected or
  * selectedItem and previousSelected or previousSelectedItem provide information
  * about the selection change. The change event is fired when a user interaction
  * like a space/enter key or click cause a selection change. The tab selection
  * based on these actions can be cancelled by calling preventDefault on the
- * triggering `keydown` or `click` event.
+ * triggering `keydown` or `click` event. --bubbles
  *
  * @example
  * // perform an action if a tab is clicked
@@ -37,11 +37,15 @@ export declare class Tabs extends LitElement {
     readonly tabs: Tab[];
     /**
      * The currently selected tab, `null` only when there are no tab children.
+     *
+     * @export
      */
     get activeTab(): Tab | null;
     set activeTab(tab: Tab | null);
     /**
      * The index of the currently selected tab.
+     *
+     * @export
      */
     get activeTabIndex(): number;
     set activeTabIndex(index: number);

package/tabs/internal/tabs.js

@@ -7,15 +7,15 @@ import { __decorate } from "tslib";
 import '../../divider/divider.js';
 import { html, isServer, LitElement } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
-import { polyfillElementInternalsAria, setupHostAria } from '../../internal/aria/aria.js';
+import { polyfillARIAMixin, polyfillElementInternalsAria, } from '../../internal/aria/aria.js';
 import { ANIMATE_INDICATOR } from './tab.js';
 /**
- * @fires change Fired when the selected tab changes. The target's selected or
+ * @fires change {Event} Fired when the selected tab changes. The target's selected or
  * selectedItem and previousSelected or previousSelectedItem provide information
  * about the selection change. The change event is fired when a user interaction
  * like a space/enter key or click cause a selection change. The tab selection
  * based on these actions can be cancelled by calling preventDefault on the
- * triggering `keydown` or `click` event.
+ * triggering `keydown` or `click` event. --bubbles
  *
  * @example
  * // perform an action if a tab is clicked
@@ -36,9 +36,11 @@ import { ANIMATE_INDICATOR } from './tab.js';
 export class Tabs extends LitElement {
     /**
      * The currently selected tab, `null` only when there are no tab children.
+     *
+     * @export
      */
     get activeTab() {
-        return this.tabs.find(tab => tab.active) ?? null;
+        return this.tabs.find((tab) => tab.active) ?? null;
     }
     set activeTab(tab) {
         // Ignore setting activeTab to null. As long as there are children, one tab
@@ -49,9 +51,11 @@ export class Tabs extends LitElement {
     }
     /**
      * The index of the currently selected tab.
+     *
+     * @export
      */
     get activeTabIndex() {
-        return this.tabs.findIndex(tab => tab.active);
+        return this.tabs.findIndex((tab) => tab.active);
     }
     set activeTabIndex(index) {
         const activateTabAtIndex = () => {
@@ -82,7 +86,7 @@ export class Tabs extends LitElement {
         activateTabAtIndex();
     }
     get focusedTab() {
-        return this.tabs.find(tab => tab.matches(':focus-within'));
+        return this.tabs.find((tab) => tab.matches(':focus-within'));
     }
     constructor() {
         super();
@@ -90,7 +94,9 @@ export class Tabs extends LitElement {
          * Whether or not to automatically select a tab when it is focused.
          */
         this.autoActivate = false;
-        this.internals = polyfillElementInternalsAria(this, this /* needed for closure */.attachInternals());
+        this.internals = polyfillElementInternalsAria(this, 
+        // Cast needed for closure
+        this.attachInternals());
         if (!isServer) {
             this.internals.role = 'tablist';
             this.addEventListener('keydown', this.handleKeydown.bind(this));
@@ -132,8 +138,9 @@ export class Tabs extends LitElement {
     render() {
         return html `
       <div class="tabs">
-        <slot @slotchange=${this.handleSlotChange}
-            @click=${this.handleTabClick}></slot>
+        <slot
+          @slotchange=${this.handleSlotChange}
+          @click=${this.handleTabClick}></slot>
       </div>
       <md-divider part="divider"></md-divider>
     `;
@@ -186,7 +193,7 @@ export class Tabs extends LitElement {
         const isHome = event.key === 'Home';
         const isEnd = event.key === 'End';
         // Ignore non-navigation keys
-        if (event.defaultPrevented || !isLeft && !isRight && !isHome && !isEnd) {
+        if (event.defaultPrevented || (!isLeft && !isRight && !isHome && !isEnd)) {
             return;
         }
         const { tabs } = this;
@@ -260,7 +267,7 @@ export class Tabs extends LitElement {
     }
 }
 (() => {
-    setupHostAria(Tabs, { focusable: false });
+    polyfillARIAMixin(Tabs);
 })();
 __decorate([
     queryAssignedElements({ flatten: true, selector: '[md-tab]' })

package/tabs/internal/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../divider/divider.js';\n\nimport {html, isServer, LitElement} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\n\nimport {polyfillElementInternalsAria, setupHostAria} from '../../internal/aria/aria.js';\n\nimport {ANIMATE_INDICATOR, Tab} from './tab.js';\n\n/**\n * @fires change Fired when the selected tab changes. The target's selected or\n * selectedItem and previousSelected or previousSelectedItem provide information\n * about the selection change. The change event is fired when a user interaction\n * like a space/enter key or click cause a selection change. The tab selection\n * based on these actions can be cancelled by calling preventDefault on the\n * triggering `keydown` or `click` event.\n *\n * @example\n * // perform an action if a tab is clicked\n * tabs.addEventListener('change', (event: Event) => {\n *   if (event.target.selected === 2)\n *      takeAction();\n *   }\n * });\n *\n * // prevent a click from triggering tab selection under some condition\n * tabs.addEventListener('click', (event: Event) => {\n *   if (notReady)\n *      event.preventDefault();\n *   }\n * });\n *\n */\nexport class Tabs extends LitElement {\n  static {\n    setupHostAria(Tabs, {focusable: false});\n  }\n\n  /**\n   * The tabs of this tab bar.\n   */\n  @queryAssignedElements({flatten: true, selector: '[md-tab]'})\n  readonly tabs!: Tab[];\n\n  /**\n   * The currently selected tab, `null` only when there are no tab children.\n   */\n  get activeTab() {\n    return this.tabs.find(tab => tab.active) ?? null;\n  }\n  set activeTab(tab: Tab|null) {\n    // Ignore setting activeTab to null. As long as there are children, one tab\n    // must be selected.\n    if (tab) {\n      this.activateTab(tab);\n    }\n  }\n\n  /**\n   * The index of the currently selected tab.\n   */\n  get activeTabIndex() {\n    return this.tabs.findIndex(tab => tab.active);\n  }\n  set activeTabIndex(index: number) {\n    const activateTabAtIndex = () => {\n      const tab = this.tabs[index];\n      // Ignore out-of-bound indices.\n      if (tab) {\n        this.activateTab(tab);\n      }\n    };\n\n    if (!this.slotElement) {\n      // This is needed to support setting the activeTabIndex via a lit property\n      // binding.\n      //\n      // ```ts\n      // html`\n      //   <md-tabs .activeTabIndex=${1}>\n      //     <md-tab>First</md-tab>\n      //     <md-tab>Second</md-tab>\n      //   </md-tabs>\n      // `;\n      // ```\n      //\n      // It's needed since lit's rendering lifecycle is asynchronous, and the\n      // `<slot>` element hasn't rendered, so `tabs` is empty.\n      this.updateComplete.then(activateTabAtIndex);\n      return;\n    }\n\n    activateTabAtIndex();\n  }\n\n  /**\n   * Whether or not to automatically select a tab when it is focused.\n   */\n  @property({type: Boolean, attribute: 'auto-activate'}) autoActivate = false;\n\n  @query('slot') private readonly slotElement!: HTMLSlotElement|null;\n\n  private get focusedTab() {\n    return this.tabs.find(tab => tab.matches(':focus-within'));\n  }\n\n  private readonly internals = polyfillElementInternalsAria(\n      this, (this as HTMLElement /* needed for closure */).attachInternals());\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.internals.role = 'tablist';\n      this.addEventListener('keydown', this.handleKeydown.bind(this));\n      this.addEventListener('keyup', this.handleKeyup.bind(this));\n      this.addEventListener('focusout', this.handleFocusout.bind(this));\n    }\n  }\n\n  /**\n   * Scrolls the toolbar, if overflowing, to the active tab, or the provided\n   * tab.\n   *\n   * @param tabToScrollTo The tab that should be scrolled to. Defaults to the\n   *     active tab.\n   * @return A Promise that resolves after the tab has been scrolled to.\n   */\n  async scrollToTab(tabToScrollTo?: Tab|null) {\n    await this.updateComplete;\n    const {tabs} = this;\n    tabToScrollTo ??= this.activeTab;\n    if (!tabToScrollTo || !tabs.includes(tabToScrollTo)) {\n      return;\n    }\n\n    // wait for tabs to render.\n    for (const tab of this.tabs) {\n      await tab.updateComplete;\n    }\n\n    const offset = tabToScrollTo.offsetLeft;\n    const extent = tabToScrollTo.offsetWidth;\n    const scroll = this.scrollLeft;\n    const hostExtent = this.offsetWidth;\n    const scrollMargin = 48;\n    const min = offset - scrollMargin;\n    const max = offset + extent - hostExtent + scrollMargin;\n    const to = Math.min(min, Math.max(max, scroll));\n    // TODO(b/299934312): improve focus smoothness\n    const behavior = !this.focusedTab ? 'smooth' : 'instant' as const;\n    this.scrollTo({behavior, top: 0, left: to});\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"tabs\">\n        <slot @slotchange=${this.handleSlotChange}\n            @click=${this.handleTabClick}></slot>\n      </div>\n      <md-divider part=\"divider\"></md-divider>\n    `;\n  }\n\n  private async handleTabClick(event: Event) {\n    const tab = event.target;\n    // Allow event to bubble\n    await 0;\n    if (event.defaultPrevented || !isTab(tab) || tab.active) {\n      return;\n    }\n\n    this.activateTab(tab);\n  }\n\n  private activateTab(activeTab: Tab) {\n    const {tabs} = this;\n    const previousTab = this.activeTab;\n    if (!tabs.includes(activeTab) || previousTab === activeTab) {\n      // Ignore setting activeTab to a tab element that is not a child.\n      return;\n    }\n\n    for (const tab of tabs) {\n      tab.active = tab === activeTab;\n    }\n\n    if (previousTab) {\n      // Don't dispatch a change event if activating a tab when no previous tabs\n      // were selected, such as when md-tabs auto-selects the first tab.\n      const defaultPrevented = !this.dispatchEvent(\n          new Event('change', {bubbles: true, cancelable: true}));\n      if (defaultPrevented) {\n        for (const tab of tabs) {\n          tab.active = tab === previousTab;\n        }\n        return;\n      }\n\n      activeTab[ANIMATE_INDICATOR](previousTab);\n    }\n\n    this.updateFocusableTab(activeTab);\n    this.scrollToTab(activeTab);\n  }\n\n  private updateFocusableTab(focusableTab: Tab) {\n    for (const tab of this.tabs) {\n      tab.tabIndex = tab === focusableTab ? 0 : -1;\n    }\n  }\n\n  // focus item on keydown and optionally select it\n  private async handleKeydown(event: KeyboardEvent) {\n    // Allow event to bubble.\n    await 0;\n    const isLeft = event.key === 'ArrowLeft';\n    const isRight = event.key === 'ArrowRight';\n    const isHome = event.key === 'Home';\n    const isEnd = event.key === 'End';\n    // Ignore non-navigation keys\n    if (event.defaultPrevented || !isLeft && !isRight && !isHome && !isEnd) {\n      return;\n    }\n\n    const {tabs} = this;\n    // Don't try to select another tab if there aren't any.\n    if (tabs.length < 2) {\n      return;\n    }\n\n    // Prevent default interactions, such as scrolling.\n    event.preventDefault();\n\n    let indexToFocus: number;\n    if (isHome || isEnd) {\n      indexToFocus = isHome ? 0 : tabs.length - 1;\n    } else {\n      // Check if moving forwards or backwards\n      const isRtl = getComputedStyle(this).direction === 'rtl';\n      const forwards = isRtl ? isLeft : isRight;\n      const {focusedTab} = this;\n      if (!focusedTab) {\n        // If there is not already a tab focused, select the first or last tab\n        // based on the direction we're traveling.\n        indexToFocus = forwards ? 0 : tabs.length - 1;\n      } else {\n        const focusedIndex = this.tabs.indexOf(focusedTab);\n        indexToFocus = forwards ? focusedIndex + 1 : focusedIndex - 1;\n        if (indexToFocus >= tabs.length) {\n          // Return to start if moving past the last item.\n          indexToFocus = 0;\n        } else if (indexToFocus < 0) {\n          // Go to end if moving before the first item.\n          indexToFocus = tabs.length - 1;\n        }\n      }\n    }\n\n    const tabToFocus = tabs[indexToFocus];\n    tabToFocus.focus();\n    if (this.autoActivate) {\n      this.activateTab(tabToFocus);\n    } else {\n      this.updateFocusableTab(tabToFocus);\n    }\n  }\n\n  // scroll to item on keyup.\n  private handleKeyup() {\n    this.scrollToTab(this.focusedTab ?? this.activeTab);\n  }\n\n  private handleFocusout() {\n    // restore focus to selected item when blurring the tab bar.\n    if (this.matches(':focus-within')) {\n      return;\n    }\n\n    const {activeTab} = this;\n    if (activeTab) {\n      this.updateFocusableTab(activeTab);\n    }\n  }\n\n  private handleSlotChange() {\n    const firstTab = this.tabs[0];\n    if (!this.activeTab && firstTab) {\n      // If the active tab was removed, auto-select the first one. There should\n      // always be a selected tab while the bar has children.\n      this.activateTab(firstTab);\n    }\n\n    // When children shift, ensure the active tab is visible. For example, if\n    // many children are added before the active tab, it'd be pushed off screen.\n    // This ensures it stays visible.\n    this.scrollToTab(this.activeTab);\n  }\n}\n\nfunction isTab(element: unknown): element is Tab {\n  return element instanceof HTMLElement && element.hasAttribute('md-tab');\n}"]}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../divider/divider.js';\n\nimport {html, isServer, LitElement} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\n\nimport {\n  polyfillARIAMixin,\n  polyfillElementInternalsAria,\n} from '../../internal/aria/aria.js';\n\nimport {ANIMATE_INDICATOR, Tab} from './tab.js';\n\n/**\n * @fires change {Event} Fired when the selected tab changes. The target's selected or\n * selectedItem and previousSelected or previousSelectedItem provide information\n * about the selection change. The change event is fired when a user interaction\n * like a space/enter key or click cause a selection change. The tab selection\n * based on these actions can be cancelled by calling preventDefault on the\n * triggering `keydown` or `click` event. --bubbles\n *\n * @example\n * // perform an action if a tab is clicked\n * tabs.addEventListener('change', (event: Event) => {\n *   if (event.target.selected === 2)\n *      takeAction();\n *   }\n * });\n *\n * // prevent a click from triggering tab selection under some condition\n * tabs.addEventListener('click', (event: Event) => {\n *   if (notReady)\n *      event.preventDefault();\n *   }\n * });\n *\n */\nexport class Tabs extends LitElement {\n  static {\n    polyfillARIAMixin(Tabs);\n  }\n\n  /**\n   * The tabs of this tab bar.\n   */\n  @queryAssignedElements({flatten: true, selector: '[md-tab]'})\n  readonly tabs!: Tab[];\n\n  /**\n   * The currently selected tab, `null` only when there are no tab children.\n   *\n   * @export\n   */\n  get activeTab() {\n    return this.tabs.find((tab) => tab.active) ?? null;\n  }\n  set activeTab(tab: Tab | null) {\n    // Ignore setting activeTab to null. As long as there are children, one tab\n    // must be selected.\n    if (tab) {\n      this.activateTab(tab);\n    }\n  }\n\n  /**\n   * The index of the currently selected tab.\n   *\n   * @export\n   */\n  get activeTabIndex() {\n    return this.tabs.findIndex((tab) => tab.active);\n  }\n  set activeTabIndex(index: number) {\n    const activateTabAtIndex = () => {\n      const tab = this.tabs[index];\n      // Ignore out-of-bound indices.\n      if (tab) {\n        this.activateTab(tab);\n      }\n    };\n\n    if (!this.slotElement) {\n      // This is needed to support setting the activeTabIndex via a lit property\n      // binding.\n      //\n      // ```ts\n      // html`\n      //   <md-tabs .activeTabIndex=${1}>\n      //     <md-tab>First</md-tab>\n      //     <md-tab>Second</md-tab>\n      //   </md-tabs>\n      // `;\n      // ```\n      //\n      // It's needed since lit's rendering lifecycle is asynchronous, and the\n      // `<slot>` element hasn't rendered, so `tabs` is empty.\n      this.updateComplete.then(activateTabAtIndex);\n      return;\n    }\n\n    activateTabAtIndex();\n  }\n\n  /**\n   * Whether or not to automatically select a tab when it is focused.\n   */\n  @property({type: Boolean, attribute: 'auto-activate'}) autoActivate = false;\n\n  @query('slot') private readonly slotElement!: HTMLSlotElement | null;\n\n  private get focusedTab() {\n    return this.tabs.find((tab) => tab.matches(':focus-within'));\n  }\n\n  private readonly internals = polyfillElementInternalsAria(\n    this,\n    // Cast needed for closure\n    (this as HTMLElement).attachInternals(),\n  );\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.internals.role = 'tablist';\n      this.addEventListener('keydown', this.handleKeydown.bind(this));\n      this.addEventListener('keyup', this.handleKeyup.bind(this));\n      this.addEventListener('focusout', this.handleFocusout.bind(this));\n    }\n  }\n\n  /**\n   * Scrolls the toolbar, if overflowing, to the active tab, or the provided\n   * tab.\n   *\n   * @param tabToScrollTo The tab that should be scrolled to. Defaults to the\n   *     active tab.\n   * @return A Promise that resolves after the tab has been scrolled to.\n   */\n  async scrollToTab(tabToScrollTo?: Tab | null) {\n    await this.updateComplete;\n    const {tabs} = this;\n    tabToScrollTo ??= this.activeTab;\n    if (!tabToScrollTo || !tabs.includes(tabToScrollTo)) {\n      return;\n    }\n\n    // wait for tabs to render.\n    for (const tab of this.tabs) {\n      await tab.updateComplete;\n    }\n\n    const offset = tabToScrollTo.offsetLeft;\n    const extent = tabToScrollTo.offsetWidth;\n    const scroll = this.scrollLeft;\n    const hostExtent = this.offsetWidth;\n    const scrollMargin = 48;\n    const min = offset - scrollMargin;\n    const max = offset + extent - hostExtent + scrollMargin;\n    const to = Math.min(min, Math.max(max, scroll));\n    // TODO(b/299934312): improve focus smoothness\n    const behavior: ScrollBehavior = !this.focusedTab ? 'smooth' : 'instant';\n    this.scrollTo({behavior, top: 0, left: to});\n  }\n\n  protected override render() {\n    return html`\n      <div class=\"tabs\">\n        <slot\n          @slotchange=${this.handleSlotChange}\n          @click=${this.handleTabClick}></slot>\n      </div>\n      <md-divider part=\"divider\"></md-divider>\n    `;\n  }\n\n  private async handleTabClick(event: Event) {\n    const tab = event.target;\n    // Allow event to bubble\n    await 0;\n    if (event.defaultPrevented || !isTab(tab) || tab.active) {\n      return;\n    }\n\n    this.activateTab(tab);\n  }\n\n  private activateTab(activeTab: Tab) {\n    const {tabs} = this;\n    const previousTab = this.activeTab;\n    if (!tabs.includes(activeTab) || previousTab === activeTab) {\n      // Ignore setting activeTab to a tab element that is not a child.\n      return;\n    }\n\n    for (const tab of tabs) {\n      tab.active = tab === activeTab;\n    }\n\n    if (previousTab) {\n      // Don't dispatch a change event if activating a tab when no previous tabs\n      // were selected, such as when md-tabs auto-selects the first tab.\n      const defaultPrevented = !this.dispatchEvent(\n        new Event('change', {bubbles: true, cancelable: true}),\n      );\n      if (defaultPrevented) {\n        for (const tab of tabs) {\n          tab.active = tab === previousTab;\n        }\n        return;\n      }\n\n      activeTab[ANIMATE_INDICATOR](previousTab);\n    }\n\n    this.updateFocusableTab(activeTab);\n    this.scrollToTab(activeTab);\n  }\n\n  private updateFocusableTab(focusableTab: Tab) {\n    for (const tab of this.tabs) {\n      tab.tabIndex = tab === focusableTab ? 0 : -1;\n    }\n  }\n\n  // focus item on keydown and optionally select it\n  private async handleKeydown(event: KeyboardEvent) {\n    // Allow event to bubble.\n    await 0;\n    const isLeft = event.key === 'ArrowLeft';\n    const isRight = event.key === 'ArrowRight';\n    const isHome = event.key === 'Home';\n    const isEnd = event.key === 'End';\n    // Ignore non-navigation keys\n    if (event.defaultPrevented || (!isLeft && !isRight && !isHome && !isEnd)) {\n      return;\n    }\n\n    const {tabs} = this;\n    // Don't try to select another tab if there aren't any.\n    if (tabs.length < 2) {\n      return;\n    }\n\n    // Prevent default interactions, such as scrolling.\n    event.preventDefault();\n\n    let indexToFocus: number;\n    if (isHome || isEnd) {\n      indexToFocus = isHome ? 0 : tabs.length - 1;\n    } else {\n      // Check if moving forwards or backwards\n      const isRtl = getComputedStyle(this).direction === 'rtl';\n      const forwards = isRtl ? isLeft : isRight;\n      const {focusedTab} = this;\n      if (!focusedTab) {\n        // If there is not already a tab focused, select the first or last tab\n        // based on the direction we're traveling.\n        indexToFocus = forwards ? 0 : tabs.length - 1;\n      } else {\n        const focusedIndex = this.tabs.indexOf(focusedTab);\n        indexToFocus = forwards ? focusedIndex + 1 : focusedIndex - 1;\n        if (indexToFocus >= tabs.length) {\n          // Return to start if moving past the last item.\n          indexToFocus = 0;\n        } else if (indexToFocus < 0) {\n          // Go to end if moving before the first item.\n          indexToFocus = tabs.length - 1;\n        }\n      }\n    }\n\n    const tabToFocus = tabs[indexToFocus];\n    tabToFocus.focus();\n    if (this.autoActivate) {\n      this.activateTab(tabToFocus);\n    } else {\n      this.updateFocusableTab(tabToFocus);\n    }\n  }\n\n  // scroll to item on keyup.\n  private handleKeyup() {\n    this.scrollToTab(this.focusedTab ?? this.activeTab);\n  }\n\n  private handleFocusout() {\n    // restore focus to selected item when blurring the tab bar.\n    if (this.matches(':focus-within')) {\n      return;\n    }\n\n    const {activeTab} = this;\n    if (activeTab) {\n      this.updateFocusableTab(activeTab);\n    }\n  }\n\n  private handleSlotChange() {\n    const firstTab = this.tabs[0];\n    if (!this.activeTab && firstTab) {\n      // If the active tab was removed, auto-select the first one. There should\n      // always be a selected tab while the bar has children.\n      this.activateTab(firstTab);\n    }\n\n    // When children shift, ensure the active tab is visible. For example, if\n    // many children are added before the active tab, it'd be pushed off screen.\n    // This ensures it stays visible.\n    this.scrollToTab(this.activeTab);\n  }\n}\n\nfunction isTab(element: unknown): element is Tab {\n  return element instanceof HTMLElement && element.hasAttribute('md-tab');\n}\n"]}

package/textfield/filled-text-field.js

@@ -7,7 +7,6 @@ import { __decorate } from "tslib";
 import '../field/filled-field.js';
 import { customElement } from 'lit/decorators.js';
 import { literal } from 'lit/static-html.js';
-import { styles as filledForcedColorsStyles } from './internal/filled-forced-colors-styles.css.js';
 import { styles as filledStyles } from './internal/filled-styles.css.js';
 import { FilledTextField } from './internal/filled-text-field.js';
 import { styles as sharedStyles } from './internal/shared-styles.css.js';
@@ -22,7 +21,7 @@ export let MdFilledTextField = class MdFilledTextField extends FilledTextField {
         this.fieldTag = literal `md-filled-field`;
     }
 };
-MdFilledTextField.styles = [sharedStyles, filledStyles, filledForcedColorsStyles];
+MdFilledTextField.styles = [sharedStyles, filledStyles];
 MdFilledTextField = __decorate([
     customElement('md-filled-text-field')
 ], MdFilledTextField);

package/textfield/filled-text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-text-field.js","sourceRoot":"","sources":["filled-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,+CAA+C,CAAC;AACjG,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,eAAe,EAAC,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAUvE;;;;GAIG;AAEI,WAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,eAAe;IAA/C;;QAIuB,aAAQ,GAAG,OAAO,CAAA,iBAAiB,CAAC;IAClE,CAAC;;AAJiB,wBAAM,GAClB,CAAC,YAAY,EAAE,YAAY,EAAE,wBAAwB,CAAC,AADpC,CACqC;AAFhD,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAK7B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/filled-field.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as filledForcedColorsStyles} from './internal/filled-forced-colors-styles.css.js';\nimport {styles as filledStyles} from './internal/filled-styles.css.js';\nimport {FilledTextField} from './internal/filled-text-field.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\nexport {TextFieldType} from './internal/text-field.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-text-field': MdFilledTextField;\n  }\n}\n\n/**\n * TODO(b/228525797): Add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-text-field')\nexport class MdFilledTextField extends FilledTextField {\n  static override styles =\n      [sharedStyles, filledStyles, filledForcedColorsStyles];\n\n  protected override readonly fieldTag = literal`md-filled-field`;\n}\n"]}
+{"version":3,"file":"filled-text-field.js","sourceRoot":"","sources":["filled-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,eAAe,EAAC,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAUvE;;;;GAIG;AAEI,WAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,eAAe;IAA/C;;QAGuB,aAAQ,GAAG,OAAO,CAAA,iBAAiB,CAAC;IAClE,CAAC;;AAHiB,wBAAM,GAAG,CAAC,YAAY,EAAE,YAAY,CAAC,AAA/B,CAAgC;AAD3C,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAI7B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/filled-field.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as filledStyles} from './internal/filled-styles.css.js';\nimport {FilledTextField} from './internal/filled-text-field.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\nexport {TextFieldType} from './internal/text-field.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-text-field': MdFilledTextField;\n  }\n}\n\n/**\n * TODO(b/228525797): Add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-text-field')\nexport class MdFilledTextField extends FilledTextField {\n  static override styles = [sharedStyles, filledStyles];\n\n  protected override readonly fieldTag = literal`md-filled-field`;\n}\n"]}