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
type WblSidebarSubtabItem = {
id: string;
text: string;
notification?: boolean;
active?: boolean;
};
type WblSidebarBranch = 'first' | 'following';
Icon-name inputs use WblIconName from the shared icon contract;
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';insrc/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.