From dc3e64e636f9a3d77e3e32b72dcccf81997c7a8e Mon Sep 17 00:00:00 2001
From: Cheng-Hsuan Tsai <ok7sai@gmail.com>
Date: Thu, 24 Apr 2025 09:18:43 -0700
Subject: [PATCH] feat(cdk-experimental/tabs): add cdk-active class and update
 example styles

---
 .ng-dev/commit-message.mts                        |  1 +
 src/cdk-experimental/tabs/tabs.ts                 |  1 +
 src/cdk-experimental/ui-patterns/tabs/tabs.ts     |  3 +++
 .../tabs/cdk-tabs/cdk-tabs-example.css            | 15 ++++++++++++---
 .../tabs/cdk-tabs/cdk-tabs-example.html           |  2 +-
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts
index da05c828512e..56b1531b30e9 100644
--- a/.ng-dev/commit-message.mts
+++ b/.ng-dev/commit-message.mts
@@ -16,6 +16,7 @@ export const commitMessage: CommitMessageConfig = {
     'cdk-experimental/scrolling',
     'cdk-experimental/selection',
     'cdk-experimental/table-scroll-container',
+    'cdk-experimental/tabs',
     'cdk-experimental/ui-patterns',
     'cdk/a11y',
     'cdk/accordion',
diff --git a/src/cdk-experimental/tabs/tabs.ts b/src/cdk-experimental/tabs/tabs.ts
index f33f7e4fc156..bf17a9882732 100644
--- a/src/cdk-experimental/tabs/tabs.ts
+++ b/src/cdk-experimental/tabs/tabs.ts
@@ -137,6 +137,7 @@ export class CdkTabList {
   host: {
     'role': 'tab',
     'class': 'cdk-tab',
+    '[class.cdk-active]': 'pattern.active()',
     '[attr.id]': 'pattern.id()',
     '[attr.tabindex]': 'pattern.tabindex()',
     '[attr.aria-selected]': 'pattern.selected()',
diff --git a/src/cdk-experimental/ui-patterns/tabs/tabs.ts b/src/cdk-experimental/ui-patterns/tabs/tabs.ts
index f1063464eeab..2f9ea074fcde 100644
--- a/src/cdk-experimental/ui-patterns/tabs/tabs.ts
+++ b/src/cdk-experimental/ui-patterns/tabs/tabs.ts
@@ -37,6 +37,9 @@ export class TabPattern {
   /** A local unique identifier for the tab. */
   value: SignalLike<string>;
 
+  /** Whether the tab is active. */
+  active = computed(() => this.tablist()?.focusManager.activeItem() === this);
+
   /** Whether the tab is selected. */
   selected = computed(() => this.tablist().selection.inputs.value().includes(this.value()));
 
diff --git a/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.css b/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.css
index a715cf0a1a66..bdd38c5e1c5d 100644
--- a/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.css
+++ b/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.css
@@ -25,7 +25,6 @@
   list-style: none;
   flex-direction: row;
   justify-content: center;
-  overflow: scroll;
 }
 
 .example-tablist[aria-orientation='vertical'] {
@@ -43,6 +42,11 @@
   display: block;
 }
 
+.example-tablist[aria-disabled='true'] {
+  background-color: var(--mat-sys-surface-dim);
+  pointer-events: none;
+}
+
 .example-tab {
   gap: 16px;
   padding: 16px;
@@ -52,8 +56,8 @@
   border-radius: var(--mat-sys-corner-extra-small);
 }
 
-.example-tab:hover,
-.example-tab[tabindex='0'] {
+.example-tablist:focus-within .example-tab:hover,
+.example-tablist:focus-within .example-tab.cdk-active {
   outline: 1px solid var(--mat-sys-outline);
   background: var(--mat-sys-surface-container);
 }
@@ -67,6 +71,11 @@
   background-color: var(--mat-sys-secondary-container);
 }
 
+.example-tab[aria-disabled='true'] {
+  background-color: var(--mat-sys-surface-dim);
+  pointer-events: none;
+}
+
 .example-tabpanel {
   margin: 8px;
 }
diff --git a/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.html b/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.html
index 1ca2d2ace14f..2c598324fb3e 100644
--- a/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.html
+++ b/src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.html
@@ -41,7 +41,7 @@
     [selectionMode]="selectionMode"
   >
     <li cdkTab value="tab-1" class="example-tab">tab 1</li>
-    <li cdkTab value="tab-2" class="example-tab">tab 2</li>
+    <li cdkTab value="tab-2" class="example-tab" disabled="true">tab 2</li>
     <li cdkTab value="tab-3" class="example-tab">tab 3</li>
   </ul>