diff --git a/.claude/hooks/post-edit-test.sh b/.claude/hooks/post-edit-test.sh
new file mode 100755
index 000000000..e431fd74c
--- /dev/null
+++ b/.claude/hooks/post-edit-test.sh
@@ -0,0 +1,49 @@
+#!/bin/bash
+# Post-edit hook: finds and runs the nearest spec file when a component file is edited.
+# Reads file path from stdin JSON (PostToolUse hook format).
+# Exits 0 always — test failures are reported as output, not as hook failures.
+
+INPUT=$(cat /dev/stdin)
+ABSOLUTE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // empty')
+
+if [[ -z "$ABSOLUTE_PATH" ]]; then
+  exit 0
+fi
+
+# Convert absolute path to relative path from project root
+CWD=$(echo "$INPUT" | jq -r '.cwd // empty')
+if [[ -n "$CWD" ]]; then
+  FILE="${ABSOLUTE_PATH#$CWD/}"
+else
+  FILE="$ABSOLUTE_PATH"
+fi
+
+# Only trigger for component source files in src/tedi/
+if [[ ! "$FILE" =~ ^src/tedi/ ]]; then
+  exit 0
+fi
+
+# Skip if the edited file is itself a spec or story
+if [[ "$FILE" =~ \.(spec|stories)\. ]]; then
+  exit 0
+fi
+
+# Derive the spec file path
+if [[ "$FILE" =~ \.tsx$ ]]; then
+  SPEC="${FILE%.tsx}.spec.tsx"
+elif [[ "$FILE" =~ \.ts$ ]]; then
+  SPEC="${FILE%.ts}.spec.ts"
+elif [[ "$FILE" =~ \.module\.scss$ ]]; then
+  # For SCSS modules, find the corresponding component spec
+  DIR=$(dirname "$FILE")
+  BASENAME=$(basename "$FILE" .module.scss)
+  SPEC="$DIR/$BASENAME.spec.tsx"
+fi
+
+# Run test if spec file exists
+if [[ -n "$SPEC" && -f "$SPEC" ]]; then
+  echo "Running: npm test -- --testPathPattern=\"$SPEC\""
+  npm test -- --testPathPattern="$SPEC" 2>&1
+else
+  echo "No spec file found at $SPEC — skipping auto-test."
+fi
diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 000000000..67a296513
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,15 @@
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Edit|Write",
+        "hooks": [
+          {
+            "type": "command",
+            "command": ".claude/hooks/post-edit-test.sh"
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/.claude/skills/contributing/SKILL.md b/.claude/skills/contributing/SKILL.md
new file mode 100644
index 000000000..d5552f4fe
--- /dev/null
+++ b/.claude/skills/contributing/SKILL.md
@@ -0,0 +1,69 @@
+---
+name: contributing
+description: >
+  Guide for contributing to TEDI Design System React. Covers creating new components (Figma-driven),
+  running tests and lint, WCAG accessibility audits, safe refactoring, and Storybook story creation.
+  Use when developing, reviewing, or modifying TEDI components in this codebase.
+user-invocable: true
+argument-hint: [task description or component path]
+---
+
+# TEDI React Contributing
+
+You are a senior React and TypeScript engineer specializing in accessible UI component libraries. You have expert-level knowledge of WCAG 2.1/2.2 guidelines (A, AA, AAA), WAI-ARIA authoring practices, and React best practices.
+
+## Before Any Code
+
+1. Read `CLAUDE.md` at the project root for commands, architecture, and conventions.
+2. Read [best-practices](references/best-practices.md) for coding patterns.
+3. If creating or modifying a component, check if TEDI Angular (`../angular/tedi/components/`) has an equivalent — use as behavioral reference.
+4. Check TEDI Core (`../core/src/`) for available design tokens, mixins, and shared styles.
+5. Check `package.json` before considering any new dependency.
+
+## Task Router
+
+Load the appropriate reference based on what you're doing:
+
+| If the task involves... | Load reference |
+|---|---|
+| Creating a new component from scratch | [new-component.md](references/new-component.md) |
+| Running tests, fixing test/lint failures | [testing.md](references/testing.md) |
+| WCAG audit or accessibility review | [a11y-review.md](references/a11y-review.md) |
+| Renaming, restructuring, extracting, merging | [refactoring.md](references/refactoring.md) |
+| Creating or updating Storybook stories | [stories.md](references/stories.md) |
+| Need to check coding patterns | [best-practices.md](references/best-practices.md) |
+
+For **compound tasks** (e.g., "create a new component"), follow the primary workflow and load additional references as needed later. Creating a component will also need testing.md and stories.md at the end.
+
+## Cross-Cutting Rules
+
+### Figma Integration
+Use `figma-desktop` MCP tools to fetch design context, screenshots, and metadata from provided Figma links. Extract spacing, colors, typography, and states for pixel-accurate implementation.
+
+### Third-Party Libraries
+Always prefer existing dependencies. When a new one is needed, **stop and ask for permission** with: library name, why it's needed, alternatives considered, and bundle size impact.
+
+### Parallel Work
+For bulk tasks (e.g., "audit all form components for a11y"), launch parallel agents — one per component — to speed up the work. Collect and summarize results.
+
+### Consumer Catalog Maintenance
+When you add, remove, rename, or change the API of a component, update the consumer component catalog at `skills/tedi-react/references/components.md`:
+- **New component** → add entry to the appropriate section (TEDI-Ready or Community) with import path, key props, and a usage example.
+- **Removed component** → delete its entry.
+- **Deprecated component** → add `**⚠️ DEPRECATED**` marker and note the replacement.
+- **API change** (renamed prop, new callback, changed export) → update the entry to match.
+
+### Communication
+- Be direct and concise.
+- No unnecessary comments in code — code should be self-documenting. Do not add comments that restate what a selector, class name, or variable already says (e.g., `// Secondary variant` above `.tedi-checkbox-card--secondary`). This applies to styles, templates, and code equally. Only add comments when the logic isn't self-evident.
+- When explaining decisions, focus on the "why" not the "what".
+
+## Commands
+
+```bash
+npm start                                    # Storybook dev server (port 4400)
+npm test                                     # Run all tests (Jest)
+npm test -- --testPathPattern="component"    # Run specific tests
+npm run lint                                 # ESLint + Stylelint with --fix
+npm run build                                # Build library with Vite
+```
diff --git a/.claude/skills/contributing/references/a11y-review.md b/.claude/skills/contributing/references/a11y-review.md
new file mode 100644
index 000000000..d01d1c234
--- /dev/null
+++ b/.claude/skills/contributing/references/a11y-review.md
@@ -0,0 +1,79 @@
+# WCAG Accessibility Review
+
+Target component: `$ARGUMENTS`
+
+## Audit Procedure
+
+### 1. Read the Component
+
+Read all files for the target component:
+- `.tsx` — check props, ARIA attributes, semantic HTML, keyboard handlers
+- `.module.scss` — check focus styles, contrast, reduced motion support
+- `.spec.tsx` — check if accessibility scenarios are tested
+
+### 2. ARIA & Semantics
+
+Check against WAI-ARIA Authoring Practices for the component pattern:
+
+- [ ] Correct `role` attribute for the component type
+- [ ] Required ARIA attributes present (`aria-label`, `aria-labelledby`, `aria-describedby`, `aria-expanded`, `aria-selected`, `aria-checked`, etc.)
+- [ ] `aria-live` regions for dynamic content updates
+- [ ] Semantic HTML elements used where possible (`<button>`, `<input>`, `<nav>`, `<dialog>`) instead of ARIA on `<div>`/`<span>`
+- [ ] No redundant ARIA (e.g., `role="button"` on `<button>`)
+- [ ] `aria-hidden={true}` on decorative elements
+
+### 3. Keyboard Navigation
+
+- [ ] All interactive elements reachable via Tab
+- [ ] Logical tab order (no positive `tabIndex` values)
+- [ ] Enter/Space activates buttons and controls
+- [ ] Escape closes overlays/popups and returns focus
+- [ ] Arrow keys navigate within composite widgets (menus, listboxes, tabs, grids)
+- [ ] Home/End navigate to first/last item where applicable
+- [ ] No keyboard traps — focus can always leave the component
+
+### 4. Focus Management
+
+- [ ] Visible focus indicator on all interactive elements
+- [ ] Focus moves to newly opened content (dialogs, dropdowns)
+- [ ] Focus returns to trigger element when overlay closes
+- [ ] `tabIndex={-1}` used for programmatically focusable non-interactive elements
+- [ ] No focus on hidden/invisible elements
+- [ ] Uses `FloatingFocusManager` for overlay focus trapping (floating-ui pattern)
+
+### 5. Visual & Motion
+
+- [ ] Text color contrast meets AA (4.5:1 normal, 3:1 large text)
+- [ ] UI component contrast meets AA (3:1 against adjacent colors)
+- [ ] Information not conveyed by color alone (icons, text, patterns as alternatives)
+- [ ] `prefers-reduced-motion` respected — animations/transitions disabled or reduced
+- [ ] Content readable at 200% zoom
+
+### 6. Touch & Pointer
+
+- [ ] Touch targets minimum 44x44 CSS pixels
+- [ ] Adequate spacing between touch targets
+- [ ] No functionality dependent on hover alone (touch devices can't hover)
+- [ ] Uses `useIsTouchDevice()` hook where applicable for touch-specific behavior
+
+### 7. Test Coverage
+
+Check that the spec file includes tests for:
+- [ ] ARIA attributes are rendered correctly
+- [ ] Keyboard events trigger correct behavior
+- [ ] Focus moves as expected
+- [ ] Disabled state prevents interaction and is communicated to assistive tech
+
+### 8. Report
+
+Provide findings organized by severity:
+
+**Critical** — WCAG A violations, keyboard traps, missing roles on interactive elements
+**Major** — WCAG AA violations, missing ARIA attributes, no visible focus indicator
+**Minor** — Best practice improvements, missing `prefers-reduced-motion`, missing test coverage
+
+For each finding, include:
+- File and line reference
+- What the issue is
+- How to fix it
+- Which WCAG criterion it violates (e.g., 2.1.1 Keyboard, 4.1.2 Name Role Value)
diff --git a/.claude/skills/contributing/references/best-practices.md b/.claude/skills/contributing/references/best-practices.md
new file mode 100644
index 000000000..f3715e072
--- /dev/null
+++ b/.claude/skills/contributing/references/best-practices.md
@@ -0,0 +1,319 @@
+# TEDI React Best Practices
+
+Read before writing any component code.
+
+## Component Architecture
+
+### Standard Component
+```tsx
+export interface ComponentNameProps {
+  // Props grouped: required first, then optional
+}
+
+export const ComponentName = (props: ComponentNameProps): JSX.Element => {
+  const { prop1, prop2 = 'default', ...rest } = props;
+  // hooks, state, computed values
+  return <div className={styles['tedi-component-name']}>{/* ... */}</div>;
+};
+
+ComponentName.displayName = 'ComponentName';
+export default ComponentName;
+```
+
+### ForwardRef Component
+```tsx
+export const ComponentName = forwardRef<HTMLDivElement, ComponentNameProps>(
+  (props, ref): JSX.Element => {
+    const { prop1, prop2 = 'default', ...rest } = props;
+    return <div ref={ref} className={styles['tedi-component-name']}>{/* ... */}</div>;
+  }
+);
+
+ComponentName.displayName = 'ComponentName';
+export default ComponentName;
+```
+
+### Polymorphic Component (renders as different elements)
+```tsx
+const ComponentNameInner = forwardRef(
+  <C extends React.ElementType = 'button'>(
+    props: ComponentNameProps<C>,
+    ref?: PolymorphicRef<C>
+  ) => {
+    const { as, ...rest } = props;
+    const Element = as || 'button';
+    return <Element ref={ref} {...rest} />;
+  }
+);
+
+ComponentNameInner.displayName = 'ComponentName';
+export const ComponentName = ComponentNameInner as <C extends React.ElementType = 'button'>(
+  props: ComponentNameProps<C> & { ref?: PolymorphicRef<C> }
+) => React.ReactElement | null;
+export default ComponentName;
+```
+
+### Breakpoint Support
+```tsx
+export const ComponentName = (props: BreakpointSupport<ComponentNameBreakpointProps>): JSX.Element => {
+  const { getCurrentBreakpointProps } = useBreakpointProps();
+  const { size = 'default', variant = 'primary', ...rest } = getCurrentBreakpointProps(props);
+  // ...
+};
+```
+
+## Form Control Patterns
+
+### Controlled + Uncontrolled Support
+Every form component must support both modes:
+```tsx
+export const FormControl = (props: FormControlProps): JSX.Element => {
+  const { value: externalValue, defaultValue, onChange, ...rest } = props;
+
+  // Internal state for uncontrolled mode
+  const [innerValue, setInnerValue] = React.useState(externalValue ?? defaultValue ?? '');
+
+  // Use external value when controlled, internal when uncontrolled
+  const value = React.useMemo(
+    () => externalValue ?? innerValue,
+    [externalValue, innerValue]
+  );
+
+  const handleChange = (newValue: string) => {
+    if (typeof externalValue === 'undefined') {
+      setInnerValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+
+  return <input value={value} onChange={(e) => handleChange(e.target.value)} />;
+};
+```
+
+### Choice Inputs (Checkbox, Radio)
+```tsx
+// Shared interface from choice-input.types.ts
+const [innerChecked, setInnerChecked] = React.useState<boolean>(defaultChecked || false);
+const getChecked = React.useMemo((): boolean => {
+  return onChange && typeof checked !== 'undefined' ? checked : innerChecked;
+}, [onChange, checked, innerChecked]);
+```
+
+### Event Handler Conventions
+- Text inputs: `onChange?: (value: string) => void` + `onChangeEvent?: React.ChangeEventHandler`
+- Choice inputs: `onChange?: (value: string, checked: boolean) => void`
+- Select: returns `ISelectOption | ISelectOption[] | null`
+
+## Naming Conventions
+
+| Item | Convention | Example |
+|------|-----------|---------|
+| Component file | `kebab-case.tsx` | `button.tsx` |
+| Component export | PascalCase | `Button` |
+| Props interface | PascalCase + Props | `ButtonProps` |
+| Types file | `kebab-case.types.ts` | `choice-input.types.ts` |
+| Test file | `kebab-case.spec.tsx` | `button.spec.tsx` |
+| Story file | `kebab-case.stories.tsx` | `button.stories.tsx` |
+| SCSS module | `kebab-case.module.scss` | `button.module.scss` |
+| CSS classes | BEM with `tedi-` prefix | `.tedi-button__icon--large` |
+| Hooks | `use-kebab-case.ts` | `use-breakpoint-props.ts` |
+
+## Styling
+
+### CSS Modules + SCSS
+- File naming: `component-name.module.scss`
+- Import: `import styles from './component-name.module.scss';`
+- Usage: `className={styles['tedi-component-name']}`
+- BEM: `.tedi-block__element--modifier`
+- Max nesting depth: 3 levels
+- Use design tokens from `@tedi-design-system/core` — never hardcode colors
+- Never use fallback values in CSS `var()` — write `var(--token-name)`, not `var(--token-name, fallback)`
+- Use `@use '@tedi-design-system/core/bootstrap-utility/breakpoints'` for responsive styles
+- No obvious comments — do not add comments that restate what a selector, class name, or variable already says (e.g., `// Primary variant` above `&--primary`, or `// Disabled state` above `&:disabled`). Only comment when the logic isn't self-evident.
+
+### Example
+```scss
+.tedi-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tedi-spacing-2);
+
+  &__icon {
+    flex-shrink: 0;
+  }
+
+  &--primary {
+    background-color: var(--color-primary);
+  }
+}
+```
+
+## Testing Patterns
+
+### Basic Component Test
+```tsx
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+describe('ComponentName', () => {
+  it('renders with default properties', () => {
+    render(<ComponentName id="test" label="Test" />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+});
+```
+
+### Mocking Breakpoint Hook
+```tsx
+jest.mock('../../../helpers', () => ({
+  useBreakpointProps: jest.fn(),
+}));
+
+beforeEach(() => {
+  (useBreakpointProps as jest.Mock).mockReturnValue({
+    getCurrentBreakpointProps: jest.fn((props) => props),
+  });
+});
+```
+
+### Testing Form Controls
+```tsx
+it('calls onChange when value changes', () => {
+  const handleChange = jest.fn();
+  render(<TextField id="test" label="Test" onChange={handleChange} />);
+  fireEvent.change(screen.getByRole('textbox'), { target: { value: 'new' } });
+  expect(handleChange).toHaveBeenCalledWith('new');
+});
+
+it('works in uncontrolled mode', () => {
+  render(<TextField id="test" label="Test" defaultValue="initial" />);
+  const input = screen.getByRole('textbox');
+  expect(input).toHaveValue('initial');
+  fireEvent.change(input, { target: { value: 'updated' } });
+  expect(input).toHaveValue('updated');
+});
+```
+
+### Testing Controlled vs Uncontrolled
+```tsx
+it('changes state when clicked if not controlled', async () => {
+  const TestComponent = () => {
+    const [isChecked, setIsChecked] = useState(false);
+    return (
+      <Checkbox
+        id="test"
+        label="Test"
+        defaultChecked={isChecked}
+        onChange={() => setIsChecked(!isChecked)}
+      />
+    );
+  };
+
+  render(<TestComponent />);
+  const checkbox = screen.getByRole('checkbox');
+  expect(checkbox).not.toBeChecked();
+  await act(async () => { fireEvent.click(checkbox); });
+  expect(checkbox).toBeChecked();
+});
+```
+
+### Query Priority
+Use semantic queries in this order:
+1. `getByRole` (preferred)
+2. `getByLabelText`
+3. `getByPlaceholderText`
+4. `getByText`
+5. `getByTestId` (last resort)
+
+## Storybook Stories
+
+### Structure
+```tsx
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ComponentName> = {
+  component: ComponentName,
+  title: 'TEDI-Ready/Components/Category/ComponentName',
+  parameters: {
+    status: { type: [{ name: 'breakpointSupport', url: '...' }] },
+    design: { type: 'figma', url: 'https://www.figma.com/...' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ComponentName>;
+
+const Template: StoryFn<ComponentNameProps> = (args) => <ComponentName {...args} />;
+
+export const Default: Story = {
+  render: Template,
+  args: { children: 'Content' },
+};
+```
+
+### Story Coverage
+Every story file must include:
+- **Default** — component with default props
+- One story **per visual variant** (e.g., primary, secondary, ghost)
+- One story **per significant state** (disabled, loading, error, empty)
+- **Controlled examples** — form controls with React state
+- Stories matching **all variants visible in Figma**
+
+## Barrel Exports
+
+### Simple Components (no index.ts needed)
+Export directly from the component file:
+```tsx
+export const ComponentName = ...;
+export default ComponentName;
+```
+Then add to `src/tedi/index.ts`:
+```tsx
+export * from './components/category/component-name/component-name';
+```
+
+### Complex Components (with sub-components)
+Create `index.ts` in the component directory:
+```tsx
+export * from './component-name';
+export * from './component-name.types';
+export * from './sub-component/sub-component';
+```
+Then add to `src/tedi/index.ts`:
+```tsx
+export * from './components/category/component-name';
+```
+
+## Import Order
+Enforced by `simple-import-sort`:
+1. External packages (`react`, `@floating-ui/react`)
+2. `@ria.*` scope imports
+3. Relative imports (`./`, `../`)
+4. Absolute imports
+5. Side-effect imports
+
+## Key File Locations
+
+### Providers
+- ThemeProvider: `src/tedi/providers/theme-provider/`
+- StyleProvider: `src/tedi/providers/style-provider/`
+- AccessibilityProvider: `src/tedi/providers/accessibility-provider/`
+- LabelProvider: `src/tedi/providers/label-provider/`
+
+### Helpers
+- Breakpoint hook: `src/tedi/helpers/hooks/use-breakpoint-props.ts`
+- Polymorphic types: `src/tedi/helpers/polymorphic/types.ts`
+- Main index: `src/tedi/helpers/index.ts`
+
+### Key Components
+- Overlay (floating-ui wrapper): `src/tedi/components/overlays/overlay/`
+- FormLabel (shared form label): `src/tedi/components/form/form-label/`
+- FeedbackText (validation messages): `src/tedi/components/form/feedback-text/`
+
+## Known Patterns
+- Select wraps react-select with 14 custom component overrides
+- Overlay components use floating-ui hooks: `useClick`, `useFocus`, `useHover`, `useDismiss`, `useRole`
+- `useIsTouchDevice()` hook for touch-specific behavior in overlays
+- `useLabels()` hook for internationalization
+- `useScrollFade()` hook (`src/tedi/helpers/hooks/use-scroll-fade.ts`) for scroll containers with fade indicators — supports `direction: 'vertical' | 'horizontal'`, returns `canScrollStart`, `canScrollEnd`, `scrollRef` (callback ref with ResizeObserver), and `handleScroll`
+- Do NOT reference `src/community/` components as examples — they are not always reviewed to TEDI standards
diff --git a/.claude/skills/contributing/references/new-component.md b/.claude/skills/contributing/references/new-component.md
new file mode 100644
index 000000000..2911e8a36
--- /dev/null
+++ b/.claude/skills/contributing/references/new-component.md
@@ -0,0 +1,72 @@
+# Create New TEDI React Component
+
+## Prerequisites
+
+A Figma link MUST be provided: `$ARGUMENTS`
+
+If no Figma link was provided, stop immediately and ask the user for one. Do not proceed without design reference.
+
+## Step 1: Gather Context
+
+1. Use `figma-desktop` MCP to fetch design context, screenshots, and metadata from the Figma link.
+2. Check if TEDI Angular (`../angular/tedi/components/`) has an equivalent component — use as behavioral reference.
+3. Check TEDI Core (`../core/src/`) for available design tokens and shared styles.
+
+## Step 2: Plan
+
+Enter plan mode and create a detailed plan covering:
+
+- **Component name** and export name (PascalCase)
+- **Category** — which folder under `src/tedi/components/` it belongs to
+- **API design** — all props (with TypeScript types and defaults), children/render props
+- **Controlled/uncontrolled** — if form component, both modes must be supported
+- **Polymorphic** — does it need an `as` prop for different element types?
+- **Breakpoint support** — does it need responsive prop overrides?
+- **Accessibility** — ARIA roles, keyboard interactions, screen reader behavior, focus management
+- **Dependencies** — existing TEDI components to reuse, third-party libraries if needed
+- **File list** — every file to create
+- **Test plan** — what to test (props, callbacks, states, keyboard, a11y)
+- **Stories plan** — which stories to create (match all Figma variants)
+
+If a new dependency is needed, stop and ask the user for permission.
+
+## Step 3: Scaffold Files
+
+Create the following files in `src/tedi/components/<category>/<component-name>/`:
+
+```
+component-name.tsx
+component-name.spec.tsx
+component-name.stories.tsx
+component-name.module.scss   (if styles needed)
+```
+
+## Step 4: Implement
+
+Follow all patterns from best-practices:
+- forwardRef when the component needs ref forwarding
+- Polymorphic pattern if it needs to render as different elements
+- Controlled + uncontrolled if it's a form control
+- CSS Modules with BEM SCSS, using design tokens
+- `displayName` set on every exported component
+- Full WCAG compliance (roles, keyboard nav, focus, aria attributes)
+
+## Step 5: Export
+
+Add export to `src/tedi/index.ts`:
+```tsx
+export * from './components/<category>/<component-name>/<component-name>';
+```
+
+## Step 6: Verify
+
+1. Run tests: `npm test -- --testPathPattern="<component-name>"`
+2. Fix any failures.
+3. Run lint: `npm run lint`
+4. Fix any lint errors.
+
+## Step 7: Update Consumer Catalog
+
+Update `skills/tedi-react/references/components.md` with the new component:
+1. Add an entry to the appropriate section (TEDI-Ready or Community) with import path, key props, and a usage example.
+2. Follow the format of existing entries in the file.
diff --git a/.claude/skills/contributing/references/refactoring.md b/.claude/skills/contributing/references/refactoring.md
new file mode 100644
index 000000000..f88cdfb15
--- /dev/null
+++ b/.claude/skills/contributing/references/refactoring.md
@@ -0,0 +1,60 @@
+# Safe Refactor TEDI React Component
+
+Target: `$ARGUMENTS`
+
+## Step 1: Understand the Blast Radius
+
+1. Read the component being refactored — all files (`.tsx`, `.spec.tsx`, `.stories.tsx`, `.module.scss`).
+2. Find all consumers:
+   - Search for imports of the component across `src/tedi/` and `src/`.
+   - Search for JSX usage of the component name in templates.
+   - Check `src/tedi/index.ts` for exported names.
+3. List all affected files before making any changes.
+
+## Step 2: Baseline Tests
+
+Run the full test suite and record the result:
+```
+npm test
+```
+
+If any tests fail before your changes, note them — they are pre-existing failures, not caused by your refactor.
+
+## Step 3: Plan
+
+Enter plan mode. The plan must cover:
+
+- **What changes** — exact files and what changes in each
+- **Consumer impact** — which files need updating and why
+- **Public API changes** — any changes to props, exports, component names, or types
+- **Migration path** — if the public API changes, how consumers should update
+- **Risk assessment** — what could break, ordered by likelihood
+
+## Step 4: Execute
+
+Apply changes in this order:
+1. **Internal implementation** — component logic, hooks, styles
+2. **Public API** — props, types, component name (only if needed)
+3. **Barrel exports** — update `src/tedi/index.ts` if paths or names changed
+4. **Consumers** — update all files that import or use the component
+5. **Tests** — update spec files to match new API/behavior
+6. **Stories** — update Storybook stories to match new API
+
+## Step 5: Verify
+
+1. Run the specific component test: `npm test -- --testPathPattern="<component-name>"`
+2. Run the full test suite: `npm test`
+3. Run lint: `npm run lint`
+4. Compare test results with the baseline from Step 2 — no new failures allowed.
+
+## Step 6: Update Consumer Catalog
+
+If the refactor changed the public API (renamed component, props, removed or deprecated a component), update `skills/tedi-react/references/components.md` to match.
+
+## Step 7: Report
+
+Summarize:
+- Files changed (with brief description of each change)
+- Public API changes (if any)
+- Test results: before vs. after
+- Any manual verification needed (e.g., visual review in Storybook)
diff --git a/.claude/skills/contributing/references/stories.md b/.claude/skills/contributing/references/stories.md
new file mode 100644
index 000000000..f4ed5e429
--- /dev/null
+++ b/.claude/skills/contributing/references/stories.md
@@ -0,0 +1,122 @@
+# Create TEDI React Storybook Stories
+
+Target component: `$ARGUMENTS`
+
+## Workflow
+
+### 1. Understand the Component
+
+1. Read the component's `.tsx` to understand all props, types, and variants.
+2. **Figma is the source of truth for stories.** If the component or its stories file contains a Figma link, use `figma-desktop` MCP to fetch the design. If no link exists, ask the user for one.
+3. Check if TEDI Angular (`../angular/tedi/components/`) has stories for the equivalent component — use as reference for story coverage.
+
+### 2. Map Figma Sections to Stories
+
+**Stories must match Figma 1:1 in order and naming.** Each distinct section/example in the Figma component page becomes a named story export:
+
+| Figma section | Story export name |
+|---|---|
+| "Default" | `Default` |
+| "With icon" | `WithIcon` |
+| "With dropdown" | `WithDropdown` |
+| "With status" | `WithStatus` |
+| States showcase (default, hover, active, focus, disabled) | `States` |
+
+Rules:
+- **Same order** — export stories in the same top-to-bottom order as they appear in Figma.
+- **Same examples** — reproduce the exact content/data shown in Figma (labels, placeholder text, number of items). Do not invent different example data.
+- **Same variants** — if Figma shows 3 tabs with specific labels, use those exact labels.
+- **States story** — if Figma has a states showcase (showing default, hover, active, focus, disabled side by side), create a `States` story that renders all states together using `storybook-addon-pseudo-states` parameters:
+  ```tsx
+  export const States: Story = {
+    render: () => (
+      <Row gutter={3}>
+        <Col width="auto"><ComponentName>Default</ComponentName></Col>
+        <Col width="auto"><ComponentName>Hover</ComponentName></Col>
+        <Col width="auto"><ComponentName>Active</ComponentName></Col>
+        <Col width="auto"><ComponentName>Focus</ComponentName></Col>
+        <Col width="auto"><ComponentName disabled>Disabled</ComponentName></Col>
+      </Row>
+    ),
+    parameters: {
+      pseudo: {
+        hover: '[data-name="component"]:nth-of-type(2)',
+        active: '[data-name="component"]:nth-of-type(3)',
+        focusVisible: '[data-name="component"]:nth-of-type(4)',
+      },
+    },
+  };
+  ```
+
+### 3. Determine the Story Category
+
+Map the component path to the Storybook title:
+
+| Component path | Story title prefix |
+|---|---|
+| `src/tedi/components/form/` | `TEDI-Ready/Components/Form/` |
+| `src/tedi/components/buttons/` | `TEDI-Ready/Components/Buttons/` |
+| `src/tedi/components/overlays/` | `TEDI-Ready/Components/Overlays/` |
+| `src/tedi/components/navigation/` | `TEDI-Ready/Components/Navigation/` |
+| Other category | `TEDI-Ready/Components/<Category>/` |
+
+### 4. Create the Stories File
+
+Follow this structure:
+
+```tsx
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+/**
+ * <a href="https://www.figma.com/design/..." target="_BLANK">Figma ↗</a>
+ */
+
+export default {
+  title: 'TEDI-Ready/Components/Category/ComponentName',
+  component: ComponentName,
+  subcomponents: { /* sub-components if compound */ } as never,
+  parameters: {
+    status: { type: [{ name: 'breakpointSupport', url: '...' }] },
+    design: { type: 'figma', url: 'https://www.figma.com/...' },
+    controls: { exclude: ['sm', 'md', 'lg', 'xl', 'xxl'] },
+  },
+} as Meta;
+
+type Story = StoryObj;
+```
+
+### 5. Story Checklist
+
+- [ ] Every Figma section has a corresponding story export, in the same order
+- [ ] Example content (labels, data, item count) matches Figma exactly
+- [ ] `Default` story has all controls wired up via `args`
+- [ ] States story covers all visual states shown in Figma (default, hover, active, focus, disabled)
+- [ ] Controlled example included if the component is a form control
+- [ ] Figma link is in the meta `parameters.design` and in the JSDoc comment above `export default`
+- [ ] When multiple instances of the same component appear in one story, use unique IDs per instance to avoid conflicts
+- [ ] Use `CardContent` with `padding` prop to add content padding in story examples (components should not hardcode content padding)
+
+### 6. Parameters Convention
+
+```tsx
+parameters: {
+  status: { type: [{ name: 'breakpointSupport' }] },
+  design: { type: 'figma', url: 'figma-url-here' },
+  controls: { exclude: ['sm', 'md', 'lg', 'xl', 'xxl'] },
+  pseudo: { hover: true },  // for pseudo-state stories
+}
+```
+
+### 7. Verify
+
+Run Storybook to visually confirm stories render correctly:
+```
+npm start
+```
+
+Check that:
+- All stories appear in the correct category
+- Story order matches Figma section order
+- Example content matches Figma
+- Controls work interactively
+- No console errors
diff --git a/.claude/skills/contributing/references/testing.md b/.claude/skills/contributing/references/testing.md
new file mode 100644
index 000000000..291b902a8
--- /dev/null
+++ b/.claude/skills/contributing/references/testing.md
@@ -0,0 +1,44 @@
+# Test & Verify TEDI React Component
+
+Target: `$ARGUMENTS`
+
+## Workflow
+
+### 1. Run Tests
+
+If a component name or path was provided:
+```
+npm test -- --testPathPattern="$ARGUMENTS"
+```
+
+If no argument was provided, run the full test suite:
+```
+npm test
+```
+
+### 2. Analyze Failures
+
+If tests fail:
+- Read the failing test file and the component source.
+- Identify the root cause — is it a test issue or a component bug?
+- Fix the issue in the appropriate file.
+- Re-run the failing test to confirm the fix.
+
+### 3. Run Lint
+
+```
+npm run lint
+```
+
+### 4. Fix Lint Errors
+
+If lint reports errors:
+- Fix each reported issue in the source file.
+- Re-run lint to confirm all errors are resolved.
+
+### 5. Report
+
+Summarize what was run and the outcome:
+- Tests: pass/fail count
+- Lint: clean or what was fixed
+- Any issues that need manual attention
diff --git a/.coderabbit.yaml b/.coderabbit.yaml
new file mode 100644
index 000000000..17854e078
--- /dev/null
+++ b/.coderabbit.yaml
@@ -0,0 +1,43 @@
+language: en
+early_access: true
+
+reviews:
+  profile: chill
+  request_changes_workflow: false
+  high_level_summary: true
+  poem: false
+  collapse_walkthrough: true
+  auto_review:
+    enabled: true
+    drafts: false
+    base_branches:
+      - rc
+      - main
+
+  tools:
+    eslint:
+      enabled: true
+    stylelint:
+      enabled: true
+
+  path_instructions:
+    - path: "**"
+      instructions: |
+        Read and enforce the project conventions from these files:
+        - `CLAUDE.md` — project overview, architecture, component patterns, styling rules, testing setup, and "Do NOT" list.
+        - `.claude/skills/contributing/references/best-practices.md` — detailed coding patterns for components, SCSS, testing, stories, and barrel exports.
+
+        Key things to NOT flag as issues:
+        - Missing CSS `var()` fallback values — intentionally omitted.
+        - `community/` code not following TEDI patterns — community components have lighter standards.
+
+chat:
+  auto_reply: true
+
+knowledge_base:
+  learnings:
+    scope: auto
+  issues:
+    scope: auto
+  pull_requests:
+    scope: auto
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 000000000..d918e2157
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,100 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+TEDI Design System React — a React component library (`@tedi-design-system/react`) providing accessible, reusable UI components. Two export namespaces:
+- **`/tedi`** — TEDI-Ready components (production-grade, stricter rules)
+- **`/community`** — Community/extended components (relaxed linting rules, NOT a reference for TEDI patterns)
+
+## Common Commands
+
+```bash
+npm start                # Storybook dev server on port 4400
+npm run build            # Production build with Vite
+npm test                 # Run all Jest tests
+npm test -- --testPathPattern="button"  # Run tests matching path pattern
+npm run lint             # ESLint + Stylelint with auto-fix
+npm run test:coverage    # Tests with 80% coverage threshold
+npm run build:sb         # Build static Storybook
+```
+
+## Architecture
+
+### Source Structure
+
+Components live in `src/tedi/components/` and `src/community/components/`, organized by category: `base/`, `buttons/`, `cards/`, `content/`, `form/`, `layout/`, `loaders/`, `misc/`, `navigation/`, `notifications/`, `overlays/`, `tags/`.
+
+Each component directory follows this pattern:
+- `component-name.tsx` — Component implementation
+- `component-name.spec.tsx` — Tests (Jest + React Testing Library)
+- `component-name.stories.tsx` — Storybook stories
+
+Barrel exports: `src/tedi/index.ts` and `src/community/index.ts`.
+
+### Key Patterns
+
+- **Polymorphic components**: Many components accept an `as` prop via `forwardRef` and generic typing (`<C extends React.ElementType>`). See `helpers/polymorphic/`.
+- **Breakpoint support**: Responsive props via `useBreakpointProps` hook — components accept per-breakpoint prop overrides.
+- **CSS Modules with SCSS**: Styles use CSS modules with hash-based class names. SCSS files live alongside components or in `styles/` directories.
+- **Providers**: `ThemeProvider`, `StyleProvider`, `AccessibilityProvider`, `LabelProvider` in `src/tedi/providers/`.
+
+### Build Output
+
+Vite builds two entry points to ES + CJS formats. Types generated via `vite-plugin-dts`. Output goes to `dist/`. Design tokens come from `@tedi-design-system/core`.
+
+## Commit Convention
+
+Conventional commits enforced by commitlint (husky pre-commit hook). Rules:
+- Format: `type(scope): Subject text #issue-ref`
+- Subject must be Start Case, minimum 10 characters
+- **Issue reference is required** (`references-empty: never`)
+- Example: `feat(button): Add Loading State Support #123`
+
+## Code Style
+
+- Single quotes, semicolons required, print width 120
+- JSX uses double quotes
+- Import sorting enforced by `simple-import-sort` (packages → `@ria.*` → relative → absolute → side-effects)
+- Unused imports are errors; unused vars are warnings (prefix with `_` to ignore)
+- SCSS follows BEM naming convention, enforced by Stylelint
+- Pre-commit hook runs lint-staged (ESLint + Stylelint + Prettier on staged files)
+
+## Testing
+
+- Framework: Jest + jsdom + React Testing Library
+- Coverage collected only from `src/tedi/components/**/*.{js,ts,tsx}` (excludes stories)
+- Coverage threshold: 80% for branches, functions, lines, and statements
+- `jest-setup.js` includes `@testing-library/jest-dom` matchers and `window.matchMedia` mock
+
+## Related Repositories
+
+- **TEDI Angular** (`../angular/`) — Angular implementation of the same design system. Useful as behavioral reference.
+- **TEDI Core** (`../core/`) — Shared design tokens, SCSS variables, fonts, and icons.
+
+> **Note:** These sibling repositories are available in local development only. They are NOT present in CI/CD environments — do not rely on `../angular/` or `../core/` paths in build scripts, tests, or imports that run in CI.
+
+## Do NOT
+
+- Use `src/community/` components as reference for coding patterns or style — they are community-contributed and not always reviewed
+- Hardcode color values — always use design tokens from `@tedi-design-system/core`
+- Use fallback values in CSS `var()` functions — write `var(--token-name)`, not `var(--token-name, fallback)`
+- Forget `displayName` on exported components
+- Create form controls that only support controlled mode — always support both controlled and uncontrolled
+- Use non-semantic queries in tests (`getByTestId`) when semantic ones work (`getByRole`, `getByLabelText`)
+- Skip `forwardRef` when a component needs ref forwarding
+- Use inline styles instead of CSS Modules with SCSS
+- Forget to mock `useBreakpointProps` in tests for components that use breakpoint support
+- Add `@ts-ignore` or `any` types — use proper TypeScript generics
+
+## Release
+
+Semantic Release on `main` (stable) and `rc` (prerelease) branches. Tag format: `react-${version}`. Publishes to npm from `dist/`.
+
+## For Code Review Agents (CodeRabbit, etc.)
+
+Read `.claude/skills/contributing/references/best-practices.md` for the full set of coding patterns and rules to enforce during review.
+
+Key things to **not** flag:
+- Missing CSS `var()` fallback values — intentionally omitted.
diff --git a/jest-mocks.js b/jest-mocks.js
index 3282fc947..0a43275f7 100644
--- a/jest-mocks.js
+++ b/jest-mocks.js
@@ -12,3 +12,11 @@ Object.defineProperty(window, 'matchMedia', {
     dispatchEvent: jest.fn(),
   })),
 });
+
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
+Element.prototype.scrollIntoView = jest.fn();
diff --git a/skills/tedi-react/SKILL.md b/skills/tedi-react/SKILL.md
new file mode 100644
index 000000000..e6ca75ed7
--- /dev/null
+++ b/skills/tedi-react/SKILL.md
@@ -0,0 +1,195 @@
+---
+name: tedi-react
+description: >
+  Build UIs with @tedi-design-system/react — 50+ accessible React components with design token
+  theming. Use when creating interfaces, integrating form controls, customizing themes, or working
+  with TEDI components in a React application.
+---
+
+# TEDI Design System — React
+
+React component library with 50+ accessible components. Built on React 18/19 with TypeScript, CSS Modules, and design tokens from `@tedi-design-system/core`.
+
+## Installation
+
+```bash
+npm install @tedi-design-system/react @tedi-design-system/core
+```
+
+### Peer Dependencies
+
+```
+react: 18.3.1 || ^19.0.0
+react-dom: 18.3.1 || ^19.0.0
+dayjs: ^1.11.10
+```
+
+## Setup
+
+### 1. Wrap your app with providers
+
+```tsx
+import { ThemeProvider, LabelProvider, StyleProvider } from '@tedi-design-system/react/tedi';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <LabelProvider>
+        <StyleProvider>
+          <YourApp />
+        </StyleProvider>
+      </LabelProvider>
+    </ThemeProvider>
+  );
+}
+```
+
+### 2. Import core styles
+
+```tsx
+import '@tedi-design-system/react/index.css';
+```
+
+Or in SCSS:
+```scss
+@use '@tedi-design-system/core/scss' as tedi;
+```
+
+### 3. Use components
+
+```tsx
+import { Button, TextField, Alert } from '@tedi-design-system/react/tedi';
+
+function MyPage() {
+  return (
+    <div>
+      <Alert type="info" title="Welcome">Getting started with TEDI</Alert>
+      <TextField id="name" label="Name" onChange={setName} />
+      <Button visualType="primary">Submit</Button>
+    </div>
+  );
+}
+```
+
+## Component Patterns
+
+### Polymorphic components
+Many components accept an `as` prop to render as different elements:
+
+```tsx
+import { Link, Label } from '@tedi-design-system/react/tedi';
+import { NavLink } from 'react-router-dom';
+
+<Link as={NavLink} to="/profile">Profile</Link>
+<Label as="span">Not a form label</Label>
+```
+
+### Breakpoint support
+Components with breakpoint support accept responsive prop overrides:
+
+```tsx
+import { Text, Collapse } from '@tedi-design-system/react/tedi';
+
+<Text modifiers="small" md={{ modifiers: 'normal' }} lg={{ modifiers: 'bold' }}>
+  Responsive text
+</Text>
+
+<Collapse id="info" defaultOpen md={{ defaultOpen: true }}>
+  Content
+</Collapse>
+```
+
+Breakpoints: `xs` (< 576px), `sm` (≥ 576px), `md` (≥ 768px), `lg` (≥ 992px), `xl` (≥ 1200px), `xxl` (≥ 1400px).
+
+### Compound components
+Some components use sub-component pattern:
+
+```tsx
+import { Card, Dropdown, Tooltip } from '@tedi-design-system/react/tedi';
+
+<Card>
+  <Card.Header>Title</Card.Header>
+  <Card.Content>Body</Card.Content>
+</Card>
+
+<Dropdown>
+  <Dropdown.Trigger><Button>Menu</Button></Dropdown.Trigger>
+  <Dropdown.Content>
+    <Dropdown.Item onClick={handleEdit}>Edit</Dropdown.Item>
+    <Dropdown.Separator />
+    <Dropdown.Item onClick={handleDelete}>Delete</Dropdown.Item>
+  </Dropdown.Content>
+</Dropdown>
+```
+
+## Forms
+
+TEDI form controls support both **controlled** and **uncontrolled** modes:
+
+```tsx
+import { TextField, Select, Checkbox, ChoiceGroup } from '@tedi-design-system/react/tedi';
+
+// Controlled
+const [email, setEmail] = useState('');
+<TextField id="email" label="Email" value={email} onChange={setEmail} />
+
+// Uncontrolled
+<TextField id="name" label="Name" defaultValue="John" />
+
+// Select
+<Select
+  id="country"
+  label="Country"
+  options={[
+    { label: 'Estonia', value: 'ee' },
+    { label: 'Finland', value: 'fi' },
+  ]}
+  value={selected}
+  onChange={setSelected}
+  isClearable
+  isSearchable
+/>
+
+// Checkbox
+<Checkbox id="agree" label="I agree" value="agree" onChange={(val, checked) => setAgreed(checked)} />
+```
+
+Form controls: `TextField`, `Select`, `TextArea`, `NumberField`, `Checkbox`, `Radio`, `ChoiceGroup`, `Search`, `FileUpload`, `FileDropzone`.
+
+## Theming
+
+TEDI uses CSS custom properties (design tokens) from `@tedi-design-system/core`:
+
+```tsx
+import { ThemeProvider } from '@tedi-design-system/react/tedi';
+
+// Wrap app
+<ThemeProvider defaultTheme="default">
+  <App />
+</ThemeProvider>
+```
+
+Themes apply via CSS class on `<html>`: `tedi-theme--default`, `tedi-theme--dark`.
+
+## Notifications
+
+```tsx
+import { Alert, sendNotification, ToastContainer } from '@tedi-design-system/react/tedi';
+
+// Inline alert
+<Alert type="success" title="Saved" onClose={() => setShow(false)}>
+  Changes saved successfully.
+</Alert>
+
+// Toast notification (add ToastContainer to root)
+<ToastContainer />
+sendNotification({ type: 'success', title: 'Done', children: 'Task completed' });
+```
+
+## Additional References
+
+Load based on your task — **do not load all at once**:
+
+- [references/components.md](references/components.md) — All components by category with props and usage
+- [references/theming.md](references/theming.md) — Design tokens, SCSS customization, theme provider
+- [references/forms.md](references/forms.md) — Form controls, controlled/uncontrolled modes, validation
diff --git a/skills/tedi-react/references/components.md b/skills/tedi-react/references/components.md
new file mode 100644
index 000000000..5fa6848d1
--- /dev/null
+++ b/skills/tedi-react/references/components.md
@@ -0,0 +1,525 @@
+# Component Reference
+
+Two component namespaces are available. **Always prefer TEDI-Ready** components — they are production-grade, follow stricter conventions, and are actively maintained. Use Community components only when no TEDI-Ready equivalent exists.
+
+- `@tedi-design-system/react/tedi` — TEDI-Ready (preferred)
+- `@tedi-design-system/react/community` — Community/extended
+
+---
+
+# TEDI-Ready Components
+
+All components are TypeScript, use CSS Modules with BEM naming (`tedi-` prefix). Import from `@tedi-design-system/react/tedi`.
+
+**Legend:** fRef = forwardRef, poly = polymorphic (`as` prop), bp = breakpoint support, form = controlled/uncontrolled
+
+## Base
+
+### Icon
+**Props:** `IconProps` | fRef
+- `name: string` (required)
+- `size: IconSize = 24` — 8, 12, 16, 18, 24, 36, 48
+- `color: IconColor = 'primary'`
+- `background?: IconBackgroundColor`
+- `filled: boolean = false`
+- `type: IconType = 'outlined'` — outlined, sharp, rounded
+- `label?: string` — screen reader label
+
+### Text
+**Props:** `TextProps` | bp
+- `children: ReactNode` (required)
+- `element: TextElement = 'p'` — div, p, span, li, label, h1-h6
+- `modifiers?: TextModifiers | TextModifiers[]` — normal, small, bold, italic, h1-h6, uppercase, etc.
+- `color: TextColor = 'primary'`
+
+### Heading
+**Props:** `HeadingProps` extends TextProps | bp
+- `element: HeadingLevel = 'h1'` — h1-h6
+
+## Buttons
+
+### Button
+**Props:** `ButtonProps<C>` | fRef, poly, bp
+- `children: ReactNode` (required)
+- `visualType: ButtonType = 'primary'` — primary, secondary, neutral, link
+- `color: ButtonColor = 'default'` — default, danger, success, inverted, text
+- `size?: 'default' | 'small' | 'large'`
+- `icon?: string | IconProps` — icon-only button
+- `iconLeft?: string | IconProps`
+- `iconRight?: string | IconProps`
+- `isLoading?: boolean`
+- `fullWidth?: boolean`
+- `type?: 'submit' | 'button' | 'reset' = 'button'`
+
+```tsx
+<Button visualType="primary">Save</Button>
+<Button visualType="secondary" iconLeft="arrow_back">Back</Button>
+<Button icon="favorite" isLoading={loading} />
+```
+
+### ButtonGroup
+**Props:** `ButtonGroupProps`
+- `children: ReactNode`
+- `type: 'primary' | 'secondary' = 'primary'`
+- `stretch?: boolean`
+- `onSelectionChange?: (id: string) => void`
+
+### ClosingButton
+**Props:** `ClosingButtonProps`
+- `size: 'default' | 'small' = 'default'`
+- `color: 'primary' | 'brand' | 'white' = 'primary'`
+
+### Collapse
+**Props:** `CollapseProps` | bp
+- `id: string` (required)
+- `children: ReactNode`
+- `open?: boolean` (controlled), `defaultOpen?: boolean`
+- `onToggle?: (open: boolean) => void`
+- `arrowType: 'default' | 'secondary' = 'default'`
+- `iconOnly?: boolean`
+
+### FloatingButton
+**Props:** `FloatingButtonProps`
+- `children: ReactNode`
+- `axis: 'horizontal' | 'vertical' = 'horizontal'`
+- `size: 'medium' | 'large' = 'medium'`
+- `position?: CSSProperties['position']`
+- `placement?: FloatingButtonPlacement`
+
+### InfoButton
+**Props:** `InfoButtonProps` | fRef
+- `isSmall?: boolean`
+- `color: 'default' | 'inverted' = 'default'`
+
+## Cards
+
+### Card
+**Props:** `CardProps` | fRef, bp
+- `children?: ReactNode`
+- `padding: CardContentPadding = 1`
+- `background: CardBackground = 'primary'`
+- `borderless?: boolean`
+
+Sub-components: `Card.Header`, `Card.Content`, `Card.Notification`
+
+```tsx
+<Card>
+  <Card.Header>Title</Card.Header>
+  <Card.Content>Body</Card.Content>
+</Card>
+```
+
+## Content
+
+### Label
+**Props:** `LabelProps` | fRef, poly, bp
+- `children: ReactNode`
+- `required?: boolean`
+- `isBold?: boolean`
+- `isSmall?: boolean`
+- `tooltip?: string`
+- `htmlFor?: string`
+
+### TextGroup
+**Props:** `TextGroupProps` | bp
+- `label: ReactNode` (required)
+- `value: ReactNode | ReactNode[]` (required)
+- `type: 'horizontal' | 'vertical' = 'vertical'`
+- `labelWidth?: string | number`
+
+```tsx
+<TextGroup type="horizontal" labelWidth="200px" label="Status" value="Active" />
+```
+
+### List
+**Props:** `ListProps` | bp
+- `children: ReactElement<ListItemProps>[]`
+- `element: 'ul' | 'ol' = 'ul'`
+- `style: 'styled' | 'none' = 'none'`
+- `color: BulletColor = 'brand'`
+
+Sub-component: `List.Item`
+
+### Section
+**Props:** `SectionProps`
+- `as?: 'section' | 'article' | 'aside' | 'div' = 'section'`
+
+### HeadingWithIcon
+**Props:** `HeadingWithIconProps`
+- `children: ReactNode` (required)
+- `name: string` (icon name)
+- `element?: HeadingLevel = 'h4'`
+
+### Truncate
+**Props:** `TruncateProps` | bp
+- `children: string` (required)
+- `maxLength?: number = 200`
+- `expandable?: boolean = true`
+
+## Form
+
+### TextField
+**Props:** `TextFieldProps` | fRef, bp, form
+- `id: string` (required)
+- `label?: string`
+- `value?: string`, `defaultValue?: string`
+- `onChange?: (value: string) => void`
+- `icon?: string | IconProps`
+- `isClearable?: boolean`
+- `size?: 'default' | 'small' | 'large'`
+- `helper?: FeedbackTextProps | FeedbackTextProps[]`
+- `disabled?: boolean`, `readOnly?: boolean`, `invalid?: boolean`
+
+```tsx
+<TextField id="email" label="Email" icon="mail" isClearable value={email} onChange={setEmail} />
+```
+
+### Select
+**Props:** `SelectProps` | fRef, bp, form
+- `id: string` (required)
+- `label?: string`
+- `options?: OptionsOrGroups<ISelectOption>`
+- `value?: TSelectValue`, `defaultValue?: TSelectValue`
+- `onChange?: (value: TSelectValue) => void`
+- `multiple?: boolean`
+- `isSearchable?: boolean = true`
+- `isClearable?: boolean = true`
+- `async?: boolean`, `loadOptions?: Function`
+- `tagsDirection?: 'stack' | 'row'`
+
+```tsx
+<Select id="country" label="Country" options={countries} value={sel} onChange={setSel} />
+```
+
+### TextArea
+**Props:** `TextAreaProps` extends TextFieldProps | fRef, bp, form
+- `characterLimit?: number`
+
+### NumberField
+**Props:** `NumberFieldProps` | form
+- `id: string` (required)
+- `label?: string`
+- `value?: number`, `defaultValue?: number`
+- `onChange?: (value: number) => void`
+- `min?: number`, `max?: number`, `step?: number = 1`
+- `suffix?: string`
+
+### Checkbox
+**Props:** `CheckboxProps` | form
+- `id: string` (required)
+- `label?: ReactNode`
+- `value: string` (required)
+- `checked?: boolean`, `defaultChecked?: boolean`
+- `onChange?: (value: string, checked: boolean) => void`
+- `indeterminate?: boolean`
+- `size?: 'default' | 'small'`
+
+### Radio
+**Props:** `RadioProps` | form
+Same as Checkbox (without indeterminate)
+
+### ChoiceGroup
+**Props:** `ChoiceGroupProps` | bp, form
+- `id: string` (required), `name: string` (required)
+- `label: ReactNode | string`
+- `items: ExtendedChoiceGroupItemProps[]`
+- `inputType?: 'radio' | 'checkbox' = 'radio'`
+- `value?: ChoiceGroupValue`, `defaultValue?: ChoiceGroupValue`
+- `variant?: 'default' | 'segmented'`
+
+### Search
+**Props:** `SearchProps` extends TextFieldProps | bp, form
+- `onSearch?: (value: string) => void`
+- `button?: Partial<ButtonProps>`
+
+### FileUpload
+**Props:** `FileUploadProps` | form
+- `id: string` (required), `name: string` (required)
+- `accept?: string`
+- `multiple?: boolean`
+- `files?: FileUploadFile[]`, `defaultFiles?: FileUploadFile[]`
+- `maxSize?: number`
+
+### FileDropzone
+**Props:** `FileDropzoneProps`
+- `label: string` (required)
+- `accept?: string`, `multiple?: boolean`, `maxSize?: number`
+
+## Layout
+
+### Row / Col (Grid)
+```tsx
+<Row cols={3} gutter={2} alignItems="center">
+  <Col width={6}>Half</Col>
+  <Col width={6}>Half</Col>
+</Row>
+```
+
+**Row:** `cols`, `gutter` (0-5), `gutterX`, `gutterY`, `gap`, `justifyContent`, `alignItems`, `direction`, `wrap` + breakpoints
+**Col:** `width` (1-12 or 'auto'), `offset`, `order`, `grow`, `shrink` + breakpoints
+
+### VerticalSpacing
+**Props:** `VerticalSpacingProps` | bp
+- `children: ReactNode`
+- `size?: VerticalSpacingSize = 1` — 0-5 in em
+- `element?: keyof JSX.IntrinsicElements = 'div'`
+
+Sub-component: `VerticalSpacing.Item`
+
+### SideNav
+**Props:** `SideNavProps<C>` | poly
+- `ariaLabel: string` (required)
+- `navItems: SideNavItemProps<C>[]` (required)
+- `linkAs?: ElementType` — polymorphic link component
+- `collapsible?: boolean`
+- `mobileBreakpoint?: 'mobile' | 'tablet'`
+
+Sub-components: `SideNav.Toggle`, `SideNav.Item`, `SideNav.Dropdown`, `SideNav.Mobile`
+
+## Loaders
+
+### Spinner
+**Props:** `SpinnerProps` | bp
+- `size: SpinnerSize = 16` — 10, 16, 18, 48
+- `color: 'primary' | 'secondary' = 'primary'`
+- `label?: string`
+
+### Skeleton
+**Props:** `SkeletonProps`
+- `children?: ReactNode`
+- `label?: string`
+
+Sub-component: `Skeleton.Block`
+
+## Navigation
+
+### Link
+**Props:** `LinkProps<C>` | fRef, poly, bp
+- `children: ReactNode`
+- `underline?: boolean = true`
+- `visualType?: ButtonType = 'link'`
+- `icon?: string | IconProps`
+- `iconLeft?: string | IconProps`
+- `target?: string`, `href?: string`
+
+```tsx
+<Link href="/docs" target="_blank">Documentation</Link>
+<Link as={NavLink} to="/profile">Profile</Link>
+```
+
+## Notifications
+
+### Alert
+**Props:** `AlertProps` | bp
+- `children?: ReactNode`
+- `title?: ReactNode`
+- `type: AlertType = 'info'` — info, success, warning, danger
+- `icon?: string | IconProps`
+- `onClose?: () => void` — adds close button
+- `role?: 'alert' | 'status' | 'none' = 'alert'`
+
+```tsx
+<Alert type="success" title="Saved" onClose={dismiss}>Changes saved.</Alert>
+```
+
+### Toast
+```tsx
+import { sendNotification, ToastContainer } from '@tedi-design-system/react/tedi';
+
+// In root
+<ToastContainer />
+
+// Trigger
+sendNotification({ type: 'info', title: 'Update', children: 'New version available' });
+```
+
+## Overlays
+
+### Tooltip
+Sub-components: `Tooltip.Trigger`, `Tooltip.Content`
+
+```tsx
+<Tooltip>
+  <Tooltip.Trigger><Icon name="info" /></Tooltip.Trigger>
+  <Tooltip.Content>Help text</Tooltip.Content>
+</Tooltip>
+```
+
+**Props:** `openWith?: 'hover' | 'click' | 'focus' | 'manual'`
+
+### Dropdown
+Sub-components: `Dropdown.Trigger`, `Dropdown.Content`, `Dropdown.Item`, `Dropdown.Separator`
+
+```tsx
+<Dropdown>
+  <Dropdown.Trigger><Button>Menu</Button></Dropdown.Trigger>
+  <Dropdown.Content>
+    <Dropdown.Item onClick={edit}>Edit</Dropdown.Item>
+    <Dropdown.Separator />
+    <Dropdown.Item onClick={del}>Delete</Dropdown.Item>
+  </Dropdown.Content>
+</Dropdown>
+```
+
+**Props:** `width`, `placement`, `divided`, `open?` (controlled), `modal?: boolean`
+
+### Popover
+Sub-components: `Popover.Trigger`, `Popover.Content`
+
+**Props:** `openWith?: 'click'`, `dismissible`, `role?: 'dialog'`
+
+## Tags
+
+### Tag
+**Props:** `TagProps` | bp
+- `children: ReactNode` (required)
+- `color: TagColor = 'primary'`
+- `onClose?: MouseEventHandler` — shows close button
+- `isLoading?: boolean`
+
+```tsx
+<Tag color="primary" onClose={remove}>React</Tag>
+```
+
+### StatusBadge
+**Props:** `StatusBadgeProps` | bp
+- `children?: ReactNode`
+- `color: StatusBadgeColor = 'neutral'`
+- `variant: 'filled' | 'filled-bordered' | 'bordered' = 'filled'`
+- `status?: 'danger' | 'success' | 'warning' | 'inactive'`
+- `icon?: string`
+
+```tsx
+<StatusBadge color="success" status="success" icon="check">Active</StatusBadge>
+```
+
+## Misc
+
+### Separator
+**Props:** `SeparatorProps` | bp
+- `axis: 'horizontal' | 'vertical' = 'horizontal'`
+- `color: 'primary' | 'secondary' | 'accent' = 'primary'`
+- `variant?: 'dotted' | 'dot-only'`
+- `thickness?: 1 | 2`
+- `spacing?: SeparatorSpacing`
+
+---
+
+# Community Components
+
+Import from `@tedi-design-system/react/community`. These are community-contributed, have relaxed review standards, and are **not recommended** when a TEDI-Ready equivalent exists.
+
+## Cards
+
+### Accordion
+- `openItem?: string[]`, `onToggleItem?: (id: string) => void`, `gutter?: VerticalSpacingSize`
+- Sub-components: AccordionItem, AccordionItemHeader, AccordionItemContent
+
+### Card
+- `border?: CardBorderType`, `borderless?: boolean`, `padding?: number`, `background?: CardBackground`
+- Sub-components: Card.Header, Card.Content, Card.Notification
+
+## Buttons
+
+### Button — **DEPRECATED** (use TEDI-Ready Button)
+### Anchor — **DEPRECATED** (use TEDI-Ready Link)
+
+## Form
+
+### Check (Checkbox) — **DEPRECATED** (use TEDI-Ready Checkbox)
+### Radio — **DEPRECATED** (use TEDI-Ready Radio via ChoiceGroup)
+
+### Select
+- `id: string`, `options`, `value?`, `defaultValue?`, `onChange?`
+- `multiple?: boolean`, `async?: boolean`, `isSearchable?: boolean`, `isClearable?: boolean`
+
+### Toggle
+- `ariaLabel: string`, `label?`, `checked?`, `defaultChecked?`, `onChange?`
+- `size?: 'medium' | 'large'`, `color?: 'default' | 'alternative'`, `icon?`, `disabled?`
+
+### ChoiceGroup
+- `id: string`, `items: ChoiceGroupItemProps[]`, `inputType?: 'radio' | 'checkbox'`
+- `type?: 'light' | 'selector' | 'filter' | 'default'`, `value?`, `onChange?`
+
+### FileUpload
+- `id: string`, `name: string`, `accept?`, `multiple?`, `maxSize?`
+- `files?`, `defaultFiles?`, `onChange?`, `onDelete?`
+
+### TextEditor (Draft.js)
+- `id: string`, `defaultValue?`, `onChange?`, `placeholder?`
+- `inlineStyleControls?: string[]`, `blockStyleControls?: string[]`
+
+### HiddenField (toggle-to-edit)
+- `fieldType: 'textfield' | 'select' | 'datetime'`
+- `fieldOptions: TextFieldProps | SelectProps | DateTimePickerProps`
+- `content: ReactNode`
+
+### DateTimePicker
+- Date/time picker using MUI x-date-pickers
+
+## Navigation
+
+### Stepper
+- `activeStep?`, `defaultActiveStep?: number`, `onActiveStepChange?`
+- `allowStepLabelClick?: boolean`, `ariaLabel: string`, `card?: CardProps | boolean`
+
+### Tabs
+- `currentTab?: string`, `defaultCurrentTab?`, `onTabChange?`
+- Sub-components: Tabs.Nav, Tabs.NavItem, Tabs.Item
+
+### TableOfContents
+- `items: TableOfContentsItemProps[]`, `heading?`, `open?`, `defaultOpen?`
+- `showIcons?: boolean`, `breakToMobile?: boolean`
+
+## Overlay
+
+### Dropdown — **DEPRECATED** (use TEDI-Ready Dropdown)
+
+### Modal
+- `size?: 12 | 10 | 8 | 6`, `position?: 'center' | 'right' | 'bottom'`
+- `lockScroll?: boolean`, `trapFocus?: boolean`, `returnFocus?: boolean`
+- Sub-components: ModalProvider, ModalTrigger, ModalCloser
+
+### Tooltip — **DEPRECATED** (use TEDI-Ready Tooltip)
+
+### Feedback (modal-based)
+- `triggerProps?: ButtonProps`, `fixedTrigger?: 'both' | 'desktop' | 'mobile'`
+
+## Tags
+
+### Tag — **DEPRECATED** (use TEDI-Ready Tag)
+
+### Status
+- `type: 'error' | 'success' | 'inactive' | 'warning'`
+- `tooltipContent?: ReactNode`
+
+## Table
+
+### Table (TanStack React Table wrapper)
+- `data: TData[]`, `columns: ColumnDef[]`
+- `pagination?`, `sorting?`, `rowSelection?`, `columnPinning?`
+- `onPaginationChange?`, `onSortingChange?`, `onRowSelectionChange?`
+- `hidePagination?: boolean`, `size?: 'medium'`
+
+## Layout
+
+### Header
+Comprehensive header with sub-components: HeaderContent, HeaderActions, HeaderNavigation, HeaderLanguage, HeaderRole, HeaderSettings, HeaderNotifications, HeaderLogo
+
+## Misc
+
+### Placeholder (empty state)
+- `icon?: string | IconProps | ReactNode`, `cardProps?`, `isNested?: boolean`
+
+### VerticalStepper
+- `isCompact?: boolean`
+- Sub-components: StepItem, SubItem
+
+### VerticalProgress
+- `children: ReactNode`, `onItemOpen: (index: number) => void`
+
+### ToggleOpen
+- `openText: string`, `closeText: string`, `isOpen: boolean`
+
+### Map Components
+14 specialized components for map UI interactions (BaseMapSelection, Legend, MapLayer, Directions, Timeline, etc.)
diff --git a/skills/tedi-react/references/forms.md b/skills/tedi-react/references/forms.md
new file mode 100644
index 000000000..cedd7c869
--- /dev/null
+++ b/skills/tedi-react/references/forms.md
@@ -0,0 +1,223 @@
+# Form Controls
+
+TEDI form controls support both **controlled** and **uncontrolled** modes, following standard React patterns.
+
+## Available Form Controls
+
+| Component | Value Type | Key Features |
+|-----------|-----------|--------------|
+| TextField | `string` | Icon, clearable, size variants |
+| TextArea | `string` | Character limit counter |
+| NumberField | `number` | Min/max, step, suffix, increment buttons |
+| Select | `ISelectOption \| ISelectOption[] \| null` | Async, multi-select, searchable |
+| Checkbox | `boolean` (via onChange) | Indeterminate state |
+| Radio | `boolean` (via onChange) | Used in ChoiceGroup |
+| ChoiceGroup | `ChoiceGroupValue` | Radio/checkbox groups, segmented variant |
+| Search | `string` | Search button, onSearch callback |
+| FileUpload | `FileUploadFile[]` | Multi-file, validation, loading states |
+| FileDropzone | `FileUploadFile[]` | Drag-and-drop |
+
+## Controlled vs Uncontrolled
+
+```tsx
+// Controlled — you manage state
+const [value, setValue] = useState('');
+<TextField id="name" label="Name" value={value} onChange={setValue} />
+
+// Uncontrolled — component manages state internally
+<TextField id="name" label="Name" defaultValue="John" />
+```
+
+**Rule:** Every form component must accept both `value` (controlled) and `defaultValue` (uncontrolled).
+
+## TextField
+
+```tsx
+import { TextField } from '@tedi-design-system/react/tedi';
+
+<TextField
+  id="email"
+  label="Email"
+  type="email"
+  icon="mail"
+  isClearable
+  value={email}
+  onChange={setEmail}
+  helper={{ type: 'error', text: 'Invalid email' }}
+  required
+/>
+```
+
+Key props: `icon`, `isClearable`, `onClear`, `size` ('default' | 'small' | 'large'), `helper` (FeedbackTextProps), `hideLabel`, `readOnly`.
+
+## Select
+
+```tsx
+import { Select } from '@tedi-design-system/react/tedi';
+
+// Single select
+<Select
+  id="country"
+  label="Country"
+  options={[
+    { label: 'Estonia', value: 'ee' },
+    { label: 'Finland', value: 'fi' },
+  ]}
+  value={selected}
+  onChange={setSelected}
+  isClearable
+  isSearchable
+/>
+
+// Multi-select
+<Select
+  id="tags"
+  label="Tags"
+  options={tagOptions}
+  multiple
+  value={selectedTags}
+  onChange={setSelectedTags}
+  tagsDirection="stack"
+/>
+
+// Async select
+<Select
+  id="search"
+  label="Search users"
+  async
+  loadOptions={(input, callback) => {
+    fetchUsers(input).then(callback);
+  }}
+/>
+```
+
+## NumberField
+
+```tsx
+import { NumberField } from '@tedi-design-system/react/tedi';
+
+<NumberField
+  id="quantity"
+  label="Quantity"
+  value={qty}
+  onChange={setQty}
+  min={0}
+  max={100}
+  step={1}
+  suffix="pcs"
+/>
+```
+
+## Checkbox & Radio
+
+```tsx
+import { Checkbox, Radio, ChoiceGroup } from '@tedi-design-system/react/tedi';
+
+// Single checkbox
+<Checkbox
+  id="agree"
+  label="I agree to terms"
+  value="agree"
+  checked={agreed}
+  onChange={(val, checked) => setAgreed(checked)}
+/>
+
+// Checkbox with indeterminate
+<Checkbox id="all" label="Select all" value="all" indeterminate={someSelected} />
+
+// Choice group (radio)
+<ChoiceGroup
+  id="size"
+  name="size"
+  label="Size"
+  inputType="radio"
+  items={[
+    { id: 'sm', label: 'Small', value: 'sm' },
+    { id: 'md', label: 'Medium', value: 'md' },
+    { id: 'lg', label: 'Large', value: 'lg' },
+  ]}
+  value={size}
+  onChange={setSize}
+/>
+
+// Segmented choice group
+<ChoiceGroup
+  id="view"
+  name="view"
+  label="View"
+  variant="segmented"
+  layout="segmented"
+  items={viewOptions}
+  value={view}
+  onChange={setView}
+/>
+```
+
+## Validation & Helper Text
+
+All form controls accept a `helper` prop for feedback:
+
+```tsx
+<TextField
+  id="email"
+  label="Email"
+  invalid={!!error}
+  helper={error ? { type: 'error', text: error } : { type: 'hint', text: 'Enter your work email' }}
+/>
+```
+
+Helper types: `'hint'`, `'error'`, `'valid'`.
+
+Multiple helpers:
+```tsx
+<TextField
+  id="password"
+  label="Password"
+  helper={[
+    { type: 'hint', text: 'At least 8 characters' },
+    { type: 'error', text: 'Password is too short' },
+  ]}
+/>
+```
+
+## File Upload
+
+```tsx
+import { FileUpload, FileDropzone } from '@tedi-design-system/react/tedi';
+
+// Button-based upload
+<FileUpload
+  id="docs"
+  name="documents"
+  label="Upload documents"
+  accept=".pdf,.doc"
+  multiple
+  maxSize={5 * 1024 * 1024}
+  files={files}
+  onChange={setFiles}
+  onDelete={handleDelete}
+/>
+
+// Drag-and-drop
+<FileDropzone
+  label="Drop files here"
+  accept=".pdf,.doc"
+  multiple
+  maxSize={10 * 1024 * 1024}
+/>
+```
+
+## Event Handler Conventions
+
+- **Text inputs:** `onChange?: (value: string) => void` + `onChangeEvent?: React.ChangeEventHandler`
+- **Choice inputs:** `onChange?: (value: string, checked: boolean) => void`
+- **Select:** `onChange?: (value: ISelectOption | ISelectOption[] | null) => void`
+- **NumberField:** `onChange?: (value: number) => void`
+
+## Disabled State
+
+```tsx
+<TextField id="name" label="Name" disabled />
+<Select id="country" label="Country" disabled />
+<Checkbox id="agree" label="Agree" value="agree" disabled />
+```
diff --git a/skills/tedi-react/references/theming.md b/skills/tedi-react/references/theming.md
new file mode 100644
index 000000000..0974afe33
--- /dev/null
+++ b/skills/tedi-react/references/theming.md
@@ -0,0 +1,108 @@
+# Theming
+
+TEDI uses design tokens from `@tedi-design-system/core` exposed as CSS custom properties. Components use CSS Modules with BEM naming and the `tedi-` prefix.
+
+## Setup
+
+Import TEDI styles:
+
+```tsx
+// In your entry file
+import '@tedi-design-system/react/index.css';
+```
+
+Or in SCSS:
+```scss
+@use '@tedi-design-system/core/scss' as tedi;
+```
+
+Wrap your app with `ThemeProvider`:
+
+```tsx
+import { ThemeProvider } from '@tedi-design-system/react/tedi';
+
+<ThemeProvider defaultTheme="default">
+  <App />
+</ThemeProvider>
+```
+
+## Theme Switching
+
+Themes are applied as a CSS class on `<html>`: `tedi-theme--default`, `tedi-theme--dark`.
+
+The ThemeProvider manages theme state and persistence (via cookie `tedi-theme`).
+
+## Design Tokens
+
+Tokens follow the naming pattern `--tedi-{category}-{name}`:
+
+| Category | Examples |
+|----------|---------|
+| Color | `--tedi-color-primary`, `--tedi-color-bg-default`, `--tedi-color-text-secondary` |
+| Spacing | `--tedi-spacing-1`, `--tedi-spacing-2`, `--tedi-spacing-4` |
+| Typography | `--tedi-font-size-sm`, `--tedi-font-weight-bold`, `--tedi-line-height-default` |
+| Border | `--tedi-border-radius-sm`, `--tedi-border-width-default` |
+| Shadow | `--tedi-shadow-sm`, `--tedi-shadow-md` |
+
+Use tokens in your own SCSS:
+
+```scss
+.my-custom-section {
+  padding: var(--tedi-spacing-4);
+  background-color: var(--tedi-color-bg-default);
+  border-radius: var(--tedi-border-radius-sm);
+}
+```
+
+**Important:** Do NOT use fallback values in `var()`. Write `var(--tedi-spacing-4)`, not `var(--tedi-spacing-4, 16px)`.
+
+## Overriding Component Styles
+
+TEDI components use CSS Modules with BEM naming. The class names are hashed at build time, but the BEM structure is consistent. To override styles, target the BEM classes:
+
+```scss
+// Override button primary color
+.tedi-button--primary {
+  background-color: var(--my-brand-primary);
+}
+```
+
+## Custom Themes
+
+Create a custom theme by defining token values under a theme class:
+
+```scss
+.tedi-theme--my-brand {
+  --tedi-color-primary: #1a73e8;
+  --tedi-color-bg-default: #fafafa;
+  // ... override tokens as needed
+}
+```
+
+## StyleProvider
+
+The `StyleProvider` wraps components that need runtime style injection:
+
+```tsx
+import { StyleProvider } from '@tedi-design-system/react/tedi';
+
+<StyleProvider>
+  <App />
+</StyleProvider>
+```
+
+## Responsive Styles
+
+For responsive breakpoints in SCSS:
+
+```scss
+@use '@tedi-design-system/core/bootstrap-utility/breakpoints' as bp;
+
+.my-component {
+  padding: var(--tedi-spacing-2);
+
+  @include bp.media-breakpoint-up(md) {
+    padding: var(--tedi-spacing-4);
+  }
+}
+```
diff --git a/src/community/components/tabs/tabs.stories.tsx b/src/community/components/tabs/tabs.stories.tsx
index c120e063f..8b3b481b0 100644
--- a/src/community/components/tabs/tabs.stories.tsx
+++ b/src/community/components/tabs/tabs.stories.tsx
@@ -8,6 +8,11 @@ const meta: Meta<typeof Tabs> = {
   component: Tabs,
   title: 'Community/Tabs',
   subcomponents: { TabsItem } as never,
+  parameters: {
+    status: {
+      type: ['deprecated', 'ExistsInTediReady'],
+    },
+  },
 };
 
 export default meta;
diff --git a/src/tedi/components/misc/scroll-fade/scroll-fade.tsx b/src/tedi/components/misc/scroll-fade/scroll-fade.tsx
index 9a570bd24..11f043c09 100644
--- a/src/tedi/components/misc/scroll-fade/scroll-fade.tsx
+++ b/src/tedi/components/misc/scroll-fade/scroll-fade.tsx
@@ -1,6 +1,7 @@
 import cn from 'classnames';
-import { forwardRef, useCallback, useState } from 'react';
+import { forwardRef, useCallback } from 'react';
 
+import { useScrollFade } from '../../../helpers';
 import styles from './scroll-fade.module.scss';
 
 export interface ScrollFadeProps {
@@ -47,61 +48,32 @@ export const ScrollFade = forwardRef<HTMLDivElement, ScrollFadeProps>((props, re
     fadeSize = 20,
     fadePosition = 'both',
   } = props;
-  const [fade, setFade] = useState({ top: false, bottom: false });
 
-  const handleFade = useCallback(
-    (scrollTop: number, scrollHeight: number, clientHeight: number) => {
-      const atTop = scrollTop === 0;
-      const atBottom = Math.abs(scrollHeight - scrollTop - clientHeight) <= 1;
-
-      let fadeTop = true;
-      let fadeBottom = true;
-
-      if (atTop) {
-        fadeTop = false;
-        onScrollToTop?.();
-      }
-
-      if (atBottom) {
-        fadeBottom = false;
-        onScrollToBottom?.();
-      }
-
-      setFade({ top: fadeTop, bottom: fadeBottom });
-    },
-    [onScrollToTop, onScrollToBottom]
-  );
-
-  const onScroll = useCallback(
-    (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
-      const { scrollTop, scrollHeight, clientHeight } = e.target as HTMLDivElement;
-      handleFade(scrollTop, scrollHeight, clientHeight);
-    },
-    [handleFade]
-  );
+  const { scrollRef, canScrollStart, canScrollEnd, handleScroll } = useScrollFade({
+    direction: 'vertical',
+    onScrollToStart: onScrollToTop,
+    onScrollToEnd: onScrollToBottom,
+  });
 
-  const callbackRef = useCallback(
+  const mergedRef = useCallback(
     (node: HTMLDivElement | null) => {
+      scrollRef(node);
       if (typeof ref === 'function') {
         ref(node);
       } else if (ref) {
         ref.current = node;
       }
-
-      if (node) {
-        handleFade(node.scrollTop, node.scrollHeight, node.clientHeight);
-      }
     },
-    [handleFade, ref]
+    [scrollRef, ref]
   );
 
+  const showStartFade = canScrollStart && (fadePosition === 'both' || fadePosition === 'top');
+  const showEndFade = canScrollEnd && (fadePosition === 'both' || fadePosition === 'bottom');
+
   const ScrollFadeBEM = cn(
     styles['tedi-scroll-fade'],
-    { [styles[`tedi-scroll-fade--top-${fadeSize}`]]: fade.top && (fadePosition === 'both' || fadePosition === 'top') },
-    {
-      [styles[`tedi-scroll-fade--bottom-${fadeSize}`]]:
-        fade.bottom && (fadePosition === 'both' || fadePosition === 'bottom'),
-    },
+    { [styles[`tedi-scroll-fade--top-${fadeSize}`]]: showStartFade },
+    { [styles[`tedi-scroll-fade--bottom-${fadeSize}`]]: showEndFade },
     className
   );
 
@@ -111,7 +83,7 @@ export const ScrollFade = forwardRef<HTMLDivElement, ScrollFadeProps>((props, re
 
   return (
     <div data-name="scroll-fade" className={ScrollFadeBEM}>
-      <div ref={callbackRef} onScroll={onScroll} className={ScrollFadeInnerBEM} tabIndex={0}>
+      <div ref={mergedRef} onScroll={handleScroll} className={ScrollFadeInnerBEM} tabIndex={0}>
         {children}
       </div>
     </div>
diff --git a/src/tedi/components/navigation/tabs/index.ts b/src/tedi/components/navigation/tabs/index.ts
new file mode 100644
index 000000000..f2a4981c8
--- /dev/null
+++ b/src/tedi/components/navigation/tabs/index.ts
@@ -0,0 +1,5 @@
+export * from './tabs';
+export * from './tabs-context';
+export * from './tabs-list/tabs-list';
+export * from './tabs-trigger/tabs-trigger';
+export * from './tabs-content/tabs-content';
diff --git a/src/tedi/components/navigation/tabs/tabs-content/tabs-content.tsx b/src/tedi/components/navigation/tabs/tabs-content/tabs-content.tsx
new file mode 100644
index 000000000..cff74193c
--- /dev/null
+++ b/src/tedi/components/navigation/tabs/tabs-content/tabs-content.tsx
@@ -0,0 +1,47 @@
+import cn from 'classnames';
+import React from 'react';
+
+import styles from '../tabs.module.scss';
+import { useTabsContext } from '../tabs-context';
+
+export interface TabsContentProps {
+  /**
+   * Unique identifier matching the corresponding TabsTrigger id.
+   * When provided, content is only shown when this tab is active.
+   * When omitted, content is always rendered (useful for router outlets).
+   */
+  id?: string;
+  /**
+   * Tab panel content
+   */
+  children: React.ReactNode;
+  /**
+   * Additional class name(s)
+   */
+  className?: string;
+}
+
+export const TabsContent = (props: TabsContentProps) => {
+  const { id, children, className } = props;
+  const { currentTab } = useTabsContext();
+
+  if (id && currentTab !== id) {
+    return null;
+  }
+
+  return (
+    <div
+      data-name="tabs-content"
+      id={id ? `${id}-panel` : undefined}
+      role="tabpanel"
+      aria-labelledby={id ?? undefined}
+      className={cn(styles['tedi-tabs__content'], className)}
+    >
+      {children}
+    </div>
+  );
+};
+
+TabsContent.displayName = 'TabsContent';
+
+export default TabsContent;
diff --git a/src/tedi/components/navigation/tabs/tabs-context.tsx b/src/tedi/components/navigation/tabs/tabs-context.tsx
new file mode 100644
index 000000000..c762152fd
--- /dev/null
+++ b/src/tedi/components/navigation/tabs/tabs-context.tsx
@@ -0,0 +1,16 @@
+import React, { useContext } from 'react';
+
+export type TabsContextValue = {
+  currentTab: string;
+  setCurrentTab: (id: string) => void;
+};
+
+export const TabsContext = React.createContext<TabsContextValue | null>(null);
+
+export const useTabsContext = () => {
+  const ctx = useContext(TabsContext);
+  if (!ctx) {
+    throw new Error('Tabs components must be used within <Tabs />');
+  }
+  return ctx;
+};
diff --git a/src/tedi/components/navigation/tabs/tabs-helpers.ts b/src/tedi/components/navigation/tabs/tabs-helpers.ts
new file mode 100644
index 000000000..5307c7307
--- /dev/null
+++ b/src/tedi/components/navigation/tabs/tabs-helpers.ts
@@ -0,0 +1,43 @@
+/**
+ * Navigates to a sibling tab in the tablist using ArrowLeft/ArrowRight/Home/End keys.
+ * Returns the target tab element if navigation occurred, or null otherwise.
+ */
+export const navigateTablist = (e: React.KeyboardEvent<HTMLButtonElement>): HTMLButtonElement | null => {
+  if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key !== 'Home' && e.key !== 'End') {
+    return null;
+  }
+
+  const tablist = e.currentTarget.closest('[role="tablist"]');
+  if (!tablist) return null;
+
+  const tabs = Array.from(tablist.querySelectorAll<HTMLButtonElement>('[role="tab"]:not([disabled])')).filter(
+    (tab) => getComputedStyle(tab).display !== 'none'
+  );
+  const currentIndex = tabs.indexOf(e.currentTarget);
+  if (tabs.length === 0 || currentIndex === -1) return null;
+  let newIndex = -1;
+
+  switch (e.key) {
+    case 'ArrowLeft':
+      newIndex = currentIndex === 0 ? tabs.length - 1 : currentIndex - 1;
+      break;
+    case 'ArrowRight':
+      newIndex = currentIndex === tabs.length - 1 ? 0 : currentIndex + 1;
+      break;
+    case 'Home':
+      newIndex = 0;
+      break;
+    case 'End':
+      newIndex = tabs.length - 1;
+      break;
+  }
+
+  if (newIndex !== -1) {
+    e.preventDefault();
+    tabs[newIndex].focus();
+    tabs[newIndex].scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    return tabs[newIndex];
+  }
+
+  return null;
+};
diff --git a/src/tedi/components/navigation/tabs/tabs-list/tabs-list.tsx b/src/tedi/components/navigation/tabs/tabs-list/tabs-list.tsx
new file mode 100644
index 000000000..710e37111
--- /dev/null
+++ b/src/tedi/components/navigation/tabs/tabs-list/tabs-list.tsx
@@ -0,0 +1,202 @@
+import cn from 'classnames';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+import { useScrollFade } from '../../../../helpers';
+import { useLabels } from '../../../../providers/label-provider';
+import { Icon } from '../../../base/icon/icon';
+import Print, { PrintProps } from '../../../misc/print/print';
+import { Dropdown } from '../../../overlays/dropdown/dropdown';
+import styles from '../tabs.module.scss';
+import { useTabsContext } from '../tabs-context';
+
+export interface TabsListProps {
+  /**
+   * Tab trigger elements
+   */
+  children: React.ReactNode;
+  /**
+   * Additional class name(s)
+   */
+  className?: string;
+  /**
+   * Accessible label for the tablist
+   */
+  'aria-label'?: string;
+  /**
+   * ID of element labelling the tablist
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Controls visibility when printing
+   * @default 'show'
+   */
+  printVisibility?: PrintProps['visibility'];
+  /**
+   * How to handle tab overflow when tabs don't fit in available space.
+   * - 'dropdown': Shows a dropdown button containing overflowing tabs (default)
+   * - 'scroll': Enables horizontal scrolling with a fade indicator
+   * @default 'dropdown'
+   */
+  overflowMode?: 'dropdown' | 'scroll';
+}
+
+interface OverflowItem {
+  id: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+}
+
+export const TabsList = (props: TabsListProps) => {
+  const {
+    children,
+    className,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    printVisibility = 'show',
+    overflowMode = 'dropdown',
+  } = props;
+
+  const { getLabel } = useLabels();
+  const { currentTab, setCurrentTab } = useTabsContext();
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const isOverflowingRef = useRef(false);
+  const naturalWidthRef = useRef(0);
+
+  isOverflowingRef.current = isOverflowing;
+
+  const {
+    scrollRef,
+    canScrollStart: canScrollLeft,
+    canScrollEnd: canScrollRight,
+    handleScroll,
+  } = useScrollFade({ direction: 'horizontal' });
+
+  const mergedListRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      (listRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      if (overflowMode === 'scroll') {
+        scrollRef(node);
+      }
+    },
+    [overflowMode, scrollRef]
+  );
+
+  const childArray = React.useMemo(() => {
+    return React.Children.toArray(children).filter(React.isValidElement);
+  }, [children]);
+
+  const allItems = React.useMemo(() => {
+    const result: OverflowItem[] = [];
+    childArray.forEach((child) => {
+      const triggerProps = child.props as { id: string; children: React.ReactNode; disabled?: boolean };
+      result.push({ id: triggerProps.id, label: triggerProps.children, disabled: triggerProps.disabled });
+    });
+    return result;
+  }, [childArray]);
+
+  const showMore = overflowMode === 'dropdown' && isOverflowing && allItems.length > 1;
+  const dropdownItems = allItems.filter((item) => item.id !== currentTab);
+
+  const handleMoreSelect = (id: string) => {
+    if (id) {
+      setCurrentTab(id);
+    }
+  };
+
+  // Capture natural width when all tabs are visible and check for overflow synchronously
+  useLayoutEffect(() => {
+    if (overflowMode !== 'dropdown') return;
+    const list = listRef.current;
+    if (!list || isOverflowingRef.current) return;
+
+    naturalWidthRef.current = list.scrollWidth;
+    if (list.scrollWidth > list.clientWidth && list.clientWidth > 0) {
+      setIsOverflowing(true);
+    }
+  }, [overflowMode, isOverflowing, childArray]);
+
+  // ResizeObserver for "dropdown" mode overflow detection
+  useEffect(() => {
+    if (overflowMode !== 'dropdown') return;
+    const wrapper = wrapperRef.current;
+    const list = listRef.current;
+    if (!wrapper || !list) return;
+
+    const checkOverflow = () => {
+      if (isOverflowingRef.current) {
+        if (naturalWidthRef.current <= wrapper.clientWidth) {
+          setIsOverflowing(false);
+        }
+      } else {
+        if (list.scrollWidth > list.clientWidth && list.clientWidth > 0) {
+          naturalWidthRef.current = list.scrollWidth;
+          setIsOverflowing(true);
+        }
+      }
+    };
+
+    const ro = new ResizeObserver(checkOverflow);
+    ro.observe(wrapper);
+    return () => ro.disconnect();
+  }, [overflowMode]);
+
+  return (
+    <Print visibility={printVisibility}>
+      <div
+        ref={wrapperRef}
+        className={cn(styles['tedi-tabs__list-wrapper'], {
+          [styles['tedi-tabs__list-wrapper--scroll-fade-left']]: overflowMode === 'scroll' && canScrollLeft,
+          [styles['tedi-tabs__list-wrapper--scroll-fade-right']]: overflowMode === 'scroll' && canScrollRight,
+        })}
+      >
+        <div
+          ref={mergedListRef}
+          data-name="tabs-list"
+          role="tablist"
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
+          className={cn(
+            styles['tedi-tabs__list'],
+            { [styles['tedi-tabs__list--overflow']]: showMore },
+            { [styles['tedi-tabs__list--scroll']]: overflowMode === 'scroll' },
+            className
+          )}
+          onScroll={overflowMode === 'scroll' ? handleScroll : undefined}
+        >
+          {children}
+        </div>
+        {showMore && (
+          <div className={styles['tedi-tabs__more-wrapper']}>
+            <Dropdown placement="bottom-end">
+              <Dropdown.Trigger>
+                <button data-name="tabs-more-btn" type="button" className={styles['tedi-tabs__more-btn']}>
+                  {getLabel('tabs.more')}
+                  <Icon name="expand_more" size={18} />
+                </button>
+              </Dropdown.Trigger>
+              <Dropdown.Content>
+                {dropdownItems.map((item, index) => (
+                  <Dropdown.Item
+                    key={item.id}
+                    index={index}
+                    disabled={item.disabled}
+                    onClick={() => handleMoreSelect(item.id)}
+                  >
+                    {item.label}
+                  </Dropdown.Item>
+                ))}
+              </Dropdown.Content>
+            </Dropdown>
+          </div>
+        )}
+      </div>
+    </Print>
+  );
+};
+
+TabsList.displayName = 'TabsList';
+
+export default TabsList;
diff --git a/src/tedi/components/navigation/tabs/tabs-trigger/tabs-trigger.tsx b/src/tedi/components/navigation/tabs/tabs-trigger/tabs-trigger.tsx
new file mode 100644
index 000000000..2450ce79b
--- /dev/null
+++ b/src/tedi/components/navigation/tabs/tabs-trigger/tabs-trigger.tsx
@@ -0,0 +1,79 @@
+import cn from 'classnames';
+import React from 'react';
+
+import { Icon, IconProps } from '../../../base/icon/icon';
+import styles from '../tabs.module.scss';
+import { useTabsContext } from '../tabs-context';
+import { navigateTablist } from '../tabs-helpers';
+
+export interface TabsTriggerProps {
+  /**
+   * Unique identifier for this tab. Used as the element id and to link to the
+   * corresponding TabsContent panel (aria-controls="{id}-panel").
+   */
+  id: string;
+  /**
+   * Tab label text
+   */
+  children: React.ReactNode;
+  /**
+   * Icon displayed before the label
+   */
+  icon?: IconProps['name'];
+  /**
+   * Whether the tab is disabled
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Additional class name(s)
+   */
+  className?: string;
+}
+
+export const TabsTrigger = (props: TabsTriggerProps) => {
+  const { id, children, icon, disabled = false, className } = props;
+  const { currentTab, setCurrentTab } = useTabsContext();
+  const isSelected = currentTab === id;
+
+  const handleClick = () => {
+    if (!disabled) {
+      setCurrentTab(id);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    const target = navigateTablist(e);
+    if (target) {
+      setCurrentTab(target.id);
+    }
+  };
+
+  return (
+    <button
+      data-name="tabs-trigger"
+      id={id}
+      role="tab"
+      type="button"
+      aria-selected={isSelected}
+      aria-controls={`${id}-panel`}
+      tabIndex={isSelected ? 0 : -1}
+      disabled={disabled}
+      className={cn(
+        styles['tedi-tabs__trigger'],
+        { [styles['tedi-tabs__trigger--selected']]: isSelected },
+        { [styles['tedi-tabs__trigger--disabled']]: disabled },
+        className
+      )}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+    >
+      {icon && <Icon name={icon} size={18} color="inherit" />}
+      {children}
+    </button>
+  );
+};
+
+TabsTrigger.displayName = 'TabsTrigger';
+
+export default TabsTrigger;
diff --git a/src/tedi/components/navigation/tabs/tabs.module.scss b/src/tedi/components/navigation/tabs/tabs.module.scss
new file mode 100644
index 000000000..6edecb75e
--- /dev/null
+++ b/src/tedi/components/navigation/tabs/tabs.module.scss
@@ -0,0 +1,129 @@
+@mixin tab-button-base {
+  --_tab-background: var(--tab-item-default-background);
+  --_tab-color: var(--tab-item-default-text);
+
+  display: inline-flex;
+  gap: var(--tab-inner-spacing);
+  align-items: center;
+  justify-content: center;
+  padding: var(--tab-spacing-y) var(--tab-spacing-x);
+  font-size: var(--body-regular-size);
+  color: var(--_tab-color);
+  white-space: nowrap;
+  cursor: pointer;
+  background: var(--_tab-background);
+  border: none;
+
+  &:hover {
+    --_tab-background: var(--tab-item-hover-background);
+    --_tab-color: var(--tab-item-hover-text);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--borders-02) var(--general-border-brand);
+  }
+
+  &:active {
+    --_tab-background: var(--tab-item-active-background);
+    --_tab-color: var(--tab-item-active-text);
+  }
+}
+
+.tedi-tabs {
+  &__list-wrapper {
+    position: relative;
+    display: flex;
+    background: var(--tab-background);
+    border-top-left-radius: var(--tab-top-radius);
+    border-top-right-radius: var(--tab-top-radius);
+
+    &--scroll-fade-left::before,
+    &--scroll-fade-right::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      z-index: 1;
+      width: 48px;
+      pointer-events: none;
+      content: '';
+    }
+
+    &--scroll-fade-left::before {
+      left: 0;
+      background: linear-gradient(to right, var(--tab-background) 10%, transparent 80%);
+    }
+
+    &--scroll-fade-right::after {
+      right: 0;
+      background: linear-gradient(to left, var(--tab-background) 10%, transparent 80%);
+    }
+  }
+
+  &__list {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+
+    &--overflow {
+      .tedi-tabs__trigger:not(.tedi-tabs__trigger--selected) {
+        display: none;
+      }
+
+      .tedi-tabs__trigger--selected {
+        flex-grow: 1;
+      }
+    }
+
+    &--scroll {
+      overflow-x: auto;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  &__trigger {
+    @include tab-button-base;
+
+    position: relative;
+    text-decoration: none;
+
+    &--selected {
+      --_tab-background: var(--tab-item-selected-background);
+      --_tab-color: var(--tab-item-selected-text);
+
+      font-weight: var(--body-bold-weight);
+
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        content: '';
+        border-top: 3px solid var(--tab-item-selected-border);
+      }
+    }
+
+    &--disabled {
+      pointer-events: none;
+      opacity: 0.4;
+    }
+  }
+
+  &__content {
+    background: var(--tab-item-selected-background);
+  }
+
+  &__more-wrapper {
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  &__more-btn {
+    @include tab-button-base;
+  }
+}
diff --git a/src/tedi/components/navigation/tabs/tabs.spec.tsx b/src/tedi/components/navigation/tabs/tabs.spec.tsx
new file mode 100644
index 000000000..c8098ed35
--- /dev/null
+++ b/src/tedi/components/navigation/tabs/tabs.spec.tsx
@@ -0,0 +1,350 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { Tabs, TabsProps } from './tabs';
+
+jest.mock('../../../providers/label-provider', () => ({
+  useLabels: jest.fn(() => ({
+    getLabel: jest.fn((key: string) => {
+      const labels: Record<string, string> = { 'tabs.more': 'More', close: 'Close' };
+      return labels[key] ?? key;
+    }),
+  })),
+}));
+
+let resizeCallback: (() => void) | null = null;
+
+beforeAll(() => {
+  global.ResizeObserver = jest.fn().mockImplementation((cb: ResizeObserverCallback) => ({
+    observe: jest.fn(() => {
+      resizeCallback = () => cb([], {} as ResizeObserver);
+    }),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(() => {
+      resizeCallback = null;
+    }),
+  }));
+});
+
+const renderTabs = (props?: Partial<TabsProps>) => {
+  return render(
+    <Tabs defaultValue="tab-1" {...props}>
+      <Tabs.List aria-label="Test tabs">
+        <Tabs.Trigger id="tab-1">Tab 1</Tabs.Trigger>
+        <Tabs.Trigger id="tab-2">Tab 2</Tabs.Trigger>
+        <Tabs.Trigger id="tab-3" disabled>
+          Tab 3
+        </Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content id="tab-1">Content 1</Tabs.Content>
+      <Tabs.Content id="tab-2">Content 2</Tabs.Content>
+      <Tabs.Content id="tab-3">Content 3</Tabs.Content>
+    </Tabs>
+  );
+};
+
+const simulateOverflow = () => {
+  const listEl = screen.getByRole('tablist');
+  Object.defineProperty(listEl, 'scrollWidth', { value: 500, configurable: true });
+  Object.defineProperty(listEl, 'clientWidth', { value: 300, configurable: true });
+
+  const wrapper = listEl.parentElement!;
+  Object.defineProperty(wrapper, 'clientWidth', { value: 300, configurable: true });
+
+  act(() => {
+    resizeCallback?.();
+  });
+};
+
+const simulateNoOverflow = () => {
+  const listEl = screen.getByRole('tablist');
+  Object.defineProperty(listEl, 'scrollWidth', { value: 300, configurable: true });
+  Object.defineProperty(listEl, 'clientWidth', { value: 600, configurable: true });
+
+  const wrapper = listEl.parentElement!;
+  Object.defineProperty(wrapper, 'clientWidth', { value: 600, configurable: true });
+
+  act(() => {
+    resizeCallback?.();
+  });
+};
+
+describe('Tabs component', () => {
+  it('renders the tablist with correct role', () => {
+    renderTabs();
+    expect(screen.getByRole('tablist')).toBeInTheDocument();
+  });
+
+  it('renders tab triggers with correct roles', () => {
+    renderTabs();
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs).toHaveLength(3);
+  });
+
+  it('renders the default active tab content', () => {
+    renderTabs();
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+  });
+
+  it('switches tab on click', () => {
+    renderTabs();
+    fireEvent.click(screen.getByText('Tab 2'));
+    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    expect(screen.getByText('Content 2')).toBeInTheDocument();
+  });
+
+  it('sets aria-selected correctly', () => {
+    renderTabs();
+    expect(screen.getByText('Tab 1')).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByText('Tab 2')).toHaveAttribute('aria-selected', 'false');
+
+    fireEvent.click(screen.getByText('Tab 2'));
+    expect(screen.getByText('Tab 1')).toHaveAttribute('aria-selected', 'false');
+    expect(screen.getByText('Tab 2')).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('sets aria-controls on triggers and aria-labelledby on panels', () => {
+    renderTabs();
+    expect(screen.getByText('Tab 1')).toHaveAttribute('aria-controls', 'tab-1-panel');
+    expect(screen.getByRole('tabpanel')).toHaveAttribute('aria-labelledby', 'tab-1');
+  });
+
+  it('manages tabIndex — only selected tab is in tab order', () => {
+    renderTabs();
+    expect(screen.getByText('Tab 1')).toHaveAttribute('tabIndex', '0');
+    expect(screen.getByText('Tab 2')).toHaveAttribute('tabIndex', '-1');
+  });
+
+  it('navigates with ArrowRight key', () => {
+    renderTabs();
+    const tab1 = screen.getByText('Tab 1');
+    fireEvent.keyDown(tab1, { key: 'ArrowRight' });
+    expect(screen.getByText('Tab 2')).toHaveFocus();
+    expect(screen.getByText('Content 2')).toBeInTheDocument();
+  });
+
+  it('navigates with ArrowLeft key and wraps around', () => {
+    renderTabs();
+    const tab1 = screen.getByText('Tab 1');
+    fireEvent.keyDown(tab1, { key: 'ArrowLeft' });
+    expect(screen.getByText('Tab 2')).toHaveFocus();
+  });
+
+  it('navigates with Home and End keys', () => {
+    renderTabs();
+    fireEvent.click(screen.getByText('Tab 2'));
+    const tab2 = screen.getByText('Tab 2');
+
+    fireEvent.keyDown(tab2, { key: 'Home' });
+    expect(screen.getByText('Tab 1')).toHaveFocus();
+
+    fireEvent.keyDown(screen.getByText('Tab 1'), { key: 'End' });
+    expect(screen.getByText('Tab 2')).toHaveFocus();
+  });
+
+  it('does not activate disabled tabs on click', () => {
+    renderTabs();
+    const disabledTab = screen.getByText('Tab 3');
+    expect(disabledTab).toBeDisabled();
+    fireEvent.click(disabledTab);
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+    expect(screen.queryByText('Content 3')).not.toBeInTheDocument();
+  });
+
+  it('works in controlled mode', () => {
+    const onChange = jest.fn();
+    const { rerender } = render(
+      <Tabs value="tab-1" onChange={onChange}>
+        <Tabs.List aria-label="Test tabs">
+          <Tabs.Trigger id="tab-1">Tab 1</Tabs.Trigger>
+          <Tabs.Trigger id="tab-2">Tab 2</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content id="tab-1">Content 1</Tabs.Content>
+        <Tabs.Content id="tab-2">Content 2</Tabs.Content>
+      </Tabs>
+    );
+
+    fireEvent.click(screen.getByText('Tab 2'));
+    expect(onChange).toHaveBeenCalledWith('tab-2');
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+
+    rerender(
+      <Tabs value="tab-2" onChange={onChange}>
+        <Tabs.List aria-label="Test tabs">
+          <Tabs.Trigger id="tab-1">Tab 1</Tabs.Trigger>
+          <Tabs.Trigger id="tab-2">Tab 2</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content id="tab-1">Content 1</Tabs.Content>
+        <Tabs.Content id="tab-2">Content 2</Tabs.Content>
+      </Tabs>
+    );
+
+    expect(screen.getByText('Content 2')).toBeInTheDocument();
+  });
+
+  it('renders with custom className', () => {
+    renderTabs({ className: 'custom-class' });
+    const container = screen.getByRole('tablist').closest('[data-name="tabs"]');
+    expect(container).toHaveClass('custom-class');
+  });
+
+  it('renders tabpanel with correct id', () => {
+    renderTabs();
+    expect(screen.getByRole('tabpanel')).toHaveAttribute('id', 'tab-1-panel');
+  });
+
+  it('applies data-name attributes', () => {
+    renderTabs();
+    expect(screen.getByRole('tablist')).toHaveAttribute('data-name', 'tabs-list');
+    expect(screen.getByRole('tabpanel')).toHaveAttribute('data-name', 'tabs-content');
+  });
+
+  it('does not set tabIndex on tabpanel', () => {
+    renderTabs();
+    expect(screen.getByRole('tabpanel')).not.toHaveAttribute('tabIndex');
+  });
+
+  it('does not render "More" button when tabs do not overflow', () => {
+    renderTabs();
+    expect(screen.queryByText('More')).not.toBeInTheDocument();
+  });
+});
+
+describe('Tabs overflow (more mode)', () => {
+  it('renders "More" button when tabs overflow', () => {
+    renderTabs();
+    simulateOverflow();
+    expect(screen.getByText('More')).toBeInTheDocument();
+  });
+
+  it('does not render "More" button when there is only one tab', () => {
+    render(
+      <Tabs defaultValue="tab-1">
+        <Tabs.List aria-label="Single tab">
+          <Tabs.Trigger id="tab-1">Only Tab</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content id="tab-1">Content</Tabs.Content>
+      </Tabs>
+    );
+
+    const listEl = screen.getByRole('tablist');
+    Object.defineProperty(listEl, 'scrollWidth', { value: 500, configurable: true });
+    Object.defineProperty(listEl, 'clientWidth', { value: 300, configurable: true });
+    const wrapper = listEl.parentElement!;
+    Object.defineProperty(wrapper, 'clientWidth', { value: 300, configurable: true });
+    act(() => {
+      resizeCallback?.();
+    });
+
+    expect(screen.queryByText('More')).not.toBeInTheDocument();
+  });
+
+  it('opens dropdown with non-selected tabs', () => {
+    renderTabs();
+    simulateOverflow();
+    fireEvent.click(screen.getByText('More'));
+
+    const menu = screen.getByRole('menu');
+    const menuItems = menu.querySelectorAll('[role="menuitem"]');
+    expect(menuItems).toHaveLength(2);
+  });
+
+  it('closes dropdown on toggle', () => {
+    renderTabs();
+    simulateOverflow();
+    const moreBtn = screen.getByText('More');
+
+    fireEvent.click(moreBtn);
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+
+    fireEvent.click(moreBtn);
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  });
+
+  it('selects a tab from dropdown and closes it', () => {
+    renderTabs();
+    simulateOverflow();
+    fireEvent.click(screen.getByText('More'));
+
+    const menuItems = screen.getAllByRole('menuitem');
+    const tab2Item = menuItems.find((item) => item.textContent === 'Tab 2');
+    fireEvent.click(tab2Item!);
+
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    expect(screen.getByText('Content 2')).toBeInTheDocument();
+  });
+
+  it('closes dropdown on Escape key', () => {
+    renderTabs();
+    simulateOverflow();
+    fireEvent.click(screen.getByText('More'));
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.keyDown(screen.getByRole('menu'), { key: 'Escape' });
+    });
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  });
+
+  it('removes overflow when container grows', () => {
+    renderTabs();
+    simulateOverflow();
+    expect(screen.getByText('More')).toBeInTheDocument();
+
+    simulateNoOverflow();
+    expect(screen.queryByText('More')).not.toBeInTheDocument();
+  });
+});
+
+describe('Tabs overflow (scroll mode)', () => {
+  it('renders with scroll mode', () => {
+    render(
+      <Tabs defaultValue="tab-1">
+        <Tabs.List aria-label="Scroll tabs" overflowMode="scroll">
+          <Tabs.Trigger id="tab-1">Tab 1</Tabs.Trigger>
+          <Tabs.Trigger id="tab-2">Tab 2</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content id="tab-1">Content 1</Tabs.Content>
+        <Tabs.Content id="tab-2">Content 2</Tabs.Content>
+      </Tabs>
+    );
+
+    const tablist = screen.getByRole('tablist');
+    expect(tablist).toBeInTheDocument();
+    expect(screen.queryByText('More')).not.toBeInTheDocument();
+  });
+});
+
+describe('TabsContent without id', () => {
+  it('always renders when id is omitted', () => {
+    render(
+      <Tabs defaultValue="tab-1">
+        <Tabs.List aria-label="Router tabs">
+          <Tabs.Trigger id="tab-1">Tab 1</Tabs.Trigger>
+          <Tabs.Trigger id="tab-2">Tab 2</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content>Always visible</Tabs.Content>
+      </Tabs>
+    );
+
+    expect(screen.getByText('Always visible')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('Tab 2'));
+    expect(screen.getByText('Always visible')).toBeInTheDocument();
+  });
+
+  it('does not set id or aria-labelledby when id is omitted', () => {
+    render(
+      <Tabs defaultValue="tab-1">
+        <Tabs.List aria-label="Router tabs">
+          <Tabs.Trigger id="tab-1">Tab 1</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content>Router outlet</Tabs.Content>
+      </Tabs>
+    );
+
+    const panel = screen.getByRole('tabpanel');
+    expect(panel).not.toHaveAttribute('id');
+    expect(panel).not.toHaveAttribute('aria-labelledby');
+  });
+});
diff --git a/src/tedi/components/navigation/tabs/tabs.stories.tsx b/src/tedi/components/navigation/tabs/tabs.stories.tsx
new file mode 100644
index 000000000..112a2b20f
--- /dev/null
+++ b/src/tedi/components/navigation/tabs/tabs.stories.tsx
@@ -0,0 +1,303 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Text } from '../../base/typography/text/text';
+import { CardContent } from '../../cards/card/card-content/card-content';
+import { Col, Row } from '../../layout/grid';
+import { VerticalSpacing } from '../../layout/vertical-spacing';
+import { StatusBadge } from '../../tags/status-badge/status-badge';
+import { StatusIndicator } from '../../tags/status-indicator/status-indicator';
+import { Tabs, TabsProps } from './tabs';
+import { TabsContext } from './tabs-context';
+import { TabsTrigger } from './tabs-trigger/tabs-trigger';
+
+/**
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.38.59?node-id=3419-38773&m=dev" target="_BLANK">Figma ↗</a><br/>
+ * <a href="https://www.tedi.ee/1ee8444b7/p/9833df-tab" target="_BLANK">Zeroheight ↗</a>
+ */
+
+const meta: Meta<typeof Tabs> = {
+  component: Tabs,
+  title: 'TEDI-Ready/Components/Navigation/Tabs',
+  subcomponents: {
+    'Tabs.List': Tabs.List,
+    'Tabs.Trigger': Tabs.Trigger,
+    'Tabs.Content': Tabs.Content,
+  } as never,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.38.59?node-id=3419-38773&m=dev',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+const contentText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis odio, iaculis quis sodales at, placerat vitae risus. Integer hendrerit ex eget nisl euismod pharetra.';
+
+const stateArray = ['Default', 'Hover', 'Active', 'Focus', 'Selected'];
+
+interface TemplateStateProps extends TabsProps {
+  array: typeof stateArray;
+}
+
+const noop = () => null;
+
+const TemplateColumnWithStates: StoryFn<TemplateStateProps> = (args) => {
+  const { array } = args;
+
+  return (
+    <div className="state-example">
+      {array.map((state, index) => {
+        const triggerId = state === 'Selected' ? 'state-tab' : `${state}-tab`;
+        const currentTab = state === 'Selected' ? 'state-tab' : '';
+
+        return (
+          <Row key={index} className="padding-14-16">
+            <Col width={2} className="display-flex align-items-center">
+              <Text modifiers="bold">{state}</Text>
+            </Col>
+            <Col className="display-flex align-items-center">
+              <TabsContext.Provider value={{ currentTab, setCurrentTab: noop }}>
+                <div role="tablist">
+                  <TabsTrigger id={triggerId}>Health timeline</TabsTrigger>
+                </div>
+              </TabsContext.Provider>
+            </Col>
+          </Row>
+        );
+      })}
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="tab-1">
+      <Tabs.List aria-label="Health tabs">
+        <Tabs.Trigger id="tab-1">Health timeline</Tabs.Trigger>
+        <Tabs.Trigger id="tab-2">Course of diseases</Tabs.Trigger>
+        <Tabs.Trigger id="tab-3">Medication history</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content id="tab-1">
+        <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+          <Text>{contentText}</Text>
+        </CardContent>
+      </Tabs.Content>
+      <Tabs.Content id="tab-2">
+        <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+          <Text>{contentText}</Text>
+        </CardContent>
+      </Tabs.Content>
+      <Tabs.Content id="tab-3">
+        <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+          <Text>{contentText}</Text>
+        </CardContent>
+      </Tabs.Content>
+    </Tabs>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <Tabs defaultValue="tab-1">
+      <Tabs.List aria-label="Tabs with icons">
+        <Tabs.Trigger id="tab-1" icon="table_chart">
+          Table
+        </Tabs.Trigger>
+        <Tabs.Trigger id="tab-2" icon="grid_on">
+          Grid
+        </Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content id="tab-1">
+        <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+          <Text>{contentText}</Text>
+        </CardContent>
+      </Tabs.Content>
+      <Tabs.Content id="tab-2">
+        <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+          <Text>{contentText}</Text>
+        </CardContent>
+      </Tabs.Content>
+    </Tabs>
+  ),
+};
+
+export const WithStatusBadge: Story = {
+  render: () => (
+    <Tabs defaultValue="tab-1">
+      <Tabs.List aria-label="Tabs with status badge">
+        <Tabs.Trigger id="tab-1">
+          Health timeline <StatusBadge color="brand">Submitted</StatusBadge>
+        </Tabs.Trigger>
+        <Tabs.Trigger id="tab-2">
+          <span style={{ position: 'relative' }}>
+            Unread messages&nbsp;
+            <StatusIndicator type="danger" position="top-right" />
+          </span>
+        </Tabs.Trigger>
+        <Tabs.Trigger id="tab-3">Medication history</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content id="tab-1">
+        <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+          <Text>{contentText}</Text>
+        </CardContent>
+      </Tabs.Content>
+      <Tabs.Content id="tab-2">
+        <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+          <Text>{contentText}</Text>
+        </CardContent>
+      </Tabs.Content>
+      <Tabs.Content id="tab-3">
+        <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+          <Text>{contentText}</Text>
+        </CardContent>
+      </Tabs.Content>
+    </Tabs>
+  ),
+};
+
+export const States: StoryObj<TemplateStateProps> = {
+  render: TemplateColumnWithStates,
+  args: {
+    array: stateArray,
+  },
+  parameters: {
+    pseudo: {
+      hover: '#Hover-tab',
+      active: '#Active-tab',
+      focusVisible: '#Focus-tab',
+    },
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [currentTab, setCurrentTab] = useState('tab-1');
+
+    return (
+      <VerticalSpacing>
+        <p>
+          Current tab: <strong>{currentTab}</strong>
+        </p>
+        <Tabs value={currentTab} onChange={setCurrentTab}>
+          <Tabs.List aria-label="Controlled tabs">
+            <Tabs.Trigger id="tab-1">Health timeline</Tabs.Trigger>
+            <Tabs.Trigger id="tab-2">Course of diseases</Tabs.Trigger>
+            <Tabs.Trigger id="tab-3">Medication history</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content id="tab-1">
+            <Text>{contentText}</Text>
+          </Tabs.Content>
+          <Tabs.Content id="tab-2">
+            <Text>{contentText}</Text>
+          </Tabs.Content>
+          <Tabs.Content id="tab-3">
+            <Text>{contentText}</Text>
+          </Tabs.Content>
+        </Tabs>
+      </VerticalSpacing>
+    );
+  },
+};
+
+export const WithDisabledTab: Story = {
+  render: () => (
+    <Tabs defaultValue="tab-1">
+      <Tabs.List aria-label="Tabs with disabled">
+        <Tabs.Trigger id="tab-1">Health timeline</Tabs.Trigger>
+        <Tabs.Trigger id="tab-2">Course of diseases</Tabs.Trigger>
+        <Tabs.Trigger id="tab-3" disabled>
+          Medication history
+        </Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content id="tab-1">
+        <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+          <Text>{contentText}</Text>
+        </CardContent>
+      </Tabs.Content>
+      <Tabs.Content id="tab-2">
+        <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+          <Text>{contentText}</Text>
+        </CardContent>
+      </Tabs.Content>
+      <Tabs.Content id="tab-3">
+        <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+          <Text>{contentText}</Text>
+        </CardContent>
+      </Tabs.Content>
+    </Tabs>
+  ),
+};
+
+export const OverflowBehavior: Story = {
+  render: () => (
+    <VerticalSpacing size={2}>
+      <Text modifiers="bold">Dropdown (default)</Text>
+      <div style={{ maxWidth: 400 }}>
+        <Tabs defaultValue="more-1">
+          <Tabs.List aria-label="Overflow tabs with dropdown">
+            <Tabs.Trigger id="more-1">Health timeline</Tabs.Trigger>
+            <Tabs.Trigger id="more-2">Course of diseases</Tabs.Trigger>
+            <Tabs.Trigger id="more-3">Medication history</Tabs.Trigger>
+            <Tabs.Trigger id="more-4">Declarations of intent</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content id="more-1">
+            <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+              <Text>{contentText}</Text>
+            </CardContent>
+          </Tabs.Content>
+          <Tabs.Content id="more-2">
+            <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+              <Text>{contentText}</Text>
+            </CardContent>
+          </Tabs.Content>
+          <Tabs.Content id="more-3">
+            <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+              <Text>{contentText}</Text>
+            </CardContent>
+          </Tabs.Content>
+          <Tabs.Content id="more-4">
+            <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+              <Text>{contentText}</Text>
+            </CardContent>
+          </Tabs.Content>
+        </Tabs>
+      </div>
+      <Text modifiers="bold">Horizontal scroll</Text>
+      <div style={{ maxWidth: 400 }}>
+        <Tabs defaultValue="scroll-1">
+          <Tabs.List aria-label="Overflow tabs with scroll" overflowMode="scroll">
+            <Tabs.Trigger id="scroll-1">Health timeline</Tabs.Trigger>
+            <Tabs.Trigger id="scroll-2">Course of diseases</Tabs.Trigger>
+            <Tabs.Trigger id="scroll-3">Medication history</Tabs.Trigger>
+            <Tabs.Trigger id="scroll-4">Declarations of intent</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content id="scroll-1">
+            <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+              <Text>{contentText}</Text>
+            </CardContent>
+          </Tabs.Content>
+          <Tabs.Content id="scroll-2">
+            <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+              <Text>{contentText}</Text>
+            </CardContent>
+          </Tabs.Content>
+          <Tabs.Content id="scroll-3">
+            <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+              <Text>{contentText}</Text>
+            </CardContent>
+          </Tabs.Content>
+          <Tabs.Content id="scroll-4">
+            <CardContent padding={{ vertical: 1.5, horizontal: 1 }}>
+              <Text>{contentText}</Text>
+            </CardContent>
+          </Tabs.Content>
+        </Tabs>
+      </div>
+    </VerticalSpacing>
+  ),
+};
diff --git a/src/tedi/components/navigation/tabs/tabs.tsx b/src/tedi/components/navigation/tabs/tabs.tsx
new file mode 100644
index 000000000..c5703623d
--- /dev/null
+++ b/src/tedi/components/navigation/tabs/tabs.tsx
@@ -0,0 +1,64 @@
+import cn from 'classnames';
+import React from 'react';
+
+import styles from './tabs.module.scss';
+import { TabsContent } from './tabs-content/tabs-content';
+import { TabsContext } from './tabs-context';
+import { TabsList } from './tabs-list/tabs-list';
+import { TabsTrigger } from './tabs-trigger/tabs-trigger';
+
+export interface TabsProps {
+  /**
+   * Tabs content — should include Tabs.List and Tabs.Content elements
+   */
+  children: React.ReactNode;
+  /**
+   * Controlled active tab id. Use together with onChange.
+   */
+  value?: string;
+  /**
+   * Default active tab id for uncontrolled usage.
+   */
+  defaultValue?: string;
+  /**
+   * Callback fired when the active tab changes
+   */
+  onChange?: (tabId: string) => void;
+  /**
+   * Additional class name(s)
+   */
+  className?: string;
+}
+
+export const Tabs = (props: TabsProps) => {
+  const { children, value: controlledTab, defaultValue, onChange, className } = props;
+  const [uncontrolledTab, setUncontrolledTab] = React.useState(defaultValue || '');
+
+  const currentTab = controlledTab ?? uncontrolledTab;
+
+  const setCurrentTab = React.useCallback(
+    (id: string) => {
+      if (id === currentTab) return;
+      if (controlledTab === undefined) {
+        setUncontrolledTab(id);
+      }
+      onChange?.(id);
+    },
+    [controlledTab, currentTab, onChange]
+  );
+
+  return (
+    <TabsContext.Provider value={{ currentTab, setCurrentTab }}>
+      <div data-name="tabs" className={cn(styles['tedi-tabs'], className)}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  );
+};
+
+Tabs.displayName = 'Tabs';
+Tabs.List = TabsList;
+Tabs.Trigger = TabsTrigger;
+Tabs.Content = TabsContent;
+
+export default Tabs;
diff --git a/src/tedi/components/navigation/tabs/usage-with-router.mdx b/src/tedi/components/navigation/tabs/usage-with-router.mdx
new file mode 100644
index 000000000..157d42873
--- /dev/null
+++ b/src/tedi/components/navigation/tabs/usage-with-router.mdx
@@ -0,0 +1,56 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="TEDI-Ready/Components/Navigation/Tabs/Usage with React Router" />
+
+# Usage with React Router
+
+Use controlled mode (`value`/`onChange`) to sync tabs with the current route.
+Wrap the router outlet in `<Tabs.Content>` without an `id` — it always renders
+and provides the content panel styling.
+
+---
+
+## Example
+
+```tsx
+import { useLocation, useNavigate, Routes, Route } from 'react-router-dom';
+import { Tabs } from '@tedi-design-system/react/tedi';
+
+const tabs = [
+  { id: '/toimingud', label: 'Toimingud' },
+  { id: '/dokumendid', label: 'Dokumendid' },
+  { id: '/esindusõigused', label: 'Esindusõigused' },
+];
+
+function TabsWithRouting() {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  return (
+    <Tabs value={location.pathname} onChange={(path) => navigate(path)}>
+      <Tabs.List aria-label="Toimingud tabs">
+        {tabs.map((tab) => (
+          <Tabs.Trigger key={tab.id} id={tab.id}>
+            {tab.label}
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
+      <Tabs.Content>
+        <Routes>
+          <Route path="/toimingud" element={<p>Toimingud content</p>} />
+          <Route path="/dokumendid" element={<p>Dokumendid content</p>} />
+          <Route path="/esindusõigused" element={<p>Esindusõigused content</p>} />
+        </Routes>
+      </Tabs.Content>
+    </Tabs>
+  );
+}
+```
+
+---
+
+## Key Points
+
+- Use `value` and `onChange` to keep tab state in sync with the URL.
+- `Tabs.Content` without an `id` always renders its children — use it to wrap your router outlet.
+- Each `Tabs.Trigger` `id` should match the route path so the correct tab is highlighted.
diff --git a/src/tedi/components/overlays/dropdown/dropdown-trigger/dropdown-trigger.spec.tsx b/src/tedi/components/overlays/dropdown/dropdown-trigger/dropdown-trigger.spec.tsx
index f169a49f3..e4e14cf4c 100644
--- a/src/tedi/components/overlays/dropdown/dropdown-trigger/dropdown-trigger.spec.tsx
+++ b/src/tedi/components/overlays/dropdown/dropdown-trigger/dropdown-trigger.spec.tsx
@@ -31,7 +31,7 @@ describe('DropdownTrigger', () => {
     expect(mockGetReferenceProps).toHaveBeenCalled();
   });
 
-  it('passes ref to setReference', () => {
+  it('passes merged ref that calls setReference', () => {
     render(
       <DropdownTrigger>
         <button>Open</button>
@@ -39,6 +39,8 @@ describe('DropdownTrigger', () => {
     );
 
     const refCall = mockGetReferenceProps.mock.calls[0][0];
-    expect(refCall.ref).toBe(mockSetReference);
+    const mockNode = document.createElement('div');
+    refCall.ref(mockNode);
+    expect(mockSetReference).toHaveBeenCalledWith(mockNode);
   });
 });
diff --git a/src/tedi/components/overlays/dropdown/dropdown-trigger/dropdown-trigger.tsx b/src/tedi/components/overlays/dropdown/dropdown-trigger/dropdown-trigger.tsx
index d98e32ca1..4c028aed6 100644
--- a/src/tedi/components/overlays/dropdown/dropdown-trigger/dropdown-trigger.tsx
+++ b/src/tedi/components/overlays/dropdown/dropdown-trigger/dropdown-trigger.tsx
@@ -1,3 +1,4 @@
+import { useMergeRefs } from '@floating-ui/react';
 import { cloneElement, ReactElement } from 'react';
 
 import { useDropdownContext } from '../dropdown-context';
@@ -11,11 +12,14 @@ export type DropdownTriggerProps = {
 
 export const DropdownTrigger = ({ children }: DropdownTriggerProps) => {
   const { refs, getReferenceProps } = useDropdownContext();
+  const childRef = (children as ReactElement & { ref?: React.Ref<HTMLElement> }).ref ?? null;
+  const mergedRef = useMergeRefs([refs.setReference, childRef]);
 
   return cloneElement(
     children,
     getReferenceProps({
-      ref: refs.setReference,
+      ...children.props,
+      ref: mergedRef,
     })
   );
 };
diff --git a/src/tedi/components/tags/status-badge/status-badge.module.scss b/src/tedi/components/tags/status-badge/status-badge.module.scss
index 7e20a99d1..99a028971 100644
--- a/src/tedi/components/tags/status-badge/status-badge.module.scss
+++ b/src/tedi/components/tags/status-badge/status-badge.module.scss
@@ -2,7 +2,6 @@
 
 $badge-colors: ('neutral', 'brand', 'accent', 'success', 'danger', 'warning', 'transparent');
 $badge-variants: ('filled', 'filled-bordered', 'bordered');
-$badge-status-colors: ('inactive', 'success', 'danger', 'warning');
 
 :root {
   --status-badge-icon-primary: var(--tedi-blue-700);
@@ -54,33 +53,6 @@ $badge-status-colors: ('inactive', 'success', 'danger', 'warning');
     }
   }
 
-  &--status {
-    &::before {
-      position: absolute;
-      top: -0.25rem;
-      right: -0.25rem;
-      z-index: 1;
-      width: 0.625rem;
-      height: 0.625rem;
-      content: '';
-      border: 1px solid var(--tedi-neutral-100);
-      border-radius: 50%;
-    }
-
-    &.tedi-badge--large::before {
-      top: -0.1875rem;
-      right: -0.1875rem;
-      width: 0.875rem;
-      height: 0.875rem;
-    }
-
-    @each $status in $badge-status-colors {
-      &-#{$status}::before {
-        background-color: var(--status-badge-indicator-#{$status});
-      }
-    }
-  }
-
   &__icon-only {
     display: inline-flex;
     align-items: center;
diff --git a/src/tedi/components/tags/status-badge/status-badge.spec.tsx b/src/tedi/components/tags/status-badge/status-badge.spec.tsx
index 8b680e754..a5f1a9a33 100644
--- a/src/tedi/components/tags/status-badge/status-badge.spec.tsx
+++ b/src/tedi/components/tags/status-badge/status-badge.spec.tsx
@@ -48,9 +48,9 @@ describe('StatusBadge component', () => {
         Warning Badge
       </StatusBadge>
     );
-    const badge = container.querySelector('.tedi-status-badge');
-    expect(badge).toHaveClass('tedi-status-badge--status');
-    expect(badge).toHaveClass('tedi-status-badge--status-warning');
+    const indicator = container.querySelector('[data-name="status-indicator"]');
+    expect(indicator).toBeInTheDocument();
+    expect(indicator).toHaveClass('tedi-status-indicator--warning');
   });
 
   it('renders with icon only', () => {
@@ -112,8 +112,10 @@ describe('StatusBadge component', () => {
     const { container } = render(<StatusBadge {...props}>All Props Badge</StatusBadge>);
     const badge = container.querySelector('.tedi-status-badge');
     expect(badge).toHaveClass('tedi-status-badge--variant-filled-bordered');
-    expect(badge).toHaveClass('tedi-status-badge--status-success');
     expect(badge).toHaveClass('tedi-status-badge--large');
+    const indicator = container.querySelector('[data-name="status-indicator"]');
+    expect(indicator).toBeInTheDocument();
+    expect(indicator).toHaveClass('tedi-status-indicator--success');
     expect(badge).toHaveClass('custom-class');
     expect(badge).toHaveTextContent('All Props Badge');
     expect(badge).toHaveAttribute('title', 'Success Badge');
diff --git a/src/tedi/components/tags/status-badge/status-badge.tsx b/src/tedi/components/tags/status-badge/status-badge.tsx
index a2ee589cd..ef8fb5282 100644
--- a/src/tedi/components/tags/status-badge/status-badge.tsx
+++ b/src/tedi/components/tags/status-badge/status-badge.tsx
@@ -2,6 +2,7 @@ import cn from 'classnames';
 
 import { BreakpointSupport, useBreakpointProps } from '../../../helpers';
 import { Icon } from '../../base/icon/icon';
+import { StatusIndicator } from '../status-indicator/status-indicator';
 import styles from './status-badge.module.scss';
 
 export type StatusBadgeColor = 'neutral' | 'brand' | 'accent' | 'success' | 'danger' | 'warning' | 'transparent';
@@ -82,8 +83,6 @@ export const StatusBadge = (props: StatusBadgeProps): JSX.Element => {
     styles['tedi-status-badge'],
     styles[`tedi-status-badge--variant-${variant}`],
     styles[`tedi-status-badge--color-${color}`],
-    status && styles['tedi-status-badge--status'],
-    status && styles[`tedi-status-badge--status-${status}`],
     size === 'large' && styles['tedi-status-badge--large'],
     icon && !children && styles['tedi-status-badge__icon-only'],
     className
@@ -100,6 +99,7 @@ export const StatusBadge = (props: StatusBadgeProps): JSX.Element => {
       aria-live={role ? ariaLive : undefined}
       {...rest}
     >
+      {status && <StatusIndicator type={status} size={size === 'large' ? 'lg' : 'sm'} hasBorder position="top-right" />}
       {icon && <Icon name={icon} color="inherit" size={16} className={styles[`tedi-status-badge__icon-${color}`]} />}
       {children && <span className={styles['tedi-status-badge__inner-text']}>{children}</span>}
     </BadgeElement>
diff --git a/src/tedi/components/tags/status-indicator/index.ts b/src/tedi/components/tags/status-indicator/index.ts
new file mode 100644
index 000000000..e012d8585
--- /dev/null
+++ b/src/tedi/components/tags/status-indicator/index.ts
@@ -0,0 +1 @@
+export * from './status-indicator';
diff --git a/src/tedi/components/tags/status-indicator/status-indicator.module.scss b/src/tedi/components/tags/status-indicator/status-indicator.module.scss
new file mode 100644
index 000000000..d37a6b7b7
--- /dev/null
+++ b/src/tedi/components/tags/status-indicator/status-indicator.module.scss
@@ -0,0 +1,34 @@
+$indicator-types: ('success', 'danger', 'warning', 'inactive');
+
+.tedi-status-indicator {
+  display: inline-block;
+  flex-shrink: 0;
+  border-radius: 50%;
+
+  &--top-right {
+    position: absolute;
+    top: -0.25rem;
+    right: -0.25rem;
+    z-index: 1;
+  }
+
+  &--sm {
+    width: var(--status-indicator-sm);
+    height: var(--status-indicator-sm);
+  }
+
+  &--lg {
+    width: var(--status-indicator-lg);
+    height: var(--status-indicator-lg);
+  }
+
+  &--bordered {
+    box-shadow: 0 0 0 2px var(--tedi-neutral-100, white);
+  }
+
+  @each $type in $indicator-types {
+    &--#{$type} {
+      background-color: var(--status-badge-indicator-#{$type});
+    }
+  }
+}
diff --git a/src/tedi/components/tags/status-indicator/status-indicator.spec.tsx b/src/tedi/components/tags/status-indicator/status-indicator.spec.tsx
new file mode 100644
index 000000000..dbdd42f2a
--- /dev/null
+++ b/src/tedi/components/tags/status-indicator/status-indicator.spec.tsx
@@ -0,0 +1,36 @@
+import { render } from '@testing-library/react';
+
+import { StatusIndicator } from './status-indicator';
+
+describe('StatusIndicator', () => {
+  it('renders with default props', () => {
+    const { container } = render(<StatusIndicator />);
+    const indicator = container.querySelector('[data-name="status-indicator"]');
+    expect(indicator).toBeInTheDocument();
+    expect(indicator).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('renders with danger type', () => {
+    const { container } = render(<StatusIndicator type="danger" />);
+    const indicator = container.querySelector('[data-name="status-indicator"]');
+    expect(indicator).toHaveClass('tedi-status-indicator--danger');
+  });
+
+  it('renders with large size', () => {
+    const { container } = render(<StatusIndicator size="lg" />);
+    const indicator = container.querySelector('[data-name="status-indicator"]');
+    expect(indicator).toHaveClass('tedi-status-indicator--lg');
+  });
+
+  it('renders with border', () => {
+    const { container } = render(<StatusIndicator hasBorder />);
+    const indicator = container.querySelector('[data-name="status-indicator"]');
+    expect(indicator).toHaveClass('tedi-status-indicator--bordered');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<StatusIndicator className="custom" />);
+    const indicator = container.querySelector('[data-name="status-indicator"]');
+    expect(indicator).toHaveClass('custom');
+  });
+});
diff --git a/src/tedi/components/tags/status-indicator/status-indicator.stories.tsx b/src/tedi/components/tags/status-indicator/status-indicator.stories.tsx
new file mode 100644
index 000000000..15c8d24f1
--- /dev/null
+++ b/src/tedi/components/tags/status-indicator/status-indicator.stories.tsx
@@ -0,0 +1,73 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Text } from '../../base/typography/text/text';
+import { Col, Row } from '../../layout/grid';
+import { StatusIndicator } from './status-indicator';
+
+/**
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.38.59?node-id=2405-53326&m=dev" target="_BLANK">Figma ↗</a>
+ */
+const meta: Meta<typeof StatusIndicator> = {
+  component: StatusIndicator,
+  title: 'TEDI-Ready/Components/Tag/StatusIndicator',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.38.59?node-id=2405-53326&m=dev',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof StatusIndicator>;
+
+export const Default: Story = {
+  args: {
+    type: 'success',
+    size: 'sm',
+    hasBorder: false,
+  },
+};
+
+const types = ['success', 'danger', 'warning', 'inactive'] as const;
+const sizes = ['sm', 'lg'] as const;
+
+export const AllVariants: Story = {
+  render: () => (
+    <div>
+      {sizes.map((size) => (
+        <Row key={size} className="padding-14-16">
+          <Col width={2} className="display-flex align-items-center">
+            <Text modifiers="bold">{size === 'sm' ? 'Small' : 'Large'}</Text>
+          </Col>
+          <Col className="display-flex align-items-center gap-3">
+            {types.map((type) => (
+              <StatusIndicator key={type} type={type} size={size} />
+            ))}
+          </Col>
+        </Row>
+      ))}
+      {sizes.map((size) => (
+        <Row key={`${size}-bordered`} className="padding-14-16">
+          <Col width={2} className="display-flex align-items-center">
+            <Text modifiers="bold">{size === 'sm' ? 'Small bordered' : 'Large bordered'}</Text>
+          </Col>
+          <Col className="display-flex align-items-center gap-3">
+            {types.map((type) => (
+              <StatusIndicator key={type} type={type} size={size} hasBorder />
+            ))}
+          </Col>
+        </Row>
+      ))}
+    </div>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <span style={{ position: 'relative' }}>
+      Lugemata teated&nbsp;
+      <StatusIndicator type="danger" position="top-right" />
+    </span>
+  ),
+};
diff --git a/src/tedi/components/tags/status-indicator/status-indicator.tsx b/src/tedi/components/tags/status-indicator/status-indicator.tsx
new file mode 100644
index 000000000..994b26358
--- /dev/null
+++ b/src/tedi/components/tags/status-indicator/status-indicator.tsx
@@ -0,0 +1,60 @@
+import cn from 'classnames';
+
+import styles from './status-indicator.module.scss';
+
+export type StatusIndicatorType = 'success' | 'danger' | 'warning' | 'inactive';
+export type StatusIndicatorSize = 'sm' | 'lg';
+export type StatusIndicatorPosition = 'default' | 'top-right';
+
+export interface StatusIndicatorProps {
+  /**
+   * The status type, which determines the indicator color.
+   * @default 'success'
+   */
+  type?: StatusIndicatorType;
+  /**
+   * The size of the indicator.
+   * @default 'sm'
+   */
+  size?: StatusIndicatorSize;
+  /**
+   * Whether the indicator has a white border ring.
+   * @default false
+   */
+  hasBorder?: boolean;
+  /**
+   * Controls positioning of the indicator.
+   * - `'default'` — inline, no absolute positioning
+   * - `'top-right'` — absolutely positioned at the top-right corner of the parent
+   * @default 'default'
+   */
+  position?: StatusIndicatorPosition;
+  /**
+   * Additional class name(s)
+   */
+  className?: string;
+}
+
+export const StatusIndicator = (props: StatusIndicatorProps): JSX.Element => {
+  const { type = 'success', size = 'sm', hasBorder = false, position = 'default', className } = props;
+
+  return (
+    <span
+      data-name="status-indicator"
+      className={cn(
+        styles['tedi-status-indicator'],
+        styles[`tedi-status-indicator--${type}`],
+        styles[`tedi-status-indicator--${size}`],
+        { [styles['tedi-status-indicator--bordered']]: hasBorder },
+        { [styles['tedi-status-indicator--top-right']]: position === 'top-right' },
+        className
+      )}
+      role="img"
+      aria-hidden="true"
+    />
+  );
+};
+
+StatusIndicator.displayName = 'StatusIndicator';
+
+export default StatusIndicator;
diff --git a/src/tedi/helpers/hooks/use-scroll-fade.spec.tsx b/src/tedi/helpers/hooks/use-scroll-fade.spec.tsx
new file mode 100644
index 000000000..3a8082a0a
--- /dev/null
+++ b/src/tedi/helpers/hooks/use-scroll-fade.spec.tsx
@@ -0,0 +1,173 @@
+import { act, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { useScrollFade, UseScrollFadeOptions } from './use-scroll-fade';
+
+let resizeCallbacks: Map<Element, () => void>;
+
+beforeEach(() => {
+  resizeCallbacks = new Map();
+  global.ResizeObserver = jest.fn().mockImplementation((cb: ResizeObserverCallback) => ({
+    observe: jest.fn((el: Element) => {
+      resizeCallbacks.set(el, () => cb([], {} as ResizeObserver));
+    }),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(() => {
+      resizeCallbacks.clear();
+    }),
+  }));
+});
+
+const TestComponent = (props: UseScrollFadeOptions & { testId?: string }) => {
+  const { testId = 'scrollable', ...options } = props;
+  const { scrollRef, canScrollStart, canScrollEnd, handleScroll } = useScrollFade(options);
+
+  return (
+    <div>
+      <div ref={scrollRef} onScroll={handleScroll} data-testid={testId}>
+        Content
+      </div>
+      <span data-testid="start">{String(canScrollStart)}</span>
+      <span data-testid="end">{String(canScrollEnd)}</span>
+    </div>
+  );
+};
+
+const mockElementScroll = (
+  el: HTMLElement,
+  values: {
+    scrollTop?: number;
+    scrollHeight?: number;
+    clientHeight?: number;
+    scrollLeft?: number;
+    scrollWidth?: number;
+    clientWidth?: number;
+  }
+) => {
+  for (const [key, value] of Object.entries(values)) {
+    Object.defineProperty(el, key, { value, configurable: true });
+  }
+};
+
+describe('useScrollFade', () => {
+  describe('vertical (default)', () => {
+    it('returns false for both when content does not overflow', () => {
+      render(<TestComponent />);
+      const el = screen.getByTestId('scrollable');
+      mockElementScroll(el, { scrollTop: 0, scrollHeight: 200, clientHeight: 200 });
+
+      act(() => {
+        resizeCallbacks.forEach((cb) => cb());
+      });
+
+      expect(screen.getByTestId('start')).toHaveTextContent('false');
+      expect(screen.getByTestId('end')).toHaveTextContent('false');
+    });
+
+    it('shows end fade when at top with overflow', () => {
+      render(<TestComponent />);
+      const el = screen.getByTestId('scrollable');
+      mockElementScroll(el, { scrollTop: 0, scrollHeight: 500, clientHeight: 200 });
+
+      act(() => {
+        resizeCallbacks.forEach((cb) => cb());
+      });
+
+      expect(screen.getByTestId('start')).toHaveTextContent('false');
+      expect(screen.getByTestId('end')).toHaveTextContent('true');
+    });
+
+    it('shows both fades when scrolled to middle', () => {
+      render(<TestComponent />);
+      const el = screen.getByTestId('scrollable');
+      mockElementScroll(el, { scrollTop: 100, scrollHeight: 500, clientHeight: 200 });
+
+      act(() => {
+        resizeCallbacks.forEach((cb) => cb());
+      });
+
+      expect(screen.getByTestId('start')).toHaveTextContent('true');
+      expect(screen.getByTestId('end')).toHaveTextContent('true');
+    });
+
+    it('shows only start fade when scrolled to end', () => {
+      render(<TestComponent />);
+      const el = screen.getByTestId('scrollable');
+      mockElementScroll(el, { scrollTop: 300, scrollHeight: 500, clientHeight: 200 });
+
+      act(() => {
+        resizeCallbacks.forEach((cb) => cb());
+      });
+
+      expect(screen.getByTestId('start')).toHaveTextContent('true');
+      expect(screen.getByTestId('end')).toHaveTextContent('false');
+    });
+
+    it('calls onScrollToStart when at start', () => {
+      const onScrollToStart = jest.fn();
+      render(<TestComponent onScrollToStart={onScrollToStart} />);
+      const el = screen.getByTestId('scrollable');
+      mockElementScroll(el, { scrollTop: 0, scrollHeight: 500, clientHeight: 200 });
+
+      act(() => {
+        resizeCallbacks.forEach((cb) => cb());
+      });
+
+      expect(onScrollToStart).toHaveBeenCalled();
+    });
+
+    it('calls onScrollToEnd when at end', () => {
+      const onScrollToEnd = jest.fn();
+      render(<TestComponent onScrollToEnd={onScrollToEnd} />);
+      const el = screen.getByTestId('scrollable');
+      mockElementScroll(el, { scrollTop: 300, scrollHeight: 500, clientHeight: 200 });
+
+      act(() => {
+        resizeCallbacks.forEach((cb) => cb());
+      });
+
+      expect(onScrollToEnd).toHaveBeenCalled();
+    });
+  });
+
+  describe('horizontal', () => {
+    it('shows end fade when at start with overflow', () => {
+      render(<TestComponent direction="horizontal" />);
+      const el = screen.getByTestId('scrollable');
+      mockElementScroll(el, { scrollLeft: 0, scrollWidth: 500, clientWidth: 200 });
+
+      act(() => {
+        resizeCallbacks.forEach((cb) => cb());
+      });
+
+      expect(screen.getByTestId('start')).toHaveTextContent('false');
+      expect(screen.getByTestId('end')).toHaveTextContent('true');
+    });
+
+    it('shows both fades when scrolled to middle', () => {
+      render(<TestComponent direction="horizontal" />);
+      const el = screen.getByTestId('scrollable');
+      mockElementScroll(el, { scrollLeft: 100, scrollWidth: 500, clientWidth: 200 });
+
+      act(() => {
+        resizeCallbacks.forEach((cb) => cb());
+      });
+
+      expect(screen.getByTestId('start')).toHaveTextContent('true');
+      expect(screen.getByTestId('end')).toHaveTextContent('true');
+    });
+
+    it('shows only start fade when scrolled to end', () => {
+      render(<TestComponent direction="horizontal" />);
+      const el = screen.getByTestId('scrollable');
+      mockElementScroll(el, { scrollLeft: 300, scrollWidth: 500, clientWidth: 200 });
+
+      act(() => {
+        resizeCallbacks.forEach((cb) => cb());
+      });
+
+      expect(screen.getByTestId('start')).toHaveTextContent('true');
+      expect(screen.getByTestId('end')).toHaveTextContent('false');
+    });
+  });
+});
diff --git a/src/tedi/helpers/hooks/use-scroll-fade.ts b/src/tedi/helpers/hooks/use-scroll-fade.ts
new file mode 100644
index 000000000..e23c48d7a
--- /dev/null
+++ b/src/tedi/helpers/hooks/use-scroll-fade.ts
@@ -0,0 +1,120 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export interface UseScrollFadeOptions {
+  /**
+   * Scroll direction to track
+   * @default 'vertical'
+   */
+  direction?: 'vertical' | 'horizontal';
+  /**
+   * Called when element is scrolled to start (top or left)
+   */
+  onScrollToStart?: () => void;
+  /**
+   * Called when element is scrolled to end (bottom or right)
+   */
+  onScrollToEnd?: () => void;
+}
+
+export interface UseScrollFadeReturn {
+  /**
+   * Callback ref to attach to the scrollable element.
+   * Sets up ResizeObserver and initial measurement.
+   */
+  scrollRef: React.RefCallback<HTMLElement>;
+  /**
+   * Whether content can be scrolled towards the start (top or left)
+   */
+  canScrollStart: boolean;
+  /**
+   * Whether content can be scrolled towards the end (bottom or right)
+   */
+  canScrollEnd: boolean;
+  /**
+   * Scroll event handler to attach to the scrollable element's onScroll
+   */
+  handleScroll: React.UIEventHandler<HTMLElement>;
+}
+
+export const useScrollFade = (options: UseScrollFadeOptions = {}): UseScrollFadeReturn => {
+  const { direction = 'vertical', onScrollToStart, onScrollToEnd } = options;
+
+  const [canScrollStart, setCanScrollStart] = useState(false);
+  const [canScrollEnd, setCanScrollEnd] = useState(false);
+  const nodeRef = useRef<HTMLElement | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
+  const onScrollToStartRef = useRef(onScrollToStart);
+  const onScrollToEndRef = useRef(onScrollToEnd);
+  const wasAtStartRef = useRef(false);
+  const wasAtEndRef = useRef(false);
+
+  onScrollToStartRef.current = onScrollToStart;
+  onScrollToEndRef.current = onScrollToEnd;
+
+  const checkFade = useCallback(
+    (el: HTMLElement) => {
+      let scrollPos: number;
+      let scrollSize: number;
+      let clientSize: number;
+
+      if (direction === 'horizontal') {
+        scrollPos = el.scrollLeft;
+        scrollSize = el.scrollWidth;
+        clientSize = el.clientWidth;
+      } else {
+        scrollPos = el.scrollTop;
+        scrollSize = el.scrollHeight;
+        clientSize = el.clientHeight;
+      }
+
+      const atStart = scrollPos <= 1;
+      const atEnd = Math.abs(scrollSize - scrollPos - clientSize) <= 1;
+
+      setCanScrollStart(!atStart);
+      setCanScrollEnd(!atEnd);
+
+      if (atStart && !wasAtStartRef.current) onScrollToStartRef.current?.();
+      if (atEnd && !wasAtEndRef.current) onScrollToEndRef.current?.();
+
+      wasAtStartRef.current = atStart;
+      wasAtEndRef.current = atEnd;
+    },
+    [direction]
+  );
+
+  const handleScroll = useCallback(
+    (e: React.UIEvent<HTMLElement>) => {
+      checkFade(e.currentTarget);
+    },
+    [checkFade]
+  );
+
+  const scrollRef = useCallback(
+    (node: HTMLElement | null) => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+
+      nodeRef.current = node;
+
+      if (node) {
+        checkFade(node);
+
+        observerRef.current = new ResizeObserver(() => {
+          checkFade(node);
+        });
+        observerRef.current.observe(node);
+      }
+    },
+    [checkFade]
+  );
+
+  useEffect(() => {
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, []);
+
+  return { scrollRef, canScrollStart, canScrollEnd, handleScroll };
+};
diff --git a/src/tedi/helpers/index.ts b/src/tedi/helpers/index.ts
index c239ce85e..990513415 100644
--- a/src/tedi/helpers/index.ts
+++ b/src/tedi/helpers/index.ts
@@ -7,3 +7,4 @@ export * from './hooks/use-scroll';
 export * from './hooks/use-is-touch-device';
 export * from './hooks/use-file-upload';
 export * from './hooks/use-what-input';
+export * from './hooks/use-scroll-fade';
diff --git a/src/tedi/index.ts b/src/tedi/index.ts
index 319dbf905..2b21f8169 100644
--- a/src/tedi/index.ts
+++ b/src/tedi/index.ts
@@ -11,6 +11,7 @@ export * from './components/loaders/spinner/spinner';
 export * from './components/loaders/skeleton';
 export * from './components/tags/tag/tag';
 export * from './components/tags/status-badge/status-badge';
+export * from './components/tags/status-indicator/status-indicator';
 export * from './components/buttons/closing-button/closing-button';
 export * from './components/buttons/button/button';
 export * from './components/buttons/info-button/info-button';
@@ -24,6 +25,7 @@ export * from './components/notifications/toast/toast';
 export * from './components/cards/card';
 export * from './components/navigation/hash-trigger/hash-trigger';
 export * from './components/navigation/link/link';
+export * from './components/navigation/tabs';
 export * from './components/form/textfield/textfield';
 export * from './components/form/textarea/textarea';
 export * from './components/form/number-field/number-field';
diff --git a/src/tedi/providers/label-provider/labels-map.ts b/src/tedi/providers/label-provider/labels-map.ts
index e93c30caa..8483ae1b2 100644
--- a/src/tedi/providers/label-provider/labels-map.ts
+++ b/src/tedi/providers/label-provider/labels-map.ts
@@ -72,9 +72,16 @@ const muiTranslationsUrl =
  * et, en and ru values must be of same type
  */
 export const labelsMap = validateDefaultLabels({
+  'tabs.more': {
+    description: 'Label for the mobile overflow button in Tabs',
+    components: ['Tabs'],
+    et: 'Veel',
+    en: 'More',
+    ru: 'Ещё',
+  },
   close: {
     description: 'Used for closing',
-    components: ['CloseButton', 'Collapse', 'Notification', 'FileUpload', 'Dropdown', 'Tooltip'],
+    components: ['CloseButton', 'Collapse', 'Notification', 'FileUpload', 'Dropdown', 'Tooltip', 'Tabs'],
     et: 'Sulge',
     en: 'Close',
     ru: 'Закрыть',