TabSelector

TabSelector renders an HGroup of buttons. Each tab item has title and value; the selection event reports its array index.

private tabs: ITabItem[] = [
  { title: 'Home', value: 'home' },
  { title: 'Movies', value: 'movies' },
];

TabSelector({
  tabs: this.tabs,
  selectedItemIndex: this.selectedTabIndex,
  buttonStyleKey: 'controls.Button.ProgramTabButton',
})
  .onTabSelected((event) => {
    this.selectedTabIndex = event.tabIndex;
    this.selectSection(this.tabs[event.tabIndex].value);
  });

The event field is tabIndex, not index, and the event does not copy the tab item. Read tabs[event.tabIndex] when its value is needed.

selectedItemIndex drives the selected resting style. Empty-title tabs are hidden. TabSelector only owns the visible button row; the owning screen or TabController performs the content switch.