<!-- source-hash: 03e4c838723c464e0642fcd3805a327d -->
Storybook stories for the `TabNavigation` component, covering controlled state, URL synchronization, status indicators, overflow scroll shadows, and custom styling variants.

## Key Components

**Exported Stories**

| Story | Description |
|---|---|
| `Controlled` | Basic controlled mode with `activeTab` + `onTabChange` |
| `WithContent` | Children render prop displaying active tab content |
| `WithIndicators` | Tabs with `success`, `warning`, and `error` indicator badges |
| `UrlSync` | Active tab driven by a `?tab=` URL search parameter |
| `UrlSyncCustomParam` | URL sync with a custom param name (`section`) and `replaceState` |
| `TwoTabs` | Minimal two-tab layout |
| `DefaultTabOverride` | Pre-selects a non-first tab on mount |
| `CustomClassName` | Custom Tailwind class on the tab container |
| `ScrollShadows` | 15 tabs in a constrained width to trigger fade scroll shadows |
| `CustomShadowColor` | Overrides scroll shadow gradient via `shadowClassName` |
| `ShadowOnCustomBackground` | Shadow color matched to a custom card background |
| `NoShadows` | Two tabs that fit without overflow — shadows never appear |

**Fixture Data**
- `defaultTabs` — 4 tabs (Overview, Users, Settings, Notifications)
- `tabsWithIndicators` — 5 tabs with mixed `success`/`warning`/`error` indicators
- `manyTabs` — 15 tabs used for overflow/scroll stories

## Usage Example

```typescript
// Controlled tab navigation with status indicators
import { TabNavigation, TabItem } from '../components/ui/tab-navigation';
import { useState } from 'react';
import { Home, Settings } from 'lucide-react';

const tabs: TabItem[] = [
  { id: 'home', label: 'Home', icon: Home, indicator: 'success' },
  { id: 'settings', label: 'Settings', icon: Settings, indicator: 'warning' },
];

export function MyPage() {
  const [active, setActive] = useState('home');
  return (
    <TabNavigation
      tabs={tabs}
      activeTab={active}
      onTabChange={setActive}
      shadowClassName="from-ods-card"
    >
      {(activeTab) => <div>Viewing: {activeTab}</div>}
    </TabNavigation>
  );
}
```