feat(cdk-experimental/tabs): add cdk-active class and update example styles

Author: ok7sai

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()',

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()));
 

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;
 }

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>