tweak

Author: adolgachev

goldens/aria/private/index.api.md

@@ -683,8 +683,8 @@ export type SignalLike<T> = () => T;
 
 // @public
 export interface TabInputs extends Omit<ListNavigationItem, 'index'>, Omit<ExpansionItem, 'expandable' | 'expanded'> {
-    tablist: SignalLike<TabListPattern>;
-    tabpanel: SignalLike<TabPanelPattern | undefined>;
+    tabList: SignalLike<TabListPattern>;
+    tabPanel: SignalLike<TabPanelPattern | undefined>;
 }
 
 // @public
@@ -721,6 +721,7 @@ export class TabListPattern {
 // @public
 export interface TabPanelInputs extends LabelControlOptionalInputs {
     id: SignalLike<string>;
+    readonly tab: SignalLike<TabPattern | undefined>;
 }
 
 // @public
@@ -732,7 +733,6 @@ export class TabPanelPattern {
     readonly inputs: TabPanelInputs;
     readonly labelledBy: SignalLike<string | undefined>;
     readonly labelManager: LabelControl;
-    readonly tab: WritableSignalLike<TabPattern | undefined>;
     readonly tabIndex: SignalLike<-1 | 0>;
 }
 
@@ -747,7 +747,6 @@ export class TabPattern {
     // (undocumented)
     readonly expanded: WritableSignalLike<boolean>;
     readonly id: SignalLike<string>;
-    readonly index: SignalLike<number>;
     // (undocumented)
     readonly inputs: TabInputs;
     open(): boolean;

goldens/aria/tabs/index.api.md

@@ -8,6 +8,7 @@ import { AfterViewInit } from '@angular/core';
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import * as _angular_core from '@angular/core';
 import { OnDestroy } from '@angular/core';
+import { WritableSignal } from '@angular/core';
 
 // @public
 export class Tab implements AfterViewInit {
@@ -45,7 +46,6 @@ export class TabList implements AfterViewInit {
     ngAfterViewInit(): void;
     readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     readonly _pattern: TabListPattern;
-    readonly selectedTab: _angular_core.WritableSignal<TabPattern | undefined>;
     readonly selectedTabIndex: _angular_core.ModelSignal<number>;
     readonly selectionMode: _angular_core.InputSignal<"follow" | "explicit">;
     readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -64,6 +64,8 @@ export class TabPanel {
     readonly element: HTMLElement;
     readonly id: _angular_core.InputSignal<string>;
     readonly _pattern: TabPanelPattern;
+    // (undocumented)
+    readonly _tabPattern: WritableSignal<TabPattern | undefined>;
     readonly visible: _angular_core.Signal<boolean>;
     // (undocumented)
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabPanel, "[ngTabPanel]", ["ngTabPanel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;

src/aria/private/tabs/tabs.spec.ts

@@ -103,12 +103,15 @@ describe('Tabs Pattern', () => {
     tabPanelInputs = [
       {
         id: signal('tabpanel-1-id'),
+        tab: signal(undefined),
       },
       {
         id: signal('tabpanel-2-id'),
+        tab: signal(undefined),
       },
       {
         id: signal('tabpanel-3-id'),
+        tab: signal(undefined),
       },
     ];
     tabPanelPatterns = [
@@ -121,9 +124,9 @@ describe('Tabs Pattern', () => {
     tabInputs[0].tabPanel.set(tabPanelPatterns[0]);
     tabInputs[1].tabPanel.set(tabPanelPatterns[1]);
     tabInputs[2].tabPanel.set(tabPanelPatterns[2]);
-    tabPanelPatterns[0].tab.set(tabPatterns[0]);
-    tabPanelPatterns[1].tab.set(tabPatterns[1]);
-    tabPanelPatterns[2].tab.set(tabPatterns[2]);
+    tabPanelInputs[0].tab.set(tabPatterns[0]);
+    tabPanelInputs[1].tab.set(tabPatterns[1]);
+    tabPanelInputs[2].tab.set(tabPatterns[2]);
     tabListInputs.items.set(tabPatterns);
     tabListInputs.activeItem.set(tabPatterns[0]);
   });

src/aria/private/tabs/tabs.ts

@@ -13,7 +13,6 @@ import {
   WritableSignalLike,
   computed,
   linkedSignal,
-  signal,
 } from '../behaviors/signal-like/signal-like';
 import {LabelControl, LabelControlOptionalInputs} from '../behaviors/label/label';
 import {ListFocus} from '../behaviors/list-focus/list-focus';
@@ -84,6 +83,9 @@ export class TabPattern {
 export interface TabPanelInputs extends LabelControlOptionalInputs {
   /** A global unique identifier for the tabpanel. */
   id: SignalLike<string>;
+
+  /** The tab that controls this tabpanel. */
+  readonly tab: SignalLike<TabPattern | undefined>;
 }
 
 /** A tabpanel associated with a tab. */
@@ -94,11 +96,8 @@ export class TabPanelPattern {
   /** Controls label for this tabpanel. */
   readonly labelManager: LabelControl;
 
-  /** The tab that controls this tabpanel. */
-  readonly tab: WritableSignalLike<TabPattern | undefined> = signal(undefined);
-
   /** Whether the tabpanel is hidden. */
-  readonly hidden = computed(() => this.tab()?.expanded() === false);
+  readonly hidden = computed(() => this.inputs.tab()?.expanded() === false);
 
   /** The tab index of this tabpanel. */
   readonly tabIndex = computed(() => (this.hidden() ? -1 : 0));
@@ -115,7 +114,7 @@ export class TabPanelPattern {
 
     this.labelManager = new LabelControl({
       ...inputs,
-      defaultLabelledBy: computed(() => (this.tab() ? [this.tab()!.id()] : [])),
+      defaultLabelledBy: computed(() => (this.inputs.tab() ? [this.inputs.tab()!.id()] : [])),
     });
   }
 }

src/aria/tabs/tab-panel.ts

@@ -7,8 +7,17 @@
  */
 
 import {_IdGenerator} from '@angular/cdk/a11y';
-import {Directive, ElementRef, afterRenderEffect, computed, inject, input} from '@angular/core';
-import {DeferredContentAware, TabPanelPattern} from '../private';
+import {
+  Directive,
+  ElementRef,
+  WritableSignal,
+  afterRenderEffect,
+  computed,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import {DeferredContentAware, TabPanelPattern, TabPattern} from '../private';
 
 /**
  * A TabPanel container for the resources of layered content associated with a tab.
@@ -62,9 +71,12 @@ export class TabPanel {
   /** Whether the tab panel is visible. */
   readonly visible = computed(() => !this._pattern.hidden());
 
+  readonly _tabPattern: WritableSignal<TabPattern | undefined> = signal(undefined);
+
   /** The TabPanel UIPattern. */
   readonly _pattern: TabPanelPattern = new TabPanelPattern({
     ...this,
+    tab: this._tabPattern,
   });
 
   constructor() {

src/aria/tabs/tab.ts

@@ -83,7 +83,7 @@ export class Tab implements AfterViewInit {
   });
 
   ngAfterViewInit() {
-    this.panel()._pattern.tab.set(this._pattern);
+    this.panel()._tabPattern.set(this._pattern);
   }
 
   /** Opens this tab panel. */