From 23b291b2ddf2450875868679ef7a288e770920bc Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Fri, 8 Sep 2023 10:07:20 -0700
Subject: [PATCH] fix(tabs): rename tab `selected` to `active`

BREAKING CHANGE: rename `selected` to `active` for primary and secondary tabs.

PiperOrigin-RevId: 563782741
---
 tabs/internal/_tab.scss  | 20 ++++++++++----------
 tabs/internal/_tabs.scss |  2 +-
 tabs/internal/tab.ts     | 22 +++++++++++++++++-----
 tabs/internal/tabs.ts    |  9 +++++----
 4 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/tabs/internal/_tab.scss b/tabs/internal/_tab.scss
index c99f3c303..a6a2bfdbb 100644
--- a/tabs/internal/_tab.scss
+++ b/tabs/internal/_tab.scss
@@ -41,7 +41,7 @@
     );
   }
 
-  :host([selected]) md-focus-ring {
+  :host([active]) md-focus-ring {
     margin-bottom: calc(var(--_active-indicator-height) + 1px);
   }
 
@@ -139,10 +139,10 @@
   }
 
   // selected styling
-  :host([selected]) .indicator {
+  :host([active]) .indicator {
     opacity: 1;
   }
-  :host([selected]) .button {
+  :host([active]) .button {
     color: var(--_active-label-text-color);
     @include elevation.theme(
       (
@@ -160,32 +160,32 @@
     );
   }
 
-  :host([selected]) .button ::slotted([slot='icon']) {
+  :host([active]) .button ::slotted([slot='icon']) {
     color: var(--_active-icon-color);
   }
 
   // selected states
-  :host([selected]) .button:hover {
+  :host([active]) .button:hover {
     color: var(--_active-hover-label-text-color);
   }
 
-  :host([selected]) .button:hover ::slotted([slot='icon']) {
+  :host([active]) .button:hover ::slotted([slot='icon']) {
     color: var(--_active-hover-icon-color);
   }
 
-  :host([selected]) .button:focus {
+  :host([active]) .button:focus {
     color: var(--_active-focus-label-text-color);
   }
 
-  :host([selected]) .button:focus ::slotted([slot='icon']) {
+  :host([active]) .button:focus ::slotted([slot='icon']) {
     color: var(--_active-focus-icon-color);
   }
 
-  :host([selected]) .button:active {
+  :host([active]) .button:active {
     color: var(--_active-pressed-label-text-color);
   }
 
-  :host([selected]) .button:active ::slotted([slot='icon']) {
+  :host([active]) .button:active ::slotted([slot='icon']) {
     color: var(--_active-pressed-icon-color);
   }
 
diff --git a/tabs/internal/_tabs.scss b/tabs/internal/_tabs.scss
index 3e17992a0..c945cf27e 100644
--- a/tabs/internal/_tabs.scss
+++ b/tabs/internal/_tabs.scss
@@ -38,7 +38,7 @@
 
   // draw selected on top so its indicator can be transitioned from the
   // previously selected tab, on top of it
-  ::slotted([selected]) {
+  ::slotted([active]) {
     z-index: 1;
   }
 }
diff --git a/tabs/internal/tab.ts b/tabs/internal/tab.ts
index 932b1405b..9d94ff7ed 100644
--- a/tabs/internal/tab.ts
+++ b/tabs/internal/tab.ts
@@ -36,9 +36,21 @@ export class Tab extends LitElement {
   }
 
   /**
-   * Whether or not the tab is `selected`.
+   * Whether or not the tab is selected.
    **/
-  @property({type: Boolean, reflect: true}) selected = false;
+  @property({type: Boolean, reflect: true}) active = false;
+
+  /**
+   * TODO(b/293476210): remove after migrating
+   * @deprecated use `active`
+   */
+  @property({type: Boolean})
+  get selected() {
+    return this.active;
+  }
+  set selected(active: boolean) {
+    this.active = active;
+  }
 
   /**
    * In SSR, set this to true when an icon is present.
@@ -93,8 +105,8 @@ export class Tab extends LitElement {
   }
 
   protected override updated(changed: PropertyValues) {
-    if (changed.has('selected')) {
-      this.internals.ariaSelected = String(this.selected);
+    if (changed.has('active')) {
+      this.internals.ariaSelected = String(this.active);
       this.animateSelected();
     }
   }
@@ -130,7 +142,7 @@ export class Tab extends LitElement {
 
   private getKeyframes() {
     const reduceMotion = shouldReduceMotion();
-    if (!this.selected) {
+    if (!this.active) {
       return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;
     }
 
diff --git a/tabs/internal/tabs.ts b/tabs/internal/tabs.ts
index 92443a5da..8d097a7b5 100644
--- a/tabs/internal/tabs.ts
+++ b/tabs/internal/tabs.ts
@@ -210,13 +210,14 @@ export class Tabs extends LitElement {
     // sync state with items.
     if (itemsChanged) {
       this.items.forEach((item, i) => {
-        item.selected = this.selected === i;
+        item.active = this.selected === i;
       });
     }
     if (itemsChanged || changed.has('selected')) {
-      if (this.previousSelectedItem !== this.selectedItem) {
-        this.previousSelectedItem?.removeAttribute('selected');
-        this.selectedItem?.setAttribute('selected', '');
+      if (this.previousSelectedItem && this.selectedItem &&
+          this.previousSelectedItem !== this.selectedItem) {
+        this.previousSelectedItem.active = false;
+        this.selectedItem.active = true;
       }
       if (this.selectedItem !== this.focusedItem) {
         this.updateFocusableItem(this.selectedItem);