feat(tab): lit-to-wiz rules for tab component.

PiperOrigin-RevId: 440997924

components/tabs/tab/lib/constants.ts

@@ -11,7 +11,6 @@ const cssClasses = {
 const strings = {
   ARIA_SELECTED: 'aria-selected',
   CONTENT_SELECTOR: '.md3-tab__content',
-  INTERACTED_EVENT: 'MD3Tab:interacted',
   RIPPLE_SELECTOR: '.md3-tab__ripple',
   TABINDEX: 'tabIndex',
   TAB_INDICATOR_SELECTOR: '.md3-tab-indicator',

components/tabs/tab/lib/primary-tab.ts

@@ -9,9 +9,11 @@ import {ClassInfo} from 'lit/directives/class-map';
 
 import {Tab} from './tab';
 
+/** @soyCompatible */
 export class PrimaryTab extends Tab {
   @property({type: Boolean}) stacked = false;
 
+  /** @soyTemplate */
   protected override getRootClasses(): ClassInfo {
     return {
       ...super.getRootClasses(),

components/tabs/tab/lib/secondary-tab.ts

@@ -8,7 +8,9 @@ import {ClassInfo} from 'lit/directives/class-map';
 
 import {Tab} from './tab';
 
+/** @soyCompatible */
 export class SecondaryTab extends Tab {
+  /** @soyTemplate */
   protected override getRootClasses(): ClassInfo {
     return {
       ...super.getRootClasses(),

components/tabs/tab/lib/tab.ts

@@ -2,9 +2,11 @@
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
+ *
+ * @requirecss {tabs.tab.lib.shared_styles}
  */
 
-import '../../tab_indicator/tab-indicator';
+
 import '../../../focus/focus-ring';
 import '../../../icon/icon';
 
@@ -25,6 +27,7 @@ import {TabInteractionEvent, TabInteractionEventDetail} from './types';
 // used for generating unique id for each tab
 let tabIdCounter = 0;
 
+/** @soyCompatible */
 export class Tab extends BaseElement {
   static override shadowRootOptions:
       ShadowRootInit = {mode: 'open', delegatesFocus: true};
@@ -91,7 +94,8 @@ export class Tab extends BaseElement {
     this.id = this.id || `md3-tab-${++tabIdCounter}`;
   }
 
-  protected override render() {
+  /** @soyTemplate */
+  protected override render(): TemplateResult {
     let iconTemplate: string|TemplateResult = '';
     if (this.hasImageIcon || this.icon) {
       iconTemplate = this.renderIcon(this.icon);
@@ -141,19 +145,21 @@ export class Tab extends BaseElement {
     };
   }
 
+  /** @soyTemplate */
   protected renderIndicator(indicatorIcon: string, isFadingIndicator: boolean):
       TemplateResult {
     return html``;
   }
 
+  /** @soyTemplate */
   protected renderIcon(icon: string): TemplateResult {
     return html`<md-icon class="md3-tab__icon"><slot name="icon">${
         icon}</slot></md-icon>`;
   }
 
   // TODO(dfreedm): Make this use selected as a param after Polymer/internal#739
-  /** @soyCompatible */
-  protected renderRipple() {
+  /** @soyTemplate */
+  protected renderRipple(): TemplateResult {
     return html`<md-ripple></md-ripple>`;
   }
 
@@ -179,13 +185,12 @@ export class Tab extends BaseElement {
       },
       notifyInteracted: () => {
         const event: TabInteractionEvent =
-            new CustomEvent<TabInteractionEventDetail>(
-                MDCTabFoundation.strings.INTERACTED_EVENT, {
-                  detail: {tabId: this.id},
-                  bubbles: true,
-                  composed: true,
-                  cancelable: true,
-                });
+            new CustomEvent<TabInteractionEventDetail>('tab-interaction', {
+              detail: {tabId: this.id},
+              bubbles: true,
+              composed: true,
+              cancelable: true,
+            });
         this.dispatchEvent(event);
       },
       getOffsetLeft: () => this.offsetLeft,

components/tabs/tab/primary-tab.ts

@@ -21,10 +21,16 @@ declare global {
   }
 }
 
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
 @customElement('md-primary-tab')
 export class MdPrimaryTab extends PrimaryTab {
   static override styles = [sharedStyles, primaryStyles];
 
+  /** @soyTemplate */
   protected override renderIndicator(
       indicatorIcon: string, isFadingIndicator: boolean): TemplateResult {
     return html`<md-tab-indicator

components/tabs/tab/secondary-tab.ts

@@ -21,10 +21,16 @@ declare global {
   }
 }
 
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
 @customElement('md-secondary-tab')
 export class MdSecondaryTab extends SecondaryTab {
   static override styles = [sharedStyles, secondaryStyles];
 
+  /** @soyTemplate */
   protected override renderIndicator(
       indicatorIcon: string, isFadingIndicator: boolean): TemplateResult {
     return html`<md-tab-indicator

components/tabs/tab_bar/lib/tab-bar.ts

@@ -62,8 +62,8 @@ export abstract class TabBar extends BaseElement {
     return html`
       <div class="${classMap(this.getRootClasses())}"
            role="tablist"
-           @MD3Tab:interacted="${this._handleTabInteraction}"
-           @keydown="${this._handleKeydown}">
+           @keydown="${this._handleKeydown}"
+           @tab-interaction="${this._handleTabInteraction}">
         ${this.renderTabScroller()}
       </div>
       `;