# Sidebar Tab

Level: molecule.

## Purpose and use

Render one sidebar section with optional nested destinations in expanded or
collapsed navigation. It controls presentation and emits selection, not routes.

## Anatomy, behavior, and accessibility

- Sidebar Main Tab contains icon/title, notification and optional disclosure;
  Sidebar Subtabs form a named group beneath it. With no children, main activation
  marks a local selected surface without emitting subtabSelect.
- Expanded activation requests openedChange; the parent controls opened. Any
  nonempty subtabs list is expandable, including one child. Subtab activation emits
  the item; active flags supplied in subtabs define the selected destination.
- In collapsed mode nested items use a right-placed radio Dropdown with no
  backdrop. Its openness is independent of expanded opened. Outside document
  clicks close it, selection emits the subtab and closes, and tooltips are suppressed
  while the compact dropdown is open.
- Child notification state contributes to the main notification. Use short section
  labels and distinct destination text; compact navigation relies on those names.

## Open Questions

There is no route/href or disabled-subtab API. Collapsed-menu arrow navigation and
explicit Escape/focus restoration inherit Dropdown's current limitations.

## Local component contract

This is the shared owned contract for `component.sidebar-tab`,
`component.sidebar-main-tab`, and `component.sidebar-subtab`. The API below
is verified against the current local implementation, focused test and story.
The Source commit `0112cba0779a2d2a4b6c7a17243201694344d70a` remains
migration provenance, not the runtime owner.

### Classes and selectors

- `WblSidebarTabComponent` — `wbl-sidebar-tab` (src/app/design-system/patterns/sidebar-tab/sidebar-tab.component.ts).
- `WblSidebarMainTabComponent` — `wbl-sidebar-main-tab` (src/app/design-system/patterns/sidebar-tab/sidebar-main-tab.component.ts).
- `WblSidebarSubtabComponent` — `wbl-sidebar-subtab` (src/app/design-system/patterns/sidebar-tab/sidebar-subtab.component.ts).

### Inputs

- `WblSidebarTabComponent.opened = input(false)`
- `WblSidebarTabComponent.collapsed = input(false)`
- `WblSidebarTabComponent.notification = input(false)`
- `WblSidebarTabComponent.text = input('Label')`
- `WblSidebarTabComponent.iconName = input<WblIconName>('flight')`
- `WblSidebarTabComponent.subtabs = input<WblSidebarSubtabItem[]>(DEFAULT_SUBTABS)`
- `WblSidebarMainTabComponent.opened = input(false)`
- `WblSidebarMainTabComponent.active = input(false)`
- `WblSidebarMainTabComponent.selectedSurface = input(false)`
- `WblSidebarMainTabComponent.expandable = input(true)`
- `WblSidebarMainTabComponent.collapsed = input(false)`
- `WblSidebarMainTabComponent.tooltipDisabled = input(false)`
- `WblSidebarMainTabComponent.notification = input(false)`
- `WblSidebarMainTabComponent.text = input('Label')`
- `WblSidebarMainTabComponent.iconName = input<WblIconName>('flight')`
- `WblSidebarSubtabComponent.text = input('Label')`
- `WblSidebarSubtabComponent.notification = input(false)`
- `WblSidebarSubtabComponent.branch = input<WblSidebarBranch>('first')`
- `WblSidebarSubtabComponent.active = input(false)`

### Public types and allowed values

```ts
type WblSidebarSubtabItem = {
  id: string;
  text: string;
  notification?: boolean;
  active?: boolean;
};
type WblSidebarBranch = 'first' | 'following';
```

Icon-name inputs use `WblIconName` from the [shared icon contract](../atoms/icon.md);
choose a key present in the owned icon pack, not an arbitrary external icon name.

### Models

- None.

### Outputs

- `WblSidebarTabComponent.openedChange = output<boolean>()`
- `WblSidebarTabComponent.subtabSelect = output<WblSidebarSubtabItem>()`

### Slots and projection markers

- The exact template has no Angular content-projection slot.

### Local evidence

Each of the three public components has its own inventory entry. They share
this contract, the focused Sidebar Tab test suite (main-button behavior,
subtab rendering, selection and branch states), and the story containing the
standalone main/subtab examples. Shared coverage does not imply separate Figma
assembly ownership.

- Code: `src/app/design-system/patterns/sidebar-tab/sidebar-tab.component.ts`.
- Focused test: `src/app/design-system/patterns/sidebar-tab/sidebar-tab.component.spec.ts`.
- Public export: `export * from './patterns/sidebar-tab/sidebar-tab.component';`; `export * from './patterns/sidebar-tab/sidebar-main-tab.component';`; `export * from './patterns/sidebar-tab/sidebar-subtab.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/sidebar-tab.stories.ts` (`Design System/Patterns/wbl-sidebar-tab`).

## Figma status

This runtime contract does not infer a Figma owner. Assembly evidence, when
verified, is maintained separately through the inventory-linked sidecar.

## Provenance

The archived source-document copy is historical evidence only. The active
resolver is local code/test/export and the exact Storybook story above.