[Task] Tab Bar + Tab Pane Components

[conorluddy]

Context

Part of #8 (Web Components Migration).

Category navigation — 7 tabs plus a "Saved" tab. Each tab has a badge showing count of active flags in its categories. Tab panes show/hide based on active selection.

Scope

Create:

• src/components/tb-tab-bar.js — <tb-tab-bar> horizontal tab buttons with badges
• src/components/tb-tab-pane.js — <tb-tab-pane> visibility wrapper for tab content

Read (reference only):

• index.html lines 2060-2108 (renderTabBar())
• index.html lines 2232-2249 (tab pane active toggling)
• index.html CSS for .tab-bar, .tab-btn, .tab-badge, .tab-pane

Current State

renderTabBar() creates buttons from TAB_GROUPS array once, then updates active state + badge counts on each render. Badges show count of flags with active overrides per category. "Saved" tab is disabled when no custom presets exist. Tab panes are divs toggled via .active class.

Target State

• <tb-tab-bar>: Shadow DOM. Accepts tabs (TAB_GROUPS array), activeTab (string), badgeCounts (object: tabId → count), savedCount (number), hidden (boolean, for when search is active). Renders tab buttons with badges. Dispatches tb:tab-change with { detail: { tabId } } on click. "Saved" tab disabled when savedCount === 0.

• <tb-tab-pane>: Light DOM. Accepts tabId (string), active (boolean). Shows/hides content. Children (flag groups) are rendered by parent.

Implementation Hints

• Tab bar should horizontally scroll on overflow (current CSS handles this)
• Badge counts are computed by <tb-app> from resolved flags — tab bar is pure display
• <tb-tab-pane> is deliberately Light DOM — it's just a visibility wrapper, and its children (flag groups) need to be in the document flow
• Active tab styling: button gets .active class or use CustomStateSet :state(active)
• When hidden property is true (search active), the whole bar hides

Dependencies

• [Task] Data Modules + Design Token Extraction #10 — Data modules (TAB_GROUPS) + style sheets

Definition of Done

• <tb-tab-bar> renders buttons from tabs property
• Active tab visually highlighted
• Badge shows non-zero counts, hidden when zero
• "Saved" tab disabled when savedCount === 0
• Click dispatches tb:tab-change with { tabId }
• hidden property hides the bar (for search mode)
• <tb-tab-pane> shows/hides based on active property
• Custom elements registered

Verification

1. Render <tb-tab-bar> with TAB_GROUPS data
2. Click a tab — verify tb:tab-change event with correct tabId
3. Set badgeCounts = { 'cost-effort': 3 } — verify badge shows "3"
4. Set savedCount = 0 — verify "Saved" tab is disabled
5. Set hidden = true — verify bar disappears