Migration Guide — Tabs

This release introduces a TEDI-Ready Tabs component (@tedi-design-system/angular). It replaces the community Tabs (@tedi-design-system/angular/community). The two share the same root selector (tedi-tabs) but have a completely different structure and selection model, so existing community usage must be migrated.

Community Tabs → TEDI-Ready Tabs

What changed: The community Tabs exposed tedi-tabs + [tedi-tab] + tedi-tab-content, with selection driven per-tab via a [selected] model and tabSelected output, optional router integration via RouterLinkActive, and an automatic mobile "More" dropdown. The TEDI-Ready Tabs is a full WAI-ARIA tab pattern: a required tedi-tabs-list wrapper holds button[tedi-tabs-trigger] items, selection is centralized on the root via value/defaultValue/valueChange, panels are tedi-tabs-content, and overflow is configurable via overflowMode ("dropdown" | "scroll").

Why: To deliver the official TEDI design-system Tabs with a single source of truth for the active tab, full keyboard support (Arrow/Home/End, roving tabindex), correct tablist/tab/tabpanel semantics, icon support, and explicit overflow handling.

Before (community):

import { TabsComponent, TabComponent, TabContentComponent }
  from '@tedi-design-system/angular/community';

<tedi-tabs>
  <button tedi-tab tabId="tab-1" [selected]="true">Health timeline</button>
  <button tedi-tab tabId="tab-2">Course of diseases</button>
  <button tedi-tab tabId="tab-3" disabled>Medication history</button>

  <tedi-tab-content tabId="tab-1">Timeline content</tedi-tab-content>
  <tedi-tab-content tabId="tab-2">Diseases content</tedi-tab-content>
  <tedi-tab-content tabId="tab-3">Medication content</tedi-tab-content>
</tedi-tabs>

After (TEDI-Ready):

import {
  TabsComponent, TabsListComponent, TabsTriggerComponent, TabsContentComponent
} from '@tedi-design-system/angular';

<tedi-tabs defaultValue="tab-1">
  <tedi-tabs-list aria-label="Health tabs">
    <button tedi-tabs-trigger id="tab-1">Health timeline</button>
    <button tedi-tabs-trigger id="tab-2">Course of diseases</button>
    <button tedi-tabs-trigger id="tab-3" [disabled]="true">Medication history</button>
  </tedi-tabs-list>

  <tedi-tabs-content id="tab-1">Timeline content</tedi-tabs-content>
  <tedi-tabs-content id="tab-2">Diseases content</tedi-tabs-content>
  <tedi-tabs-content id="tab-3">Medication content</tedi-tabs-content>
</tedi-tabs>

Controlled selection

Replace per-tab [selected]/(tabSelected) with a single binding on the root:

<!-- Before: each tab managed its own [selected] / (tabSelected) -->
<button tedi-tab tabId="tab-1" [(selected)]="..."> ... </button>

<!-- After: one binding on the root -->
<tedi-tabs [(value)]="activeTab"> ... </tedi-tabs>
<!-- or [value]="activeTab" (valueChange)="activeTab = $event" -->

Icons

The TEDI-Ready trigger has a first-class icon input (community had none; you projected your own):

<button tedi-tabs-trigger id="tab-1" icon="table_chart">Table</button>

Overflow

The community auto mobile "More" dropdown is replaced by an explicit overflowMode on the list:

<!-- collapses overflowing tabs into a "More" menu (default) -->
<tedi-tabs-list aria-label="…" overflowMode="dropdown">…</tedi-tabs-list>

<!-- horizontal scroll with fade edges -->
<tedi-tabs-list aria-label="…" overflowMode="scroll">…</tedi-tabs-list>

Router-driven tabs

The community [tedi-tab] integrated RouterLinkActive to derive the active tab from the URL. The TEDI-Ready Tabs does not build router activation into the trigger; instead, drive value from your routing state and use an id-less tedi-tabs-content as an always-rendered panel for a router outlet:

<tedi-tabs [value]="activeRouteId">
  <tedi-tabs-list aria-label="Sections">
    <button tedi-tabs-trigger id="overview" routerLink="overview">Overview</button>
    <button tedi-tabs-trigger id="details" routerLink="details">Details</button>
  </tedi-tabs-list>
  <tedi-tabs-content><router-outlet /></tedi-tabs-content>
</tedi-tabs>

Key changes

• Import path: @tedi-design-system/angular/community → @tedi-design-system/angular.
• New required wrapper: triggers must be nested inside tedi-tabs-list (community had no list wrapper). Add aria-label (or aria-labelledby) on the list for accessibility.
• Tab selector: [tedi-tab] (any element) → button[tedi-tabs-trigger] (must be a native <button>).
• Tab id input: tabId → id (on the trigger).
• Selection model: per-tab selected (model) + tabSelected (output) → centralized value / defaultValue (inputs) + valueChange (output) on tedi-tabs.
• Panel selector & input: tedi-tab-content with tabId → tedi-tabs-content with id. An id-less panel always renders (router-outlet use case).
• Panel rendering: the active panel is now lazily rendered (mounted only while active) instead of always present.
• Icons: new icon input on the trigger.
• Overflow: automatic mobile "More" dropdown → explicit overflowMode="dropdown" | "scroll" on the list.
• Router integration removed from the tab: RouterLinkActive host-directive behavior is no longer built in; drive value from routing instead.
• disabled: unchanged in name; now applied to the native <button> trigger.

Summary — old → new mapping

Note: because both versions use the root selector tedi-tabs, do not import the community and TEDI-Ready Tabs into the same component scope — switch the import path and migrate the markup together.

Summary by CodeRabbit

• New Features
  • Added the TEDI-Ready tabs experience (triggers, tab list, panels) with controlled/uncontrolled selection, keyboard navigation, ARIA wiring, and overflow handling (“More” dropdown and scroll mode).
  • Added clipContent to dropdown item label rendering to control ellipsis/overflow behavior.
• Bug Fixes
  • Tab panel content is shown only for the active tab.
  • Disabled dropdown items no longer take focus on mouse press.
• Documentation
  • Added TEDI-Ready Tabs component documentation and expanded Storybook coverage (including overflow scenarios).
• Deprecations
  • Marked legacy community tabs components as deprecated in favor of TEDI-Ready tabs.